/* ----------------------------------------------- */
/* BASIC SETUP */
/* ----------------------------------------------- */

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

html {
font-size: 80px;    
}

body {
    background-color: #fff;
    font-family: 'Catamaran', 'Arial', sans-serif;
    font-weight: 300;
    font-size: 25%;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body{
    height: 100%;
    min-height: 100%;
    
}

.clearfix {zoom: 1;}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

a:link,
a:visited {
    color: black;
    text-decoration: none;
    -webkit-transition: border-color .5s, color .5s;
    transition: border-color .5s, color .5s;
}

a:hover,
a:active {
    color: black;
}

/* ----------------------------------------------- */
/* HEADINGS */
/* ----------------------------------------------- */

h1,
h2,
h3,
h4, h5 {
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    
}

h1{
    font-size: 150%;
    font-weight: 700;
    line-height: 1.2;
}

h2 {
    font-size: 270%;
    text-transform: uppercase;
    padding-bottom: 10px;
    padding-top: 15px;
}

h3 {
    font-size: 120%;
    font-weight: 700;
}

h4 {
    text-align: left;
    font-size: 120%;
    font-weight: 700; 
}

h5 {
    font-size: 120%;
    font-weight: 500;
    font-style: normal;
}

h6 {
    font-size: 100%;
    font-weight: 500;
    font-style: normal;
    line-height: 1.2;
}

h7 {
    font-size: 100%;
    font-weight: 500;
    font-style: normal;
    line-height: 1.8;
    color: #838383;
    
}

.navigation-text {
    font-size: 100%;
    font-weight: 700;
}

#hero-header {
    text-align: center;
    margin-top: 80px;
}

#hero-header-glu{
    text-align: center;
    width: 100vw;
    height: 100vh;
    background-color: #2e2e2e;
    -webkit-animation-duration: .5s;
    -webkit-animation-delay: .3s;
}

#hero-header-glu img{
    height: 20vh;
    margin-top: 20vh;
    margin-bottom: 20vh;
}

#hero-header-ea{
    text-align: center;
    width: 100vw;
    height: 100vh;
    background-color: black;
    -webkit-animation-duration: .5s;
    -webkit-animation-delay: .3s;
}

#hero-header-ea img{
    height: 25vh;
    margin-top: 30vh;
    margin-bottom: 20vh;
}

#hero-header-riotgames{
    text-align: center;
    width: 100vw;
    height: 100vh;
    background-color: white;
    -webkit-animation-duration: .7s;
    -webkit-animation-delay: .3s;
}

#hero-header-riotgames img{
    height: 30vh;
    margin-top: 25vh;
    margin-bottom: 20vh;
}

#hero-header-lowes{
    text-align: center;
    width: 100vw;
    height: 100vh;
    background-color: #004890;
    -webkit-animation-duration: .7s;
    -webkit-animation-delay: .3s;
}

#hero-header-lowes img{
    height: 20vh;
    margin-top: 20vh;
    margin-bottom: 20vh;
}

#hero-header-expedia{
    text-align: center;
    width: 100vw;
    height: 100vh;
    background-color: #FFC60B;
    -webkit-animation-duration: .7s;
    -webkit-animation-delay: .3s;
}

#hero-header-expedia img{
    height: 25vh;
    margin-top: 25vh;
    margin-bottom: 20vh;
}
  
.row {
    /*
    border: solid;
    */
}

/* ----------------------------------------------- */
/* NAVIGATION */
/* ----------------------------------------------- */

#myTopnav {
    position: fixed;
}

.topnav {
  overflow: hidden;
  background-color: #000;
    width: 100%;
     position: fixed;
    z-index: 100;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #333333;
  color: white;
}

.active {
  color: white;
}

.intro-responsive{
    text-align: center;
    margin: auto;
}


.intro-mobile {
  display: none;
}

.intro-desktop {
  display: inline;
    z-index: 2;
}

/* ----------------------------------------------- */
/* PORTFOLIO NAVIGATION */
/* ----------------------------------------------- */

ul {
    list-style-type: none;
    overflow: hidden;
    background-color: #000;
    color: white;
    height: 60px;
    width: 100%;
}

ul img{
    float: left;
    margin-top: 14px;
    margin-right: 25px;
    margin-left: 16px;
}
		
	
li {
    float: left;
}

