/* Template Name: Servis Mrnjavac
 * Author: Viktor 
 * Author URI: https://viktor.com.hr 
 * Description: Custom theme Version: 1.0 */

body, html, div, p, ul, ol, li, h1, h2, h3, h4 {
margin:0px;
padding:0;
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}

body {font-family:'Open Sans', sans-serif;}

/*-------------------*/

.header {
	height:250px;
	overflow:hidden
}

.header h1 {
	float:left;
	height:200px;
	width:25%;
	margin:25px 0 25px 25px;
	background:url(img/logo-min.png) left center no-repeat;
	background-size:contain;
	text-indent:-9999px
}

.header .menu {
	list-style-type:none;
	float:left;
	width:50%;
	
}
.header .menu li {
	height:250px; width:33%;
	display:inline-block;
	text-align:center;
	position:relative;
	
}
.header .menu li a {
	text-decoration:none;
	font-size:30px;
	line-height:30px;
	position:absolute;
	top:0;
	left:0; 
	bottom:0;
	right:0;
	padding-top:106px;
	z-index:2;
	transition:300ms ease-in-out;
	
	
}

.header .menu li a:before {
	content:"";
	display:block;
	position:absolute;
	z-index:-1;
	width:130px;
	height:130px;
	border-radius:50%;
	background:#666;
	top:100%;
	left:50%;
	transition:300ms ease-in-out;
	transform:translate(-50%, -40%)
}

.header .menu li:hover a:before {
	transform:translate(-50%, -148%)
}

.header .menu li:nth-child(1) a {
	color:#598527;
}


.header .menu li:nth-child(2) a {
	color:#0084ff;
}


.header .menu li:nth-child(3) a {
	color:#f26522;
}

.header .menu li:hover a {color:white}

.header .menu li:nth-child(1) a:before {
	background:#598527;
}
.header .menu li:nth-child(2) a:before {
	background:#0084ff;
}
.header .menu li:nth-child(3) a:before {
	background:#f26522;
}

@media only screen and (max-width: 960px) {
	.header {height:450px;}
	.header h1 {
		width:100%;
		clear:both;
		float:initial;
		margin: 25px 25px 25px 25px;
		background-size:80% auto;
	}
	.header .menu {
    list-style-type: none;
    float: initial;
		clear:both;
    width: 100%;
		margin-top:-50px;
}
	.header .menu li {width:33.3%}
}

@media only screen and (max-width: 400px) { 
	.header .menu li a {font-size:18px}
}