html{width:100%; height:100%}

body{
	width:100%;
	height:100%;
	margin:0px;
	color:#444;
	cursor:default;
	background-image:url(assets/bg.jpg);
	font-size:16px;
	line-height:24px;
	font-family: 'Montserrat', sans-serif;
	
	/* disable select */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.row{display:flex; align-items:stretch}
.cell{display:flex; justify-content:center; flex-direction:column; box-sizing:border-box; padding:20px}
.cell img{vertical-align:middle}
.center{text-align:center}
.pd0{padding:0px}
.hide{display:none}
.color{color:#F33}

.menu{width:100%; height:100%}
.works{width:100%; height:100%; text-align:center}
.mobile{display:none}
.line{height:10px}

.footer{
	text-align:center;
	padding:10px;
	background:url(assets/footer.png);
	color:#FFF;
	font-size:14px;
	line-height:16px;
}

.menu_item{
	font-family: 'Sansita One', cursive;
	line-height:50px;
	font-size:50px;
	background-color:rgba(0,0,0,0);
	background-repeat:no-repeat;
	text-align:center;
	cursor:pointer;
}
.menu_item:hover:hover{
	text-shadow: 0px 15px 5px rgba(0,0,0,0.1);
	color:#000;
	background-color:rgba(0,0,0,.05);
}

.btn_works{
	background-image:url(assets/logo.png);
	background-position:right -150px center;
	padding:0px 170px 0px 20px;
}

.btn_contact{
	background-image:url(assets/logo.png);
	background-position:left -150px center;
	padding:0px 20px 0px 170px;
}

/* link */
a, .a{text-decoration:underline; cursor:pointer; color:#89c64f}
a:hover, .a:hover{text-decoration:none}

.works_title{
	font-family: 'Sansita One', cursive;
	color:#FFF;
	padding:20px;
	font-size:40px;
	text-align:center;
	font-weight:normal;
	background-color:#89c64f;
}

.works img{
	border-radius:10px;
	width:300px;
	display:block;
	margin-bottom:10px;
	
	/* box shadow */
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

.works a{
	color:#444;
	display:inline-block;
	padding:20px;
	border-radius:10px;
}
.works a:hover{
	color:#000;
	background-color:rgba(0,0,0,.05);
}

.btn{
	color:#FFF;
	text-decoration:none;
	padding:10px;
	border-radius:4px;
	display:inline-block;
	background-color:#89c64f;
	cursor:pointer;
	line-height:16px;
}
.btn:hover{opacity:0.8}

input[type="text"]{
	width:100%;
	background:#f9f9f9;
	border:#CCC 1px solid;
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
	padding:5px;
	color:#444;
	margin:0px;
	box-sizing:border-box;
	outline:none;
}
input[type="text"]:hover{border-color:#999}
input[type="text"]:focus{border-color:#444}

textarea{
	width:100%;
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
	background:#f9f9f9;
	border:#CCC 1px solid;
	resize: none;
	padding:5px;
	color:#444;
	margin:0px;
	overflow:auto;
	box-sizing:border-box;outline:none;
}
textarea:hover{border-color:#999}
textarea:focus{border-color:#444}

@media screen and (max-width: 800px){
	.mobile{display:table-row}
	.desktop{display:none}
	
	.btn_works{
		background-image:url(assets/logo.png);
		background-position:center bottom -150px;
		padding:20px 0px 170px 0px;
	}

	.btn_contact{
		background-image:url(assets/logo.png);
		background-position:center top -150px;
		padding:170px 0px 20px 0px;
	}
	
	.works a img{
		width:100%;
		max-width:512px;
	}
}

/* popup */
.popup{width:100%; height:100%; position:fixed; z-index:999997; overflow:auto; left:0px; top:0px; background-color:rgba(0,0,0,0.7); text-align:center}
.popup.popup_loader{background-color:rgba(255,255,255,0.7)}
.popup_close{float:right; font-size:30px; line-height:20px; font-family:Arial; color:#FFF; cursor:pointer; margin:-25px -3px 0px 0px}
.popup_close:hover{color:#999}
.popup_container{width:80%; min-width:290px; max-width:600px; margin:30px 5px 30px 5px; background-color:#FFF; border-radius:6px; display:inline-block; text-align:left; 
	box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.2)}
.popup_header{padding:10px 15px 10px 15px; background:#EEE; border-top-left-radius:6px; border-top-right-radius:6px; border-bottom:1px solid #CCC; font-size:18px; font-weight:bold}
.popup_footer{padding:15px; background:#EEE; border-bottom-left-radius:6px; border-bottom-right-radius:6px; border-top:1px solid #CCC}
.popup_content{padding:15px}
.popup_title{font-size:18px}
.popup_descr{color:#666; text-align:center}
.popup_hide_scroll_cms{overflow:hidden}


/* animation */
a, .popup_close, .menu_item, .btn, input, textarea{	
	-webkit-transition:0.1s linear; -moz-transition:0.1s linear; -o-transition:0.1s linear; -ms-transition:0.1s linear; transition:0.1s linear}