li a, .dropbtn {
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-weight: 300;
    font-size: 90%;
    line-height: 3;
}

li a:link, li a:visited {
	color: white;
    
}

li a:hover, .dropdown:hover .dropbtn {
	color: #69d2e0;
}

li.nodropdown {
	display: inline-block;
	float: right;
	margin-right: 30px;
}
		
li.dropdown {
	display: inline-block;
	
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	width: 220px;
	-webkit-box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
	z-index: 1;
    
    margin-top: -10px;
    border-color: black;
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
    padding-bottom: 0;
}

.dropdown-content a:link, 
.dropdown-content a:visited, 
.dropdown-content a:active {
    color: black;
    font-weight: 400;
    font-size: 90%;
    line-height: 1.5;
}

.dropdown-content a:hover {
    color: black;
    font-size: 90%;
    background-color: rgba(215, 215, 215, 0.5);
}

.show {display:block;}


/* ----------------------------------------------- */
/* INTRODUCTION */
/* ----------------------------------------------- */

#home{
    float: center;
    height: 100vh;
    background-color: #dafafc;
    margin: auto auto;
}

.intro {
    text-align: center;
    width:100%;
    padding-top: 8%; 
}


.intro-responsive{
    text-align: center;
    margin: auto;
}


.intro-mobile {
  display: none;
}

.intro-desktop {
  display: inline;
    float: center;
}

.author {
    float: right;
    width: 58%;
    height: 100px;
    text-align: center;
    line-height: 32px;
    margin-top: -200px;
}

.author span{
    -webkit-animation-duration: .3s;
    -webkit-animation-delay: .3s;
}

.author h1{
    -webkit-animation-duration: .5s;
    -webkit-animation-delay: .5s;
}

@media screen and (max-width: 600px) {
.author {
  float: center;
    width: 100%;
    height: 100px;
    text-align: center;
    line-height: 32px;
    margin-top: 20px;
    }
}

.author span {
    text-transform: uppercase;
}

.row {
    max-width: 1015px;
    margin: 0 auto;
}

@media screen and (max-width: 600px) {
.row {
    max-width: 80vw;
    }
}

.profile {
    text-align: left;
    height: 100vh;
    width: 100vw;
}

.profile-desktop {
    width:100%;
    height: 100%;
    display: inline;
}

.profile-desktop img{
    width: 60%;
    height: 60%;
    -o-object-fit: contain;
    object-fit: contain;
}

.profile-box-one {
    float: left;
    width:33%;
    height: 60%;
    padding-top: 12%;
    padding-bottom: 12%;
    padding-left: 5%;
    text-align: center;
}

.profile-box-one i{
    font-size: 300%;
}

.profile-box-three i{
    font-size: 230%;
}

.profile-box-one h3{
    -webkit-animation-duration: .5s;
    -webkit-animation-delay: .5s;   
}

.profile-box-two {
    float: left;
    width:33%;
    height: 60%;
    text-align: center;
}

.profile-box-two img{
    -webkit-animation-duration: .3s;
    -webkit-animation-delay: .3s;
}

.profile-box-three {
    float: left;
    width:33%;
    height: 60%;
    padding-top: 12%;
    padding-bottom: 12%;
    padding-right: 5%;
    text-align: center;
}


.profile-box-four {
    float: left;
    width: 60%;
    height: 39%;
    margin: auto 20%;
    padding: 1%;
    text-align: left;
}

.profile-desktop h1{
    font-size: 230%;
    line-height: 1;
    }


.profile-mobile {
    display: none;
}

.profile-line {
    float: top;
    margin-left: 2%;
    margin-top: 2%;
    margin-bottom: 2%;
    height: 96vh;
    width: 95vw;
    border: solid 2px;
    border-color: #ebebeb;
    padding: 7% 5% 5% 5%;
}

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

}


#about{
    margin: 0px;
}

#profile-heart{
    margin-top: -20px;
}

#profile-heart i{
    font-size: 150%;
}


/*
PROCESS
*/

#process-mobile {
    display: none;
}

#process-desktop {
    display: block;
    height: 100vh;
    margin-top: 0px;
    padding-top: 5%;
    padding-bottom: 5%;
    height: 100%;
    background-color: #ebebeb;
}

#process-desktop h1{
    line-height: 1;
}

