* {margin:0; padding:0;}


/*MOBILE*/

@media only screen and (max-width:500px){
    
body {
	background-color:white;
	}
	
#wrap {
	width:90%;
    max-width: 1500px;
	margin: 0 auto;
	height:auto;
	padding-top: 5%;
    padding-bottom: 5%;
    background: transparent;
}

	
header {
	background-color:transparent;
	}

.center {
	text-align:center;
	}

	
h1.name a{
	text-align:center;
	color:black;
	font-family: 'Londrina Outline', cursive;
	font-size: 3em;
    line-height: 90%;
	text-decoration:none;
    letter-spacing: -2px;
    padding-bottom: 3%;
	}	

p {
	font-family:'Open Sans', sans-serif;
	color:black;
	text-align: left;
	}

footer {
	font-size: .8em;
	padding-bottom: 2%;
    padding-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
	clear:both;
    background: transparet;
	}

footer .social {
padding-bottom: .5%;
	}
	
footer p {
	color:black;
    font-family: 'Open Sans Condensed', sans-serif;
	}
	
.copy {
	opacity: 1;
	width:50%;
	float:left;
	}

.social {
	width:50%;
	float:left;
	text-align:right;
    
	}
	
.social a {
	margin-left: 2%;
    
	}
	
footer p.social a {
	color:black;
	}


/* INDEX STYLE */	

.front { 
    position: fixed; 
    bottom:0;
    width:100%;  
    opacity: 1;
    padding-bottom: 0;
    z-index: 4;
    background-color: rgba(255,255,255, .5);
    }

#wrapIndex {
    background: url("images/discoByThePool.jpeg") no-repeat center bottom fixed; 
    background-size: auto 150%;
    height: 100vh;
    margin: 0 auto;
    border: 1.5px solid red;
    position: relative;
    
    }

.index {
   margin: 0 auto;
    top: 50%;
  transform: translateY(-50%);
    height: 50vh;
    width:100%;
    position: absolute;
    }

.index nav {
    max-width: 80%;
    margin: 0 auto;
    }

.index h1 a {
    color:white;
    }

.index nav a {
    color: white;
    font-size: 1.5em;
    }

/* MENU */

.nav-wrap {
    height: 120px;
}
nav {
	display:block;
    text-align: center;
    height: 120px;
	}

/*dont show hamburger menu here*/
#menuHam {
    display: none;
    }

#menuReg {
        padding-top: 3%;
    }

.sticky {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    background-color: rgba(255,255,255, .8);
    z-index: 999;
    padding: 2% 0;
    }

/*hamburger*/

#menuToggle {
    display: block;
    position: relative;
    margin: 0 auto;
    
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: black;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
    }

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* Transform all the slices of hamburger into a crossmark.But let's hide the middle one.and the last one should go the other direction */
#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

/* Make this absolute positioned at the top left of the screen */
#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -100px;
  padding: 50px;
  padding-top: 125px;
  background: white;
  list-style-type: none;
    text-align:center;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

/** And let's slide it in from the left*/
#menuToggle input:checked ~ ul {
  transform: none;
 }

/*NAV*/


.contain {
  position: relative;
  width: 100%;
    }

.box{
	width:100%;
    height: 30px;
    background-color: transparent;
    padding-top: 2%;    
    }

.box a{
    text-align: center;
    position: relative;
    text-decoration: none;
    }

a.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom: 1.5px solid #E3E935;
    overflow: hidden;
    width: 0;
    height: 130%;
    transition: .5s ease;
    }


/* link */

a:link {
	color:black;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight:lighter;
	}
	
a:visited {color:black;}

a:active {color:#E3E935;}

#active {
    width: 100%;
    border-bottom: 1.5px solid #E3E935;
    padding-bottom: 1.2%;
    background-color: transparent;
    }
    
#active a{
    text-decoration: none;
    background-color: transparent;
    font-size: 1.2em;
    text-align: center;
    position: relative;
    text-decoration: none;  
    }


/*ABOUT PAGE*/

main.aboutme {
    margin: 0 auto;
	width:100%;
	font-size: .8em;
	padding-top:10%;
    }

.writing a {
    font-family: 'Open Sans', sans-serif;
    color: black;
    font-size: 1em;
    text-decoration: none;
    }

.writing a:active {
    text-decoration: none;
    color:#E3E935;
    font-size: 1.1em;
    }
	
.me {
    margin: 0 auto;
	padding: 3%;
	}
	
.aboutme .writing p {
	text-align: left;
    line-height: 140%;
    padding-bottom: 2%;
    width: 320px;
    margin: 0 auto;
	}
	
.about {
    background: transparent;
    margin: 0 auto;
    overflow: auto;
	}

.about img {
    max-width: 100%;
	height: auto;
	display: block;
    margin: 0 auto;
    }

/*CONTACT/RESUME*/

.column {
    float: left;
    width: 50%;
    text-align: left;
    padding-bottom: 10%;
    }

.contact {
    padding-top: 5%;
    margin: 0 auto;
    width: 80%;
    }

.contact p {
    text-align: center;
    line-height: 140%;
    padding-bottom: 3%;
    padding-top: 3%;
    }

.contact a {
    font-family: 'Open Sans', sans-serif;
    color: black;
    font-size: 1em;
    text-decoration: none;
    }

.contact a:active {
    text-decoration: underline;
    font-size: 1.1em;
    }
	
li.time {
	font-weight: light;
    font-size: .8em;
    line-height: 1.5;
    padding-top: .5%;
    }

li.place {
	font-weight: light;
    font-size: .8em;
    line-height: 1.5;
    padding-top: .5%;
    padding-bottom:3%;
    }

#underline {
  border-bottom: solid 2px #E3E935;
    }

.resume {
    padding-top: 3%;
    }

.resume li {
	list-style-type:none;
	color:gray;
    font-weight:500;
	font-family: 'Open Sans', sans-serif;
	}

.skills li {
    padding-bottom: 1%;
}

li.titleMe {
    padding-bottom: .5%;
    padding-top: 1.5%;
	font-weight: bold;
	color:black;
	font-family: 'Open Sans', sans-serif;
    }
	
li.catagory {
    padding: 3% 0;
	font-size:1.8em;
    font-family: 'Open Sans Condensed', sans-serif;
	}




/*PROJECTS*/

.projects{
    margin: 0 auto;
    }

.bar {
    height: 35vh;
    width: 100%;
    padding: 3% 0;
    margin: 3% auto;
    display: table;
    }

