@import url('fonts.css');

/* ==================================================
   Basic Styles
================================================== */

html, body {
	height: 100%;
}

html, hmtl a{
	width:100%;
	font-size: 100%; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;
}

body{
	margin:0px;
	padding:0px;
	color:#484848;
	font-size:13px;
	font-family: 'robotolight', Arial, Helvetica, sans-serif;
	line-height:18px;
	background:#ffffff;
}

a{
	color:#5aa99e;
	text-decoration: none;
	cursor: pointer;
	
	-webkit-transition: all 0.2s linear 0s;	
	   -moz-transition: all 0.2s linear 0s;
		 -o-transition: all 0.2s linear 0s;
		    transition: all 0.2s linear 0s;
}

a:hover,
a:active{
	outline: 0;
	color:#2e3943;
	text-decoration:none;
}

a img {
	border: none;
}

a > img {
	vertical-align: bottom;	
}

img {
	max-width: 100%;
	height:auto;	
}

strong {
  	font-weight: normal;
	font-family: 'robotomedium';
}

ul, p, figure {
	margin:0px;
	padding:0px;
}

p {
	margin:0px 0px 20px 0px;
}

hr {
	border-style: dashed;
	border-color: #3C3F45;
	border-bottom: none;
	border-left: none;
	border-right: none;
	margin: 50px 0;	
}

.clear{
	clear:both;
}

.pull-left{
	float:left;
}

.pull-right{
	float:right;
}

.text_align_left {
	text-align: left;
}

.text_align_center {
	text-align: center;
}

.text_align_right {
	text-align: right;	
}

.color-text {
    color: #DE5E60;
}

.through{
	text-decoration:line-through;
}

.border-radius{
	-moz-border-radius:6px 6px 6px 6px;
	-webkit-border-radius:6px 6px 6px 6px;
	border-radius:6px 6px 6px 6px;
	behavior: url(PIE.htc); /* For IE8 */
}

input, button, select, textarea {
	background-color:#FFFFFF;
	border:solid 1px #D5D5D5;
	font-weight: 300;
	outline: 0;
	font-family: 'robotolight', Arial, Helvetica, sans-serif;
	-webkit-transition: all 0.2s ease-out 0s;	
	   -moz-transition: all 0.2s ease-out 0s;
		 -o-transition: all 0.2s ease-out 0s;
		    transition: all 0.2s ease-out 0s;
			-webkit-border-radius: 0;
			-webkit-appearance: none;
			
}

input[type="button"], input[type="submit"]{
	cursor:pointer;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}

input:focus, 
textarea:focus,
input[type="text"]:focus {
	outline: 0;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #7F8289;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #7F8289;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #7F8289;
}

/* ==================================================
   Code and Pre
================================================== */

code,
pre {
  	padding: 0 3px 2px;
  	-webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
  	color: #232527;
  	font-size: 12px;
  	font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
}

code {
  	padding: 2px 4px;
  	border: 1px solid #dde4e9;
  	background-color: #F6F6F6;
  	color: #232527;
  	white-space: nowrap;
}

pre {
  	display: block;
  	margin: 70px 50px;
  	padding: 30px;
  	border: 1px solid #dde4e9;
  	-webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
  	background-color: #FCFCFC;
  	white-space: pre;
  	white-space: pre-wrap;
  	word-wrap: break-word;
  	word-break: break-all;
  	font-size: 12px;
  	line-height: 20px;
}

pre code {
  	padding: 0;
  	border: 0;
  	background-color: transparent;
  	color: inherit;
  	white-space: pre;
  	white-space: pre-wrap;
}

.pre-scrollable {
  	overflow-y: scroll;
  	max-height: 340px;
}


*{
    box-sizing:border-box;
}
*::before, *::after {
    box-sizing:border-box;
}


/* ==================================================
   Typography
================================================== */

h1,
h2,
h3,
h4,
h5,
h6{
	font-family: 'robotomedium';
	padding:0px;
	margin:0px;
	color:#3f3f3f;
	font-weight:normal;
	line-height:60px;
}

h1{
	font-size:48px;
}

h2{
	font-size:36px;
	line-height:40px;
}

h3{
	font-size:24px;
	line-height:30px;
}

h4{
	font-size:20px;
	line-height:24px;
}

h5{
	font-size:18px;
	line-height:20px;
}

h6{
	font-size:16px;
	line-height:20px;
}


/* ==================================================
   Main Container
================================================== */

.mainDiv{width:100%;float:left;}
.container{position:relative;width:1240px;margin:auto;}

/* ==================================================
   Header
================================================== */

