/*
	Theme Name: Joo Tamas
	Author: Joo Tamas
	Version: 1.0
*/

/* ALTALANOS CSS BEALLITASOK */
*{
	padding:0px;
	margin:0px;
}

img{
	border:0px;
}

sup{
	vertical-align:top;
	position:relative;
	top: -0.5em;
	padding-left:1px;
}

sub{
	vertical-align:bottom;
	position:relative;
	bottom: -0.5em;
	padding-left:1px;
}

.center{
	text-align:center;
}

.clear{
	display:block;
	height:0px;
	line-height:0px;
	font-size:0px;
	clear:both;
}

.afterDiv:after{
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
 font-size:0px;
 line-height:0px;
}

a, a:hover, a:active, a:focus{
	outline:none;
}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
	border: none;
}

input{
	outline:none;
}

textarea{
	outline:none;
	overflow:auto; /* disable scrollbar in IE */
}

::selection {color:#ffffff;background:#36D7B7;}
::-moz-selection {color:#ffffff;background:#36D7B7;}

/* */

body{
	background-color:#E7E7E7; /* #F6F7F2 */
}

header{
	height:80px;
}

header > div{
	max-width:1000px;
	padding-right:20px;
	padding-left:20px;
	margin-right:auto;
	margin-left:auto;
}

header > div > div{
	padding-top:23px;
}

header > div > div > ul{
	float:right;
	font-size:0px;
}

header > div > div > ul > li{
	float:left;
	padding-right:15px;
	list-style-type:none;
}

header > div > div > ul > li:last-child{
	padding-right:0px;
}

header > div > div > ul > li.icon > a{
	display:inline-block;
	width:35px;
	height:35px;
	line-height:35px;
	font-size:20px;
	color:#000000;
	border-radius:35px;
	-moz-border-radius:35px;
	-webkit-border-radius:35px;
	background-color:#ffffff;
	text-align:center;
}

header > div > div > ul > li.icon > a:hover{
	color:#ffffff;
	background-color:#36D7B7;
}

header > div > div > ul > li.blog > a{
	display:inline-block;
	width:100px;
	height:35px;
	line-height:35px;
	font-family:'Titillium Web';
	font-size:18px;
	color:#ffffff;
	background-color:#36D7B7;
	border-radius:35px;
	-moz-border-radius:35px;
	-webkit-border-radius:35px;
	text-align:center;
	text-transform:uppercase;
	text-decoration:none;
}

/* */

section{
}

section > div > div{
	max-width:1000px;
	padding-right:20px;
	padding-left:20px;
	margin-right:auto;
	margin-left:auto;
}

@media screen and (max-width:399px){
	section > div > div{
		padding-right:10px;
		padding-left:10px;
	}
}

section > div > div > div{
}

section#services{
}

section#services > div{
	border-top:3px solid #36D7B7;
	border-bottom:1px solid #ffffff;
	background-color:#192c3b;
	padding-top:55px;
	padding-bottom:70px;
}

@media screen and (min-width:551px){
	section#services > div{
		background-color:none;
		background-image:url('images/bg.jpg');
		background-position:top center;
		background-repeat:no-repeat;
	}
}

section#services > div > div{
}

section#services > div > div > div > #about{
	/* padding-bottom:55px; */
}

section#services > div > div > div > #about > h1{
	font-family:'Titillium Web';
	font-weight:600;
	font-size:22px;
	line-height:22px;
	color:#36D7B7;
	padding-bottom:2px;
	text-transform:uppercase;
}

@media screen and (max-width:499px){
	section#services > div > div > div > #about > h1{
		font-size:20px;
	}
}

section#services > div > div > div > #about > h2{
	font-family:'Titillium Web';
	font-weight:400;
	font-size:20px;
	line-height:20px;
	color:#ffffff;
	padding-bottom:30px;
}

@media screen and (max-width:499px){
	section#services > div > div > div > #about > h2{
		font-size:18px;
	}
}

section#services > div > div > div > #about > p{
	font-family:'Titillium Web';
	font-weight:400;
	font-size:14px;
	line-height:22px;
	color:#ffffff;
}

