@font-face {
    
font-family: 'Open Sans', sans-serif;    
}

body{
    
margin: 0 auto;
overflow-x: hidden;
overflow-y: hidden;


}

/* si la pantalla mide mas de 960 */
@media screen and (min-width: 960px){
 
	
.wrapper {
    
width: 100%;
margin: 0 auto;
    
}
    
a {
    
text-decoration: none;
color: black;

}

.BotonDescargaDossier {

font-family: 'Open Sans', sans-serif;
width: 100%;
position: absolute;
float: right;
z-index: 999999000;
text-align: right;
text-decoration: none;
margin-top: 1%;

}
 
.BotonDescargaDossier p {  
    
border-width: 2px;   
border-style: solid;  
padding-top: 1.5%;
padding-bottom: 1.5%;
padding-left: 2%;
padding-right: 2%;
float: right;
margin-right: 2.5%;
font-weight: 900;
letter-spacing: 2px;
font-size: 90%;
font-weight: bolder;
border-radius: 2.5px;
-webkit-transition-duration: 0.2s; /* Safari */
transition-duration: 0.2s;
    
}

.BotonDescargaDossier p:hover {  
    
border-width: 2px;
border-style: solid;
border-color: black;
padding-top: 1.5%;
padding-bottom: 1.5%;
padding-left: 2%;
padding-right: 2%;
float: right;
margin-right: 2.5%;
background-color: black;
border-radius: 2.5px;
color: white;

}
    
.RedesSociales{

width: 21%;
position: absolute;
float: left;
z-index: 1999999000;
text-align: center;
margin: 2%;

}
    
.RedesSociales img {
    
width: 20%;
float: left;
z-index: 999999000;
margin-right: 10px;
z-index: 1999999000;


}

.RedesSociales img:hover {
    
width: 20%;
float: left;
z-index: 999999000;
margin-right: 10px;
z-index: 1999999000;
border-radius: 100px;
opacity: 0.6;
}

h1{

font-family: 'Open Sans', sans-serif;
color: #000000;
margin-top: 33%;
z-index: 5000;
position: absolute;
width: 100%;
text-align: center;
font-size: 110%;
font-weight: bolder;
line-height: 2;



}

h1.contacto_catering{

font-family: 'Open Sans', sans-serif;
color: #000000;
margin-top: 40%;
z-index: 5000;
position: absolute;
width: 100%;
text-align: center;
font-size: 110%;
line-height: 2;
letter-spacing: 2px;


}
    
h1.contacto_catering:hover{

font-family: 'Open Sans', sans-serif;
opacity: 0.6;
margin-top: 40%;
z-index: 5000;
position: absolute;
width: 100%;
text-align: center;
font-size: 110%;
letter-spacing: 2px;


}
    
.Caja_Logo {
    
width: 100%;
position: absolute;
z-index: 4000;
text-align: center;
margin-top: 12%;

}

img.logo {
    
text-align: center;
width: 50%;

}

.slider{
  
width:100%;
height: 500PX;
overflow:hidden;
float: left;
background-color: white;
margin: 0 auto;

}
    
img.photo{
  
position: absolute;
animation:round 16s infinite;
opacity:0;
margin: 0 auto;
width: 100%;

}
    
.carrusel2 {

display: none;

} 

.carrusel3 {

display: none;

} 

.rslides { 
  
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0 auto;
  
}

.rslides li {
  
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
margin: 0 auto;
 
}

.rslides li:first-child {
  
position: relative;
display: block;
float: left;
  
}

.rslides img {
  
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
margin: 0 auto;
  
}

@keyframes round{   
  
  25%{opacity:1;}
  40%{opacity:0;}

} 

img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
    


}

