@charset "UTF-8";
/* CSS Document */

@font-face{
	font-family: Roboto-Regular;
 src:url(../fonts/Roboto-Regular.ttf);
}

@font-face{
	font-family: Roboto-Bold;
 src:url(../fonts/Roboto-Bold.ttf);
}
 
@font-face{
	font-family: Gotham-Medium;
 src:url(../fonts/GothamRnd-Medium.otf);
}

@font-face{
	font-family: Gotham-Bold;
 src:url(../fonts/GothamRnd-Bold.otf);
}



/*   Estilo slider tuneado Gabi   */
div.sliderJokin {  
width: 60%;
height:100%; 
position: absolute; 
left:10%;
top:10%;
overflow: hidden;
border:20px solid #ffffff;}


@media(max-width: 1600px) {

  div.sliderJokin {  

top:2%;}



}/**cierra query**/



div.sliderJokin > div { 
	width: 100%;
}

.overlay-slide-1 {width: 50%;
height: 100%;
padding-top: 20%;
    color: #c0c0c2;
    padding-left: 30px;
    font-family:'Roboto-Regular';
}

.overlay-slide-1 h2 {font-family: 'Gotham-Medium';
font-size: 30px;
color:#ffffff;}


.overlay-slide-1 p {font-family: 'Gotham-Medium';
font-size: 20px;
color:#c8c8c8;
line-height: 1.3;
padding-top: 20px;}



.rojito {color:#f56c6e;}

.verde {color:#81d330}

.azul {color:#5093e0;}

.texto_dentro_slide {position: absolute;
	top:20px;

}



@media (max-width: 1300px) {

  .overlay-slide-1 {
    padding-top: 10%;}

}/** cierra query **/

@media (min-width: 4992px) {
  div.sliderJokin {  
width: 60%;
height:100%; }


} 

/*
div.sliderJokin div.overflowhidden
{
width:100%;
height: 100%;
overflow: hidden;
position: absolute;
top:0px;
left:0px;
}

*/

div.sliderJokin img { 


width: 100%; 
display: block; 
background-size: cover;

}


div.relative
{
position: relative;

}


div.sliderJokin  div.mueve_mueve
{
	position:relative;
	width:100%; 
	height: 100%;
	top:0px;
	left: 0px; 
	
	/* border: 1px red solid;  */

}



div.sliderJokin div.itemSlide 
{
	
	float: left; 
	width:100%;

}


div.sliderJokin div.navegador > div
{
	width: 100%;
	height: 100%;


}




div.sliderJokin div.navegador
{

bottom: 0px;
left: 0px;
position: absolute;
width: 100%;
/* height:100%; */

}

div.sliderJokin div.flechaPrev {  
	width: 4%;
	height: 16%;
	cursor: pointer;
	position: absolute;
	top: 40%;
	left: 0px;




}

div.sliderJokin div.flechaNext 
{  
width: 4%;
	height: 16%;
	cursor: pointer;
	position: absolute;
	top: 40%;
	right: 0px;


}


div.trueprev {
    background: transparent url(../blocks/Triangulo.png);
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto;
    position: absolute;
    top: 90%;
    left: 45%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-position: center;
    background-size: cover;
      transform: rotate(180deg);
 


}

div.truenext 
{
 background: transparent url(../blocks/Triangulo.png);
position: absolute;
     background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto;
    position: absolute;
    top: 90%;
    left: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-position: center;
    background-size: cover;
  
}




div.sliderJokin div.marco
{
	position: absolute;
	width:957px;
	height: 400px; 
	
	border-left: 1px white solid;
	border-right: 1px white solid;
	
	


}

div.sliderJokin a 
{
	display: block; 
	z-index:99;
	
}