*, *:before, *:after {box-sizing: border-box;}
body {background: url("../images/background2.jpg") center 100px no-repeat; margin: 0;}
.container {width: 100%; position: relative;}

.clear:after {clear: both; content: ""; display: block;}



a, *:before, *:after, span{
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;    
}

img {max-width: 100%; height: auto; vertical-align: top;}

/*Typografie*/
h2 {font-size: 25px; color: #0c06f8;}
h3 {font-size: 20px; color: #dc2b19; text-decoration: underline;}
h5 {font-size: 18px; color: #dc2b19; margin-left: 21px;}


/*<HEADER>*/
header {height: 120px; background: #000;}
header h1 {text-indent: -5000px; overflow: hidden; position: absolute;}
.logo {width: 40%; height: 100%; float: left; text-align: center;}
.logo img {max-width: 100%; max-height: 100%;}
.primary {width: 60%; height: 100%; float: right;}

/*Navigace*/
nav {position: relative;}
nav ul {height: 100px; margin: 0; padding: 0; display: none; font-size: 20px;}
nav ul li {list-style: none; float: left; position: relative;}
nav ul li a {text-decoration: none; color:#fff; line-height: 100px;
             display:block; padding: 0 20px; font-family: Arial;}
nav ul li a:hover {color: #0c06f8;}

.current-menu-item > a {color: #fff !important;}


select {position: absolute; left: 50%; width: 150px; margin-left: -80px;
        top: 40px;}


/*<Section>*/
section {position: relative;}
.obsah {background: rgba(255, 255, 255, 0.5); width: auto; height: auto; margin: 20px; padding: 50px;}
.obsah {text-decoration: none; font-family: Arial; color: #000; font-weight: bold;}
.obsah span {background: #dc2b19; padding: 10px 20px; color: #fff; float: right; border-radius: 5px;}
.obsah span:hover {background: #000; color: #dc2b19;}

/*Kontakt*/

.obsah_kontakt {font-family: Arial; width: 500px; height: 250px; background: rgba(255, 255, 255, 0.8); margin: 10px auto 10px; padding: 10px 50px;}
.obsah_kontakt {font-size: 20px;}
.mapa {width: 600px; margin-left: auto; margin-right: auto;}


.fb_plugin { width: 300px; height: 400px; position: absolute;
            top: 0px; right: 100px;}


/*<Footer>*/
footer {width: 100%; background: #000; padding: 20px 40px; height: auto;}

.kontaktni_info {color: #fff; font-family: Arial;}
.kontaktni_info a {color: #0c06f8;}







/*Responsivní design*/

@media ( max-width: 1012px ) {
    .fb_plugin {position: absolute; left: 350px; top: 550px;}
     body {background: url("../images/background2.jpg") center 0 fixed no-repeat; margin: 0;}
}

@media ( max-width: 860px ) {
    .fb_plugin {position: absolute; left: 200px; top: 650px;}
    
}
@media ( max-width: 660px ) {
    .fb_plugin {position: absolute; left: 100px; top: 650px;}
      
}
@media ( max-width: 600px ) {
    .fb_plugin {position: absolute; left: 100px; top: 750px;}
      
}
@media ( max-width: 535px ) {
     .obsah_kontakt {font-size: 18px; width: 318px; padding: 2px 20px;}
      
}
@media ( max-width: 501px ) {
    .fb_plugin {position: absolute; left: 60px; top: 800px;}
      
}
@media ( max-width: 451px ) {
    .fb_plugin {position: absolute; left: 40px; top: 800px;}
      
}
@media ( max-width: 414px ) {
    .fb_plugin {position: absolute; left: 30px; top: 800px;}
      
}
@media ( max-width: 380px ) {
    .fb_plugin {position: absolute; left: 12px; top: 800px;}
      
}
@media ( max-width: 360px ) {
    .fb_plugin {position: absolute; left: 8px; top: 800px;}
      
}
@media ( max-width: 330px ) {
    .fb_plugin {position: absolute; left: 0px; top: 800px;}
      
}
@media (min-width: 1012px ){
    select {display: none;}
    nav ul {display: block;}
    .obsah {width: 500px;}
    
}