@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700,900&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600,900&subset=latin,latin-ext);

html{font-size:62.5%;height:100%;width:100%}
body{font-family:'Lato', sans-serif;font-size:1.4rem;font-weight:normal;font-style:normal;color:#0f3556;display:table;background:#fff;height:100%;width:100%}

header {
	text-align: center;
	height: 40%;
}
header a.logo {
	padding-top: 40px;
    display: block;	
}
header a.logo:hover {
	text-decoration: none;
}
    

header a.logo span.logo__text {
    font-family: 'Raleway', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    margin-top: 2px;
    margin-left: 26px;
    white-space: nowrap;
    letter-spacing: .5mm;
    color: #0f3556;
    display: inline-block;
}

a.go-to-page {
    font-size: 1.4rem;
    font-weight: 900;
    display: inline;
    cursor: pointer;
    text-transform: uppercase;
    color: #0f3556;
    border-radius: 30px;
    background: #f4d025;
    padding: 12px 36px;
    margin-bottom: 10px;

}
a.go-to-page:hover {
   	text-decoration: none;
   	background: #0f3556;
   	color: #f4d025;
}


.blugaria {
	background-color: #e5f0f7;
	width:50%;
	height: 60%;
	max-height: 60%;
	left:0px;
	position: absolute;
	text-align: center;
}

.blugaria img {
	float: right;
	margin-top: -25%;
	box-shadow: 0px 15px 30px #C2D0D8;
}

.drzwirzyno {
	background-color: #ebf5fa;
	width:50%;
	height: 60%;
	max-height: 60%;
	float: left;
	right: 0px;
	position: absolute;
	text-align: center;
}

.drzwirzyno img {
	float: left;
	margin-top: -25%;
	box-shadow: 0px 15px 30px #C2D0D8;
}

.name {
	width: 601px;
	text-align: center;
	float: right;
	margin-top: -10px;
}

.name h2 {
    font-weight: 700;
    color: #0f3556;
    font-family: 'Playfair Display', sans-serif;
    font-size: 3.5rem;
    margin-top: 30px;
}
.name h3 {
	font-size: 1.7rem;
    font-weight: 300;
    color: #0f3556;
    font-family: 'Raleway', sans-serif;
    margin: 0;
}

.drzwirzyno .name {
	float: left;
}





@media screen and ( max-width: 1220px) {
	.name {
		width: 100%;
	}	
	
}

@media ( max-height: 700px ) and  ( min-height: 501px ) {
	.blugaria img,.drzwirzyno img {
	    margin-top: -18%;
	    width: 500px;
	}
	.name {
		width: 500px;
	}
	
}

@media ( max-height: 500px ) and  ( min-height: 401px ) {
	.blugaria img,.drzwirzyno img {
	    margin-top: -18%;
	    width: 100%;
	}
	.name {
		width: 100%;
	}
	
}

@media ( max-height: 400px ) {
	header {
	    height: 150px;
	}
	header a.logo {
    	padding-top: 10px;
    }
	.blugaria,.drzwirzyno {
		position: static;
    	float: left;
    	height: auto;
    	padding-bottom: 20px;
	}

}


/* -------------------------------------------------------------------------------------------------------- */
@media (max-width: 421px) and (max-width: 991px) {


	header {
	    height: 30%;
	    max-height: 30%;
	}
	.drzwirzyno, .blugaria {
		height: 60%;
		max-height: 60%;
	}

}

@media (max-width: 840px) and (min-width: 601px) {
	header {
	    height: 28%;
	    max-height: 28%;
	}
	.drzwirzyno, .blugaria {
		height: 72%;
		max-height: 72%;
	}	

}

@media (max-width: 421px) and (max-width: 480px) {
	header {
	    height: 22%;
	    max-height: 22%;
	}
	.drzwirzyno, .blugaria {
		height: 78%;
		max-height: 78%;
	}	

}

/* -------------------------------------------------------------------------------------------------------- */
@media (max-width: 420px) {

	header {
	    height: 90px;
	}
	header a.logo {
    	padding-top: 10px;
    }

	.drzwirzyno, .blugaria {
		float: left;
		width: 100%;
		position: static;
		padding-bottom: 20px;
	}
	.drzwirzyno img, .blugaria img {
		margin-top: 0;
		width: 100%;
		float: left;
	}
	.name {
		width: 100%;
		float: left;
	}


}