@media screen and (max-width:499px){
	section#services > div > div > div > #about > p{
		font-size:13px;
	}
}

section#services > div > div > div > ul{
	display:table;
	font-size:0px;
}

@media screen and (max-width:550px){
	section#services > div > div > div > ul{
		display:block;
	}
}

section#services > div > div > div > ul > li{
	display:table-row;
	list-style-type:none;
}

@media screen and (max-width:550px){
	section#services > div > div > div > ul > li{
		display:block;
	}
}

section#services > div > div > div > ul > li > .image{
	display:table-cell;
	width:130px;
	font-size:0px;
	padding-top:3px;
	text-align:left;
	vertical-align:top;
}

@media screen and (max-width:550px){
	section#services > div > div > div > ul > li > .image{
		display:block;
		padding-bottom:30px;
	}
}

section#services > div > div > div > ul > li > .image > img{
	width:90px;
}

section#services > div > div > div > ul > li > .content{
	display:table-cell;
	vertical-align:top;
}

section#services > div > div > div > ul > li > .content > h3{
	font-family:'Titillium Web';
	font-weight:600;
	color:#36D7B7;
	font-size:22px;
	line-height:22px;
	padding-bottom:8px;
	text-transform:uppercase;
}

section#services > div > div > div > ul > li > .content > p{
	font-family:'Titillium Web';
	font-weight:400;
	font-size:14px;
	line-height:20px;
	color:#ffffff;
	padding-bottom:60px;
}

section#services > div > div > div > ul > li:last-child > .content > p{
	padding-bottom:0px;
}

/* */

section#works{
	-webkit-box-shadow: inset 0px 50px 80px -30px rgba(0,0,0,0.2);
	-moz-box-shadow: inset 0px 50px 80px -30px rgba(0,0,0,0.2);
	box-shadow: inset 0px 50px 80px -30px rgba(0,0,0,0.2);
}

section#works > div{
	-webkit-box-shadow: inset 0px -50px 80px -30px rgba(0,0,0,0.2);
	-moz-box-shadow: inset 0px -50px 80px -30px rgba(0,0,0,0.2);
	box-shadow: inset 0px -50px 80px -30px rgba(0,0,0,0.2);
	padding-top:70px;
	padding-bottom:50px;
}

section#works > div > div > div > h3{
	font-family:'Titillium Web';
	font-weight:400;
	font-size:30px;
	line-height:30px;
	padding-bottom:70px;
	text-align:center;
	text-transform:uppercase;
}

section#works > div > div > div > div > ul{
	float:left;
	width:100%;
}

section#works > div > div > div > div > ul > li{
	float:left;
	width:33.3333%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	padding-bottom:40px;
	list-style-type:none;
}

@media screen and (max-width:999px){
	section#works > div > div > div > div > ul > li{
		width:50%;
	}
}

section#works > div > div > div > div > ul > li:nth-child(3n+2){
	text-align:center;
}

section#works > div > div > div > div > ul > li:nth-child(3n+3){
	text-align:right;
}

@media screen and (max-width:999px){
	section#works > div > div > div > div > ul > li:nth-child(3n+2){
		text-align:left;
	}
	section#works > div > div > div > div > ul > li:nth-child(3n+3){
		text-align:left;
	}
	section#works > div > div > div > div > ul > li:nth-child(2n+1){
		padding-right:20px;
		text-align:right;
	}
	section#works > div > div > div > div > ul > li:nth-child(2n+2){
		padding-left:20px;
	}
}

@media screen and (max-width:699px){
	section#works > div > div > div > div > ul > li{
		width:100%!important;
		padding-right:0px!important;
		padding-left:0px!important;
		text-align:center!important;
	}
}

section#works > div > div > div > div > ul > li > div{
	display:inline-block;
	max-width:300px;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
	/*
	-webkit-box-shadow: 2px 2px 0px 0px rgba(54,215,183,1);
	-moz-box-shadow: 2px 2px 0px 0px rgba(54,215,183,1);
	box-shadow: 2px 2px 0px 0px rgba(54,215,183,1);
	*/
	border:1px solid #eeeeee;
	background-color:#2C3E50; /* #22313F */
	text-align:left;
}

