/*
Theme Name: maxblog
Description:movaeic theme 2017ver
Theme URI: https://movaeic.jp/
Author: Red deer Inc.
Version: Masao Sato
*/

/* ==========================================================================
   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.Campaign section
   13.Team & About
   14.Twitter feed
   15.Contact us
   16.Subscription form styles
   17.site footer
   18.Social

   22.FAQ & Guaranteed

   19.Smart Phone (max-width: 767px)
   20.Medium devices (tablets, 768px and up)
   21.PC 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: #0082ca;
   	transition: all 0.3s ease-in-out;
   }

   a:hover,
   a:focus {
   	color: #0082ca;
   	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; }

   span a {color: #fff;}
   span a:hover {color: #ababab;}

   .margin-top-30 {
   	margin-top: 30px !important;
   }

   .margin-top-60 {
   	margin-top: 60px !important;
   }

   .margin-top-90 {
   	margin-top: 90px !important;
   }

   .margin-bottom-30 {
   	margin-bottom: 30px !important;
   }

   .margin-bottom-60 {
   	margin-bottom: 60px !important;
   }

   .margin-bottom-90 {
   	margin-bottom: 90px !important;
   }

   .padding-top-30 {
   	padding-top: 30px !important;
   }

   .padding-top-60 {
   	padding-top: 60px !important;
   }

   .padding-top-90 {
   	padding-top: 90px !important;
   }

   .padding-top-120 {
   	padding-top: 120px !important;
   }

   .padding-bottom-30 {
   	padding-bottom: 30px !important;
   }

   .padding-bottom-60 {
   	padding-bottom: 60px !important;
   }

   .padding-bottom-90 {
   	padding-bottom: 90px !important;
   }

   h1.white {color:#ffffff !important;}
   h2.white {color:#ffffff !important;}
   h3.white {color:#ffffff !important;}
   h4.white {color:#ffffff !important;}
   h5.white {color:#ffffff !important;}
   p.white {color:#ffffff !important;}

   .large {font-size:60px;}

   .leftfont {
   	text-align:left;
   	font-family:sans-serif;
   }


/* ==========================================================================
   2.Hero section
   ========================================================================== */

   .hero-section {
   	background: url(img/background/woodboard-retake02.jpg) center center no-repeat scroll;
   	background-size: cover;
   	padding: 0 0 4.5em;
   	position: relative;
   	color: #fff;
   	overflow: hidden;
   }

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

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

   .welcome-message h1 {
   	color: #0082ca;
   	font-weight: bold;
   	margin: 0 0 24px;

   	display: block;
   	text-shadow: #ffffff 0px 0px 5px, #ffffff 0px 0px 7px, #ffffff 0px 0px 5px;
   	text-align: center;
   }

   .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: #0082ca;
   	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: #0082ca;
   }

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

   .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: #0082ca;
   	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: #0082ca; }

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

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

   .navbar-default.stuck .navbar-nav .btn:hover,
   .navbar-default.stuck .navbar-nav .btn:focus {
   	background: #0082ca!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: 40px;
   	margin-top: 0;
   	color: #ffffff;
   }

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

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

   .features-sub {background-color: #ffffff;}

   .section-spacing.featured-on {
   	padding: 20px;
   	margin: 0px;
   }

   .featured-on .section-header { padding-top: 10px; }

   .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 {background-color: rgba(0, 0, 0, 0.03);}


   .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; }

   .blueicon {color:#0082ca;}

/* ==========================================================================
   7.Features
   ========================================================================== */

   .features { overflow-x: hidden; }

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

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



/* ==========================================================================
   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 {
   	position: absolute;
   	top: 50%;
   	left: 50%;
   	width: auto;
   	height: auto;
   	min-width: 100%;
   	min-height: 100%;
   	-webkit-transform: translate(-50%, -50%);
   	transform: translate(-50%, -50%);
   	z-index: -1;
   	display: none;
   	object-fit: cover;
   }

   .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; }

/* ==========================================================================
   10.Pricing
   ========================================================================== */

   .pricing {
   	background: url(img/background/price-background.jpg) center center no-repeat scroll;
   	background-size: cover;
   	position: relative;
   }

   .pricing::after {
   	content: '';
   	position: absolute;
   	top: 0;
   	left: 0;
   	border-bottom: 13em solid transparent;
   	border-left: 13em solid #0082ca;
   }

   .pricing span {
   	position: absolute;
   	content: " ";
   	font-size: 22px;
   	font-weight: bold;
   	color: #fff;
   	z-index:100;
   	top: 1em;
   	left: -2em;
   	transform: rotate(-45deg);
   	-webkit-transform: rotate(-45deg);
   	-ms-transform: rotate(-45deg);
   }


   .pricing .section-header h2,
   .pricing .section-header h3 {
   	position: relative;
   	color: #fff;
   }

   .plan {
   	background-color: #fff;
   	width: 350px;
   	display: inline-block;
   	margin: 0 0 1.5em;
   	max-width: 100%;
   }

   .plan:last-child { margin-bottom: 0; }

   .plan .header,
   .price,
   .plan-features { padding: 1.5em 1em; }

   .plan .header h4 {
   	font-size: 21px;
   	margin: 0;
   }

   .price {
   	background-color: #43c5b8;
   	color: #fff;
   }

   .price-amount {
   	font-size: 60px;
   	line-height: 1;
   }

   .period { font-size: 20px; }

   .currency {
   	font-size: 30px;
   	vertical-align: top;
   	top: 30px;
   }

   .plan-features li {
   	padding-bottom: .75em;
   	font-size: 17px;
   }

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

   .plan-features li span { font-weight: 700; }

   .plan-features li i {
   	padding-left: .5em;
   	color: #0082ca;
   }

   .buy-button { padding-bottom: 1.5em; }

   .buy-button p {
   	margin: 12px 0 0;
   	font-weight: 300;
   }

   .price_link a {font-weight:bold;}
   .price_link a:hover{color:#43c5b8;}

/* ==========================================================================
  11.reviews
  ========================================================================== */

  .reviews {background-color:#ffffff;}
  .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;
  }

  .img-circle {
  	max-width: 40% !important;
  }

/* ==========================================================================
  12.Campaign section
  ========================================================================== */

  .cta-section { background-color: #0082ca; }

  .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 .section-header small {
  	color: #fff;
  }


  .cta-section .btn {
  	background-color: #fff;
  	color: #0082ca;
  	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{color:#ffffff;}
  .cta-section a:hover {color: #ababab;}

  .cta-2-section {
    background: url(img/background/bg-blog.jpg) center center no-repeat scroll;
    background-size: cover;
    position: relative;
  }

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

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

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

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

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

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

  .cta-2-section a{color:#ffffff;}
  .cta-2-section a:hover {color: #ababab;}

  /*cta-3-section*/
  .cta-3-section { background-color: #43c5b8; }

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

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

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


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

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

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

  .cta-3-section a{color:#ffffff;}
  .cta-3-section a:hover {color: #ababab;}

  .cta-4-section {
    background-color: #ff595e;
  }

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

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

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

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

  .cta-summer-section {
    background: url(img/background/summer_camp_bg.jpg) center center no-repeat scroll;
    background-size: cover;
    position: relative;
  }

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

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

  .cta-summer-section .section-header h3 {
  	font-size: 20px;
  	font-weight: bold;
  	color: #fff;
  }
  .cta-summer-section .section-header small {
  	color: #fff;
  }


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

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

  .cta-summer-section p {
    font-size: 16px
  	color: #fff;
  	margin: 2em 0 0;
  }

  .cta-summer-section a{color:#ffffff;}
  .cta-summer-section a:hover {color: #ababab;}

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



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

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

   .team h6 {
   	font-size: 14px;
   	line-height: 18px;
   	font-weight: 400;
   	margin-top: 0;
   	color:#fff;
   }

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

   .team p {
   	color: #4c4c4c;
   	font-size:12px;
   }

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

   .team-details figcaption {
   	position: absolute;
   	top: 0;
   	left: 0;
   	right: 0;
   	bottom: 0;
   	background-color: #0082ca;
   	opacity:0.8;
   	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: #0082ca;
   	background-color: #fff;
   	border: 1px solid #0082ca;
   	width: 55px;
   	height: 55px;
   	line-height: 55px;
   	font-size: 1.5em;
   }

   .team-details .social li a:hover {
   	color: #fff;
   	background-color: #0082ca;
   	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;
   }

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

   table {
   	border-collapse: collapse;
   	border-spacing: 2px;
   	width: 100%;
   	text-align:left;
   }

   ul.aboutlist {
   	color: #000;
   }

   a.tdlink {color: #d6d6d6;}

   a.tdlink:hover{font-weight:bold;}

   li.aboutli {
    text-align: left;
    font-family:sans-serif;
  }

  .table tbody.bluebackall {
    background-color:#0082ca;
  }

  .bluebackall tr {
    color: #fff;
    font-family: sans-serif;
  }

  .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857;
    vertical-align: top;
    border-top: 1px solid #ddd;
  }

/* ==========================================================================
   14.Twitter feed
   ========================================================================== */

   .footer-feed {
   	background: url(img/background/woodboard-retake02.jpg) center center no-repeat scroll;
   	background-size: cover;
   	position: relative;
   }

   .footer-feed::before { background: rgba(0, 0, 0, 0.38); }

   .twitter-icon .fa-twitter {
   	color: #fff;
   	font-size: 4em;
   	padding-bottom: 12px;
   }

   .tweet {
   	font-size: 20px;
   	font-weight: 300;
   	color: #fff;
   }

   .tweet a { color: #fff; }

   .tweet a:hover { color: rgba(255, 255, 255, 0.92); }

/* ==========================================================================
   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/logo-nav.png) center no-repeat;
   	background-size: 73px 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 #0082ca;
   	color: #4c4c4c;
   	box-shadow: none;
   	height: 60px;
   	font-weight: 400;
   	font-size: 16px;
   	padding: 0 1.5em;
   }

   .form-control:focus {
   	border-color: #0082ca;
   	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: 14px;
   }

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

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

   .chat-btn.fixed {
   	width: 50px;
   	height: 50px;
   	border-radius: 50%;
   	background: #0082ca url(img/icons/chat-icon.svg) center center no-repeat;
   	position: fixed;
   	bottom: 120px;
   	right: 30px;
   	box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
   	transition: all 0.2s ease-in-out;
   	z-index: 2;
   }

   .chat-btn.fixed { display: none; }

   .chat-btn:hover {
   	-webkit-transform: scale(1.1);
   	transform: scale(1.1);
   }

   .chat-btn.fixed { display: block; }

   #modal-contact-form .modal-body { padding: 3em 1em; }

   .contact-form .section-header h2 { margin: 24px 0 12px; }

   .contact-form .form-control {
   	border-radius: 4px;
   	height: 49px;
   	padding: 10px 16px;
   	border-color: #dadddf;
   }

   .contact-form .form-control:focus { border-color: #fab1b1; }

   .contact-form textarea.input-lg { height: auto; }

   .cta-form .form-group { margin-bottom: 24px; }

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

   .contact-form-success {
   	text-align: center;
   	padding: 12px;
   	margin: 0;
   	font-size: 20px;
   	display: none;
   }

   .contact-form-success i {
   	display: block;
   	width: 80px;
   	height: 80px;
   	margin: 0 auto 12px;
   	border: 3px solid #2dbf5b;
   	line-height: 74px;
   	border-radius: 50%;
   	font-size: 38px;
   	text-align: center;
   	color: #2dbf5b;
   	background: transparent;
   }

   .contact-form-success { color: #949494; }

   .contact-form-success span {
   	display: block;
   	margin-bottom: 6px;
   	color: #4c4c4c;
   	font-size: 30px;
   }

   .modal-backdrop.in { opacity: .8; }

   .modal { padding-right: 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: 800;
   }

   .modal .close:hover,
   .modal .close:focus {
   	opacity: 1;
   	outline: none;
   	-webkit-transform: scale(1.1);
   	transform: scale(1.1);
   }

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

   .modal .modal-content { border-radius: 3px; }

   span.footerdiv {
   	color: #dedddd;
   }

/* ==========================================================================
   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: #0082ca;
   }

  /* ==========================================================================
   22.FAQ & Guaranteed
   ========================================================================== */

   #acMenu dt{
   	display: block;
   	/* width: 200px; */
   	/* height: 50px; */
   	/* line-height: 50px; */
   	text-align: left;
   	/* border: #666 1px solid; */
   	cursor: pointer;
   }
   #acMenu dd{
   	/*background: #f2f2f2; */
   	width: 100%;
   	/* height: 50px; */
   	text-align: left;
   	/* border: #666 1px solid; */
   	display: none;
   	width:80%;
   	padding-top: 10px;
   }

   #acMenu p{
   	font-size:14px;
   }

   #acMenu li{
   	font-size:12px;
   }

   #gua dt{
   	display: block;
   	/* width: 200px; */
   	/* height: 50px; */
   	/* line-height: 50px; */
   	text-align: center;
   	/* border: #666 1px solid; */
   	cursor: pointer;
   	font-size: 20px;
   }
   #gua dd{
   	/*background: #f2f2f2; */
   	width: 100%;
   	/* height: 50px; */
   	text-align: center;
   	/* border: #666 1px solid; */
   	display: none;
   	width:80%;
   	padding-top: 10px;
   }

   #gua p{
   	font-size:15px;
   	font-weight:bold;
   }

   #gua li{
   	font-size:15px;
   }
   h3.gua{
   	font-size:45px;
   }

   ul, ol {
   	padding-left: 0px !important;
   }

   /* ==========================================================================
   19.top page news
   ========================================================================== */
   .blog-m-post.accordion .blog-txt {
    border: 1px solid transparent;
  }
  .blog-m-post .blog-txt {
    position: relative;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
  }
  .blog-m-post.accordion {
    margin: 0 0 15px;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
  }
  .blog-m-post {
    overflow: hidden;
  }
  .blog-m-post.accordion .box-holder {
    left: 19px;
    top: -85px;
    bottom: auto;
  }

  .blog-m-post .box-holder {
    position: absolute;
  }

  .blog-m-post.accordion time {
    margin: 0 auto;
  }

  .blog-m-post time {
    color: #fff;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 21px;
    padding: 19px 0 0;
    text-align: center;
    background: #2a2a2a;
    letter-spacing: 2px;
    margin: -5px auto 0;
    width: 74px;
    height: 74px;
    text-transform: uppercase;
  }

  .blog-m-post time .add {
    display: block;
    font-size: 22px;
    font-weight: 700;
  }

  h3.newsh3 {
    font-size: 16px;
    font-weight: 100;
  }

  .btn-news {
    position: relative;
    z-index: 2;
    background-color: #0082ca;
    border: 2px solid #0082ca;
    color: #fff;
    line-height: 50px;
    padding: 1px 40px;
  }
  .btn-news:hover {
    background-color: #fff;
    border-color: #59b1eb;
    color: #59b1eb;
  }
  .btn-news::before,
  .btn-news::after {
    top: 0;
    width: 50%;
    height: 100%;
    background-color: #333;
  }
  .btn-news::before {
    right: 0;
  }
  .btn-news::after {
    left: 0;
  }
  .btn-news:hover::before,
  .btn-news:hover::after {
    width: 0;
    background-color: #59b1eb;
  }

  h3.newsh3 a {
    color: #4c4c4c!important;
  }


/* ==========================================================================
   19.tablet
   ========================================================================== */

   @media (max-width: 767px) {

   	.large {font-size: 30px;}

   	.margin-top-30 {
   		margin-top: 15px !important;
   	}

   	.margin-top-60 {
   		margin-top: 30px !important;
   	}

   	.margin-top-90 {
   		margin-top: 45px !important;
   	}

   	.margin-bottom-30 {
   		margin-bottom: 15px !important;
   	}

   	.margin-bottom-60 {
   		margin-bottom: 30px !important;
   	}

   	.margin-bottom-90 {
   		margin-bottom: 45px !important;
   	}

   	.padding-top-30 {
   		padding-top: 15px !important;
   	}

   	.padding-top-60 {
   		padding-top: 30px !important;
   	}

   	.padding-top-90 {
   		padding-top: 45px !important;
   	}

   	.padding-top-120 {
   		padding-top: 60px !important;
   	}

   	.padding-bottom-30 {
   		padding-bottom: 15px !important;
   	}

   	.padding-bottom-60 {
   		padding-bottom: 30px !important;
   	}

   	.padding-bottom-90 {
   		padding-bottom: 45px !important;
   	}

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

   	.welcome-message h1 {
   		font-size: 36px;
   		font-height:40px;
   	}
    h3.newsh3 {
      font-size: 20px;
      font-weight: bold;
    }

   	.section-header h2 {
   		font-size: 18px;
   	}
   	.sub-section-header h2 {font-size: 20px;font-weight:bold;}
   	.cta-section .section-header h3 {font-size: 12px;}
   	.cta-2-section .section-header h3 {font-size: 18px;}
   	.cta-3-section .section-header h3 {font-size: 18px;}
   	.cta-section .section-header {margin-bottom: .8em;}
   	.cta-2-section .section-header {margin-bottom: 1.25em;}
   	blockquote cite {font-size: 12px;}
   	.sub-form .btn {padding: .5em;font-size: 12px;font-weight:bold;}
   	.cta-2-section p {font-size:12px;}
   	.cta-section p{font-size:12px;}
   	h3 small{font-size:80%;}


   	.btn {
   		padding: .5em 2em;
   		font-size: 14px;
   		font-weight: bold;
   	}

   	.features h2 {font-size: 22px;}

   	.features article h2 {font-size: 18px;}
   	.sub-section-header h3{font-size: 18px;}
   	.blueicon h4{font-size: 14px;}
   	.blueicon p{font-size: 12px;}

   	blockquote{padding: 0 1em 0 1em;}

   	blockquote p {font-size: 14px;margin:0px;}

   	blockquote::before {
   		left: 1px;
   		top: -30px;
   		font-size: 58px;
   	}

   	.features article p {font-size: 14px;}

   	.features-sub article h2 {font-size: 18px;}

   	.features-sub article p {font-size: 14px;}

   	.pricing::after {
   		border-bottom: 8em solid transparent;
   		border-left: 8em solid #0082ca;
   	}

   	.pricing span {font-size:13px;}

   	.plan .header, .price, .plan-features{padding: .5em}
   	.plan .header h4 {font-size: 18px;}
   	.price-amount {font-size: 30px;}
   	.period {font-size: 12px;}
   	.plan-features li {
   		padding-bottom: .5em;
   		font-size: 12px;
   	}
   	.plan-features li {
   		padding-bottom: .5em;
   		font-size: 12px;
   	}

   	.plan {
   		width: 350px;
   	}

   	.site-footer small, .footer-links a {
   		font-size: 12px;
   	}

   	.team h4 {font-size: 18px;}
   	.team h5 {font-size: 14px;}
   	.team h6 {font-size: 14px;line-height: 18px;}

   	.team-details figure {width: 250px;}
   	p.aboutus{font-size:14px;}
   	.table tbody.bluebackall {font-size: 14px;}
   	h3.gua {font-size: 25px;}
   	#gua dt {font-size: 16px;}
   	#gua p {font-size: 14px;font-weight: bold;
   	}

   	h3.faqh3 {font-size: 18px;}
   	#acMenu dt {font-size: 16px;}
   	#acMenu li {font-size: 12px;}





   }


/* ==========================================================================
   20.Medium 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: 50px;
   		font-height:50px;
   	}

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

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

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

   	.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; }

   	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; }

   	#modal-contact-form .modal-body { padding: 3em; }

   	.modal button.close { right: 0; }

   }
/* ==========================================================================
   21.PC devices (desktops, 992px and up)
   ========================================================================== */

   @media (max-width: 1200px) and (min-width: 995px){
   	.plan {
   		width: 270px;
   	}
   }

   @media (max-width: 994px) and (min-width: 768px){
   	.plan {
   		width: 200px;
   	}
   	.btn {
   		padding: 1em;
   	}
   }

   @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-image: url(img/background/video_stripe_black.png);
   		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: #0082ca !important; }

   	.navbar-brand { padding: 0; }

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

   	.welcome-message { margin-top: 10px; }

   	.welcome-message h1 { font-size:70px; height:75px; }

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

   	.play-btn { padding-top: 100px; }

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

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

   	.features img {
   		max-width: 100%;
   		/*position: absolute;*/
   		top: 0;
   		left: 100px;
   		padding-left:120px;
   	}
   	.features-sub img {
   		max-width: 100%;
   		/*position: absolute;*/
   		top: 0;
   		left: 100px;
   		padding-right:120px;
   	}

   	.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; }

   	blockquote { padding: 0 0 0 3em; }

   	blockquote::before {
   		left: 35px;
   		top: -33px;
   		font-size: 58px;
   	}

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

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


   /* additional step 20181210 */
   p.freeToStartP {
     text-align: left;
     font-size: 12px;
     margin: 20px 0 0;
   }
   .freeToStart > img {
     margin: 0px auto 30px;
   }
   @media screen and (max-width:740px) {
     p.freeToStartP {
      font-size: 14px;
      text-align: center;
     }
     .freeToStart > img {
       width: 60%;
     }

   }