/*  nav{
    background-color:white;
  }

  menu a{
    color:black;
    text-decoration:none;
    display:inline-block;
    padding:0.5rem 2rem;
	font-size:2rem;
	font-weight:300;
    font: Avenir;
    float:right;
  }

  menu a:after{
    content:"";
    display:block;
    background-color:rgb(254,205,47);
    height:2px;
    transform: scale(0);
    transform-origin:left;
    transition: all 1s;
  }

  menu a:hover:after{
    transform: scale(1);
    color: black;
  }
  
  menu a:hover{
  	text-decoration:none;
  }*/

*{
	/*border:1px solid red;*/
}

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Nanum Gothic', sans-serif;
    font-weight:400;
}

nav {
    position: fixed;
    width: 100vw;
    height: 130vh;
    background-color: black;
    font-size: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: none;
    z-index: 1000;
    color: black;
    padding-top: 20%;
    color: white;
    top:0;
    line-height:200%;
    font-weight:700;
}

nav a:hover {
    color: rgb(254, 205, 47);
    -webkit-animation-name: pulse;
    animation: pulse 1s;
    text-decoration: none;
}


nav a {
    display: block;
    color: white;
}

.close-menu,
.open-menu {
    position: fixed;
    right: 2rem;
    top: 2rem;
    color: black;
    font-weight: 700;
    font-family: Avenir;
    z-index: 1000;
}

.close-menu i,
.open-menu i{
    font-size:26pt;
    background-color:white;
    padding:0 0.4rem;
}


.open-menu:hover {
    color: rgb(254, 205, 47);
    -webkit-animation-name: swing;
    animation: swing 1s;
    text-decoration: none;
}

.close-menu {
    color: white;
    right: 3rem;
    top: 0rem;
}

.close-menu:hover {
    color: rgb(254, 205, 47);
    -webkit-animation-name: swing;
    animation: swing 1s;
    text-decoration: none;
}



/*******************************************Container 1*/
/*.container-title {
    background-color: white;
    margin-bottom: 10rem;
    margin-top: 0;
    display: flex;
    padding-left: 5rem;
    padding-right: 5rem;
}*/

/*.col-sm-5 {
    margin-top: 4rem;
}*/

.home{
	margin-top:6rem;
}

.hero{
	text-align:center;
}

.hero img {
    width: 100%;
    padding:3rem;
}

/*.col-sm-5 p {
    font-size: 2rem;
    font-weight: 300;
    margin-top: 5rem;
}*/

#multimedia {
    font-family: 'Damion', cursive;
    font-size: 13rem;
    margin-left: -19rem;
    /*border: 1px solid green;*/
    margin-top: 16rem;
}

#design {
    font-size: 8rem;
    font-weight: 700;
    /*border: 1px solid red;*/
    margin-top: 6rem;
    margin-left: 10rem;
    font-family:'Mukta Malar', sans-serif;
    margin-top: 20rem;
}

#welcome {
    /*	padding-top: 17rem;*/
    font-weight: 300;
    margin-top: 4rem;
    font-size:2.5vw;
    /*	margin-left: 30rem;*/
    -webkit-animation-name: bounceInRight;
    animation: bounceInRight 1s;
    text-decoration: none;
}

@media screen and (max-width:766px){
	#multimedia{
		margin-left:1rem;
		margin-top:2rem;
		font-size:15vw;
	}

	#design {
		font-size:10vw;
	}

	.hero img {
    	width: 100%;
    	padding:1rem;
	}
}

@media screen and (max-width:1200px){
	#design {
		margin-top: 2rem;
	}
}

/*****************************************Container 2*/

.container-body {
    padding-left: 5rem;
    padding-right: 5rem;
}


.motto {
    font-weight: 800;
    font-size: 5rem;
    background-color: black;
    color: white;
    padding: 2rem;
   /* padding-left: 3.5rem;*/
    width: 100%;

}

#motto1 {
    /*	margin-top: 5rem;*/
    line-height: 1.5;
    /*	margin-left:7rem;*/
    font-size: 2rem;
    font-weight: 300;
}

#motto2 {
    margin-top: 2rem;
    font-size: 2rem;
    line-height: 1.5;
    margin-left: 0rem;
    font-weight: 500;
}

@media screen and (max-width: 1198px) {
    #design {
        margin-top: 2rem;
    }

    #motto {
        margin-top: 0;
    }

    .col-sm-7 h3 {
        width: 100%;
        padding-top: 0;
        margin-left: 12rem;
        /*border: 1px solid red;*/
    }

    .col-lg-2 {
        margin-top: 2rem;
        margin-left: 10rem;
    }

    .motto {
        margin-top: 10rem;
    }


}