/* si la pantalla esta entre 320 y 959. dentro coloco lo que quiero cambiar con los nuevos porcentajes*/
@media screen and (min-width: 520px) and (max-width: 960px) {


a {
    
text-decoration: none;
color: black;

}

.BotonDescargaDossier {

font-family: 'Open Sans', sans-serif;
width: 100%;
position: absolute;
z-index: 999999000;
text-align: center;
text-decoration: none;
margin-top: 1%;

}
 
.BotonDescargaDossier p {  
    
border-width: 2px;   
border-style: solid;  
padding-top: 1.5%;
padding-bottom: 1.5%;
padding-left: 1.2%;
padding-right: 1.2%;
margin-right: 35%;
margin-left: 35%;
margin-top: 55%;
float: center;
font-weight: 900;
letter-spacing: 2px;
font-size: 90%;
font-weight: bolder;
border-radius: 2.5px;
-webkit-transition-duration: 0.2s; /* Safari */
transition-duration: 0.2s;
    
}

.BotonDescargaDossier p:hover {  
    
border-width: 2px;
border-style: solid;
border-color: black;
padding-top: 1.5%;
padding-bottom: 1.5%;
padding-left: 1.2%;
margin-top: 55%;
padding-right: 1.2%;
margin-right: 35%;
margin-left: 35%;
float: center;
background-color: black;
border-radius: 2.5px;
color: white;

}
    
.RedesSociales{

width: 41%;
position: absolute;
float: left;
z-index: 1999999000;
text-align: center;
margin: 2%;

}
    
.RedesSociales img {
    
width: 20%;
float: left;
z-index: 999999000;
margin-right: 10px;
z-index: 1999999000;


}

.RedesSociales img:hover {
    
width: 20%;
float: left;
z-index: 999999000;
margin-right: 10px;
z-index: 1999999000;
border-radius: 100px;
opacity: 0.6;
}

h1{

font-family: 'Open Sans', sans-serif;
color: #000000;
margin-top: 33%;
z-index: 5000;
position: absolute;
width: 100%;
text-align: center;
font-size: 100%;
font-weight: bolder;
line-height: 1.5;



}

h1.contacto_catering{

font-family: 'Open Sans', sans-serif;
color: #000000;
margin-top: 78%;
z-index: 5000;
position: absolute;
width: 100%;
text-align: center;
font-size: 100%;
line-height: 1.5;
letter-spacing: 2px;


}
    
h1.contacto_catering:hover{

font-family: 'Open Sans', sans-serif;
opacity: 0.6;
margin-top: 78%;
z-index: 5000;
position: absolute;
width: 100%;
text-align: center;
font-size: 100%;
letter-spacing: 2px;
line-height: 1.5;


}
    
.Caja_Logo {
    
width: 100%;
position: absolute;
z-index: 4000;
text-align: center;
margin-top: 26%;

}

img.logo {
    
text-align: center;
width: 65%;

}

.slider{
  
width:100%;
height: 500px;
overflow:hidden;
float: left;
background-color: white;

}
    
img.photo{
  
position: absolute;
animation:round 16s infinite;
opacity:0;
margin: 0 auto;
width: 100%;

}
    
.carrusel {
    
display: none;
    
}

.carrusel3 {

display: none;

}

.rslides { 
  
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
  
}

.rslides li {
  
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;

}

.rslides li:first-child {
  
position: relative;
display: block;
float: left;
  
}

.rslides img {
  
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
  
}

@keyframes round{   
  
25%{opacity:1;}
40%{opacity:0;}

} 

img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}


}

@media screen and (min-width: 320px) and (max-width: 519px) {

a {
    
text-decoration: none;
color: black;

}

.BotonDescargaDossier {

font-family: 'Open Sans', sans-serif;
width: 100%;
position: absolute;
z-index: 999999000;
text-align: center;
text-decoration: none;
margin-top: 1%;

}
 
.BotonDescargaDossier p {  
    
border-width: 2px;   
border-style: solid;  
padding-top: 2%;
padding-bottom: 1.5%;
padding-left: 1.2%;
padding-right: 1.2%;
margin-right: 25%;
margin-left: 25%;
margin-top: 85%;
float: center;
font-weight: 900;
letter-spacing: 2px;
font-size: 90%;
font-weight: bolder;
border-radius: 2.5px;
-webkit-transition-duration: 0.2s; /* Safari */
transition-duration: 0.2s;
    
}

.BotonDescargaDossier p:hover {  
    
border-width: 2px;
border-style: solid;
border-color: black;
padding-top: 2%;
padding-bottom: 1.5%;
padding-left: 1.2%;
margin-top: 85%;
padding-right: 1.2%;
margin-right: 25%;
margin-left: 25%;
float: center;
background-color: black;
border-radius: 2.5px;
color: white;

}
    
.RedesSociales{

width: 71%;
position: absolute;
float: left;
z-index: 1999999000;
text-align: center;
margin: 4%;

}
    
.RedesSociales img {
    
width: 20%;
float: left;
z-index: 999999000;
margin-right: 10px;
z-index: 1999999000;


}

.RedesSociales img:hover {
    
width: 20%;
float: left;
z-index: 999999000;
margin-right: 10px;
z-index: 1999999000;
border-radius: 100px;
opacity: 0.6;
}

h1{

font-family: 'Open Sans', sans-serif;
color: #000000;
margin-top: 33%;
z-index: 5000;
position: absolute;
width: 100%;
text-align: center;
font-size: 100%;
font-weight: bolder;
line-height: 1.5;



}

h1.contacto_catering{

font-family: 'Open Sans', sans-serif;
color: #000000;
margin-top: 120%;
z-index: 5000;
position: absolute;
width: 100%;
text-align: center;
font-size: 80%;
line-height: 1.5;
letter-spacing: 2px;


}
    
h1.contacto_catering:hover{

font-family: 'Open Sans', sans-serif;
opacity: 0.6;
margin-top: 120%;
z-index: 5000;
position: absolute;
width: 100%;
text-align: center;
font-size: 80%;
letter-spacing: 2px;
line-height: 1.5;


}
    
.Caja_Logo {
    
width: 100%;
position: absolute;
z-index: 4000;
text-align: center;
margin-top: 46%;

}

img.logo {
    
text-align: center;
width: 75%;

}

.wrapper {
    
width: 100%;

}
    
img.photo{
  
position: absolute;
animation:round 16s infinite;
opacity:0;
margin: 0 auto;
width: 100%;

}

.carrusel {

display: none;

}
	
.carrusel2 {

display: none;

}

.rslides { 
 

position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;

}

.rslides li {
  
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
  
}

.rslides li:first-child {
  
position: relative;
display: block;
float: left;
  
}

.rslides img {
  
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
  
}

@keyframes round{   
  
  25%{opacity:1;}
  40%{opacity:0;}
} 

img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
    

}