body{
background-color:#eee;
font-family:'DM Sans',sans-serif;
font-size:16px;
line-height:1.5;
margin:0;
overscroll-behavior-y:none;
padding:0;
}

a{color:#5c6781;font-weight:700;}
a:hover{background:#5c6781;color:#fff;}

/* NAVIGATION */

#navbar{
/*background-color:#1a3354;*/
background-color:#fff;
color:#fff;
font-size:1.6em;
overflow:hidden;
padding:60px 0;
position:fixed;
text-transform:uppercase;
transition:0.4s;
width:100%;
z-index:99;
}

#name{color:#000;font-weight:700;float:left;padding:0 20px;}

#navLinks{float:right;}
#navLinks ul{margin:0;padding:0;}
#navLinks ul li{display:inline-block;padding:0 10px;}
#navLinks ul li a{/*color:#66bdde;*/color:#000;font-size:.8em;font-weight:700;padding:10px;text-decoration:none;}
#navLinks ul li a:hover{background:#000;color:#fff;}

/* COLORED HORIZONTAL LINE */

#colorLine{
bottom: 0; /* aligns the line to the bottom of the navbar */
display: flex; /* align the colors in a row */
height: 20px; /* thickness of the line */
position: absolute; /* positioned relative to the navbar */
width: 100%; /* full width of the viewport */
}

#colorLine .color{flex: 1; /* each color takes up equal space */}

/* TEXT STYLES */

h1{color:#8b96b0;margin:0;padding:0;}
h3{color:#5c6781;margin:15px 0 10px;}
h4{color:#5c6781;margin:10px 0 20px;text-transform:uppercase;}

.title{margin:0 auto;width:1240px;}
.title h1{color:#777777;font-size:2.6em;font-weight:700;line-height:80px;}
.title h2{color:#9a9a9a;font-size:2em;line-height:40px;}
.title p{color:#333;text-align:left;}
.title a{color:#2a4568;font-weight:700;}

/* WRAP STYLES */

.wrap{margin:0 auto;width:1440px;}
#homeWrap{padding:178px 0 60px;text-align:center;}
#portfolioWrap{padding:178px 0 0;text-align:center;}
#photoWrap,#musicWrap{padding:178px 0 60px;}
#songsWrap{margin:0 auto;width:740px;}
#motionWrap{margin:0 auto;text-align:center;}
#footerWrap{padding:20px 0 60px;text-align:center;}

/* THIS IS OLD - DON'T REMEMBER */

/* .charcoal{background:#222;color:#f8cd47;}
.purple{background:#2f2c3c;color:#fff;margin:0 auto;padding:0;width:860px;} */

/* IMAGE STYLES */

.wrap img{filter:drop-shadow(3px 3px 3px #ccc);margin:6px 8px;}
.purple img{filter:drop-shadow(3px 3px 3px #000);margin:0;}

/* INDIVIDUAL PAGE STYLES */

/* HOME PAGE */

.bannerImage img{filter:none;margin:0;}

.feature{filter:drop-shadow(3px 3px 3px #ccc);margin:0 0 40px;}
.feature p{color:#fff;font-size:24px;line-height:42px;margin:0 0 42px;}
.feature a{color:#fff;}

.column{float:left;padding:2%;width:46%;}
.row:after{content:"";display:table;clear:both;} /* clear floats after columns */
.callout{color:#fff;display:block;font-size:36px;line-height:42px;margin:0 0 42px;text-align:left;}

.introRow{margin:40px 0 0;padding:0;}
.introPic{float:left;margin:0 4% 0 0;text-align:center;width:28%;}
.introText{float:left;font-size:2.2rem;text-align:left;width:68%;}
.introPic p{text-align:center;}

#digitalEducation{background-color:#10175b;}
#digitalEducation a:hover{background:#fff;color:#162378;}
#cinePhotog{background-color:#e94695;}
#cinePhotog a:hover{background:#fff;color:#e94695;}
#illustration{background-color:#149291;}
#illustration a:hover{background:#fff;color:#147774;}

/* VIDEO PAGE */

.portfolioSection{margin:0 auto;padding:40px 0;}

button{font-family:'DM Sans',sans-serif;}

.collapsible{
background:rgba(0,0,0,0.3);
border:none;
border-radius:10px;
color:#fff;
cursor:pointer;
font-size:1.4rem;
font-weight:700;
margin:0 auto;
outline:none;
padding:40px;
text-align:center;
/*width:80%;*/
}

.active,.collapsible:hover{background:#bbb;}

.content{
background:#efefef;
max-height:0;
overflow:hidden;
padding:0 20px;
transition:max-height 0.2s ease-out;
}

.sectionIntro{
font-size:1.6rem;
line-height:2rem;
padding:20px;
text-align:left;
}

.sectionIntro h1{/*font-family:'Archivo Black',sans-serif;*/font-weight:700;font-size:3em;margin:20px 0 60px;}

.portfolioSection{font-family:'DM Sans',sans-serif;}
.portfolioSection,.portfolioSection a{color:#fff;}
.portfolioSection h1{color:#fff;/*font-family:'Archivo Black',sans-serif;*/font-weight:700;font-size:3.6em;margin:20px 0 40px;}
.featuredH3{color:#fff;width:1100px;margin:0 auto;text-align:left;}

.featuredContainer{
border:2px solid #fff;
font-size:1.2rem;
line-height:1.8rem;
margin:0 auto 40px;
padding:20px;
text-align:left;
width:1100px;
}

.portfolioSection img{filter:none;margin-right:20px;}
.portfolioSection img a:hover{background:none;}

/* .featuredContainer button{
background:rgba(0,0,0,.4);
color:#fff;
font-size:1em;
font-weight:700;
text-align:center;
width:100%;
}

.featuredContainer button:hover{background:#000;} */

.featuredContainer .content{background:transparent;}
.featuredContainer h2{font-size:2em;margin:10px 0;}
.featuredContainer h3{margin:0;padding:0;}
.featuredExpand{text-align:center;}
.featuredItems{text-align:center;}
.featuredItems h2{font-size:1.4em;line-height:2em;text-align:center;}
/*.featuredItems h2{text-align:center;}*/

#instructionalMedia{background:#145277;}
#interviews{background:#266785;}
#explainers{background:#397c93;}
#socialMediaVideos{background:#4c91a1;}
#liveMusicVideos{background:#5ea6af;}
#miniDocumentary{background:#71bbbd;}
#podcasts{background:#83d0cb;}

/* MOTION PAGE */

#motionWrap p{font-size:1.2rem;line-height:1.8rem;}
#motionPro{background:#78839e;}
#motionFun{background:#8b96b0;}

/* MUSIC PAGE */

.bandcamp{margin:10px 0;}
.bandcampCover{float:left;width:17%;}
.bandcampDetails{float:right;width:83%;}
.bandcamp h3{margin:10px 0;padding:0;}
.clear{clear:both;}

/* MEDIA QUERIES */

@media (max-width: 768px) {
  body {
    font-size: 24px;
  }
}