@charset "UTF-8";
/*============================================
Style Sheet for Jasmine L Jackson Portfolio

last modified:August 26,2019
author:Jasmine Jackson
email:hello@jasmineljackson.com
website:www.jasmineljackson.com
=============================================*/
/* Base Styles */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap');
body{font-family:"Open Sans", sans-serif; margin:0; height:100%;position:relative;}
/*Typography*/
h1{font-size:3em; font-weight:400; line-height: .9em; color:#000;}
h3{font-weight:600;}
h3.title{font-size:2em;padding:0; margin:0;line-height: 1em;}
section.page-header h3.title{line-height:1em;}
h4{font-size:0.75em; font-weight:400; color:#000;}

h5{font-size:0.75em; font-weight:300; color:#3d3d3d;}
h1 span.light{font-weight:300;}
a{text-decoration: none; color:#000;}
/*Exception Rules Typography*/
.dark-grey h4, .dark h4{color:#fff;}
/*Brand Identity*/
.brand{width:60px; height:90px; background:#000; text-align: center;}
.jlj-icon{width:30.14px;height:50px; margin-top:22px;}
/*animation*/
.dropin{animation-name:drop; animation-duration:1s; animation-timing-function: cubic-bezier(0.65, 1.27, 1, 1);}
@keyframes drop{
    0%{height:0px;}  
	100%{height:90px;}
    }
.fade-icon {animation-name:fadeaway; animation-duration: 1s; animation-timing-function: ease-in;}
@keyframes fadeaway{
	0%{opacity:0;} 
	30%{opacity:0;} 
	100%{opacity:1.0;}
}
/*main container*/
.wrapper{width:86%; margin:0 auto;}
/*header*/
.wrapper header{max-width:300px;}
/*filter section*/
.active{font-weight:400; color:#000;}
.filter ul li{cursor: pointer;}
span.divider{display:block;border-bottom:1px solid rgba(0,0,0,0.8);}
.filter{font-weight:300;}
.filter ul{padding:0; margin:3px 0px 40px 0px;}
.filter li{display:inline-block; padding:4px 8px;}
/*image gallery*/
section.gallery{margin-bottom:100px;}
.gallery div{width:100%; height:90px; box-sizing: border-box; position: relative; overflow:hidden;}
.gallery div.item:nth-child(odd){background:#f2f2f2;}
.gallery div.item:nth-child(odd) h4{color:#000;}
.gallery div.item:nth-child(even){background:#1a1a1a;}
.gallery div.item:nth-child(even) h5{color:rgba(255,255,255,0.5);}
.gallery div.item:nth-child(even) h4{color:#fff;}
.gallery .description{width:80%; padding-top:10px; margin-left:14px;}
.gallery div.item img{position:absolute;width:101%; top:-20px; opacity:0; transition:1s ease;}
.gallery div.item h4{font-weight:600;}
.gallery div.item:hover img{opacity:1.0;}
.gallery div.item:hover h4, .gallery div.item:hover h5{display:none;}
.description h4{margin-bottom:0;}
.description h5{margin-top:0;}
/*Back to Top*/
.up{width:20px; height:20px; background:#000;position:fixed;top:506px; right:0; text-align:center;}
.up a span{width:8px; height:8px; display:inline-block; border-left:2px solid #fff; border-top:2px solid #fff; transform: rotate(45deg);}
/*footer section*/
footer{position:fixed;width:100%; height:50px; background:#000; display:flex;box-sizing: border-box; margin-top:30px; bottom:0 !important;}
footer img{height:20px;margin-left:40px;}
img.behance{height:30px; margin-top:8px;}
img.linkedin{height:22px; margin-top:11px;}
/*==========================================
Secondary page
=============================================*/
section.page-header{margin-left:75px; margin-top:30px;}
section.page-header p{margin-top:3px;}
section#cover{
    box-sizing: border-box;
    width:100%;
    position:relative;
    z-index:-2;
    overflow: hidden;
    margin-top:20px;
    
}
#cover img{
 width:100%;
}
.infoContainer{display:flex;box-sizing: border-box; padding:10px;}
.details{box-sizing: border-box; width:100%; padding:10px;}
div.imageContainer{display:flex;flex-wrap: wrap;box-sizing: border-box;padding:2px; margin-bottom:100px;}
div.images{width:50%;overflow:hidden; box-sizing:border-box; padding:8px;}
div.images img{width:100%;}
.wrapper .imageContainer .images img:nth-child(2){margin-top:6%;}
p.link{font-weight: 600;}
div.about-btns a {font-size:1.25em; text-align:center; background:#000; color:#fff; padding:20px; margin-bottom:10px; display:block;}
div.about-btns a:nth-child(even) {box-sizing:border-box; background:#fff; color:#000; border:3px solid #000;}
.back-to-home{display:inline-block; position:fixed; z-index: 100; width:150px; height:40px; color:#fff; background:#000; bottom:50px; right:30px; text-align: center; transition:1s ease;}
.back-to-home a p{margin:10px auto; color:#fff; font-size:1.1em;}
.back-to-home:hover{background: grey;}
.back-to-home a:hover {background:grey;}

/*==========================================
About page
=============================================*/
.about-page p{font-size:1.5em; line-height:2em;}
.about-page p.lead{font-size:1.3em;}
.about-page p a:hover{text-decoration: underline;}
/*==========================================
Index Page Breaking Points
=============================================*/
/*Collapse Nav Menu with Hamburger Menu*/
@media (max-width:991.99px){
    nav a{color:#fff;}
    /*Container with logo and hamburger Menu*/
    .brand-container{width:86%; display:flex; justify-content: space-between;margin:0 auto;}
    .nav-btn{width:40px; height:23px; position:relative; top:20px;z-index:3;}
    .nav-btn span{position:absolute; display:block; width:30px;height:6px; background:#000; transition: all cubic-bezier(0.25, 0.1, 0.4, 1.47) 0.27s;}
    .nav-btn span:nth-child(2){top:10px;}
    .nav-btn span:nth-child(3){top:20px;}
    .nav-btn.close span{top:10px; background:#fff;transform: rotate(45deg);}
    .nav-btn.close span:nth-child(2),.nav-btn.close span:nth-child(3){transform: rotate(-45deg);}
    
    
    /*Navigation Section*/
    nav{position:absolute; width:100%;height:100vh; z-index:2;top:-100vh; background-color:#000; color:#fff; transition:1s;}
    nav ul{margin:20px 0px 0px;padding:0; text-align:center;}
    nav ul li{padding:20px; font-size:1.6em; font-weight:300;}
	nav ul li a:hover{text-decoration: line-through;}
    .brand-nav{width:100px; height:150px; margin:0 auto; margin-top:70px; border:6px solid #fff; text-align:center; color:#fff;}
    .brand-nav p{font-family:'Helvetica Neue', Helvetica, 'sans-serif'; text-transform: uppercase;font-size:0.8125em;}
    nav .brand-nav svg.brand{margin-top:22px; width:44px; height:73px;}
    .expanded{top:0;transition:1s;}
}
@media (min-width:575px){
/*	Brand Identity*/
	.brand{width:66px; height:113px;}
	.jlj-icon{margin-top:40px;}
/*    Animation*/
    .dropin{animation-name:drop; animation-duration:1s; animation-timing-function: cubic-bezier(0.65, 1.27, 1, 1);}
    @keyframes drop{
    0%{height:0px;}  100%{height:113px;}
    }
	/*main container*/
	.wrapper{width:90%;}
	h1{font-size:4.218125em; line-height:1em;}
/*	Portfolio Gallery*/
    .gallery{display:flex; flex-wrap: wrap;}
	.gallery div.item:nth-child(odd) h4{color:#000;}
    .gallery div.item.mid-grey{background-color:#727272;}
	.gallery div.item.mid-grey h4{color:#fff;}
    .gallery div{width:50%; height:182px;}
    .gallery div:nth-child(3n){width:100%;}
}

@media (min-width:768px){
/*    Navigation Section*/
    .brand-nav{margin-top:250px;}
    
/*	Portfolio Gallery*/
	.gallery div.item img{top:0px; width:106%;}
	span.divider{max-width:645px;}
	.gallery div.item h4{font-size:1em;}
	.gallery div.item.cream{background-color:#f2f2f2;}
	.gallery div.item.cream h4{color:#000;}
	.gallery div.item.cream h5{color:#3d3d3d;}
	.gallery div.item.dark{background-color:#000;}
    .gallery div.item.dark h4{color:#fff;}
	.gallery div.item.dark-grey{background-color:#1a1a1a;}
	.gallery div.item.dark-grey h4{color:#fff;}
    .gallery div{width:33.3333333333%; height:230.4px;}
    .gallery div:nth-child(3n){width:33.3333333333%; height:230.4px;}
	.gallery div.item.dark-grey h5{color:rgba(255,255,255,0.5);}
	
/*	Change the order of Items in Gallery*/
    .gallery div:nth-child(1){order:1;}/*voiceyourchoice*/
    .gallery div:nth-child(2){order:2;}/*tasty rolls*/
    .gallery div:nth-child(3){order:4; width:99.9999999999%;}/*graduation announcement*/
    .gallery div:nth-child(4){order:3;}/*Senior Portraits*/
    .gallery div:nth-child(5){order:5;}/*Dreamery*/
    .gallery div:nth-child(6){order:8; width:99.9999999999%;}/*Yale*/
    .gallery div:nth-child(7){order:6;}/*Lit kingz*/
    .gallery div:nth-child(8){order:7;}/*Nintendo*/
    .gallery div:nth-child(9){order:12; width:99.9999999999%;}/*Film Photo*/
    .gallery div:nth-child(10){order:9;}/*Chief*/
    .gallery div:nth-child(11){order:10;}/*Champs*/
    .gallery div:nth-child(12){order:16; width:99.9999999999%;}/*Senior Portraits II*/
    .gallery div:nth-child(13){order:11;}/*Isometric World*/
    .gallery div:nth-child(14){order:13;}/*Phoenix*/
    .gallery div:nth-child(15){order:15;}/*Lil Round*/
    .gallery div:nth-child(16){order:14;}/*Beauty Favors*/   
    /*Back to Top*/
    .up{top:910px;}
    /*About Buttons*/
    div.about-btns a {display:inline-block;}
    div.about-btns a:nth-child(even) {padding:18px 20px;}
}
@media (min-width:992px){
/*	Brand Identity*/
	.brand-container{width:90%; margin:0 auto;}
    .brand-nav{display:none;}
/*    navigation section*/
    .main-brand-container{display:flex; width:90%; margin:0 auto;}
    nav{width:50%; animation-name: fadeIn; animation-duration: 3s; transition-timing-function: ease-in;}
    @keyframes fadeIn{0%{opacity:0;} 100%{opacity:1;}}
    nav ul{list-style: none; margin:50px 0 0 0; padding:0;}
    nav ul li{display:inline-block;padding:10px 20px;}
	nav ul li a:hover{border-bottom:2px solid #000;}
/*	Portfolio Gallery*/
	.gallery div.item img{top:-20px; width:101%;}
	.gallery div:nth-child(3){width:66.6666666666%;}
	.gallery div:nth-child(6){width:66.6666666666%;}
	.gallery div:nth-child(9){width:66.6666666666%;}
	.gallery div:nth-child(12){width:66.6666666666%;}
}
@media (min-width:1200px){
    .gallery div{height:250px;}
    .gallery div{height:250px;}
    .gallery div:nth-child(3n){height:250px;}
}
@media (min-width:1400px){
    .wrapper{max-width: 1260px;}
    .brand-container{max-width:1260px;}
    .gallery div{height:280px;}
    .gallery div{height:280px;}
    .gallery div:nth-child(3n){height:280px;}
}