header{background:#ffffff;height:100px;position:fixed;top:0px;width:100%;z-index:999;-webkit-transition: all 0.2s ease-out 0s;-moz-transition: all 0.2s ease-out 0s;-o-transition: all 0.2s ease-out 0s;transition: all 0.2s ease-out 0s;}
header .foursightLogo{float:left;}
header .foursightLogo img{margin-top:30px;}
header .mainNav{float:right;margin-top:40px; -webkit-transition: all 0.2s ease-out 0s;-moz-transition: all 0.2s ease-out 0s;-o-transition: all 0.2s ease-out 0s;transition: all 0.2s ease-out 0s; }
header .mainNav a.mobileMenu{float:right;background:url(../images/nav-icon.png) no-repeat;width:40px;height:40px;margin-top:10px; font-size:0px;display:none;}
header .mainNav ul li{list-style:none;display:inline-block;margin-left:30px;}
header .mainNav ul li a{font-size:15px;color:#0a0a0a;text-transform:uppercase;line-height:20px;}
header .mainNav ul li a:hover, header .mainNav ul li a.active{color:#06a8ea;}

header.stickyHeader{height:60px;box-shadow:0px 0px 4px 0px #3f3f3f;}
header.stickyHeader .foursightLogo img{margin-top:10px;}
header.stickyHeader .mainNav{float:right;margin-top:20px;}

/* ==================================================
   Middle Content
================================================== */

.banner{position:relative;min-height:500px;}
.banner{background:url(../images/banner-bg.jpg) no-repeat center;background-size:cover;width:100%;height:650px;background-attachment: fixed;text-align:left;}
.banner .container{position:static;}
.banner h2{font-size:45px;line-height:50px;color:#ffffff;text-transform:uppercase;font-family: 'robotocondensedbold';margin-bottom:10px;text-shadow:2px 2px 15px #000;}
.banner .bannerSliderBg{background:rgba(0,0,0,0.5);padding:20px 25px;width:50%;position:absolute;bottom:40px;}
.banner .bannerSliderList{}
.banner .bannerSliderList article{font-size:22px;line-height:30px;color:#FFFFFF;}
.banner .bannerSliderList p.quoteName{font-size:24px;line-height:30px;color:#FFFFFF;text-align:right;}
.banner .sliderControls{text-align:right;}
.banner .sliderControls .sliderControl{background:#0a0a0a url(../images/slider-arrow.png) no-repeat;width:40px;height:40px;display:inline-block;vertical-align:middle;border:solid 1px #0a0a0a;margin-left:5px;}
.banner .sliderControls .sliderControl.prev{background-position:15px 13px;}
.banner .sliderControls .sliderControl.next{background-position:-76px 13px;}
.banner .sliderControls .sliderControl:hover{border:solid 1px #06a8ea;}

.ourCompany{text-align:center;font-size:24px;line-height:30px;color:#262525;padding:130px 0px 100px 0px;}
.ourCompany h2{font-size:36px;line-height:40px;color:#06a8ea;padding-bottom:20px;margin-bottom:40px;text-transform:uppercase;position:relative;}
.ourCompany h2:after{width:100px;height:5px;background:#3f4245; display:inline-block;position:absolute;content:"";left:50%;bottom:0px;margin-left:-50px;}
.ourCompany h3{font-size:28px;line-height:32px;font-family: 'robotocondensedbold';text-transform:uppercase;padding:0 15%;margin-bottom:30px;}

.success{text-align:center;font-size:28px;line-height:36px;color:#ffffff;background:url(../images/success-bg.jpg) no-repeat center;background-size:cover;background-attachment:fixed;min-height:500px;}
.whyQue{text-align:center;font-size:28px;line-height:36px;color:#ffffff;background:url(../images/question-bg.jpg) no-repeat center;background-size:cover;background-attachment:fixed;min-height:500px;}

.services{text-align:left;font-size:24px;line-height:30px;color:#262525;background:#ffffff;background-size:cover;padding:100px 0px 80px 0px;}
.services h2{font-size:36px;line-height:40px;color:#06a8ea;padding-bottom:20px;margin-bottom:40px;text-transform:uppercase;position:relative;text-align:center;}
.services h2:after{width:100px;height:5px;background:#3f4245; display:inline-block;position:absolute;content:"";left:50%;bottom:0px;margin-left:-50px;}
.services h4{font-size:34px;line-height:40px;color:#262525;margin-bottom:50px;font-family: 'robotolight';}

.servicesLeft{float:left;width:40%;padding-right:5%;text-align:left;}
.servicesLeft ul{}
.servicesLeft ul li{list-style:none;float:left;width:100%;margin-bottom:40px;}
.servicesLeft ul li:last-child{margin-bottom:0px;}
.servicesLeft ul li .servicesIcon{width:70px;height:65px;float:left;margin-right:25px;background:url(../images/services-icon.png) no-repeat;}
.servicesLeft ul li .leverageIcon{background-position:0px 0px;}
.servicesLeft ul li .internetIcon{background-position:0px -118px;}
.servicesLeft ul li .cashIcon{background-position:0px -242px;}
.servicesLeft ul li .growthIcon{background-position:0px -357px;}

.servicesRight{float:left;width:60%;}
.servicesRight .accordion-toggle {font-family: 'robotoregular';cursor:pointer;background:#dedede;font-size:18px;color:#3f3a39;line-height:22px;padding:15px;position:relative;margin-bottom:1px;overflow:hidden; -webkit-transition: all 0.2s linear 0s;-moz-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s;  transition: all 0.2s linear 0s;}
.servicesRight .accordion-toggle i{position:absolute;top:0px;right:0px;width:60px;height:100%;background:#485560;font-size:40px;text-align:center;font-style:normal;line-height:45px;color:#ffffff;}
.servicesRight .accordion-toggle.active{background:#06a8ea;color:#ffffff;}
.servicesRight .accordion-toggle.active i{background:#0497cf;}
.servicesRight .accordion-toggle i.plusIcon{display:block;}
.servicesRight .accordion-toggle i.minusIcon{display:none;}
.servicesRight .accordion-toggle.active i.plusIcon{display:none;}
.servicesRight .accordion-toggle.active i.minusIcon{display:block;line-height:20px;}
.servicesRight .accordion-content {display: none; font-family: 'robotoregular';background:#e5e5e5;padding:25px;font-size:14px;color:#606366;line-height:20px;margin-bottom:1px;}
.servicesRight .accordion-content p:last-child{margin-bottom:0px;}
.servicesRight .accordion-content.default {display: block;}
.servicesRight .accordion-content ul{}
.servicesRight .accordion-content ul.marginBtm{margin-bottom:15px;}
.servicesRight .accordion-content ul li{list-style:none;background:url(../images/list-icon.png) no-repeat left 8px;padding-left:15px;}
.servicesRight .accordion-content h6{font-family: 'robotoregular';margin-bottom:10px;}


.howDoIt{text-align:center;font-size:24px;line-height:30px;color:#262525;padding:130px 0px 100px 0px;}
.howDoIt h2{font-size:36px;line-height:40px;color:#06a8ea;padding-bottom:20px;margin-bottom:40px;text-transform:uppercase;position:relative;}
.howDoIt h2:after{width:100px;height:5px;background:#3f4245; display:inline-block;position:absolute;content:"";left:50%;bottom:0px;margin-left:-50px;}
.howDoIt a{font-family: 'robotoregular';}

.contactus{background:#332f2a url(../images/contact-bg.jpg) no-repeat;background-size:cover; text-align:center;font-size:22px;line-height:36px;color:#ffffff;padding:100px 0px 70px 0px;}
.contactus h2{font-size:36px;line-height:40px;color:#06a8ea;padding-bottom:20px;margin-bottom:40px;text-transform:uppercase;position:relative;}
.contactus h2:after{width:100px;height:5px;background:#ffffff;display:inline-block;position:absolute;content:"";left:50%;bottom:0px;margin-left:-50px;}
.contactus .contactForm{width:750px;margin:auto;display:inline-block;}
.contactus ul.contactCol1{float:left;width:270px;}
.contactus ul.contactCol2{float:right;width:470px;}
.contactus ul li{list-style:none;margin-bottom:8px;float:left;width:100%;position:relative;}
.contactus ul li input, .contactus ul li textarea{width:100%;font-size:14px;color:#ffffff;font-family: 'robotomedium';line-height:24px;background:transparent;border:solid 2px #ffffff;padding:10px;margin:0px;}
.contactus ul li textarea{height:104px;display:block;}
.contactus ul li input:focus, .contactus ul li textarea:focus{background:#ffffff;color:#2a2a2a;}
.contactus ul li.submitBtn input{background:#06a8ea;border:solid 2px #06a8ea;font-size:22px;text-transform:uppercase;line-height:24px;}
.contactus ul li.submitBtn input:hover{background:#ffffff;color:#2a2a2a;border:solid 2px #000000;}
.contactus a:hover{color:#5aa99e;text-decoration:underline;}
.contactus ul li #inner1{position:absolute;top:7px;right:10px;z-index:123;}


/* ==================================================
   Footer Content
================================================== */

footer{background:#000000;padding:20px 0px;font-size:14px;color:#ffffff;font-family: 'robotomedium';text-transform:uppercase;}
footer .footerMenu{float:left;}
footer .footerMenu ul{}
footer .footerMenu ul li{list-style:none;display:inline-block;position:relative;margin-right:22px;}
footer .footerMenu ul li:after{margin:0px 11px;height:14px;width:2px;content:" ";position:absolute;top:3px;background:#ffffff;}
footer .footerMenu ul li:last-child:after{display:none;}
footer .footerMenu ul li a{font-size:14px;color:#ffffff;line-height:18px;}
footer .footerMenu ul li a:hover{color:#06a8ea;}
footer .copyright{float:right;}

div#preloader{position:fixed;left:0;top:0;z-index:99999;width:100%;height:100%;overflow:visible;background:#ffffff;}
div#preloader span{background:url(../images/preloader.gif) no-repeat center center;position:absolute; width:100%;height:100%; -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}

#back-to-top{background:url(../images/backtotop.png) no-repeat;bottom:5px;display:none;height:40px;width:40px;margin:0;position:fixed;right:5px;transition:background 0.1s linear 0s;z-index:99;}
#back-to-top:hover{opacity:0.8;}

