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


/* font-family: 'Roboto', sans-serif; */

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css");

:root {
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
} 





@keyframes travel {
   0%, 100% {
      transform: translate3d(0,0,0);
    }
   50% {
      transform: translate3d(-100%,0,0);
    }
 }

.column {
	flex-direction: column;
}

html {
	text-align: justify;
}

header {
   max-width: 100%;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   overflow: hidden;
  }

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

.parent > div {
	background-size: cover; background-repeat: no-repeat;
}

.lb {
	padding-bottom: 4rem;
}

.div1 { grid-area: 1 / 1 / 3 / 2;
background-image: url(../img/lookbook-05.png);}
.div2 { grid-area: 1 / 2 / 2 / 3;
background-image: url(../img/lookbook-01.png);}
.div3 { grid-area: 1 / 3 / 2 / 4; 
background-image: url("../img/lookbook-02.png");}
.div4 { grid-area: 2 / 2 / 3 / 3;
background-image: url("../img/lookbook-03.png");}
.div5 { grid-area: 2 / 3 / 3 / 4;
background-image: url("../img/lookbook-04.png");}
.div6 { grid-area: 3 / 3 / 5 / 4; 
background-image: url("../img/lookbook-06.png");}
.div7 { grid-area: 4 / 2 / 5 / 3;
background-image: url("../img/lookbook-10.png");}
.div8 { grid-area: 3 / 2 / 4 / 3; 
background-image: url("../img/lookbook-08.png");}
.div9 { grid-area: 3 / 1 / 4 / 2; 
background-image: url("../img/lookbook-07.png");}
.div10 { grid-area: 4 / 1 / 5 / 2;
background-image: url("../img/lookbook-09.png");}
.div11 { grid-area: 5 / 1 / 7 / 2;
background-image: url("../img/lookbook-11.png");}
.div12 { grid-area: 5 / 2 / 6 / 3; 
background-image: url("../img/lookbook-12.png");}
.div13 { grid-area: 6 / 2 / 7 / 3; 
background-image: url("../img/lookbook-14.png");}
.div14 { grid-area: 5 / 3 / 6 / 4;
background-image: url("../img/lookbook-13.png");}
.div15 { grid-area: 6 / 3 / 7 / 4; 
background-image: url("../img/lookbook-15.png");}
.div16 { grid-area: 7 / 3 / 9 / 4; 
background-image: url("../img/lookbook-16.png");}
.div17 { grid-area: 8 / 2 / 9 / 3; 
background-image: url("../img/lookbook-20.png");}
.div18 { grid-area: 7 / 2 / 8 / 3; 
background-image: url("../img/lookbook-18.png");}
.div19 { grid-area: 7 / 1 / 8 / 2; 
background-image: url("../img/lookbook-17.png");}
.div20 { grid-area: 8 / 1 / 9 / 2; 
background-image: url("../img/lookbook-19.png");}


.row {
   display: flex;
   overflow: hidden;
  }

.imagegroup {
   display: flex;
   width: 100%;
  }

.imagegroup img{
  flex-shrink: 0;
  object-fit: cover;
  border: 3px solid white;
}


.contact {
	
	margin: 0 auto; 
	padding-top: 2rem;
	padding-left: 20rem;
	padding-right: 20rem;
}


.imagegroup {
   animation: travel 20s ease-in-out infinite;
  }

@keyframes travel {
   0%, 100% {
      transform: translate3d(0,0,0);
    }
   50% {
      transform: translate3d(-100%,0,0);
    }
 }

/*
h1,
        p {
            color: black;
            max-width: 85%;
        }
*/

        body {
            background: white;
           font-family: 'Roboto', sans-serif;
           
	
        }
