@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

body {
	background: var(--colorBackground);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px; /* PIXEL FALLBACK */
	font-size: 1.6rem;
	line-height: 1.5;
	color: var(--colorMainText);
}
.download-btn { margin-top: 12px !important;}
button {
	color: #fff;
	font-size: 18px;
	line-height: 50px;
	text-align: center;
	width: 250px;
	border:none;
	background: var(--colorCTA) !important;
}

button:hover {
	background: var(--colorCTADark)!important;
}
iframe{
	border:none;
	}

/*---------------------------------------
   1.3 TYPOGRAPHY               
-----------------------------------------*/
	
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'lato', sans-serif;
} 

h1 {
	font-size: 48px; /* PIXEL FALLBACK */
	font-size: 4.8rem;
}

h2 {
	font-size: 36px; /* PIXEL FALLBACK */
	font-size: 3.6rem;
	font-weight:bold;
	margin-top:0;
	color: var(--colorFeatured);
}

h3 {
	font-size: 22px; /* PIXEL FALLBACK */
	font-size: 2.2rem;
	font-weight: bold;
}
h4 {
	font-size: 26px; /* PIXEL FALLBACK */
	font-size: 2.6rem;
	font-weight: bold;
	text-transform:uppercase;
}

/* --------------------------------------
=========================================
   2. MASTER COLOR SETTINGS
=========================================
-----------------------------------------*/

/*---------------------------------------
   2.1 BACKGROUND COLOR SETTINGS               
-----------------------------------------*/
#object,
h2.form-title,
button,
.submit-btn,
.advertised.red,
.feature-bullet,
.red-bg,
.price-bg.red,
.separator.red,
.price-bg .price-seprator.red,
.newsletter-button{
	background:var(--colorFeatured);
	}
	
button:hover,
.submit-btn:hover,
.newsletter-button:hover,{
	background:var(--colorCTADark);
	}

/*---------------------------------------
   2.2 BORDER COLOR SETTINGS               
-----------------------------------------*/	
.logo img {
    border-color: var(--colorFeatured);
	max-width: 46%;
}
.verticle-line{
	  border-color: var(--colorFeatured) !important;
}
.selo { width: 80% !important}
.arrow-left{
	  	border-left:10px solid var(--colorFeatured) !important; 
}
.arrow-down{
	border-top: 25px solid var(--colorFeatured) !important; 
}

/*---------------------------------------
   2.3 TEXT COLOR SETTINGS               
-----------------------------------------*/

.price-circle span,
 a{
	color: var(--colorFeatured);
}

a:hover {
	color: var(--colorFeaturedDark);
}

/* --------------------------------------
=========================================
   3. PRELOADER
=========================================
-----------------------------------------*/

/*---------------------------------------
   3.1 LOADING               
-----------------------------------------*/

#loading{
	background:var(--colorBackground);
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 1;
	margin-top: 0px;
	top: 0px;
}
#loading-center{
	width: 100%;
	height: 100%;
	position: relative;
}
#loading-center-absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 200px;
	width: 200px;
	margin-top: -100px;
	margin-left: -100px;
}
#object{
	width: 30px;
	height: 30px;
	-webkit-animation: animate 1s infinite ease-in-out;
	animation: animate 1s infinite ease-in-out;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
}

/*---------------------------------------
   3.2 LOADING ANIMATION               
-----------------------------------------*/

@-webkit-keyframes animate {
  0% { -webkit-transform: perspective(160px); }
  50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
  100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
}

@keyframes animate {
  0% { 
    transform: perspective(160px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg); 
  } 50% { 
    transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
  } 100% { 
    transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
  }
}

.container {width: 100%; padding: 80px 0;}
.containerMap{padding-bottom: 0 !important;}
	.containerFooter {padding: 0 !important;}
