@import url(//db.onlinewebfonts.com/c/d22ae5d7d54f77cea2dcd18ced5efd9a?family=VAGRoundedLTCYR-Black);

:root {
  --mainFont : 'Josefin Sans';
  --bodyFont : 'Open Sans';
  --themeFont : 'vagroundedbold';
  --blue : #00427B;
}

.hamburger {
  display : none;
}

::-webkit-scrollbar {
  background : var(--blue);
}

::-webkit-scrollbar-thumb {
  background-color : rgb(255,255,255,0.07);
  transition-duration : 0.5s;
  border-radius : 50px;
}

::-webkit-scrollbar-thumb:hover {
  background-color : rgb(255,255,255,0.09);
}

#video-container {
  width : 100%;
  height : 90vh;
  position : relative;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  background-color : white;
  padding-bottom : 100px;
}

video {
  width :60vw;
  height : auto;
}

body {
  margin : 0;
  padding : 0;
  overflow-x : hidden!important;
  width : 100vw!important;
}

nav {
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : space-around;
  width : 100%;
  height : auto;
  padding : 0;
  padding-top : 20px;
  position : absolute;
  left : 0;
  top : 0;
  z-index : 99!important;
  margin : 0;
}

nav > .logo {
  width : 250px;
  height : auto;
}

nav > * {
  font-family : var(--themeFont);
  font-size : 24px;
  color : var(--blue);
  transition-duration : 0.3s;
  cursor : pointer;
}

nav > *:hover {
  color : white;
}

header {
  height : 100vh;
  width : 100vw!important;
  overflow : hidden;
  padding : 0;
  margin : 0;
}

header > .logo-container {
  width : 30%;
  height : auto;
  position : absolute;
  z-index : 80;
  top : 35%;
  left : 35%;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : space-around;
}

header > .logo-container > .logo {
  width : 100%;
  height : auto;
}

h1 {
  font-size : 50px;
  color : white;
  font-family : var(--themeFont);
  text-align : center;
}

h2 {
  font-size : 46px;
  color : var(--blue);
  font-family : var(--themeFont);
  text-align : center;
}

#slide-container {
  position : relative;
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : center;
  left : 0;
  top : 0;
  width : 300vw;
  height : 100%;
  transition-duration : 0.5s;
}

.slide-img {
  width : 100vw;
  height : 100%;
  object-fit: cover;
  margin : 0;
  padding : 0;
}

#slide-1 {
  background-color : skyblue;
  object-position : top;
}

#slide-2 {
  background-color : lightgreen;
  object-position : bottom;
}

#slide-3 {
  background-image: url("../images/slide-3.jpg");
  background-position : bottom;
  background-size : cover;
  background-repeat: no-repeat;
  background-color : skyblue;
  object-position : bottom;
}

#about-cards, #products {
  display : flex;
  flex-direction : row;
  align-items : space-around;
  justify-content : center;
  width : 100vw;
  height : auto;
  margin : 0;
  padding : 0;
  flex-wrap : wrap;
}

#about-text, #about-contact {
  width : 100%;
  height : auto;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center!important;
  margin : 0;
  padding : 0;
  position : relative;
}

#about-contact > ul > * > * {
  color : var(--blue);
  text-align : center;
  font-size : 20px;
}

#about-contact > * {
  margin : 0;
  padding : 0;
}

#about-contact > ul {
  margin-top : 30px;
}

#about-text > p {
  width : 50%;
}

.card {
  width : 300px;
  height : 250px;
  padding : 25px;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  margin : 50px;
}

.card > img {
  height : 60%;
  width : auto;
}

h3 {
  font-family : var(--themeFont);
  font-size : 26px;
  color : var(--blue);
  text-align : center;
}

.header-text {
  display : none;
}

.card > p, .product-card > p, #about-text > p {
  font-family : var(--themeFont);
  font-size : 20px;
  color : var(--blue);
  text-align : center;
  z-index : 55;
}

