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

/* **************************************************** */
img{width: 100px;}
input{display: block;}
button{
    padding: 16px 28px;
    outline: none;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 14px;
    transition: 0.3s;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 12px;
}

h1{font-size: 60px; text-transform: uppercase;}
h2{font-size: 40px; text-transform: uppercase;}
h3{font-size: 24px;}
h4{font-size: 16px;}
h5{font-size: 12px;}

a:link{text-decoration: none; color: #666;}
a:visited{color: #666;}
a:hover{color: red;}
a:active{color: red;}
/* **************************************************** */
main{
position: relative;
width: 100%;
height: 660px;
background: url(../images/musinsa-standard2.png);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
}

header{position: relative;}

header div img{
float: left;
width: 140px;
/* border: 1px solid red; */
position: absolute;
left: 100px;
top: 32px;
}

header div a:link, a:visited{
color: #fff;
}

header span{
float: right;
font-size: 30px;
/* width: 50px; */
/* border: 1px solid red; */
position: absolute;
right: 116px;
top: 20px;
cursor: pointer;
}

header nav{
position: absolute;
width: 0%;
height: 100vh;
background: rgba(0,0,0,0.6);
overflow-x: hidden;
z-index: 100;

transition: 0.3s;
text-transform: uppercase;
}

nav a:first-child{
float: right;
font-size: 30px;
margin: 24px 114px;
}

nav a:link:first-child{color: #fff;}

nav a:not(:first-child){
clear: both;
color: #fff;
display: block;
padding: 20px;
text-align: center;
margin: 20px;
}

nav a:not(:first-child):hover{
background: #ff532d;
color: #fff;
}

main>div{
width: 100%;
height: 600px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}

main .main-h1{
color: #fff;
font-weight: 700;
}

main div p{
padding: 10px 0px 30px;
color: #fff;
}

main div button{
margin: 10px 0 50px 0;
font-weight: 600;
background: rgba(255,255,255,0.5);
border: none;
}

main div button:hover{
background: rgba(255,255,255,1);
}

/* **************************************************** */
.get-text{
width: 100%;
height: 300px;
/* padding: 60px 100px; */
background: #f3f3f3;
color: #808080;

display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
text-align: center;
}

.get-text h2{
color: #808080;
font-family: "Fjalla One", sans-serif;
font-weight: 600;
}

.get-text p{
color: #808080;
padding: 10px 0px;
}

.get-text div{
margin: 20px 0px 0px;
}

.get-text i{
color: #ccc;
font-size: 40px;
padding: 30px;
}

.get-text i:hover{
color: #808080;
}

/* **************************************************** */
.get{
height: 800px;
background: url(../images/musinsa-fw.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.get>div{
width: 50%;
height: 100%;

background: rgba(0,0,0,0.4);
float: left;
padding: 100px 8%;
}

.get>div:hover{
background: rgba(255, 83, 45, 0.7);
color: #fff;
transition: 0.5s;
}

.get>div h2{
padding: 0px 0px 30px;
color: #fff;
font-family: "Fjalla One", sans-serif;
font-weight: 600;
}

.get>div p{
font-size: 18px;
text-align: justify;
color: #fff;
}

.get>div button{
padding: 16px 30px;
margin-top: 40px;
background: rgba(255,255,255,0.5);
border: none;
font-weight: 600;
}

.get>div button:hover{
background: rgba(255,255,255,1);
}

/* **************************************************** */
.bespoke-text{
width: 100%;
height: 200px;
background: #f3f3f3;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

.bespoke-text>div>h2{
color: #808080;
font-family: "Fjalla One", sans-serif;
font-weight: 600;

}

.bespoke-text>div>p{
color: #808080;
padding: 20px 0px 0px;
}
/* **************************************************** */
.bespoke{
width: 100%;
height: 600px;
/* border: 1px solid red; */

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
text-align: center;
}

.bespoke section{
width: 33.33%;
height: 100%;

display: flex;
flex-direction: column;
/* flex-wrap: wrap; */
justify-content: center;
align-items: center;
}

.bespoke section div{
position: relative;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
transition: 0.8s;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.bespoke section div:hover{
background: rgba(0,0,0,0.5);
}

.bespoke> :nth-child(1){
background: url(../images/beach.jpg);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}

.bespoke> :nth-child(2){
background: url(../images/rainy.jpg);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}

.bespoke> :nth-child(3){
background: url(../images/daily.jpg);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}

.bespoke h3{
width: 160px;
height: 30px;
/* border: 1px solid red; */
margin-top: 10px;
font-family: "Fjalla One", sans-serif;
font-weight: 600;
color: #fff;
}

.bespoke button{
margin-top: 320px;
width: 100px;
height: 40px;
background: rgba(255,255,255,0);
border: 1px solid #fff;
border-radius: 0px;
color: #fff;
line-height: 8px;
}

.bespoke button:hover{
background: rgba(255,255,255,0.5);
}

/* **************************************************** */
.design-text{
width: 100%;
height: 200px;
background: #f3f3f3;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

.design-text h2{
color: #808080;
font-family: "Fjalla One", sans-serif;
font-weight: 600;
}

.design-text p{
color: #808080;
padding: 20px 0px 0px;
}
/* **************************************************** */
.design{
width: 100%;
height: 800px;
/* border: 1px solid red; */

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.design section{
width: 50%;
height: 50%;
}

.design section div {
position: relative;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
transition: 0.8s;

display: flex;
flex-direction: column;
/* flex-wrap: wrap; */
justify-content: center;
align-items: center;
}

.design section div:hover {
  background: rgba(0, 0, 0, 0.6);
}

.design> :nth-child(1){
background: url(../images/beauty.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.design> :nth-child(2){
background: url(../images/player.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.design> :nth-child(3){
background: url(../images/outlet.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.design> :nth-child(4){
background: url(../images/kids.jpeg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.design section button{
width: 100px;
height: 40px;
background: rgba(255,255,255,0);
border-radius: 0;
color: #fff;
text-align: center;
line-height: 8px;
cursor: pointer;
}

.design section button:hover{
background: rgba(255,255,255,0.5);
}

/* **************************************************** */
.greetings{
width: 100%;
height: 300px;
background: #f3f3f3;
color: #808080;

position: relative;
text-align: center;
padding: 40px 0 20px;
}

.greetings> :nth-child(1), .greetings> :nth-child(2){
position: absolute;
width: 100px;
height: 100px;
background: #e0e0e0;
border-radius: 50%;
font-size: 40px;
line-height: 54px;
padding: 16px;
top: 34%;
transition: 0.6s;
}

.greetings> :nth-child(1){left: 10%;}
.greetings> :nth-child(2){right: 10%;}

.greetings> :nth-child(1):hover, .greetings> :nth-child(2):hover{
background: #ff532d;
color: #fff;
}

.greetings h2{
font-family: "Fjalla One", sans-serif;
font-weight: 600;
}

.greetings img{
width: 80px;
filter: grayscale(100%);
opacity: 0.4;
margin: 20px 50px 0;
transition: 0.9s;
}

.greetings img:hover{
filter: grayscale(100%);
opacity: 1;
}

.greetings p{
color: #808080;
}
/* **************************************************** */
.event{
width: 100%;
height: 360px;
background: #cccccc;
color: #808080;

padding: 40px 200px;
}

.event h2{
text-align: center;
font-family: "Fjalla One", sans-serif;
font-weight: 600;

margin: 0px 0px 20px;
}

.event table{
width: 1000px;
margin: 0 auto;
text-align: left;
border-collapse: collapse;
cursor: pointer;
}

.event table tr:hover{
background: #fff;
}

.event th, td{
    padding: 12px;
    border-bottom: 2px solid #ddd;
}

/* **************************************************** */
footer{
padding: 60px 24%;
background: #222;
font-family: "Fjalla One", sans-serif;
font-weight: 600;
}

footer h2, p{
color: #aaa;
}

footer form div{
padding: 16px 0;
}

form label{
line-height: 40px;
color: #aaa;
}

form input{
width: 100%;
padding: 16px;
}

form textarea{
display: block;
width: 100%;
height: 60px;
padding: 16px;
}

form button{
display: block;
width: 160px;
margin-top: 30px;
border: none;
font-weight: 600;
}

form button:hover{
background: #ff532d;
color: #fff;
}

/* **************************************************** */
address{
padding: 60px 24%;
background: #333;
}

address h2{
color: #aaa;
font-family: "Fjalla One", sans-serif;
font-weight: 600;
}

address p{
color: #aaa;
}