@media screen and (max-width:1024px) {
    body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
}

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

    .col-sm-7 h3 {
        width: 60%;
    }

    .col-md-4 {
        width: 70%;
    }

    .container-body {
    	padding-left: 1rem;
    	padding-right: 1rem;
	}

    .headshot {
        width:40%;
        padding-top: 8rem;
    }
}

@media screen and (max-width:768px) {
    .headshot {
        margin-top: 10rem;
/*        border:1px solid red;*/
    }
}


/****************************************Container 3*/

.container-bio {
    /*border: 1px solid red;*/
    padding-top: 0;
    margin-top: 0;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 6rem;
}

.container-bio p  {
    font-weight: 300;
    font-size: 1.5rem;
}

@media screen and (max-width:990px) {
    .container-bio {
    	padding-left: 1rem;
    	padding-right: 1rem;
	}

}


#hi {
    /*border: 1px solid yellow;*/
    margin-top: 10rem;
    font-weight: 800;
    font-size: 5rem;
}

.col-lg-5 p {
    /*	border: 1px solid grey;*/
    font-size: 2rem;
    font-weight: 300;
    margin-top: 2rem;
}


.headshot {
    margin-top: 8rem;
    width: 70%;
    margin-left: 14rem;
/*    border: 1px solid yellow;*/
}

@media screen and (max-width:990px) {
    .headshot {
	    margin:0;
	}

	.headshot-container{
		text-align:center;
	}

}





.col-md-5 {
    margin-top: 5rem;
    /*border: 1px solid green;*/
    line-height: 1.5;
    margin-left: 7rem;
    font-size: 2rem;
    font-weight: 300;
}


.col-md-4 {
    /*border: 2px solid black;*/
    margin-top: 5rem;
    font-size: 2rem;
    line-height: 1.5;
    margin-left: 0rem;
    font-weight: 400;
}

/***************************************Container 4*/

.container-work {
    display: flex;
    background-color: black;
    padding-bottom: 3rem;
}


#work {
    font-weight: 800;
    font-size: 5rem;
    color: white;
    float: right;
    margin-top: 5rem;
    margin-left: 7rem;
    padding-right: 7rem;
}

#project1 {
    float: right;
    padding-right: 7rem;
    margin-top: 15rem;
}

@media screen and (max-width:990px) {
    #project1{
        width: 100%;
        padding:0;
        margin-top:3rem;
        text-align: center;
    }
}

.grid {
    overflow: hidden;
}
#project1-img {
    width: 100%; 
    transform:scale(1);
  transition:transform 1s;
}

#project1-img:hover {
    transform:scale(1.2);
}

#project2-img {
    width: 100%;
    margin-top: 15rem;
    transform:scale(1);
  transition:transform 1s;
}

#project2 {
    padding-left: 7rem;
    float:left;
}

#project2-img:hover {
    transform:scale(1.2);
}

@media screen and (max-width:984px) {
     #project2 {
        padding:0;
        text-align: center;
     }
}

#windwave {
    font-family: 'Damion', cursive;
    font-size: 5rem;
    color: white;
}

.col-md-6 h3 {
    font-size: 1.5rem;
    font-weight: 300;
    color: #b3bcc9;
    /*border: 1px solid red;*/
    margin-top: 0rem;
}


#IAT222 {
    color: white;
    font-weight: 500;
    margin-top: 3rem;
    font-size: 2rem;
}

#IAT100 {
    color: white;
    font-weight: 500;
    margin-top: 3rem;
    font-size: 2rem;
}

#btn-default {
    margin-top: 3rem;
    font-weight: 600;
    font-size: 1.5rem;
    color: rgb(254, 205, 47);
}

#btn-default:hover {
    -webkit-animation-name: shake;
    animation: shake 1s;
    text-decoration: none;
}

#btn {
    margin-top: 3rem;
    font-weight: 600;
    font-size: 1.5rem;
    color: rgb(254, 205, 47);
}

#btn:hover {
    -webkit-animation-name: shake;
    animation: shake 1s;
    text-decoration: none;
}


.visit-link {
    text-align: center;
    border-radius: 100%;
    display: inline-block;
    width: 80px;
    height: 80px;
    border: 2px solid rgb(254, 205, 47);
    padding: 0.5rem;
    padding-top: 1rem;
    padding-bottom: 0.4rem;
    transition: all 0.5s;
    position: relative;
    float: right;
    margin-top: -4rem;
    font-size: 1.5rem;
    font-weight: 400;
    color: #b3bcc9;
    text-decoration: none;
    font-weight: 700;
}

.visit-link:hover {
    transform: scale(1.2);
    color: rgb(254, 205, 47);
    text-decoration: none;
}

@media screen and (max-width:984px) {
     .visit-link {
        margin-right: 2rem;
        width:50px;
        height:50px;

     }


}

