@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{
	  background: #fff;
	  background-repeat: repeat;
	  background-attachment: fixed;
	  background-position: center;
	  font-family: 'Poppins', sans-serif;
	  font-size: 18px;
}
header{
	background: #000;
	text-align: center;
	position: fixed;
	width: 100%;
	z-index: 100;
}
h1{
font-family: stilson-display, serif;
text-transform: uppercase;
line-height: auto;
letter-spacing: 3px;
font-size: calc(2rem + 2vw);
bottom: 2rem;
}
h2{
	font-family: neue-haas-grotesk-display, sans-serif;
	font-weight: 200;
	font-style: normal;
	font-size: calc(3rem + 3vw);
	color: #000;
}

h3{
	font-family: stilson-display, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 3rem;
}
ul{
	color: #fff;
}
li{
	text-decoration: none;
	color: #fff;
}
footer{
  background: #1f1f1f;
}

/*Header*/
.oper {
  background-size: 50%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: right top;
  height: 50vh;
  background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,249,249,1) 35%, rgba(199,199,199,1) 100%);
}

.tit1 {
  text-align: center;
  font-family: stilson-display, serif;
font-weight: 400;
font-style: normal;

  font-size: 4.5vw;
  padding: 25% 0px 25% 0px;
  text-transform: uppercase;
}


.parent-01 {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 8rem;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1-01 { grid-area: 1 / 4 / 7 / 7; }
.div2-01 { grid-area: 2 / 1 / 3 / 5; }
.div3-01 { grid-area: 3 / 1 / 5 / 4; }

/*---- 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----*/

/****
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%);
        }


.bajada{
	font-family: neue-haas-grotesk-display, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.3rem;
	letter-spacing: 1px;
	color: #000;
}

.elle{
	width: 150px;
	padding: 0.5rem;
}


.fondo{
	background: #000;
}
.fondo-3{
    background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,249,249,1) 35%, rgba(199,199,199,1) 100%);
}
.row{
	margin-left: 0px;
	margin-right: 0px;
}


/*boton*/
/* From Uiverse.io by mrhyddenn */ 
button.ver {
  background: #fff;
  border: none;
  padding: 10px 20px;
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  width: 160px;
  text-transform: uppercase;
  cursor: pointer;
  transform: skew(-21deg);
}

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

button.ver::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.ver:hover {
  color: #fff;
}

button.ver:hover::before {
  left: 0;
  right: 0;
  opacity: 1;
}
/*boton*/

.fondo-1{
  background: #F9F9F9;
  padding: 2rem;
  position: relative;
  right: -1rem;
}
.fondo-2{
  background: #1E1E1E;
  padding: 2rem;
  position: relative;
  right: 5rem;
  top: -1rem;
}

@media only screen and (max-width: 992px) {
  .fondo-2{
  background: #1E1E1E;
  padding: 2rem;
  position: relative;
  right: 0rem;
  top: 0rem;
}

.fondo-1{
  position: relative;
  right: 0rem;
}

.tit1 {
  text-align: center;
  font-family: stilson-display, serif;
font-weight: 400;
font-style: normal;

  font-size: 7vw;
  padding: 20% 0px 25% 0px;
  text-transform: uppercase;
}
}

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

.parent-01 {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1-01 { grid-area: 1 / 1 / 5 / 7; }
.div2-01 { grid-area: 4 / 1 / 6 / 7; }
.div3-01 { grid-area: 6 / 1 / 7 / 7; }


  .collage {
    width: 100%;
    height: 500px;
    margin: 20px auto;
    position: relative;
    padding-left: 0px!important;
}
    .fadein img{
    border: 5px solid #fff;
    }

.tit1 {
  text-align: center;
  font-family: stilson-display, serif;
font-weight: 400;
font-style: normal;

  font-size: 10vw;
  padding: 20% 0px 25% 0px;
  text-transform: uppercase;
}

}