﻿@font-face {
    font-family: 'new_ciclesemi';
    src: url('../fonts/new_cicle_semi-webfont.eot');
    src: url('../fonts/new_cicle_semi-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/new_cicle_semi-webfont.woff') format('woff'),
         url('../fonts/new_cicle_semi-webfont.ttf') format('truetype'),
         url('../fonts/new_cicle_semi-webfont.svg#new_ciclesemi') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'new_ciclegordita';
    src: url('../fonts/new_cicle_gordita-webfont.eot');
    src: url('../fonts/new_cicle_gordita-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/new_cicle_gordita-webfont.woff') format('woff'),
         url('../fonts/new_cicle_gordita-webfont.ttf') format('truetype'),
         url('../fonts/new_cicle_gordita-webfont.svg#new_ciclegordita') format('svg');
    font-weight: normal;
    font-style: normal;

}

html {
	min-width: 1050px;
}

body, div {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'new_ciclesemi', Arial, sans-serif;
	font-size: 16px;
	text-align: center;
	color: #484848;
	background: #f8f8f8 url(../images/background.jpg) no-repeat center top;
	-webkit-background-size: 100%;
	-moz-background-size: 100%;
	background-size: 100% 100%;
}

/* Main Wrapper */

#mainWrapper {
	text-align: left;
	margin: 0 auto;
	width: 960px;
}

/* Header */

#header {
	position: relative;
	height: 138px;
	margin: 13px 0 19px;
}

#header .box {
	position: absolute;
	left: 0;
	top: 0;
	width: 770px;
	height: 137px;
	background: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 3px 5px 6px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 3px 5px 6px 2px rgba(0,0,0,0.3);
	box-shadow: 3px 5px 6px 2px rgba(0,0,0,0.3);
}

#header .box .call {
	position: absolute;
	left: -22px;  
	top: 39px;
	width: 234px;
	height: 83px;
	background: url(../images/call-ribbon.png) no-repeat;
}

#header .box h1 {
	position: absolute;
	left: 280px;
	top: 10px;
	margin: 0;
	padding: 0;
}

#header .box h1 a {
	display: block;
	width: 444px;
	height: 115px;
	background: url(../images/logo.png) no-repeat;
	text-indent: -9999em;
}

#header .button {
	font-family: 'new_ciclegordita'; 
	font-weight: bold; 
	letter-spacing: -1px;
	position: absolute;
	top: 68px;
	width: 70px;
	height: 22px;
	padding-top: 46px;
	text-align: center;
	font-size: 10px;
	color: #030c7c;
	background-repeat: no-repeat;
	background-color: #fff;
	background-position: center -116px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 3px 4px 2px 1px rgba(0,0,0,0.3);
	-moz-box-shadow: 3px 4px 2px 1px rgba(0,0,0,0.3);
	box-shadow: 3px 4px 2px 1px rgba(0,0,0,0.3);
}

#header .button:after {
	position: absolute;
	left: 50%;
	margin-left: -6px;
	bottom: -8px;
	content: "";
	display: none;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 8px 6px 0 6px;
	border-color: #ffffff transparent transparent transparent;
}

#header .button.active,
#header .button:hover {
	background-position: center 13px;
}

#header .button:hover:after,
#header .button.active:after {
	display: block;
}

#header .button.home {
	right: 101px;
	background-image: url(../images/home-btn.png);
}

#header .button.contact {
	right: 2px;
	background-image: url(../images/contact-us-btn.png);
}

/* Banner */

#banner, #slider {
	position: relative;
	margin: 0 0 28px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	overflow: hidden;
	-webkit-box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.5);
	-moz-box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.5);
	box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.5);
	height: 550px;
	overflow: hidden; 
	width: 955px; 
}

#slider .arrow {
	position: absolute;
	top: 50%;
	margin-top: -24px;
	width: 31px;
	height: 48px;
}

#slider .arrow.prev {
	left: 10px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 20.5px 28px 20.5px 0;
	border-color: transparent #020c7c transparent transparent;
	-webkit-box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.5);
	-moz-box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.5);
	box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.5);
}

#slider .arrow.next {
	right: 10px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 20.5px 0 20.5px 28px;
	border-color: transparent transparent transparent #020c7c;
}


/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
}
.nivo-prevNav {
	left: 20px !important;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 20.5px 28px 20.5px 0;
	border-color: transparent #020c7c transparent transparent;
	text-indent: -99999;
	overflow:hidden;
	
}
.nivo-nextNav {
	right: 20px !important;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 20.5px 0 20.5px 28px;
	border-color: transparent transparent transparent #020c7c;
	text-indent: -99999;
	overflow:hidden;
}

/* Request More */

#requestMore {
	position: relative;
	height: 175px;
	margin: 0 0 50px;
	background: url(../images/request-more-bg.png) repeat-y;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.3);
	box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.3);
}