.product-card {
  width : 500px;
  height : 500px;
  margin : 50px;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
}

.product-card > img {
  height : 70%;
  width : auto;
  transition-duration : 0.5s;
  z-index : 30;
}

.product-card > img:hover {
  transform : scale(1.2);
}

footer {
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : space-between;
  margin : 0;
  padding : 0;
  width : 100vw;
  height : auto;
  background-color : var(--blue);
}

footer > #footer-contact {
  width : 300px;
  height : auto;
  margin : 50px;
  padding : 0;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : space-around;
}

#footer-social {
  width : auto;
  height : auto;
  margin : 50px;
  padding : 0;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : space-around;
}

li {
  font-family : var(--themeFont);
  font-size : 18px;
  color : white;
  text-align : left;
  z-index : 55;
  margin : 15px;
}

ul {
  list-style : none;
}

.footer-logo {
  width : 100%;
  height : auto;
}

.footer-icon {
  width : 50px;
  height : 50px;
  fill : white;
  margin : 10px;
}

#footerCredit {
  font-family : var(--themeFont)
  color : var(--blue);
  width : 100%;
  text-align : right;
  font-size : 18px;
}

#credit {
  font-family : var(--themeFont)
  color : white;
}

#credit:hover {
  cursor : pointer;
  text-decoration : underline;

}

#footerSectionDiv {
  background-color : var(--blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width : 100vw;
}

#footerNavDiv {
  display : flex;
  flex-direction: row;
  align-items: stretch;
  justify-content:  space-around;
  padding : 0;
  padding-bottom : 25px;
  width : 40%;
}

.footerLink {
  font-family : var(--themeFont);
  color : white;
  font-size: 16px;
}

.footerLink:hover {
  text-decoration : underline;
}

hr {
  border : 1px solid white;
  width : 80%;
}

