/* -------------------------------------------------------------------------- */
/* STRUCTURE */
* {
   box-sizing: border-box;
   margin: 0px;
   padding: 0px;
   font-family: 'Open Sans', sans-serif;
}
html {
   scroll-behavior: smooth;
}
body {
   min-height: 100vh;
}
.wrapper {
   max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
   width: 100%;
}
#mainheader, #mainfooter {
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
}
#mainheader {
   position: absolute;
   top: 0px;
   left: 0px;
   display: flex;
   justify-content: space-between;
   // align-items: center;
   z-index: 100;
   padding-top: 15px;
   padding-left: 30px;
}
nav {
   width: 100%;
   text-align: right;
   position: fixed;
   top: 0px;
   left: 0px;
   padding: 15px;
   transition: .5s;
}
nav.sticky {
   background-color: #000;
   opacity: .85;
   text-align: center;
   transition: .5s;
}
main {
   position: relative;
   padding: 20px;
   margin: 0px;
}
section {
   scroll-margin-top:100px;
   text-align: center;
}
#mainfooter {
   background-image: url(images/mixtum-global-footer-bg.png);
   height: 500px;
   background-position: 50% 100%;
   text-align: center;
}
#mainfooter #footer-nav {
   padding-top: 50px;
}
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* TYPOGRAPHY */
h1 {
   font-family: 'Alkatra', cursive;
   color: #333;
   text-align: center;
   margin-top: 50px;
   margin-bottom: 50px;
}
h2 {
   font-family: 'Alkatra', cursive;
   text-align: center;
   margin-top: 60px;
   margin-bottom: 20px;
}
p {
   color: #333;
   font-size: 18px;
   line-height: 1.5em;
   margin-bottom: 20px;
}
a {
   color: #19a5af;
}
main a {
   font-weight: bold;
   text-decoration: none;
}
#mainfooter a {
   font-family: 'Alkatra', cursive;
   color: #fff;
   font-size: 20px;
   padding: 10px;
   text-decoration: none;
}
main a:hover,
#mainfooter a:hover {
   text-decoration: underline;
}
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* NAV */
nav a {
   font-family: 'Alkatra', cursive;
   position: relative;
   font-size: 1.1em;
   color: #fff;
   font-size: 1.1em;
   line-height: 2em;
   font-weight: 600;
   text-decoration: none;
   padding: 6px 20px;
   transition: .5s;
}
nav a:hover,
nav a.active {
   color: #19a5af;
}
nav a span {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background-color: #fff;
   border-radius: 30px;
   z-index: -1;
   transform: scale(0);
   transition: .5s;
   opacity: 0;
}
nav a:hover span {
   transform: scale(1);
   opacity: 1;
}
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* DROPDOWN */
.dropbtn {
   background-color: #19a5af;
   color: white;
   padding: 10px;
   font-size: 16px;
   border: none;
   cursor: pointer;
}
.dropdown {
   position: relative;
   display: inline-block;
}
.dropdown-content {
   display: none;
   position: absolute;
   right: 0px;
   width: auto;
   padding-top: 10px;
   text-align: center;
   background-color: #000;
   opacity: .85;
}
.dropdown-content a {
   display: inline-block;
   padding: 0px;
   margin: 0px;
   width: 100%;
}
.dropdown-content a:hover {
}
.dropdown:hover .dropdown-content {
   display: block;
}
.dropdown:hover .dropbtn {
   background-color: #0e8088;
}
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* LOGO */
#logo {
   user-select: none;
}
#mainheader h1,
#mainheader p {
   font-family: 'Alkatra', cursive;
   float: left;
   text-align: left;
   width: 100%;
   color: #fff;
   padding: 0px;
   margin: 0px
}
#mainheader h1 {
   font-size: 35px;
   margin-bottom: 5px;
}
#mainheader p {
   font-size: 22px;
   margin-top: 0px;
   font-style: italic;
}
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* MISC */
img {
   width: auto;
   max-width: 100%;
   height: auto;
}
#topbutton {
   display: none;
   background-color: #19a5af;
   position: fixed;
   bottom: 20px;
   right: 30px;
   z-index: 99;
   font-size: 18px;
   border: none;
   outline: none;
   color: white;
   padding: 10px;
   border-radius: 4px;
   cursor: pointer;
   border: 3px solid;
}
#button:hover {
   background-color: #0d838b;
}
.siteimage {
   border: 5px solid #999;
   border-radius: 15px;
   margin-bottom: 25px;
   box-shadow: 0px 5px 8px #666;
}
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* PARALLAX */
.parallax {
   background-color: #333;
   position: relative;
   display: flex;
   // justify-content: center;
   align-items: center;
   height: 100vh;
   background-image: url(images/mixtum-global-header-bg.png);
   background-repeat: no-repeat;
   background-size: cover;
   // height: 900px;
   background-position: 50% 0%;
   background-attachment: fixed;
}
.rocket {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 50%;
   padding: 10%;
   pointer-events: none;
   transform: translateX(-300px);
   -webkit-filter: drop-shadow(-10px 5px 30px rgba(255,255,255,0.5));
   filter: drop-shadow(-10px 12px 30px rgba(255,255,255,0.5));
}
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* MEDIA QUERIES */
@media screen and (max-width: 1200px) {
   #logo {
      margin-top: 170px;
      width: 100%;
      text-align: center;
   }
   #logo h1, #logo p {
      float: none;
      text-align: center;
   }
   #mainnav {
      text-align: center;
   }
   nav {
      padding-right: 80px;
   }
   nav a {
      font-size: 1em;
      line-height: 2.7em;
   }
   .dropdown {
      position: absolute;
      right: 20px;
      top: 20px;
   }
   section {
      scroll-margin-top: 140px;
   }
}
/* -------------------------------------------------------------------------- */