#requestMore .logo {
	position: absolute;
	top: -13px;
	left: -67px;
	width: 355px;
	height: 210px;
	background: url(../images/request-more-logo.png) no-repeat;
}

#requestMore .title {
	position: absolute;
	right: 340px;
	top: 15px;
	width: 138px;
	height: 119px;
	padding-top: 25px;
	padding-left: 6px;
	background: #fff url(../images/request-info-bg.png) no-repeat right bottom;
	text-align: center;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	font-size: 26px;
	color: #6d6e71;
	line-height: 0.8;
}

#requestMore .title span {
	display: block;
	font-size: 44px;
}

#requestMore .title em {
	display: block;
	font-size: 19px;
	font-style: normal;
}

#requestMore .form {
	position: absolute;
	top: 15px;
	right: 18px; 
	width: 309px;
	height: 121px;
	padding-top: 23px;
	padding-right: 8px;
	background: #fff url(../images/form-bg01.png) no-repeat 27px bottom;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}

.textbox {
	float: right;
	margin: 0 0 13px 50px;
	padding: 5px 13px;
	height: 17px;
	border: 2px solid #6d6e71;
	font-family: 'new_ciclesemi', Arial, sans-serif;
	font-size: 17px;
	color: #6d6e71;
	width: 228px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	background: none;
}

.submitBtn {
	float: right;
	margin: 0;
	padding: 0;
	width: 129px;
	height: 18px;
	background: none;
	border: 1px solid #818285;
	font-family: 'new_ciclesemi', Arial, sans-serif;
	font-size: 12px;
	cursor: pointer;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

/* Info Box */

.infoBox {
	position: relative;
	height: 266px;
	background: #fff;
	margin: 0 60px 21px 192px;
	padding: 18px 33px 16px 191px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-align: center;
	color: #777677;
	-webkit-box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.3);
	box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.3);
}

.infoBox p {
	font-size: 17px;
	line-height: 1.2;
}

.infoBox .circle {
	position: absolute;
	left: -170px;
	top: -3px;
	width: 235px;
	height: 235px;
	border: 35px solid #d0272d;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;
	background: #fff;
	-webkit-box-shadow: -2px 2px 5px 0 rgba(0,0,0,0.4);
	-moz-box-shadow: -2px 2px 5px 0 rgba(0,0,0,0.4);
	box-shadow: -2px 2px 5px 0 rgba(0,0,0,0.4);
}

.infoBox.contact p {
	font-size: 17px;
	line-height: 2.5;
}

.infoBox.contact .circle {
	border-color: #fdbf31;
}

.infoBox.contact .circle span {
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif;
	color: #9b9b9b;
	height: 147px;	
	padding-top: 65px;
}

.infoBox .circle span {
	display: block;
	font-size: 37px;
	color: #636363;
	height: 162px;
	margin: 13px;
	padding-top: 48px;
	-webkit-box-shadow: inset 10px 5px 12px 5px rgba(0,0,0,0.4);
	-moz-box-shadow: inset 10px 5px 12px 5px rgba(0,0,0,0.4);
	box-shadow: inset 10px 5px 12px 5px rgba(0,0,0,0.4);
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;
}


.infoBox .blueText {
	font-size: 20px;
	color: #2ca1de;
}

/* Features */

#features {
	position: relative;
	padding-top: 60px;
}

#features .title {
	width: 223px;
	height: 131px;
	line-height: 131px;
	background: #fff url(../images/features-bg.png) no-repeat 69px bottom;
	text-align: center;
	font-size: 33px;
	color: #636363;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.4);
	-moz-box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.4);
	box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.4);
}

#features .highlights {
	width: 429px;
	height: 497px;
	margin: 0 0 43px;
	background: #fff url(../images/highlights-bg.jpg) no-repeat 33px bottom;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.4);
	-moz-box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.4);
	box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.4);
}

#features .highlights ul {
	margin: 0;
	padding: 28px 0 0 41px;
	text-align: center;
}

#features .highlights ul li {
	margin: 0 0 9px;
	padding: 0;
	list-style: none;
	line-height: 1.2;
}

#features .patentedProduct {
	position: absolute;
	right: 0;
	top: 0;
	width: 278px;
	height: 179px;
	background: url(../images/patented-product.png) no-repeat;
}

#features .chart {
	position: absolute;
	right: 0;
	top: 175px;
	width: 491px;
	height: 497px;
	background: url(../images/chart.png) no-repeat;
}

/* Uses */

#uses {
	position: relative;
	height: 526px;
	margin: 0 0 116px;
	background: #fff url(../images/uses-bg.jpg) no-repeat -20px 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.4);
	-moz-box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.4);
	box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.4);
}

#uses .title {
	position: absolute;
    right: -41px;
	top: -54px;
	width: 370px;
	height: 327px;
	background: url(../images/uses-title.png) no-repeat;
	text-indent: -9999em;
}

