/***********************************
-------- HTML5----------------------
***********************************/
section, header, footer {
	display:block;
}

/***********************************
-------- GENERAL -------------------
***********************************/
#themeSwitch a{
	background:url(../img/switch.png) no-repeat;
	width:64px;
	height:64px;	
	display:inline-block;	
	right:0;
	position:fixed;
}

#primaryContent {
	background:#e5f5f7;
}

.wrapper_main{
	background:url(../img/bg-main.png) no-repeat center top;
	height:721px;	
	padding-bottom: 50px;
}

a {
	text-decoration:none;
	color:#038c5a;
}

a:hover {
	text-decoration:none;
	
}

p {
	font-size:16px;
	line-height:1.5em;
	font-family: 'Open Sans';
	color: #fff;
	text-shadow: 0 1px 0 #555;
}

h1,h2,h3,h4,h5,h6{
	font-family:'Open Sans',Arial, Helvetica, sans-serif;
}

h3{
	color:#00c0ff;
	font-family:'Open Sans',Arial, Helvetica, sans-serif;
	font-size:22px;
	line-height:1.5em;
	text-shadow: 0 1px 0px #fff;
	font-weight:bold;
	margin-top: -34px;
}

h2{
	color:#f60;
	font-weight:bold;
	text-shadow: 0 2px 0 black;
	font-size:24px;
	line-height:24px;
}

ul {
	overflow:hidden;
	
}

li {
	margin-left: 0;
	list-style:none;
	
}

.rounded {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.container_12 {
	padding-left: 5px;
	padding-right: 5px;
	position:relative;
}

.contentDivide {
	padding-bottom: 100px !important;
	background: url(../img/contentDivider.png) bottom center no-repeat;
}
/***********************************
-------- HEADER -------------------
***********************************/
header {
	height:250px;
	overflow:hidden;
	color:white;
	*color:white;
}

#logo{
	margin-top:20px;	
}

.rightHeader h6{
	font-family: 'Open Sans';
	font-size:14px;
	float:right;
	margin-top:27px;
	text-shadow: 0 1px 0 #555;
}
.topSocial{
	list-style:none;
	float:right;
	margin-top:0px;	
}

.topSocial li{
	float:left;
	margin: 0 0 0 15px;
}
/***********************************
-------- BANNER WRAP ---------------
***********************************/
#banner-wrap {
	overflow:hidden;
	margin-top:-50px;
}

.headline h1{
	display:block;
	font-family:'Pacifico',Arial, Helvetica, sans-serif;
	font-size:48px;
	color:#fff;
	text-shadow:0 4px 0 black;
}

.topList{
	padding-top:4px;	
}

ul.topList li{
	background:url(../img/top-check.png)no-repeat left 2px;
	font-family: 'Open Sans';
	font-size:16px;
	padding-left:36px;
	padding-top:2px;
	margin-bottom:8px;
	color: #fff;
	text-shadow:0 1px 0 #1e1e1e;
	height:27px;
}

.storeButton li{
	padding-right:20px;
	display:inline;
}


.slide {
	height:500px;
	width:100%;
	position:relative;
	
}
.panel1{
	height:489px;
	width:400px;
	float:right;
	position: relative;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-o-perspective: 1000px;
	-ms-perspective: 1000px;
	perspective: 1000px;
}

.panel1 a{
	width: 282px;
	height: 489px;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}
.panel1 a.dg-transition{
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.panel1 a img{
	display: block;
	padding-left:1px;
}

.slide nav{
	width: 58px;
	position: absolute;
	z-index: 1000;
	bottom: 40px;
	left: 50%;
	margin-left: -29px;
}
.slide nav span{
	text-indent: -9000px;
	float: left;
	cursor:pointer;
	width: 24px;
	height: 25px;
	opacity: 0.8;
	background: transparent url(../img/arrows.png) no-repeat top left;
}
.slide nav span:hover{
	opacity: 1;
}
.slide nav span.next{
	background-position: top right;
	margin-left: 10px;
}
/***********************************
---------- QUOTE CONTENT -----------
***********************************/
.quote h4{
	font-family: 'Open Sans';
	font-size:24px;
	font-weight:normal;
	color:#00c0ff;
	text-align:center;
	text-shadow:0 1px 0px #fff;
	margin-top: -40px;
}

/***********************************
--------- ONE THIRD CONTENT --------
***********************************/
.oneThird {
	margin-top:-2px;
	min-height: 520px;
}

.oneThird section{
	width: 288px;
	padding-top:15px;	
}
.oneThird h5{
	font-family: 'Open Sans';
	font-size:18px;
	font-weight:bold;
	color:#00c0ff;
	display:inline;	
	text-shadow:0 1px 0px #fff;
}

.oneThird p{
	padding-top:10px;
	font-family: 'Open Sans';
	font-size:14px;
	color:#3d4350;
	line-height:1.5em;
	text-shadow:0 1px 0px #fff;
}

a.readmore{
	color:#00c0ff;
	font-family: 'Open Sans';
	font-size:14px;
	float:right;
	text-shadow:0 1px 0px #fff;
}
a.readmore:hover{
	color:#04bf8a;	
	-webkit-transition: color .3s;
	-moz-transition: color .3s;
	-o-transition: color .3s;
	transition: color .3s;
}
/***********************************
---------- FIRST CONTENT -----------
***********************************/
#first{
	padding-top:15px;	
}

