/* ct */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Nosifer&family=Poppins:wght@600&family=Raleway:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');



body,html 
{
/*height:100%;*/
margin:0;
padding:0;
font:400 15px/1.8 "Roboto", sans-serif;

color:white;

background:black;
/*background:#00ABF1;*/
/*background-image: linear-gradient(#BBD0D5,#11212E);*/
}





#footer
{
background:black;
min-height:300px;
}

.innercont
{
margin:auto;
width:96%;
max-width:1200px;
}

#hiddenmenu
{
display:none;
}

.center
{
width:400px;
margin:auto;
text-align:center;
}










.yellowbutton
{
padding:10px;
background:yellow;
display:inline-block;
text-align:center;
}

.orangebutton
{
padding:10px;
display:inline-block;
background:orange;
text-align:center;
}








.fit
{

max-width:100%;
}

.banner
{
width:100%;
max-width:100%;
}






.parallax 
{
background-image: url("../style/viejas_pool.png");

/* Set a specific height */
height: 500px;

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

@media screen and (max-width:600px;)
{
.parallax 
{
height: 250px;
}
}






.lds-ring
{
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}

.lds-ring div
{
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1)
{
animation-delay: -0.45s;
}

.lds-ring div:nth-child(2)
{
  animation-delay: -0.3s;
}

.lds-ring div:nth-child(3)
{
  animation-delay: -0.15s;
}

@keyframes lds-ring
{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}










.col2
{
display:inline-block;
width:48%;
vertical-align:top;
}

.col3
{
display:inline-block;
width:32%;
vertical-align:top;
}

.col4
{
display:inline-block;
width:24%;
vertical-align:top;
}





a
{
text-decoration:none;
color:white;
}







.bgimg-1,.bgimg-2,.bgimg-3,.bgimg-4,.bgimg-5
{
position: relative;

background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.bgimg-1 
{
background-image: url("style/p1.png");
min-height: 100%;
/*min-height: 400px;jumping action*/
}

.bgimg-2 
{
background-image: url("style/p1.png");
min-height: 400px;
}

.bgimg-3 
{
background-image: url("style/p3.png");
min-height: 400px;
}

.bgimg-4
{
background-image: url("style/p7.png");
min-height: 400px;
}

.bgimg-5 
{
background-image: url("style/p10.png");
min-height: 400px;
}




/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) 
{
.bgimg-1,.bgimg-2,.bgimg-3,.bgimg-7,.bgimg-10
{
background-attachment:scroll;
}
}





.caption 
{
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}

.caption span.border 
{
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}




#menucont
{
width:100%;
background:black;
}





ul 
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:black;
}

li
{
float: left;
}

li a 
{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover 
{
background-color: #111;
}








.circle 
{
color:white;
font-size:48px;
width:80px;
height:80px;
border-radius:80px;
background:black;
border:1px solid white;
text-align:center;
display:table-cell;
vertical-align:middle;

overflow: visible;
}

.circle:hover 
{
box-shadow: rgba(255, 255, 255, 0.25) 0px 14px 25px, 
rgba(255, 255, 255, 0.12) 0px -12px 30px, rgba(255, 255, 255, 0.12) 0px 4px 6px, 
rgba(255, 255, 255, 0.17) 0px 12px 13px, rgba(255, 255, 255, 0.09) 0px -3px 5px;
}









#ti
{
border-radius:5px;
	
box-shadow: rgba(255, 255, 255, 0.25) 0px 14px 25px, 
rgba(255, 255, 255, 0.12) 0px -12px 30px, rgba(255, 255, 255, 0.12) 0px 4px 6px, 
rgba(255, 255, 255, 0.17) 0px 12px 13px, rgba(255, 255, 255, 0.09) 0px -3px 5px;
}

.graddj
{
background: #c31432;  
background: -webkit-linear-gradient(to right, #240b36, #c31432); 
background: linear-gradient(to right, #240b36, #c31432); 
}


canvas 
{ 
width:100%;
height:80px;
} 



.slider
{
-webkit-appearance:none;  
appearance: none;
width: 100%;
height:5px;
background:purple;
outline: none;
opacity: 0.7; 
-webkit-transition: .2s; 
transition: opacity .2s;
}


















.red
{
color:red;
}









h3
{
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}