.projectTitle {
    text-align: center;
    font-size: 4vh;
    line-height: 1em;
    opacity: 1;
    color: white;
    margin: 0 auto;
    display: table-cell;
    vertical-align:middle;    
    }

.projectTitle.color{
    color: black;
    }

.projects a {
    text-decoration: none;
    }

.projects a:active {
    text-decoration: none;
    color:#E3E935;
    }
    
    

/*PROJECTS BARS*/

#gt.bar {
    background: url("images/genesisToday/socialPosts/gt_SEPT_2019_HEARTS.jpg") no-repeat center bottom; 
    background-size: auto 135%;
    }

#dogease.bar {
    background: url("images/dogease/dogEase_rawhideBrand-CaseStudy.jpg") no-repeat center center; 
    background-size: auto 100%;
    }

#aNewLeaf.bar {
    background: url("images/aNewLeaf/aNewLeaf_windowDecals-BAR-2.jpg") no-repeat center center; 
    background-size: auto 100%;
    }

#urbanwedding.bar {
    background: url("images/urbanWedding/urbanWedding_cover_BAR.jpg")no-repeat center center;
    background-size: auto 100%;
    }

#regal.bar {
    background: url("images/regal/regal-styleGuide26-BAR.jpg") no-repeat right center;
    background-size: auto 100%;
    }

#doodle.bar {
    background: url("images/doodleNavy/doodleNavy-4.png") no-repeat center center;
    background-size: auto 100%;
    }

#collage.bar {
    background: url("images/collageFood/little_donuts-4-BAR.jpg") no-repeat center center;
    background-size: auto 100%;
    }

#flossCoComic.bar {
    background: url("images/flossWindow1/floss_window1_final_BAR.jpg") no-repeat center center;
    background-size: auto 100%;
    }

#flossCoStory.bar {
    background: url("images/flossWindowStory/flossCo_windows3-BAR.jpg") no-repeat center center;
    background-size: auto 100%;
    }

#fastsigns.bar {
    background: url("images/fastsigns/chicagoWaffle-BAR.jpg") no-repeat center center;
    background-size: auto 100%;
    }

#jewelry.bar {
    background: url("images/jewelry/stampNecklace-1.jpg") no-repeat center center;
    background-size: auto 100%;
    }

#inw.bar {
    background: url("images/inw/hope/hope_guyOnCouch-BAR-2.jpeg") no-repeat center center;
    background-size: auto 100%;
    }

#inwPoof.bar {
    background: url("images/inw/poof/poof_daisies.jpeg") no-repeat center center;
    background-size: auto 100%;
    }

#inwMoreThan.bar {
    background: url("images/inw/moreThan/moreThan_pattern_bar.jpg") no-repeat center center;
    background-size: auto 130%;
    }

#sweetTooth.bar {
    background: url("images/sweetTooth/sweetTooth_social_blond-orangeTeeth-BAR.jpg") no-repeat top center;
    background-size: auto 170%;
    }





/*PROJECTS PAGES*/


.title {
    padding-top: 5%;
    width: 80%;
    height: auto;
    max-width: 1000px;
    margin: 0 auto;
    overflow: auto;
    }


.projectBody img{
    background: white;
    margin: 0 auto;
    max-width:100%;
    width: 100%;
    padding: 0 0;
	height: auto;
	display: block;

    }

.projectBody video{
    max-width:100%;
    width: 90%;
    }

.projectBody .acting h4{
    text-decoration: underline;
    padding-bottom: 1%;
    padding-top: 5%;
    color:black;
    }

.acting ul {
    list-style-type: none;
    font-family:'Open Sans', sans-serif;
    font-size: .8em;
    padding-left: 4%;
    line-height: 1.8em;
    }

.projectBody .writing p{
    font-size: .85em;
    line-height: 150%;
    padding-bottom: 3%;
    text-align: justify;
	}

.projectBody .writing .confidential p{
    font-size: .4em;
    line-height: 120%;
    padding: 1%;
    padding-bottom: 2%;
    color: gray;
	}

.writing h5{
    padding-bottom: 1%;
    padding-top: 1%;
    font-size: .8em;
    font-family: 'Open Sans',sans-serif;
    font-weight: 600;
	}

.projectBody h1 {
    font-family: 'Open Sans Condensed', sans-serif;
    }

.projectBody h4{
    color: black;
    font-family: 'Open Sans',sans-serif;
    font-size: 1em;
    line-height: .85em;
    padding-top: 1%;
    padding-bottom: 2%;
    }

.legible {
    background-color: rgba(255,255,255,.8);
    padding: 3%;
    border-radius: 5px;
    
    }

.projectBody h2{
    text-align: left;
    font-size: 2em;
    padding-top: 3%;
    font-family: 'Open Sans Condensed', sans-serif;
    }

#fineP {
	margin: 0 auto;
	text-align: center;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: .7em;
	color: black;
	letter-spacing: 2px;
    padding-top: 5%;
	}

#fineU {
	margin: 0 auto;
	text-align: center;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: .7em;
	color: black;
	letter-spacing: 2px;
    padding: 2% 0;
	}

#finePS {
	margin: 0 auto;
	text-align: center;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: .7em;
	color: black;
	letter-spacing: 2px;
    padding-top: 5%;
    padding-bottom: 3%;
	}

#fineGT {
	margin: 0 auto;
	text-align: center;
	font-family: futura-pt, sans-serif;
    font-weight: 700;
    font-style: normal;
	font-size: 1em;
	color: black;
	letter-spacing: 2px;
    padding-top: 5%;
    padding-bottom: 3%;
	}

img.rotate {
    transform: rotate(-90deg);
    }

img.rotateN {
    transform: rotate(90deg);
    padding: 0 5%;
}
    




/*jewlery*/

#jewelry img {
    max-width: 900px;
    padding: 3% 0;
    }

#jewelry .rotate {
    padding: 10% 0;
}

#jewelry .details img{
    width: 100%;
    }

/*FASTSIGNS*/

#fastsigns .details img.small{
    width:70%;
    max-width: 750px;
    }

#fastsigns .details img.xsmall{
    width: 50%;
    padding-bottom: 3%;
    max-width: 750px;
    }

#fastsigns .title video { 
    margin: 0 auto;
    width: 80%;
    display: block;
    transition: 1s opacity;
    padding-top: 5%;
    padding-bottom: 10%;
    min-width: 320px;
    }

