/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
 body {
   font-family: "Open Sans", sans-serif;
   color: #444;
 }

 a {
   text-decoration: none;
   color: #4f92af;
 }

 a:hover {
   color: #5eb8df;
   text-decoration: none;
   background-color: #00000099;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .font-primary {
   font-family: "Raleway", sans-serif;
 }

 .navbar {
  z-index: 9999;
}

.navbar-toggler {
 
  margin: 0 auto;
  float: right;
}

form,input,textarea{
  margin-top:5px;
  margin-bottom:10px;
}
 

button{
  margin:5px;
}

.form-select{
  background-color: inherit;
}

.form-select option {
  background-color: inherit;
  outline: none;
}

.input-group-text{
height: 38px;
align-self: flex-end;
}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
 #header {
   height: 80px;
   padding: 20px 0;
   position: relative;
   z-index: 10;
 }



 @media (max-width: 768px) {
   #header .logo h1 {
     font-size: 28px;
     padding: 8px 0;
   }
 }

 /*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
 #hero {
   width: 100%;
   height: 105vh;
   background: top center;
   background-size: cover;
   position: relative;
   margin-top: -80px;
   z-index: 9;
   /* countdown */
 }

 #hero .hero-container {
   position: absolute;
   bottom: 0;
   top: 0;
   left: 0;
   right: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   text-align: center;
   padding: 0 15px;
 }

 #hero h1 {
   margin: 0 0 10px 0;
   font-size: 48px;
   font-weight: 700;
   line-height: 56px;
   text-transform: uppercase;
   color: #fff;
 }

 #hero h2 {
   color: #eee;
   margin-bottom: 30px;
   font-size: 24px;
 }


 @media (min-width: 1024px) {
   #hero {
     background-attachment: fixed;
   }
 }

 @media (max-width: 768px) {
   #hero h1 {
     font-size: 28px;
     line-height: 36px;
   }

   #hero h2 {
     font-size: 18px;
     line-height: 24px;
     margin-bottom: 30px;
   }

   #hero .php-email-form input {
     margin: 0 auto;
   }
 }

 @media (max-width: 575px) {
   #hero .countdown {
     font-size: 32px;
     line-height: 38px;
   }
 }

 /*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
 section {
   padding: 60px 0;
 }

 .section-bg {
   background-color: #f7fafc;
 }

 .section-title {
   text-align: center;
   padding-bottom: 30px;
 }

 .section-title h2 {
   font-size: 32px;
   font-weight: 300;
   margin-bottom: 20px;
   padding-bottom: 0;
 }

 .section-title p {
   margin-bottom: 0;
 }

 /*--------------------------------------------------------------
# Contact Us
--------------------------------------------------------------*/
 .contact-info {
   margin-bottom: 20px;
   text-align: center;
 }

 .contact-info i {
   font-size: 48px;
   display: inline-block;
   margin-bottom: 10px;
   color: #4f92af;
 }

 .contact-info address,
 .contact-info p {
   margin-bottom: 0;
   color: #444;
 }

 .contact-info h3 {
   font-size: 18px;
   margin-bottom: 15px;
   font-weight: 300;
   color: #999;
 }

 .contact-info a {
   color: #000;
 }

 .contact-info a:hover {
   color: #4f92af;
 }

 .contact-address,
 .contact-phone,
 .contact-email {
   margin-bottom: 20px;
 }

 @keyframes animate-loading {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }

 @media (min-width: 768px) {
   .contact-phone {
     border-left: 1px solid #ddd;
     border-right: 1px solid #ddd;
   }

   .contact-address,
   .contact-phone,
   .contact-email {
     padding: 20px 0;
   }
 }

 /*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
 #footer {
   background: #0d182d;
   padding: 30px 0;
   color: #fff;
   font-size: 14px;
 }

 #footer .copyright {
   text-align: center;
 }

 #footer .credits {
   padding-top: 10px;
   text-align: center;
   font-size: 13px;
   color: #fff;
 }

 #footer .credits a {
   color: #72a8bf;
 }

/*--------------------------------------------------------------
# Video
--------------------------------------------------------------*/

 .video_contain {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   z-index: -100;
 }

 video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

 #video_container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -100;
}

 #video-background {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   margin: auto;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
 }


/*--------------------------------------------------------------
# Customs
--------------------------------------------------------------*/

 h1 {
   padding: 20px;
 }

 .wiz {
   padding: 15px;
   background-color: #219ebcbb;
   color: #dedede;
   border-top-left-radius: 25px;

 }

 .pixel {
   overflow: hidden;
   padding: 15px;
   background-color: #dededebb;
   color: #219ebc;
   border-bottom-right-radius: 25px;
 }

 .navbar-custom {
   height: 79px;
   width: 100%;

 }

 .menu-item {
   color: #54ccdf;

 }

 .background-header-light {
   color: #00000089;
   -webkit-transition: background-color 0.25s ease-in-out;
   -moz-transition: background-color 0.25s ease-in-out;
   -ms-transition: background-color 0.25s ease-in-out;
   -o-transition: background-color 0.25s ease-in-out;
   transition: background-color 0.25s ease-in-out;
 }


 .background-header {
   background-color: #00000089;
   -webkit-transition: background-color 0.25s ease-in-out;
   -moz-transition: background-color 0.25s ease-in-out;
   -ms-transition: background-color 0.25s ease-in-out;
   -o-transition: background-color 0.25s ease-in-out;
   transition: background-color 0.25s ease-in-out;
 }

 .background-header-darker {
   background-color: #000000;
   -webkit-transition: background-color 0.25s ease-in-out;
   -moz-transition: background-color 0.25s ease-in-out;
   -ms-transition: background-color 0.25s ease-in-out;
   -o-transition: background-color 0.25s ease-in-out;
   transition: background-color 1s ease-out;
 }

 .carousel {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   margin: auto;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
 }

 .carousel-item {
   margin-top: 30vh;
   min-width: 50vw;
   min-height: 50ch;
 }

 hr {
   margin: 1rem 0;
   color: inherit;
   background-color: currentColor;
   border: dotted 0;
   opacity: 0.15;

 }

 select {
   margin-top: 9px;
   border: 0px solid #fff;
   background-color: transparent;
   outline: none;
 }

 select :hover {
   background-color: #00000099;
 }

 select :focus {
   margin-top: 9px;
   border: 0px solid #fff;
   background-color: transparent;
   outline: none;
 }

 option {
   background-color: #00000099;
   outline: none;
 }

 .logo:hover{
  background-color: transparent;
 }