/* ==========================================================================
   Table Of Content
   ========================================================================== 
   
   
   1.General
   2.Hero section
   3.Navbar 
   4.Play button
   5.Featured on
   6.Benefits
   7.Features
   8.video tour
   9.tour
   10.Pricing
   11.reviews
   12.cta section
   13.Team
   14.Twitter feed
   15.Contact us
   16.Subscription form styles
   17.site footer 
   18.Social
   19.Small devices (tablets, 768px and up)
   20.Medium devices (desktops, 992px and up)
   
*/


/* ==========================================================================
   1.General
   ========================================================================== */
   
body {
  font-family: 'Source Sans Pro', sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-size: 16px;
  overflow-x: hidden;
}

p {
  font-weight: 400;
  color: #4c4c4c;
  font-size: 17px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  color: #4c4c4c;
}

h4 {
  font-size: 20px;
  margin: 12px 0;
}

a {
  color: #f56363;
  transition: all 0.3s ease-in-out;
}

a:hover,
a:focus {
  color: #fa5454;
  text-decoration: none;
}

a:focus { outline: none; }

img {
  max-width: 100%;
  height: auto;
}

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

b,
strong { font-weight: 600; }

/* ==========================================================================
   2.Hero section
   ========================================================================== */ 
   
.hero-section {
  background: url(../img/bg.jpg) center center no-repeat scroll;
  background-size: cover;
  padding: 0 0 4.5em;
  position: relative;
  color: #fff;
}

.hero-section::before,
.video-tour::before,
.pricing::before,
.twitter-feed::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
}

.hero-section::before { background: rgba(0, 0, 0, 0.3); }

.welcome-message { margin-top: 4.5em; }

.welcome-message h1 {
  font-size: 36px;
  color: #fff;
  font-weight: 400;
  margin: 0 0 24px;
}

.welcome-message h2 {
  font-size: 22px;
  color: #fff;
  font-weight: 400;
  margin: 0;
}

.btn {
  padding: 1em 3em;
  color: #fff;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  background-color: #f56363;
  line-height: 1.5;
  border: none;
  border-radius: 3px;
  font-weight: 400;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
}

.btn:hover {
  color: #fff;
  background-color: #fa5454;
}

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

.cta-btn p {
  color: #fff;
  margin: .75em 0 0;
  font-size: 18px;
}

/* ==========================================================================
   3.Navbar
   ========================================================================== */

.navbar-default {
  background-color: rgba(255, 255, 255, 0.97);
  border: none;
  margin-bottom: 0;
  border-radius: 0;
  padding: .75em 0;
}

.nav > li { text-align: center; }

.nav > li > a > i { padding-right: .2em; }

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #f56363;
  transition: all 0.3s ease-in-out;
}

