p1 { 
font-family: roboto; 
font-size: 14px; 
color: #b0b8ba;
}
@font-face {
font-family: roboto;
src: url(roboto.ttf);
}

a.p1, a.p1:visited, a.p1:active {
color: #b0b8ba;
text-decoration: none;
}

a.p1:hover {
color: #1a8fac;
text-decoration: underline;
}

p2 {
font-family: logo;
font-size: 16px;
color: #ffffff;
}
@font-face {
font-family: logo;
src: url(logo.ttf);
}
	
a.p2, a.p2:visited, a.p2:active {
color: #ffffff;
text-decoration: none;
}

a.p2:hover {
color: #ffffff;
font-weight: bold;
text-decoration: underline;
}

p3 { 
font-family: roboto;
font-size: 16px;
color: #ffffff;
}	
@font-face {
font-family: roboto;
src: url(roboto.ttf);
}

a.p3, a.p3:visited, a.p3:active {
color: #ffffff;
text-decoration: none;
}

a.p3:hover {
color: #c4f2fd;
text-decoration: none;
}

p4 { 
font-family: roboto;
font-size: 20px; 
color: #ffffff;
}
@font-face {
font-family: roboto;
src: url(roboto.ttf);
}

a.p4, a.p4:visited, a.p4:active {
color: #ffffff;
text-decoration: none;
}

a.p4:hover {
color: #c4f2fd;
text-decoration: none;
}

p5 {
font-family: logo;
font-size: 30px;
color: #428da2;
}
@font-face {
font-family: logo;
src: url(logo.ttf);
}

a.p5, a.p5:visited, a.p5:active {
color: #428da2;
text-decoration: none;
}

a.p5:hover {
color: #2f6675;
text-decoration: none;
}

p6 { 
font-family: roboto;
font-size: 16px;
color: #000000;
}
@font-face {
font-family: roboto;
src: url(roboto.ttf);
}

a.p6, a.p6:visited, a.p6:active {
color: #428da2;
text-decoration: none;
}

a.p6:hover {
color: #428da2;
text-decoration: underline;
}

p7 { 
font-family: roboto;
font-size: 16px;
color: #3d8b9e;
}
@font-face {
font-family: roboto;
src: url(roboto.ttf);
}

p8 { 
font-family: roboto;
font-size: 14px;
color: #ffffff;
}
@font-face {
font-family: roboto;
src: url(roboto.ttf);
}

p9 {
font-family: logo;
font-size: 30px;
color: #ffffff;
}
@font-face {
font-family: logo;
src: url(logo.ttf);
}

a.p9, a.p9:visited, a.p9:active {
color: #ffffff;
text-decoration: none;
}

a.p9:hover {
color: #c4f2fd;
text-decoration: none;
}

p10 { 
font-family: roboto;
font-size: 10px;
color: #ffffff;
}
@font-face {
font-family: roboto;
src: url(roboto.ttf);
}

a.p10, a.p10:visited, a.p10:active {
color: #ffffff;
text-decoration: none;
}

a.p10:hover {
color: #c4f2fd;
text-decoration: none;
}

p11 {
font-family: logo;
font-size: 20px;
color: #428da2;
}
@font-face {
font-family: logo;
src: url(logo.ttf);
}

p14 { 
font-family: roboto;
font-size: 16px;
color: #000000;
}
@font-face {
font-family: roboto;
src: url(roboto.ttf);
}	

a.p14, a.p14:visited, a.p14:active {
color: #000000;
text-decoration: none;
}

a.p14:hover {
font-weight: bold;
color: #ffffff;
text-decoration: underline;
}

p15 {
font-family: logo;
font-size: 30px;
color: #3d8b9e;
}
@font-face {
font-family: logo;
src: url(logo.ttf);
}

p16 { 
font-family: roboto;
font-size: 15px;
color: #428da2;
}
@font-face {
font-family: roboto;
src: url(roboto.ttf);
}

p17 { 
font-family: roboto;
font-size: 20px; 
color: #3d8b9e;
}
@font-face {
font-family: roboto;
src: url(roboto.ttf);
}

a.p17, a.p17:visited, a.p17:active {
color: #3d8b9e;
text-decoration: none;
}

a.p17:hover {
color: #52b4cc;
text-decoration: none;
}

logo {
font-family: logo;
font-weight: bold;
font-size: 20px;
color: #428da2;
}hl

@font-face {
font-family: logo;
src: url(logo.ttf);
}
a.logo, a.logo:visited, a.logo:active, a.logo:hover {
color: #428da2;
text-decoration: none;
}


logoMain {
font-family: logo;
font-weight: bold;
font-size: 20px;
color: #ffffff;
}
a.logoMain, a.logoMain:visited, a.logoMain:active, a.logoMain:hover {
color: #ffffff;
text-decoration: none;
}



slogan {
font-family: roboto;
font-size: 50px;
color: white;
opacity: 0.5;
text-shadow: 1px 1px 2px black;


}
@font-face {
font-family: roboto;
src: url(roboto.ttf);
}

slogan1 {
font-family: logo;
font-size: 50px;
color: #efefef;
}

slogan2 {
font-family: logo;
font-size: 40px;
color: #fff;
}


.heading { 
vertical-align:top;
font-size:20px;
font-weight: 600;
font-family: roboto;
color: #1a8fac;
}
@font-face {
font-family: roboto;
src: url(roboto.ttf);
}

p18 { 
font-family: bahn;
font-size: 110px;
color: #1a8fac;
}
@font-face {
font-family: bahn;
src: url(bahn.ttf);
}