#thecoin {
    /*border: 1px solid green;*/
    font-family: 'Damion', cursive;
    font-size: 5rem;
    color: white;
}

/*****************************************Footer*/
.footer {
    position: relative;
    padding-top: 3rem;
    padding-bottom: 3rem;
    width: 100%;
    background-color: white;
    color: black;
    text-align: center;

}

.contact-title {
    font-family: 'Damion', cursive;
    font-size: 4vw;
}

.contact-info {
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 1.5vw;
	font-weight: 500;
}

.copyright {
	font-size: 1vw;
	font-weight: 400;
}

.footer a {
    font-family: 'Damion', cursive;
    font-size: 4vw;
    text-decoration: none;
        /*border:1px solid red;*/
}


.footer a:active {
    color: rgb(254, 205, 47);

}



/*****************************************Project*/

#comic1 {
    width: 60%;
}

#title {
    /*border: 1px solid black;*/
    font-weight: 800;
    font-size: 5rem;
    color: black;
    float: right;
    margin-top: 5rem;
    margin-left: 7rem;
    padding-right: 7rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: right;
}

#project-title {
    font-family: 'Damion', cursive;
    font-weight: 600;
    font-size: 6vw;
    color: black;
    float: right;
    margin-top: 3rem;
    margin-left: 7rem;
    padding-right: 12rem;
    padding-bottom: 2rem;
    text-align: right;
    -webkit-animation-name: fadeIn;
    animation: fadeIn 2s;
    text-decoration: none;

}

.container-comic {
    margin-top: 5rem;
    /*border: 1px solid grey;*/
}


.container {
    margin-bottom: 7rem;
}

#comicimage {
    margin-top: 5rem;
    /*border: 2px solid yellow;*/
    display: flex;
    justify-content: center;
    align-items: center;

}


#comicprocess {
    /*border: 1px solid red;*/
    color: white;
    font-weight: 600;
    font-size: 5rem;
    float: left;
    margin-top: 5rem;
    padding-left: 7rem;
    /*padding-right: 7rem;*/
    padding-top: 1rem;
    padding-bottom: 3rem;
    text-align: left;
    width: 100%;

}

.paragraph1 {
    /*border: 2px blue solid;*/
    color: white;
    padding-left: 7rem;
    font-size: 2rem;
    font-weight: 300;
    padding-right: 7rem;
    margin-bottom: 2rem
}

@media screen and (max-width: 600px){
    .paragraph1, .paragraph2{
        padding-left: 4rem;
        padding-right: 4rem;
    }
}


.container-comicprocess {
    /*border: 1px solid orange;*/
    background-color: black;
}

.container-comicprocess .row{
    margin-bottom:5rem;
}

#figure1 {
    /*border: 2px solid white;*/
/*    display: flex;
    justify-content: center;*/
    margin-bottom: 8rem;
    text-align:center;
}

#figure101 {
/*    display: flex;
    justify-content: center;*/
    margin-bottom: 8rem;
    text-align:center;
    /*border:1px solid red;*/
}

#figure102 {
/*    display: flex;
    justify-content: center;*/
    margin-bottom: 8rem;
    text-align:center;
    /*border:1px solid red;*/
}


#figure2 {
    border: 2px solid white;
    margin-bottom: 3rem; 
    margin-left: 7rem;
}

#narrative {
    width: 50%;
}


#photostream {
    width: 50%;
}

#figure103 {
/*    display: flex;
    justify-content: center;*/
    margin-bottom: 8rem;
    text-align:center;
}

#figure104 {
/*    display: flex;
    justify-content: center;*/
    margin-bottom: 8rem;
    text-align:center;
}


#paragraph2 {
    /*border: 2px blue solid;*/
    color: white;
    padding-right: 7rem;
    font-size: 2rem;
    font-weight: 300;
    padding-right: 7rem;
    margin-bottom: 2rem;
}


#restaurant {
    width: 50%;
}


#row-botton {
	margin-top:-3rem;
    margin-bottom: 5rem;
}

@media screen and (max-width:1280px) {
    #paragraph2 {
        padding-left: 7rem;
    }
}



/****************************************Project2*/
video {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 4rem;
}


#config {
    width:60%;
}

#config2 {
    width:60%;
}



#project-title2 {
    font-family: 'Damion', cursive;
    font-weight: 600;
    font-size: 6vw;
    color: black;
    float: right;
    margin-top: 3rem;
    margin-left: 7rem;
    padding-right: 9rem;
    padding-bottom: 2rem;
    text-align: right;
    -webkit-animation-name: fadeIn;
    animation: fadeIn 2s;
    text-decoration: none;
}

.left, .right{
    color:orange;
}