* {box-sizing: border-box; transition:0.2s ease-in-out; }

body {font-family: 'lato'; font-weight: 300; padding: 0px; margin: 0px auto; color: #1a1a1a;  background-color: rgba(255, 255, 255, 1); font-size: 1em; line-height: 1.65em; letter-spacing: .5px; width: 100%; }

.contact{height: 85vh; }

.wrapper {background-color: rgb(10, 10, 10); height: 720px; margin: 0px auto;}
img {margin: 0px auto;}

#bodycontainer {max-width: 90%; margin: 60px auto 0px; text-align: center; background-color:rgb(255, 255, 255); padding: 0px 0px 50px; height: 100%; }

a {color:  #64bbb3; text-decoration: none; cursor: crosshair;}
a:hover {color:  #FFBB88; font-weight: 900; letter-spacing: 1px;}

nav {display: none; position: fixed; top: 40px; height: 70vh; width: 160px; position: fixed; z-index: 1; display: flex; flex-direction: column; align-items: center; border-right: 1px solid #090909; transition:0.3s ease-in-out;}
nav a {margin: 0px 0px 20px 0px; text-decoration: none; color: #000;}
nav a:hover {text-decoration: none; color: #64bbb3; font-weight: 900;letter-spacing: 1px;}
nav .active {color: #64bbb3; font-weight: 900; letter-spacing: 1px;}
nav .active:hover {color: #FFBB88; font-weight: 900;}

#content {overflow: hidden; width: 82% ; min-height: 70vh ; margin: 0px auto; text-align: left; padding: 0px 0px 0px 0px; margin: 0px auto 0px 180px}
#contentp {overflow: hidden; width: auto; min-height: 90vh ; margin: 0px auto; text-align: left; padding: 0px 0px 0px 20px; margin-left: 120px}

h2 {padding: 0px; margin: 5px 0px 15px 0px; font-size: 2.33em; color: rgb(100, 187, 179);}
h3 {padding: 0px; margin: 5px 0px 15px 0px; font-size: 2em; line-height: 1em; color: rgb(100, 187, 179); }
h4 {padding: 0px; margin: 15px 0px 0px;font-size: 1.1em; color: rgb(100, 187, 179); font-weight: 900;}

li {list-style: circle;}

input[type=text], select, textarea {width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; padding: 5px 2.5px; font-family: 'lato'; letter-spacing: .5px}
input[type=submit] {background-color: #64bbb3; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer;margin-bottom: 0px; font-size: 12px; letter-spacing: 1px; font-weight: 500}
input[type=submit]:hover { background-color: #FFBB88;}

.InstaFeed {display: flex;}

.lightwidget-widget {width: 90%; border:0; margin: 0px auto;  padding: 20px 0px;}

.blurb{margin: auto; width: 100%; padding: 0px 20px 20px;}

.project{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10, #p11, #p12, #p12
{ width: 300px; height: 300px; margin: 0px 5px 30px 0px; overflow: hidden;  align-items: center; justify-content: center; display: flex;}
#p1:hover, #p2:hover, #p3:hover, #p4:hover, #p5:hover, #p6:hover, #p7:hover, #p8:hover, #p9:hover, #p10:hover, #p11:hover, #p12:hover, #p12:hover
{opacity: 0.66; filter: alpha(opacity=66);}

#p1 img, #p3 img, #p5 img, #p7 img
{max-width: 300px; max-height: 352px; align-items: center; overflow: hidden; justify-content: center;}
#p2 img, #p12 img
{max-width: 300px; max-height: 300px; align-items: center; overflow: hidden; justify-content: center;}
#p4 img,  #p6 img, #p8 img, #p11 img, #p12 img
{max-width: 407px; max-height: 300px; align-items: center; overflow: hidden; justify-content: center;}
#p9 img, #p10 img
{max-width: 407px; max-height: 260px; align-items: center; overflow: hidden; justify-content: center;}

.projpage{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; }
.projpage a {font-weight: 700; padding: 0px; margin: 0px 0px 20px;}

#jan1 ,#jan2, #jan3 
{max-width: 310px; height: 310px; margin: 0px 0px 20px 0px; display: flex; overflow: hidden;  align-items: center; justify-content: center; opacity: 1; filter: alpha(opacity=100);}
#jan1:hover, #jan2:hover, #jan3:hover, #smudge:hover{opacity: 0.66; filter: alpha(opacity=66);}
#jan1 img {max-width: 380px; max-height: 500px; align-items: center; overflow: hidden; justify-content: center;}
#jan2 img, #jan3 img {min-width: 520px; max-height: 380px; overflow: hidden;}

#chip{width: 720px; height: 480px; margin: 0px auto 20px}

#cyber{width: 1080px; height: 720px; margin: 0px auto 20px; color: black;}

#smudge {width: 720px; height: 495px; margin: 0px 20px 20px 0px; display: flex; align-items: center; justify-content: center; opacity: 1; filter: alpha(opacity=100);}
#smudge img {min-width: 720px; max-height: 495px;}

#AQd {float: left; width: 420px; text-align: center; margin: 0px 20px 0px 0px}
#AQd img, #AQm img {margin: 10px 0px 30px;}
#AQm {float: left; width: 240px; text-align: center;}
#artsquest img {max-width: auto; max-height: 540px;}
#artsquestYT{width: 460px; height: 247px; margin: 0px auto 20px; margin: 0px 0px 20px 0px;}
#artsquestapp {max-height: 480px; max-width: auto;}
#artsquest img:hover, #artsquestapp img:hover {opacity: 0.66; filter: alpha(opacity=66);}

#buzzdYT{width: 720px; height: 540px; margin: 0px auto 20px}
#buzzd{width: 350px; height: 650px; margin: 0px auto 30px}
#buzzd img{width: 350px; height: 650px; margin: 0px auto 20px}
#buzzd img:hover{opacity: 0.66; filter: alpha(opacity=66);}

#kidsposter {width: auto; margin: 0px 0px 40px 0px; display: flex; align-items: center; justify-content: center; opacity: 1; filter: alpha(opacity=100);}
#kidsposter img {max-width: auto; max-height: 600px; align-items: center; justify-content: center;}
#kids {width: 50%; height: 50%; margin: 0px 0px 20px 0px; display: flex; overflow: hidden;  align-items: center; justify-content: center;opacity: 1; filter: alpha(opacity=100);}
#kids img {max-width: 90%; max-height: 100%; align-items: center; overflow: hidden; justify-content: center;}
#kids img:hover {opacity: 0.66; filter: alpha(opacity=66);}

#storytelling
{width: 100%; height: 720px; margin: 0px 0px 20px 0px; display: flex;  align-items: center; justify-content: center;opacity: 1; filter: alpha(opacity=100);}
#storytelling img {min-width:720px; max-height: 100%;}
#storytelling img:hover {opacity: 0.66; filter: alpha(opacity=66);}

#turf {width: auto; height: 600px; margin: 0px 0px; display: flex;  align-items: center; justify-content: center;opacity: 1; filter: alpha(opacity=100);}
#turf img {max-width: auto; max-height: 720px; align-items: center; justify-content: center;}
#turf img:hover {opacity: 0.66; filter: alpha(opacity=66);}
#turfc{width: 1080px; height: 720px; margin: 0px auto 20px}
#turfD
{width: 266; height: 266px; margin: 0px 20px 20px 0px; display: flex; overflow: hidden;  align-items: center; justify-content: center;opacity: 1; filter: alpha(opacity=100);}
#turfD img {max-width: auto; max-height: 300px; align-items: center; overflow: hidden; justify-content: center;}
#turfD img:hover {opacity: 0.66; filter: alpha(opacity=66);}

#salvaged
{width: 1080px; height: 720px; margin: 0px 00px 20px 0px; display: flex; overflow: hidden;  align-items: center; justify-content: center;opacity: 1; filter: alpha(opacity=100);}
#salvaged img {max-width: 1080px; max-height: 720px; align-items: center; overflow: hidden; justify-content: center;}
#salvaged img:hover {opacity: 0.66; filter: alpha(opacity=66);}
#salvagedD
{width: 266px; height: 266px; margin: 0px 20px 20px 0px; display: flex; overflow: hidden;  align-items: center; justify-content: center;opacity: 1; filter: alpha(opacity=100);}
#salvagedD img {max-width: auto; max-height: 340px; align-items: center; overflow: hidden; justify-content: center;}
#salvagedD img:hover {opacity: 0.66; filter: alpha(opacity=66);}

#self
{width: 720px; height: 493px; margin: 0px 20px 20px 0px; display: flex; overflow: hidden;  align-items: center; justify-content: center;opacity: 1; filter: alpha(opacity=100);}
#self img {max-width: 1080px; max-height: ; align-items: center; overflow: hidden; justify-content: center;}
#self img:hover {opacity: 0.66; filter: alpha(opacity=66);}

#passages {width: 720px; height: 528px; margin: 0px auto 20px}

.LA{width: 70px; float: left;  margin: 0px 0px 0px 20px; font-weight: 500; padding: 0px;}
#bl{margin: -36px 0px 0px 25px; width: 40px; float: left}
#back{max-width: 20px; margin:0px 0px 5px; opacity: .5;}
.RA{width: 70px; float: right; margin: -4px 20px 0px 0px; font-weight: 500; padding: 0px;}
#nl{margin: -4px 0px 0px 10px; width: 20px float: right}
#next{max-width: 20px; float: right; margin: 0px 0px 10px 0px; transform: rotate(180deg); opacity: .5;}
#back:hover, #next:hover {opacity: .33;}

footer {padding: 16px 0px; color: #fafafa; background-color: #080307; width: 100%; margin: 0px auto 0px; height: auto; text-align: center; font-size: 16px; margin-top: -18px}
footer .factive {color:  #64bbb3; font-weight: 900;}
footer a{text-decoration: none; color: #777777; padding: 0px 15px; }
footer a:hover{text-decoration: none; color: #fafafa; font-weight: 900;}
footer p {font-size: 12.5px; font-style: italic; margin: 0px;}
footer .factive:hover {color:  #FFBB88;}

.foot {margin: 0px; padding: 15px 0px 35px; font-size: 12px; color: rgba(255,255,255,.5);}
.lastUpdate {margin: -6px 0px 0px; padding: 0px; font-size: 10px; font-style: italic}

.logo {padding: 0px ; list-style: none; display: flex; background-repeat: no-repeat;}
.logo li {margin: 0px 0px 10px; height: 100px; list-style: none; background-repeat: no-repeat;}
.logo a:hover {background: none; background-repeat: no-repeat; }
.logo li a, .logo li a:visited {display: block; text-decoration: none; text-indent: -9999px; height: 100px; background-repeat: no-repeat;}

.SGB {background-image:url('assets/logoH.svg'); width: 100px;}
.SGB a {background-image: url('assets/logo.svg');}

.fb {background-image:url('assets/facebookH.svg'); width: 25px;}
.fb a {background-image: url('assets/facebook.svg');}
.ig {background-image: url('assets/instaH.svg'); width: 25px;}
.ig a {background-image: url('assets/insta.svg');}
.li {background-image: url('assets/linkedinH.svg'); width: 25px;}
.li a {background-image: url('assets/linkedin.svg');}

.menu {padding: 0px ; list-style: none; display: flex; background-repeat: no-repeat;}
.menu li {margin: 0px 5px 0px; height: 25px; list-style: none; background-repeat: no-repeat; float: left; }
.menu a:hover {background: none; background-repeat: no-repeat;}
.menu li a, .menu li a:visited {display: block; text-decoration: none; text-indent: -9999px; height: 25px; background-repeat: no-repeat;}

.cvCONTENT h4{ padding: 0px; margin: 25px 0px 2px; font-weight: 900;}

.cvCONTENT {font-weight: 400; width: 82%; text-align: left; padding: 0px 10px 0px 20px; margin: 0px auto 0px 180px}

.cvCONTENT li {font-weight: 300; line-height: 36px;}

.PDF {font-size: 24px; color: #FFBB88; font-weight: 900; border-bottom: 1px solid rgba(255, 187, 136,.5);}

.PDF:hover {color: #64bbb3; border-bottom: 1px solid rgba(100, 187, 179,.5); }

.CV { margin: 0px 0px ;}    

.cvLI {list-style-image: url('assets/bullet.png');  list-style position: ;}  

.selectX li {padding: 0px; margin: 0px 0px 10px;}

b {font-weight: 400; }

.content {width: 70%; padding: 0px; margin: 0px auto 0px 200px; text-align: left;}

.content a {font-weight: 400;}

.folioWRAP {width: 95%; padding: 0px; margin: 0px auto 0px 160px}
.folioWRAP h3{margin: 0px 0px 30px; font-size: 36px;}






/* -- RESIZING -- */
@media screen and (min-width: 901px) and (max-width: 1280px) {  

.contact{height: 90vh  
}       
    
#bodycontainer {max-width: 100%;}
    
.wrapper {height: 660px;} 

#content {padding: 0px 15px 0px 0px;} 
    
.lightwidget-widget {width: 95%}    

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10, #p11, #p12, #p12
{ width: 300px; height: 300px; margin: 0px 1px 30px 0px;}    
    
#jan1 ,#jan2, #jan3 {width: 240px; height: 240px;}
#jan1 img {max-width: 300px; max-height: 347px;}
#jan2 img, #jan3 img {min-width: 400px; max-height: 266px;}        
    
#chip{width: 630px; height: 420px;}

#cyber{width: 630px; height: 420px;}

#smudge {width: 420px; height: 305px;}
#smudge img {min-width: 420px; max-height: 305px;}

#AQd {width: 320px;}
#AQm {width: 220px;}
#artsquest img {min-width: 320px; max-height: 370px;}
#artsquestYT {width: 350px; height: 188px;}
#artsquestapp {max-height: 375px; max-width: auto;}

#buzzdYT{width: 560px; height: 420px; margin: 0px auto 20px}
#buzzd{width: 214px; height: 420px; margin: 0px auto 20px}
#buzzd img{width: 214px; height: 420px; margin: 0px auto 20px}

#kidsposter img {max-width: auto; max-height: 420px;}
#kids {width: 50%; height: 50%; margin: 0px auto 20px}
#kids img {max-width: 90%; max-height:100%; }

#storytelling{width: auto; height: 630px; }
#storytelling img {min-width: auto; max-height: 630px;}

#turf{width: auto; height: 400px;  margin: 0px 0px 20px 0px; }
#turf img {max-width: auto; max-height: 400px;}
#turfc {width: 630px; height: 420px;}
#turfD {width: 150px; height: 150px; margin: 0px 20px 20px 0px;}
#turfD img {max-width: 150px; max-height: 200px;}

#salvaged {width: 630px; height: 420px; margin: 0px 0px 20px 0px;}
#salvaged img {max-width: 420px; max-height: 320px; }
#salvagedD {width: 150px; height: 150px; margin: 0px 20px 20px 0px; }
#salvagedD img {max-width: 150px; max-height: 200px; }

#self {width: 630px; height: 420px; margin: 0px 0px 20px 0px; }
#self img {max-width: 630px; max-height: 420px;}

#passages {width: 630px; height: 420px;} 

.folioWRAP {width: 70%; padding: 0px; margin: 0px auto 0px 160px}  
    
.content {width: 78%; padding: 0px; margin: 0px auto 0px 180px; text-align: left;} 
    
    
    
    
    
    
    
    
} /* end laptop */
@media screen and (min-width: 501px) and (max-width: 900px) {
    
.contact{height: 95vh;}
    
.wrapper {height: 550px;}    
 
nav {height: 60vh; width: 120px;}    
 
#bodycontainer {width: 100%; margin: 30px 0px 0px 0px}   

#content {padding: 0px 0px 0px 20px; margin: 0px 0px 0px 120px; width: 88%; }
    
h3{margin: 30px 0px 20px;}    
    
.lightwidget-widget {width:100%; margin: 0px; padding: 0px 0px}   

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10, #p11, #p12, #p12
{ width: 100%; height: 100%; margin: 0px 0px 20px 0px;}   
    
#jan1 ,#jan2, #jan3 {width: 100%; height: 100%;}
#jan1 img {max-width: 100%; max-height: 100%;}
#jan2 img, #jan3 img { max-width:100%; max-height:100%; }        
    
#chip{width: 420px; height: 305px;}

#cyber{width: 420px; height: 305px;}

#smudge {margin: 0px auto 20px; width: 100%; height: auto}

#AQd {width: 100%; padding: 0px; margin: 0px 0px 30px}
#AQm {width: 100%;}
#artsquestYT {max-height: 100%;}
#artsquest {max-height: 100%; max-width: 502px; width: 70%;}
#artsquestapp {max-height: 80%; max-width: 502px; width: 71%;}

#buzzdYT{width: 100%; max-height: 475px; margin: 0px auto 0px}
#buzzd{width: 175px; height: 325px;}
#buzzd img{width: 175px; height: 325px;}

#kidsposter {width: 100%; height: 100%; margin: 0px 0px 60px;}
#kidsposter img {max-width: 100%; max-height: 100%;}
#kids {width: 100%; height: 100%; margin: 0px auto 20px}
#kids img {max-width: 100%; max-height: 100%; }

#storytelling{width: 100%; height: 420px; }
#storytelling img {min-width: 100%; max-height: 420px;}

#turf{width: auto; height: 320px;  margin: 0px 0px 20px 0px; }
#turf img {max-width: auto; max-height: 320px;}
#turfc {width: 420px; height: 305px;}
#turfD {width: 125px; height: 125px; margin: 0px 20px 20px 0px;}
#turfD img {max-width: 140px; max-height: 160px;}

#salvaged {width: 420px; height: 320px; }
#salvaged img {max-width: 420px; max-height: 320px; }
#salvagedD {width: 125px; height: 125px; margin: 0px 20px 20px 0px; }
#salvagedD img {max-width: 135px; max-height: 180px; }

#self {width: 420px; height: 305px; margin: 0px 0px 20px 0px; }
#self img {max-width: 420px; max-height: 305px;}

#passages {width: 420px; height: 305px;}
  
.folioWRAP {width: 79%; padding: 0px; margin: 0px 0px 0px 120px}    
    
.content {width: 73%; margin: 0px auto 0px 130px;}   
    
.cvCONTENT {font-weight: 400; width: 76%; text-align: left; padding: 0px 0px 0px 20px; margin: 0px auto 0px 120px}
    
.cvCONTENT ul {text-indent: 0px !important; margin: 0px; padding: 0px 0px 0px 30px}     
    
    
    
    
    
    
} /* end tablet */
@media screen and (max-width: 500px) {

.contact{height: 100vh; }    
    
.wrapper {max-height: 550px; height: 100%;}    
    
#content {padding: 0px 0px 0px 10px; margin-left: 90px; width: 82%}  
    
#contentp {padding: 0px 10px 0px 50px; margin-left: 90px;}  
    
#bodycontainer {width: 100%; margin: 30px 0px 0px 0px}      
    
.InstaFeed {padding: 0px; margin: 0px;}    
    
.lightwidget-widget {width:100%; margin: 0px ; padding: 0px; height: 30px;} 
    
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10, #p11, #p12, #p12
{ width: 100%; height: 260px; margin: 0px 10px 20px 10px;}  
  
ul{ margin-block-start: 5px; margin-block-end: 0px;}    
    
nav  {height: 60vh; width: 90px; top: 10px}
nav a {margin: 0px 0px 10px 0px; text-decoration: none; color: #000;}
  
.logo li {margin: 5px 0px -5px; height: 100px; list-style: none; background-repeat: no-repeat;}
    
.logoH {margin: 0px 0px 0px 0px; height: 85px;}
.logoH li a, .logoH li a:visited  {height: 85px;}
.SGB {width: 75px;}

.fb {width: 20px;}
.ig {width: 20px;}
.li {width: 20px;}

.menu li {margin: 5px 4px 0px 4px; height: 20px; list-style: none; background-repeat: no-repeat;}

h2 { margin: 5px 0px 15px 0px; font-size: 2.2em;}
h3 { margin: 5px 0px 15px 0px; font-size: 1.9em;}
h4 { margin: 15px 0px 0px; font-size: 1..5em;}    
    
.CV { margin: 0px 0px 0px 15px; list-style-image: url('assets/bullet.png');}    

.cvLI {list-style-image: url('assets/bullet.png');}    

.blurb {margin: auto; width: 100%; padding: 0px 0px 20px;}    

#jan1 ,#jan2, #jan3 {width: 240px; height: 240px;margin: 0px 0px 20px}
#jan1 img {max-width: 240px; max-height: 315px; }
#jan2 img, #jan3 img {min-width: 360px; max-height: 240px;}

#chip {width: 100%; height: 250px;}

#cyber {width: 100%; height: 210px;}

#smudge {margin: 0px auto 20px; width: 100%; height: auto}

#AQd {width: 100%; margin: 0px 0px 30px 20px}
#AQm {width: 100%;}
#artsquestYT {height: 100%; width: 100%}
#artsquest {max-height: 80%; max-width: 240px; width: 50%; }
#artsquestapp {max-height: 80%; max-width: 240px; width: 50%;} 
    
#buzzdYT {width: 100%; max-height: 250px; margin: 0px auto 20px}
#buzzd {width: 155px; height: 300px; margin: 0px auto 20px}
#buzzd img {width: 155px; height: 300px; margin: 0px auto 20px}

#kidsposter {width: 100%; height: 100%; margin: 0px 0px 60px;}
#kidsposter img {max-width: 100%; max-height: 100%;}
#kids {width: 100%; height: 100%; margin: 0px auto 20px}
#kids img {max-width: 100%; max-height: 100%; }

#storytelling {width: 100%; height: 320px; }
#storytelling img {min-width: 100%; max-height: 320px;}

#turf {width: 100%; height: 320px;  margin: 0px 0px 20px 0px; }
#turf img {max-width: 100%; max-height: 320px;}
#turfc {width: 100%; height: 190px;}
#turfD {width: 110px; height: 110px; margin: 0px 0px 20px 0px;}
#turfD img {max-width: 120px; max-height: 160px;}

#salvaged {width: 100%; height: 200px; margin: 0px 0px 20px 0px;  }
#salvaged img {max-width: 100%; max-height: 320px; }
#salvagedD {width: 110px; height: 110px; margin: 0px 0px 20px 0px; }
#salvagedD img {max-width: 120px; max-height: 160px; }

#self {width: 100%; height: 180px; margin: 0px 0px 20px 0px; }
#self img {max-width: 100%; max-height: 180px;}

#passages {width: 100%; height: 245px;}

.LA {margin: 0px 0px 0px 0px}
.RA {margin: 0px 0px 0px 0px}
    
footer p {font-size: 11px; margin-top: 0px}    
    
.folioWRAP {width: 83%; padding: 0px 0px 0px 5px; margin: 0px auto 0px 90px}    
    
.content {width: 80%; margin: 0px auto 0px 100px;}      
    
.cvCONTENT {font-weight: 400; width: 80%; text-align: left; padding: 0px 0px 0px 10px; margin: 0px auto 0px 100px}  

.cvCONTENT h4 {text-align: left !important;}  
    
.cvCONTENT ul {text-indent: 0px !important; margin: 0px; padding: 0px 0px 0px 15px}      
    
    
} /* end phone */