@font-face {
    font-family: pm;
    src: url(../font/cambria.woff);
}

* {margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
body {font-family: 'PT Sans', sans-serif; text-align: center;}
input, textarea, button {-webkit-appearance: none;-moz-appearance: none;appearance: none; border-radius: 0;}
.logo {display: block; width: 300px; height: auto; margin: 50px auto;}
a {text-decoration: none; color: #000;}
.clr {clear: both;}

.box h1 {text-transform: uppercase;}
.box h1 span {color: #00AEEF;}

.box_deti {display: block; position: relative; float: left; width: calc(100%); height: calc(100vw); cursor: pointer; -webkit-transition: all 360ms ease-out; -moz-transition: all 360ms ease-out; -o-transition: all 360ms ease-out; transition: all 360ms ease-out;}
.box_deti img {width: 100%; max-width: 100%; height: auto; object-fit: cover;}
.box_deti_in {opacity: 1; position: absolute; top: 0; left: 0; width: calc(100%); height: calc(100vw); line-height: calc(100vw); background: rgba(255,255,255, 0.7); cursor: pointer; -webkit-transition: all 360ms ease-out; -moz-transition: all 360ms ease-out; -o-transition: all 360ms ease-out; transition: all 360ms ease-out; font-weight: 800; color: #fff;}
.box_deti:hover .box_deti_in {opacity: 1;background: rgb(167,169,172); background: linear-gradient(193deg, rgba(167,169,172,1) 0%, rgba(167,169,172,0.49920637200192575) 100%);}

.nadpis {padding: 0 50px 50px 50px; font-size: 1.6em;}


#slider {display: block; width: calc(100vw); height: calc(100vw/16*9); background: url(../img/macbook.png) center center; background-size: cover;}
#iframe {display: block; width: calc(100vw*0.54); height: calc(100vw*0.54/16*9); background-color: #00AEEF; margin-left: calc(100vw*0.2);}

#kontakt {padding: 50px;}

#patka {padding: 50px;}

h2 {margin-bottom: 20px; color: #00AEEF;}
h3 {margin-bottom: 10px;}

.projekt {display: block; width: calc(100%); height: calc(100vh); position: fixed; top: 0; left: 0; overflow: hidden; background: rgb(167,169,172); background: linear-gradient(193deg, rgba(167,169,172,1) 0%, rgba(167,169,172,0.49920637200192575) 100%); }
.projekt .scroller {display: block; position: relative; width: calc(90vw); height: calc(90vh); margin: auto; margin-top: calc(5vh); background: #fff; padding: 20px; overflow: hidden;}
.scroller h1 {color: #000; margin: 0 0 50px 0; font-size: 1.9em !important;}
.scroller a {color: #00AEEF;}
.scroller p {margin: 30px 0;}
.scroller ul {margin-bottom: 20px;}
.scroller li {margin-bottom: 5px; list-style-type: 0;}
.scroller img {display: block; width: 100%; max-width: 100%; height: auto; clear: both;}
.close {display: block; position: absolute; top: 0; right: 0; height: 50px; width: 50px; color: transparent; line-height: 50px; background: #00AEEF; cursor: pointer;}

#box_formular {padding: 50px;}
#box_formular h1 {padding: 0 0 10px 0; margin: 0 0 10px 0;}
#box_formular form {font-family: 'Source Sans Pro', sans-serif;}
#box_formular input {width: 100%; height: 50px; line-height: 50px; font-size: 1em; }
#box_formular input[type="text"] {margin-bottom: 10px; padding: 0 10px; border: #C0C0C0 1px solid; -webkit-transition: all 500ms; transition: all 500ms; transition-timing-function: ease-in-out;}
#box_formular textarea {width: 100%; height: 150px; margin-bottom: 10px; padding: 10px; font-family: 'Source Sans Pro', sans-serif; font-size: 1em; border: #C0C0C0 1px solid; -webkit-transition: all 500ms; transition: all 500ms; transition-timing-function: ease-in-out;}
#box_formular input[type="text"]:hover, #box_formular textarea:hover {border: #000 1px solid;}
#box_formular input[type="button"] {height: 50px; background: rgba(0,174,239, 0.6); text-transform: uppercase; border: 0; cursor: pointer; -webkit-transition: all 500ms; transition: all 500ms; transition-timing-function: ease-in-out;  color: #000 !important;}
#box_formular input[type="button"]:hover {background: rgba(0,174,239, 1);}
#box_formular label {display: none;}

#zprava {display: none; opacity: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; color: #000; z-index: 16000; cursor: pointer; text-align: center; padding: 50px;}

#box_mapa {position: relative;}
#box_mapa .text {padding: 50px 50px 10px 50px; text-align: center;}
#box_mapa .text h2 {font-size: 1.6em; letter-spacing: 3px; border-bottom: #00AEEF 1px solid; padding: 0 0 10px 0; margin: 0 0 10px 0; }
#box_mapa .text p {line-height: 30px;}
#box_mapa .text p a {color: #00AEEF;}
#box_mapa .text .socialka {margin: 10px 0 0 0;}
#box_mapa #map, #map iframe {display: block; width: 100%; height: 100vh; float: left; padding: 150px 50px 50px 100px; margin: 0 0 50px 0;}

@media screen and (min-width: 1000px) {
.box_deti {width: calc(25%); height: calc(25vw); overflow: hidden;}
.box_deti_in {width: calc(25vw); height: calc(25vw); line-height: calc(25vw);}
.box_deti:hover .box_deti_in {opacity: 1;background: rgb(167,169,172); background: linear-gradient(193deg, rgba(167,169,172, 1) 0%, rgba(167,169,172, 0.49920637200192575) 100%);}
.box_deti img {width: 100%; max-width: 100%; height: calc(25vw); object-fit: cover;}

.projekt .scroller {width: calc(80vw); height: calc(80vh); margin: auto; margin-top: calc(10vh); background: #fff; padding: 50px; overflow: hidden;}
.scroller h1 {font-size: 5em;}
.scroller p {margin: 100px 0;}
.close {height: 75px; width: 75px;}

 #box_formular {padding: 0;}
 #box_formular h1 {font-size: 2em; margin: 50px 0 50px 100px; border: 0;}
 #box_formular form {padding: 0 100px 100px 100px; font-family: 'Source Sans Pro', sans-serif;}
 #box_formular input {width: 100%; height: 75px; line-height: 75px; font-size: 1.4em;}
 #box_formular input[type="text"] {margin-bottom: 25px; padding: 0 25px;}
 #box_formular textarea {width: 100%; height: 250px; margin-bottom: 25px; padding: 25px; font-family: 'Source Sans Pro', sans-serif; font-size: 1.4em;}
 #box_formular input[type="button"] {height: 100px; text-transform: uppercase; border: 0; cursor: pointer; opacity: 0.85; -webkit-transition: all 500ms; transition: all 500ms; transition-timing-function: ease-in-out;}
 #box_formular label {display: none;}
 
 #box_mapa {display: block; width: 100%; height: 700px; position: relative; padding: 100px 0 0 0; clear: both;}
 #box_mapa #map, #map iframe {display: block; width: 100%; height: 600px; float: left; padding: 150px 50px 50px 100px;}
 #box_mapa .text {display: block; position: absolute; top: 200px; right: 100px; width: 600px; height: 600px; float: left; text-align: left; background: #82CBAE; color: #000; padding: 50px;}
 #box_mapa .text h2 {font-size: 3em; font-weight: 400; letter-spacing: 4px; margin: 0 0 50px 0; color: #fff; border: 0;}
 #box_mapa .text h2 span {font-weight: 200;}
 #box_mapa .text p {margin-bottom: 25px; font-size: 2em; font-weight: 200;}
 #box_mapa .text p a {color: #000; -webkit-transition: all 500ms; transition: all 500ms; transition-timing-function: ease-in-out;}
 #box_mapa .text p a:hover {color: #fff;}
 #box_mapa .socialka {display: block; position: absolute; bottom: 50px; left: 50px;}
 #box_mapa .socialka a {display: block; width: 50px; height: 50px; float: left; margin: 0 25px 0 0; background: #80CAAC; -webkit-transition: all 500ms; transition: all 500ms; transition-timing-function: ease-in-out;}
 #box_mapa .socialka a:hover {background: #fff;}

}

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:20000;
	
	 background: rgb(255,255,255, 1); 
}

.loader {margin-top: 30vh}

#dp {margin: 20px 0 0 0;}
.dp {color: rgba(16,255,0, 1);}