/* ==========================================================================

   Tabel Of Contents

   ========================================================================== 

   1.General

   2.main

   3.video

   4.Features

   5.Subscription form

   6.Countdown styles

   7.Twitter feed 

   8.Contact 

   9.contact Form Validation

   10.footer

   11.Social

   12.scroll top

   13.Small devices (tablets, 768px and up)

   14.Medium devices (desktops, 992px and up)

   15.small devices

*/



/*Question*/

.question {

  position: relative;

  background: #f9f9f9;

  margin: 0;

  padding: 10px 10px 10px 50px;

  display: block;

  width: 100%;

  cursor: pointer;

}



/*Answer*/

.answers {

  padding: 0px 15px;

  margin: 5px 0;

  width: 100% !important;

  height: 0;

  overflow: hidden;

  position: relative;

  opacity: 0;

  -webkit-transition: .3s ease;

  -moz-transition: .3s ease;

  -o-transition: .3s ease;

  transition: .3s ease;

  background-color: #B3B3B3;

}



.questions:checked~.answers {

  height: auto;

  opacity: 1;

  padding: 15px;



}



/*FAQ Toggle*/

.plus {

  position: absolute;

  margin-left: 10px;

  z-index: 5;

  font-size: 2em;

  line-height: 100%;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  -o-user-select: none;

  user-select: none;

  -webkit-transition: .3s ease;

  -moz-transition: .3s ease;

  -o-transition: .3s ease;

  transition: .3s ease;



}



.questions:checked~.plus {

  -webkit-transform: rotate(45deg);

  -moz-transform: rotate(45deg);

  -o-transform: rotate(45deg);

  transform: rotate(45deg);



}



.questions {

  display: none;



}





/* ==========================================================================

   1.General

   ========================================================================== */





body {

  font-family: 'Open Sans', sans-serif;

  font-weight: 400;

  overflow-x: hidden;

  font-size: 16px;

}



p {

  color: #888;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  font-weight: 400;

  line-height: 1.2;

}



a {

  color: #203084;

}



a:hover,

a:focus {

  color: #2980b9;

  text-decoration: none;

}



a:focus {

  outline: none;

}



img {

  max-width: 100%;

  height: auto;

}



ul,

li {

  list-style: none;

  padding: 0;

  margin: 0;

}



/* ==========================================================================

   2.main

   ========================================================================== */



.main {

  /*background: url("../img/bg.jpg") center center no-repeat scroll;*/

  background-color: #203084;

  background-size: cover;

  padding: 3em 0 4.5em;

  position: relative;

  color: #F9FAEA;

  text-align: center;

}



.overlay {

  display: none;

}



.main:before {

  content: '';

  /*background: rgba(0, 0, 0, 0.31);*/

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  right: 0;

}



.main h1 {

  font-size: 36px;

  text-transform: uppercase;

}



.main h1,

.main h2 {

  font-weight: 300;

}



.main h1 span {

  font-weight: 400;

}



.welcome-message {

  padding-top: 1.5em;

}



.action-btn {

  margin: 1.5em 0 3em;

}



.action-btn .btn-default {

  color: #F9FAEA;

  background-color: #CF993A;

  border-color: #F9FAEA;

  display: block;

  max-width: 70%;

  margin: 10px auto;

}



.action-btn .btn-default:hover,

.action-btn .btn-default:focus,

.action-btn .btn-default:active {

  background-color: #2980b9;

  border-color: #2980b9;

}



.action-btn a:first-child {

  /*margin: 0 0 0.75em 0;*/

}



.main .social {

  margin-top: 2.25em;

  float: none;

}



.main .social li a {

  color: #F9FAEA;

  width: 40px;

  height: 40px;

  line-height: 40px;

  border: 1px solid #F9FAEA;

  font-size: 1em;

}



.main .social li a:hover {

  background: #203084;

  border: 1px solid #203084;

}



/* ==========================================================================

   nav

   ========================================================================== */



.navbar {

  display: none;

}