#uses .sideLean {
	position: absolute;
	left: 454px;
	top: 102px;
	width: 166px;
	height: 178px;
	background: url(../images/side-lean-to.png) no-repeat;
	text-indent: -9999em;
}

#uses .spanBetween {
	position: absolute;
	left: -59px;
	top: 365px;
	width: 168px;
	height: 162px;
	background: url(../images/span-between.png) no-repeat;
	text-indent: -9999em;
}

#uses .standAlone {
	position: absolute;
	left: 735px;
	top: 363px;
	width: 191px;
	height: 179px;
	background: url(../images/standalone.png) no-repeat;
	text-indent: -9999em;
}

/* Contact Form */

#contactForm {
	margin: 0 0 116px;
}

#contactForm .title {
	float: left;
	width: 144px;
	height: 100px;
	padding-top: 49px;
	margin: 0 20px 0 226px;
	font-size: 17px;
	line-height: 1;
	color: #6d6e71;
	background: #fff url(../images/get-in-contact.png) no-repeat right bottom;
	text-align: center;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.4);
	-moz-box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.4);
	box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.4);
}

#contactForm .title span {
	display: block;
	font-size: 26px;
}

#contactForm .form {
	float: left;
	width: 344px;
	height: auto;
	padding: 18px 166px 18px 0;
	background: #fff url(../images/contact-form.png) no-repeat 42px bottom;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.4);
	-moz-box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.4);
	box-shadow: 3px 3px 8px 2px rgba(0,0,0,0.4);
}

#contactForm .form .textbox {
	margin: 0 0 13px 0;
}

#contactForm .form textarea {
	float: right;
	margin: 0 0 10px;
	padding: 5px 13px;
	width: 232px;
	height: 49px;
	overflow: auto;
	resize: none;
	background: #6d6e71;
	color: #fff;
	font-family: 'new_ciclesemi', Arial, sans-serif;
	font-size: 17px;
	border: none;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}

/* Footer */

#footer {
	background: #12274f;
	margin: 0 auto;
	padding: 10px 51px;
	height: 50px;
}

#footer .designedBy {
	float: right;
	font-size: 15px;
	color: #fff;
	margin-left: 58px;
}

#footer .copyright {
	float: right;
	font-size: 15px;
	color: #fff;
}

/* Miscelleneous */

p {
	margin: 0 0 14px;
	font-size: 12px;
	line-height: 1.6;
}

a {
	text-decoration: none;
	color: #e28020;
}

img {
	border: 0;
}

.clear {
	clear: both;
}

input::-moz-focus-inner { 
    border: 0;
    padding: 0;
}

form {
	margin: 0;
	padding: 0;
}

.alert-msg {
	background: orange; 
	margin-left: 80px;
	padding: 5px; 
	color: #000; 
}

.required-field {
	border: 1px solid orange; 
	background: #FDBF31; 
}




/* MOBILE STYLES */
@media screen and (max-width: 599px) {

	#mainWrapper {
	width: 300px; 
	  overflow: hidden; 
	}
	#header {height: auto; }
	#header .box .call { display: none; }
	#header .box { width: 300px; overflow: hidden; position: relative;  }
	#header .box h1 { left: 0; top: 10px; height: auto;   }
	#header .box h1 a { width: 280px; margin: 0 auto; margin-left:10px;  background-size: contain;}
	#header .button { top: 100px;  }
	
	
	#banner, #slider {position: relative; clear: both; top: 30px; display: block; width: 300px; height: auto; margin-bottom: 50px;}
	.nivo-directionNav a { display: none; }
	#banner img, #slider img {width: 100%; }
	#requestMore .logo {display: none; }
	.infoBox {padding: 20px; height: auto; width: 260px; margin: 0px; }
	.infoBox .circle {display: none; }
	#features .title {width: 300px; }
	#features .highlights {width: 260px;  height: auto; overflow: hidden; margin: 0px 0px 30px 0; padding: 20px; background: #fff; }
	#features .highlights ul { padding: 28px 0 0 0px; }
	#features .patentedProduct { position: relative; margin-left: 10px; margin-bottom: 30px;  }
	#features .chart { display: none; }
	#uses { display: none;  }
	#footer {width: 300px; padding: 0px; }
	#footer .designedBy { float: none; margin: 0px; }
	#footer .copyright { float: none; }
	html { min-width: 300px; }
	#contactForm .title {
		float: left;
		width: 300px;
		height: 100px;
		padding-top: 49px;
		margin: 20px 0px 20px 0px;
		font-size: 17px;
		line-height: 1;
		color: #6d6e71;
		background: #fff url(../images/get-in-contact.png) no-repeat right bottom;
		text-align: center;
	}
	#contactForm .form { width: 280px; background: #fff;  }

	
}