.containerFooter a{color: #fff !important;}
.containerSocial{ padding: 40px 0 !important;}
.row {width: 95%;max-width: 1400px; margin: auto;}

@media(max-width:769px) {
	.container {width: 100%; padding: 60px 0;}	
	.containerMap{padding-bottom: 0 !important;}
	.containerFooter {padding: 0 !important;}
	.containerSocial{ padding: 40px 0 !important;}
}

section{
	margin-top:0px;
	text-align:center;
}

.gray-bg {
	background-color: #f5f5f5;
}
	
.white-bg {
	width:100%;
	padding-left: 30px;
	padding-right: 30px;
	margin: auto;
	background: #fff;
}
.white-bg .col-md-4 { margin: 0 5px; width: calc(33.33333333% - 10px)}
@media only screen and (max-width:768px){
	.white-bg .col-md-4 { width: calc(33.33333333% - -100px);display: inline-block;}
}
@media only screen and (max-width:414px){
	.white-bg .col-md-4 { width: calc(100% - 10px)}	
}

.separator {
	background: var(--colorFeatured);
	display: inline-block;
	height: 4px;
	margin: 21px 0;
	width: 80px;
}

.red-bg .separator { 
	background: #fff !important;
}

section p {
}

.infoText { width: 75%; margin: 0 auto; text-align: justify;}
.banner {margin: 0px auto 0 !important;padding: 0;}

.background-image,.bannerDesktop {display: block;}
.background-image-responsive, .bannerResponsivo { display: none;}

@media only screen and (max-width: 768px) {
	.jumbotron img { width: 100% !important}
	.image-container {width: 100vw !important;height: 100vh !important;}
	.background-image,.bannerDesktop { display: none;}
	.background-image-responsive{ display: block;width: 100vw !important;height: 100vh !important;}
	.bannerResponsivo { display: block;}
	
}
/*---------------------------------------
   4.2 SECTION RED               
-----------------------------------------*/

.red-bg {
	width:100%;
}

.red-bg h2 {
	color:#FFFFFF !important;
	font-size: 36px; /* PIXEL FALLBACK */
	font-size:3.6rem;
	font-weight: bold;
}
.red-bg p {
	color: #fff;
}


.maps iframe {box-shadow: 0px 0px 2px  rgba(0,0,0,0.2);
border-radius: 8px; width: 100% !important;}

/* --------------------------------------
=========================================
   5. HEADER-SECTION
=========================================
-----------------------------------------*/
.pageLeft { text-align: left;}

.pageCenter { text-align: center;}
.pageCenter .logo { text-align: center;}
.pageCenter .verticle-line {
	text-align: center;
	border-right: 0px solid;
	border-left: 0px;
}

.pageRight { text-align: right;}
.pageRight .logo { text-align: right;}
.pageRight .verticle-line {
	text-align: right;
	border-right: 4px solid;
	border-left: 0px;
}

.jumbotron {
	min-height: 700px;
	padding: 0;
	margin-bottom:0;
	border-bottom: 30px solid var(--colorFeaturedDark);
	position: relative ;
	background-color:  var(--colorBackground);
}
@media screen and (max-width: 1112px){
	
}
/*---------------------------------------
   5.1 HEADER LEFT               
-----------------------------------------*/
#header-left {
	padding: 0 0 0 10px;
}

.logo {
	margin: 0 0 0;
}

.verticle-line {
	border-left: 4px solid;
	border-color:var(--colorFeatured);
	margin: 61px 0 0;
	padding: 8px 20px;
}
.verticle-line img { max-width: 100%;}

.hasBackgroundBox {
	background-color: rgba(255,255,255,0.8);
	padding-top:12px; 
	padding-bottom:12px;  
}

.jumbotron h1 {
	font-size: 42px; /* PIXEL FALLBACK */
	font-size: 4.2rem;
	color: var(--colorMainTitle);
	margin-top:0;
	font-weight: 600;
	
}

.jumbotron h2 {
	font-size:28px; /* PIXEL FALLBACK */
	font-size:2.8rem;
	font-weight:normal;
	color: var(--colorMainTitle) !important;
	margin-bottom:0;
}

.jumbotron p {
	color: var(--colorMainTitle);
	font-size: 18px; /* PIXEL FALLBACK */
	font-size: 1.8rem;
	margin: 45px 0;
	padding-left: 20px;
	padding-right: 20px;
}

button.view-detail  {
	width: 250px;
}

/*---------------------------------------
   5.2 HEADER RIGHT               
-----------------------------------------*/
h2.form-title {
	color: #fff !important;
	padding: 36px 24px;
	text-align: center;
	position:relative;
}


.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 35px solid transparent;
	border-right: 35px solid transparent;
	border-top: 25px solid var(--colorFeatured);
	bottom:-17px;
	left:calc(50% - 35px);
	position:absolute;
}

#landing-form{
	box-shadow: 2px 10px 13px 3px rgba(0, 0, 0, 0.2);
	padding: 0 !important;
}

.form-bg {
	padding: 50px 0px 30px;
	text-align: center;
	background-color: #f1f1f1;
}

.form-bg .contactOptions{
	padding-top: 0px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 30px;
font-size: 0.8em;
font-weight: 600;
color: rgb(136, 136, 136);
	text-align: left;
}

.form-bg .contactTitle{
display: block;
font-weight: 600;
color: rgb(170, 170, 170);
padding-bottom: 5px;
}

.form-bg .contactOption{
width: 40%;
display: inline-block;
}