section#works > div > div > div > div > ul > li > div > .image{
	font-size:0px;
}

section#works > div > div > div > div > ul > li > div > .image > a{
	display:block;
	position:relative;
}

section#works > div > div > div > div > ul > li > div > .image > a > span{
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:138px;
	padding-top:87px;
	opacity:0;
	text-align:center;
}

section#works > div > div > div > div > ul > li > div > .image > a:hover > span{
	background-color:rgba(34, 49, 63, 0.5);
	opacity:1;
}

section#works > div > div > div > div > ul > li > div > .image > a > span > span{
	display:inline-block;
	width:70px;
	height:70px;
	line-height:70px;
	font-size:35px;
	color:#ffffff;
	border-radius:70px;
	-moz-border-radius:70px;
	-webkit-border-radius:70px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	background-color:#36D7B7;
}

section#works > div > div > div > div > ul > li > div > .image > a > img{
	max-width:100%;
}

section#works > div > div > div > div > ul > li > div > .content{
	padding:20px;
}

section#works > div > div > div > div > ul > li > div > .content > h4{
	font-family:'Titillium Web';
	font-weight:600;
	font-size:18px;
	line-height:18px;
	color:#36D7B7;
	padding-bottom:4px;
	text-transform:uppercase;
}

section#works > div > div > div > div > ul > li > div > .content > .date{
	display:block;
	font-family:'Titillium Web';
	font-weight:400;
	font-size:16px;
	line-height:16px;
	color:#ffffff;
	padding-bottom:15px;
}

section#works > div > div > div > div > ul > li > div > .content > ul.tags{
	float:left;
	font-size:0px;
}

section#works > div > div > div > div > ul > li > div > .content > ul.tags > li{
	float:left;
	padding-right:5px;
	list-style-type:none;
}

section#works > div > div > div > div > ul > li > div > .content > ul.tags > li:last-child{
	padding-right:0px;
}

section#works > div > div > div > div > ul > li > div > .content > ul.tags > li > span{
	display:inline-block;
	font-family:'Titillium Web';
	font-weight:600;
	font-size:12px;
	line-height:19px;
	color:#22313F;
	border-radius:19px;
	-moz-border-radius:19px;
	-webkit-border-radius:19px;
	background-color:#ffffff;
	padding-right:8px;
	padding-left:8px;
}

section#works > div > div > div > div > ul > li > div > .content > p{
	display:none;
}

/* */

section#wpci > div{
	border-top:1px solid #ffffff;
	border-bottom:1px solid #ffffff;
	background-color:#22313F;
	padding-top:70px;
	padding-bottom:70px;
}

section#wpci > div > div > div > ul{
	float:left;
	width:100%;
}

@media screen and (max-width:900px){
	section#wpci > div > div > div > ul{
		float:none;
	}
}

section#wpci > div > div > div > ul > li{
	float:left;
	width:50%;
	text-align:center;
	list-style-type:none;
}

@media screen and (max-width:900px){
	section#wpci > div > div > div > ul > li{
		float:none;
		width:100%;
	}
	section#wpci > div > div > div > ul > li:first-child{
		padding-bottom:70px;
	}
}

section#wpci > div > div > div > ul > li > div{
	display:inline-block;
	width:400px;
}

@media screen and (max-width:480px){
	section#wpci > div > div > div > ul > li > div{
		width:100%;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		padding-right:30px;
		padding-left:30px;
	}
}

@media screen and (max-width:375px){
	section#wpci > div > div > div > ul > li > div{
		padding-right:15px;
		padding-left:15px;
	}
}

section#wpci > div > div > div > ul > li > div > .image{
	font-size:0px;
	margin-bottom:30px;
}

section#wpci > div > div > div > ul > li > div > .image > img{
	height:45px;
}

section#wpci > div > div > div > ul > li > div > h3{
	font-family:'Titillium Web';
	font-weight:600;
	font-size:24px;
	line-height:24px;
	color:#36D7B7;
	padding-bottom:5px;
	text-transform:uppercase;
}