#process-button {
    color: white;
    background-color: black;
    border: 2px solid #000000;
    height: 50px;
    width: 230px;
    border-radius: 50px;
    margin: auto;
    text-align: center;
    padding-top: 6px;
}

#process-button:link,
#process-button:visited,
#process-button:active {
    color: white;
    background-color: black;
    border: 2px solid #000000;
    -webkit-transition: color 1s, background-color 1s, border 1s;
    transition: color 1s, background-color 1s, border 1s;
    
}

#process-button:hover {
    color: black;
    background-color: #ffffff;
    border: 2px solid #d7d7d7;
    -webkit-box-shadow: 5px 5px rgba(215, 215, 215, 0.5);
    box-shadow: 5px 5px rgba(215, 215, 215, 0.5);
     -webkit-transition: color 1s, background-color 1s, border 1s, box-shadow 1s;
    -webkit-transition: color 1s, background-color 1s, border 1s, -webkit-box-shadow 1s;
    transition: color 1s, background-color 1s, border 1s, -webkit-box-shadow 1s;
    transition: color 1s, background-color 1s, border 1s, box-shadow 1s;
    transition: color 1s, background-color 1s, border 1s, box-shadow 1s, -webkit-box-shadow 1s;
}

#process-line {
    height: 1px;
    width: 100px;
    background-color: black;
    margin-top: 5px;
    margin-bottom: 10px;
}

#process-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #dafafc;
    text-align: center;
    position: relative;
    border: 1px solid #d7d7d7;
    -webkit-box-shadow: 5px 5px rgba(215, 215, 215, 0.5);
    box-shadow: 5px 5px rgba(215, 215, 215, 0.5);
}

#process-circle:before {
  content: " ";
  position: absolute;
  margin-left: -98px;
    width: 185px;
    height: 185px;
  border-radius: 100px;
  border: 5px solid #ffffff;
}

#process-circle h1{
    padding: 0;
    margin-top: 65px;
    line-height: 1;
}


@media screen and (max-width: 600px) {
    #process-desktop {
    display: none;
    }
    
    #process-button {
    color: white;
    background-color: black;
    border: 2px solid #000000;
    height: 50px;
    width: 230px;
    border-radius: 50px;
    margin: auto;
    text-align: center;
    padding-top: 6px;
        font-size: 75%;
}
    
    #process-mobile {
    display: inline-block;
    height: 100vh;
    width: 100%;
    padding: 10%;
    text-align: left;
    background-color: #ebebeb;
    
    }
    
    #process-mobile-content {
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        font-size: 120%;
        float: left;
        text-align: left;
    }
    
    #process-mobile-step{
        height:75px;
        width: 300px;
        margin: 5%;
    }
    
    #process-circle-mobile {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #fff;
    text-align: center;
    border: 2px solid #000;
    -webkit-box-shadow: 5px 5px rgba(215, 215, 215, 0.5);
    box-shadow: 5px 5px rgba(215, 215, 215, 0.5);
    color: black;
    line-height: 1.3;
    }
    
}

/*
PORTFOLIO
*/

#portfolio-header {
    color: black;
    text-align: center;
}

#portfolio-header h1{
    margin: 0px;
    padding: 0px;
    line-height: 1;
}

#box{
    width: 100vw;
    height: 150vh;
    padding: 0 10% 10% 10%;
    
}

#box-portfolio{
    float: left;
    width: 46%;
    height: 33%;
    margin: 2%;
    border: 1px solid #d7d7d7;
    -webkit-box-shadow: 5px 5px rgba(215, 215, 215, 0.5);
    box-shadow: 5px 5px rgba(215, 215, 215, 0.5);
}

#box-portfolio img{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    padding: 2%;
}

#box-portfolio:link,
#box-portfolio:visited {
    border: 1px solid #d7d7d7;
    border-color: #000000;
    color: black;
    -webkit-box-shadow: 5px 5px rgba(215, 215, 215, 0.8);
    box-shadow: 5px 5px rgba(215, 215, 215, 0.8);
    -webkit-transition: border-color 1s, border 1s, box-shadow 1s;
    -webkit-transition: border-color 1s, border 1s, -webkit-box-shadow 1s;
    transition: border-color 1s, border 1s, -webkit-box-shadow 1s;
    transition: border-color 1s, border 1s, box-shadow 1s;
    transition: border-color 1s, border 1s, box-shadow 1s, -webkit-box-shadow 1s;
}

