/*
Theme Name: Your Drop Mobile
Theme URI: http://www.webidea.pl
Description: 
Author: Piotr Data / Tomasz Błokowski / Webidea Advance
Version: 1.0
License: 
License URI: 
Tags: 
*/

@import url( 'http://fonts.googleapis.com/css?family=Amatic+SC:700|Signika:400,300,700' );

* > :first-child{
	margin-top: 0;
}

* > :last-child{
	margin-bottom: 0;
}

::-moz-selection {
    background: none repeat scroll 0 0 rgba(153,193,60,.99);
    color: #fff;
    text-shadow: none;
}

::-webkit-selection {
    background: none repeat scroll 0 0 rgba(153,193,60,.99);
    color: #fff;
    text-shadow: none;
}

::selection {
    background: none repeat scroll 0 0 rgba(153,193,60,.99);
    color: #fff;
    text-shadow: none;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{
	opacity: 1;
	color: #fff;
}

input::-moz-placeholder, textarea::-moz-placeholder{
	opacity: 1;
	color: #fff;
}

input:-ms-placeholder, textarea:-ms-placeholder{
	opacity: 1;
	color: #fff;
}

html{
	background: #f0667a url('images/bkg.gif') repeat;
}

body{
	font-size: 14px;
	line-height: 2;
	font-weight: 300;
	font-family: 'Signika', sans-serif;
	color: #fff;	
	background-attachment: fixed;
}

a{
	text-decoration: none;
	outline: none !important;
}

h1, h2, h3, h4{
	font-size: 32px;
	line-height: 1;
	color: #fff;
	font-family: 'Amatic SC', cursive;
	font-weight: 700;	
}

input, textarea, select{
	font-family: 'Amatic SC', cursive;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	outline: none;
	color: #fff;
	font-size: 24px;
	line-height: 30px;
	box-shadow: none;
	border-radius: 0;
	text-transform: uppercase;
	border: none;
	background: transparent url('images/input-bkg.png') repeat 0 0;
	padding: 0;
	display: block;
}

input[type="text"], input[type="email"]{
	width: 100%;	
} 

textarea{
	resize: none;
	height: 120px;
	width: 100%;
}

input[type="submit"]{
	width: 270px;
	height: 60px;
	text-indent: 1000px;
	overflow: hidden;
	background: transparent url('images/buttons-sprite.png') no-repeat 0 -300px;
	padding: 0;
	margin: 0 auto;
}

form label{
	display: block;
	position: relative;
}

form .wpcf7-not-valid{
	border-color: #9ac23b;
}

form .wpcf7-not-valid-tip{
	/*position: absolute;
	top: 0;
	right: 100%;	*/
	font-size: 12px;
	background: #D41C61;
	width: 195px;
	padding: 7px;
	margin-right: 15px;
	line-height: 13px;
	min-height: 17px;
	box-sizing: border-box;
	-moz-binding: border-box;
	-webkit-box-sizing: border-box;
}

form .wpcf7-not-valid-tip:after{
	content: '';
	width: 10px;
	height: 31px;
	left: 100%;
	top: 0;
	position: absolute;
}

form .wpcf7-validation-errors{
	font-size: 12px;
	line-height: 13px;
	text-align: center;
	background: #D41C61;
	margin-top: 10px;
	padding: 7px;
}

form .wpcf7-mail-sent-ng{
	font-size: 12px;
	line-height: 13px;
	text-align: center;
	background: #9ac23b;
	margin-top: 10px;
	padding: 7px;	
}

form .submit{
	position: relative;
	height: 60px;
}

form .submit input[type="submit"]{
	position: absolute;
	left: 50%;
	margin-left: -135px;
	top: 0;
}

.screen-reader-response{
	display: none !important;
}

.ajax-loader{
	display: none !important;
}

.ratio-50-50:after{
	content: '';
	display: block;
	clear: both;
}

.ratio-50-50 > div.column{
	width: 50%;
	float: left;
}

.ratio-50-50 > div.column:nth-of-type(2n+1){
	clear: left;
}

.amatic{
	font-family: 'Amatic SC', cursive;
	font-weight: 700;
	font-size: 32px;
	line-height: 32px;
	display: inline-block;
	vertical-align: middle;
}

.main-container:before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 126px;
	height: 138px;
	background: transparent url('images/icon-bkg.png') no-repeat;
}

.main-container:after{
	content: '';
	display: block;
	position: absolute;
    right: 30px;
    top: 40px;
	width: 40px;
	height: 40px;
	background: transparent url('images/icons-sprite.png') no-repeat;
}

#page-service:after{
	background-position: 0 -40px;
}

#page-portfolio:after{
	background-position: 0 -80px;
}

