/* AUTHOR: HAJMADESIGN, www.hajmadesign.cz */

@font-face {
    font-family: 'modern pictograms';
    src: url('http://mskremenky.8u.cz/modernpics-webfont.eot');
    src: url('http://mskremenky.8u.cz/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://mskremenky.8u.cz/modernpics-webfont.woff') format('woff'),
         url('http://mskremenky.8u.cz/modernpics-webfont.ttf') format('truetype'),
         url('http://mskremenky.8u.cz/modernpics-webfont.svg#modern pictograms') format('svg');
    font-weight: normal;
    font-style: normal;

}

.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

html {height: 100%;}
body
{font-family: 'Open Sans', Arial, sans-serif; margin: 0; height: 100% ;
}

.dropdown {position: relative; display: block; }
.dropdown-content {margin-top: 5px; display: none; opacity: 0; position: absolute; z-index: 1;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); transition: all 0.3s;
line-height: 30px; background-color: #79868C; padding: 10px;}
.dropdown:hover .hoverable {background-color: #707C81;}
.dropdown:hover .dropdown-content {display:block; opacity: 1; }

.highlighted {color: yellow; font-weight: bold;}

a {color: #454D50; text-transform: uppercase; font-weight: bold; text-decoration: none;}
a:hover { text-decoration: none; color: #F133F1;}

#fade {list-style-type: none; }
#fade b {color: #FF37FF;
}
h1 {color: white; font-size:60px; font-weight:400; font-family: 'Oswald', sans-serif; text-align: center; text-transform:uppercase
}

h2 {margin-bottom: 20px; color: #FA35FA; font-size:60px; font-weight:400; font-family: 'Oswald', sans-serif; text-align: center; text-transform:uppercase
}

h3 {color: white; font-size: 25px; font-weight: 400; text-align: center; margin-bottom: 40px;
}
header {background-image: url('http://balethlucin.cz/ballet.png'); width: 100%; height: 667px;
}

p {text-align:center; }

#header-video {width: 100%; margin: 150px auto; height: 667px; overflow-y:hidden; overflow-x:hidden; 
}


#header-txt {
}

#header-nav { position: fixed; top: 0; right:0; width: 100%; line-height: 100px; height: 100px; background-color: black; z-index: 100; height:100px; background-color:black; border-bottom: 0px dotted #710071;
}

a.button-white {border: 0; display: block; text-align:center; width: 210px; margin: 0 auto; transition: all 0.5s;  color: white; font-weight: bold; text-decoration:none; padding: 15px 0px; outline: 2px solid white;  text-transform: uppercase;
}

a.button-white:hover {background-color: white; color: black; 
}

.content-box-white {margin: 0 auto; margin-top: 100px; width: 860px; 
}

.bigger {font-size: 21px;}