#box-portfolio:hover,
#box-portfolio:active {
    border: 1px solid #d7d7d7;
    border-color: #000000;
    color: black;
    -webkit-box-shadow: 5px 5px rgba(215, 215, 215, 0.8);
    box-shadow: 5px 5px rgba(215, 215, 215, 0.8);
    -webkit-transition: border-color 1s, border 1s, box-shadow 1s;
    -webkit-transition: border-color 1s, border 1s, -webkit-box-shadow 1s;
    transition: border-color 1s, border 1s, -webkit-box-shadow 1s;
    transition: border-color 1s, border 1s, box-shadow 1s;
    transition: border-color 1s, border 1s, box-shadow 1s, -webkit-box-shadow 1s;
}

/*
PORTFOLIO-CONTENT
*/

#content {
   width: 75vw;
    margin: auto;
}

#content-crib {
   width: 100vw;
    margin: auto;
    
}

#center {
    text-align: center;
}

#content img {
    border-color: #d7d7d7;
}

#content-barbie img {
    border: solid 2px;
    border-color: #e9edf4;
}

#content-line {
    height: 3px;
    background-color: black;
}

#content-line-lowes {
    height: 3px;
    background-color: #dbe2ef;
    width: 30px;
    margin-top: -5px;
    margin-bottom: 7px;
}

#content-line-glu {
    height: 3px;
    background-color: #fd4376;
    width: 30px;
    margin-top: -5px;
    margin-bottom: 7px;
}

#content-line-worlds {
    height: 3px;
    background-color: #64c8ee;
    width: 30px;
    margin-top: -5px;
    margin-bottom: 7px;
}

#content-line-yasuo {
    height: 3px;
    background-color: #0083ff;
    width: 30px;
    margin-top: -5px;
    margin-bottom: 7px;
}

#content-line-zuma {
    height: 3px;
    background-color: #5eda69;
    width: 30px;
    margin-top: -5px;
    margin-bottom: 7px;
}

#content-line-barbie {
    height: 3px;
    background-color: #ff5599;
    width: 30px;
    margin-top: -5px;
    margin-bottom: 7px;
}

#content-header {
    text-align: left;
}

#content-header span{
    color: gray;
    font-weight: 500;
    font-size: 80%;
}

#content-process-lowes h5{
    text-align: center;
    margin-left: 47px;
    margin-top: 5px;
}

#content-process-lowes {
    margin-left: -3%;
}

#content-process-lowes img{
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

#content-project-lowes img{
    width: 90%;
    -o-object-fit: cover;
    object-fit: cover;
}

#content-project-glu img{
    width: 70%;
    -o-object-fit: cover;
    object-fit: cover;
}

#content-project-glu i{
    font-size: 80%;
    color: #838383;
}

#content-project-glu ion-icon{
    color: #838383;
    font-size: 100%;
}

#content-project-glu h7{
    color: #838383;
    line-height: 1.5;
    font-size: 100%;
}

#glu-app-icon img{
    width: 17%;
    float: left;
    padding-right: 1%;
    padding-top: 1%;
}

#content-project-expedia img{
    width: 90%;
    -o-object-fit: cover;
    object-fit: cover;
}

#content-project-yasuo img{
    width: 85%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* ZUMA BLITZ */

#content-zuma {
    width: 75vw;
    margin: auto;
}

#content-zuma-screenshot-left {
    width: 50%;
    float: left;
    padding-bottom: 2%;
    padding-right: .25%;
}

#content-zuma-screenshot-right {
    width: 50%;
    float: left;
    padding-bottom: 2%;
    padding-left: .25%;
}

#content-zuma img{
    width: 96%;
    object-fit: contain;
}

/* RIOT GAMES */

#content-riotgames {
    width: 75vw;
    margin: auto;
    border: solid #cccccc;
}

#content-riotgames img{
    width: 100%;
    object-fit: contain;
}

#lowes-circle {
	width: 36px;
	height: 36px;
	-moz-border-radius: 17px;
	-webkit-border-radius: 17px;
	border-radius: 17px;
    border: solid 3px #b7c5df;
    display: inline-block;
    padding-left: 9.5px;
    color: #b7c5df;
    font-weight: 500;
}