#page-impressions:after{
	background-position: 0 -120px;
}

#page-contact-us:after{
	background-position: 0 -160px;
}

.page-content-wrapper{
	padding-top: 110px;	
}

.overflow{
	overflow: hidden;
}

.admin-bar .animation-wrapper{
	top: 32px;
}

.page-title{
	font-size: 50px;
	line-height: 1;
	color: #d41c61;
	font-family: 'Amatic SC', cursive;
	font-weight: 700;
	text-align: center;
}

.main-container{
	margin: 0 auto;
	transition: transform .5s;
	-webkit-transition: -webkit-transform .5s;	
}

.main-container.opened{
	transform: translateX(130px);
	-webkit-transform: translateX(130px);
}

.page-wrapper{
	padding-left: 5px;
	padding-right: 5px;
	max-width: 1000px;
	margin: 0 auto; 
}

.admin-bar .main-header{
	top: 32px;
} 

#site-title{
	position: absolute;
	top: 0;
	left: 0;
	background: transparent url('images/logo.png') no-repeat;
	width: 110px;
	height: 107px;
	margin: 0;
	z-index: 2;
}

#site-title a{
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#site-title a:before{
	content: '';
	display: block;
	height: 100%;
}

.main-menu{
	position: absolute;	
	top: 0;
	left: 0;
	height: 100%;
	width: 130px;	
	z-index: 1;
	padding-top: 110px;
	background: #f0667a;
	border-right: 1px solid #d41c61;
	transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	
	transition: transform .5s;
	-webkit-transition: -webkit-transform .5s;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box; 
}

.main-menu.opened{
	transform: translateX(0);
	-webkit-transform: translateX(0); 	
}

.main-menu:after{
	content: '';
	left: 0;
	top: 0;
	bottom: 0;
	width: 50px;
	position: absolute;
	background: #d41c61;
	z-index: -1;	
}

.main-menu h2{
	display: none;
}

.main-menu ul{
	margin: 0;
	padding: 0;
}

.main-menu li{
	border-bottom: 1px solid #e2416d;
	background: transparent url('images/main-menu-arrow.png') no-repeat left 50px top 50%;
	transition: background-position .3s;
	-webkit-transition: background-position .3s;
}

.main-menu li:hover, .main-menu li.current{
	background-position: 44px 50%;
}

.main-menu a{
	display: block;
	height: 50px;
	font-family: 'Amatic SC', cursive;
	color: #d41c61;
	font-size: 20px;
	line-height: 50px;
	padding-left: 55px;
	transition: color .5s;
	-webkit-transition: color .5s;
	white-space: nowrap;
	position: relative;
}

.main-menu a:hover, .main-menu .current-menu-item a{
	color: #fff;	
}

.main-menu a:before, .main-menu a:after{
	content: '';
	height: 100%;
	width: 50px;
	position: absolute;
	top: 0;
	left: 0;
	background: transparent url('images/main-menu-sprite.png') no-repeat;
	transition: opacity .5s, transform .3s;
	-webkit-transition: opacity .5s, -webkit-transform .3s;
}

.main-menu a:before{
	opacity: 1;
	transform: scale(1);	
	-webkit-transform: scale(1);
}

.main-menu a:after{
	opacity: 0;
	transform: scale(0);
	-webkit-transform: scale(0);
}

.main-menu a:hover:before, .main-menu .current-menu-item a:before{
	opacity: 0;
	transform: scale(0);
	-webkit-transform: scale(0);
}

.main-menu a:hover:after, .main-menu .current-menu-item a:after{
	opacity: 1;
	transform: scale(1);
	-webkit-transform: scale(1);
}

.main-menu li:nth-of-type(1) a:before{
	background-position: 0 0;
}

.main-menu li:nth-of-type(2) a:before{
	background-position: 0 -50px;
}

.main-menu li:nth-of-type(3) a:before{
	background-position: 0 -100px;
}

.main-menu li:nth-of-type(4) a:before{
	background-position: 0 -150px;
}

.main-menu li:nth-of-type(5) a:before{
	background-position: 0 -200px;
}

.main-menu li:nth-of-type(1) a:after{
	background-position: 0 -250px;
}

.main-menu li:nth-of-type(2) a:after{
	background-position: 0 -300px;
}

.main-menu li:nth-of-type(3) a:after{
	background-position: 0 -350px;
}

.main-menu li:nth-of-type(4) a:after{
	background-position: 0 -400px;
}

.main-menu li:nth-of-type(5) a:after{
	background-position: 0 -450px;
}

.trigger-button{
	background: transparent url('images/buttons-sprite.png') no-repeat;
	width: 270px;
	height: 60px;
	display: block;
	overflow: hidden;
}

