/* cmsms stylesheet: soshranice-2025 modified: čtvrtek 4. září 2025 11:49:52 */
/* 
1) Písmo a body
2) Hlavička stránky
3) Obsah stránky
4) Patička stránky
5) Odkazy stránky
6) Nadpisy stránky
7) Horní menu
8) Pomocné prvky
9) Cookies blok
10) Formulář přihlášení
11) Přizpůsobení rozlišení
*/

/* --------   1) písmo a body   --------   */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap&subset=latin-ext');
@import url("../../default_new/fonts/font-awesome.min.css");

body {
font-family:'Open Sans','Calibri',Arial,sans-serif; margin-left: 0px;
width: 100%;float: left; font-size: 19px; margin-top: 0px;
}



/* --------   2) hlavička stránky   --------   */
header{
height: 90px;
width: 100%;
float: left;
z-index: 999;
position: fixed;
}
.headow{
width: 100%;
height: 85px;
float: left;
box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.2);
}
.logo{
width: 320px;
height: 70px;
float: left;
margin-left: 20px;
}
.brand {
float: left;
width: 80px;
height: 70px;
}
.brand img{
height: 60px; 
margin-top: 5px;
}
.logtex{
width: 200px; 
height: 70px; 
float: left; 
margin: 0px 0px 0px 0px;
}
.lttitle{
margin: 10px 0px 20px 0px;
text-align: center; 
color: #312783; 
font-size: 14px; 
line-height: 1.7;
}
.menubox{
width: 100%;
height: 70px;
float: right;
background: #fff;
}
.menu-top{
width: 100%;
height: 15px;
float: left;
background: #F3EAFF;
font-size: 13px;
}
.menu-top-center{
width: 670px;
height: 15px;
float: none;
margin: auto;
}
.menu-ikona{
width: 80px;
height: 15px;
float: left;
margin-right: 10px;
}
.menu-ikona-text{
margin-top: 7px;
margin-left: 5px;
float: right;
}
.menu-ikona img{
width: 15px;
height: 15px;
margin-top: 5px;
}
.menu-ikona-2{
float: right;
width: 130px;
height: 15px;
font-size: 12px;
}
.menu-ikona-2-text{
font-size: 12px;
float: right;
width: 100px;
}
.menu-ikona-2 img{
width: 15px;
height: 15px;
}
.layout {
width: 100%;
height: 700px;
float: left;
margin-top: 85px;
}
.boxies{
width: 100%;
height: 720px;
float: left;
}
.box-studijni{
width: 33.3%;
height: 350px;
float: left;
}
.box-ucebni{
width: 33.3%;
height: 350px;
float: left;
}
.box-doplnkovy{
width: 33.3%;
height: 350px;
float: left;
}
.box-color{
width: 100%;
height: 100%;
float: left;
background-color: rgba(0,0,0,0.1);
}
.box-color:hover {
background-color: rgba(255,255,255,0.2);
}
.box-text{
width: 100%;
height: 100px;
float: left;
margin-top: 250px;
background-color: rgba(255,255,255,0.6);
}
.box-text p{
text-shadow: 1px 1px 1px #fff;
font-size: 13px;
text-align: center;
padding: 5px 30px 0px 30px;
font-weight: bold;
color: #5a1a74;
}
p.box-text-popis{
text-shadow: 1px 1px 1px #fff;
font-size: 11px;
text-align: center;
font-weight: bold;
color: black;
}
.box1{
width: 100%;
height: 350px;
float: left;
background-image: url(https://www.ssos.cz/uploads/images/webpics/pics/obor_bpr.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.box1 img{
width: 100%;
height: 100%
float: left;
}
.box2{
width: 100%;
height: 350px;
float: left;
background-image: url(https://www.ssos.cz/uploads/images/webpics/pics/obor_sis.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.box2 img{
width: 100%;
height: 100%
float: left;
}
.box3{
width: 100%;
height: 350px;
float: left;
background-image: url(https://www.ssos.cz/uploads/images/webpics/pics/obor_cer.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.box3 img{
width: 100%;
height: 100%
float: left;
}
.box4{
width: 100%;
height: 350px;
float: left;
background-image: url(https://www.ssos.cz/uploads/images/webpics/pics/obor_mas.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.box4 img{
width: 100%;
height: 100%
float: left;
}
.box5{
width: 100%;
height: 350px;
float: left;
background-image: url(https://www.ssos.cz/uploads/images/webpics/pics/obor_gdm.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.box5 img{
width: 100%;
height: 100%
float: left;
}
.box6{
width: 100%;
height: 350px;
float: left;
background-image: url(https://www.ssos.cz/uploads/images/webpics/pics/obor_empty.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.box6 img{
width: 100%;
height: 100%
float: left;
}
.box6-mapa{
width: 100%;
height: 350px;
float: left;
position: relative;
z-index: 1;
}
.box6-text{
width: 100%;
height: 150px;
float: left;
position: relative;
z-index: 3;
margin-top: -150px;
background-color: rgba(255,255,255,0.7); 
text-shadow: 1px 2px 2px #fff;
}
.box-icona1{
width: 200px;
height: 30px;
float: none;
font-size: 20px;
font-weight: bold;
margin: auto;
text-align: center;
padding-top: 40px;
}
.box-icona1 img{
width: 15px;
height: 15px;
margin-right: 0px;
margin-left: 20px;
}
.box-icona2{
width: 50px;
height: 40px;
float: left;
text-size: 13px;
margin-left: 70px;
}
.box-icona2 img{
width: 40px;
height: 40px;
}
/* --------   3) Obsah stránky   --------   */
.content{
width: 100%;
height: 100%;
float: left;
background: #f7f7f7;
}
.content2{
width: 100%;
height: 100%;
float: left;
margin-top: 100px;
margin-bottom: 20px;
background-image: url(https://www.ssos.cz/uploads/images/webpics/back.jpg);
}
.contentbox{
width: 100%;
min-height: 400px;
margin: auto;
line-height: 2;
font-size: 13px;
text-align: justify;
}
.contentbox2{
width: 100%;
min-height: 500px;
margin: auto;
line-height: 2;
font-size: 13px;
text-align: justify;
margin-top: 100px;
}
.contik{
width: 90%;
margin: auto;
float: none;
}
.contentbox ul li{
list-style-type: square;
margin-left: 20px;
font-size: 13px;
}
.contentbox2 ul li{
list-style-type: square;
margin-left: 20px;
}
.contbox{
width: 100%;
height: 100%;
float: left;
}
.contle{
width: 50%;
height: 100%;
float: left;
background: #f9f8fb;
}
.contri{
width: 50%;
height: 100%;
float: left;
background: #fff;
}
.aktualne{
width: 100%;
height: 100%;
float: left;
background: #fff;
}
.galerie{
width: 100%;
height: 100%;
float: left;
background: #FEFDFF;
}
.aktualne-mobil{
width: 100%;
height: 100%;
float: left;
display: none;
}
.aktualne-skola{
width: 50%;
height: 100%;
float: left;
background: #fff;
}
.aktualne-pr{
width: 50%;
height: 100%;
float: left;
background: #f9f9f9;
}
.signfirm{
width: 390px; 
min-height: 300px; 
float: left; 
background: #d7d4ea; 
margin: 10px 0 10px 0;
}
.signbox{
width: 70%;
height: 100%; 
margin: auto; 
text-align: center; 
padding-top: 50px;
}
.signschool{
width: 390px; 
min-height: 300px; 
float: right; 
background: #dedede; 
margin: 10px 0 10px 0;
}
.gallery p{
display: none;
}
.parentlink {
display: none;
}
.youpol ul li{
list-style: none;
width: 400px;
float: left;
margin-left: 3px;
}
.youpol{
width: 100%;
height: 100%;
float: left;
}

.youpol img{
width: 400px;
height: 100%;
float: left;
}
object{
width: 100%; 
height: 100%; 
float: left;
}
embed{
width: 100%; 
height: 500px; 
float: left;
}
.kontol{
width: 100%;
height: 350px;
float: left; 
margin-bottom: 30px;
position: relative;
}
.kontolle{
width: 20%;
height: 350px;
float: left; 
background: #5a1a74;
color: #fff;
text-align: center;
}
.kontolri{
width: 80%;
height: 350px;
float: left; 
}
.kontolri object{
width: 100%;
height: 350px;
float: left; 
}
.kontakt table{
width: 100%;
margin: auto;
border-collapse: collapse; 
text-align: center;
text-align: left;
font-size: 14px;
table-layout: fixed;
margin-bottom: 40px;
}
tr.r1{
background: #5a1a74; 
height: 40px; 
font-weight: bold; 
color: #fff;
}
tr.r3{
background: #5a1a74; 
height: 40px; 
font-weight: bold; 
color: #fff;
}
.kontakt table tr{
border-bottom: 1px solid grey;
}
.kontakt table img{
width: 10%;
}
.kontakt table td{
height: 40px;
padding-left: 20px;
}
.kontakt table th{
padding-left: 20px;
}

/* kontakty */
.contup{
width: 100%; 
height: 100%;
margin: auto;
font-size: 18px;
}
.contle{
width: 45%; 
height: 100%;
float: left;
}
.contri{
width: 45%; 
height: 100%;
float: right;
}
.contdow{
width: 100%; 
height: 100%;
margin: 50px 0px 50px 0px;
float: left;
}
.sobory{
width: 100%;
float: left;
margin-top: 30px;
margin-bottom: 30px;
font-size: 16px;
}
.hobory{
width: 75%;
margin: auto;
height: 100%;
}
.sobory img{width: 95%;}
.hobory img{width: 95%;}
.obor{
width: 23%;
float: left;
margin-right: 20px;
height: 100%;
}
.oborjum{
text-align: left;
height: 250px;
}
.hobor{
width: 30%;
float: left;
margin-right: 20px;
line-height: 1.4;
min-height: 400px;
margin-bottom: 20px;
}
.obor img{width: 100%;}
.oborle{
width: 65%;
height: 100%;
float: left;
}
.oborri{
width: 30%;
height: 100%;
float: left;
margin-left: 3%;
}
.obor_doplnujici{
width: 90%;
}
.obor_button{
width: 28%;
height: 100%;
float: left;
font-size: 16px;
}
.obor_informace{
width: 30%;
height: 100%;
float: left;
line-height: 1.5;
}
p.tobory{
height: 150px;
line-height: 2;
}
p.info{
font-weight: bold;
font-size: 16px;
padding-top: 10px;
}
.cdbox{
width: 22%; 
min-height: 100%;
margin-right: 20px;
background: #e2e2e2;
float: left;
}
.cdbox p{
margin: 10px 0px 5px 10px;
}
.cdbox2{
width: 22%; 
min-height: 300px;
margin-right: 20px;
margin-top: 5px;
background: #e2e2e2;
float: left;
}
.cdbox2 p{
margin: 20px 0px 10px 20px;
text-align: left;
}
.prblock{
width: 100%;
height: 100%;
float: left;
margin-bottom: 20px;
}
.prblock2{
width: 111%;
height: 100%;
float: left;
background: #ec645c;
margin-left: -5.5%;
color: #fff;
}
.prblock3{
width: 111%;
height: 100%;
float: left;
background: #3694cf;
margin-left: -5.5%;
color: #fff;
}
.prbbox ul li {
line-height: 1.9;
margin-left: 40px;
}
.prbbox p {
line-height: 1.9;
margin-left: 20px;
}
.prbbox h3 {
line-height: 1.9;
margin-left: 20px;
}
.infocard{
width: 49%;
height: 430px;
float: left;
margin-bottom: 30px;
margin-left: 10px;
}
.icardpic{
width: 100%;
height: 50px;
float: left;
margin-bottom: 10px;
}
.icardpic img{
height: 50px;
width: 62px;
display: block;
margin: auto;
}
.icardtext{
width: 100%;
height: 380px;
float: left;
background: #f7f7f7;
text-align: center;
}
.icardtext p{
margin: 10px 20px 0px 20px;
}
/* --------   3) OS - aktualita   --------   */
.NewsSummary{
width: 95%;
margin: auto;
float: none;
}
.NewsSummary img{
width: 70%;
margin-left: 10px;
}
.novinka1{
padding-top: 20px;
}
.novinka-datum{
color: grey;
font-style: italic;
font-size: 11px;
}
.novinka-datum img{
width: 10px;
}
.novinka1, .novinka2, .novinka3 {
width: 95%;
height: 100%;
float: left;
margin: 0px 20px 0px 20px;
font-size: 13px;
}
.novinka2 p{
padding-left: 0px;
}
.novinka3{
text-align: right;
text-transform: lowercase; 
border-bottom: 0px solid grey; 
margin-bottom: 20px;
}
.novinka3 hr{
width: 70%;
margin: auto;
color: #fff;
background-color: #fff;
}
.detail{
width: 90%; 
height: 100%; 
margin: auto; 
font-size: 16px;
line-height: 1.9;
}
.detailtitle{
margin-top: 20px;
}
.detailsum, .detailcon{
margin-top: 10px;
text-align: justify;
}
.detaillink{
text-align: right;
}
table.site {
width: 300px;
height: 100%;
margin: auto;
text-align: center;
}
.site img{
width: 80px;
}

#vystavovatel {
width:100%;
height:100%;
}
label {
float:left; 
width: 100%; 
height: 30px; 
background: #fff;
outline:none;
cursor:pointer;
border: 1px solid #dedede;
border-radius: 3px;
font-size: 14px;
padding-left: 10px;
margin-bottom: 10px;
}
input.inpa{display:none;}
input.inpa:checked+#vystavovatel{display:block;}
input.inpa+#vystavovatel{display:none;}

input.inpa2{display:none;}
input.inpa2:checked+#vystavovatel{display:block;}
input.inpa2+#vystavovatel{display:none;}

input.inpa3{display:none;}
input.inpa3:checked+#vystavovatel{display:block;}
input.inpa3+#vystavovatel{display:none;}

input.inpa4{display:none;}
input.inpa4:checked+#vystavovatel{display:block;}
input.inpa4+#vystavovatel{display:none;}

.dod1{
width: 32%;
height: 350px;
float: left;
margin-right: 20px;
background: #eeeeee;
text-align: left;
}
.dod2{
width: 32%;
height: 350px;
float: left;
margin-right: 20px;
background: #dedede;
text-align: left;
}
.dod3{
width: 32%;
height: 350px;
float: left;
background: #cecece;
text-align: left;
}
.dod1 p{
padding-left: 20px;
}
.dod1 ul{
padding-left: 20px;
}
.dod1 h2{
text-align: center;
}
.dod2 p{
padding-left: 20px;
}
.dod2 ul{
padding-left: 20px;
}
.dod2 h2{
text-align: center;
}
.dod3 p{
padding-left: 20px;
}
.dod3 ul{
padding-left: 20px;
}
.dod3 h2{
text-align: center;
}

/* --------   4) Patička stránky   --------   */
footer{
width: 100%;
height: 280px;
float: left;
}
.footdow{
height: 280px;
width: 100%; 
float: left;
color: #b4b4b4;
line-height: 1.5;
font-size: 14px;
}
.footle{
width: 50%;
height: 250px;
float: left;
background: #fcfcfc;
color: grey;
}
.fltext{
width: 100%;
float: left;
text-align: center;
margin-top: 10px;
padding-bottom: 20px;
font-size: 12px;
}
.footri{
width: 50%;
height: 250px;
float: left;
background: #f5f5f5;
}
.footri-text{
font-size: 12px;
color: grey;
}
.partner{
width: 180px;
height: 180px;  
margin: auto;
}
.partner img{
height: 150px; 
}
.links {
width: 90%; 
height: 100%; 
margin: auto; 
padding-bottom: 20px;
color: #dedede;
font-size: 12px;
}
.linksul{
width: 40%;
height:100%;
float: left;
font-size: 12px;
}
.linksul2{
width: 40%;
height:100%;
float: left;
font-size: 12px;
}
.linksul img{
width: 15px;
}
.footdow ul{
position: relative;
list-style: none;
margin-left: 0;
padding-left: 0.7em;
color: red;
line-height: 1.9;
font-size: 14px;
}
.footdow ul li:before {
content: "»";
position: absolute;
left: 0;
color: #fff;
line-height: 1.5;
}
.copyright{
width: 100%;
height: 30px;
background: #423946;
color: #dedede;
text-align: center;
font-size: 12px;
float: left;
}
.copyright p{
margin-top: 5px;
}


/* --------   5) Odkazy stránky   --------   */
a{color: #5a2297;}
.menu-top a{font-family:'Open Sans','Calibri',Arial,sans-serif; font-weight: normal; color: black; font-size: 11px; margin-top: -5px;text-decoration: none; float: left;}
nav a{font-family:'Open Sans','Calibri',Arial,sans-serif; font-weight: normal; color: #5a2297;}
.btn{color: #fff; background: #772997;}
.novinka1 a{color: #312783; text-decoration: none; font-weight: bold; font-size: 14px;}
.novinka1 a:hover{color: #312783; text-decoration: underline; font-size: 14px;}
.novinka2 a{color: #312783; text-decoration: none; font-size: 13px;}
.novinka2 a:hover{color: #312783; text-decoration: underline; font-size: 13px;}
.novinka3 a{color: #312783; text-decoration: none;text-align: right; font-size: 13px;}
.novinka3 a:hover{color: #423946; text-decoration: underline; font-size: 13px;}
.detalilink a{color: #312783; text-decoration: none;text-align: right;}
.detaillink a:hover{color: #423946; text-decoration: underline;}
.youpol a{color: #312783; text-decoration: none; font-weight: bold;}
.youpol a:hover{color: #312783; text-decoration: underline;}
.contentbox2 a {color: #312783; text-decoration: none; position: relative;list-style: none;margin-left: 0;padding-left: 0.7em;}
.site a {color: #312783; text-decoration: none; position: relative;list-style: none;margin-left: 0;padding-left: 0em;}
.contentbox2 a:before {color: #423946; text-decoration: none ;content: "»";position: absolute;left: 0;}
.sobory a:before {color: #423946; text-decoration: none ;content: " ";position: absolute;left: 0;}
.contentbox2 a:hover {color: #423946; text-decoration: underline;}
.site a:before {content: " "}
.gallery a:before {content: " "}
.kontakt table a:before {content: " "}
.obsah a:before {content: " "}

footer a{text-decoration: none; color: #fff; text-decoration: none;}
footer a:hover{text-decoration: underline;}



/* --------   6) Nadpisy stránky   --------   */
h1{
font-size: 30px;
text-align: center;
text-transform: uppercase;
font-weight: normal;
color: #000;
}
h2{
font-size: 25px;
color: #423946;
text-align: left;
font-weight: normal;
color: #000;
line-height: 2;
}
.aktualne h2{
text-align: center;
font-size: 20px;
color: #000;
line-height: 1.4;
}
.boxies h2{
font-size: 22px;
color: #5a1a74;
text-align: center;
font-weight: bold;
line-height: 1.4;
text-shadow: 1px 2px 2px #fff;
}
.youpol h2{
display: none;
}
.prbbox h2{
color: #fff;
text-align: center;
}
.site h2{
font-size: 25px;
color: #312783;
text-align: center;
font-weight: bold;
line-height: 1.4;
}
.icardtext h2{
text-align: center;
}
h3{
font-size: 20px;
text-align: left;
font-weight: normal;
line-height: 1.4;
}

.partners h3{
font-size: 30px;
font-weight: bold;
text-align: center;
margin: 20px 0 30px 0;
}
.links h3{
color: #ed1c24;
font-weight: normal;
text-align: center;
line-height: 2;
}
.kontakt h3{
font-weight: bold;
}
.kontolle h3{
color: #fff;
font-weight: bold;
text-align: center;
line-height: 2;
}
h4{
font-size: 18px;
text-align: center;
color: #dedede;
}



/* --------   7) Horní menu   --------   */

.nav-bar {
height: 70px;
width: 100%;
position: relative;
z-index: 4;
}
.nav-container {
max-width: 100%;
margin: 0 auto;
} 
nav {
float: right;
width: 750px;
height: 70px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 14px;
}
nav ul li {
float: left;
position: relative;
background: #fff;
}
nav ul li img{
width: 15px;
height: 15px;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 7px 0px 7px;
line-height: 65px;
color: #312783;
text-decoration: none;
margin-top: 3px;
font-weight: bold;
}
nav ul li a:hover,
nav ul li a:visited:hover {
border-bottom: 2px solid #5a1a74;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li p{
display: block;
padding: 0 8px;
line-height: 70px;
background: #fff;
color: #5a1a74;
text-decoration: none;
}
nav ul li ul li {
min-width: 250px;
background: #5a1a74;
color: #fff;
font-size: 13px;
}
nav ul li ul li a {
padding: 11px;
line-height: 8px;
background: #5a1a74;
color: #fff;
}
nav ul li ul li a:hover,
nav ul li ul li a:hover {
background: #7F25A3;
color: #fff;
border-bottom: 0px solid #7F25A3;
}
nav ul li ul li a:visited{
background: #5a1a74;
color: #fff;
}
nav ul li ul li a:visited:hover{
background: #5a1a74;
color: #fff;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
.droppom{
margin-left: -100px;
}

/* --------   7) HM - mobilni verze   --------   */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #5a1a74;
height: 70px;
width: 70px;
}
.nav-list li:hover .nav-dropdown{
display: block;
z-index: 1;
}

@media only screen and (max-width: 1150px) {
.brand{width: 50px; height: 70px;}
.brand img{height: 60px; margin-top: 5px;}
}

@media only screen and (max-width: 1150px) {
.nav-mobile {
display: block;
}
.headup{
display: none;
}
nav {
width: 100%;
padding: 0px 0 15px;
height: 70px;
}
.nav-bar{
background: rgba(255,255,255,0.8);
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 17px;
padding-left: 0px;
font-size: 18px; 
text-align: center;
}
nav ul li a:hover,
nav ul li a:visited:hover {
border-bottom: 0px solid #5a1a74;
}
nav ul li ul li {
height: 40px;
}
nav ul li ul li a {
padding-left: 0px;
text-align: center;
}
.nav-dropdown {
position: static;
}
}

@media screen and (min-width: 1151px) {
.nav-list {
display: block !important;
}
}

/* --------   7) HM - hamburger   --------   */
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}



/* --------   8) Pomocné prvky   --------   */

/* --------   8) PP - tlačítko obsahu   --------   */
.button{
width: 100%;
height: 70px;
margin: auto;
padding-top: 20px;
}
.btn {
  display: inline-block;
  padding: 13px 20px;
  color: #fff;
  text-decoration: none;
  position: relative;
  background: #5a1a74;
  border: 1px solid grey;
  letter-spacing: 0.4em;
  text-align: center;
  text-indent: 2px;
  text-transform: uppercase;
  transition: color 0.1s linear 0.05s;
}
.btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
  z-index: 1;
  opacity: 0;
  transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;

}
.btn::after {
  transition: border 0.1s linear 0.05s;
}
.btn .btn-inner {
  position: relative;
  z-index: 2;
}
.btn:hover {
  color: #373737;
  transition: color 0.1s linear 0s;
}
.btn:hover::before {
  top: 0;
  height: 100%;
  opacity: 1;
  transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;
}
.btn:hover::after {
  border-color: #373737;
  transition: border 0.1s linear 0s;
}
.pagenavigation {
display: none;
}
.contentbox2 .btn{
color: #fff;
width: 100%;
float: left;
content: " ";
}
.btn2 {
  display: inline-block;
  padding: 13px 20px;
  color: #fff;
  text-decoration: none;
  position: relative;
  background: #5a1a74;
  border: 1px solid grey;
  text-align: center;
  text-indent: 2px;
  text-transform: uppercase;
  transition: color 0.1s linear 0.05s;
  float: left;
  width: 280px;
}
.btn2::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
  color: #fff;
  z-index: 0;
  opacity: 0;
  transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;
}
.btn2::after {
  transition: border 0.1s linear 0.05s;
}
.btn2 .btn2-inner {
  position: relative;
  z-index: 2;
}
.btn2:hover {
  color: red;
  transition: color 0.1s linear 0s;
}
.btn2:hover::before {
  top: 0;
  height: 100%;
  opacity: 1;
  transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;
}
.btn2:hover::after {
  border-color: #373737;
  transition: border 0.1s linear 0s;
}
.contentbox2 .btn2{
color: #fff;
background: #4a8ad7; 
width: 100%;
float: left;
content: " ";
}


.btn3 {
  display: inline-block;
  padding: 13px 20px;
  color: #fff;
  text-decoration: none;
  position: relative;
  background: #5a1a74;
  border: 1px solid grey;
  text-align: center;
  text-indent: 2px;
  text-transform: uppercase;
  transition: color 0.1s linear 0.05s;
  float: left;
  margin-top: 10px;
  width: 280px;
}
.btn3::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
  color: #fff;
  z-index: 1;
  opacity: 0;
  transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;
}
.btn3::after {
  transition: border 0.1s linear 0.05s;
}
.btn3 .btn3-inner {
  position: relative;
  z-index: 2;
}
.btn3:hover {
  color: red;
  transition: color 0.1s linear 0s;
content: " ";
}
.btn3:hover::before {
  top: 0;
  height: 100%;
  opacity: 1;
  transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;
}
.btn3:hover::after {
  border-color: #373737;
  transition: border 0.1s linear 0s;
}
.contentbox2 .btn3{
color: #fff;
background: #ef4837; 
width: 100%;
float: left;
}

.btn4 {
  display: inline-block;
  padding: 13px 20px;
  color: #fff;
  text-decoration: none;
  position: relative;
  background: #5a1a74;
  border: 1px solid grey;
  text-align: center;
  text-indent: 2px;
  text-transform: uppercase;
  transition: color 0.1s linear 0.05s;
  float: left;
  margin-bottom: 10px;
  width: 280px;
}
.btn4::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
  color: #fff;
  z-index: 0;
  opacity: 0;
  transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;
}
.btn4::after {
  transition: border 0.1s linear 0.05s;
}
.btn4 .btn4-inner {
  position: relative;
  z-index: 2;
}
.btn4:hover {
  color: red;
  transition: color 0.1s linear 0s;
}
.btn4:hover::before {
  top: 0;
  height: 100%;
  opacity: 1;
  transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;
}
.btn4:hover::after {
  border-color: #373737;
  transition: border 0.1s linear 0s;
}
.contentbox2 .btn4{
color: #fff;
background: #a8b1ff; 
width: 100%;
float: left;
content: " ";
}


/* --------   9) Cookies blok   --------   */
.cookieConsentContainer {
z-index: 3;
width: 350px;
min-height: 20px;
box-sizing: border-box;
padding: 30px 30px 30px 30px;
background: #232323;
overflow: hidden;
position: fixed;
bottom: 30px;
right: 30px;
display: none;
}
.cookieConsentContainer .cookieTitle a {
font-family: OpenSans, arial, "sans-serif";
color: #FFFFFF;
font-size: 22px;
line-height: 20px;
display: block;
}
.cookieConsentContainer .cookieDesc p {
margin: 0;
padding: 0;
font-family: OpenSans, arial, "sans-serif";
color: #FFFFFF;
font-size: 13px;
line-height: 20px;
display: block;
margin-top: 10px;
} 
.cookieConsentContainer .cookieDesc a {
font-family: OpenSans, arial, "sans-serif";
color: #FFFFFF;
text-decoration: underline;
}
.cookieConsentContainer .cookieButton a {
display: inline-block;
font-family: OpenSans, arial, "sans-serif";
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
margin-top: 14px;
background: #000000;
box-sizing: border-box; 
padding: 15px 24px;
text-align: center;
transition: background 0.3s;
}
.cookieConsentContainer .cookieButton a:hover { 
cursor: pointer;
background: #3E9B67;
}

/* --------   9) CB - mobilní verze  --------   */
@media (max-width: 980px) {
.cookieConsentContainer {
bottom: 0px !important;
left: 0px !important;
width: 100%  !important;
}
}

/* --------   10) FP - select + button --------   */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

/* --------   11) přizpůsobení rozlišení --------   */

@media (min-width: 100px) and (max-width: 1151px)  {
header {
position: relative; 
height: 70px;
}
.logo{
width: 80%; 
height: 70px;
}
.logtex{ 
height: 60px;
width: 180px;
float: none;
margin: auto;
}
.lttitle{
height:100%;
font-size: 12px; 
line-height: 1.9;
margin-left: 0px;
}
.menubox, .headow {
height: 70px;
}
.menu-top-center{
width: 150px;
}
.menu-ikona{
width: 15px;
}
.menu-ikona-text{
display: none;
}
.menu-ikona-2{
display: none;
}
nav ul li a, nav ul li a:visited {
line-height: 0px; 
font-size: 16px;
margin-top: 0px; 
line-height: 20px;
}
nav ul li ul li a { 
line-height: 0px; 
font-size: 16px;
}
.droppom{
margin-left: 0px;
}
.boxies{
width: 100%;
height: 100%;
float: left;
}
.box-studijni{
width: 50%;
height: 50%;
float: left;
margin-bottom: 0px;
}
.box-ucebni{
width: 50%;
height: 50%;
float: left;
margin-bottom: 0px;
}
.box-doplnkovy{
width: 50%;
height: 50%;
float: left;
margin-bottom: 0px;
}
.box-text{
width: 100%;
height: 80px;
float: left;
margin-top: 120px;
}
.box-text p{
display: none;
}
.boxies h2{
font-size: 16px;
margin-top: 20px;
padding: 0px 10px 0px 10px;
}
.box1, .box2, .box3, .box4, .box5, .box6 {
width: 100%;
height: 200px;
float: left;
}
.box6-mapa{
height: 180px;
}
.box6-text{
width: 100%;
height: 120px;
margin-top: -120px;
}
.box-icona1{
width: 100%;
height: 25px;
float: left;
font-size: 12px;
font-weight: bold;
padding-left: 0px;
}
.box-icona1 img{
width: 15px;
height: 15px;
margin-right: 20px;
}
.box-icona2{
width: 40px;
height: 30px;
float: left;
text-size: 13px;
margin-left: 20px;
}
.box-icona2 img{
width: 30px;
height: 30px;
}
.layout, .content2{
margin-top: 15px;
width: 100%;
height: 100%;
}
.contentbox{
margin-top: -20px
}
.contle, .contri{
width: 100%;
}
.aktualne-mobil{
display: block;
}
.aktualne-skola{
display: none;
}
.aktualne-pr{
display: none;
}

.akttable, .novinka2{
font-size: 13px; 
line-height: 1.9;
margin: 0 0 0 0; 
padding-left: 5px;
}
.novinka1{
margin: 0 0 0 0; 
padding-left: 5px;
}
.novinka3 hr{
display: none;
}
.novinka3{
width: 90%; 
float: left; 
margin: 0 0 0 0; 
border-bottom: 0px solid black;
}
.novinka-datum{
color: grey;
font-style: italic;
font-size: 11px;
text-align: center;
}
.NewsSummary{
width: 90%;
margin: auto;
border-bottom: 1px solid grey;
}
.NewsSummary p{
font-size: 13px;
}
.NewsSummary ul li{
font-size: 13px;
}
.NewsSummaryMorelink{
width: 99%; 
float: left;
}
.youpol ul li{
list-style: none;
width: 100%;
float: left;
margin-left: 0px;
}
.youpol img{
width: 100%; 
height: 100%;
}
.akt_icon{
display: none;
}
.ftitle, .finput, .ftitle2{
width: 100%; 
margin-left: 0px;
}
#contact{
width: 100%
}
.bunka{
width: 100%;
}
.bunka input[type="checkbox"]{
float: left;
margin-left: 100px;
}
.sign, .signfirm, .signschool{
width: 100%;
}
.signbox{
width: 70%; 
height: 100%; 
margin: auto; text-align:
center; padding-top: 50px;
}
.kontolle, .kontolri{
width: 100%; 
height: 100%;
}
.kontolle{
width: 100%; 
height: 110px;
}
.kontolri{
width: 100%; 
height: 230px;
}
.kontolri object{
width: 100%; 
height: 230px;
}

/* ssos */ 
.oborle, .obor{
width: 100%;
padding-bottom: 30px;
}
.contentbox2 a{
padding-left: 0em;
}
.oborle img{
width: 100%;
}
.oborri{
width: 100%;
float: left;
}
.obor_informace{
width: 100%;
}
.hobor{
float: left; 
width: 100%; 
margin-top: 20px;
margin-bottom: 20px;
min-height: 100%;
}
.hobory {
width: 100%;
}
.hobory img{
width: 100%;
padding: 0px 20px 0px 20px;
}
.oborjum{
height: 100%;
}
.sobory p{
text-align: left;
}
p.tobory{
text-align: center;
}
p.tobory2{
text-align: center;
height: 230px;
color: red;
}
.hobor h2{
text-align: center;
}
.obor_button{
width: 100%;
margin-top: 20px;
}
.btpom{
width: 185px;
margin: auto;
}
.cdbox, .cdbox2{
width: 100%; 
margin-top: 10px;
margin-left: 0px;
}
.infocard{
width: 100%;
height: 100%;
margin-left: 0px;
}
.icardpic{
margin-bottom: 5px;
}
.icardtext {
width: 100%;
height: 100%;
float: left;
text-align: center;
}
.dod1, .dod2, .dod3{
width: 100%;
height: 100%;
margin-bottom: 20px;
}
.btn2, .btn3, .btn4{
Width: 100%;
float: left;
}

/* ---- */
footer{
height: 100%;
font-size: 12px;
}
.footri{
display: none;
}
.footle, .footup, .footdow {
width: 100%;
height: 100%;
}
.partner {
width: 82px; 
float: none;
margin: auto;
}
.partner img{
width: 82px; 
height: 100px; 
}
}


@media (min-width: 100px) and (max-width: 700px)  {
.kontakt table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}  
.kontakt table tr {
border-bottom: 1px solid #5a1a74;
display: block;
margin-bottom: .625em;
margin-bottom: 10px;
}  
.kontakt table td {
border-bottom: 1px solid #ddd;
display: block;
text-align: right;
height: 100%;
}  
.kontakt table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
}
.kontakt table td:last-child {
border-bottom: 0;
}
.kontakt table img{
width: 8%;
}
}