#glu-circle {
	width: 36px;
	height: 36px;
	-moz-border-radius: 17px;
	-webkit-border-radius: 17px;
	border-radius: 17px;
    border: solid 3px #ff9cbc;
    display: inline-block;
    padding-left: 9.5px;
    background-color: white;
    color: #ff9cbc;
    font-weight:500;
}

#glu-circle-pink {
	width: 40px;
	height: 40px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
    display: inline-block;
    padding-left: 15px;
    padding-top: 3px;
    background-color: #fd4376;
    color: white;
    font-weight: 700;
}

#glu-quotes {
	width: 24px;
	height: 24px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
    background-color: #f9cce0;
    text-align: center;
    display: inline-block;
}

/*
HEADERS
*/

#glu-clothingstore{
    width: 100vw;
    height: 100vh;
    background-color: #f7f7f7;
    
}

#glu-clothingstore-header{
    width: 20%;
}

#glu-furniturestore-header{
    width: 20%;
}

#glu-clothingstore-space{
    height: 35%;
}

#glu-clothingstore-content{
    height: 100%;
    border: solid 3px #000000;
}

#glu-furniturestore{
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
}

#glu-content-border{
    padding: 2%;
    width: 98%;
    height: 100%;
}

#glu-furniturestore-border{
    padding: 2%;
    width: 99%;
    height: 100%;
    background-size: cover;
    background-image: url(images/nicki_furniturestore_bg.png);
}

#glu-clothing-border{
    padding: 2%;
    width: 99%;
    height: 100%;
    background-size: cover;
    background-image: url(images/nicki_clothingstore_bg.png);
}

#glu-furniturestore-space{
    height: 38%;
}

#glu-furniturestore-content{
    height: 100%;
    border: solid 3px #000000;
}

#glu-screenshots{
    width: 100vw;
    background-color: #f7f7f7;
    
}

#glu-screenshots-content{
    width: 90%;
    padding-top:5%;
    padding-bottom: 5%;
    display: block;
    position: relative;
}

#glu-screenshots-overlay{
display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
    border: solid 2px;
    opacity: 0;
}

#glu-screenshots-text{
  opacity: 0;
    color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
    background-color: rgba(0, 0, 0, 0.85);
    width: 200px;
    height: 200px;
    border-radius: 100%;
    padding-top: 10%;
    transition: opacity 0.5s ease;
    line-height: .8;
}

#glu-screenshots-text h5{
    margin-bottom: -3px;
    line-height: 1.4;
}

#glu-screenshots-images{
    display: block;
    float: left;
    padding-top: 1%;
    padding-bottom: 1%;
    width: 50%;
    height: 50%;
    position: relative;
}

#glu-screenshots-images-text {
    display: block;
    float: left;
    padding-top: 1%;
    padding-bottom: 1%;
    width: 100%;
    height: 100%;
}

#glu-screenshots-images-text img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#glu-wireframe{
    opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
    transition: opacity 0.5s ease;
}

#glu-wireframe-button {
    color: white;
    background-color: #fd4376;
    border: 2px solid #fd4376;
    height: 45px;
    width: 240px;
    border-radius: 50px;
    text-align: center;
    padding-top: 4px;
    margin-top: 5px;
}

#glu-wireframe-button:link,
#glu-wireframe-button:visited,
#glu-wireframe-button:active {
    color: white;
    background-color: black;
    -webkit-transition: color 1s, background-color 1s, border 1s;
    transition: color 1s, background-color 1s, border 1s;
}


#glu-screenshots-images:hover #glu-screenshots-text {
    opacity: 1;
}

#glu-screenshots-images img{
    width: 95%;
}

#nicki-clothingstore-wireframes{
    position: relative;
    display: inline-block;
}

#nicki-clothingstore-wireframes:hover #glu-wireframe {
    opacity: 1;
}

#hidden{
    display: none;
}



#glu-header-circle{
    width: 200px;
    height: 200px;
    background-color: #000000;
    border-radius: 50%;
    padding-top: 25%;
     color: white;
}

#glu-content-padding{
    padding-left: 24px;
    padding-right: 12%;
}

#content-project-lowes h6{
    color: #b7c5df;
}

#content-project-glu h6{
    color: #fd4376;
    margin-bottom: 8px;
}

#content-project-yasuo h6{
    color: #006acd;
}