#fastsigns .details video { 
    width: 80%;
    margin: 0 auto;
    display: block;
    transition: 1s opacity;
    padding-top: 3%;
    max-width: 1000px
    }


/*URBANWEDDING*/

#urbanwedding h2{
    color: black;
    font-family: 'bebas-neue',sans-serif;
    font-size: 5em;
    line-height: .85em;
    padding-bottom: 1.5%;
    }

#urbanwedding h3{
    font-family: 'bebas-neue',sans-serif;
    font-size: 2.5em;
    line-height: 1em;
    color: rgb(0,50,40);
    }

#urbanwedding h4{
    font-family: 'bebas-neue',sans-serif;
    font-size: 1.5em;
    line-height: 1em;
    padding-top: 2%;
    color: rgb(0,50,40);
    }

#urbanwedding #underline {
  padding: 1% 0;
  border-bottom: solid 2px #ffad33;
    }

.projectBody#urbanwedding img.morespace {
    padding: 3% 0;
    max-width: 100%;
    }

.projectBody#urbanwedding img {
    max-width: 100%;
    }

#urbanwedding .details img.small {
    width: 80%;
    max-width: 1200px;
    }



/*Sweet Tooth*/


#sweetTooth .details img.small{
    width: 70%;
    max-width: 750px
    }

.projectBody#sweetTooth img{
    padding: 3% 0;
    background: transparent;
    }

#sweetTooth .writing img {
    width: 50%;
    max-width: 300px;
    float: left;
    padding: 3% 5%;
    }

#sweetTooth .acting {
    clear:both;
}



/*aNewLeaf*/

#aNewLeaf .title img{
    width: 100%;
    max-width: 450px;
    background: none;
    }

#aNewLeaf #underline {
    padding: 2% 0;
    border-bottom: solid 2px #003300;
    }

#aNewLeaf .details img{
    width: 100%;
    }

#aNewLeaf .details img.small{
    width: 70%;
    max-width: 900px
    }

#aNewLeaf .details img.special{
    width: 100%;
    max-width: 1500px
    }

#aNewLeaf .details img.clear{
    background: none;
    }

.projectBody#aNewLead img {
    padding: 3% 0;
}


/*dogease*/

#dogease img{
    max-width: 70%;
    }

.projectBody#dogease .title img {
    padding: 3% 0;
    }




/*regal*/

#regal .title img{
    max-width: 600px;
    }

#regal .details img.border {
    border: 1px solid black;
    margin-top:2%;
    }

.projectBody#regal img.noB {
    padding: 3% 0;
    max-width: 1000px;
    }

#regal .details img.small {
    width: 80%;
    max-width: 1200px;
    }

#regal .details img.med {
    width: 80%;
    max-width: 1500px;
    }

#regal .details img {
    width: 100%;
    }



/*floss & Co COMIC*/

#flossCoComic .title img{
    width: 80%;
    max-width: 80%;
    }

#flossCoComic .details img{
    width: 80%;
    }

#flossCoComic .details #fine.space{
    padding-top: 8%;
    }

#flossCoComic .details img.small{
    width: 50%;
    min-width: 320px;
    }

.projectBody#flossCoComic img {
    padding: 3% 0;
}


#flossCoComic .details.clear img{
    background: none;
    }



/*floss & Co STORY*/

#flossCoStory .title video { 
    margin: 0 auto;
    display: block;
    transition: 1s opacity;
    padding-top: 5%;
    padding-bottom: 10%;
    }

#flossCoStory .details img{
    width: 100%;
    }

#flossCoStory .details .small video { 
    width: 50%;
    margin: 0 auto;
    display: block;
    transition: 1s opacity;
    padding-top: 3%;
    }

#flossCoStory .details video { 
    width: 80%;
    margin: 0 auto;
    display: block;
    transition: 1s opacity;
    padding-top: 3%;
    }

#flossCoStory .details img.small{
    width: 50%;
    }

.projectBody#flossCoStory img {
    padding: 3% 0;
}



/*collage*/

#collage .details img{
    max-width: 1000px;
    width: 90%;
    }

#collage .title img{
    max-width: 900px;
    width: 100%;
    }

#collage .details img.small {
    width: 60%;
}

#collage .details video { 
    margin: 0 auto;
    display: block;
    transition: 1s opacity;
    padding-top: 3%;
    max-height: 100vh;
    }



/*GT*/


#gt .title img{
    padding-bottom: 5%;
   
    }

#gt .details img.small{
    width: 50%;
    min-width: 320px;
    max-width: 750px;
    padding: 5% 0;
    }

#gt .details img.lg{
    width: 90%;
    max-width: 1500px;
    min-width: 320px;
    }

#gt .details img.xsmall{
    width: 30%;
    min-width: 320px;
    }

#gt #fineP {
    padding-bottom: 3%;
}

#gt .details img.med{
    width: 70%;
    min-width: 320px;
    padding: 10% 0;
    }

#gt .details video { 
    width: 100%;
    margin: 0 auto;
    display: block;
    transition: 1s opacity;
    padding-top: 3%;
    }

#gt .details .topicals img {
    padding: 3% 0;


}

#gt .wrapperP img{
    max-width: 900px;
    padding: 4% 0;
    }

#gt .details .floatL img{
    float:left;
    width: 50%;
}

#gt .details .floatL{
    width: 80%;
    margin: 0 auto;
    max-width: 1000px;
    padding-top:3%;
}

#gt .details .floatL4{
    width: 90%;
    margin: 0 auto;
    height: auto;
    max-width: 1600px;
    padding-top:3%;}

#gt .details .floatL4 img.border{
    float:left;
    width: 20%;
    border: 1px solid black;
    position: relative;
    margin-left: 1%;
	left: 8%;
}

#gt .details .floatL.xsm{
    width: 50%;
    min-width: 320px;
}

#gt .details img.clearB{
    clear:both;
}

#gt .clearB {
    clear: both;
}

#gt .details img.clearB.border {
    border: 2px solid black;
    margin-top:2%;
    margin-bottom: 3%;
    }




/*INW*/

#inw .title img{
    }

#inw .title img.small{
    width: 30%;
    min-width: 320px;
    max-width: 750px;
    padding-bottom: 9%;
    }

#inw .details img.small{
    width: 50%;
    min-width: 320px;
    max-width: 750px;
    padding-bottom: 1%;
    }

#inw .details img.lg{
    width: 90%;
    max-width: 1500px;
    min-width: 320px;
    }

