* {
  margin:0;
  padding:0;
  font-family: Poppins;
}

/**************** NAVBAR ******************/

nav {
  /*background: #FFFFFF;*/
  background: #1D4074;
  color: #000000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

a.link.phone {
  font-weight: 400;
}

.number {
  font-weight: 600;
}

#socials {
  display: flex;
  justify-content: center;
  align-items: center;
}

.icons {
  display: flex;
  align-items: center;
  justify-content: center;
}

#linkedin{
  margin-left: 10px;
  margin-right: 20px;
}

#twitter {
  margin-right: 20px;
}

.icons img {
  width: 20px;
  height: 20px;
  filter: invert(91%) sepia(0%) saturate(7500%) hue-rotate(96deg) brightness(112%) contrast(108%);
}

.login {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

#login {
  padding: 10px 16px;
  border-radius: 4px;
  background-color: #EAEAEA;

  color: #000000;
  font-family: Poppins;
  font-size: 0.875em;
  font-weight: 500;
}

nav .mainMenu {
  display: flex;
  justify-content: space-between;
  list-style: none;
  width: 100%;
}

nav .mainMenu li a {
  display:inline-block;
  padding: 15px;
  text-decoration: none;
  color: #FFFFFF;
  font-size: 1.05em;
  font-weight: 500;
}

nav .openMenu {
  font-size: 2em;
  margin: 20px;
  display:none;
  cursor: pointer;
}

nav .mainMenu .closeMenu {
  font-size: 2em;
  display: none;
  cursor: pointer;
}

nav .logo {
  /*margin: 20px;*/
  cursor: pointer;
  background: white;
  padding: 10px 20px 10px 20px;
}

.vl{
  border-left: 1px solid #FFFFFF;
  height: 25px;
  width: 1px;
  opacity: 0.3;
  position:relative; 
  box-sizing: border-box;
  /*top:14px*/
}

.line {
  display: none;
}

.nav-left{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.nav-right{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.link, .login {
  white-space: nowrap;
}
/************** END NAVBAR **************/


/************* CART ICON **************/

.cart-icon {
  margin-right: 20px;
}

#lblCartCount {
    font-size: 12px;
    background: #00BCE9;
    color: #FFFFFF;
    padding: 0 5px;
    vertical-align: top;
    margin-left: -10px;
    margin-bottom: 10px;
}
.badge {
  padding-left: 9px;
  padding-right: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}

#cart-icon {
  color: #FFFFFF;
}

/*********** END CART ICON ************/


/************* SECTION 1 **************/
.section1{
  height: 49vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.message {
  font-weight: 600;
  font-size: 1.5em;
  text-align: center;
}

/*********** END SECTION 1 ************/

/************** FOOTER  **************/
footer {
  height: 100%;
  background-color: #1D4074;
  display: flex;
  justify-content: center;                  
  align-items: center;
  padding-top: 1.4em;
  padding-bottom: 1.4em;
}

#footer-content{
   width: 80%;
}

#footer-section1 {
   padding-top: 50px;
   /*width: 45%;*/
   margin-bottom: 2%;
}

#footer-section1 #footer1-content {
  color: #FFFFFF;
  font-family: Poppins;
  font-size: 1.25em;
  font-weight: bold;
}

#footer-section2 {
   display: flex;
}

#footer2a-content {
  color: #FFFFFF;
  font-family: Poppins;
  font-size:0.9375em;
  width: 280px;
}

#footer2b-content {
  color: #FFFFFF;
  font-family: Poppins;
  font-size:0.9375em;
  width: 280px;
}

#footer2c-content {
   width: 125px;
   display: flex;
   justify-content: flex-end;
   margin-left: auto;
}

#footer-social1 img, #footer-social2 img {
   height: 35px;
   width: 35px;
   filter: invert(91%) sepia(0%) saturate(7500%) hue-rotate(96deg) brightness(112%) contrast(108%);
}

#footer-social2 img{
  padding-left: 15px;
}

#footer-social2{
   margin-left: 2%;
}

hr {
   border: 1px solid #4472B6;
   margin-top: 2%;
   margin-bottom: 2% ;
}

#footer3-content {
   display: flex;
}

#footer3-content span, #footer3-content span a {
  opacity: 0.5;
  color: #FFFFFF;
  font-family: Poppins;
  font-size:0.9375em;
  font-weight: 500;
}

#policy {
   width: 50%;
}

#policy a {
  text-decoration: none;
}

#copyright {
   width:100%;
   display: flex;
   justify-content: flex-end;
}

#footer-link2 {
  padding-left: 3%;
  padding-right: 3%;
}
/************ END FOOTER  ************/

.sec {
  height: 500px;
  background-color: grey;
}

.sec2 {
  height: 500px;
  background-color: white;
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
}

.sec3 {
  height: 500px;
  /*background-color: grey;*/
  position:relative;
   overflow:hidden;
}

.sec4 {
  height: 300px;
  /*background-color: red;*/
  margin-left:12%;
  margin-right:12%;
  display: flex;
   align-items: center;

}

.sec5{
  height: 707px;
  background-color: black;
  display: flex;
   align-items: center;
}

.sec6{
  height: 500px;
  background-color: white;
  margin-left:12%;
  margin-right:12%;
  display: flex;
   align-items: center;

   position:relative;
   overflow:hidden;
}