#content-lowes-phone {
    width: 100vw;
}

#content-nicki-phone {
    width: 100vw;
}

#content-glu-phone {
    width: 100vw;
    display: block;
}

#content-lowes-phone img{
    width: 100%;
    object-fit: cover;  
}

#content-nicki-phone img{
    width: 100%;
    object-fit: cover;  
}

#content-lowes-visual{
    
}

#content-lowes-visual img{
    width: 100%;
}

#content-lowes-visual h6{
    color: #b7c5df;
}

#content-glu-download{
    width: 100%;
    padding-top: 3%;
    height: 200px;
    background-color: #ebebeb;
    display: inline-block;
}

#content-glu-screenshots{
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

#content-glu-screenshotsA{
    width: 50%;
    display: inline-block;
    
}

#content-glu-screenshotsB{
    width: 30%;
    display: inline-block;
}

.titan-empire {
    width: 1120px;
    height: 479px;
    background-image: url(images/titan_empires_screenshot1.png);
    margin: 0 auto;
    
}

.titan-empire-text {
    padding-left: 54px;
    padding-top: 300px;
    width: 650px;
    
}

.titan-empire-season{
    padding: 0 30px;
    margin-top: 0;
}

.titan-empire-icons{
    margin: 0 auto;
    width: 700px;
    text-align: center;
}

.titan-empire-icons img{
    padding: 10px;
}

.nicki-text {
    margin-left: 20px;
    margin-top: 20px;
}

.nicki-text span{
    color: gray;
}

.nicki-text h1 {
    line-height: 1.25;
}

#nicki-button {
    color: white;
    background-color: black;
    border: 2px solid #000000;
    height: 45px;
    width: 240px;
    border-radius: 50px;
    text-align: center;
    padding-top: 4px;
    margin-top: 5px;
}

#nicki-button:link,
#nicki-button:visited,
#nicki-button:active {
    color: white;
    background-color: black;
    -webkit-transition: color 1s, background-color 1s, border 1s;
    transition: color 1s, background-color 1s, border 1s;
    
}

#nicki-button:hover {
    color: white;
    -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 5px 5px rgba(0, 0, 0, 0.3);
     -webkit-transition: color 1s, background-color 1s, border 1s, box-shadow 1s;
    -webkit-transition: color 1s, background-color 1s, border 1s, -webkit-box-shadow 1s;
    transition: color 1s, background-color 1s, border 1s, -webkit-box-shadow 1s;
    transition: color 1s, background-color 1s, border 1s, box-shadow 1s;
    transition: color 1s, background-color 1s, border 1s, box-shadow 1s, -webkit-box-shadow 1s;
}

.nicki-button-left{
    font-size: 155%;
    color: white;
    position: absolute;
    margin-top: -25px;
    margin-left: 312px;
    height: 35px;
    width: 35px;
    background-color: black;
    text-align: center;
    -webkit-box-shadow: 3px 3px 0px rgba(215, 215, 215, 0.5);
    box-shadow: 3px 3px 0px rgba(215, 215, 215, 0.5);
}

.nicki-button-right{
    font-size: 155%;
    color: white;
    position: absolute;
    margin-top: -25px;
    margin-left: 355px;
    height: 35px;
    width: 35px;
    background-color: black;
    text-align: center;
    -webkit-box-shadow: 3px 3px 0px rgba(215, 215, 215, 0.5);
    box-shadow: 3px 3px 0px rgba(215, 215, 215, 0.5);
}

.nicki-button-left:hover,
.nicki-button-left:active {
    background-color: #e5e5e5;
}

.nicki-button-right:hover,
.nicki-button-right:active {
    background-color: #e5e5e5;
}

.nicki-mixtape {
    margin-top: -40px;
}

.nicki-takeover {
    background-image: url(images/nicki_screenshots1.png);
    width: 1088px;
    height: 617px;
    margin: 0 auto;
    padding-top: 150px;
    padding-left: 50px;
}

.nicki-header{
    width: 580px;
}

.nicki-takeover-icon{
    float: left;
    height: 85px;
    width: 90px;
}

.nicki-takeover-text{
    line-height: 1.2;
    height: 110px;
}

/*
ABOUT
*/

#front-nav-line {
    height: 1px;
    width: 25px;
    background-color: white;
    margin-top: -3px;
    margin-bottom: 10px;
}