#inw .details img.xsmall{
    width: 30%;
    min-width: 320px;
    }

#inw #fineP {
    padding-bottom: 3%;
}

#inw .details img.med{
    width: 70%;
    min-width: 320px;
    padding: 3% 0;
    }

#inw .details video { 
    width: 100%;
    margin: 0 auto;
    display: block;
    transition: 1s opacity;
    padding-top: 3%;
    }

#inw .details .topicals img {
    padding: 3% 0;


}

#inw .wrapperP img{
    max-width: 900px;
    padding: 4% 0;
    }

#inw .details .floatL img{
    float:left;
    width: 50%;
}

#inw .details .floatL{
    width: 80%;
    margin: 0 auto;
    max-width: 1000px;
    padding-top:3%;
}

#inw .details .floatL4{
    width: 90%;
    margin: 0 auto;
    height: auto;
    max-width: 1600px;
    padding-top:3%;}

#inw .details .floatL4 img.border{
    float:left;
    width: 20%;
    border: 1px solid black;
    position: relative;
    margin-left: 1%;
	left: 8%;
}

#inw .details .floatL.xsm{
    width: 50%;
    min-width: 320px;
}

#inw .details img.clearB{
    clear:both;
}

#inw .clearB {
    clear: both;
}

#inw .details img.clearB.border {
    border: 2px solid black;
    margin-top:2%;
    margin-bottom: 3%;
    }



/*doodle*/

#doodle .title img{
    max-width: 900px;
    width: 100%;
    }

#doodle .details img.small{
    width: 50%;
    }

#doodle .details video { 
    width: 80%;
    margin: 0 auto;
    display: block;
    transition: 1s opacity;
    padding-top: 3%;
    }

.projectBody#doodle img {
    padding: 3% 0;
}






/*FOOTER GUIDE*/

#guide {
	text-align:center;
	background-color: none;
	display:block;
    width: 90%;
    margin: 0 auto;
    }

.projectFooter {
    clear: both;
}

#guide a:active {
    color:#E3E935;
    }

#guide a{
    text-decoration: none;
    line-height: 2em;
    border-left: 1.5px solid #E3E935;
    padding: 0 3%;
    }

#guide a.border {
    border-left: none;
    }

/*TOP*/


.top {
    text-align: center;
    padding: 5% 0;
    }

.topInw {
    text-align: center;
    padding-top: 2%;
    }

.top a, .topInw a{
    text-decoration: none;
    }

.top a:active, .topInw a:active {
    color:#E3E935;
    }
	



/* PORTFOLIO PAGE*/

#fine {
	margin: 0 auto;
	text-align: center;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: .7em;
	color: black;
	letter-spacing: 2px;
    padding-bottom: 1%;
	}

#fine.space {
    margin-top: 7%;
    padding-top: 5%;
    }



	
/*masonary*/
/*this allows the images and frames to be responsive in size*/
.masonry img, iframe {
	max-width: 90%;
	height: auto;
	display: block;
    margin: 0 auto;
    }
	
.wrapper {
	margin:0 auto;
	padding: 50px 0 0 0;
    }
	
.masonry {
	margin: 1.5em 0;
	padding: 0;
	-moz-column-gap: 1em;
	-webkit-column-gap: 1em;
	column-gap: 1em;
	font-size: .85em;
	}
/*below styles each item box, change background color and padding here, includes drop-shadow*/
.item {
	display: inline-block;
	padding:10%;
	width: 80%;
	box-sizing: boarder-box;
	-moz-box-sizing:boarder-box;
	-webskit-box-sizing:barder-box;
	}
/* these are the media queries that will change the number of columns based on browser width*/


.masonry {
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
		}

}

/*Tablet and above 481px*/

@media only screen and (min-width:501px){
    
body {
	background-color:white;
	}
	
#wrap {
	width:80%;
    max-width: 1500px;
    min-width: 320px;
	margin: 0 auto;
	height:auto;
	padding-top: 5%;
    padding-bottom: 5%;
    background: transparent;
}

	
header {
	background-color:transparent;
	}

.center {
	text-align:center;
	}

	
h1.name a{
	text-align:center;
	color:black;
	font-family: 'Londrina Outline', cursive;
	font-size: 3em;
    line-height: 90%;
	text-decoration:none;
    letter-spacing: -2px;
    padding-bottom: 3%;
	}	

p {
	font-family:'Open Sans', sans-serif;
	color:black;
	text-align: left;
	}

footer {
	font-size: 1em;
	padding-bottom: 2%;
    padding-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
	clear:both;
    background: transparet;
	}

footer .social {
padding-bottom: .5%;
	}
	
footer p {
	color:black;
    font-family: 'Open Sans Condensed', sans-serif;
	}
	
.copy {
	opacity: 1;
	width:50%;
	float:left;
	}

.social {
	width:50%;
	float:left;
	text-align:right;
    
	}
	
.social a {
	margin-left: 2%;
    
	}
	
footer p.social a {
	color:black;
	}


/* INDEX STYLE */	

.front { 
    position: fixed; 
    bottom:0;
    width:100%;  
    opacity: 1;
    padding-bottom: 0;
    z-index: 4;
    background-color: rgba(255,255,255, .5);
    }

#wrapIndex {
    background: url("images/discoByThePool.jpeg") no-repeat center bottom fixed; 
    background-size: auto 150%;
    height: 100vh;
    margin: 0 auto;
    border: 1.5px solid red;
    position: relative;
    
    }

.index {
   margin: 0 auto;
    top: 50%;
  transform: translateY(-50%);
    height: 50vh;
    width:100%;
    position: absolute;
    }

.index nav {
    max-width: 80%;
    margin: 0 auto;
    }

.index h1 a {
    color:white;
    }

.index nav a {
    color: white;
    font-size: 1.5em;
    }

/* MENU */

.nav-wrap {
    height: 120px;
}
nav {
	display:block;
    text-align: center;
    height: 120px;
	}

/*dont show hamburger menu here*/
#menuHam {
    display: none;
    }


.sticky {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    background-color: rgba(255,255,255, .8);
    z-index: 999;
    padding: 2% 0;
    }
    
    #menuReg { 
    padding-top: 5%;
    margin: 0 auto;
    list-style-type:none;
	text-align:center;
	background-color: transparent;
        }
    
    .sticky #menuReg { 
    width:80%;
    max-width: 1500px;
    padding-top: 1%;

        }


/*hamburger*/