.form-bg .contactOptionLeft{
width: 57%;
display: inline-block;
}

.form-group {
	padding:0px 20px;
}

.form-control {
  height: 45px;
  padding: 6px 12px;
  font-size: 14px;
  color: #555;
  border:none;
  border-radius: 1px;
}
.form-control::-moz-placeholder {
    color: #bbb;
    opacity: 1
}

.form-control:-ms-input-placeholder {
    color: #bbb
}

.form-control::-webkit-input-placeholder {
    color: #bbb
}

.submit-btn {
	width: calc(100% - 40px);
	color: #fff;
	font-size: 18px;
	line-height: 50px;
	margin:auto;
	text-align: center;
	border:none;
}

.textSmallInfo { font-size: 0.8em; color: #999; padding: 20px; }

.zig-zag-bottom:after{
		background: 
					linear-gradient(-45deg, transparent 16px, #f1f1f1 0), 
					linear-gradient(45deg, transparent 16px, #f1f1f1 0);
        background-repeat: repeat-x;
		background-position: left bottom;
        background-size: 22px 32px;
        content: "";
        display: block;

		width: 100%;
		height: 32px;

 	    position: relative;
		top:44px;
		left:0px;
	}

.error{
	background:#e2574c;
	color:#fff;
	text-align:center;
	line-height:50px;
	margin-bottom:15px;
	}
.success{
	background:#42b089;
	color:#fff;
	text-align:center;
	line-height:50px;
	margin-bottom:15px;
	padding: 25px 0;
	}

.validateFail {border-left:2px solid #e2574c;
background-color: rgba(226, 87, 76, 0.15);}

/* --------------------------------------
=========================================
   6. ADVERTISED-SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   6.1 BASIC STYLE               
-----------------------------------------*/
#advertised-section {
	background: #243842;
	padding: 50px 0;
	margin-top:0;
}

.advertised {
	background: #374d5b;
	height: 75px;
}

.advertised.red {
	position: relative;
}

.advertised p {
	line-height: 73px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #fff;
	width: 100%;
	margin: 0px;
	text-align: center;
}

/*---------------------------------------
   6.2 ARROW LEFT AND DOWN               
-----------------------------------------*/
.arrow-left {
	position: absolute;
	right: -10px;
	top: 23px;
	width: 0; 
	height: 0; 
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent; 
	border-left:10px solid var(--colorFeatured); 
}

.arrow-down-2 {
	width: 0; 
	height: 0; 
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 10px solid var(--colorFeatured);
	top:75px;
	left:48%;
	position:absolute;
	display:none;
}

/* --------------------------------------
=========================================
   7. FEATURE-SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   7.1 BASIC STYLE               
-----------------------------------------*/
#feature-section{
	text-align:left;
	}

section .verticle-line {
	margin: 0;
}

/*---------------------------------------
   7.2 FEATURE LIST              
-----------------------------------------*/
.feature-list {
	padding: 0px;
	float: left;
	width: 100%;
	margin: 47px 0 0;
}

.feature-list li {
	list-style: none;
	width: 100%;
	float: left;
	margin-bottom:15px;
}

.feature-bullet {
	border-radius: 50%;
	color: #fff;
	font-size: 24px; /* PIXEL FALLBACK */
	font-size: 2.4rem;
	font-weight:bold;
	height: 45px;
	float:left;
	line-height: 44px;
	text-align: center;
	width: 45px;
}

.feature-content {
	width:70%;
	margin-left:20px;
	float:left;
}

.feature-list h3 {
	margin: 0;
}

.feature-list p {
	margin: 0px;
}

/*---------------------------------------
   7.3 PHONE IMAGE              
-----------------------------------------*/
.phone-img {
	text-align: right;
}

/* --------------------------------------
=========================================
   8. DESIGN-SECTION
=========================================
-----------------------------------------*/
.video-img {
	margin-top: 20px;
	position: relative;
}

.video {
	height: 306px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 34px;
	width: 482px;
	z-index: 0;
}

.video iframe {
	width: 100%;
	height: 306px;
}

.tour-bg iframe {width: 100%;
height: 450px;
border: 1px solid white;
margin-top: 20px;}
/* --------------------------------------
=========================================
   9. BENIFITS-SECTION
=========================================
-----------------------------------------*/
.benifit-icon{
	margin: 30px 0 0;
	text-align: center;
}
.benifit-icon img {border-radius: 50%;}


.image-gallery {}
.image-gallery ul { list-style-type: none;}
.image-gallery ul li { display: inline-block; margin: 8px;width: calc(16.66% - 19px);}
.image-gallery ul li img { border-radius: 6px; opacity: 0.7; transition: 0.3s all ease; width: 100%;}
.image-gallery ul li img:hover { opacity: 1;}
@media only screen and (max-width:768px){
	.image-gallery ul li {width: calc(33.33% - 19px) !important;}
}
@media only screen and (max-width:420px){
	.image-gallery ul li {width: calc(50% - 16px) !important; }
	.image-gallery ul li img {width: 100%;}
}

/* --------------------------------------
=========================================
   10. CLIENT SECTION
=========================================
-----------------------------------------*/
.client-img {
	float: left;
	margin: 0px 0 0 30px;
}

.client-saying {
	float: left;
	margin: 10px 0 0 25px;
	padding: 0 0 0 29px;
	width: 75%;
	text-align:left;
    border-left: 5px solid #FFF;
}

.client-saying p {
	font-style: italic;
	margin: 0px;
}

.client-saying h3 {
	color: #fff;
	margin-bottom:0;
}


.img-all{
    width: 100%;
}

#contact-bg {
	margin-bottom: -30px;
	border-top:6px solid var(--colorFeatured);
	position: relative ;
	background-color:  #FFF;
}