#front-nav-line-gray {
    height: 1px;
    width: 25px;
    background-color: #bbbbbb;
    margin-top: -3px;
    margin-bottom: 10px;
}

#front-nav-line-expedia {
    height: 1px;
    width: 25px;
    background-color:  #1B2F4A;
    margin-top: -3px;
    margin-bottom: 10px;
}

#front-about-line {
    height: 1px;
    width: 25px;
    background-color: #bbbbbb;
    margin-top: 1px;
    margin-bottom: 15px;
}

#front-nav-spacer_big{
    height: 47vh;
    padding-top: 40%;
}

#front-nav-spacer_sm{
    height: 10vh;
}

#front-nav-spacer_smr{
    height: 7vh;
}

#front-content{
    height: 100vh;
    width: 100vw;
    float: left;
}

#front-content-buttons{
    width: 46%;
    height: 80%;
    float: left;
    margin: 2%;
    padding-top: 5%;
}

#front-nav{
    float: left;
    height: 100vh;
    width: 20vw;
    background-color: #ffffff;
    font-size: 90%;
}

#front-about{
    padding: 15%;
    padding-top: 40%;
    height: 90vh;
}

#front-about p{
    color: #bbbbbb;
}

#front-nav-bottom{
    float: left;
    height: 10vh;
    width: 20vw;
    background-color: #ffffff;
}

#front-about h3{
    font-size: 150%;
    line-height: 1;
    margin-top: 8px;
    margin-bottom: -2px;
}

#front-about img{
    width: 100%;
    object-fit: cover;
    margin-bottom: 12px;
}

/*
PORTFOLIO 0
*/

#front-nav-portfolio0{
    float: left;
    height: 100vh;
    width: 16vw;
    background-color: #ffffff;
    -webkit-animation-duration: .5s;
    -webkit-animation-delay: .5s;
    color:#bbbbbb;
    border-left: solid 1px rgba(235, 235, 235, 1.0);
    border-right: solid 1px #ebebeb;
}


#front-nav-portfolio0:hover #front-nav-portfolio0_top{
    visibility: visible;
    opacity: 1;
    transition: opacity 1s;
    padding: 1.5vw;
}

#front-nav-portfolio0 img{
    width: 70%;
}

#front-nav-portfolio0 h6{
    font-size: 300%;
    line-height: .8;
}

#front-nav-portfolio0_top{
    position: absolute;
    height: 100vh;
    width: 16vw;
    z-index: 10;
    visibility: hidden;
    opacity: .1;
    background-size: cover;
    color: #1B2F4A;
    background-color: #FFC60B;
    padding:1.5%;
    border-left: solid 1px rgba(235, 235, 235, 0.0);
    border-right: solid 1px rgba(235, 235, 235, 0.0);
}

#front-nav-portfolio0_top img{
    width: 70%;
}

#front-nav-portfolio0_top h6{
    font-size: 300%;
    line-height: .8;
}

/*
PORTFOLIO 1
*/

#front-nav-portfolio1{
    float: left;
    height: 100vh;
    width: 16vw;
    background-color: #ffffff;
    -webkit-animation-duration: .6s;
    -webkit-animation-delay: .6s;
    color:#bbbbbb;
    border-left: solid 1px rgba(235, 235, 235, 1.0);
    border-right: solid 1px #ebebeb;
}

#front-nav-padding {
    width: 100%;
    height: 100%;
    padding: 1.5vw;
    
}

#front-nav-portfolio1:hover #front-nav-portfolio1_top{
    visibility: visible;
    opacity: 1;
    transition: opacity 1s;
    padding: 1.5vw;
}

#front-nav-portfolio1 img{
    width: 70%;
}

#front-nav-portfolio1 h6{
    font-size: 300%;
    line-height: .8;
}

#front-nav-portfolio1_top{
    position: absolute;
    height: 100vh;
    width: 16vw;
    z-index: 10;
    visibility: hidden;
    opacity: .1;
    background-image: url(images/lowes_bg.svg);
    background-size: cover;
    color: white;
    padding:1.5%;
    border-left: solid 1px rgba(235, 235, 235, 0.0);
    border-right: solid 1px rgba(235, 235, 235, 0.0);
}

#front-nav-portfolio1_top img{
    width: 70%;
}

