/* fonts */
@font-face {
    font-family: "Primary";
    src: url("../fonts/EditorialNew-Thin.otf");
}

@font-face {
    font-family: "Secondary";
    src: url("../fonts/FormulaCondensed-Bold.otf");
}

/* standard */
body {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 40px;
	overflow-x: hidden!important;
}

a {
	color: #000;
    position: relative;
    text-decoration: none;
}

a:hover {
	color: #0008ff;
	text-decoration: none;
}

.date {
	font-family: Secondary, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.awards {
	margin-top: 25px;
}

.gold {
	color: #deb952 !important;
}

.bronze {
	color: #cf5332 !important;
}

.silver {
	color: #9ca7ad !important;
}

.behance {
	color: #3d5aff !important;
}

.homepage {
    background-color:#fff;
	margin: 0;
}

.bio {
	background-color:#fff;
}

.project {
    background-color:#fff;
    color:#000;
}

.project a {
    color:#000
}

::selection {
  background: #ff0000; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ff0000; /* Gecko Browsers */
}




/* spacer */
#spacer {
    height: 10vh;
}

.spacer-little {
    height: 5vh;
}

.divider-line {
	width: 100%;
	height: 1px;
	background-color: #fff;
}


/*///////////////////////////////////////*/
/*////////////// Nav Menu ///////////////*/
/*///////////////////////////////////////*/


#top-toggle-left {	
	z-index: 150;
    position: fixed;
    top: 20px;
	left: 0px;
    text-align: left;
    margin-left: 34px;
    padding-top: 12px;
    padding-left: 20px;
    padding-right:20px;
    width:auto;
	border: 1px solid #000;
    border-radius: 50px;
	color: #000;
	font-family: Primary, Helvetica, sans-serif;
	font-size: 22px;
    line-height: 28px;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}

#top-toggle-left:hover{
	background-color: #0dff00;
	color: #000;
}

#top-toggle-right {	
	z-index: 150;
    position: fixed;
    top: 20px;
	left: 0px;
    text-align: left;
    margin-left: 108px;
    padding-top: 12px;
    padding-left: 20px;
    padding-right:20px;
    width:auto;
	border: 1px solid #000;
    border-radius: 50px;
	color: #000;
	font-family: Primary, Helvetica, sans-serif;
	font-size: 22px;
    line-height: 28px;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}

#top-toggle-right:hover{
	background-color: #0dff00;
	color: #000;
}

#bottom-toggle {
    z-index: 150;
    position: fixed;
    left: 0px;
    top: 20px;
    text-align: left;
    margin-left: 344px;
    padding-top: 12px;
	padding-left:20px;
    padding-right:20px;
    width:auto;
	border: 1px solid #000;
    border-radius: 50px;
	color: #000;
	font-family: Primary, Helvetica, sans-serif;
	font-size: 22px;
    line-height: 28px;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}

#bottom-toggle:hover{
	background-color: #0dff00;
	color: #000;
}



.bottom-phone {
    position: fixed;
    text-align:right;
    right: 0;
    margin-right: 26px;  
}

/* Project Toggle */

.toggle-left {
    z-index: 150;
    position: fixed;
    left: 0px;
    bottom: 20px;
    text-align: left;
    margin-left: 34px;
    padding-top: 12px;
    padding-left: 20px;
    padding-right:20px;
    width:auto;
	border: 1px solid #000;
    border-radius: 50px;
	color: #000;
	font-family: Primary, Helvetica, sans-serif;
	font-size: 22px;
    line-height: 28px;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1); 
}

.toggle-left:hover{
	background-color: #0dff00;
}

.toggle-right {
    z-index: 150;
    position: fixed;
    right: 0px;
    bottom: 20px;
    text-align: left;
    margin-right: 34px;
    padding-top: 12px;
    padding-left: 20px;
    padding-right:20px;
    width:auto;
	border: 1px solid #000;
    border-radius: 50px;
	color: #000;
	font-family: Primary, Helvetica, sans-serif;
	font-size: 22px;
    line-height: 28px;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}

.toggle-right:hover{
	background-color: #0dff00;
}

/*///////////////////////////////////////*/
/*/////////////// Content ///////////////*/
/*///////////////////////////////////////*/

/* Fade Ins */

.fade-in {
  animation: fadeIn ease 3s;
  -webkit-animation: fadeIn ease 3s;
  -moz-animation: fadeIn ease 3s;
  -o-animation: fadeIn ease 3s;

}
@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
	
}
@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}




/* Anchors */
#work {
	/* --
	display: relative;
	width: 100%;
	height: auto;
	background-size: 100%;
	background-image: url('../images/profile/HomeBG.gif');
	--- */
}
#project {
}

.left p{
    text-align: left;
}

.right p{
    text-align: right;
}

.big-text p {
	color: #000;
	font-family: Primary, Helvetica, sans-serif;
    font-size: 26px;
    line-height: 36px;
	letter-spacing: 0.5px;
    display: block;
}

span.big-text {
	color: #fff;
	font-family: Primary, Helvetica, sans-serif;
    font-size: 90px;
    line-height: 84px;
    display: inline;
}

