@charset "utf-8";
* {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {background: #fff;font-family: sans-serif;}
.wrap {
    margin: 0 auto;
	padding: 0 20px;
	width: 100%;
}

h1 {
	font-size:24px;
	color: #1aa6e2;
	padding: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #e0f3ff;
	text-transform: uppercase;
    text-align: center;
}

header {padding: 10px 0;}

.logo {
	width: 100px;
	height: 87px;
	margin: 0 auto;	
	-webkit-transition: ease all .2s;
	-moz-transition: ease all .2s;
	-o-transition:  ease all .2s;
	transition:  ease all .2s;
	display: block;
	background-image: url('../img/4IT_logo.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.9;
	cursor: pointer;
}

.logo:hover {
	opacity: 1;
	-webkit-filter: drop-shadow(0px 1px 1px #009de0); /* Safari */
    filter: drop-shadow(0px 1px 1px #009cdf);
}

header.sub-page .logo {
	margin: inherit;
	height:100px;
	width: 130px;
	display: inline-block;
	background-position: center;
}

nav {    
    float: right;
    display: none;
}

header.sub-page nav {display: inline-block;}

nav ul{}
nav ul li {
    display: inline-block;
    padding: 10px;
    text-transform: uppercase;
    font-style: italic;
    border: 2px solid #1aa6e2;
    color: #1aa7e3;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px !important;
    -webkit-transition: ease all .2s;
    -moz-transition: ease all .2s;
    -o-transition:  ease all .2s;
    transition:  ease all .2s;
    margin: 0 0 0 4px;
    position: absolute;
    top: 10px;
    right: 10px;
}

.nav-kontakt {
	top:58px;
}

nav ul li:hover {
	background: #1f5070;
	color: #fff;
}
nav ul li.active {
    background: rgba(31, 80, 112, 0.1);
    color: #1f4f70;
    text-shadow: 0 0 2px #fff;
}

main {}

#home {display:none;white-space: nowrap;}
.w50 {
	width: 100%;
	display: block;
}
.t-left,
.t-right {text-align:center;}

.ponuka, .kontakt {
	width: 100%;
	height: 180px;
	white-space: nowrap;
	display: inline-block;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
	cursor: pointer;
	-webkit-transition: ease all .2s;
	-moz-transition: ease all .2s;
	-o-transition:  ease all .2s;
	transition:  ease all .2s;
	position: relative;
}

.ponuka {background-image: url('../img/ponuka-big.png');}
.kontakt {background-image: url('../img/kontakt-big.png');}

.ponuka:hover, .kontakt:hover{
	-webkit-filter: drop-shadow(0px 18px 6px #1f5070); /* Safari */
    filter: drop-shadow(0px 18px 6px #1f5070);
}

.ponuka-popis-box, .kontakt-popis-box {
  	height: 40px;
  	width:50%;
  	color: white;
  	background: #1f5070;
  	overflow:visible;
  	background-clip: content-box;
  	position: absolute;
  	top: 60px;
  	right: 68px;
  	border-bottom-left-radius: 14px;
}
.ponuka-popis-box:before, .kontakt-popis-box:before {
  	border-width: 40px 0 0 10px;
	right: -10px;
  	content: "";
  	position: absolute;
  	top:0;  	
	width: 0;
  	height: 0;
  	border-style: solid;
  	
  	border-color: transparent transparent transparent #1f5070;
}

.ponuka:hover .ponuka-popis-box, 
.kontakt:hover .kontakt-popis-box {background: #063c60;}
.ponuka:hover .ponuka-popis-box:before, 
.kontakt:hover .kontakt-popis-box:before {border-color: transparent transparent transparent #063c60;}

.ponuka-popis-box h2, .kontakt-popis-box h2 {
	font-size: 14px;
	line-height: 40px;
	text-align: right;
	padding-right: 10px;
	font-weight: bold;	
}

#ponuka {}
#kontakt {
	white-space: nowrap;
}

#ponuka,
#kontakt {
	display:none;
}

#home.visible,
#ponuka.visible,
#kontakt.visible {
	display:block;
}


.kontakt-area {
	display: block;
	margin-bottom:20px;
	width: 100%;
	text-align: center;
	vertical-align: top;
	border: 1px solid #f3f3f3;
	padding: 20px;
	min-height: 371px;
	padding-top: 60px;
	white-space: nowrap;
	border-radius: 4px;
}
.kontakt-area h1 {
    border: none;
    padding: 0;
}

.kontakt-area h1:before {
	display: block;
	content: "";
	background: transparent  url('../img/4IT_logo.png') no-repeat center;
	width: 100%;
	height: 64px;
	background-size: contain;
	margin-bottom: 10px;
}

.kontakt-area span {display: block;padding: 4px;line-height: 16px;font-size: 14px;color: #616161;}
.kontakt-area .pobocka {color: #009cdf;}
.kontakt-area span:before {font-family: FontAwesome;padding-right:6px;}
.kontakt-area .adresa:before { content: "\f041";}
.kontakt-area .mobil:before {content: "\f095";}
.kontakt-area .mail:before {content: "\f003";}
.kontakt-area .mail a {color: #063c60;text-decoration: none;}

.napiste-nam {text-align: center;padding-top: 20px;}
.napiste-nam h3 {font-weight: bold;padding:6px 0; color: #1f5070;}
.pair {width:100%; display: block;padding: 6px 0;}
.label {font-size: 12px;padding: 2px;color: #1aa7e3;}
.value {}
.value input {width: 90%; padding: 6px;text-align:center;border-radius:2px; border: 1px solid silver;}


#kontakt input[type=email] {}
#kontakt input[type=text] {}
#kontakt input[type=file] {}
#kontakt textarea {width: 90%;border-radius:2px; border: 1px solid silver;}
#kontakt input[type=submit] {
	text-transform: uppercase;
	padding: 6px 12px; 
	font-size: 12px; 
	background: #fff; 
	border: 2px solid #1aa7e3;
	color: #1aa7a3;
	font-style: italic;
	border-radius: 4px;
	cursor: pointer;
	-webkit-transition: ease all .2s;
    -moz-transition: ease all .2s;
    -o-transition:  ease all .2s;
    transition:  ease all .2s;
}

#kontakt input[type=submit]:hover {
	background: #1f5070;
	color: #fff;
}

.sluzba-box {
	display: inline-block;
	width: 98%;
	white-space: nowrap;
	margin: 1%;
	overflow: hidden;
	position: relative;
	padding: 10px;
	border: 1px solid #f3f3f3;
	border-radius: 4px;
	padding: 20px;
}

.sluzba-box:nth-child(3n+3) {
	/*margin: 1%;*/
}

.sluzba-box .ikona,
.sluzba-box .nazov,
.sluzba-box .popis{
	display: block;
	text-align: center;
}

.sluzba-box .ikona{
    height: 100px;
    width: 100px;
    margin: 0 auto;
    border: 1px solid #d6d6d6;
    border-radius: 82px;
}

.ikt:before,
.sla:before,
.pr:before,
.oas:before,
.oc:before,
.ub:before {
	font-family: FontAwesome;
	font-size: 40px;
	color: #1aa7e3;
	position: relative;
	top: 30px;
}

.ikt:before {content: "\f085";}
.sla:before {content: "\f1b3";}
.pr:before {content: "\f201";}
.oas:before {content: "\f2b5";}
.oc:before {content: "\f291";}
.ub:before {content: "\f236";}

.sluzba-box .nazov{
    text-transform: uppercase;
    padding: 20px;
    color: #1aa6e2;
}
.sluzba-box .popis{
    font-size: 13px;
    color: #616161;
    min-height: 42px;
}

footer {}
.signature {
    text-align: center;
    margin-top: 50px;
    color: #8c8c8c;
    font-size: 12px;
    border-top: 1px solid #f3f3f3;
    padding: 10px 0;
}
.signature span {}

@media screen and (min-width: 700px) {
	.wrap {
		max-width: 700px;		
	}

	.logo {
		width: 320px;
		height: 187px;
		background-position: 76px 0;
	}

	.ponuka, .kontakt {
		width: 510px;
		height: 514px;
	}

	.ponuka-popis-box, .kontakt-popis-box {
		height: 60px;
		top: 300px;
		right: 23px;
	}

	.ponuka-popis-box h2, .kontakt-popis-box h2 {
		font-size: 20px;
		line-height: 60px;
	}

	.ponuka-popis-box:before, .kontakt-popis-box:before {
  		border-width: 60px 0 0 16px;
		right: -16px;
	}

	.sluzba-box {	
		width: 47%;
	}
	.kontakt-area {
		display: inline-block;
		margin-bottom:20px;	
		width: 50%;
	}

	nav ul li {
		position: relative;
    	top: inherit;
    	right: inherit;
	}
	.nav-kontakt {
		top:inherit;
	}

}

@media screen and (min-width: 980px) {
	.wrap {
		max-width: 980px;
		padding: 0;
	}
	
	.w50 {
		width: 50%;
		display: inline-block;		
	}
	.t-left {text-align:left;}
	.t-right {text-align:right;}
	
	.sluzba-box {		
		width: 32.42%;
		margin: 1% 0;
	}

	.value input, 
	#kontakt textarea {width: 60%;}
}

@media screen and (min-width: 1080px) {
	.wrap {
		max-width: 1080px;		
	}	
}

@media screen and (min-width: 1200px) {
	.wrap {
		max-width: 1200px;		
	}
}