@font-face {
    font-family: 'ibook';
    src: url('../FONTS/FuturaPT-BookObl.woff2') format('woff2'),
        url('../FONTS/FuturaPT-BookObl.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'demi';
    src: url('../FONTS/FuturaPT-Demi.woff2') format('woff2'),
        url('../FONTS/FuturaPT-Demi.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'idemi';
    src: url('../FONTS/FuturaPT-DemiObl.woff2') format('woff2'),
        url('../FONTS/FuturaPT-DemiObl.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'book';
    src: url('../FONTS/FuturaPT-Book.woff2') format('woff2'),
        url('../FONTS/FuturaPT-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'light';
    src: url('../FONTS/FuturaPT-Light.woff2') format('woff2'),
        url('../FONTS/FuturaPT-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ilight';
    src: url('../FONTS/FuturaPT-LightObl.woff2') format('woff2'),
        url('../FONTS/FuturaPT-LightObl.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'medium';
    src: url('../FONTS/FuturaPT-Medium.woff2') format('woff2'),
        url('../FONTS/FuturaPT-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'imedium';
    src: url('../FONTS/FuturaPT-MediumObl.woff2') format('woff2'),
        url('../FONTS/FuturaPT-MediumObl.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
/* */
::selection {
    background-color: #F2C894;
    color: #283B40;
}

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, a, img, b, u, i, article, aside, footer, header, menu, nav, section, small {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1vw;
	font: inherit;
	vertical-align: baseline;
  font-family: 'book', sans-serif;
  scroll-behavior: smooth;
  color: #F2C894;}

body {
background-color: #225959;
background-size: 100%;
max-width: 1920px;
min-height:2000px;
margin: 0 auto;
}

p{
  line-height: min(max(1.5rem, 1.5vw), 25px) !important;
  color: #F2C894;
  font-family: 'book', 'Open Sans', sans-serif;
  text-align: justify;
  vertical-align: middle;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.seznam {
  line-height: min(max(2rem, 2vw), 35px) !important;
  color: #F2C894;
  font-family: 'book', 'Open Sans', sans-serif;
  text-align: justify;
  vertical-align: middle;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}


small {
  font-size: 70%;
  color: #41272F;
}

p.dark {
  color: #9BBCBF;
  font-size: 1.3rem;
  text-align: left;
  font-family: 'medium';
  margin-top: 5%
}

p.text {  margin: 1rem 0px 0px 0px;}


.highlight {
  display: block;
  width:11vmax;
  min-width: 120px;
  max-height: 200px !important;
  /*background: url('../IMG/menu_highlight.png') top center no-repeat;*/
  margin-top: -2.5vh !important;
  text-decoration: none !important;
  border: none !important;
  font-size: 1.6vw !important;
  left: 65%;
  text-align: center;
  font-style: normal;
}


.highlight:hover {
  background-color: inherit;
  text-decoration: underline !important;
  color: #41272F !important;
}

a {
  color: #9BBCBF;
  text-decoration: underline;
  font-style: italic;
  padding: 2px}

a:hover {
   background-color: #283B40;
   color: #F2C894 !important;}

.layout {
  max-width: 960px;
  margin: 0 auto;
}

a.nav-link {
  color: #283B40;
}

a.nav-link:hover {
   background-color: #283B40;
   color: #F2C894 !important;}

.header_zuz {
  background: url('../IMG/background3.jpg') no-repeat;
  background-position: center;
  background-size: auto 100%;
  max-width: 1920px;
}

.footer_zuz {
  background: url('../IMG/background2.jpg') no-repeat;
  background-position: center;
  background-size: auto 100%;
  max-width: 1920px;
  padding-bottom: 25%;
}


.header_zuz h1 {
  float: right;
  font-family: 'medium', sans-serif;
  font-style: italic;
  color: #225959;
  font-size: min(max(1.8rem, 3.6vw), 72px);
  text-align: right;
  padding-top: 5%
}
/*.header_zuz h2 {
  float: right;
  clear: both;
  font-family: 'light', sans-serif;
  color: #8C797C;
  font-size: min(max(1.5rem, 3vw), 60px);
  text-align: right;
  padding-top: 0
}
*/

.header_zuz h2 {
  float: right;
  clear: both;
  font-family: 'light', sans-serif;
  color: #8C797C;
  font-size: min(max(1rem, 1.5vw), 30px);
  text-align: right;
  padding-bottom: 20%;
}

.header_zuz h3 {

  text-align: center !important;
  font-family: 'light', sans-serif;
  font-style: italic;
  color: #283B40;
  font-size: 1.7vw;
  text-align: right;
  padding-top: 20%;
  padding-bottom: 2%;
  clear: both;
}

.img1 {
    background: url('../IMG/img2.jpg') no-repeat #225959;
    background-position: TOP;
    background-size: 50%;
    max-width: 1920px;
    padding-bottom: 23%;
}
.img2 {
    background: url('../IMG/img4.jpg') no-repeat #225959;
    background-position: TOP;
    background-size: 50%;
    max-width: 1920px;
    padding-bottom: 23%;
}

.img3 {
    background: url('../IMG/img5.jpg') no-repeat #225959;
    background-position: TOP;
    background-size: 50%;
    max-width: 1920px;
    padding-bottom: 23%;
}

.img4 {
    background: url('../IMG/img6.jpg') no-repeat #225959;
    background-position: TOP;
    background-size: 50%;
    max-width: 1920px;
    padding-bottom: 23%;
}

#skupinove_lekce::before, #individualni_lekce::before, #vikendove_akce::before, #treninkove_plany::before, #kdo_je_zuz::before, #registrace::before{
  content: '';
  display: block;
  height:      100px;
  margin-top: -100px;
  visibility: hidden;
}

.margin-custom {
  margin-top:3rem;
}



.content h2 {
  font-family: 'medium', sans-serif;
  font-style: italic;
  color: #9BBCBF;
  font-size: min(max(1.25rem, 2.5vw), 50px);
  text-align: center;
}


.individual p {
  text-align: center;
  color: #F2C894;
  font-size: min(max(1.0rem, 1.1vw), 30px);
}

a.reg {
  display: block;
  width: 80%;
  min-width: 120px;
  margin: 1rem auto 0 auto;
  line-height: 3rem;
  background: #F2C894;
  border-radius: 0.7rem;
  color: #283B40;
  font-style: normal;
  text-align: center;
}

a.reg:hover {
  color: #F2C894 !important;
  background: #283B40;

}

a.regmobile {
  display: none;
}

a.regmobile:hover {
  color: #fff !important;
}

.lekce {
  font-family: 'medium', sans-serif;
  font-style: italic;
  color: #9BBCBF;
  font-size: min(max(1.0rem, 1.2vw), 24px);
  text-align: right;
  padding-top: 3%;
}

.lekcep {
  padding-top: 1.9%;
}

.lekcep1 {
  padding-top: 3.5%;
}

.sectiondivide {
  max-width: 1920px;
  width: 82.5%;
  border-top: 1px solid rgba(65, 39, 47, 0.3);
}

.sectiondivide2 {
  max-width: 1920px;
  width: 66%;
  border-top: 1px solid rgba(65, 39, 47, 0.3);
}

.sectiondivide3 {
  max-width: 1920px;
  border-top: 1px solid rgba(65, 39, 47, 0.3);
  margin-top: 5%
}


.contact{
  font-family: 'book', sans-serif;
  font-style: italic;
  color: #F2C894;
  font-size: min(max(1.25rem, 2vw), 30px);
  text-align: center;
}

.contact_col {
  text-align: center;
}

span.linksmall {
  text-decoration: none !important;
  color: #9BBCBF;
  font-family: 'book', 'Open Sans', sans-serif;
  font-size: 1.2rem;


}

.tworow {
  padding-top: 30% !important
}

.mobileonly {
  display: none;
  visibility: hidden;
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 576px) {

.menu {
  background-color: /*#E98D91*/#9BBCBF;
  position: sticky;
  padding-bottom: -30px;
  /*border-bottom: 2px solid #41272F;*/
  filter: drop-shadow(0 0 .1rem #41272F)
}

.navbar a {
  border-bottom: 1px solid #283B40;
  text-decoration: none !important;
  font-family: 'demi', 'Open Sans', sans-serif ;
  font-style: normal;
  font-size: 1vw;
  text-align: center;
  margin: 0 15px 15px 15px;
  color: #283B40 !important;
}

.navbar a:hover {
  border: none;
}


.linedivide {
  margin: 2% 0 0 26% !important;
  padding: 0 0 0 20% !important;
}

.img-hover:hover {display: none;}



 }


@media only screen
  and (min-width: 577px)
  and (max-width: 991px)
{

  .call, .mail, .insta, .fb {
     background:none; text-align: left;  padding: 2% 0; font-size: 1.5rem }



}

@media only screen
  and (min-width: 577px)
  and (max-width: 767px)
{


  .call, .mail, .insta, .fb {
     background:none; text-align: center;  padding: 2% 0; font-size: 1.5rem }


}

@media only screen
  and (min-width: 993px)
  and (max-width: 1450px)
  {
    .img1 {
        background-size: cover;
        padding-bottom: 50%;
    }
    .img2 {
        background-size: cover;
        padding-bottom: 50%;
    }

    .img3 {
        background-size: cover;
        padding-bottom: 50%;
    }

    .img4 {
        background-size: cover;
        padding-bottom: 50%;
    }
    .lekcep1 {
      padding-top: 2.8% !important;
    }




}

@media only screen
  and (min-width: 768px)
  and (max-width: 991px)
  {
    .mt-small {
    margin-top:7%
  }



}

@media only screen
  and (min-width: 1px)
  and (max-width: 991px)
 {

   .img1 {
       background-size: cover;
       padding-bottom: 50%;
   }
   .img2 {
       background-size: cover;
       padding-bottom: 50%;
   }

   .img3 {
       background-size: cover;
       padding-bottom: 50%;
   }

   .img4 {
       background-size: cover;
       padding-bottom: 50%;
   }

   .footer_zuz {

     background-size: 200%;
     padding-bottom: 45%;
   }
   p.text {  padding: 2% 0px 0px 0px !important}

   .contact_col {
     text-align: left;
   }




}

@media only screen
  and (min-width: 1px)
  and (max-width: 575px)
 {

.nomobile {
     display: none; visibility: hidden;
   }
.menu {
  background-color: #9BBCBF !important;
}
.menu a {
  border-top: 1px solid #283B40;
}

.menu a.noborder {
  border: none;
}

.header_zuz {
  background: url('../IMG/background_mobile.jpg') no-repeat;
  background-position: right;
  background-size: 100%;
  max-width: 1920px;
}

.header_zuz h1 {
  font-size: min(max(1.5rem, 4vw), 80px);
  padding-top: 10%;
  padding-right: 5% ;
}



.header_zuz h2 {
    display: none;
}

h2.mobileonly {
  display:block;
  visibility:visible;
    font-family: 'light', sans-serif;
    color: #8C797C;
    font-size: min(max(1.7rem, 1.5vw), 30px);
    text-align: right;
    padding:0 5% 20% 0;
  }


.header_zuz h3 {
  font-size: 1rem;
  padding-bottom: 4%;
}

.content h2 {
  font-family: 'medium', sans-serif;
  font-style: italic;
  color: #9BBCBF;
  font-size: min(max(2rem, 2.5vw), 50px);
  text-align: center;

}


.circle span {
  font-size: min(max(1.7rem, 1.3vw), 30px);
}

.circle2 span {
  font-size: min(max(1.4rem, 1.3vw), 30px);
}

.circle {
      min-height: auto !important;
}

.contact_col {
  text-align: left;
  margin: 3% 0 0 5%
}

.circle2  {
       max-width: 150px !important;
       min-height: 150px !important;
     }


.mt-3 {
  margin: 0 !important
}

.mt-mobile {
  margin-top: 30px;
}

.lekce {
  font-family: 'medium', sans-serif;
  font-style: italic;
  color: #9BBCBF;
  font-size: min(max(1.2em, 1.2vw), 24px);
  text-align: left;
  padding-top: 3%;
}

  .img1 {
      background-size: cover;
      padding-bottom: 50%;
  }
  .img2 {
      background-size: cover;
      padding-bottom: 50%;
  }

  .img3 {
      background-size: cover;
      padding-bottom: 50%;
  }

  .img4 {
      background-size: cover;
      padding-bottom: 50%;
  }

  .footer_zuz {

    background-size: 200%;
    padding-bottom: 45%;
  }

.individual p {
  display: none;
  visibility: hidden
}

a.regmobile {
  display: block;
  width: 50%;
  min-width: 120px;
  margin: 5% auto;
  line-height: 3rem;
  background: #F2C894;
  border-radius: 0.7rem;
  color: #283B40;
  font-style: normal;
  text-align: center;
}

a.regmobile:hover {
  color: #F2C894 !important;
}

.mobileonly {
  display:block;
  visibility:visible;
}


}

.img-hover {margin-top: -1000%; top: -10000%}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

  html, body, div, span, object, h1, h2, h3, h4, h5, h6, ul, li, p, a, img, b, u, i, article, aside, footer, header, menu, nav, section, small {
                      font-size: 100%;}
  p {                 font-size: 120%; line-height: 150%;}

  .header_zuz h1 {
    font-size: 4em;}
  .header_zuz h2 {
    font-size: 3em;}

  .header_zuz h3 {
    font-size: 2rem;}

  .content h2 {
    font-size: 2.5em;}

  .circle span, .circle2 span {
    font-size: 1.5em;}

    .individual p {
      font-size: 1.1em;}

    .lekce {
      font-size: 1.2em;}

    .contact{
      font-size: 1.7em;}

}

@supports (-ms-ime-align: auto) {

  html, body, div, span, object, h1, h2, h3, h4, h5, h6, ul, li, p, a, img, b, u, i, article, aside, footer, header, menu, nav, section, small {
                      font-size: 102%;}
  p {                 font-size: 120%; line-height: 150%;}
  .header_zuz h1 {
    font-size: 4em;}
  .header_zuz h2 {
    font-size: 3em;}

  .header_zuz h3 {
    font-size: 2rem;}

  .content h2 {
    font-size: 2.5em;}

  .circle span, .circle2 span {
    font-size: 1.5em;}

    .individual p {
      font-size: 1.1em;}

    .lekce {
      font-size: 1.2em;}

    .contact{
      font-size: 1.7em;}



}