/** RESET **********/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {

}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

body { background: #C6DC66;}
a { text-decoration: none; font-weight: 600; color: #23B4F0;}

.shell { position: relative; width: 1024px; margin: 0 auto; }
.left { float: left; }
.right { float: right; }
.cl { clear: both; line-height: 0px; }

h1, h2, h3, h4 { font-family: 'Open Sans'; letter-spacing: -.05em; color: #002B53; }
h1.rep, h2 { font-size: 52px; margin-bottom: 15px; }
h3 { font-size: 28px; line-height: 30px; }

#header { position: fixed; width: 100%; height: 94px; background: #02203F; z-index: 11000; border-bottom: 5px solid #C6DC66;}


/*----------------------------------------------*/
/* Navigation */
/*----------------------------------------------*/

#logo { position: absolute; top: 5px; display: block; width: 300px; height: 90px; background: url(../images/waterpromotion-logo.png) no-repeat; }
nav { position: absolute; top: 0px; right: 0px; list-style:none;}
nav a { font-family: 'Myriad Pro'; color: #fff; text-transform: uppercase; font-size: 12px;}
nav a:hover { color: #62b4e4; }
nav li { float: left; margin-right: 20px; }
nav li.last { margin-right: 0px; }
nav li.last a:hover { color: #fff; }
nav li.last a { padding: 45px 15px 15px; background: #23B4F0; }
nav li a { display: block; padding-top: 45px;  }
nav .tag {
	display:block;
	font-size:12px;
	text-align:left;
	margin-top:10px;
	text-transform: lowercase;
	color: #C6DC66;
}

nav .taglast {
	display:block;
	font-size:12px;
	text-align:left;
	margin-top:10px;
	text-transform: lowercase;
	color: #02355f;
}


nav .subscript{font-size:xx-small; vertical-align:bottom;}

.last {
	color: #02203F;
}
	
.slide { width: 100%; height: 810px; padding-top: 80px;}

/* SLIDER */

.ei-slider{
	position: relative;
	width: 100%;
	max-width: 1920px;
	height: 800px;
	margin: 0 auto;
}
.ei-slider-loading{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index:999;
	background: rgba(0,0,0,0.9);
	color: #fff;
	text-align: center;
	line-height: 400px;
}
.ei-slider-large{
	height: 100%;
	width: 100%;
	position:relative;
	overflow: hidden;
}
.ei-slider-large li{
	position: absolute;
	top: 0px;
	left: 0px;
	overflow: hidden;
	height: 100%;
	width: 100%;
}
.ei-slider-large li img{
	width: 800px;
	height: 800px;
}
.ei-title{
	position: absolute;
	right: 50%;
	margin-right: 13%;
	top: 30%;
}
.ei-title h2, .ei-title h3{
	text-align: right;
}
.ei-title h2{
	font-size: 40px;
	line-height: 50px;
	font-family: 'SEGOEUIL', serif;
	font-style: italic;
	color: #000;
}
.ei-title h3{
	font-size: 70px;
	line-height: 70px;
	font-family: 'Open Sans Condensed', sans-serif;
	text-transform: uppercase;
	color: #62b4e4;
}
.ei-slider-thumbs{
	height: 15px;
	margin: 0 auto;
	position: relative;
}
.ei-slider-thumbs li{
	position: relative;
	float: left;
	height: 100%;
}
.ei-slider-thumbs li.ei-slider-element{
	top: 0px;
	left: 0px;
	position: absolute;
	height: 100%;
	z-index: 10;
	text-indent: -9000px;
	background: #000;
	background: rgba(0,0,0,0.9);
}
.ei-slider-thumbs li a{
	display: block;
	text-indent: -9000px;
	background: #34b1e6 ;
	width: 100%;
	height: 100%;
	cursor: pointer;
	-webkit-box-shadow: 
	-webkit-transition: background 0.2s ease;
    -moz-transition: background 0.2s ease;
    -o-transition: background 0.2s ease;
    -ms-transition: background 0.2s ease;
    transition: background 0.2s ease;
}
.ei-slider-thumbs li a:hover{
	background-color: #02355f;
}
.ei-slider-thumbs li img{
	position: absolute;
	bottom: 50px;
	opacity: 0;
	z-index: 999;
	max-width: 100%;
	-webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
	-webkit-box-reflect: 
        below 0px -webkit-gradient(
            linear, 
            left top, 
            left bottom, 
            from(transparent), 
            color-stop(50%, transparent), 
            to(rgba(255,255,255,0.3))
            );
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.ei-slider-thumbs li:hover img{
	opacity: 1;
	bottom: 13px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
@media screen and (max-width: 830px) {
	.ei-title{
		position: absolute;
		right: 0px;
		margin-right: 0px;
		width: 100%;
		text-align: center;
		top: auto;
		bottom: 10px;
		background: #fff;
		background: rgba(255,255,255,0.9);
		padding: 5px 0;
	}
	.ei-title h2, .ei-title h3{
		text-align: center;
	}
	.ei-title h2{
		font-size: 20px;
		line-height: 24px;
	}
	.ei-title h3{
		font-size: 30px;
		line-height: 40px;
	}
}

/* SLIDER END */


/* TABS */

.tabs {
    position: relative;
	width: 650px;
}

.tabs input {
	position: absolute;
	z-index: 1000;
	width: 120px;
	height: 40px;
	left: 0px;
	top: 0px;
	opacity: 0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	cursor: pointer;
}
.tabs input#tab-2{
	top: 40px;
}
.tabs input#tab-3{
	top: 80px;
}
.tabs input#tab-4{
	top: 120px;
}
.tabs input#tab-5{
	top: 160px;
}
.tabs input#tab-6{
	top: 200px;
}
.tabs input#tab-7{
	top: 240px;
}
.tabs input#tab-8{
	top: 280px;
}
.tabs label {
	background: #C6DC66;
	font-size: 15px;
	line-height: 40px;
	height: 40px;
	position: relative;
	padding: 0 20px;
	display: block;
	width: 330px;
	color: #002B53;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: left;
	float: left;
	clear: both;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 30px 0 0 30px;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
    font-family: 'Open Sans', sans-serif; font-weight: 600;
}

.tabs label:after {
    content: '';
	background: #fff;
	position: absolute;
	right: -2px;
	top: 0;
	width: 2px;
	height: 100%;
}

.tabs input:hover + label {
	background: #5ba4a4;
}

.tabs label:first-of-type {
    z-index: 8;
}

.tab-label-2 {
    z-index: 7;
}

.tab-label-3 {
    z-index: 6;
}

.tab-label-4 {
    z-index: 5;
}

.tab-label-5 {
    z-index: 4;
}

.tab-label-6 {
    z-index: 3;
}

.tab-label-7 {
    z-index: 2;
}

.tab-label-8 {
    z-index: 1;
}

.tabs input:checked + label {
	background: #fff;
	z-index: 6;
	color: #5ba4a4;
}

.clear-shadow {
	clear: both;
}

.content {
    background: #fff;
	position: absolute;
	width: 326px;
	margin: -321px 0 0 190px;
	height: 323px;
	z-index: 10;
	overflow: hidden;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    border-radius: 1000px;
}

.content div {
    position: absolute;
	top: 0;
	padding: 25px 50px;
	z-index: 1;
    opacity: 0;
    -webkit-transition: all linear 0.2s;
    -moz-transition: all linear 0.2s;
    -o-transition: all linear 0.2s;
    -ms-transition: all linear 0.2s;
    transition: all linear 0.2s;
    text-align: center;
}

.content div{
	-webkit-transform: translateY(-450px);
	-moz-transform: translateY(-450px);
	-o-transform: translateY(-450px);
	-ms-transform: translateY(-450px);
	transform: translateY(-450px);
}

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4,
.tabs input.tab-selector-5:checked ~ .content .content-5,
.tabs input.tab-selector-6:checked ~ .content .content-6,
.tabs input.tab-selector-7:checked ~ .content .content-7,
.tabs input.tab-selector-8:checked ~ .content .content-8{
    -webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
    z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all ease-out 0.3s 0.3s;
    -moz-transition: all ease-out 0.3s 0.3s;
    -o-transition: all ease-out 0.3s 0.3s;
    -ms-transition: all ease-out 0.3s 0.3s;
    transition: all ease-out 0.3s 0.3s;
}

.content div h2 {
	color: #398080;
}
.content div p {
	font-size: 14px;
	line-height: 22px;
	font-style: italic;
	text-align: left;
	margin: 0;
	color: #777;
	padding-left: 15px;
	font-family: Cambria, Georgia, serif;
	/*border-left: 8px solid rgba(63,148,148, 0.1);*/
}

/* TABS END */

#home { height: 810px; overflow: hidden; }
#home .shell { height: 930px; padding-top: 0px; b }

#about { background: #23B4F0; overflow: hidden; height: 650px;  text-align: justify; }
#about h2 { text-shadow: 1px 1px 0 #84D2FF; }
#about h4 { font-weight: 600; text-shadow: 1px 1px 0 #84D2FF; font-size: 24px;}
#about .shell { position: relative; height: 800px; }
#about .shell img.bg { position: absolute; top: 100px; right: -105px;}
#about .shell .description { position: absolute; top: 40px; left: 0px; font-size: 18px;}
#about .shell .description p { font-family: 'Open Sans', sans-serif; font-weight: 300; line-height: 22px; width: 100%; color: #fff;}
#about .shell .description h1{ font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 30px; }

#what { background: url(images/what-bg.jpg) no-repeat top center #D2E2E5; height:2250px;}
#what .shell #waterSplash { position: absolute; bottom: -10px; left: -10px; }
#what .shell .splash { position: absolute; top: -137px; right: -80px; z-index: 9995; }
#what .shell .description { 'Open Sans', sans-serif; font-weight: 300; position: absolute; top: 100px;  width: 100%; }
#what .shell .description h2 { color: #23B4F0; font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 30px; padding-top: 20px; }
#what .shell .description p { font-family: 'Open Sans', sans-serif; font-weight: 300; line-height: 22px; color: #02355f; }
#what .shell .description ul { position: absolute; top: -20px; right: 0px; width: 530px; }
#what .shell .description ul li { float: left; width: 150px; height: 280px; margin-right: 40px; }
#what .shell .description ul li.no-margin { margin-right: 0px !important; }
#what .shell .description ul img { margin-bottom: 20px; }
#what .shell .description ul p { width: 160px; font-family: Arial, sans-serif; font-style: italic; font-size: 16px; line-height: 22px; }
#what .shell .purification { position: absolute; top: 590px; width: 100%; text-align: center; }
#what .shell .purification h3 { color: #23B4F0; text-shadow: 1px 1px 0 #fff; margin-bottom: 40px; }
#what .shell .purification a { background: #23B4F0; background: #59d0ff; /* Old browsers */
background: -moz-linear-gradient(top,  #59d0ff 0%, #23b4f0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#59d0ff), color-stop(100%,#23b4f0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #59d0ff 0%,#23b4f0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #59d0ff 0%,#23b4f0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #59d0ff 0%,#23b4f0 100%); /* IE10+ */
background: linear-gradient(to bottom,  #59d0ff 0%,#23b4f0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59d0ff', endColorstr='#23b4f0',GradientType=0 ); /* IE6-9 */
color: #02355f; padding: 12px 50px; border-radius: 30px; text-shadow: 1px 1px 0 #84D2FF; text-transform: uppercase; }

#what { background: url(../images/pricing-bg.jpg) no-repeat top center #D2E2E5; padding-bottom: 85px; height: 2300px;}
#what .shell .felhasznalas { position: absolute; top:120px;}
#what .shell .description #felhasznalasok {float: left; }
#what .shell .description #felhasznalasok .eladom {padding: 50px 0 20px 100px;}
#what .shell .description #felhasznalasok .eladom .text {width: 40%; float: left;}
#what .shell .description #felhasznalasok .eladom .tab {width: 60%; float: right;}
#what .shell .description #felhasznalasok .eladom .text p.first {font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 30px; margin-bottom: 10px;}
#what .shell .description #felhasznalasok .eladom .text p.second {margin-bottom: 25px; }
#what .shell .description #felhasznalasok .eladom .text table .q{padding: 2px 5px;}

#what .shell .description .ecotext {width: 60%; float: left; text-align: justify; padding-bottom: 20px;}
#what .shell .description .ecoimage {width: 40%; float: right; padding-bottom: 20px; text-align: right;}

#what .shell .description #felhasznalasok .ingyen {padding-top: 50px; float: left; width: 100%;  text-align: justify;}
#what .shell .description #felhasznalasok .ingyen p.first {font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 30px; margin-bottom: 10px;}
#what .shell .description #felhasznalasok .ingyen p.second {margin-bottom: 25px; }

#what .shell .description #felhasznalasok .egyeb {padding-top: 50px; float: left; width: 100%;  text-align: justify;}
#what .shell .description #felhasznalasok .egyeb p.first {font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 30px; margin-bottom: 10px;}
#what .shell .description #felhasznalasok .egyeb p.second {margin-bottom: 25px; }

#how { background: url(../images/how-bg.jpg) no-repeat top center #032A53; overflow: hidden; height: 2320px;}
#how .shell #bottle { position: absolute; top: 50px; right: -300px; z-index: 1; }
#how .shell #drops { position: absolute; top: 430px; right: 0px; z-index: 1000; }
#how .shell .description p { font-family: 'Open Sans', sans-serif; font-weight: 300; line-height: 22px; color: #01a6db;}
#how .shell .description h2 { color: #01a6db; margin-bottom: 5px; font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 30px;}
#how .shell .description h3 { color: #fff; font-size: 30px; margin-bottom: 15px; font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 30px; }

#how .shell .description .csomag {width: 100%; height: 400px;}
#how .shell .description .csomag ul { position: absolute; top: 140px;}
#how .shell .description .csomag ul li { float: left; width: 250px; text-align: center; }
#how .shell .description .csomag ul li h3 { color: #C6DC66; text-shadow: 1px 1px 0 #000;}
#how .shell .description .csomag ul li p { font-family: 'Open Sans', sans-serif; font-weight: 300; color: #fff; font-size: 15px; line-height: 18px; text-shadow: 1px 1px 0 #000;}


#how .shell .description .csomag ul li .bottlebutton{ background:url(../images/buttonbg.png) no-repeat; float: left; width: 220px; height: 63px; text-align: center; color: #032F64; font-family: 'Open Sans', sans-serif; font-weight: 600; padding-top: 20px;}

#how .shell .description .hogyantable { margin-top: 60px; width: 700px; color: #fff; text-align: justify;}
#how .shell .description .hogyantable { color: #fff;}

#how .shell .description .hogyantable .q p{ color: #C6DC66; padding-left: 5px; font-family: 'Open Sans', sans-serif; font-weight: 600;}
#how .shell .description .hogyantable .a p{ color: #fff; padding-left: 5px;  padding-bottom: 10px;}

#how .shell .description .ecotext {width: 65%; float: left; text-align: justify; padding-bottom: 20px;}
#how .shell .description .ecoimage {width: 35%; float: right; padding-bottom: 20px; text-align: right;}
#how .shell .description .ecoimage h4{color: #fff; font-size: 12px;}

#how .shell #waterSplash { position: absolute; top: 2085px; right: -470px; z-index: 1000; }
#how .shell .splash { position: absolute; top: -142px; right: -150px; z-index: 999;}

#how .shell .button {
font-family: 'Open Sans', sans-serif; font-weight: 300;
border-radius: 35px;
border: 0px;
font-size: 16px;
color: #032F64; text-shadow: 1px 1px 0 #9CD8FF;
padding: 12px 45px;
height: auto; background: #C6DC66; /* Old browsers */
background: -moz-linear-gradient(top,  #C6DC66 0%, #C6DC66 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C6DC66), color-stop(100%,#C6DC66)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #C6DC66 0%,#C6DC66 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #C6DC66 0%,#C6DC66 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #C6DC66 0%,#C6DC66 100%); /* IE10+ */
background: linear-gradient(to bottom,  #C6DC66 0%,#C6DC66 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C6DC66', endColorstr='#C6DC66',GradientType=0 ); /* IE6-9 */
 }

#gallery { background: #22B3F0; padding-bottom: 100px; overflow: hidden; height: 850px;}
#gallery .splash { position: absolute; top: -350px; right: -150px; z-index: 999;}
#gallery .shell .description { font-family: 'Open Sans', sans-serif; font-weight: 300; position: absolute; top: 50px; left: 0px; width: 1024px; }
#gallery .shell .description a { font-family: 'Open Sans', sans-serif; font-weight: 300; color:#fff }
#gallery .shell .description h2 { font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 30px; margin-bottom: 15px; text-shadow: 1px 1px 0 #84D2FF; }
#gallery .shell .description h3 { font-family: 'Open Sans', sans-serif; font-weight: 600; color: #fff; font-size: 20px; }
#gallery .shell .description h4 { font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 18px; margin-bottom: 15px; }
#gallery .shell .description p { color: #fff; font-size: 14px; margin-bottom: 15px; }
#gallery .shell .description #drops { position: absolute; top: 0px; right: -100px; z-index: 999; }
#gallery .shell #categories { position: absolute; top: 260px; right: 0px; text-align: right; }
#gallery .shell #categories li a { display: block; font-family: 'ArialRoundedMTBold'; font-size: 20px; padding: 5px 15px; color: #002B53; }
#gallery .shell #categories li a:hover, #gallery .shell #categories li a.active { color: #fff; }

#gallery .tabs-nav { position: absolute; top: 380px; right: 10px; text-align: right !important; }
#gallery .tabs-nav li a { font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 18px; color: #022B53; line-height: 24px; }
#gallery .tabs-nav li a:hover { color: #fff; }

#gallery .jslider-nav a.prev { position: absolute; top: 460px; left: -30px; }
#gallery .jslider-nav a.next { position: absolute; top: 460px; left: 840px; }

#gallery .jslider { position: relative; top: 340px; left: 30px; width: 790px; height: 570px; overflow: hidden; box-shadow: inset 0 0 35px #22B3F0; z-index: 1; }
#gallery .jslider ul li { width: 790px; }

#gallery .elements-container { display: none; background: #22B3F0; width: 793px; overflow: hidden;}
#gallery .lightbox { position: relative; float: left; margin-right: 5px; margin-bottom: 5px; background: gray; width: 192px; height: 187px; }
#gallery .lightbox a { outline: none; }
#gallery .lightbox .imageHolder { width: 192px; height: 187px; background-position: center top; background-repeat: no-repeat; }
#gallery .lightbox img { width: 192px; height: 187px; margin: 0px; }
#gallery .lightbox img.galleryMask { position: absolute; top: 0px; left: 0px; }

.inner .elements-container { background: #22B3F0; width: 793px; overflow: hidden;}
.inner .editButton, .inner .editButton:hover { background: #000; }
.inner .lightbox { position: relative; float: left; margin-right: 5px; margin-bottom: 5px; background: gray; width: 192px; height: 187px; }
.inner .lightbox img { width: 192px; height: 187px; margin: 0px; }
.inner .lightbox img.galleryMask { position: absolute; top: 0px; left: 0px; }
.inner .lightbox .imageHolder { width: 192px; height: 187px; background-position: center top; background-repeat: no-repeat; }

#contact { background: url(../images/contact-bg.jpg) no-repeat top center #002B53; overflow: hidden; height: 850px;}
#contact .shell .drop { position: absolute; top: 0px; left: -100px; z-index: 9995; }
#contact .shell .map { position: absolute; top: -145px; right: -190px; width: 606px; height: 1100px; background: url(../images/contact-map.png) no-repeat; }
#contact .shell .map .contactInfo { position: absolute; top: 790px; left: 150px; font-family: 'Open Sans'; z-index: 9995; }
#contact .shell .map .contactInfo p.first { font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 24px; color: #23B4F0; margin-bottom: 10px; line-height: 28px; }
#contact .shell .map .contactInfo p.second { font-family: 'Open Sans', sans-serif; font-weight: 300; color: #fff; line-height: 20px; margin-bottom: 8px; }
#contact .shell .map .contactInfo p.third a { font-family: 'Open Sans', sans-serif; font-weight: 300; color: #C6DC66; }

#contact .shell .pageTitle p { color: #01a6db; }
#contact .shell .description { font-family: 'Open Sans'; position: absolute; top: 80px; left: 0px; }
#contact .shell .description h2 {font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 30px; color: #23B4F0; }
#contact .shell .description p { font-family: 'Open Sans', sans-serif; font-weight: 300; line-height: 22px; color: #fff; }

#footer { height: 600px; border-top: 1px solid #23B4F0; background: #13213C; padding-bottom: 10px; }
#footer h2 {color: #C6DC66; font-family: 'Open Sans'; font-size: 18px; line-height: 20px; padding: 15px 0 10px 0; font-weight: 600;}
#footer h3 {color: #fff; font-family: 'Open Sans'; font-size: 14px; line-height: 20px; padding: 15px 0 10px 0; font-weight: 600;}
#footer p { color: #fff; font-family: 'Open Sans'; font-size: 12px; line-height: 16px; text-align: justify;}
#footer a { font-family: 'Open Sans'; font-size: 12px; line-height: 22px; text-align: left;}
.copyright { border-top: 1px solid #23B4F0; background: black; text-align: right; padding: 5px 0 5px 0;}
.copyright a { font-family: 'Open Sans'; font-size: 12px; color: #fff;}
#footer .social { position: absolute; top: -25px; right: 0px; }
#footer .social li { float: left; margin-left: 5px; }


/* --- The Form --- */
#contact .shell .form { width: 500px; font-family: 'Open Sans', sans-serif; font-weight: 300; color: #23B4F0; position: relative; top: 240px;}

#contact .shell .form label {
    display: inline-block;
    float: left;
    font-size: 18px;
    height: 26px;
    line-height: 26px;
    width: 90px;
	margin: 7px 0;
}

#contact .shell .form .input, #contact .shell .form textarea, #contact .shell .form select {
	border: 1px solid #CCCCCC;
	color: #666666;
	outline: none;
	font-size: 16px;  font-family: 'Open Sans';
	margin: 7px 0;
	padding: 5px;
	width: 380px;
	border-radius: 5px;}
	
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

#contact .shell .form .messageInput{
	height: 180px;
}

#contact .shell .form .button { position: relative; left: 340px; font-family: 'Open Sans', sans-serif; font-weight: 600; text-transform: uppercase; border-radius: 35px; border: 0px; font-size: 16px;color: #032F64; text-shadow: 1px 1px 0 #9CD8FF; padding: 12px; height: auto; background: #C6DC66; text-align: center; width: 140px; margin-top: 10px;}
#contact .shell .form .button:hover { color: #032F64; background: #fff; cursor: pointer;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

#contact .shell .form input:focus, #contact textarea:focus { border: 1px solid #eee; color: #444; background: #fff; }

#contact .shell .form .error { border: 1px solid #973d3d; background: #f0bebe; color: #a35959; }
#contact .shell .form .error:focus { border: 1px solid #eee; color: #a35959; }

#arajanlat { background: url(../images/how-bg.jpg) no-repeat top center #032A53; overflow: hidden; height: 2100px;}
#arajanlat .shell #bottle { position: absolute; top: 50px; right: -300px; z-index: 1; }
#arajanlat .shell #drops { position: absolute; top: 430px; right: 0px; z-index: 1000; }
#arajanlat .shell .description { font-family: 'Open Sans', sans-serif; font-weight: 300; width: 1024px; padding-top: 50px;}
#arajanlat .shell .description p { font-family: 'Open Sans', sans-serif; font-weight: 300; line-height: 22px; color: #fff;}
#arajanlat .shell .description h2 { color: #01a6db; margin-bottom: 5px; font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 30px;}
#arajanlat .shell .description h3 { color: #fff; font-size: 30px; margin-bottom: 15px; font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 30px; }

.tabform{
	width: 500px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	color: #23B4F0;
	position: relative;
        -webkit-font-smoothing: antialiased;
}

.form h3{color: #fff;}
.form a{font-weight: 300; color: #fff;}

      .tabform input[type=radio] {
          position: absolute;
          top: -9999px;
          left: -9999px;
      }
      
      .tabform {
        width: 100%;
        float: none;
        list-style: none;
        position: relative;
        padding: 0;
        margin: 50px auto;
      }
      
      .tabform li{
        float: left;
      }
      
      .tabform label {
        padding: 15px 20px;
        border-radius: 2px 2px 0 0;
        font-size: 24px;
        font-weight: normal;
	font-family: 'Open Sans', sans-serif; font-weight: 300;	
        cursor: pointer;
        position: relative;
        top: 3px;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
	display: inline-block;
      }
      
      .tabform label:hover {
        background: rgba(255,255,255,0.5);
        top: 0;
      }
       
      [id^=tab]:checked + label {
        background: rgba(35,180,240,0.4);
        color: white;
        top: 0;
      }
       
      [id^=tab]:checked ~ [id^=tab-content] {
          display: block;
      }
      .tab-content{
        z-index: 2;
        display: none;
        text-align: left;
        width: 100%;
        background: rgba(35,180,240,0.4);
        padding: 15px;
        color: white;
        position: absolute;
        top: 53px;
        left: 0;
        -webkit-animation-duration: 0.5s;
        -o-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
      }

.tabform .form { width: 100%; font-family: 'Open Sans', sans-serif; font-weight: 300; color: #23B4F0; vertical-align: top;}

.tabform .form .input, #contact .shell .form textarea, #contact .shell .form select {
	border: 1px solid #CCCCCC;
	color: #666666;
	outline: none;
	font-size: 16px;  font-family: 'Open Sans';
	margin: 7px 0;
	padding: 5px;
	width: 100%;
	border-radius: 5px;
	width: 100%;
	display: inline-block;
}
	
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.tabform .form .messageInput{
	height: 50px;
	width: 100%;
	font-family: 'Open Sans', sans-serif; font-weight: 300;
	max-width: 1024px;
}

.tabform .form .button {
	text-align: right;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: 35px;
	border: 0px;
	font-size: 16px;
	color: #032F64;
	text-shadow: 1px 1px 0 #9CD8FF;
	padding: 12px;
	height: auto;
	background: #C6DC66;
	text-align: center;
	width: 200px;
	margin-top: 10px;
	float: right;

}

.tabform .form .button:hover { color: #032F64; background: #fff; cursor: pointer;}

.tabform input::-webkit-outer-spin-button,
.tabform input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; 
}

.tabform .form input:focus, #contact textarea:focus { border: 1px solid #eee; color: #444; background: #fff; }

.tabform .form .error { border: 1px solid #973d3d; background: #f0bebe; color: #a35959; }
.tabform .form .error:focus { border: 1px solid #eee; color: #a35959; }

.styled-select {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 18px;
	position: relative; /* Enable absolute positioning for children and pseudo elements */
	width: 100%;
	padding: 10px;
	margin: 0 auto;
	background: #9bc7de;
	color: #fff;
	outline: none;
	cursor: pointer;
}

form p {
	color: #fff; padding: 10px;
	padding: 15px 20px;
        border-radius: 2px 2px 0 0;
        font-size: 14px;
	font-family: 'Open Sans', sans-serif; font-weight: 300;	
        cursor: pointer;
        position: relative;
        top: 3px;
	display: inline-block;}

/* FOOTER */

/*  GRID OF THREE   ============================================================================= */

	
.span_3_of_3 {
	width: 32.2%;
}

.span_2_of_3 {
	width: 32.2%; 
}

.span_1_of_3 {
	width: 32.2%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
}


/*  SECTIONS  ============================================================================= */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  GROUPING  ============================================================================= */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

h1.title {
	font-family: 'Open Sans', sans-serif !important;
	font-size:30px;
}
h2 {
	font-size:22px;
}

.subfooter {
	display:block;
	padding-right:0;
	padding-left:0;
	margin-right:0;
	margin-left:0;
	padding-top:30px;
	padding-bottom:30px;
	border-top:2px dotted #23B4F0;
	width:600px;
	margin:0 auto;
}
.subfooter p {
	display:block;
	text-align:center;
	font-family:Arial, sans-serif;
	font-size:14px;
	line-height:18px;	
}

#element_to_pop_up {
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	margin-top: 200px;
	background: url(../images/pricing-bg.jpg) no-repeat top center #D2E2E5;
	display:none; 
	padding:20px;
	max-width:700px;
	min-height:180px;
	display:none; 
	padding:20px;
	font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 14px; line-height: 18px;
	z-index: 10001;

}

#element_to_pop_up2 {
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	margin-top: 200px;
	background: url(../images/pricing-bg.jpg) no-repeat top center #D2E2E5;
	display:none; 
	padding:20px;
	max-width:700px;
	min-height:140px;
	display:none; 
	padding:20px;
	font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 14px; line-height: 18px;
	text-align: justify;
}

#element_to_pop_up3 {
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	margin-top: 200px;
	background: url(../images/pricing-bg.jpg) no-repeat top center #D2E2E5;
	display:none; 
	padding:20px;
	max-width:700px;
	min-height:140px;
	display:none; 
	padding:20px;
	font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 14px; line-height: 18px;
	text-align: justify;
}

.b-close{
	 cursor:pointer;
	 position:absolute;
	 right:10px;
	 top:5px;
}

/* ALL FORMAT */

.bold {font-weight: 600;}

.green {color: #C6DC66;}

.small {font-size: 12px; font-weight: 600;}

.smallitalic {font-size: 12px; font-style: italic;}

.superscript{font-size:xx-small; vertical-align:top; text-decoration: underline;}

#toTop {
	z-index: 99999;
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:100%;
	background:url(../images/uitotop.png) no-repeat left top;
}

#toTopHover {
	background:url(../images/uitotop.png) no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
	z-index: 999999;
}

#toTop:active, #toTop:focus {
	outline:none;
}

.datagrid table { border-collapse: collapse; text-align: left; width: 100%; } .datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }.datagrid table td, .datagrid table th { padding: 3px 10px; }.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; color:#ffffff; font-size: 15px; font-weight: bold; border-left: 1px solid #0070A8; } .datagrid table thead th:first-child { border: none; }.datagrid table tbody td { color: #00496B; border-left: 1px solid #E1EEF4;font-size: 12px;font-weight: normal; }.datagrid table tbody .alt td { background: #E1EEF4; color: #00496B; }.datagrid table tbody td:first-child { border-left: none; }.datagrid table tbody tr:last-child td { border-bottom: none; }.datagrid table tfoot td div { border-top: 1px solid #006699;background: #E1EEF4;} .datagrid table tfoot td { padding: 0; font-size: 12px } .datagrid table tfoot td div{ padding: 2px; }.datagrid table tfoot td ul { margin: 0; padding:0; list-style: none; text-align: right; }.datagrid table tfoot  li { display: inline; }.datagrid table tfoot li a { text-decoration: none; display: inline-block;  padding: 2px 8px; margin: 1px;color: #FFFFFF;border: 1px solid #006699;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; }.datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover { text-decoration: none;border-color: #006699; color: #FFFFFF; background: none; background-color:#00557F;}