#menuToggle {
    display: block;
    position: relative;
    margin: 0 auto;
    
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: black;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
    }

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* Transform all the slices of hamburger into a crossmark.But let's hide the middle one.and the last one should go the other direction */
#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

/* Make this absolute positioned at the top left of the screen */
#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -100px;
  padding: 50px;
  padding-top: 125px;
  background: white;
  list-style-type: none;
    text-align:center;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

/** And let's slide it in from the left*/
#menuToggle input:checked ~ ul {
  transform: none;
 }

/*NAV*/


.contain {
  position: relative;
  width: 100%;
    }

.box{
	width:100%;
    height: 30px;
    background-color: transparent;
    padding-top: 2%;    
    }

.box a{
    text-align: center;
    position: relative;
    text-decoration: none;
    }

a.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom: 1.5px solid #E3E935;
    overflow: hidden;
    width: 0;
    height: 130%;
    transition: .5s ease;
    }

.contain:hover a.overlay {
    width: 100%;
    height: 130%;
    }

.contain:hover {
    font-size: 1.2em;
    line-height: .4;
    }


/* link */

a:link {
	color:black;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight:lighter;
	}
	
a:visited {color:black;}

a:hover {color:black;}

a:active {color:white;}

#active {
    width: 100%;
    border-bottom: 1.5px solid #E3E935;
    padding-bottom: 1.2%;
    background-color: transparent;
    }
    
#active a{
    text-decoration: none;
    background-color: transparent;
    font-size: 1.2em;
    text-align: center;
    position: relative;
    text-decoration: none;  
    }

#active a:hover{
    color: gray;
    }




/*ABOUT PAGE*/

main.aboutme {
    margin: 0 auto;
	width:100%;
	font-size: .8em;
	padding-top:10%;
    }

.writing a {
    font-family: 'Open Sans', sans-serif;
    color: black;
    font-size: 1em;
    text-decoration: none;
    }

.writing a:hover {
    text-decoration: underline;
    font-size: 1.1em;
    }
	
.me {
    
    margin: 0 auto;
	padding: 0 3% 3% 0;
    float: left;
    max-width: 50%;
        }
	
.aboutme .writing p {
	text-align: left;
    line-height: 140%;
    padding-bottom: 0%;
     padding-bottom: 2%;
	}
	
.about {
    background: transparent;
    margin: 0 auto;
    overflow: auto;
	}

.about img {
    max-width: 100%;
	height: auto;
	display: block;
    margin: 0 auto;
    }

/*CONTACT/RESUME*/

.column {
    float: left;
    width: 50%;
    text-align: left;
    padding-bottom: 10%;
    }

.contact {
    padding-top: 5%;
    margin: 0 auto;
    width: 80%;
    }

.contact p {
    text-align: center;
    line-height: 140%;
    padding-bottom: 3%;
    padding-top: 3%;
    }

.contact a {
    font-family: 'Open Sans', sans-serif;
    color: black;
    font-size: 1em;
    text-decoration: none;
    }

.contact a:hover{
    text-decoration: underline;
    font-size: 1.1em;
    }
	
li.time {
	font-weight: light;
    font-size: .8em;
    line-height: 1.5;
    padding-top: .5%;
    }

li.place {
	font-weight: light;
    font-size: .8em;
    line-height: 1.5;
    padding-top: .5%;
    padding-bottom:3%;
    }

#underline {
  border-bottom: solid 2px #E3E935;
    }

.resume {
    padding-top: 3%;
    }

.resume li {
	list-style-type:none;
	color:gray;
    font-weight:500;
	font-family: 'Open Sans', sans-serif;
	}

.skills li {
    padding-bottom: 1%;
}

li.titleMe {
    padding-bottom: .5%;
    padding-top: 1.5%;
	font-weight: bold;
	color:black;
	font-family: 'Open Sans', sans-serif;
    }
	
li.catagory {
    padding: 3% 0;
	font-size:1.8em;
    font-family: 'Open Sans Condensed', sans-serif;
	}




/*PROJECTS*/

.projects{
    margin: 0 auto;
    }

.bar {
    height: 35vh;
    width: 100%;
    padding: 3% 0;
    margin: 1.5% auto;
    display: table;
    }

    
    .projectTitle {
    text-align: center;
    font-size: 6vh;
    line-height: 1em;
    opacity: 1;
    color: white;
    margin: 0 auto;
    display: table-cell;
    vertical-align:middle;    
    }

.projectTitle.color{
    color: black;
    }

.projects a {
    text-decoration: none;
    }

.projects a:hover {
    text-decoration: none;
    }

/*PROJECTS BARS*/

#gt.bar {
    background: url("images/genesisToday/socialPosts/gt_SEPT_2019_HEARTS.jpg") no-repeat center bottom fixed; 
    background-size: auto 135%;
    }

#dogease.bar {
    background: url("images/dogease/dogEase_rawhideBrand-CaseStudy.jpg") no-repeat center center fixed; 
    background-size: auto 100%;
    }

#aNewLeaf.bar {
    background: url("images/aNewLeaf/aNewLeaf_windowDecals-BAR-2.jpg") no-repeat center center fixed; 
    background-size: auto 100%;
    }

#urbanwedding.bar {
    background: url("images/urbanWedding/urbanWedding_cover_BAR.jpg")no-repeat center center fixed;
    background-size: auto 100%;
    }

#regal.bar {
    background: url("images/regal/regal-styleGuide26-BAR.jpg") no-repeat right center fixed;
    background-size: auto 100%;
    }

#doodle.bar {
    background: url("images/doodleNavy/doodleNavy-4.png") no-repeat center center fixed;
    background-size: auto 100%;
    }

#collage.bar {
    background: url("images/collageFood/little_donuts-4-BAR.jpg") no-repeat center center fixed;
    background-size: auto 100%;
    }

#flossCoComic.bar {
    background: url("images/flossWindow1/floss_window1_final_BAR.jpg") no-repeat center center fixed;
    background-size: auto 100%;
    }

#flossCoStory.bar {
    background: url("images/flossWindowStory/flossCo_windows3-BAR.jpg") no-repeat center center fixed;
    background-size: auto 100%;
    }

#fastsigns.bar {
    background: url("images/fastsigns/chicagoWaffle-BAR.jpg") no-repeat center center fixed;
    background-size: auto 100%;
    }

#jewelry.bar {
    background: url("images/jewelry/stampNecklace-1.jpg") no-repeat center center fixed;
    background-size: auto 90%;
    }