.navbar-default .navbar-nav>li>a.btn-default {

  text-transform: capitalize;

  color: #F9FAEA;

  padding: .75em 2em;

  transition: all .5s linear;

  border: 1px solid #203084;

}



.navbar-default .navbar-nav>li>a.btn-default:hover {

  color: #F9FAEA;

  background: transperent;

  border: 1px solid #203084;

}



.navbar-default .navbar-nav>li>a.btn-default:hover,

.navbar-default .navbar-nav>li>a.btn-default:focus {

  color: #203084;

}



.stick {

  display: block;

  position: fixed;

  width: 100%;

  background: #203084;

  left: 0;

  top: 0;

  z-index: 1000;

  box-shadow: 0 1px 12px 0px rgba(51, 51, 51, 0.23);

  -webkit-animation: fadeInDown 1s both;

  animation: fadeInDown 1s both;

}



@-webkit-keyframes fadeInDown {

  0% {

    opacity: 0;

    -webkit-transform: translateY(-20px);

    transform: translateY(-20px);

  }



  100% {

    opacity: 1;

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}



@keyframes fadeInDown {

  0% {

    opacity: 0;

    -webkit-transform: translateY(-20px);

    -ms-transform: translateY(-20px);

    transform: translateY(-20px);

  }



  100% {

    opacity: 1;

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    transform: translateY(0);

  }

}



/* ==========================================================================

   3.video

   ========================================================================== */



.embed-responsive {

  border-radius: 2px;

  border: 1px solid #000;

}



/* ==========================================================================

   4.Features

   ========================================================================== */



.section-spacing {

  padding: 4.5em 0;

}



.features.section-spacing {

  padding: 4.5em 0 2.25em;

}



.section-spacing header h2,

.section-spacing header h3 {

  margin-top: 0;

}



.section-spacing h2 {

  color: #333;

  font-weight: 300;

  text-transform: uppercase;

}



.section-spacing header h3 {

  color: #999;

  font-size: 20px;

}



.features h4 {

  font-size: 18px;

  text-transform: uppercase;

  margin-top: 1.5em;

}



.features p {

  color: #B2B2B2;

}



.features>.container>.row>div {

  margin-bottom: 2.25em;

}





/* ==========================================================================

   5.Subscription form 

   ========================================================================== */





.form-control::-webkit-input-placeholder {

  color: #C1C1C1;

}



.form-control:-moz-placeholder {

  color: #C1C1C1;

}



.form-control::-moz-placeholder {

  color: #C1C1C1;

}



.form-control:-ms-input-placeholder {

  color: #C1C1C1;

}



.center-block {

  float: none;

}



.sub-form header {

  margin-bottom: 2.625em;

}



.sub-form .form-control {

  padding: 1em 2em;

  border-radius: 30px;

  margin-bottom: 1.5em;

  box-shadow: none;

}



.sub-form .btn-default {

  padding: 1em 5em;

}



.sub-form .form-control,

.sub-form .btn-default {

  display: block;

  width: 100%;

}



.form-control {

  background-color: #F9FAEA;

  border: 1px solid #E5E5E5;

  height: auto;

  padding: 0.75em 2em;

  border-radius: 7px;

  margin-right: 1em;

}



.form-control:focus {

  border-color: #E5E5E5;

  outline: 0;

  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

}



.btn-default {

  border-radius: 30px;

  padding: 1em 3em;

  color: #F9FAEA;

  background-color: #203084;

  border-color: #203084;

  font-weight: 700;

  -webkit-transition: all .5s ease-out;

  transition: all .5s ease-out;

  text-transform: uppercase;

}



.btn-default:hover,

.btn-default:focus,

.btn-default:active {

  color: #F9FAEA;

  background-color: #2980b9;

  border-color: #2980b9;

}



.btn:active:focus,

.btn-default:focus,

.btn:focus,

.btn-default:active {

  outline: none;

}



#mc-notification {

  margin: 1.5em 0 0;

  display: inline-block;

}



#mc-notification .alert,

#mc-notification .success {

  display: none;

}



.success,

.alert,

.success-cf p,