#front-nav-portfolio1_top h6{
    font-size: 300%;
    line-height: .8;
}

/*
PORTFOLIO 2
*/

#front-nav-portfolio2 {
    float: left;
    height: 100vh;
    width: 16vw;
    background-color: #ffffff;
    -webkit-animation-duration: .7s;
    -webkit-animation-delay: .7s;
    color:#bbbbbb;
    border-left: solid 1px rgba(235, 235, 235, 0.0);
    border-right: solid 1px #ebebeb;
}

#front-nav-portfolio2:hover #front-nav-portfolio2_top {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s;
    padding: 1.5vw;
}

#front-nav-portfolio2 img{
    width: 50%;
    margin-bottom: -43px;
}

#front-nav-portfolio2 h6{
    font-size: 300%;
    line-height: .8;
}

#front-nav-portfolio2_top {
    background-image: url(images/glu_bg.svg);
    position: absolute;
    height: 100vh;
    width: 16vw;
    z-index: 10;
    visibility: hidden;
    opacity: .1;
    background-size: cover;
    color: white;
    padding:1.5%;
    border-left: solid 1px rgba(235, 235, 235, 0.0);
    border-right: solid 1px rgba(235, 235, 235, 0.0);
    background-repeat: no-repeat;
}

#front-nav-portfolio2_top img{
    width: 50%;
    margin-bottom: -43px;
}

#front-nav-portfolio2_top h6{
    font-size: 300%;
    line-height: .8;
}

/*
PORTFOLIO 3
*/

#front-nav-portfolio3{
    float: left;
    height: 100vh;
    width: 16vw;
    background-color: #ffffff;
    -webkit-animation-duration: .8s;
    -webkit-animation-delay: .8s;
    color:#bbbbbb;
    border-right: solid 1px rgba(235, 235, 235, 1);
    border-left: solid 1px rgba(235, 235, 235, 0.0);
}

#front-nav-portfolio3:hover #front-nav-portfolio3_top {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s;
    padding: 1.5vw;
}

#front-nav-portfolio3 img{
    width: 70%;
}

#front-nav-portfolio3 h6{
    font-size: 300%;
    line-height: .8;
}

#front-nav-portfolio3_top {
    background-image: url(images/riotgames_bg.svg);
    position: absolute;
    height: 100vh;
    width: 16vw;
    z-index: 10;
    visibility: hidden;
    opacity: .1;
    background-size: cover;
    color: white;
    padding:1.5%;
    border-left: solid 1px rgba(235, 235, 235, 0.0);
    border-right: solid 1px rgba(235, 235, 235, 0.0);
    background-repeat: no-repeat;
}

#front-nav-portfolio3_top h6{
    text-shadow: 3px 5px #000000;
    -webkit-text-stroke: 1px black;
}

#front-nav-portfolio3_top img{
    width: 70%;
}

#front-nav-portfolio3_top h6{
    font-size: 300%;
    line-height: .8;
}

/*
PORTFOLIO 4
*/

#front-nav-portfolio4{
    float: left;
    height: 100vh;
    width: 16vw;
    background-color: #ffffff;
    -webkit-animation-duration: .9s;
    -webkit-animation-delay: .9s;
    color:#bbbbbb;
    border-right: solid 1px rgba(235, 235, 235, 1);
    border-left: solid 1px rgba(235, 235, 235, 0.0);
}

#front-nav-portfolio4:hover #front-nav-portfolio4_top {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s;
    padding: 1.5vw;
}

#front-nav-portfolio4 img{
    width: 70%;
}

#front-nav-portfolio4 h6{
    font-size: 300%;
    line-height: .8;
}

#front-nav-portfolio4_top{
    position: absolute;
    height: 100vh;
    width: 16vw;
    z-index: 10;
    visibility: hidden;
    opacity: .1;
    background-size: cover;
    color: white;
    padding:1.5%;
    border-left: solid 1px rgba(235, 235, 235, 0.0);
    border-right: solid 1px rgba(235, 235, 235, 0.0);
    background-repeat: no-repeat;
    background-image: url(images/ea_bg.svg);
}


#front-nav-portfolio4_top img{
    width: 70%;
}

#front-nav-portfolio4_top h6{
    font-size: 300%;
    line-height: .8;
}

/*
TRANSITION
*/