#inw.bar {
    background: url("images/inw/hope/hope_guyOnCouch-BAR-2.jpeg") no-repeat center center fixed;
    background-size: auto 100%;
    }

#inwPoof.bar {
    background: url("images/inw/poof/poof_daisies.jpeg") no-repeat center center fixed;
    background-size: auto 100%;
    }

#inwMoreThan.bar {
    background: url("images/inw/moreThan/moreThan_pattern_bar.jpg") no-repeat center center fixed;
    background-size: auto 130%;
    }

#sweetTooth.bar {
    background: url("images/sweetTooth/sweetTooth_social_blond-orangeTeeth-BAR.jpg") no-repeat top center fixed;
    background-size: auto 170%;
    }





/*PROJECTS PAGES*/


.title {
    padding-top: 5%;
    width: 80%;
    height: auto;
    max-width: 1000px;
    margin: 0 auto;
    overflow: auto;
    }


.projectBody img{
    background: white;
    margin: 0 auto;
    max-width:100%;
    width: 100%;
    padding: 0 0;
	height: auto;
	display: block;

    }

.projectBody video{
    max-width:100%;
    width: 90%;
    }

.projectBody .acting h4{
    text-decoration: underline;
    padding-bottom: 1%;
    padding-top: 5%;
    color:black;
    }

.acting ul {
    list-style-type: none;
    font-family:'Open Sans', sans-serif;
    font-size: .8em;
    padding-left: 4%;
    line-height: 1.8em;
    }

.projectBody .writing p{
    font-size: .85em;
    line-height: 150%;
    padding-bottom: 1%;
	}

.projectBody .writing .confidential p{
    font-size: .75em;
    line-height: 120%;
    padding: 1%;
    padding-bottom: 2%;
    color: gray;
	}

.writing h5{
    padding-bottom: 1%;
    padding-top: 1%;
    font-size: .8em;
    font-family: 'Open Sans',sans-serif;
    font-weight: 600;
	}

.projectBody h1 {
    font-family: 'Open Sans Condensed', sans-serif;
    }

.projectBody h4{
    color: black;
    font-family: 'Open Sans',sans-serif;
    font-size: 1em;
    line-height: .85em;
    padding-top: 1%;
    padding-bottom: 2%;
    }

.legible {
    background-color: rgba(255,255,255,.8);
    padding: 3%;
    border-radius: 5px;
    
    }

.projectBody h2{
    text-align: left;
    font-size: 2em;
    padding-top: 3%;
    font-family: 'Open Sans Condensed', sans-serif;
    }

    #fineP {
	margin: 0 auto;
	text-align: center;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: .9em;
	color: black;
	letter-spacing: 2px;
    padding-top: 5%;
	}

#fineU {
	margin: 0 auto;
	text-align: center;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: .9em;
	color: black;
	letter-spacing: 2px;
    padding: 2% 0;
	}

#finePS {
	margin: 0 auto;
	text-align: center;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: .9em;
	color: black;
	letter-spacing: 2px;
    padding-top: 5%;
    padding-bottom: 3%;
	}

#fineGT {
	margin: 0 auto;
	text-align: center;
	font-family: futura-pt, sans-serif;
    font-weight: 700;
    font-style: normal;
	font-size: 1em;
	color: black;
	letter-spacing: 2px;
    padding-top: 5%;
    padding-bottom: 3%;
	}

    
    

img.rotate {
    transform: rotate(-90deg);
    }

img.rotateN {
    transform: rotate(90deg);
    padding: 0 5%;
}



/*jewlery*/

#jewelry img {
    max-width: 900px;
    padding: 3% 0;
    }

#jewelry .rotate {
    padding: 10% 0;
}

#jewelry .details img{
    width: 100%;
    }

/*FASTSIGNS*/

#fastsigns .details img.small{
    width:70%;
    max-width: 750px;
    }

#fastsigns .details img.xsmall{
    width: 50%;
    padding-bottom: 3%;
    max-width: 750px;
    }

#fastsigns .title video { 
    margin: 0 auto;
    width: 80%;
    display: block;
    transition: 1s opacity;
    padding-top: 5%;
    padding-bottom: 10%;
    min-width: 320px;
    }

#fastsigns .details video { 
    width: 80%;
    margin: 0 auto;
    display: block;
    transition: 1s opacity;
    padding-top: 3%;
    max-width: 1000px
    }


/*URBANWEDDING*/

#urbanwedding h2{
    color: black;
    font-family: 'bebas-neue',sans-serif;
    font-size: 5em;
    line-height: .85em;
    padding-bottom: 1.5%;
    }

#urbanwedding h3{
    font-family: 'bebas-neue',sans-serif;
    font-size: 2.5em;
    line-height: 1em;
    color: rgb(0,50,40);
    }

#urbanwedding h4{
    font-family: 'bebas-neue',sans-serif;
    font-size: 1.5em;
    line-height: 1em;
    padding-top: 2%;
    color: rgb(0,50,40);
    }

#urbanwedding #underline {
  padding: 1% 0;
  border-bottom: solid 2px #ffad33;
    }

.projectBody#urbanwedding img.morespace {
    padding: 3% 0;
    max-width: 100%;
    }

.projectBody#urbanwedding img {
    max-width: 100%;
    }

#urbanwedding .details img.small {
    width: 80%;
    max-width: 1200px;
    }



/*Sweet Tooth*/

body#sweetTooth {
    background: url("images/sweetTooth/projectBackground_sweetTooth.svg") no-repeat left center fixed;
    }

#sweetTooth .details img.small{
    width: 70%;
    max-width: 750px
    }

.projectBody#sweetTooth img{
    padding: 3% 0;
    background: transparent;
    }

#sweetTooth .writing img {
    width: 50%;
    max-width: 300px;
    float: left;
    padding: 3% 5%;
    }

#sweetTooth .acting {
    clear:both;
}



/*aNewLeaf*/

#aNewLeaf .title img{
    width: 100%;
    max-width: 450px;
    background: none;
    }

#aNewLeaf #underline {
    padding: 2% 0;
    border-bottom: solid 2px #003300;
    }

#aNewLeaf .details img{
    width: 100%;
    }

#aNewLeaf .details img.small{
    width: 70%;
    max-width: 900px
    }

#aNewLeaf .details img.special{
    width: 100%;
    max-width: 1500px
    }

#aNewLeaf .details img.clear{
    background: none;
    }