table.t1 { 
background-image: url('../files/main.jpg'); 
background-size: cover;
background-position: right;
}

table.t2 { 
background-image: url('../files/area.jpg'); 
background-size: cover;
opacity: 0.5;
}

table.t3 { 
border-top: 1px solid  #2a879e;
}

table.t4 { 
background-image: url('../files/main-news.jpg'); 
background-size: cover;
background-position: center;
}

table.t5 { 
border-top: 1px solid #E4E4E4;
}

table.t6 { 
background-image: url('../files/main-about.jpg'); 
background-size: cover;
background-position: center;
}

table.t7 { 
background-image: url('../files/main-classes.jpg'); 
background-size: cover;
background-position: bottom;
}

table.t8 { 
background-image: url('../files/main-classes-jun.jpg'); 
background-size: cover;
background-position: bottom;
}


table.t9 { background-image: url('../files/camps.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center;
opacity: 0.5;
}

table.t10 { 
background-image: url('../files/main-classes-camps.jpg');
background-size: cover;
background-position: bottom;
}

table.t11 { 
background-image: url('../files/main-bookings.jpg'); 
background-size: cover;
background-position: center;
}

table.t12 { 
background-image: url('../files/main-online.jpg'); 
background-size: cover;
background-position: center;
}

table.t13 { 
background-image: url('../files/main-policies.jpg'); 
background-size: cover;
background-position: center;
}

table.t14 { 
background-image: url('../files/main-classes-adults.jpg'); 
background-size: cover;
background-position: center;
}

table.t15 { 
background-image: url('../files/main-calendar.jpg'); 
background-size: cover;
background-position: center;
}

table.t16 { 
background-image: url('../files/main-vouchers.jpg'); 
background-size: cover;
background-position: center;
}

table.t17 { 
background-image: url('../files/main-gallery.jpg'); 
background-size: cover;
background-position: top;
}

table.t18 { background-image: url('../files/classes-adults.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center;
}

table.t19 { 
background-image: url('../files/main-cardio1.jpg'); 
background-size: cover;
background-position: top;
}

table.t20 { 
background-image: url('../files/main-ladies.jpg'); 
background-size: cover;
background-position: middle;
}

table.t21 { 
background-image: url('../files/main-privatecourts.jpg'); 
background-size: cover;
background-position: middle;
}


button {
background-color: transparent;
display: inline-block;
width: 120px;
padding: 8px;
color: #fff;
border: 1px solid #fff;
border-radius: 8px;
text-align: center;
outline: none;
text-decoration: none;
font-family: roboto;
font-size: 16px;
cursor: pointer;  
}

button:hover,
button:active {
background-color: #fff;
color: #000;
}

button1 {
background-color: transparent;
display: inline-block;
width: 120px;
padding: 8px;
color: #000;
border: 1px solid #DFDFDF;
border-radius: 8px;
text-align: center;
outline: none;
text-decoration: none;
font-family: roboto;
font-size: 16px;
cursor: pointer;  
}

button1:hover,
button1:active {
background-color: #ECECEC;
color: #fff;
}

button2 {
background-color: transparent;
display: inline-block;
width: 160px;
padding: 8px;
color: #000;
border: 1px solid #DFDFDF;
border-radius: 8px;
text-align: center;
outline: none;
text-decoration: none;
font-family: roboto;
font-size: 16px;
cursor: pointer;  
}

button2:hover,
button2:active {
background-color: #ECECEC;
color: #fff;
}

button3 {
background-color: transparent;
display: inline-block;
width: 120px;
padding: 8px;
color: #3d8b9e;
border: 1px solid #3d8b9e;
border-radius: 8px;
text-align: center;
outline: none;
text-decoration: none;
font-family: roboto;
font-size: 16px;
cursor: pointer;  
}

button3:hover,
button:active {
background-color: #fff;
border: 1px solid #fff;
color: #000;
}


input {
width: 350px;
padding: 15px 22px;
margin: 10px 5px;
border: none;
border-radius: 8px;
font-family:roboto;
font-size:14px;
text-align:center;
}

input[type=button], input[type=submit] {
text-decoration: none;
background-color: #29bde1;
color: #fff;
font-family:roboto;
cursor: pointer;  
}

input[type=button]:hover, input[type=submit]:hover {
background-color: #1a8fac;
color: #fff;
}

highlight {
background-color: #ffffff;
font-family: logo;
font-size: 50px;
color: #000000;
}

highlight1 {
background-color: #1a8fac;
}

textarea {
padding: 15px 22px;
margin: 10px 5px;
border: none;
border-radius: 8px;
font-family:roboto;
font-size:14px;
}

.hov:hover
{
     opacity: 0.5;
}


.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500px;
  background-color: green;
    z-index: 2;
  opacity: 0.1;
}

#videowrapper{  
    position: relative;
} 



#fullScreenDiv{

position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    z-index: 0;
	overflow: hidden;
	
	}


@media (min-aspect-ratio: 16/9) {
  #video{
    width: 100vw; 
    height:auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  #video {
    height: 100vh; 
    width:auto;
    margin-left: 50vw;
    transform: translate(-50%);
  }
}

#videoMessage{
    width: 100%; 
    height: 100%;
    position: absolute; 
    top: 0; 
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.flash:hover {
  opacity: 1;
  -webkit-animation: flash 1s;
  animation: flash 1s;
}

@-webkit-keyframes flash {
  0% {  opacity: .3;  }
  100% { opacity: 1; }
}
@keyframes flash {
  0% { opacity: .3; }
  100% { opacity: 1;  }
}