/*------------------------ Mobile Styles -----------------------*/
@media only screen and (max-width: 1007px) and (min-width: 1px) {
/*	html{
	 background-size: cover;
	 background-position: center;
	 max-width:1007px;
	}*/
  /*MENU BAR--------------------------------------------------------*/
  .menu {
    grid-area: menu_section;
    height: 90px;
    width: 100%;
    max-width: 100%;
    position: fixed;
    z-index: 100;
    top: 0;
    background-color: #fff;
    -webkit-transition: top 0.3s ease-in-out;
    -moz-transition: top 0.3s ease-in-out;
    -o-transition: top 0.3s ease-in-out;
    transition: top 0.3s ease-in-out;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "nav";
    padding-left: 0;
    padding-right: 0;
    grid-row-gap: 10px;

    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    /*  border-bottom: 1px solid rgba(0,0,0,0.2);*/
  }
  .logo2 {
    grid-area: logo;
    padding-left: 0%;
    padding-top: 10px;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
  }

  .QLogo {
    height: 40px;
  }

  /*MAIN PIC--------------------------------------------------------*/
  .frontPicture {
	 /*background-image: url("../Pictures/LogoAndBackgrounds/mainPic.jpeg");*/
    margin-right: 0;
    margin-left: 0;
    margin-top: 50px;
    margin-bottom: 0;
    padding: 5%;
    min-height: 280px;
  }
  .mainPicText {
    font-size: 1.25em;
    border-radius: 15px;
    text-align: center;
    justify-self: left;
    min-width: 0;
    margin: 15%;
  }

  /*SUPER CLASSES---------------------------------------------------*/
  .sectionTitle {
    padding-top: 6%;
  }
  .titleDivide {
    padding-top: 2%;
  }

  /*NAV BAR---------------------------------------------------------*/
  .navicons {
    grid-area: nav;
    display: grid;
    grid-template-areas: "about", "products", "team", "contact";
    width: 100%;
  }
  .clickableBoxes {
    width: 100%;
    min-width: 50px;
    height: 100%;
    min-height: 30px;
    box-shadow: none;
    transition: height 0.5s;
    transition: box-shadow 5s;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    display: grid;
  }
  .clickableBoxes:hover {
    height: 0%;
    box-shadow: none;
    /*
      box-shadow:5px 5px 10px rgba(0, 0, 0, 0.2);
      -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.2);
      -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.2);
*/
  }

  /*ABOUT-----------------------------------------------------------*/
  .aboutSection {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    margin-left: 6%;
    margin-right: 6%;
    margin-bottom: 6%;

    grid-template-areas:
      "companyPic"
      "companyTxt"
      "missionPic"
      "missionTxt"
      "motivationPic"
      "motivationTxt";
  }
	#companyTxt {background-color: #48aab5;}
	#missionTxt{background-color: #747474;}
	#motivationTxt{background-color: #48aab5;}
	.Pictures{
	 max-height: 320px;
	 }
  .doctorPic{ object-position: 90% 0%;}
  /*.ambPic{ border: none; object-position: 0% 70%;}*/
  /*.toolPic{ border: none; object-position: 20% 30%;}*/		
  /*.Pictures{
  	 min-height: 150px;
  }*/

  /*MID TITLE-------------------------------------------------------*/
  .midTitle {
    font-size: 1.6em;
    padding-top: 10%;
    padding-bottom: 10%;
  }

  /*PRODUCTS--------------------------------------------------------*/
  .productSection {
    grid-column-gap: 0%;
    grid-template-columns: 1fr;
    grid-template-areas:
      "nav"
      "title"
      "pic"
      "desc";
    grid-row-gap: 0px;
  }
  #DAQTitle, #DAQDesc,#DAQPic, 
  #CoVentTitle, #CoVentDesc,#CoVentPic, 
  #VenTestTitle, #VenTestDesc,#VenTestPic {
    display: none;
  }
  #AKITitle, #DAQTitle, #CoVentTitle, #VenTestTitle  {
    grid-area: title;
    pad-bottom: 20px;
  }
  .akiImg, .daqImg, .CoVentImg, .VenTestImg {
    grid-area: pic;
  }
  .AKIdesc, .DAQdesc, .CoVentdesc, .VenTestdesc {
    grid-area: desc;
  }
  .navSwiper {
    display: grid;
  }
  .prodTitles {
    font-size: 2em;
  }
  .prodDesc {
    padding-bottom: 10px;
    padding-top: 10px;
  }
  .prodImage {
    padding-top: 0px;
  }
  .futureVen {
    padding-top: 0;
  }
  .gutter {
    display: none;
  }

  /*MEDIA------------------------------------------------------------*/
    .mediaSection {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
      margin-left: 6%;
      margin-right: 6%;
      margin-bottom: 6%;

      grid-template-areas:
        "mediaPic1" 
        "mediaTxt1"
        "mediaPic2"
        "mediaTxt2"
        "mediaPic3"
        "mediaTxt3"
        "mediaLink";
    }
    .mediaPics {
    	/*object-fit:fill;*/
    	padding-left:5%;
    	padding-right:5%;
    }
    #mediaTxt1{background-color:#747474; color: #fff;}
    #mediaTxt2{background-color:#54aab5; color: #fff;}
    #mediaTxt3{background-color:#747474; color: #fff;}

  /*TEAM------------------------------------------------------------*/
  .teamSection {
    margin-bottom: 20px;
  }

  /*CONTACT---------------------------------------------------------*/
  .contactSection {
    grid-template-areas:
      "collaboration"
      "social"
      "address";
    grid-template-columns: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
    padding-bottom: 20px;
  }

  .social {
    margin: auto;
  }

  /* .sociallogo{
        height: 40px;
        width: 40px;
        cursor: pointer;
    } */

  .contactGutter {
    display: none;
  }

  /*FOOTER----------------------------------------------------------*/
  .footerCard {
    padding-bottom: 5%;
  }
  .footerSection {
    display: grid;
    grid-template-areas:
      "privacy"
      "terms"
      "FAQ"
      "copyright";
    min-height: 50px;
    grid-row-gap: 15%;
    padding-top: 10px;
    padding-bottom: 40px;
  }

  /*Tablet Mode-----------------------------------------------------*/
  @media only screen and (min-width: 671px) and (max-width: 1007px) {
	 html{
	  background-image: url("../Pictures/LogoAndBackgrounds/mainPic.jpeg");
     background-attachment: fixed;
     background-repeat: no-repeat;
     background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
     max-width:1007px;
    /*object-position: 30% 0%;*/
    /*background-position: auto;*/
	 }
	 body{
	  background-image: url("../Pictures/LogoAndBackgrounds/mainPic.jpeg");
     background-attachment: fixed;
     background-repeat: no-repeat;
     background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
     max-width:1007px;
    /*object-position: 30% 0%;*/
    /*background-position: auto;*/
	 }
	 .frontPicture{
	 	max-height: 360px;
	 }
    .mainPicText {
      font-size: 1.9em;
      margin: 10%;
    }

    .aboutSection {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      margin-left: 6%;
      margin-right: 6%;
      margin-bottom: 6%;

      grid-template-areas:
        "companyPic companyTxt "
        "missionTxt missionPic"
        "motivationPic motivationTxt";
    }
    .Pictures{
	 max-height: 320px;
	 }
	 .doctorPic{ object-position: 90% 0%;}
    /*PRODUCT------------------------------------------------------------*/
	  .prodTitles {
	    font-size: 1.2em;
	  }
	  .prodDesc {
	    padding-bottom: 10px;
	    padding-top: 10px;
	  }
	  .prodImage {
	    padding-top: 0px;
	    width: 60%;
	    /*margin-left: 40%;*/
	    /*margin-right: 40%;*/
	  }

    /*MEDIA------------------------------------------------------------*/
    .mediaSection {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr; /*omit last row*/
      margin-left: 6%;
      margin-right: 6%;
      margin-bottom: 6%;

      grid-template-areas:
        "mediaPic1 mediaTxt1"
        "mediaTxt2 mediaPic2"
        "mediaPic3 mediaTxt3"
        "mediaLink mediaLink";
    }
    .mediaPics{
    	object-fit: fill;
    	padding-left: 0%;
    	padding-right: 0%;
    }
    #mediaTxt1{background-color:#747474; color: #fff;}
    #mediaTxt2{background-color:#54aab5; color: #fff;}
    #mediaTxt3{background-color:#747474; color: #fff;}
    
  }
}