body {
	margin: 0px;
	padding: 0px;
	text-align: left;
	font-family: 'Open Sans', sans-serif;
	font-style: italic;
}

 
div.kontejner {
position: relative;
margin-left: auto;
margin-right: auto;
width: 70%;
} 


header {
position: relative;
float: left;
width: 100%;
background-color: #062f36;  
min-height: 100px;
text-align: center;
border-bottom: 12px solid #1d3f45;

} 

header img {vertical-align: middle; margin: 15px; }
header img.logo {margin-top: 20px; margin-left: 70px; margin-right: 70px;}
header a {color: #5ab1b4; text-transform: uppercase; margin-top: -30px; min-height: 50px; text-decoration: none;}


div.headline {
position: relative;
float: left;
min-height: 150px;
width: 100%;
border-bottom: 12px solid #139094;
background-color: #062f36;
}

div.headline p {
font-size: 28px;
text-transform: uppercase;
color: white;
font-weight: 800;
text-align: center;
width: 100%;
margin-top: 20px;
}

div.headline p span {font-size: 24px;}

img.sail {
margin-top: 20px;
margin-bottom: 15px;
height: 47px;
width: 129px;
}





div.photos {
position: relative;
float: left;
height: 330px;
width: 33.333%;
background-color: red;
border-bottom: 12px solid #139094;
}



 

div.background_box {
position: relative;
float: left;
width: 100%;
}


div.texty {float: left; position: relative; width: 100%; margin-bottom: 0px;}
p.sail {width: 100%; text-align: center;}


div.popis {
position: relative;
float: left;
width: 50%;
}


div.popisright {
position: relative;
float: left;
width: 48%;
margin-left: 2%;
}


div.popis p {
color: white;
font-size: 14px;
text-transform: uppercase;
text-shadow: black 0px 2px;
}


div.popisright ul li {

font-size: 16px;
list-style: none;
background: url(/skola-sub/images/point.png) left center no-repeat; 
    padding-left: 35px;
font-weight: 800;
color: white;
line-height: 18px;
min-height: 23px;
margin-bottom: 20px;
text-shadow: black 0px 2px;
}
div.popisright ul li span {font-weight: 600; font-size: 14px;}














div.terminy {
position: relative;
margin-left: auto;
margin-right: auto;
width: 598px;
max-width: 100%;
min-height: 380px;
background: rgba(2, 37, 43, 0.75);
border-radius: 10px;
border: solid #193e44 2px; 
}




div.terminy h1 {
position: relative;
float: left;
color: white;
font-weight: 800;
font-size: 36px;
width: 100%;
margin-top: 10px;
text-align: center;
margin-bottom: 0%;
}


div.inside {
position: relative;
float: left;
margin-bottom: 1%;
width: 90%;
margin-top: 1%;
margin-left: 5%;
margin-right: 5%;
border: solid #193e44 1px;
border-radius: 10px;
opacity: 1;
overflow: hidden;
}



div.date {
position: relative;
float: left;
height: 38px;
width: 73%;
background-color: #04272c;
border-bottom: solid black 1px;
border-top: solid #184049 1px;
  -webkit-box-shadow: 12px 5px 10px 0px black;
          box-shadow: 12px 5px 10px 0px black;

overflow: hidden;
}

div.date p {
position: relative;
float: left;
font-weight: 800;
margin: 0px;
font-size: 18px;
color: #f1f096;
line-height: 38px;
margin-left: 8%;
}

div.date p span {font-size: 14px; font-weight: 600;}

div.rezervace {
width: 27%;
background: rgba(2, 37, 43, 0.1);
}



a.button {
position: relative;
float: left;
height: 75%;
width: 82%;
border: solid white 1px;
margin-top: 3%;
margin-left: 12%;
border-radius: 2px;
}

a.button:hover p {
color: #f1f096;
transition: color 0.3s;
}

a.button:hover {
background: rgba(2, 37, 43, 1);
}

a.button p{
position: relative;
float: left;
font-weight: 800;
font-style: normal;
color: white;
font-size: 14px;
margin-top: -4px;
margin-left: 8%;
}



a.button img {
position: relative;
float: left;
height: 14px;
width: 14px;
margin-left: 6%;
margin-top: 7px;
}



footer {
position: relative;
float: left;
width: 100%;
text-align: center;
}




footer img.logobottom {margin-left: auto; margin-right: auto; position: relative; margin-top: 60px;}



p.links {
position: relative;
float: left;
color: white;
width: 100%;
font-size: 11px;
text-align: center;
margin-bottom: 5px;
font-weight: 800;
}

p.links a {
color: white;
text-decoration: none;
}

p.links a:hover {
color: #babbbb;
transition: color 0.3s;
}






a.social {
position: relative;
float: left;
background-image: url(/skola-sub/images/mail.png);
background-size: 100%;
background-position: center;
height: 37px;
width: 37px;
margin-left: 5px;
margin-right:5px;
}

a.social:hover {opacity: 0.7;}

div.social {float: left; position: relative; width: 100%;}

p.socialmedia {
margin-left: auto;
margin-right: auto;
width: 141px;
margin-top: 16px;
height: 37px;
position: relative;
}



/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 1100px) {
div.kontejner {width: 90%; margin-left: 5%;margin-right: 5%;}
div.four {display: none;}
div.photos {width: 33.33%;}
	
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 950px) {
div.kontejner {width: 96%; margin-left: 2%;margin-right: 2%;}
img.pctr {display: none;}
header a {float: left; position: relative; width: 100%; margin-top: 5px; margin-bottom: 0px; }
header img.logo {margin-top: 0px;}	
div.four {display: none;}
div.three {display: none;}
div.two {display: none;}
div.photos {width: 100%;}

a.button p{
position: relative;
float: left;
font-weight: 600;
font-style: normal;
color: white;
font-size: 9px;
margin-top: -4px;
margin-left: 8%;
}

div.popis {width: 80%; margin-left: 10%; margin-bottom: 50px;}
div.popisright {width: 100%;}
	
}
}