.home-text {
	text-align: center;
	padding-left: 36px;
	padding-right: 36px;
}

.home-show {
	padding-top: 40px;
}

.proj-text {
	color: #000;
	font-family: Secondary, Helvetica, sans-serif;
	text-transform: uppercase;
    font-size: 92px;
    line-height: 84px;
	letter-spacing: 0px;
    display: inline;
	text-align: center;
	margin-top: -48px;
}

.proj-description {
	margin-top: 20px;
}

/*// .proj-1 a:hover {
    position: relative;
}

.proj-1 a:hover:after {
    z-index:150;
    content: url(../images/profile/proj-hover.gif);
    height: 50px;
	width: auto;
    display: block;
    position: relative;
}

.proj-2 a:hover {
    position: relative;
}
.proj-2 a:hover:after {
    z-index:150;
    content: url(../images/profile/proj-hover.gif);
    height: 50px;
	width: auto;
    display: block;
    position: relative;
}

.proj-3 a:hover {
    position: relative;
}
.proj-3 a:hover:after {
    z-index:150;
    content: url(../images/profile/proj-hover.gif);
    height: 50px;
	width: auto;
    display: block;
    position: relative;

}

.proj-4 a:hover {
    position: relative;
}
.proj-4 a:hover:after {
    z-index:150;
    content: url(../images/profile/proj-hover.gif);
    height: 50px;
	width: auto;
    display: block;
    position: relative;
}

.proj-5 a:hover {
    position: relative;
}
.proj-5 a:hover:after {
    z-index:150;
    content: url(../images/profile/proj-hover.gif);
    height: 50px;
	width: auto;
    display: block;
    position: relative;
}

.proj-6 a:hover {
    position: relative;
}
.proj-6 a:hover:after {
    z-index:150;
    content: url(../images/profile/proj-hover.gif);
    height: 50px;
	width: auto;
    display: block;
    position: relative;
}

.proj-11 a:hover {
    position: relative;
}
.proj-11 a:hover:after {
    z-index:150;
    content: url(../images/profile/proj-hover.gif);
    height: 50px;
	width: auto;
    display: block;
    position: relative;
}

///*/

.description {
    margin-top: 35vh;
    margin-bottom: 35vh;    
}

.proj-description {
    text-align: left;
}

.intro {
    padding-top: 20vh;
    padding-bottom: 10vh;
}
        

/* -------------------------------------------------For Mobile--------------------------------------------- */
@media only screen and (max-width: 875px) {
	#bottom-toggle {
	top: initial;
	bottom: 20px;
	margin-left: 34px;
	}
}

@media only screen and (max-width: 600px) {
	body {
    margin-left: 0px;
    margin-right: 0px;
	}

    .bottom-email {
    margin-left: 15px;
	}

	.bottom-phone {
    margin-right: 0px;  
	} 
    
	.toggle-left{
	margin-left: 12px;
	}

	.toggle-right{
	margin-right: 12px;
	}
	
	#top-toggle-left{
	margin-left: 12px;
	}

	#top-toggle-right{
	margin-left: 180px;
	}
	
	#bottom-toggle{
	margin-left: 12px;
	}
	
	.home-text {
	padding-left: 12px;
	padding-right: 12px;
	font-size: 48px;
    line-height: 50px;
}
	.bio {
	padding-left: 0px;
	padding-right: 0px;
	}

    .big-text p{
    font-size: 18px;
    line-height: 22px;
    }

	.big-text a{
    font-size: 48px;
    line-height: 50px;
    }

	span.big-text {
    font-size: 48px;
    line-height: 50px;
    display: inline;
	}
    
    .large-text h1{
    font-size: 32px;
    line-height: 34px;
    display: block;
    margin-bottom: 20px;
    }

	.large-text-home h1{
    font-size: 36px;
    line-height: 38px;
    display: block;
    margin-bottom: 20px;
    }
    
	.proj-text {
    font-size: 48px;
    line-height: 50px;
    display: inline;
	}

    #toggle {
    margin-bottom: 30px;
    }
}

#project-hero {
    margin-left: -20px;
    height: 100vh;
    width: 100vw;
}

.proj-sub {
    font-size: 16px;
    line-height: 20px;
}

.proj-sub-sub {
    font-size: 16px;
    line-height: 18px;
}


.footer-home {
    padding-top: 150px;
    text-align: right;
    font-size: 60px;
    line-height: 64px;
}

.down-arrow {
    font-size: 16px;
    text-align: left;
}

.credentials {
    text-align:right;
}



.showcase1{
    width: 100%;
    height: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
}

.showcase2{
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.mini {
	padding: 20px;
}

.showcase2{
    z-index: 0;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.profile{
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Videos */

.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    height: auto;
    margin-top: 5px;
    margin-bottom: 5px;
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

/*///////////////////////////////////////*/
/*/////////////// Footers ///////////////*/
/*///////////////////////////////////////*/

.footer-gif {
    z-index: 1;
    position: relative;
    height: 50px;
    width: auto;
    float: left;
}