#contact-bg h2 {
	color: #555;
}

#contact-bg p {
	font-size: 1.2em;
	font-weight: 600;
	color: #555;
}

.social {
	width: 100%;
	float: left;
}

.social p {
	color: #fff;
	width: 100%;
}

ul.social-icons {
	display: inline-block;
	padding: 0px;
	margin-top:10px;
}

ul.social-icons li {
	display: inline-block;
	list-style: none;
	margin: 0 10px;
}

ul.social-icons li a {
	float: left;
	padding: 12px;
}

ul.social-icons li a {color:var(--colorFeatured);font-size: 1.8em;}
ul.social-icons li a:hover {color:var(--colorCTADark);}
/* --------------------------------------
=========================================
   13. FOOTER-SECTION
=========================================
-----------------------------------------*/
.copyright-section {
	margin-top: 30px;
	background: #222;
	height: 100px;
}

.copyright-section p {
	width: 100%;
	padding-top:45px;
	text-align: center;
	font-size: 14px;
	color: #fff;
	margin: 0px;
}


/* --------------------------------------
=========================================
   14. RESPONSIVE FIXES
=========================================
-----------------------------------------*/

/*---------------------------------------
   14.1 FOR MAXIMUM WIDTH 992PX              
-----------------------------------------*/

@media (max-width: 993px) {

button.view-detail {
	width: 100%;
}
.arrow-down {
	left: calc(50% - 35px) !important;
}
.detail-btn {
	margin: 0 0 50px;
}

.col-md-3 .advertised {
	margin:20px 0;
}
.arrow-left{
	display:none;
	}
.arrow-down-2 {
	display:block;
}
.form-title h1 {
	font-size: 23px;
}

.features-holder {
	margin: 0;
	padding: 30px 10px 0;
}

.phone-img {
	margin-top: 30px;
	text-align: center;
}

.phone-img img {
	max-width: 270px;
	width: 90%;
}

.video-img > img {
	display: none;
}

.video {
	top: 11px;
	width: 90%;
	position: relative;
}

.video iframe {
	height: 300px;
	float: left;
}

#benifits-holder p {
	padding: 13px 15px 0;
}

.client-img {
	margin: 0;
	text-align: center;
	width: 100%;
	float:none;
}

.client-img > img {
	border-bottom: 4px solid #fff;
	padding: 0 0 25px;
}

.client-saying {
	border-left: 0 none;
	margin: 0;
	padding: 20px 10px 0;
	width: 100%;
	text-align: center;
	float:none;
}

.price-btn {
	width: 90%;
}

.price-bg{
	margin:10px 0;
	}

.newsletter {
	width: 100%;
}
}

/*---------------------------------------
   14.2 FOR MAXIMUM WIDTH 768PX              
-----------------------------------------*/

@media(max-width:769px) {
	.jumbotron {background-position: center !important ;background-size: auto !important;}
	.logo {margin: 29px auto 0;}
	#landing-form{
		margin-top:25px;
		margin-right: 15px;
		width: calc(41.66666667% - 15px)
	}
	.form-bg .contactOptions{font-size: 0.7em;}
}

/*---------------------------------------
   14.3 FOR MAXIMUM WIDTH 380PX              
-----------------------------------------*/

@media(max-width:414px) {
	.logo {text-align: center;}
    .verticle-line {text-align: center ; font-size: 3rem; padding-bottom: 6px; border-left: 0px;}
	#landing-form{
		margin-top:25px;
		margin-right: 0px;
		width: 100%;
	}
	.copyright-section p {
		padding-top:35px;
	}
}