h6 {
	color:gray;
	font-weight: 300;
}
        .navigation {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: linear-gradient(200deg, #407C9E, #755AA8);
            transform: scale(0);
            transition: all .5s ease;
            z-index: 2;
        }

        .open {
            transform: scale(1);
        }

        nav {
            text-align: center;
            display: flex;
/*            flex-direction: column;*/
            justify-content: space-between;
        }

nav img {width: 7rem;}

        ul {
            list-style: none;
        }

        li {
            align-items: center;
            margin-bottom: 1rem;
        }

        a {
            transition: all 0.5s ease;
            display: block;
            text-decoration: none;
            color: rgba(255, 255, 255, .5);
        }

        a:hover {
            color: white;
            transform: scale(1.1);
        }

  .toggle-overlay {
            font-size: 1.25rem;
            color: black;
			padding-right: 2rem;
			padding-top: 1rem;
			display: flex;
			align-items: center;
        }

.box {
	margin: 2rem;
	display: flex;
	max-width: 1280px;
	margin: 0 auto;
	margin-top: 2rem;
	
}

.cuarenta {
	width: 40%;
	padding: 4rem;
}

.treinta {
	width: 33%;
	padding: 1rem;
	
}


.sesenta {
	width: 60%;
	padding: 4rem;
	vertical-align: middle;
}


.logo {
padding: 1rem;
}

        main>section {
            width: 100%;
            padding: 1rem 0;
        }

        nav div.toggle-overlay {
            display: flex;
            justify-content: flex-end;
        }

        main>section>div {
            padding: .5rem .85rem;
            border-radius: 50%;
            transition: all .5s ease;
            border: none;
            background: rgba(255, 255, 255, 1);
        }

        main>section>div:hover {
            background: rgba(255, 255, 255, .5);
        }

h2 {padding-top: 3rem;
	text-align: center;}

H4 {
	text-align: center;
	font-weight: 100;
	font-size: 1.2rem;
	
}

.light1 {
	padding-top: 1rem;
}

        .close {
            cursor: pointer;
            border-radius: 50%;
            padding: .5rem;

        }




img {
	max-width: 100%;

}

        .outer-close {
            cursor: pointer;
            padding: 1rem;
            display: flex;
            justify-content: flex-end;
        }
.footer {
	display: flex;
	justify-content: space-between;
	padding-top: 5rem;
	padding-bottom: 2rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

.merch {
	max-width: 1200px;
	display: flex;
	padding-top: 3rem;
	margin: 0 auto;
	justify-content: center;
}

.imgs {
	padding:0.5rem;
}



form {
	margin: 0 auto;
	width: 100%;
	max-width: 500px;
	padding: 5rem;
}
label {display: block;
margin-bottom: 0.5rem;}

input, textarea {width: 100%;
padding: 0.2rem;
border-radius: 10px;
	border:2px solid black;
}

input {
	height: 2.5rem;
}

fieldset {border:none;
margin-bottom: 1rem;}

@media screen and (min-width: 600px) {
            nav ul li a {
                font-size: 3em;
            }
	
        }
/* Mobile Styles */
@media only screen and (max-width: 400px) {
	
	.box {
		flex-direction: column;
		margin: 0 auto;
	}
	.cuarenta {
		width: 100%;
		padding: 2rem;
	}
	.sesenta {
		width: 100%;
		padding: 2rem;
	    
		
	}
	
	.footer 
	{
		flex-direction: column;
		align-items: center;
	}
	.contact {
		padding-left: 3rem;
		padding-right: 3rem;
	}
	.merch {
		flex-direction: column;
		padding: 1rem;
	}
	.treinta{
		width: 100%;
		padding: 2rem;
	}
	.yo {
		order: 2;
	}
	.primero{
		order: 1;
	}
	.tercero {
		order: 3;
	}
	.lb {
		padding-bottom: 1rem;
	}
}
/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
		.box {
		flex-direction: column;
		margin: 0 auto;
			width: 100%
	}
	.yo {
		order: 2;
	}
	.primero{
		order: 1;
	}
	.tercero {
		order: 3;
	}
	.contact {
		padding-left: 5rem;
		padding-right: 5rem;
	}
	.cuarenta {
		width: 100%;
		margin: 0 auto;
		align-items: center;
		padding: 2rem;
	}
	.treinta{
		width: 100%;
			margin: 0 auto;
		padding:2rem;
	}
	
	.lb {
		padding-bottom: 1rem;
	}
	.sesenta {
		padding-top: 0.5rem;
		width: 100%;
		margin: 0 auto;
		align-items: center;
		padding: 2rem;
	}
	
	.footer 
	{
		flex-direction: column;
		align-items: center;
	}
  
}
@media only screen and (min-width: 961px) {
  
}