a {
  text-decoration : none;
  color : var(--blue);
}

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


  .hamburgerContainer {
    display : block!important;
  }

  .hamburger {
    font-size : 40px;
    display : block;
    width : 120px;
    height : 120px;
    position : absolute;
    left : 5px;
    top : 5px;
    transition-duration: 0.5s;
    color : var(--blue);
    background-color : rgb(0,0,0,0);
    border-radius : 100px;
    border : none;
    cursor : pointer;
    z-index : 99;
    line-height : 5px;
  }

  #hamburgerX {
    z-index : 99!important;
    opacity : 0;
    color : var(--blue);
    }

    #navDiv {
      position : absolute!important;
      width : 100%;
      left : -120%;
      height : 100vh;
      margin : 0;
      padding : 0;
      background-color : white;
      z-index : 90!important;
      display : flex;
      flex-direction : column;
      align-items : center;
      justify-content: center;
      overflow : hidden;
      transition-duration : 0.5s;
    }

    #navDiv > p {
      font-weight : bold;
      margin : 0;
      margin-top : 50px;
      width : 100%;
      text-align : center;
    }

    #navDiv > a {
      padding : 20px;
      padding-left : 50vw;
      padding-right : 50vw;
      background-color : rgb(0,0,0,0.02);
      margin-top : 20px;
      transition-duration : 0.3s;
    }

    #nav-logo {
      width : 40%;
      height : auto;
      margin : 20px;
    }

    header {
        height : 100vh;
    }

    header > .logo-container {
      width : 70%;
      top : 40%;
      left : 16%;
    }

    h1 {
      color : white;
      font-family : var(--themeFont);
      text-align : center;
    }

    h2 {
      color : var(--blue);
      font-family : var(--themeFont);
      text-align : center;
    }

    #slide-1 {
      background-color : skyblue;
      object-position : right;
    }

    #slide-2 {
      background-color : lightgreen;
      object-position : right;
    }

    #slide-3 {
        background-image: url("../images/slide-3_mobile.jpg");
        background-position : center;
        background-size : cover;
        background-repeat: no-repeat;
    }

    #about-cards, #products {
      flex-direction : column;
      align-items : center;
      justify-content : center;
      width : 100%;
      height : auto;
    }

    #about-text, #about-contact {
      display : flex;
      flex-direction : column;
      align-items : space-around;
      justify-content : center;
      width : 100%;
      height : auto;
      margin : 0;
      padding : 0;
    }

    #about-text > p {
      width : 95%;
      font-family : var(--themeFont);
      color : var(--blue);
      text-align : center;
      z-index : 55;
      font-weight : normal;
    }

    #about-contact > ul > * > * {
      color : var(--blue);
      text-align : center;
    }

    #about-contact > * {
      margin : 0;
      padding : 0;
    }

    #about-contact > ul {
      margin-top : 70px;
    }



    .card {
      width : 85vw;
      height : 40vh;
      padding : 0;
      display : flex;
      flex-direction : column;
      align-items : center;
      justify-content : center;
      margin : 0;
    }

    .card > img {
      height : 40%;
      width : auto;
    }

    .card > p, .product-card > p  {
      font-family : var(--themeFont);
      color : var(--blue);
      text-align : center;
      z-index : 55;
    }

    h3 {
      font-family : var(--themeFont);
      color : var(--blue);
      text-align : center;
    }

    .header-text {
      display : block;
    }


    .product-card {
      width : 85vw;
      height : auto;
      margin : 0;
    }

    .product-link{
      width : 85vw;
      height : auto;
      margin : 0;
      padding : 25px;
    }

    .product-card > img {
      width : 100%;
      height : auto;
      transition-duration : 0.5s;
      z-index : 30;
    }

    .product-card > img:hover {
      transform : scale(1.2);
    }

    footer {
      display : flex;
      flex-direction : column;
      align-items : center;
      justify-content : space-between;
      margin : 0;
      padding : 0;
      width : 100vw;
      height : auto;
      background-color : var(--blue);
      padding-top : 10vh;
    }

    footer > #footer-contact {
      width : 85vw;
      height : auto;
      margin : 0;
    }

    #footer-social {
      width : auto;
      height : auto;
      margin : 50px;
      padding : 0;
      display : flex;
      flex-direction : column;
      align-items : center;
      justify-content : space-around;
    }

    li {
      margin : 25px;
      text-align : left;
    }


    .footer-logo {
      width : 100%;
      height : auto;
    }

    .footer-icon {
      width : 40px;
      height : 40px;
      fill : white;
      margin : 25px;
    }

    #footerCredit {
      font-family : var(--themeFont)
      color : var(--blue);
      width : 100%;
      text-align : right;
    }

    #credit {
      font-family : var(--themeFont)
      color : white;
      text-align : center;
      margin : 30px;
    }

    #credit:hover {
      cursor : pointer;
      text-decoration : underline;

    }

    #footerSectionDiv {
      background-color : var(--blue);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      width : 100vw;
      padding : 0;
      padding-bottom : 10vh;
    }

    #footerNavDiv {
      display : flex;
      flex-direction: row;
      align-items: stretch;
      justify-content:  space-around;
      padding : 0;
      padding-bottom : 25px;
      width : auto;
    }

    .footerLink {
      font-family : var(--themeFont);
      color : white;
      margin : 20px;
      text-align : center;
    }

    .footerLink:hover {
      text-decoration : underline;
    }

    hr {
      border : 1px solid white;
      width : 80%;
    }

    a {
      text-decoration : none;
      color : var(--blue);
    }

    #video-container {
      position : relative;
      width : 100%;
      height : auto;
      padding-bottom : 10vh;
    }

    #video-container > * {
      color : var(--blue);
      position : relative;
    }

    video {
      width :90%;
      height : auto;
    }

    video > * {
      background-color : pink;
    }

    .desktop-text {
      display : none;
    }

  }