footer {
  height: 345px;
  background-color: #1D4074;
}

/******** END MEDIA 992px *********/

@media(max-width: 1535px){
    .colon, .number{
      display: none;
    }
    .nav-right{
      white-space: nowrap;
    }
    div.nav-left{

      white-space: nowrap;
    }

    .product {
      padding-bottom: 5%;
    }
   }

   @media(max-width: 1400px){
  .cart-icon {
    margin-right: 0px;
  }

  #cart-icon {
    color: #000000;
  }
  
  nav .logo {
    z-index: 100;
    width: 100%;
  }
  nav {
    background: #FFFFFF;  
  }
    nav .mainMenu {
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 10;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #FFFFFF;
        transition: top 1s ease;
        display: none;
    }

    .nav-left{
      display: flex;
      flex-direction: column;
      margin-top: 100px;
      justify-content: flex-end;
      align-items: center;
    }

    .nav-right{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
    }

    nav .mainMenu li a {
      color: #000000;
    }

    nav .mainMenu .closeMenu {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
    }

    nav .openMenu {
        display: block;
    }

    a.icons {
        display: none;
    }

    hr.line {
    border: 0;
    clear:both;
    display:block;
    width: 96%;               
    background-color: #D8D8D8;
    height: 1px;
    width: 150%;
  }

  .login {
    margin: 0;
  }

  .vl {
    display: none;
  }

    .education {
      display: none;
    }

    .sec6 .caption4 .description{
      font-size: 16px;
    }
  }


@media(max-width: 800px){

  nav .logo {
    z-index: 100;
    width: 100%;
  }
  nav {
    background: #FFFFFF;  
  }
    nav .mainMenu {
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 10;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #FFFFFF;
        transition: top 1s ease;
        display: none;
    }

    .nav-left{
      display: flex;
      flex-direction: column;
      margin-top: 100px;
      justify-content: flex-end;
      align-items: center;
    }

    .nav-right{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
    }

  nav .mainMenu li a {
    color: #000000;
  }

    nav .mainMenu .closeMenu {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
    }

    nav .openMenu {
        display: block;
    }

    a.icons {
        display: none;
    }

    hr.line {
    border: 0;
    clear:both;
    display:block;
    width: 96%;               
    background-color: #D8D8D8;
    height: 1px;
    width: 150%;
  }

  .login {
    margin: 0;
  }

  .vl {
    display: none;
  }
}


@media (max-width: 992px){
   
   #footer-content{
      height: 100%;
   }

   #footer-section1 #footer1-content{
    font-size: 1.0em;
   }

   #footer2a-content{
    width: 60%;
    font-size: 0.8em;
   }

   #footer2b-content{
    width: 60%;
    font-size: 0.8em;
   }

   #footer-section1 #footer1-content{
    font-size: 1.0em;
  }

  #footer3-content span, #footer3-content span a{
    font-size: 0.8em;
  }

   .slideshow-container {
    height: 100%;
  }
  .sec2 {
    height: 100%;
    flex-direction: column;
    padding: 10% 5% 10% 5%;
  }
  .sec2 .cap0{
    max-width: 100ch;
    padding-bottom: 5%;
    line-height: 1.3;
    font-size: 24px;
  }

  .sec2 .cap1{
    font-size: 17px;
  }

  .sec3 {
    height: 100%;
  }
  .pic1 {
    width: 100%;
  }
  .pic2 img{
    display: none;
  }

  .sec4 {
    margin: 0;
    height: 100%;
    padding-left: 5%;
    padding-right: 5%;
  }
  .sec4 .caption1{
    width: 100%;
    padding-bottom: 10%
  }

  .sec4 .caption1 h1{
    font-size: 24px;
  }
  .sec4 .caption2{
    display: none;
  }

  .sec5{
    display: none;
  }

  .sec6{
    display: none;
  }

  footer {
    height: 100%;
  }
  #footer-content{
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
  }


}
/******** END MEDIA 992px *********/

@media(max-width: 800px){
   .action {
    flex-direction: column;
    top: 10%;
    width: 200%;
    left: -50%;
   }
   .dot {
    height: 50px;
    width: 33%;
    
  }

  .dot p {
    top: 10px;
    font-size: 15px;
    font-weight: 600;
  }

  .text p {
    display: none;
  }

  .text{
    padding: 0;
    margin: 0;
    top: 65%;
    left: 28%;
  }
  
}


/*********** MEDIA 769px **********/
@media (max-width: 768px){
   #footer-content{
      height: 100%;
   }
}
/******** END MEDIA 769px ********/


@media (max-width: 639px){
  .products {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

/********** MEDIA 480px **********/
@media (max-width: 480px){
  footer {
    flex-direction: column;
    height: 100%;
  }

  #footer-content{
    height: 100%;
  }

  #footer-section1 #footer1-content {
    font-size: 0.9em;
  }

  #footer-section2{
    flex-direction: column;
  }

  #footer2a-content{
    margin-bottom: 2%;
  }

  #footer2c-content{
    justify-content: flex-start;
    margin: 0;
  }

  #copyright{
    margin-bottom: 5%;
  }

  .footer-link{
    font-size: 0.9em;
  }

  .text{
    padding: 0;
    margin: 0;
    top: 70%;
    left: 10%;
  }
}
/******* END MEDIA 480px *******/