*{
	padding: 0px;
	margin: 0px;
	border: 0px;
}
  :root{
  /* Colores */
  --gris:#000;
  --negro:#0e161c;
  }
header{
	background: #000;
}
body{
	font-family: "adobe-garamond-pro", serif;
  font-style: ;font-weight: 400;
  font-style: normal;
	font-size: 16px;
	background: #ffffff;
	overflow-x: hidden!important;

}
h3{
	  font-family: "quasimoda", sans-serif;
    font-weight: 500;
    font-style: normal;
	  font-size: 2rem;
	  text-transform: uppercase;
}
footer{
	background-color: #000;
}
.conoce{
	height: 40px;
}
.logo{
  height: 40px;
  margin: 1rem 0rem;
}
a.presentado{
    font-style: 14px;
    color: #999;
}
.bajada{
	background: #ffffff;
	color: #000000;
  font-family: "adobe-garamond-pro", serif;
  font-style: ;font-weight: 400;
  font-style: normal;
  	font-size: 1.6rem;
}

/*Header*/
.oper{
    background-image: url(../img/ro-portada.jpg);
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top;
    max-height: 800px;
}

.tit1{
    text-align: center;
    font-family: "quasimoda", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 5vw;
    padding: 18% 0px 18% 0px;
    color: #fff;
    text-shadow: 0px 0px 20px #000;
    text-align: -webkit-center;
    text-transform: uppercase;
}
/*Header*/

.bg-n{
	background: #000;
}
.box{
	border: 1px solid #a2a2a2;
	padding: 2rem;
}

/*---- seccion 1----*/
.parent {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 20px;
grid-row-gap: 15px;
}

.div1 { grid-area: 1 / 7 / 4 / 10; }
.div2 { grid-area: 1 / 1 / 4 / 4; }
.div3 { grid-area: 3 / 6 / 6 / 9; }
.div4 { grid-area: 3 / 2 / 6 / 5; }
.div5 { grid-area: 1 / 4 / 4 / 7; }
/*---- seccion 1----*/



/* Start: Video Responsive */
.video-responsive {
    overflow:hidden;
    padding-bottom:400px; /* Adecua este valor para controlar la altura del video */
    position:relative;
    height:0;
}

.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
/* End: Video Responsive */



button.link {
  background: #fff;
  border: none;
  padding: 10px 20px;
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  width: 150px;
  text-transform: uppercase;
  cursor: pointer;
  transform: skew(-21deg);
}

span {
  display: inline-block;
  transform: skew(21deg);
}

button.link::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  left: 0;
  background: rgb(20, 20, 20);
  opacity: 0;
  z-index: -1;
  transition: all 0.5s;
}

button.link:hover {
  color: #fff;
}

button.link:hover::before {
  left: 0;
  right: 0;
  opacity: 1;
}
.redes{
	border: solid 2px #000;
	border-radius: 50%;
	padding: 0.5rem;
	margin: 10px;
}
.icono{
	width: 25px;
	height: auto;
}
/****
Images by 
Bryan Moats, Mike Dornseif, Griffin Moore, Andrea Austoni, Jack Hughes, Jeremy Fryc
****/

.fadein img{
transition: 1s ease;
filter: grayscale(100%);
border: 12px solid #fff;
}

.fadein img:hover{
filter: grayscale(0%);

transition: 1s ease;

transform: scale(1.2);
transition: 1s ease;

z-index: 10;
position: relative;
}

.div1 img{
    transform: rotateZ(15deg);
}
.div1 img:hover{
    transform: rotateZ(0deg);
    transform: scale(1.2);
}
.div2 img{
    transform: rotateZ(15deg);
}
.div2 img:hover{
    transform: rotateZ(0deg);
    transform: scale(1.2);
}
.div3 img{
    transform: rotateZ(-10deg);
}
.div3 img:hover{
    transform: rotateZ(0deg);
    transform: scale(1.2);
}
.div4 img{
    transform: rotateZ(10deg);
}
.div4 img:hover{
    transform: rotateZ(0deg);
    transform: scale(1.2);
}
.div5{
    transform: rotateZ(0deg);
}

