/* ==========================================================================
   Tabel Of Contents
   ========================================================================== 
   1.General
   2.Hero Section
   3.Countdown styles
   4.video preview
   5.features
   6.User reviews
   7.Subscription form
   8.Twitter feed
   9.Contact form
   10. Google map
   11.Footer cta
   12.Footer styles
   13.Social styles
   14.Small devices (tablets, 768px and up)
   15.Medium devices (desktops, 992px and up)
   16.small devices
*/


/* ==========================================================================
   1. General styles
   ========================================================================== */

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  color: #a7a7a7;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Varela Round', sans-serif;
  font-weight: 400;
  color: #030303;
  margin-top: 35px;
  }

p {
  color: #a7a7a7;
  font-weight: 400;
}

a { color: #0A6CF1; }

a:hover { color: #227af2; }

a:hover,
a:focus {
  text-decoration: none;
  outline: none;
}

img {
  max-width: 220px;
  height: auto;
}

ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   2. Hero Section
   ========================================================================== */

.hero-section {
  padding: 3em 0 6em;
  background: url(../img/bg.jpg) center center no-repeat scroll;
  background-size: cover;
  position: relative;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
  margin-bottom: -104px;
}

.hero-section:before {
  content: '';
  background: rgba(17, 17, 17, 0.27);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.hero-section .logo { margin-bottom: 4.5em; }

/* ==========================================================================
   3. Countdown styles
   ========================================================================== */

.hero-title {
  font-size: 48px;
  color: #fff;
  margin: 0;
}

ul.countdown {
  color: #fff;
  list-style: none;
  display: block;
  margin-bottom: 0;
  padding: 1.5em 0;
}

ul.countdown li { display: inline-block; }

ul.countdown li span { font-size: 43.244px; }

ul.countdown li.seperator {
  font-size: 38.439px;
  line-height: 58.454px;
  vertical-align: top;
  padding: 0 8px;
}

ul.countdown li p {
  font-size: 16px;
  color: #fff;
}

/* ==========================================================================
   4. video preview styles
   ========================================================================== */

.video-intro {
  padding-top: .75em;
  -webkit-perspective: 1000;
  perspective: 1000;
}

.play-btn {
  width: 81px;
  height: 81px;
  line-height: 94px;
  background-color: rgba(10, 108, 241, 0.90);
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  transition: all .8s ease;
}

.play-btn:hover { background-color: rgba(10, 108, 241, 0.8); }

.play-btn i {
  color: #fff;
  padding-left: 4px;
}

/* ==========================================================================
   5. features styles
   ========================================================================== */
   
.section-header { margin-bottom: 3em; }

.section-header h2 {
  font-weight: 400;
  margin: 0 0 24px;
}

.section-header h3 {
  margin: 0;
  font-size: 20px;
  color: #4a4a4a;
}

.features h4 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #4a4a4a;
  margin-top: 24px;
}

.features p:last-child { margin: 0; }

.features > .container > .row:not(:last-child) { margin-bottom: 2.25em; }

.features > .container > .row > div { margin-bottom: 1.5em; }

.features > .container > .row > div:last-child { margin-bottom: 0; }

/* ==========================================================================
   6. User reviews
   ========================================================================== */


.user-reviews blockquote figure img {
  width: 88px;
  height: 88px;
  margin-bottom: 1.5em
}

.user-reviews blockquote {
  padding: 0;
  margin: 0;
  font-size: 18px;
  border-left: none;
}

.user-reviews blockquote p {
  color: #999;
  font-weight: 300;
}

.user-reviews blockquote footer {
  font-size: 16px;
  font-weight: 400;
  color: #a7a7a7;
}

/* ==========================================================================
   7. Subscription form styles
   ========================================================================== */
   
.sub-form {
  background: #f5f5f5;
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
 .form-control::-webkit-input-placeholder {
 color: #848484;
 font-weight: 300;
}
 .form-control:-moz-placeholder {
 color: #848484;
 font-weight: 300;
}
 .form-control::-moz-placeholder {
 color: #848484;
 font-weight: 300;
}
 .form-control:-ms-input-placeholder {
 color: #848484;
 font-weight: 300;
}

.center-block { float: none; }

.form-control {
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid #e8e8e8;
  color: #505050;
  box-shadow: none;
  height: 50px;
  padding: 6px 1em;
  font-weight: 400;
  font-size: 16px;
}

.sub-form .form-control { padding: 6px 1em 6px 2.5em; }

.form-control:focus {
  border-color: #0A6CF1;
  outline: 0;
  box-shadow: none;
}

.btn {
  color: #fff;
  background-color: #0A6CF1;
  border-color: #0A6CF1;
  font-weight: 700;
  text-transform: uppercase;
  transition: all .5s ease-out;
  padding: 12px 2em;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn:active:focus,
.btn.active:focus {
  background-color: #227af2;
  border-color: #227af2;
  color: #fff;
  outline: none;
}

#mc-notification {
  margin: 0.75em 0;
  font-weight: 400;
  color: #4a4a4a;
}

.error { color: #f44336 !important; }

.valid { color: #4CAF50 !important; }

.error i,
.valid i { padding-right: .5em; }

#mc-form i.fa-envelope-o {
  color: #0A6CF1;
  position: absolute;
  left: 1em;
  top: 17px;
  z-index: 4;
}

.form-terms {
  margin: 0;
  font-size: 14px;
}

/* ==========================================================================
   8.Twitter feed
   ========================================================================== */

.twitter-icon .fa-twitter {
  color: #55acee;
  font-size: 3em;
  padding-bottom: .75em;
}

.tweet {
  font-size: 18px;
  font-weight: 400;
  color: #505050;
}

.btn-container-tweet { margin-top: 2.25em; }

.twitter-feed .btn {
  text-transform: none;
  font-weight: 400;
}

.twitter-feed .btn span { font-weight: 600; }

.btn-tweet {
  background-color: transparent;
  border-color: #808288;
  color: #808288;
}

/* ==========================================================================
   9. Contact form
   ========================================================================== */
   
.user-reviews,
.contact-form { border-top: 1px solid rgba(0,0,0,0.07); }

.contact-form .form-control.input-error { border-color: #f44336; }

.contact-form-success {
  color: #fff;
  margin: 0 0 1.5em;
  font-weight: 400;
  display: none;
  background: #4CAF50;
  padding: 7px 0;
  border-radius: 4px;
}

.contact-form-success i,
.contact-info address i,
.map-info-box i { padding-right: .5em; }

.contact-info { margin-top: 3em; }

.contact-info address { margin-bottom: 0; }

.contact-info > h4 { font-size: 18.5px; }

.contact-info > p { margin-bottom: 24px; }

.contact-info li:last-child p { margin-bottom: 0; }

.contact-info address i,
.map-info-box i { color: #4a4a4a; }

.contact-info address a[href^="mailto"],
.contact-info address a[data-target="#modal-google-map"],
.contact-info address a[href^="mailto"]:focus,
.contact-info address a[data-target="#modal-google-map"]:focus { color: #a7a7a7; }

.contact-info address a[href^="mailto"]:hover,
.contact-info address a[data-target="#modal-google-map"]:hover { color: #227af2; }

/* ==========================================================================
   10. Google map
   ========================================================================== */

#map-canvas {
  width: 100%;
  margin: 0px;
  padding: 0px;
  height: 640px;
  height: 80vh;
}

#map-canvas img { max-width: none; }

.map-info-box {
  padding: 1.5em;
  font-family: 'Open Sans', sans-serif;
}

.map-info-box p {
  line-height: 1.8;
  color: #a7a7a7;
  white-space: nowrap;
  font-size: 16px;
  margin-bottom: 0;
}

#modal-google-map .modal-body { padding: 0; }

#modal-google-map .modal-header { border: none; }

#modal-google-map { padding: 0 !important; }

.modal button.close {
  position: absolute;
  top: -33px;
  right: 15px;
  font-size: 30px;
  color: #fff;
  opacity: .9;
  text-shadow: none;
  transition: all 0.3s ease-in-out;
  font-weight: 600;
}

.modal .close:hover,
.modal .close:focus {
  opacity: 1;
  outline: none;
}

.modal .modal-dialog { margin: 70px auto; }

/* ==========================================================================
   11.Footer cta
   ========================================================================== */
   
.footer-cta { background: #0A6CF1; }

.footer-cta h2 {
  margin: 0 0 36px;
  color: #fff;
  line-height: 1.3;
}

.footer-cta .btn,
.footer-cta .btn:focus {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
}

.footer-cta .btn:hover,
 .footer-cta .btn:active,
.footer-cta .btn:active:focus,
.footer-cta .btn.active:focus {
  background-color: #fff;
  color: #0A6CF1;
}

/* ==========================================================================
   12. Footer styles
   ========================================================================== */

.section-spacing { padding: 4.5em 0; }

.site-footer.section-spacing {
  background: #2C2F39;
  padding: 3.75em 0;
}

small {
  font-size: 100%;
  font-weight: 400;
  color: rgba(255,255,255,.2);
}

.footer-logo { opacity: .2; }

.terms-privacy { margin-top: 1em; }

.terms-privacy li { display: inline-block; }
 .terms-privacy li:not(:nth-last-child(1) ) {
 margin-right: 10px;
}

.terms-privacy a { color: rgba(255,255,255,.2); }

.terms-privacy a:hover,
.terms-privacy a:focus { color: rgba(255,255,255,.4); }

.terms-modal .modal-body { padding: 1.5em 1em; }

.terms-modal ul {
  list-style: disc;
  padding-left: 40px;
  margin-bottom: 1em;
}

.terms-modal li {
  list-style: disc;
  margin-bottom: 8px;
}

button.close:focus { outline: none; }

/* ==========================================================================
   13. Social styles
   ========================================================================== */

.social-icons {
  list-style: none;
  margin: 1.5em 0;
}

.social-icons li {
  display: inline-block;
  padding-right: .5em;
}

.social-icons li:last-child { padding-right: 0; }

.social-icons a {
  transition: all .5s ease-in;
  color: rgba(255,255,255,.4);
  width: 50px;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  display: block;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  font-size: 1.2em;
}

.social-icons a:hover {
  color: #fff;
  background: #0A6CF1;
  border-color: #0A6CF1;
}

/* ==========================================================================
   14. Small devices (tablets, 768px and up)
   ========================================================================== */

@media (min-width: 768px) {

.hero-section .logo { margin-bottom: 6em; }

.hero-section { padding: 3em 0 7.5em; }

.hero-title { font-size: 62px; }

ul.countdown { padding: 3em 0; }

ul.countdown li span { font-size: 60px; }

ul.countdown li.seperator {
  font-size: 40px;
  line-height: 84px;
  padding: 0 20.250px;
}

ul.countdown li p { font-size: 20px; }

.section-spacing { padding: 6em 0; }

.video-intro { padding-top: 1.5em; }

.features > .container > .row > div { margin-bottom: 0; }

#modal-google-map .modal-dialog { width: 90%; }

.modal button.close { right: 0; }

.footer-cta h2 { line-height: 1.1; }

.terms-modal .modal-body { padding: 1.5em 2em; }
}

/* ==========================================================================
   15. Medium devices (desktops, 992px and up)
   ========================================================================== */

@media (min-width: 992px) {

.hero-section {
  background: url(../img/bg.jpg) center center no-repeat fixed;
  background-size: cover;
  padding: 6em 0 12em;
}

.hero-section .logo { margin-bottom: 7.5em; }

.video-intro { padding-top: 3em; }

.user-reviews { text-align: left; }

.user-reviews blockquote { font-size: 20px; }

.user-reviews blockquote figure img { float: left; }

.user-reviews blockquote p { margin-left: 6em; }

.user-reviews blockquote footer { text-align: right; }

.contact-info { margin-top: 0; }

.footer-logo { text-align: left; }

.social-icons { margin: 0 0 1.5em 0; }

.terms-privacy {
  text-align: right;
  margin: 0;
}
}

/* ==========================================================================
   16. small devices 
   ========================================================================== */

@media (max-width: 388px) {

ul.countdown li span { font-size: 37.833px; }

ul.countdown li.seperator {
  font-size: 29.629px;
  line-height: 55.439px;
  vertical-align: top;
  padding: 0 2px;
}

ul.countdown li p { font-size: 14px; }
}