.content-box-white p {font-size: 20px; font-weight: 400; text-align: justify; line-height: 45px; color: #969696;}

.navigation {display: block; list-style-type: none; margin: 0;  position:fixed; top: 0px; right: 25px; z-index:1000;
}

.navigation li {display: inline-block; float:left; margin-left: 10px; 
}

    .navigation li a {transition: all 0.3s; padding: 15px 20px;  color: white; font-weight: bold; text-transform: uppercase; text-decoration: none; 
    }

        .navigation li a:hover {background-color: white; color: black; outline: 2px solid white; font-weight: bold; 
        }

.navigation li a.saltatores {background-color: #FF0080; padding: 15px 25px;}
.navigation li a.saltatores:hover {background-color: white; color: #FF0080;}

table { 
}

table a {color: white; font-weight: 400;}
table a:hover {color: #CFD3D6;}

tr:first-child {font-weight: bold; color: white; text-transform: uppercase;
}

tr {color: #AEB6B9; }
td {background-color: #454D50; padding: 10px; text-align:center; 
}

#header-nav .active a {outline: 2px solid white;
}

#video {position: absolute; left: -16%; right: 0; bottom: 0; top:100px; right:0; width: 125%; height: 100%; z-index: -100; background-size: 100% 100%; background-color: black; background-position: center center; background-size: contain; object-fit: cover;}

#footer {color: white; background-color: black; position:fixed; bottom: 0; z-index: 15; height: 45px; line-height:45px; padding: 0px 15px; border-top-right-radius: 5px; font-weight: 600; font-size: 13px;
}

#footer a {text-decoration: none; color: #FD3FFD; font-weight: bold;}
#footer a:hover {border-bottom: 1px dotted #FD3FFD;}
.fb {background-color: #3C5998;}
.yt {background-color: #C71B1F;}

.paragraph {text-align: left; line-height: 45px; color: #454D50; margin-bottom: 30px; font-size: 20px;}

#slide0 {background-image: url("../img/nikolka.jpg"); background-size: cover;}
#slide0 h2 {text-align: left;  color: white; }
#slide0 p {text-align: left; line-height: 45px; color: #454D50; margin-bottom: 30px;}
#slide0 .intro {width: 650px; margin-left: 10%;}

#slide1 {background-image: url("../img/zuzkaa1.jpg"); background-color: gray; background-size: cover;}
#slide1 h2 {text-align: left;  color: white; }
#slide1 p {text-align: left; line-height: 45px; color: #454D50; margin-bottom: 30px;}
#slide1 .intro {margin-left: 10%; width: 650px;}

#slide2 {background-image: url("../img/moderna.jpg"); background-size: cover;}
#slide2 h2 {text-align: left;  color: white; }
#slide2 p {text-align: left; line-height: 45px; color: #454D50; margin-bottom: 30px;}
#slide2 .intro {width: 650px; margin-left: 10%;}

#slide01 {background-image: url("../img/legs_bg.jpg"); background-color: gray; background-size: cover;}
#slide01 h2 {text-align: left;  color: white; }
#slide01 p {text-align: left; line-height: 45px; color: #454D50; margin-bottom: 30px;}
#slide01 .intro {margin-left: 10%; width: 650px;}

#slide02 {background-image: url("../img/zuzkaaa.jpg"); background-color: gray; background-size: cover;}
#slide02 h2 {text-align: left;  color: white; }
#slide02 p {text-align: left; line-height: 45px; color: #454D50; margin-bottom: 30px;}
#slide02 .intro {margin-left: 10%; width: 650px;}

#slide03 {background-image: url("../img/agata02.jpg"); background-color: gray; background-size: cover;}
#slide03 h2 {text-align: left;  color: white; }
#slide03 p {text-align: left; line-height: 45px; color: #454D50; margin-bottom: 30px;}
#slide03 .intro {margin-left: 10%; width: 650px;}

#slide04 {background-image: url("../img/spolecna.jpg"); background-color: gray; background-size: cover;}
#slide04 h2 {text-align: left;  color: white; }
#slide04 p {text-align: left; line-height: 45px; color: #454D50; margin-bottom: 30px;}
#slide04 .intro {margin-left: 10%; width: 650px;}

#slide05 {display:none;}

#section2 {background-image: url("../img/woman_bg.png"); background-color: #F3F3F3; background-size: cover;}

#section2 h2 {text-align: left; color:  #FF37FF; padding-left: 10%;}
#section2 p {text-align: left; line-height: 45px;  color: #333; padding-left: 10%}
#section2 a {color:  #FF37FF;}
#section3 {background-color: #333; background-image: url('../img/gallery_background.png'); background-repeat: repeat-x;}

#hajmadesign {position: absolute; right: 0; bottom: -5px; }
#logo {height: 100px; padding-left: 33px;}


#section3 .intro {margin-top: 100px;}
.image-gallery {transition: all 0.3s; float:left; width: 33%; margin: 1px; filter:gray;}
.image-gallery:hover {-webkit-filter: grayscale(1);}

#conabizim-menu {text-align: center; position: absolute; bottom: 0; z-index: 999; 
background-color: rgba(69, 77, 80, 0.25); width: 100%; height: 50px;}
#conabizim-menu ul {margin:0; display: inline-block; list-style-type: none;   }
#conabizim-menu ul li {float:left;}
#conabizim-menu ul li a {color: #454D50; transition: all 0.3s; padding: 0px 30px; display: inline-block; height: 50px; line-height: 50px;}
#conabizim-menu ul li a:hover {color: white; background-color: #454D50;}
#conabizim-menu ul li a.kontakt {color: white; background-color: black;}
#conabizim-menu ul li a.kontakt:hover {background-color: white; color: black;}
#conabizim-menu ul li a.salt {color: white; background-color: #FF0080;}
#conabizim-menu ul li a.salt:hover {background-color: white; color: #FF0080;}
#conabizim-menu ul li.active a {color:white;}

.playfullvid {transition: all 0.3s; position: absolute; bottom: 0; right: 0; color: white; padding: 10px 20px; background-color: black; border-radius: 5px 0px 0px 0px;}
.playfullvid:hover {background-color: white; color: black}

.news {transition: all 0.3s; position: absolute; bottom: 0; left: 0; color: white; padding: 10px 20px; background-color: black; border-radius: 0px 5px 0px 0px;}
.news:hover {background-color: white; color: black}

.hlucin-support {
    display: flex; 
    flex-direction: row; 
    gap: 30px; 
}

/*responsive design*/

@media (max-width: 1154px) {
#slide0 .intro {width: 650px; margin: 0 auto; }
h1 {font-size: 45px;}
h2 {font-size: 45px;}
h3 {font-size: 16px;}
.content-box-white p {font-size: 14px;}
p {font-size: 13px;}
a {font-size: 13px;}
#navigation li a {font-size: 14px;}

#slide0 {background-image: url("../img/nikolka.jpg"); background-size: cover;}
#slide0 h2 {text-align: left;  color: white; }
#slide0 p {text-align: left; line-height: 35px; color: #454D50; margin-bottom: 30px;}
#slide0 .intro {width: 600px; margin-left: 10%;}

#slide1 {background-image: url("../img/zuzkaa1.jpg"); background-color: gray; background-size: cover;}
#slide1 h2 {text-align: left;  color: white; }
#slide1 p {text-align: left; line-height: 35px; color: #454D50; margin-bottom: 30px;}
#slide1 .intro {margin-left: 10%; width: 600px;}

#slide2 {background-image: url("../img/moderna.jpg"); background-size: cover;}
#slide2 h2 {text-align: left;  color: white; }
#slide2 p {text-align: left; line-height: 35px; color: #454D50; margin-bottom: 30px;}
#slide2 .intro {width: 600px; margin-left: 10%;}

#slide01 {background-image: url("../img/legs_bg.jpg"); background-color: gray; background-size: cover;}
#slide01 h2 {text-align: left;  color: white; }
#slide01 p {text-align: left; line-height: 35px; color: #454D50; margin-bottom: 30px;}
#slide01 .intro {margin-left: 10%; width: 600px;}

#slide02 {background-image: url("../img/zuzkaaa.jpg"); background-color: gray; background-size: cover;}
#slide02 h2 {text-align: left;  color: white; }
#slide02 p {text-align: left; line-height: 35px; color: #454D50; margin-bottom: 30px;}
#slide02 .intro {margin-left: 10%; width: 600px;}

#slide03 {background-image: url("../img/agata02.jpg"); background-color: gray; background-size: cover;}
#slide03 h2 {text-align: left;  color: white; }
#slide03 p {text-align: left; line-height: 35px; color: #454D50; margin-bottom: 30px;}
#slide03 .intro {margin-left: 10%; width: 600px;}

#slide04 {background-image: url("../img/spolecna.jpg"); background-color: gray; background-size: cover;}
#slide04 h2 {text-align: left;  color: white; }
#slide04 p {text-align: left; line-height: 35px; color: #454D50; margin-bottom: 30px;}
#slide04 .intro {margin-left: 10%; width: 600px;}

#section2 {background-image: none; background-color: #EDEDED; background-size: cover; }
#section2 h2 {text-align: left; padding-left: 15%;  color:  #FF37FF;;}
#section2 h3 {text-align: left; padding-left: 15%; color: black;}
#section2 p {text-align: left; padding-left: 15%; line-height: 35px;  color: #333;}
#section2 a {color:  #FF37FF;}
#section3 {background-color: #333; background-image: url('../img/gallery_background.png'); background-repeat: repeat-x;}
 
 .navigation li {display: inline-block; float:left; margin-left: 10px; 
}

    .navigation li a {transition: all 0.3s; padding: 10px 15px;  color: white; font-weight: bold; text-transform: uppercase; text-decoration: none; 
    }

        .navigation li a:hover {background-color: white; color: black; outline: 2px solid white; font-weight: bold; 
        }

.navigation li a.saltatores {background-color: #FF00FF; padding: 10px 19px;}
.navigation li a.saltatores:hover {background-color: white; color: #FF00FF;}

table {font-size: 14px;}

.navigation {display: block; list-style-type: none; margin: 0;  position:fixed; top: 0px; right: 10px; z-index:1000;
}

#logo {height: 100px; padding-left: 10px;}

.bigger {font-size: 13px;}

}

/*responsive fhd*/
@media (min-width: 1700px) {
#slide0 .intro {width: 650px; margin: 0 auto; }
h1 {font-size: 80px;}
h2 {font-size: 80px;}
h3 {font-size: 30px;}
.content-box-white p {font-size: 14px;}
p {font-size: 21px;}
a {font-size: 23px;}
#navigation li a {font-size: 23px;}

.paragraph {line-height: 61px;}

#slide0 {background-image: url("../img/nikolka.jpg"); background-size: cover;}
#slide0 h2 {text-align: left;  color: white; }
#slide0 p {text-align: left; line-height: 61px; color: #454D50; margin-bottom: 30px;}
#slide0 .intro {width: 950px; margin-left: 10%;}

#slide1 {background-image: url("../img/zuzkaa1.jpg"); background-color: gray; background-size: cover;}
#slide1 h2 {text-align: left;  color: white; }
#slide1 p {text-align: left; line-height: 61px; color: #454D50; margin-bottom: 30px;}
#slide1 .intro {margin-left: 10%; width: 950px;}

#slide2 {background-image: url("../img/moderna.jpg"); background-size: cover;}
#slide2 h2 {text-align: left;  color: white; }
#slide2 p {text-align: left; line-height: 61px; color: #454D50; margin-bottom: 30px;}
#slide2 .intro {width: 950px; margin-left: 10%;}

#slide01 {background-image: url("../img/legs_bg.jpg"); background-color: gray; background-size: cover;}
#slide01 h2 {text-align: left;  color: white; }
#slide01 p {text-align: left; line-height: 61px; color: #454D50; margin-bottom: 30px;}
#slide01 .intro {margin-left: 10%; width: 950px;}

#slide02 {background-image: url("../img/zuzkaaa.jpg"); background-color: gray; background-size: cover;}
#slide02 h2 {text-align: left;  color: white; }
#slide02 p {text-align: left; line-height: 61px; color: #454D50; margin-bottom: 30px;}
#slide02 .intro {margin-left: 10%; width: 950px;}

#slide03 {background-image: url("../img/agata02.jpg"); background-color: gray; background-size: cover;}
#slide03 h2 {text-align: left;  color: white; }
#slide03 p {text-align: left; line-height: 61px; color: #454D50; margin-bottom: 30px;}
#slide03 .intro {margin-left: 10%; width: 950px;}

#slide04 {background-image: url("../img/spolecna.jpg"); background-color: gray; background-size: cover;}
#slide04 h2 {text-align: left;  color: white; }
#slide04 p {text-align: left; line-height: 61px; color: #454D50; margin-bottom: 30px;}
#slide04 .intro {margin-left: 10%; width: 950px;}

#section2 {background-color: #EDEDED; background-size: cover; }
#section2 h2 {text-align: left; color:  #FF37FF; padding-left: 10%; }
#section2 p {text-align: left; line-height: 61px;  color: #333; padding-left: 10%; }
#section2 a {color:  #FF37FF;}
#section3 {background-color: #333; background-image: url('../img/gallery_background.png'); background-repeat: repeat-x;}
 


table {font-size: 23px;}

.navigation {display: block; list-style-type: none; margin: 0;  position:fixed; top: 0px; right: 60px; z-index:1000;
}

#logo {height: 130px; padding-left: 68px;}

.bigger {font-size: 26px;}

a.button-white {border: 0; display: block; text-align:center; width: 210px; margin: 0 auto; transition: all 0.5s;  color: white; font-weight: bold; text-decoration:none; padding: 20px 15px; outline: 3px solid white;  text-transform: uppercase;
}

#header-nav { position: fixed; top: 0; right:0; width: 100%; line-height: 130px; height: 100px; background-color: black; z-index: 100; height:130px; background-color:black; border-bottom: 0px dotted #710071;
}

#footer {color: white; background-color: black; position:fixed; bottom: 0; z-index: 15; height: 60px; line-height:60px; padding: 0px 15px; border-top-right-radius: 5px; font-weight: 600; font-size: 13px;
}
#conabizim-menu {text-align: center; position: absolute; bottom: 0; z-index: 999; 
background-color: rgba(69, 77, 80, 0.25); width: 100%; height: 65px;}

#conabizim-menu ul li a {color: #454D50; transition: all 0.3s; padding: 0px 30px; display: inline-block; height: 65px; line-height: 65px;}

}
}