body#aNewLeaf {
    background: url("images/aNewLeaf/aNewLeaf_plants-13.svg") no-repeat left center fixed;
    }

.projectBody#aNewLead img {
    padding: 3% 0;
}


/*dogease*/

#dogease img{
    max-width: 70%;
    }

.projectBody#dogease .title img {
    padding: 3% 0;
    }




/*regal*/

#regal .title img{
    max-width: 600px;
    }

#regal .details img.border {
    border: 1px solid black;
    margin-top:2%;
    }

.projectBody#regal img.noB {
    padding: 3% 0;
    max-width: 1000px;
    }

#regal .details img.small {
    width: 80%;
    max-width: 1200px;
    }

#regal .details img.med {
    width: 80%;
    max-width: 1500px;
    }

#regal .details img {
    width: 100%;
    }



/*floss & Co COMIC*/

#flossCoComic .title img{
    width: 80%;
    max-width: 80%;
    }

#flossCoComic .details img{
    width: 80%;
    }

#flossCoComic .details #fine.space{
    padding-top: 8%;
    }

#flossCoComic .details img.small{
    width: 50%;
    min-width: 320px;
    }

.projectBody#flossCoComic img {
    padding: 3% 0;
}

body#flossCoComic {
    background: url("images/flossWindow1/Floss_dots_web-01.svg") no-repeat left center fixed;
    }

#flossCoComic .details.clear img{
    background: none;
    }



/*floss & Co STORY*/

#flossCoStory .title video { 
    margin: 0 auto;
    display: block;
    transition: 1s opacity;
    padding-top: 5%;
    padding-bottom: 10%;
    }

#flossCoStory .details img{
    width: 100%;
    }

#flossCoStory .details .small video { 
    width: 50%;
    margin: 0 auto;
    display: block;
    transition: 1s opacity;
    padding-top: 3%;
    }

#flossCoStory .details video { 
    width: 80%;
    margin: 0 auto;
    display: block;
    transition: 1s opacity;
    padding-top: 3%;
    }

#flossCoStory .details img.small{
    width: 50%;
    }

.projectBody#flossCoStory img {
    padding: 3% 0;
}



/*collage*/

#collage .details img{
    max-width: 1000px;
    width: 90%;
    }

#collage .title img{
    max-width: 900px;
    width: 100%;
    }

#collage .details img.small {
    width: 60%;
}

#collage .details video { 
    margin: 0 auto;
    display: block;
    transition: 1s opacity;
    padding-top: 3%;
    max-height: 100vh;
    }



/*GT*/

#gt .title img{
    padding-bottom: 5%;
   
    }

#gt .details img.small{
    width: 50%;
    min-width: 320px;
    max-width: 750px;
    padding-bottom: 1%;
    }

#gt .details img.lg{
    width: 90%;
    max-width: 1500px;
    min-width: 320px;
    }

#gt .details img.xsmall{
    width: 30%;
    min-width: 320px;
    }

#gt #fineP {
    padding-bottom: 3%;
}

#gt .details img.med{
    width: 70%;
    min-width: 320px;
    padding: 1% 0;
    }

#gt .details video { 
    width: 70%;
    margin: 0 auto;
    display: block;
    transition: 1s opacity;
    padding-top: 3%;
    }

#gt .details .topicals img {
    padding: 3% 0;


}

#gt .wrapperP img{
    max-width: 900px;
    padding: 4% 0;
    }

#gt .details .floatL img{
    float:left;
    width: 50%;
}

#gt .details .floatL{
    width: 80%;
    margin: 0 auto;
    max-width: 1000px;
    padding-top:3%;
}

#gt .details .floatL4{
    width: 90%;
    margin: 0 auto;
    height: auto;
    max-width: 1600px;
    padding-top:3%;}

#gt .details .floatL4 img.border{
    float:left;
    width: 20%;
    border: 1px solid black;
    position: relative;
    margin-left: 1%;
	left: 8%;
}

#gt .details .floatL.xsm{
    width: 50%;
    min-width: 320px;
}

#gt .details img.clearB{
    clear:both;
}

#gt .clearB {
    clear: both;
}

#gt .details img.clearB.border {
    border: 2px solid black;
    margin-top:2%;
    margin-bottom: 3%;
    }




/*INW*/

#inw .title img{
    }

#inw .title img.small{
    width: 30%;
    min-width: 320px;
    max-width: 750px;
    padding-bottom: 9%;
    }

#inw .details img.small{
    width: 50%;
    min-width: 320px;
    max-width: 750px;
    padding-bottom: 1%;
    }

#inw .details img.lg{
    width: 90%;
    max-width: 1500px;
    min-width: 320px;
    }

#inw .details img.xsmall{
    width: 30%;
    min-width: 320px;
    }

#inw #fineP {
    padding-bottom: 3%;
}

#inw .details img.med{
    width: 70%;
    min-width: 320px;
    padding: 3% 0;
    }

#inw .details video { 
    width: 100%;
    margin: 0 auto;
    display: block;
    transition: 1s opacity;
    padding-top: 3%;
    }

#inw .details .topicals img {
    padding: 3% 0;


}

#inw .wrapperP img{
    max-width: 900px;
    padding: 4% 0;
    }

#inw .details .floatL img{
    float:left;
    width: 50%;
}

#inw .details .floatL{
    width: 80%;
    margin: 0 auto;
    max-width: 1000px;
    padding-top:3%;
}

#inw .details .floatL4{
    width: 90%;
    margin: 0 auto;
    height: auto;
    max-width: 1600px;
    padding-top:3%;}

#inw .details .floatL4 img.border{
    float:left;
    width: 20%;
    border: 1px solid black;
    position: relative;
    margin-left: 1%;
	left: 8%;
}

#inw .details .floatL.xsm{
    width: 50%;
    min-width: 320px;
}

#inw .details img.clearB{
    clear:both;
}

#inw .clearB {
    clear: both;
}

#inw .details img.clearB.border {
    border: 2px solid black;
    margin-top:2%;
    margin-bottom: 3%;
    }



/*doodle*/

#doodle .title img{
    max-width: 900px;
    width: 100%;
    }

#doodle .details img.small{
    width: 50%;
    }

#doodle .details video { 
    width: 80%;
    margin: 0 auto;
    display: block;
    transition: 1s opacity;
    padding-top: 3%;
    }

.projectBody#doodle img {
    padding: 3% 0;
}






/*FOOTER GUIDE*/

#guide {
	text-align:center;
	background-color: none;
	display:block;
    width: 90%;
    margin: 0 auto;
    }

