@import url('https://fonts.googleapis.com/css?family=Armata|Karla');

 body {
   margin: 0;
   padding: 0;
   background: #8093A0;
 }

 nav {
   background-color: white;
   width: 100%;
   height: 12vw;
   max-height: 7vh;
   font-family: 'Armata', sans-serif;
   font-weight: bold;
 }

 h1 {
   margin: 0;
 }

 h2 {
   margin: 0;
 }

 h3 {
   margin: 0;
 }

 h4 {
   margin: 0;
 }

 p {
   margin: 0;
 }

 .logo {
   width: 24%;
   height: 100%;
   float: left;
   background-image: url("img/logoNT.png");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center left;

 }

 .navButton {
   width: 15%;
   height: 100%;
   color: #C23A41;
   float: right;
   line-height: 100%;
   text-align: center;
   position: relative;
   transition: all 0.15s ease;
 }

 .navButton:hover {
   background-color: #C23A41;
   color: white;
 }

 .navButton a {
   font-size: 150%;
   text-decoration: none;
   color: inherit;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }

 .feature {
   height: 40vw;
   max-height: 60vh;
   width: 100%;
   background-image: url("img/weld.jpg");
   background-size: cover;
   background-position: center top;
   color: white;
   position: relative;
 }

 .featureText {
   width: 100%;
   box-sizing: border-box;
   padding-top: 3%;
   padding-bottom: 3%;
   padding-left: 1%;
   padding-right: 1%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }

 .featureText h1 {
   text-align: center;
   font-family: 'Armata', sans-serif;
   font-size: 3.8vw;
 }

 .featureText h3 {
   text-align: center;
   font-family: 'Karla', sans-serif;
   font-size: 1.5vw;
 }

 .anchor {
   width: 100%;
   height: 23vw;
   max-height: 33vh;
   background-color: white;
   position: relative;
 }

 .anchorText {
   width: 70%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: white;
 }

 .anchorText h2 {
   color: #C23A41;
   font-size: 2.5vw;
   font-family: 'Armata', sans-serif;
   margin-bottom: 1vh;
 }

 .anchorText h4 {
   color: #37474F;
   font-size: 1.7vw;
   line-height: 3vw;
   font-family: 'Karla', sans-serif;
 }

 .catalog {
   width: 100%;
   height: 33.4vw;
   max-height: 45vh;
 }

 .catalogQuarter {
   width: 24%;
   height: 100%;
   float: left;
   box-sizing: border-box;
   padding: 0.4%;
   margin: 0.47vw;
   /*background-color: #CACDD3;*/
   cursor: pointer;
 }

 .CQimage {
   width: 100%;
   height: 78%;
   margin: auto;
   background-color: white;
   background-repeat: no-repeat;
   transition: all 0.6s ease;
 }

 #cqi1 {
   background-image: url("img/axle.jpg");
   background-position: bottom right;
   background-size: 150%;
 }

 #cqi1:hover {
   background-size: 160%;
 }

 #cqi2 {
   background-image: url("img/susp.jpg");
   background-size: 140%;
   background-position: left;
 }

 #cqi2:hover {
   background-size: 150%;
 }

 #cqi3 {
   background-image: url("img/1.jpg");
   background-size: 110%;
 }

 #cqi3:hover {
   background-size: 120%;
 }

 #cqi4 {
   background-image: url("img/2.jpg");
   background-size: 150%;
   background-position: center center;
 }

 #cqi4:hover {
   background-size: 160%;
 }


 .CQtext {
   width: 100%;
   height: 22%;
   margin: auto;
   background-color: #4C4E56;
   position: relative;
 }

 .CQtext h3 {
   width: 100%;
   text-align: center;
   font-family: 'Armata', sans-serif;
   font-size: 1.5vw;
   padding: 0;
   vertical-align: center;
   color: white;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }

 .extra {
   width: 100%;
   height: 20vw;
   margin-top: 1.8vh;
   max-height: 30vh;
   background-color: white;
 }

 .why {
   width: 50%;
   height: 100%;
   float: left;
   background-color: white;
   box-sizing: border-box;
   padding-left: 1vw;
   padding-top: 0.5vw;
 }

 .why h1 {
   color: #C23A41;
   font-size: 2.1vw;
   font-family: 'Armata', sans-serif;
   line-height: 2.6vw;
   margin-top: 0.6vw;
 }

 .why h2 {
   color: #C23A41;
   font-size: 1.2rem;
   font-family: 'Armata', sans-serif;
   line-height: 2.2rem;
 }

 .why p {
   color: #37474F;
   font-size: 1.4vw;
   line-height: 1.6vw;
   font-family: 'Karla', sans-serif;
 }

 .warrant {
   width: 50%;
   height: 100%;
   float: left;
   background-color: #C23A41;
   box-sizing: border-box;
   padding: 1vw;
 }

 footer {
   text-align: center;
   height: 3vh;
   color: white;
   font-family: 'Karla', sans-serif;
   position: relative;
 }

 footer p {
   width: 100%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }

 .color-overlay {
   width: 100vw;
   height: 100vh;
   background-color: gray;
   opacity: 0.8;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 5;
 }

 .best-overlay {
   width: 100vw;
   height: 100vh;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 10;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .overlay-box {
   background-color: white;
   height: 60%;
   width: 75%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   box-sizing: border-box;
   padding: 1%;
 }

 .overlay-box h1 {
   width: 100%;
   color: #C23A41;
   font-size: 2.1rem;
   font-family: 'Armata', sans-serif;
   text-align: center;
   margin-top: 1%;
   margin-bottom: 1%;
 }

 .overlay-wrapper {
   height: 90%;
   width: 100%;
   background-color: lightgray;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   padding: 0.5%;
 }

 .overlay-image {
   height: 97%;
   width: 40%;
   background-image: url("img/z.jpg");
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center center;
 }

 .overlay-text {
   font-family: 'Karla', sans-serif;
   height: 93%;
   width: 54%;
   margin-left: 1.5%;
 }

 .overlay-text h2 {
   font-size: 1.8rem;
   margin: 1%;
   margin-bottom: 4%;
 }

 .overlay-text p {
   font-size: 1.2rem;
   line-height: 1.6rem;
 }

 .highlight {
   text-align: right;
   width: 100%;
   color: #C23A41;
   cursor: pointer;
   margin-top: 10px;
 }

 .close {
   text-align: right;
   width: 100%;
   cursor: pointer;
 }

 .marginated {
   margin-bottom: 8%;
 }

 .disabled {
   display: none;
 }

 /*queries start*/

 @media screen and (max-width: 480px) {

   /*.logo{
    background-color: green;
  }*/
   .navButton a {
     font-size: 90%;
   }

   .anchor {
     min-height: 25vh;
   }

   .anchorText {
     width: 95%;
     height: 26vw;
   }

   .featureText h1 {
     font-size: 6.5vw;
   }

   .featureText h3 {
     font-size: 2.8vw;
   }

   .anchorText h2 {
     font-size: 4vw;
   }

   .anchorText h4 {
     font-size: 3.5vw;
     line-height: 4.2vw;
   }

   .catalog {
     height: 134vw;
     max-height: 134vw;
   }

   .catalogQuarter {
     width: 100%;
     height: 25%;
     margin: 0;
   }

   .CQimage {
     height: 65%;
   }

   .CQtext {
     height: 35%;
   }

   .CQtext h3 {
     font-size: 4vw;
   }

   #cqi1 {
     background-position: center right;
     background-size: 110%;
   }

   #cqi1:hover {
     background-size: 115%;
   }

   #cqi2 {
     background-position: center;
     background-size: 90%;
   }

   #cqi2:hover {
     background-size: 110%;
   }

   #cqi3 {
     background-position: center;
     background-size: 100% auto;
   }

   #cqi3:hover {
     background-size: 100;
   }

   #cqi4 {
     background-position: center;
     background-size: 100% auto;
   }

   #cqi4:hover {
     background-size: 110%;
   }

   .extra {
     height: 71vw;
     max-height: 71vw;
     margin-top: 0.2vh;
   }

   .why {
     height: 50%;
     width: 100%;
     float: none;
   }

   .warrant {
     height: 50%;
     width: 100%;
     float: none;
   }

   footer {
     height: 6vh;
   }

   footer p {
     font-size: 2.3vw;
   }

   .why h1 {
     font-size: 5.5vw;
     line-height: 5.8vw;
   }

   .why h2 {
     font-size: 4vw;
     line-height: 4.2vw;
     margin-top: 0.6vw;
   }

   .why p {
     font-size: 3vw;
     line-height: 3.2vw;
   }

   .best-overlay {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 10;
   display: flex;
   align-items: center;
   justify-content: center;
 }

   .overlay-wrapper {
     height: 90%;
     width: 100%;
     background-color: lightgray;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
     padding: 0.5%;
   }

   .overlay-image {
     height: 100%;
     width: 100%;
     background-image: url("img/z.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center center;
   }

   .overlay-box {
     background-color: white;
     height: 75%;
     width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     box-sizing: border-box;
     padding: 1%;
   }
 }

 @media screen and (max-width: 1080px) and (min-width:480px) {

   /*.logo{
    background-color: yellow;
  }*/
   .navButton a {
     font-size: 1.7vw;
   }

   .featureText {
     width: 100%;
   }

   .featureText h1 {
     font-size: 4.8vw;
   }

   .featureText h3 {
     font-size: 2.2vw;
   }

   .anchor {
     height: 37vw;
   }

   .anchorText {
     width: 70%;
   }

   .anchorText h2 {
     font-size: 2.7vw;
   }

   .anchorText h4 {
     font-size: 2.1vw;
     line-height: 3vw;
   }

   .catalog {
     height: 28vw;
     max-height: 22vh;
   }

   .why {
     padding-top: 0.5vw;
   }

   footer p {
     font-size: 1.5vw;
   }

 }

 @media screen and (min-width: 1080px) {

   /*.logo{
    background-color: purple;
  }*/
   .anchorText h2 {
     font-size: 2.3vw;
   }

   .anchorText h4 {
     font-size: 1.5vw;
   }
 }

 @media screen and (max-height:500px) {
   .anchorText {
     width: 100%;
   }
 }