#second, #third{
	padding-top:15px;	
}

.leftIcon {
	-webkit-box-shadow: 0px 4px -2px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 4px -2px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 4px -2px 0px rgba(0, 0, 0, 0.3);
	padding: 4px;
	border: 1px solid #a6ccbc;
	background: none;
	margin: 0 0 20px 0;
}

.leftIcon img{
	float:left;
	display: block;
	width: 100%;
}

.rightIcon {
	-webkit-box-shadow: 0px 4px -2px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 4px -2px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 4px -2px 0px rgba(0, 0, 0, 0.3);
	padding:4px;
	border: 1px solid #a6ccbc;
	background:none;
	margin:0 0 20px	0;
}

.rightIcon img{
	float:right;
	display:block;
	width:100%;
}

.rightContent h2{
	font-family:'Open Sans';
	font-size:22px;
	font-weight:bold;
	color:#00c0ff;
	text-shadow:0 1px 0px #fff;
	text-align:left;
}

.rightContent p{
	font-size:14px;
	line-height:1.5em;
	color:#284d59;
	text-shadow:0 1px 0px #fff;
	text-align:left;
}

.leftContent h2{
	font-family:'Open Sans';
	font-size:22px;
	font-weight:bold;
	color:#00c0ff;
	text-shadow:0 1px 0px #fff;
	text-align:right;
}

.leftContent p{
	font-size:14px;
	line-height:1.5em;
	color:#284d59;
	text-shadow:0 1px 0px #fff;
	text-align:right;
}

/***********************************
-------- SECOND CONTENT ------------
***********************************/
#secondContent{
	overflow:visible;	
	min-height: 285px;
}

.features li{
	font-family: 'Open Sans';
	font-size:16px;
	line-height:2.5em;
	color:#3d4350;
	text-shadow:0 1px 0px #fff;
}

.features {
	background:url(../img/lineDivider.png) right repeat-y;	
}

/***********************************
-------- THIRD CONTENT ------------
***********************************/
.galleryWrapper{
	display:block;
	background:url(../img/workBG.png);
	height:250px;
	margin-top:-5px;
}
/* thumbnails */
		
		#appThumbs {
			margin: 0 auto;
			text-align: center;
			list-style: none;
			overflow:hidden;
			height:210px;
			}
			
		#appThumbs li {
			padding-top: 55px;
			position: relative;
			z-index: 1;
			}
			
		#appThumbs span {
			margin: 0 3px 7px 3px;
			width: 148px;
			height: 153px;
			position: relative;
			float: left;
			}
			
		#appThumbs a, #appThumbs a:visited, #appThumbs a:hover {
			margin: 0 auto;
			width: 130px;
			height: 130px;
			display: block;
			position: relative;
			z-index: 2;
			}
/* Button Shadow */
		
		#appThumbs span img.shadow{
			margin: 0 auto;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;
			}
			
		#appThumbs span#featuredWork img.shadow {
			width: 100%;
			margin: 0 auto;
			position: absolute;
			bottom: 0;
			left: 5px;
			z-index: 1;
			}

.appshots{
	padding:55px 90px 0px;
}
.appshots span a{
	padding-left:11px;	
}
.nav{
	padding:0 350px 45px;	
}
.nav li{
	display:inline;	
}

.nav a, .nav a:visited {
	width: 101px;
	height: 53px;
	display: block;
	background: url(../img/prevnext.png) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	float: left;
}
			
a#prevWork, a#prevWork:visited {
	background-position: 0 0;
}
			
a#prevWork:hover {
	background-position: 0 -53px;
}

a#prevWork:active {
	background-position: 0 -106px;
}
			
a#prevWork.disabled {
	background-position: 0 -159px;
	cursor: default;
}
	
a#nextWork, a#nextWork:visited {
	background-position: 100% 0;
}
			
a#nextWork:hover {
	background-position: 100% -53px;
}

a#nextWork:active {
	background-position: 100% -106px;
}
			
a#nextWork.disabled {
	background-position: 100% -159px;
	cursor: default;
}
			
/***********************************
------- BOTTOM CONTENT ------------
***********************************/
.bottomContent{
	display:block;
	overflow:visible;
	padding-bottom:20px;		
}