@media screen and (max-width:499px){
	section#wpci > div > div > div > ul > li > div > h3{
		font-size:22px;
	}
}

section#wpci > div > div > div > ul > li > div > span{
	display:block;
	font-family:'Titillium Web';
	font-weight:400;
	font-size:18px;
	line-height:18px;
	color:#ffffff;
	padding-bottom:30px;
	text-transform:uppercase;
}

@media screen and (max-width:499px){
	section#wpci > div > div > div > ul > li > div > span{
		font-size:16px;
	}
}

section#wpci > div > div > div > ul > li > div > span > strong{
	font-weight:700;
}

section#wpci > div > div > div > ul > li > div > p{
	font-family:'Titillium Web';
	font-weight:400;
	font-size:14px;
	line-height:20px;
	color:#ffffff;
	text-align:left;
}

@media screen and (max-width:499px){
	section#wpci > div > div > div > ul > li > div > p{
		font-size:13px;
	}
}

/* */

section#contact > div{
	-webkit-box-shadow: inset 0px 50px 80px -30px rgba(0,0,0,0.2);
	-moz-box-shadow: inset 0px 50px 80px -30px rgba(0,0,0,0.2);
	box-shadow: inset 0px 50px 80px -30px rgba(0,0,0,0.2);
	padding-top:70px;
	padding-bottom:70px;
}

section#contact > div > div > div{
}

section#contact > div > div > div > ul{
	float:left;
	width:100%;
	font-size:0px;
}

section#contact > div > div > div > ul > li{
	float:left;
	list-style-type:none;
}

section#contact > div > div > div > ul > li:first-child{
	width:35%;
}

section#contact > div > div > div > ul > li:last-child{
	width:65%;
}

@media screen and (max-width:799px){
	section#contact > div > div > div > ul > li{
		float:none;
		width:100%!important;
	}
}

section#contact > div > div > div > ul > li > div{
}

section#contact > div > div > div > ul > li:first-child > div{
	padding-right:30px;
}

section#contact > div > div > div > ul > li:last-child > div{
	padding-left:30px;
}

@media screen and (max-width:799px){
	section#contact > div > div > div > ul > li > div{
		padding-right:0px!important;
		padding-left:0px!important;
	}
	section#contact > div > div > div > ul > li:last-child > div{
		padding-top:40px;
	}
}

section#contact > div > div > div > ul > li > div > h4{
	font-family:'Titillium Web';
	font-weight:700;
	font-size:24px;
	line-height:24px;
	color:#36D7B7;
	padding-bottom:7px;
	text-transform:uppercase;
}

@media screen and (max-width:499px){
	section#contact > div > div > div > ul > li > div > h4{
		font-size:22px;
	}
}

section#contact > div > div > div > ul > li > div > p{
	font-family:'Titillium Web';
	font-weight:400;
	font-size:14px;
	line-height:20px;
	color:#22313F;
}

@media screen and (max-width:499px){
	section#contact > div > div > div > ul > li > div > p{
		font-size:13px;
	}
}

section#contact > div > div > div > ul > li > div > p > a{
	color:#22313F;
	text-decoration:none;
}

section#contact > div > div > div > ul > li > div > p > a:hover{
	text-decoration:underline;
}

section#contact > div > div > div > ul > li > div > p.first{
	padding-bottom:30px;
}

section#contact > div > div > div > ul > li > div > form{
}

section#contact > div > div > div > ul > li > div > form > div{
	padding-bottom:10px;
}

section#contact > div > div > div > ul > li > div > form > div.msg{
	display:none;
	opacity:0;
}

section#contact > div > div > div > ul > li > div > form > div.msg > p{
	font-family:'Titillium Web';
	font-size:14px;
	line-height:18px;
	color:#ffffff;
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	padding-top:15px;
	padding-right:15px;
	padding-bottom:15px;
	padding-left:20px;
}

section#contact > div > div > div > ul > li > div > form > div.msg.success > p{
	background-color:#27ae60;
}

section#contact > div > div > div > ul > li > div > form > div.msg.error > p{
	background-color:#ff7979;
}