.navbar-default .navbar-toggle:hover .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar { background-color: #fff; }

.navbar-brand { padding: 0 0 0 1em; }

.navbar-brand .logo-nav,
.nav-left { display: none; }

.navbar-default.stuck .logo-head { display: none; }

.navbar-default.stuck .logo-nav,
.navbar-default.stuck .nav-left { display: block; }

.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus { color: #fff; }

.navbar-default.stuck .navbar-nav>li>a { color: #4c4c4c; }

.navbar-default.stuck .navbar-nav > li > a:hover,
.navbar-default.stuck .navbar-nav > li > a:focus { color: #fa5454; }

.navbar-default .btn { font-size: 16px; }

.navbar-default.stuck .navbar-nav .btn {
  display: inline-block;
  background: #f56363;
  color: #fff;
  border: 1px solid #f56363;
}

.navbar-default.stuck .navbar-nav .btn:hover,
.navbar-default.stuck .navbar-nav .btn:focus {
  background: #fa5454!important;
  color: #fff;
}

.navbar-default.stuck {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.97);
  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);
}
}

/* ==========================================================================
   4.Play button
   ========================================================================== */
  
 
.play-btn { margin: 2.25em 0; }

.hero-section .play-btn img { transition: opacity 0.3s linear; }

.play-btn img:hover { opacity: .8; }

/* ==========================================================================
   5.Featured on
   ========================================================================== */
   
 

.section-header { margin-bottom: 3em; }

.section-header h2 {
  font-size: 24px;
  font-weight: 600;
  margin-top: 0;
}

.section-header h3 {
  font-size: 24px;
  font-weight: 300;
  margin: 0;
}

.featured-on,
.features,
.tour,
.site-footer { background-color: rgba(0, 0, 0, 0.03); }

.section-spacing,
.section-spacing.featured-on,
.section-spacing.tour,
.section-spacing.site-footer { padding: 3.75em 0; }

.featured-on .section-header { margin-bottom: 1.5em; }

.featured-sites li { padding: 0 3em 1.5em; }

.featured-sites li:last-child { padding-bottom: 0; }

.featured-sites img {
  opacity: .15;
  transition: all 0.5s linear;
}

.featured-sites img:hover { opacity: .2; }

/* ==========================================================================
   6.Benefits
   ========================================================================== */
   


.benefits img { margin-bottom: .75em; }

.benefits p { color: #8A8A8A; }

.benefits div[class^="col-"]:nth-child(1),
.benefits div[class^="col-"]:nth-child(2),
.reviews div[class^="col-"]:nth-child(1),
.reviews div[class^="col-"]:nth-child(2),
.team div[class^="col-"]:nth-child(1),
.team div[class^="col-"]:nth-child(2) { padding-bottom: 1.5em; }

.benefits div[class^="col-"] > p:last-child { margin-bottom: 0; }

/* ==========================================================================
   7.Features
   ========================================================================== */
   
.features { overflow-x: hidden; }

.features div[class="row"]:nth-child(1),
.features div[class="row"]:nth-child(2) { margin-bottom: 3em; }

.features article { margin-top: 1.5em; }

.features article h2 {
  font-size: 24px;
  margin: 24px 0 12px;
}

.features article li {
  font-size: 17px;
  color: #8A8A8A;
  padding-left: 1em;
  text-indent: -.7em;
  padding-bottom: .2em;
}

.features article li:last-child { padding-bottom: 0; }

.features article li:before {
  content: "• ";
  color: #f56363;
  padding-right: .5em;
}

.features div[class="row"]:nth-child(3) .col-md-4 article { margin-bottom: 1.5em; }

/* ==========================================================================
   8.video tour
   ========================================================================== */ 
   
.video-tour {
  position: relative;
  height: 400px;
  overflow: hidden;
  background: #333 url(../img/bg-video-preview.jpg) center center no-repeat scroll;
  background-size: cover;
  -webkit-perspective: 1000;
  perspective: 1000;
}

.video-tour::before {
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.video-tour h2 {
  font-size: 24px;
  color: #fff;
  font-weight: 400;
  margin-bottom: 0;
}

#bgvid-hero,
#bgvid {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

.video-tour .play-btn {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  margin: 0;
}

/* ==========================================================================
   9.tour
   ========================================================================== */
   
.center-block { float: none; }

.tour h2 {
  font-size: 24px;
  font-weight: 400;
  margin: 0;
}

.tour .btn {
  margin-top: 1em;
  vertical-align: initial;
}

.tour .btn i,
.sub-form .btn i { padding-left: .5em; }


/* ==========================================================================
  11.reviews
   ========================================================================== */
   
.reviews figure { margin-bottom: 1.5em; }

blockquote {
  padding: 0 0 0 3em;
  margin: 0;
  border-left: none;
  position: relative;
}

blockquote::before {
  content: "\201C";
  color: #e9e9e9;
  position: absolute;
  left: -12px;
  top: -50px;
  font-size: 128px;
}

blockquote p {
  font-size: 18px;
  font-weight: 400;
}

blockquote cite {
  font-size: 17.5px;
  font-weight: 400;
  color: #AEAFAF;
  font-style: normal;
}

/* ==========================================================================
  12.cta section
   ========================================================================== */
   
.cta-section { background-color: #f56363; }

.cta-section .section-header { margin-bottom: 2.25em; }

.cta-section h2 {
  font-size: 40px;
  font-weight: 600;
  color: #fff;
}

.cta-section .section-header h3 {
  font-size: 24px;
  font-weight: 300;
  color: #fff;
}

.cta-section .btn {
  background-color: #fff;
  color: #f56363;
  border: 1px solid transparent;
}

.cta-section .btn:hover {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
}

.cta-section p {
  color: #fff;
  margin: .75em 0 0;
}

.cta-section a[href^="tel"] { color: #fff; }

.cta-section a[href^="tel"]:hover {
  color: #fff;
  text-decoration: underline;
}

/* ==========================================================================
   13.Team
   ========================================================================== */
   
  

.team h4 {
  font-size: 21px;
  margin: 24px 0 6px;
}

.team h5 {
  font-size: 19px;
  font-weight: 400;
  margin-top: 0;
}

.team div[class^="col-"]:nth-child(3) .team-info h5 { margin: 0; }

.team p { color: #fff; }

.team-details figure {
  position: relative;
  overflow: hidden;
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
}

.team-details figcaption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 99, 99, 0.95);
  transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  padding: 1.5em 1em;
  display: block;
}

.team-details figure figcaption div p,
.team-details figure figcaption div li a {
  transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0, 200%, 0);
  -ms-transform: translate3d(0, 200%, 0);
  transform: translate3d(0, 200%, 0);
}

.team-details figure:hover figcaption,
.team-details figure:hover figcaption div p,
.team-details figure:hover figcaption div li a {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.team-details figure figcaption div p { transition-delay: 0.05s; }

.team-details figure figcaption div li:nth-child(1) a { transition-delay: 0.1s; }

.team-details figure figcaption div li:nth-child(2) a { transition-delay: 0.15s; }

.team-details .social { margin-top: .75em; }

.team-details .social li a {
  color: #f56363;
  background-color: #fff;
  border: 1px solid #f56363;
  width: 55px;
  height: 55px;
  line-height: 55px;
  font-size: 1.5em;
}

.team-details .social li a:hover {
  color: #fff;
  background-color: #f56363;
  border: 1px solid #fff;
}

.team-details figcaption div {
  position: absolute;
  left: 0;
  right: 0;
  bottom: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  padding: 1.5em;
}


/* ==========================================================================
   15.Contact us
   ========================================================================== */

.contact.section-spacing { padding: 3.75em 0 0; }

#map-canvas {
  width: 100%;
  margin: 0px;
  padding: 0px;
  height: 35em;
}

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

.map-info-box { text-align: left; }

.map-info-box p { margin: 0 0 8px; }

.map-info-box i {
  padding-right: .5em;
  color: #CEC9C9;
}

.map-head h3 {
  height: 30px;
  background: url(../img/logo-nav.png) 47px center no-repeat;
  background-size: 110px auto;
  text-indent: -999em;
  margin: 12px 0 14px;
}

.map-address { font-weight: 300; }

.map-email { font-weight: 400; }

/* ==========================================================================
   16.Subscription form styles
   ========================================================================== */
   

 .form-control::-webkit-input-placeholder {
 color: #8A8A8A;
}
 .form-control:-moz-placeholder {
 color: #8A8A8A;
}
 .form-control::-moz-placeholder {
 color: #8A8A8A;
}
 .form-control:-ms-input-placeholder {
 color: #8A8A8A;
}

.form-control {
  background-color: #fff;
  border: 1px solid #f56363;
  color: #4c4c4c;
  box-shadow: none;
  height: 60px;
  font-weight: 400;
  font-size: 16px;
  padding: 0 1.5em;
}

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

.sub-form .btn { padding: 1em; }

#mc-form .btn-default { height: 60px; }

#mc-notification {
  margin: 0.75em 0 0;
  font-weight: 400;
  color: #8A8A8A;
  font-size: 17px;
}

.error { color: #FF4C4C !important; }

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

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

/* ==========================================================================
   17.site footer 
   ========================================================================== */



.site-footer small { display: inline-block; }

.footer-links,
.site-footer small { margin: 0 0 .75em; }

.site-footer small,
.footer-links a {
  color: #8A8A8A;
  font-weight: 300;
  font-size: 18px;
}

.footer-links a:hover { color: #fa5454; }

.footer-links a:first-child { padding-right: .4em; }

/* ==========================================================================
   18.Social 
   ========================================================================== */


.social li {
  display: inline-block;
  padding-right: .5em;
  text-align: center;
}

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

.social li a {
  display: block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  color: #fff;
  border-radius: 50%;
  position: relative;
  transition: all .8s ease;
  font-size: 1.3em;
  background: #D6D6D6;
}

.social li a:hover {
  color: #fff;
  background: #f56363;
}

/* ==========================================================================
   19.Small devices (tablets, 768px and up)
   ========================================================================== */
   
@media (min-width: 768px) {

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

.welcome-message { margin-top: 8.25em; }

.welcome-message h1 { font-size: 44px; }

.welcome-message h2 { font-size: 23px; }

.play-btn { margin: 3em 0; }

.featured-sites li {
  padding: 0 1em;
  display: inline-block;
}

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

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

.section-header h3 { font-size: 26px; }

.benefits div[class^="col-"]:nth-child(1),
.benefits div[class^="col-"]:nth-child(2),
.reviews div[class^="col-"]:nth-child(1),
.reviews div[class^="col-"]:nth-child(2),
.team div[class^="col-"]:nth-child(1),
.team div[class^="col-"]:nth-child(2) { padding-bottom: 0; }

.tour .btn { margin: 0 0 0 1em; }

.video-tour { height: 450px; }

.plan {
  width: 325px;
  margin: 0 1em 0;
}

blockquote { padding: 0 0 0 1em; }

blockquote::before {
  left: -18px;
  top: -30px;
  font-size: 80px;
}

.cta-section h2 { font-size: 46px; }

.team h5 { margin: 0 !important; }

.tweet { font-size: 23px; }

.sub-form .btn { padding: 1em 2em; }
}

/* ==========================================================================
   20.Medium devices (desktops, 992px and up) 
   ========================================================================== */
   
@media (min-width: 992px) {

.hero-section {
  padding: 3em 0 12.75em;
  background: none;
}

.hero-section::before { display: none; }

.overlay {
  position: absolute;
  width: 100%;
  min-height: 100%;
  background: rgba(0, 0, 0, 0.3);
  top: 0;
}

.navbar-default { background-color: transparent; }

.navbar-default .btn {
  border: 1px solid #fff;
  background-color: transparent;
  padding: .75em 1.5em;
}

.navbar-default .btn:hover { background-color: #fa5454 !important; }

.navbar-brand { padding: 0; }

.nav-left { padding-left: 3em; }

.welcome-message { margin-top: 7.5em; }

.welcome-message h1 { font-size: 56px; }

.welcome-message h2 { font-size: 24px; }

.play-btn { margin: 4.5em 0; }

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

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

.features div[class="row"]:nth-child(1),
.features div[class="row"]:nth-child(2) { margin-bottom: 7.5em; }

.features article { margin-top: 6em; }

.features img {
  max-width: none;
  position: absolute;
  width: 900px;
  top: 0;
  left: 22px;
}

.features div[class="row"]:nth-child(2) .col-md-7 img { left: -277px; }

.featured-sites li { padding: 0 3em; }

.video-tour {
  height: 600px;
  background: none;
}

.video-tour::before { background: rgba(0, 0, 0, 0.1); }

#bgvid-hero,
#bgvid { display: block; }

.plan {
  margin: 0 1.5em 0;
  width: 350px;
}

blockquote { padding: 0 0 0 3em; }

blockquote::before {
  left: -5px;
  top: -50px;
  font-size: 128px;
}

.footer-links,
.site-footer small { margin: 0; }

.section-spacing.site-footer { padding: 3em 0; }
}

@media (max-width: 460px) {

.video-tour .play-btn img { width: 45%; }
}