.testimonial{
	background:url(../img/lineDivider.png) right repeat-y;
	overflow:visible;
	height:305px;
}

#testimonial{
	overflow:hidden;
	height:205px;
}

.testiWrapper{
	background:url(../img/testiBG.png) no-repeat;
	height:275px;
	margin-top:-5px;
}

.testimonial p{
	width: 390px;
	padding: 32px 20px 0;
	font-size:14px;
	line-height:1.5em;
	font-style:italic;
	color:#3d4350;	
	text-shadow:0 1px 0px #e2e5e7;
}

.testimonialName p{
	padding: 0;
	font-family: 'Open Sans',Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: 1.5em;
	text-align: right;
	color: #2B2B2B;
	text-shadow: none;
	bottom: 0;
	position: absolute;
	top: 170px;
	right: 20px;
}
/*********** THE SUBSCRIBE FORM *******************/

#subscribe{
	margin-top:-10px;	
}

.subscribtion label{
	font-family:'Open Sans';
	font-size:18px;
	color:#3d4350;
	line-height:1.5em;
	display:block;
	padding:5px 0;
	text-shadow:0 1px 0px #fff;
}

.subscribtion label.error{
	font-family:'Open Sans';
	font-size:14px;
	font-style:normal;
	color:#ff0000;
	line-height:1.5em;
	display:block;
	padding:5px 0;
	text-shadow:none;
}
	
	
	.subscribtion input{
		background:url(../img/inputBG.png) no-repeat;
		padding-left:10px;
		width:470px;
		height:48px;
		text-align:left;
		cursor:pointer;
		color:#3d4350;
		font-family:'Open Sans';
		font-size:16px;	
		border:none;
		
	}
	
	.subscribtion button{
	background-color:#8fc700;
	font-family: 'Open Sans', sans-serif;
	font-size:18px;
	text-decoration:none;
	text-shadow:0 1px 0px #04bf8a;
	color:#3d4350;
	position:relative;
	margin:20px 7px 0 0;
	float:right;
	padding:10px 20px;
	padding-right:50px;
	background-image: linear-gradient(bottom, #04bf8a 0%, #a6ccbc 100%);
	background-image: -o-linear-gradient(bottom, #04bf8a 0%, #a6ccbc 100%);
	background-image: -moz-linear-gradient(bottom, #04bf8a 0%, #a6ccbc 100%);
	background-image: -webkit-linear-gradient(bottom, #04bf8a 0%, #a6ccbc 100%);
	background-image: -ms-linear-gradient(bottom, #04bf8a 0%, #a6ccbc 100%);
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, #04bf8a),
	color-stop(1, #a6ccbc)
	);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0px 1px 0px #a6ccbc, 0px 5px 0px 0px #038c5a, 0px 10px 5px #999;
	-moz-box-shadow: inset 0px 1px 0px #a6ccbc, 0px 5px 0px 0px #038c5a, 0px 10px 5px #999;
	-o-box-shadow: inset 0px 1px 0px #a6ccbc, 0px 5px 0px 0px #038c5a, 0px 10px 5px #999;
	box-shadow: inset 0px 1px 0px #a6ccbc, 0px 5px 0px 0px #038c5a, 0px 10px 5px #999;
	border:none;
}
	.subscribtion button:active{
	top:3px;
	background-image: linear-gradient(bottom, #a6ccbc 0%, #04bf8a 100%);
	background-image: -o-linear-gradient(bottom, #a6ccbc 0%, #04bf8a 100%);
	background-image: -moz-linear-gradient(bottom, #a6ccbc 0%, #04bf8a 100%);
	background-image: -webkit-linear-gradient(bottom, #a6ccbc 0%, #04bf8a 100%);
	background-image: -ms-linear-gradient(bottom, #a6ccbc 0%, #04bf8a 100%);
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, #a6ccbc),
	color-stop(1, #04bf8a)
	);
	-webkit-box-shadow: inset 0px 1px 0px #a6ccbc, 0px 2px 0px 0px #038c5a, 0px 5px 3px #999;
	-moz-box-shadow: inset 0px 1px 0px #a6ccbc, 0px 2px 0px 0px #038c5a, 0px 5px 3px #999;
	-o-box-shadow: inset 0px 1px 0px #a6ccbc, 0px 2px 0px 0px #038c5a, 0px 5px 3px #999;
	box-shadow: inset 0px 1px 0px #a6ccbc, 0px 2px 0px 0px #038c5a, 0px 5px 3px #999;		
}

	.subscribtion button::before{
	background-color:#038c5a;
	background-image:url(../img/rightArrow.png);
	background-repeat:no-repeat;
	background-position:center center;
	content:"";
	width:22px;
	height:22px;
	position:absolute;
	right:15px;
	top:50%;
	margin-top:-9px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: inset 0px 1px 0px #02734a, 0px 1px 0px #a6ccbc;
	-moz-box-shadow: inset 0px 1px 0px #02734a, 0px 1px 0px #a6ccbc;
	-o-box-shadow: inset 0px 1px 0px #02734a, 0px 1px 0px #a6ccbc;
	box-shadow: inset 0px 1px 0px #02734a, 0px 1px 0px #a6ccbc;		
}

	.subscribtion button:active::before {
	top:50%;
	margin-top:-12px;
	-webkit-box-shadow: inset 0px 1px 0px #04bf8a, 0px 3px 0px #02734a, 0px 6px 3px #038c5a;
	-moz-box-shadow: inset 0px 1px 0px #04bf8a, 0px 3px 0px #02734a, 0px 6px 3px #038c5a;
	-o-box-shadow: inset 0px 1px 0px #04bf8a, 0px 3px 0px #02734a, 0px 6px 3px #038c5a;
	box-shadow: inset 0px 1px 0px #04bf8a, 0px 3px 0px #02734a, 0px 6px 3px #038c5a;
}
/***********************************
-------- FOOTER --------------------
***********************************/
#footer-wrap{
	background:url(../img/footerBG.png) center bottom no-repeat;
	height:270px;
	display:block;
}
 #to-topButton{
	 	display:block;
		position: absolute;
		top:-70px;
		left:433px;
		right:433px;
		width: 61px;
		height: 41px;
		background: url(../img/arrow.png) no-repeat;
		cursor: pointer;
 }
footer {
	top:90px;
}
	
.footerText{
	display: block;
	overflow: hidden;
}
	.footerText p{
		color:#ebfaff;
		font-family:'Open Sans';
		font-size:16px;
		text-shadow:0 1px 0px #ddd;
		font-weight:bold;
	}
	
	.footerText h3{
		float:right;
		margin-right: 8px;
		color:#ebfaff;
		font-family:'Open Sans';
		font-size:20px;
		text-shadow:0 1px 0px #ddd;
		padding-top: 30px;
	}
	
#rightFooter {
}
	#rightFooter img{
		margin-right:0px;	
		
	}
#headSocial{
	position:absolute;
	display: block;
	overflow: hidden;
	right:0;
	margin-right: 18px;
}
	#headSocial li{
	display: block;
	width: 38px;
	height: 38px;
	float: left;
	margin-right: 10px;
	display: block;
	}

/* =STYLESWITCHER
-----------------------------------------------------------------------------------------------*/		
			
.panel{ background:#67A837; border:1px solid #335D09; display:none; height:auto; left:0; padding:25px 15px 0px 10px; 
	top:70px; position:fixed; _position:absolute;z-index:999999;  
	-moz-border-top-right-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	border-top-right-radius: 5px;	
	-moz-border-bottom-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border-bottom-right-radius: 5px;	
	
	}
	
.panel h5 {
	text-align:center;
	font-size:12px;
	color:#262B37;
	padding-bottom:10px;
	border-bottom:1px solid #262B37; 
}
h5.bot{
	padding-top:15px;
}

a.openpanel{ 
	_background-image:none; 
	background:#67A837 url(../img/option.png) no-repeat center center; 
	padding:5px;
	border:1px solid #335D09; 
	color:#fff;
	display:block; left:0; width:31px; height:31px; top:85px; text-indent:-9999px;
	position:fixed; _position:absolute; 
	z-index:999999;
	-moz-border-top-right-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	border-top-right-radius: 5px;	
	-moz-border-bottom-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
			
	a.openpanel:hover{ 

	}
	
	a.active.openpanel{ 
	border-left:none;
	_position:absolute; 
	left:99px;
 }
#stylechanger, #stylechangerbot { 
	float:left;
	list-style:none; 
	list-style-type:none; 
	list-style-position:outside; 
	margin-bottom:0;
	margin-right:5px;
}
	
#stylechanger li a, #stylechanger-right  li a, #stylechangerbot li a, #stylechangerbot-right li a { 
	display:block; 
	margin-bottom:5px; 
	width:32px; 
	height:32px; 
	border:1px solid #d5d5d5;
}	

#stylechanger-right, #stylechangerbot-right {
	float:right;
	list-style:none; 
	list-style-type:none; 
	list-style-position:outside; 

}

ul#stylechangerbot li a, ul#stylechangerbot-right li a {
	color:#fff;
	text-align:center;
	line-height:32px;
}
	
#bg1 { background: url(../img/patterns/pat1.png) }
#bg2 { background: url(../img/patterns/pat2.png) }
#bg3 { background: url(../img/patterns/pat3.png) }
#bg4 { background: url(../img/patterns/pat4.png)}
#bg5 { background: url(../img/patterns/pat5.png)}
#bg6 { background: url(../img/patterns/pat6.png) }