.error-cf p {

  padding: 1em 2em;

  margin-bottom: 0;

  border-radius: 7px;

  font-weight: 600;

}



.success,

.success-cf p {

  background: #dff0d8;

  color: #3c763d;

  border: 1px solid rgba(60, 118, 61, 0.18);

}



.alert,

.error-cf p {

  background: #FFE5E5;

  color: #ea5050;

  border: 1px solid rgba(169, 82, 82, 0.18);

}



.success i,

.alert i,

.success-cf i,

.error-cf i {

  padding-right: .5em;

}



/* ==========================================================================

   6.Countdown styles

   ========================================================================== */

ul.countdown {

  list-style: none;

  display: block;

  margin-bottom: 0;

  padding: 0 0 3em;

}



ul.countdown li {

  display: inline-block;

}



ul.countdown li span {

  font-size: 36px;

}



ul.countdown li.seperator {

  font-size: 30px;

  line-height: 50px;

  vertical-align: top;

  padding: 0 8px;

}



ul.countdown li p {

  font-size: 16px;

  margin-bottom: 0;

}



/* ==========================================================================

   7.Twitter feed

   ========================================================================== */



.twitter-feed {

  background: url("../img/bg-t.jpg") center center no-repeat scroll;

  background-size: cover;

  color: #F9FAEA;

  position: relative;

}



.overlay-t {

  position: absolute;

  width: 100%;

  height: 100%;

  /*background: rgba(0, 0, 0, 0.31);*/

  top: 0;

}



.twitter-feed h2 {

  margin: 0;

  color: #F9FAEA;

}



.twitter-icon .fa-twitter {

  color: #F9FAEA;

  padding: 24px 0 12px;

  font-size: 3em;

}



.tweet {

  font-size: 18px;

}



/* ==========================================================================

   8.Contact

   ========================================================================== */



.video header,

.features header,

.screenshot header,

.contact header {

  margin-bottom: 3em;

}



.contact-form .form-control {

  border-color: #ddd;

  margin-bottom: .75em;

  padding: 1em;

  margin-bottom: 1.5em;

  box-shadow: none;

}



.contact .btn-default {

  width: 100%;

}



/* ==========================================================================

   9.contact Form Validation

   ========================================================================== */



.contact-form label.error {

  margin-bottom: 1.5em;

  font-weight: 600;

  color: #ea5050;

}



.contact-form label.error i {

  padding-right: 8px;

}



.success-cf,

.error-cf {

  display: none;

}



.contact-form .success-cf p,

.contact-form .error-cf p {

  position: absolute;

  display: block;

  top: 20%;

  left: 0;

  right: 0;

  text-align: center;

  z-index: 10;

  width: 80%;

  margin: 0 auto;

}



.contact-form .form-control.error {

  border-color: #E7BEBE;

  color: #D95C5C;

  border-left: none;

  border-bottom-left-radius: 0;

  border-top-left-radius: 0;

  box-shadow: .3em 0 0 0 #D95C5C inset;

  margin-bottom: .75em;

}



.contact-form .form-control.error:focus {

  border-color: #ff5050;

  color: #ff5050;

  box-shadow: .3em 0 0 0 #FF5050 inset;

}



.contact-form .valid {

  border-color: #2ecc71;

}



/* ==========================================================================

   10.footer

   ========================================================================== */



.site-footer,

.video,

.sub-form {

  background: #F7F7F7;

}



.site-footer.section-spacing {

  padding: 4.5em 0;

}



.site-footer small {

  color: #B3B3B3;

  font-size: 1em;

  margin: 1.5em 0 .75em;

  display: inline-block;

}



.modal-header {

  background: #203084;

  position: relative;

  min-height: 0;

  padding: 1.5em 1em;

}



.modal-title {

  color: #F9FAEA;

  font-weight: 700;

}



button.close {

  color: #203084;

  opacity: 1;

  background: white;

  width: 35px;

  height: 35px;

  border-radius: 50%;

  line-height: 35px;

  position: absolute;

  right: 16px;

}



.close:hover,

