/* ==========================================================================
   Project:     TWD Landing Pages - Digital Marketing
   Date:        02/25/2020 - File created	
   Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

/* ==========================================================================
     Typography
========================================================================== */

h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6 {font-family: "Heebo", sans-serif;font-weight:700;color:#102442}
h1, .h1, .btn, .text-martel {font-family: "Martel", sans-serif;font-weight:800;}
.btn {font-size: .9rem;line-height:1}

/* ==========================================================================
     Basic Elements
========================================================================== */

html {-webkit-tap-highlight-color: rgba(0,0,0,.2);}   
body {border: 20px solid rgba(137,207,241,.3);position:relative;overflow-x:hidden;}
body::before {content:""; background: #fff; border-radius: 20px; width: calc(100% + 10px); height: calc(100% + 10px); position: absolute; top: -5px; left: -5px;}
a {text-decoration:underline;}
a:hover, a:focus {text-decoration:none;}
img {max-width: 100%; height: auto;}

/* ==========================================================================
     Layout
========================================================================== */

header, main, footer {position: relative;}

header {margin: -5px -5px 0px -5px}
     header::before {content: ""; width: 400px;height: 300px;background: url(/img/bg-top-left.svg) -50px -130px no-repeat;border-radius: 20px 0px 0px 0px; background-size: 100% auto;position: absolute; top: 0px;left: 0px;z-index: 0; opacity: .2}
     header .logo {height: 40px;position:absolute; top: 15px; left: 15px;z-index:1}
     header .btn-scrolldown {background:rgba(137,207,241,.3);border:none; position: absolute; z-index:1;  left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 190px; height: 60px; border-radius: 50% 50% 0 0/ 100% 100% 0 0; padding: 10px 0px 0px 0px}
     header .btn-scrolldown:hover, header .btn-scrolldown:focus {background:rgba(137,207,241,.6);border:none}
     header .col-md-6:last-child {background: #102442; color:#fff;}
     header .col-md-6:last-child h3+hr {width: 40px; border-top: 2px solid rgba(255,255,255,.3)}
     header form {width: 400px; margin:auto;}
     header .form-control {background:none; border-radius: 0px; border-top: none; border-right:none; border-left:none; border-bottom: 1px solid rgba(255,255,255,.3);color:#fff}
     header .form-control:focus {background: rgba(0,0,0,.2);box-shadow:none;color:#fff}
     header .form-control.is-invalid:focus {box-shadow:none}
     header input[type="text"] {height: 60px}
     header .form-group {position: relative;}
     header label {transition: all 150ms ease; opacity: .6; font-weight: 400; position: absolute; left: 5px; bottom: 5px;}
     header .form-control:focus + label, header label.active, header .invalid-feedback + label {top: -17px; font-size: .7rem; }
     header textarea.form-control {height: 80px}
     header button[type="submit"] {border-radius: 50px;padding-right: 30px; height: 60px;}
     header .slick-dots {padding:0px; margin:0px; position: absolute; bottom: 0px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);  z-index:0}
     header .slick-dots li {display:inline-block; padding: 0px 3px}
     header .slick-dots a { opacity: .5; width: 15px; height: 15px; display:block; border-radius: 50%;background: none; border: 2px solid #102442}
     header .slick-dots .slick-active a {opacity: 1; background: #102442}
     header a[name="message"] {display:block; padding-top: 20px; margin-top: -20px;}
     
main {z-index:1}
     main img {max-height: 100px;margin:auto}
     main button[type="button"] {border-radius: 50px;}

footer {z-index:0}
     footer::before {content: ""; width: 400px;height: 300px;border-radius: 0px 0px 20px 0px; background: url(/img/bg-bottom-right.svg) 50px 0px no-repeat;background-size: 100% auto;position: absolute; right: -5px;bottom: -5px;z-index: 0; opacity: .2}
     footer hr {width: 60px; border-top: 2px solid #ccc}

.thanks {height: 100vh;min-height:480px}
     .thanks::after {content: ""; width: 400px;height: 300px;border-radius: 0px 0px 20px 0px; background: url(/img/bg-bottom-right.svg) 50px 0px no-repeat;background-size: 100% auto;position: absolute; right: -5px;bottom: -5px;z-index: 0; opacity: .2}
     .thanks footer::before {content:none;}
     .thanks img {width: 250px}

/* ==========================================================================
     Media Queries
========================================================================== */

@media (min-width: 0px) {	
     /* Typography */
     .h1, h1 {font-size: 2rem}
     .h2, h2 {font-size: 1.5rem}

     /* Layout */
     header .col-md-6:first-child {border-bottom: 15px solid rgba(137,207,241,.3)}
     header .btn-scrolldown {bottom:0px}
}

@media (min-width: 360px) {

}

@media (min-width: 480px) {	

}

@media (min-width: 576px) {

}

@media (min-width: 768px) {	
     /* Typography */
     .h1, h1 {font-size: 2.5rem}
     .h2, h2 {font-size: 2rem}

     /* Layout */
     header .col-md-6:first-child {border-bottom:none}
     header::after {content:"";width:100%; height:15px; background:rgba(137,207,241,.3);position: absolute; bottom: 0px; left: 0px;}
     header .btn-scrolldown {bottom:15px;}
     header .col-md-6:last-child {border-radius: 0px 20px 0px 0px;margin-bottom: 15px}
     .slideshow img {max-width: 450px;margin:auto}
}

@media (min-width: 992px) {	
     
}

@media (min-width: 1400px) {	
     /* Layout */
     .slideshow img {max-width: 550px;margin:auto}
}