body { background-color: #ffffff; }

.collage {
    width: 100%;
    height: 500px;
    margin: 20px auto;
    position: relative;
}

    . a {
        position: absolute;
        max-width: 290px;
        padding: 10px;
        background-color:rgb(255,255,255);
    
            transform:rotate(-7deg);
        -ms-transform:rotate(-7deg); 
        -moz-transform:rotate(-7deg);
        -webkit-transform:rotate(-7deg);
        -o-transform:rotate(-7deg);
  
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        transition: all 0.2s linear;
        
        /*** Fix for Webkit to resolve the flickering issue
             Suggested by erikhatfield ***/
        -webkit-transform-style: preserve-3d;
    
        -moz-box-shadow:1px 1px 3px rgba(0,0,0,0.2);
        -webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.2);
        box-shadow:1px 1px 3px rgba(0,0,0,0.2);
        -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=1,OffY=1,Color=#33000000,Positive=true)";
        filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1,OffY=1,Color=#33000000,Positive=true);
    }

    .collage a:nth-child(2) {
            transform:rotate(7deg);
        -ms-transform:rotate(7deg); 
        -moz-transform:rotate(7deg);
        -webkit-transform:rotate(7deg);
        -o-transform:rotate(7deg);
        margin-left: 30%;
    }

    .collage a:nth-child(3) {
            transform:rotate(-15deg);
        -ms-transform:rotate(-15deg); 
        -moz-transform:rotate(-15deg);
        -webkit-transform:rotate(-15deg);
        -o-transform:rotate(-15deg);
        margin-left: 60%;
    }

    .collage a:nth-child(4) {
            transform:rotate(-15deg);
        -ms-transform:rotate(-15deg); 
        -moz-transform:rotate(-15deg);
        -webkit-transform:rotate(-15deg);
        -o-transform:rotate(-15deg);
        margin-top: 150px;
        margin-left: 15%;
    }

    .collage a:nth-child(5) {
            transform:rotate(7deg);
        -ms-transform:rotate(7deg); 
        -moz-transform:rotate(7deg);
        -webkit-transform:rotate(7deg);
        -o-transform:rotate(7deg);
        margin-left: 50%;
        margin-top: 150px;
    }
    

        .collage a img {
            max-width: 100%;
            max-height: 100%;
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
            filter: gray;
            -webkit-filter: grayscale(100%);
        }

        .collage a:hover { 
            z-index: 999;
                transform:rotate(0deg);
            -ms-transform:rotate(0deg); 
            -moz-transform:rotate(0deg);
            -webkit-transform:rotate(0deg);
            -o-transform:rotate(0deg);
            
            -webkit-transition: all 0.2s linear;
            -moz-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
            -ms-transition: all 0.2s linear;
            transition: all 0.2s linear;
        }

        .collage a:hover > img {
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
            -webkit-filter: grayscale(0%);
        }

@media only screen and (max-width: 1200px) {

.tit1{
    font-size: 9w!important;
}
}

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

	.oper{
    background-image: url(../img/ro-portada-movile.jpg);
}

    .collage {
    padding-left: 1px!important;
}
    .fadein img{
    border: 5px solid #fff;
    }


.tit1{
    font-size: 5vw;
}
  
  .parent-2 {
    grid-template-rows: repeat(4, 1fr);
	}
}

@media only screen and (max-width: 514px){
    
    .oper{
    background-image: url(../img/ro-portada-movile.jpg);
}
.tit1{
    font-size: 10vw;
    }
  .collage {
    width: 100%;
    height: 500px;
    margin: 20px auto;
    position: relative;
    padding-left: 0px!important;
}
    .fadein img{
    border: 5px solid #fff;
    }

}