.close:focus {

  color: #2980b9;

  text-decoration: none;

  cursor: pointer;

  opacity: 1;

  outline: none;

}



.modal-body {

  padding: 1.5em;

}



/* ==========================================================================

   11.Social 

   ========================================================================== */





.social li {

  display: inline-block;

  padding-right: .8em;

}



.social li:last-child {

  padding-right: 0;

}



.social li a {

  display: block;

  width: 45px;

  height: 45px;

  line-height: 45px;

  color: #203084;

  border-radius: 50%;

  position: relative;

  -webkit-transition: all .8s ease;

  transition: all .8s ease;

  border: 1px solid #203084;

  font-size: 1.3em;

}



.social li a:hover {

  color: #F9FAEA;

  background: #203084;

}



/* ==========================================================================

   12.scroll top

   ========================================================================== */



.scroll-top {

  margin-bottom: 0;

}



.scroll-top a {

  position: fixed;

  bottom: 2em;

  right: 2em;

  text-decoration: none;

  color: #F9FAEA;

  background-color: rgba(0, 0, 0, 0.3);

  font-size: 12px;

  padding: .8em 1em;

  display: none;

  z-index: 200;

  border-radius: 50%;

  -webkit-transition: background .5s ease-in;

  transition: background .5s ease-in;

}



.scroll-top a:hover {

  background: #203084;

}



/* ==========================================================================

   13.Small devices (tablets, 768px and up)

   ========================================================================== */



@media (min-width: 768px) {



  .main {

    padding: 3em 0 4.5em;

  }



  .welcome-message {

    padding-top: 2.25em;

  }



  .main h1 {

    font-size: 60px;

  }



  .main h2 {

    font-size: 48px;

  }



  .action-btn .btn-default {

    display: inline-block;

  }



  .action-btn a:first-child {

    margin: 0 1.5em 0 0;

  }



  ul.countdown li span {

    font-size: 48px;

  }



  ul.countdown li.seperator {

    font-size: 36px;

    line-height: 68px;

    padding: 0 20px;

  }



  ul.countdown li p {

    font-size: 20px;

  }

}



/* ==========================================================================

   14.Medium devices (desktops, 992px and up) 

   ========================================================================== */



@media (min-width: 992px) {



  html,

  body {

    height: 100%;

  }



  .main {

    padding: 4.5em 0 6em;

    text-align: left;

    /*background: url("../img/bg.jpg") center center no-repeat fixed;*/

    background-size: cover;

    min-height: 100%;

  }



  .overlay {

    display: block;

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    /*background: url("../img/bg-blurred.jpg") center center no-repeat fixed;*/

    background-size: cover;

    opacity: 0;

  }



  .overlay:before {

    content: '';

    background: rgba(0, 0, 0, 0.31);

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    right: 0;

  }



  .main .social {

    margin-top: 0;

    float: right;

  }



  .hero-img {

    margin-top: 1.5em;

  }



  .welcome-message {

    padding-top: 6.75em;

  }



  .action-btn {

    margin: 1.5em 0 0;

  }



  .section-spacing {

    padding: 6em 0;

  }



  .features.section-spacing {

    padding: 6em 0 3.75em;

  }



  .sub-form .form-control {

    width: 50%;

    margin-bottom: 0;

    display: inline-block;

  }



  .sub-form .btn-default {

    width: auto;

    display: inline-block;

  }



  #preloader {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: #F9FAEA;

    z-index: 9999;

    height: 100%;

  }



  #status {

    width: 200px;

    height: 200px;

    position: absolute;

    left: 50%;

    top: 50%;

    background: url("../img/load.gif") no-repeat center center;

    margin: -170px 0 0 -100px;

  }

}



/* ==========================================================================

   16.small devices 

   ========================================================================== */







@media (max-width: 320px) {



  ul.countdown li span {

    font-size: 28.833px;

  }



  ul.countdown li.seperator {

    font-size: 25.629px;

    line-height: 38.439px;

    vertical-align: top;

    padding: 0 2px;

  }



  ul.countdown li p {

    font-size: 12.642px;

  }

}