section#contact > div > div > div > ul > li > div > form > div.send{
	padding-bottom:0px;
}

section#contact > div > div > div > ul > li > div > form > div.send > ul{
	display:table;
	width:100%;
}

@media screen and (max-width:499px){
	section#contact > div > div > div > ul > li > div > form > div.send > ul{
		display:block;
	}
}

section#contact > div > div > div > ul > li > div > form > div.send > ul > li{
	display:table-cell;
	width:50%;
	vertical-align:bottom;
}

@media screen and (max-width:499px){
	section#contact > div > div > div > ul > li > div > form > div.send > ul > li{
		display:block;
		width:100%;
	}
}

section#contact > div > div > div > ul > li > div > form > div.send > ul > li:last-child{
	text-align:right;
}

@media screen and (max-width:499px){
	section#contact > div > div > div > ul > li > div > form > div.send > ul > li:last-child{
		padding-top:20px;
		text-align:center;
	}
}

section#contact > div > div > div > ul > li > div > form > div.send > ul > li > p{
	font-family:'Titillium Web';
	font-weight:400;
	font-size:14px;
	line-height:20px;
	color:#22313F;
	padding-bottom:10px;
	padding-left:20px;
}

section#contact > div > div > div > ul > li > div > form > div.send > ul > li > a{
	display:inline-block;
	height:35px;
	line-height:35px;
	font-family:'Titillium Web';
	font-size:18px;
	color:#ffffff;
	background-color:#36D7B7;
	border-radius:35px;
	-moz-border-radius:35px;
	-webkit-border-radius:35px;
	padding-right:25px;
	padding-left:25px;
	text-align:center;
	text-transform:uppercase;
	text-decoration:none;
}

section#contact > div > div > div > ul > li > div > form > div.send > ul > li > a:hover{
	background-color:#2C3E50;
}


section#contact > div > div > div > ul > li > div > form > div input[type=text]{
	width:100%;
	height:35px;
	line-height:35px;
	font-family:'Titillium Web';
	font-size:14px;
	color:#333333;
	border:1px solid #888888;
	border-radius:35px;
	-moz-border-radius:35px;
	-webkit-border-radius:35px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	padding-right:20px;
	padding-left:20px;
}

section#contact > div > div > div > ul > li > div > form > div > input.error{
	border:1px solid #c85e66;
	background-color:#ffcccc;
}

section#contact > div > div > div > ul > li > div > form > div > textarea{
	width:100%;
	height:200px;
	font-family:'Titillium Web';
	font-size:14px;
	line-height:19px;
	color:#333333;
	border:1px solid #888888;
	border-radius:18px;
	-moz-border-radius:18px;
	-webkit-border-radius:18px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	padding:20px;
	resize:none;
}

section#contact > div > div > div > ul > li > div > form > div > textarea.error{
	border:1px solid #c85e66;
	background-color:#ffcccc;
}

/* */

#gradient{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:10000px;
	background-color:rgba(0, 0, 0, 0.7);
	display:none;
}

#popup{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	text-align:center;
	display:none;
}

#popup > div{
	display:inline-block;
	max-width:700px;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
	background-color:#2C3E50;
	text-align:left;
}

#popup > div > .image{
	line-height:0px;
}

#popup > div > .image > img{
	max-width:100%;
}

#popup > div > .content{
	position:relative;
	padding:20px;
}

#popup > div > .content > h4{
	font-family:'Titillium Web';
	font-weight:600;
	font-size:18px;
	line-height:18px;
	color:#36D7B7;
	padding-bottom:4px;
	text-transform:uppercase;
}

#popup > div > .content > .date{
	display:block;
	font-family:'Titillium Web';
	font-weight:400;
	font-size:16px;
	line-height:16px;
	color:#ffffff;
	padding-bottom:12px;
}

#popup > div > .content > p{
	font-family:'Titillium Web';
	font-weight:400;
	font-size:14px;
	line-height:18px;
	color:#ffffff;
}

#popup > div > .content > p > a{
	color:#36D7B7;
	text-decoration:none;
}

#popup > div > .content > a{
	position:absolute;
	top:17px;
	right:15px;
}