.projectFooter {
    clear: both;
}

#guide a:hover{
    color: gray;
    }

#guide a{
    text-decoration: none;
    line-height: 2em;
    border-left: 1.5px solid #E3E935;
    padding: 0 3%;
    }

#guide a.border {
    border-left: none;
    }

/*TOP*/


.top {
    text-align: center;
    padding: 5% 0;
    }

.topInw {
    text-align: center;
    padding-top: 2%;
    }

.top a, .topInw a{
    text-decoration: none;
    }

.top a:hover, .topInw a:hover {
    color:gray;
}
	

#fine {
	margin: 0 auto;
	text-align: center;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: .9em;
	color: black;
	letter-spacing: 2px;
    padding-bottom: 1%;
	}

#fine.space {
    margin-top: 7%;
    padding-top: 5%;
    }
    
    
/*masonary*/
/*this allows the images and frames to be responsive in size*/
.masonry img, iframe {
	max-width: 90%;
	height: auto;
	display: block;
    margin: 0 auto;
    }
	
.wrapper {
	margin:0 auto;
	padding: 50px 0 0 0;
    }
	
.masonry {
	margin: 1.5em 0;
	padding: 0;
	-moz-column-gap: 1em;
	-webkit-column-gap: 1em;
	column-gap: 1em;
	font-size: .85em;
	}
/*below styles each item box, change background color and padding here, includes drop-shadow*/
.item {
	display: inline-block;
	padding:10%;
	width: 80%;
	box-sizing: boarder-box;
	-moz-box-sizing:boarder-box;
	-webskit-box-sizing:barder-box;
	}
/* these are the media queries that will change the number of columns based on browser width*/

/*mobile first*/

.masonry {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
		}


    #fineGT {
        font-size: 1.2em;
    }


    }


/*DESKTOP  and above 600x*/	
@media only screen and (min-width:600px){

    #fine, #fineP, #finePS, #fineU {
		font-size: .9em;
	   }
    
     #wrap {
border: 1.5px solid transparent;    }
    
    
	}
	
@media only screen and (min-width:700px){
  
    h1.name a{
        font-size: 4em;
    }
    
    #menuReg { 
    display: flex;
    font-size: 1.1em;
    padding-top: 8%;
    margin: 0 auto;
    list-style-type:none;
	text-align:center;
	background-color: transparent;
        }
    
    .sticky #menuReg { 
    width:80%;
    max-width: 1500px;
    padding: 1% 0 2%;

        }
    

    
    #menuToggle {
    display: none;
    }
    
    .bar {
    width:100%;
    }
    
    .nav-wrap {
    height: 60px;
    }
    nav {
    height: 60px;
	}
    
     #wrap {
border: 1.5px solid transparent;        }
    
    .projectBody .writing p{
    font-size: .9em;
	}
    
    .acting ul {
    font-size: .9em;
    }
}

/*desktop above 960px*/

@media only screen and (min-width:910px){
    
    .masonry {
		-moz-column-count: 3;
		-webkit-column-count: 3;
		column-count: 3;
        }
    
    main.aboutme {
	   font-size: .9em;
        }
    
    .projectBody .writing p{
    font-size: 1em;
	}
    
        .nav-wrap {
    height: 70px;
    }
    nav {
    height: 70px;
        
	}
    
    #menuReg { 
    display: flex;
    font-size: 1.1em;
    padding-top: 8%;
    margin: 0 auto;
    list-style-type:none;
	text-align:center;
	background-color: transparent;
        }
    
    .sticky #menuReg { 
    width:80%;
    max-width: 1500px;
    padding: 1% 0 2%;
        }
    
    #wrap {
border: 1.5px solid transparent;        }
    
    }

@media only screen and (min-width:1100px){
   
    h1.name a{
        font-size: 5em;
        }
    
    nav { 
        font-size: 1.3em;
         height: 80px;
        }
    
     #fine, #fineP, #finePS, #fineU {
		font-size: 1em;
	   }
    #fineGT{
        font-size: 1.4em;
    }
    
        #menuReg { 
    display: flex;
    font-size: 1.1em;
    padding-top: 6%;
    margin: 0 auto;
    list-style-type:none;
	text-align:center;
	background-color: transparent;
        }
    
    .sticky #menuReg { 
    width:80%;
    max-width: 1500px;
    padding: 1% 0 2%;
        }
    
     #wrap {
border: 1.5px solid transparent;        }
  
     .about {
       max-width: 750px;
        }
        .nav-wrap {
    height: 80px;
}
    }

@media only screen and (min-width:1300px){
   
    #wrap {
border: 1.5px solid transparent;        }
    
    .contact {
        width: 60%
        }
    
    .me {
        width: 50%;
        }
    
        /*MEDIA BARS*/
    
    #gt.bar { 
    background-size: auto 200%;
    }
    
    #aNewLeaf.bar {
    background-size: auto 150%;
    }

    #urbanwedding.bar {
    background-size: auto 150%;
    }

    #regal.bar {
    background-size: auto 100%;
    }

    #doodle.bar {
    background-size: auto 200%;
    }

    #collage.bar {
    background-size: auto 150%;
    }

    #flossCoComic.bar {
    background-size: auto 150%;
    }
    #flossCoStory.bar {
    background-size: auto 150%;
    }

    #inw.bar {
    background-size: auto 150%;
    }
    
    #inwPoof.bar {
    background-size: auto 150%;
    }

#inwMoreThan.bar {
    background-size: auto 150%;
    }
    
    #sweetTooth.bar {
    background-size: auto 270%;
    }
    
    #fastsigns.bar {
    background-size: auto 120%;
    }
    
    #dogease.bar {
        background-size: auto 130%;
    }
    
    #jewelry.bar {
    background-size: auto 120%;
    }
    
    }

@media only screen and (min-width:1650px){

    .masonry {
		-moz-column-count: 4;
		-webkit-column-count: 4;
		column-count: 4;
		}
    
    .about {
       max-width: 1000px;
        }
    
    .aboutme .writing p {
	line-height: 150%;
    font-size: 1.2em;
	}
    
    .writing h5 {
	line-height: 150%;
    font-size: .9em;
	}
    
    nav {
        width: 75%;
        margin: 0 auto;
        }
    
    .sticky #menuReg {
        width: 60%;
        margin: 0 auto;
    }
     
    #wrap {
        border: 1.5px solid transparent;
        }
    
	}