.trigger-button:before{
	content: '';
	display: block;
	height: 100%;
}

.portfolio-button{
	background-position: 0 -500px;
	z-index: 3;	
}

.address{
	font-size: 48px;
	line-height: 1.0833;
	font-family: 'Amatic SC', cursive;
	margin-bottom: 60px;
}

.contact{
	font-size: 32px;
	line-height: 1.0833;
	font-family: 'Amatic SC', cursive;
	margin-bottom: 30px;
}

.member{
	font-size: 32px;
	line-height: 1.0833;
	font-family: 'Amatic SC', cursive;	
}

.member img{
	vertical-align: middle;
	margin-left: 15px;
}

.contact a{
	color: #fff;
}

.impressum a{
	color: #fff;
	font-size: 16px;
}

.contact-form .label{
	display: none;
}

.contact-form label{
	display: block;
	margin-bottom: 30px;
}

#map-container{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity .7s;
	-webkit-transition: opacity .7s;
}

#map-container.show{
	opacity: 1;
}

.gallery{
	max-width: 400px;
	position: relative;
	margin: 0 auto;
}

.gallery:after{
	content: '';
	clear: both;
	display: table;
}

.gallery-thumb{
	display: block;
	width: 48%;	
	float: left;
	position: relative;
	cursor: pointer;
	margin-left: 4%;
	margin-top: 4%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 10px;
	padding-bottom: 10%;
	background: #fff;
	border-radius: 10px;
}

.gallery-thumb:nth-of-type(2n+1){
	margin-left: 0;
}

.gallery-thumb:nth-of-type(1),
.gallery-thumb:nth-of-type(2){
	margin-top: 0;
}

.gallery-thumb img{
	display: block;
	width: 100%;
	height: auto;
}

.gallery-thumb .image{
	display: block;
	border-radius: 10px;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	position: relative;
}

.gallery-thumb .image:after{
	content: '';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(154, 194, 59, .6);
	opacity: 0;
	transition: opacity .3s;
	-webkit-transition: opacity .3s;
	position: absolute;
}

.gallery-thumb:hover .image:after{
	opacity: 1;
}

.gallery-thumb .caption{
	display: none;	
}

.portfolio{	
	position: relative;
	max-width: 420px;
	margin: 0 auto;
}

.portfolio .portfolio-list{
	position: relative;
	white-space: nowrap;
	font-size: 0;
	line-height: 0;
	margin: 0 auto;
	padding: 0;
	transform-origin: 0 50%;
	-webkit-transform-origin: 0 50%;
	width: 261px;
	height: 517px;
	overflow: hidden;
}

.portfolio .portfolio-item{
	list-style: none;
	display: block;
	width: 261px;
	height: 517px;
	font-size: 13px;
	line-height: 1.2307;
	white-space: normal;
	color: #777;
	background: transparent url('images/portfolio-bkg.png') no-repeat;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 20px;
	padding-top: 100px;
	vertical-align: top;
	position: absolute;
	top: 0;
	left: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.portfolio .portfolio-item.hide{	
	display: none;
}

.portfolio .portfolio-item.show{	
	display: block;
}

.portfolio .go-left, .portfolio .go-right{
	width: 42px;
	height: 42px;
	top: 349px;
	cursor: pointer;
	background: transparent url('images/portfolio-nav.png') no-repeat;
	position: absolute;
}

.portfolio .go-left{
	left: 0;
}

.portfolio .go-right{
	right: 0;
	background-position: -42px 0;
}

.portfolio-item h2{
	color: #99c13c;
	font-size: 28px;
	line-height: 28px;
	text-align: center;
	background: transparent url('images/porfolio-title.png') no-repeat 50% 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 90px;
	bottom: 430px;
	padding: 20px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.portfolio-item .icon{
	position: absolute;
	bottom: 40px;
	left: 0;
	right: 0;
	height: 125px;
	line-height: 125px;
	text-align: center;
}

.portfolio-item img{
	display: inline-block;
	vertical-align: middle;
}

.portfolio .categories{
	margin-bottom: 20px;
}

.portfolio .categories a{
	font-family: 'Amatic SC', cursive;
	font-size: 24px;
	line-height: 24px;
	color: #D41C61;
	transition: color .5s;
	-webkit-transition: color .5s;
	display: block;
}

.portfolio .categories a:hover, .portfolio .categories a.current{
	color: #fff;
}

@media screen and (max-width: 600px){
	.ratio-50-50 > div.column{
		width: auto;
		float: none;
	}
	
	.ratio-50-50 > div:nth-of-type(2n){
		margin-top: 20px;
		clear: left;
	}
}