* { box-sizing: border-box; }

.cf:after {
	content:"";
	display: table;
	clear: both;
}

.clear {
    clear: both;
}

html, body {
	margin: 0 auto;	
}

html {
    width: 100%;
}

body {
	font-family: 'PT Sans', 'Arial', sans-serif;
    font-size: 1em;
}

.contain {
    max-width: 1280px;
    padding-left: .5em;
    padding-right: .5em;
    margin: 0 auto;
}

.padding_wrapper {
    padding-left: .5em;
    padding-right: .5em;
    margin: 0 auto;
}

h1, h2, a, footer, .heading_pink, h3.date,
.galleryinfo h4,
.galleryinfo li {
	font-family: 'Roboto', 'Helvetica', sans-serif;
}

h2 {
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .5em;
    line-height: 1.4em;
    margin: 0;
    padding-top: 1em;
}

a { 
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: #008eff;
}

a:hover, a:active, .heroinfo a:hover, 
.heroinfo a:active,
li.event_info h5 a:hover, 
li.event_info h5 a:active,
h2.event_name a:hover {
    color: #ff02b7;
    /* color: #188c8e;*/
   /*color: #cccf23;*/
}

ul {
    list-style-type: none;
}

i.fh {
    vertical-align: sub;
    margin-bottom: .8em;
    margin-left: .2em;
}


a.event_address, .event_name a {
    text-transform: none;
}

.event_name a {
    letter-spacing: 0;
    color: #14080e;
}

.event_name, .event_time, .event_address, h3, 
li.event_info h5, li.event_info h5 a, li.event_info p,
h2.event_name a {
    font-family: 'PT Sans', 'Arial', sans-serif;
    letter-spacing: 0;
}

h2.event_name {
    font-weight: 700;
    color: #14080e;
    font-size: 2.1em;
    padding-top: .5em;
    text-transform: none;
    line-height: 1em;
}

.galleryinfo {
    padding: 0 .5em;
    color: #fff;
}

.galleryinfo h3 {
    font-size: 2em;
    font-weight: 700;
    margin: .5em 0;
}

.galleryinfo h4 {
     text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .2em;
}

.galleryinfo ul {
    padding: 0;
}

.galleryinfo h5 {
    margin-bottom: .5em;
}
.galleryinfo li {
    letter-spacing: .2em;
    font-size: 1em;
    line-height: 2em;
    font-weight: 300;

}

.featured_event img {
    width: 100%;
}


.featured_event h3  {
    font-size: 1.6em;
    margin: .5em 0 .3em 0;
}

p.event_time {
    font-weight: 700;
    color: #ff02b7;
    font-size: 1.5em;
    margin: 0;
}

/*nav mobile menu styling*/

.dl-desktopwrapper {
    display: none;
}

/*nav {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}*/

.logosvg {
    width: 50%;
    margin: 0;
    float: left;
    position: relative;
    top: .2em;
    left: 0;
    transition: all 0.2s ease-in-out;
}

.logosvg a:hover .st0 {
    fill: #23cccf; 
}

.logosvg a:hover .st1 {
    fill: #ff02b7; 
}

.logosvg a {
    display: block;
    padding: .2em;
}

.dl-menuwrapper {
    margin-right: 0;
    width: 100%;
    max-width: 666px;
    position: relative;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-perspective-origin: 50% 200%;
    perspective-origin: 50% 200%;
    z-index: 99;
}

.dl-menuwrapper:first-child {
    margin-right: .5em;
}

.dl-menuwrapper button {
    background: none;
    border: none;
    width: 3em;
    height: 2.5em;
    margin-left: 35%;
    top: .2em;
    text-indent: -900em;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    outline: none;
    padding: .2em;
}

/*.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul {
    background: #aaa;
}*/

.dl-menuwrapper button:after {
    content: '';
    position: absolute;
    width: 40%;
    /*height: 3px;*/
    height: 2px;
    background: #ff02b7;
    top: 10px;
    left: 16%;
    box-shadow: 
        0 5px 0 #ff02b7, 
        0 10px 0 #ff02b7;
}

.dl-menuwrapper ul {
    padding: 0;
    list-style: none;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.dl-menuwrapper li {
    position: relative;
}

.dl-menuwrapper li a {
    display: block;
    position: relative;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    padding: .9em 1em;
    font-size: 1em;
    line-height: 1.3em;
    font-weight: 300;
    color: #fff;
    outline: none;
}

.no-touch .dl-menuwrapper li a:hover {
    color: #23cccf;
}

.dl-menuwrapper li.dl-back > a {
    padding-left: 30px;
    background: #a40e4c;
}

.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after,
.dl-desktopwrapper li > a:not(:only-child):after {
    position: absolute;
    top: 0;
    line-height: 50px;
    font-family: 'Roboto';
    speak: none;
    -webkit-font-smoothing: antialiased;
    content: ">";
}

.dl-menuwrapper li.dl-back:after {
    left: 10px;
    color: #ff02b7;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    content: ">";
}

.dl-menuwrapper li > a:after, 
.dl-desktopwrapper li > a:after {
    right: 10px;
    color: #ff02b7;
}

.dl-menuwrapper .dl-menu {
    margin: 5px 0 0 0;
    position: absolute;
    width: 100%;
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: none;
}

.dl-menuwrapper .dl-menu.dl-menu-toggle {
    transition: all 0.3s ease;
}

.dl-menuwrapper .dl-menu.dl-menuopen {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

/* Hide the inner submenus */
.dl-menuwrapper li .dl-submenu {
    display: none;
}

/* 
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link. 
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
    display: none;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
    display: block;
}

/* Dynamically added submenu outside of the menu context */
.dl-menuwrapper > .dl-submenu {
    position: absolute;
    width: 100%;
    top: 50px;
    left: 0;
    margin: 0;
}


/* Animation classes for moving out and in */


.dl-menu.dl-animate-out-2 {
    -webkit-animation: MenuAnimOut2 0.3s ease-in-out;
    animation: MenuAnimOut2 0.3s ease-in-out;
}

@-webkit-keyframes MenuAnimOut2 {
    0% { }
    100% {
        -webkit-transform: translateX(-100%);
        opacity: 0;
    }
}


@keyframes MenuAnimOut2 {
    0% { }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }
}

.dl-menu.dl-animate-in-2 {
    -webkit-animation: MenuAnimIn2 0.3s ease-in-out;
    animation: MenuAnimIn2 0.3s ease-in-out;
}


@-webkit-keyframes MenuAnimIn2 {
    0% {
        -webkit-transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}


@keyframes MenuAnimIn2 {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
        opacity: 1;
    }
}


.dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
    -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
    animation: SubMenuAnimIn2 0.3s ease-in-out;
}


@-webkit-keyframes SubMenuAnimIn2 {
    0% {
        -webkit-transform: translateX(100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}


@keyframes SubMenuAnimIn2 {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
        opacity: 1;
    }
}


.dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
    -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
    animation: SubMenuAnimOut2 0.3s ease-in-out;
}


@-webkit-keyframes SubMenuAnimOut2 {
    0% {
        -webkit-transform: translateX(0%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(100%);
        opacity: 0;
    }
}


@keyframes SubMenuAnimOut2 {
    0% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0;
    }
}



/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu {
    position: relative;
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}

.no-js .dl-menuwrapper li .dl-submenu {
    display: block;
}

.no-js .dl-menuwrapper li.dl-back {
    display: none;
}

.no-js .dl-menuwrapper li > a:not(:only-child) {
    background: rgba(0,0,0,0.1);
}

.no-js .dl-menuwrapper li > a:not(:only-child):after {
    content: '';
}


/* Demo 2 */
/*.navstyling .dl-menuwrapper button {
    background: #14080e;
}*/


.navstyling .dl-menuwrapper ul {
    background: #14080e;
}

.navstyling .dl-menuwrapper ul li ul.dl-submenu,
.dl-desksubmenu {
    background: #ff02b7;
}

/*.navstyling .dl-menuwrapper button:hover,
.navstyling .dl-menuwrapper button.dl-active,*/

/*end nav mobile styling*/




.homehero_mobile {
	width: 100%;
	height: 20em;
	background-color: #000;
	background-image: url(../images/bgthesis.jpg);
	background-size: cover;
	background-position: 50% 0;
	background-repeat: no-repeat;
}


@keyframes glitch {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
    20% {
        -webkit-transform: translate(-.05em, .05em);
        transform: translate(-.05em, -.05em)
    }
    40% {
        -webkit-transform: translate(-.07em, -.07em);
        transform: translate(-.07em, -.07em)
    }
    60% {
        -webkit-transform: translate(3px, 3px);
        transform: translate(3px, 3px)
    }
    80% {
        -webkit-transform: translate(3px, -3px);
        transform: translate(3px, -3px)
    }
    to {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

.welcome {
    display: none;
    width: 100%;
    -webkit-transform: translateZ(0);
}

.welcome p {
    display: block;
    font-family: 'Roboto', sans-serif;
    color: #23cccf;
    margin: 0;
    font-size: 4em;
    font-weight: 700;
    position: relative;
        animation-name: glitch;
    animation-duration: 0s;
    animation-iteration-count: infinite;
}

.welcome p:before {
    content: attr(data-text);
    color: #ff02b7; 
    position: absolute;
      animation-name: glitch;
    animation-duration: 3s;
    animation-iteration-count: infinite;
 
}

.welcome p:after {
    content: attr(data-text);
    color: #fff; 
    position: absolute;
    left: 0;
      animation-name: glitch;
    animation-duration: 15s;
    animation-iteration-count: infinite;
   animation-direction: alternate; 
     /*text-shadow: 0 5px 15px rgba(0,0,0,0.3);*/
 
}

.heroinfo {
    background-color: #a40e4c;
}

.wrapper, .event {
    padding-left: .5em;
}

.heroinfo h2, .heroinfo p, .monday p,
.homeprograms p {
    color: #fff;
}


 h2.heading_black, .monday h2 {
    letter-spacing: .2em;
    line-height: 1.3em;
    padding-top: .5em;
    color: #23cccf;
}

h2.heading_black {
    padding: .5em;
}

.heroinfo a {
    color: #fff600;
}


.homeprograms, .monday, .welcome, nav, 
h2.heading_black {
    background-color: #14080e;
}

.monday {
    width: 100%;
    margin-top: 1em;
    padding: .5em .5em .5em 1em;
}

.homeprograms {
    width: 100%;
}

.homeprograms h2 {
    color: #23cccf;
}

.homeprograms p {
    font-style: italic;  
}

.homeprograms a  {
    display: block;
    width: 100%;
    margin-top: 1em;
}

.homeprograms a:hover, .homeprograms a:active {
    cursor: pointer;
    mix-blend-mode: screen;

}

.overlay {
    /*background-color: #9999A1;*/
    background-color: red;
     width: 100%;
    height: 10em;
    padding: .5em;
    box-sizing: padding-box;
      -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.homeprograms .overlay h3 {
    font-family: 'Roboto', 'Helvetica', sans-serif;
    font-weight: 700;
    font-size: 3.2em;
    margin: 0;
    word-wrap: break-word;
    letter-spacing: .2em;
    mix-blend-mode: screen;
    line-height: 1.2em;
}


.homeprograms .pho {
    background: url(../images/photography.jpg);
    background-position: 0 25%;
    background-size: cover;
    color: #23cccf;
}

.homeprograms .paint {
    background: url(../images/painting.jpg);
    background-position: 0 25%;
    background-size: cover;
    color: #fff600;
}

.homeprograms .sculp {
    background: url(../images/sculpture.jpg);
    background-position: 0 25%;
    background-size: cover;
    color: #ff02b7;
}

.homeprograms .gra {
    background: url(../images/graphicdesign2.jpg);
    background-position: 0 25%;
    background-size: cover;
    color: #0010d1;
}

.homeprograms .film {
    background: url(../images/film2.jpg);
    background-position: 0 25%;
    background-size: cover;
    color: #a40e4c;
    border-bottom: 1em solid #14080e;
}

.wrap {
    background-color: #fff;
    width: 100%;
}

.event {
     width: 90%;
 }

.event img {
    width: 100%;
    display: block;
    margin-top: .5em;
}

/*Begin styling footer*/

footer {
    background-color: #14080e;
    color: #fff;   
    font-weight: 300;
    width: 100%;
    height: 200px;
    position: relative;
}

footer p.footer_address {
    text-transform: uppercase;
    font-size: .6em;
    letter-spacing: .2em;
    width: 250px;
    line-height: 2em;
}

footer p.copyright {
    font-size: 2em;
    margin: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    letter-spacing: .2em;
}

footer p.copyright2 {
    margin: 0;
    margin-left: 10.5em;
    font-size: .5em;
    position: absolute; 
    left: 2.2em;
    bottom: 1.3em;
    letter-spacing: .3em;
    color: #ff02b7;
}

footer p, ul.socialmedia {
    display: inline-block;
}

ul.socialmedia {
    float: right;
}

ul.socialmedia li {
    display: inline-block;
    margin-right: .5em;
}

ul.socialmedia li a {
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
    float: left;
    margin: 10px 10px 0px 0px;   
}

ul.socialmedia li a i {
    color: #fff;
    transition: 0.2s ease-in-out;
      -webkit-transition: 0.2s ease-in-out;
      -moz-transition: 0.2s ease-in-out;
     -o-transition: 0.2s ease-in-out;
     font-size: 1.5em;
}

ul.socialmedia li a i:hover, ul.socialmedia li a i:active {
    color: #ff02b7;
}

.alum {
    width: 100%;
    padding: 0 .5em;
}

.alum_img {
    width: 100%;
}

h2.academic_heading {
    padding: 0;
    font-size: 4em;
    width: 250px;
    margin: 0;
    word-wrap: break-word;
    letter-spacing: .2em;
    line-height: 1.2em;
}

h3.mfa {
    color: rgba(255,2,183, 0.8);
    font-size: 5em;
    padding: 0;
    mix-blend-mode: multiply;
    margin: 0;
    float: right;
    position: relative;
    top: -25px;
}

h3.colorful_heading {
    text-transform: uppercase;
    color: rgba(0,16,209, 0.8);
    font-size: 3em;
    padding: 0;
    mix-blend-mode: screen;
    margin: 0;
    line-height: .55em;
    float: right;
    position: relative;
    width: 60%;
}

h3.colorful_heading span {
    color: rgba(35,204,207, 0.8);

}

.photo {
    width: 100%;
    height: 300px;
}

.academic_page .photo {
    background: url(../images/photo.jpg);
    background-position: 50%;
    background-size: cover;
}

.academic_page ul {
    padding: 0;
    list-style-type: none;
}

.academic_page ul li {
    padding: .5em 0;
}

.history_page .photo {
    background: url(../images/yaleoldpaintingclass.jpg);
    background-position: 0 40%;
    background-size: cover;
}

.archives_page .photo {
    background: url(../images/exh1.jpg);
    background-position: 20% 50%;
    background-size: cover;
}

.history_page .academic_heading,
.archives_page .academic_heading,
.gallery_page .academic_heading {
    font-size: 2em;
    width: auto;
}

.contentpic {
    width: 100%;
}

p.italic {
    font-style: italic;
    margin: 0;
}

table {
    width: 100%;
    margin-bottom: 2em;
}

th, td {
    vertical-align: bottom;
    text-align: left;
    padding: .5em;
}

td:nth-child(1), th:nth-child(1) {
    padding-left: 0;
}

p.caption {
    font-style: italic;
    margin: 0;
    margin-bottom: 2em;
}



/*Style modal*/


.popup {
    display: none;
    position: absolute;
    left: 1%;
    background: #fff; 
    width: 98%;
    padding: 1em 1em;  
    line-height: 1.5em;
    z-index: 9999;

}

a.popup-trigger {
    color: #008eff;
    letter-spacing: .1em;
    font-size: .9em;
    font-weight: 700;
    margin-right: .1em;
}

a.popup-trigger:hover {
    color: #ff02b7;
    cursor: pointer;
}

.popuptext h2 {
    letter-spacing: .2em;
    padding-top: 2em;
}

.page-cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,142,255, 0.1);
  z-index: 9998;
}


.popup-btn-close {
    position: absolute; 
    width: 25px;
    height: 25px;
    top: 1.5em; 
    right: 1em;
    cursor: pointer;
    background-image: url(../images/close.png);
    background-repeat: no-repeat;
    background-size: 80%;
    background-color: hsla(0,0%,100%);
    background-blend-mode: overlay;
    background-repeat: no-repeat;
    transition: .2s ease-in-out;
}   

.popup-btn-close:hover {
    background-color: hsla(0,0%,100%,0.6);
}



.events_page .academic_heading {
    width: auto;
    font-size: 2em;
}

/*slideshow for events*/
.diy-slideshow {
  position: relative;
  display: block;
  overflow: hidden;
}

figure {
  position: absolute;
  margin: 0;
  opacity: 0;
  transition: 1s opacity;
}

figcaption {
  /*position: absolute;*/
  font-family: sans-serif;
  font-size: .8em;
  bottom: .75em;
  right: .35em;
  padding: .25em;
  border-radius: 2px;
}

figure.show{
  opacity: 1;
  position: static;
  transition: 1s opacity;
}

.next, .prev{
  color: #fff;
  position: absolute;
  /*background: #a40e4c;*/
  /*background: #ff02b7;*/
  background: #23cccf;
  top: 0;
  z-index: 1;
  font-size: 2em;
  opacity: .6;
  user-select: none;
}
.next:hover, .prev:hover{
  cursor: pointer;
  opacity: 1;
}

.next{
  right: 0;
  padding: .8em .2em 1em .4em;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.prev{
  left: 0;
  padding: .8em .4em 1em .2em;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}



/*slideshow for archive gallery*/

.gallery_page .diy-slideshow {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 13em;
}

.gallery_page .diy-slideshow, 
.galleryinfo {
    max-width: 1024px;
    margin: 0 auto;
}

.gallery_page figure img {
    width: 100%;
}

.gallery_page .next, .gallery_page .prev {
  color: #fff;
  position: absolute;
  background: #23cccf;
  top: 3em;
  z-index: 1;
  font-size: 1.3em;
  opacity: .5;
  user-select: none;
}

.gallery_page .next{
  right: 0;
  padding: 1em .2em 1em .4em;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.gallery_page .prev{
  left: 0;
  padding: 1em .4em 1em .2em;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}


.heading_pink {
    text-transform: uppercase;
   font-size: 1.8em;
   font-weight: 300;
   width: 100%;
   padding: .5em;
   letter-spacing: .2em;
    color: #fff;
    background-color: #ff02b7;
}

h3.date {
    text-transform: uppercase;
    /*background-color: #ff02b7;*/
    color: #ff02b7;
    font-weight: 600;  
    font-size: 2.2em;
    padding: .2em 1.3em;
    margin: 0;
}

h3.date span {
    font-weight: 300;
}

li.event_info {
    margin-top: 1.5em;
}


ul.upcoming_events {
    padding: 0 .5em;
}



.event_info h5, li.event_info h5 a {
    display: block;
    text-transform: none;
    line-height: 1em;
    color: #000;
    font-size: 1.4em;
    margin: .5em 0 0 0;
}

.event_info a.event_address {
    font-size: 1.1em;
    margin-top: .5em;
    display: block;
}

.event_info p.event_time {
    font-size: 2em;
    padding-bottom: .1em;
    display: inline-block;
    border-bottom: 2px solid #23cccf;
}

p.event_type {
    font-family: 'PT Sans', 'Arial', sans-serif;
   font-style: italic;
   font-size: .8em;
   color: #fff;
    display: inline-block;
    padding: .2em .5em;
    background-color: #000;
    margin-right: .2em;
}

p.event_desc {
    margin: 1em 0 .5em 0;
    font-size: 1.2em;
}

.event_image1 {
    width: 100%;
    height: 300px;
     background: url(../images/sculpture2.jpg);
     background-position: 20% 50%;
    background-size: cover;
    background-color: #23cccf;
    background-repeat: no-repeat;
}


button.accordion1:after {
    font-family: FontAwesome;
    content: "\f103";
    color: #fff;
    font-weight: 300;
    font-size: 1.8em;
    float: right;
    margin-right: .5em;

}

button.accordion1 {
    background: #008eff;
    font-family: 'PT Sans', 'Arial', sans-serif;
    font-size: 1em;
    font-weight: 600;
    width: 100%;
    color: #fff;
    padding:.8em .5em;
    text-align: left;
    transition: 0.4s;
     cursor: pointer;
    display: block;
     border: none;
    outline: none;
}

button.filter {
    font-family: 'Roboto', 'Helvetica', sans-serif;
    font-size: 1.2em;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .2em;
    line-height: 1.3em;
    margin: 0;
    padding-top: 1em;
    color: #23cccf;
    background: #14080e;
    width: 100%;
    padding: .8em .5em;
    text-align: left;
     cursor: pointer;
    display: block;
     border: none;
    outline: none;
    border-bottom: 1px solid #ff02b7;
}

button.filter:after {
    font-family: FontAwesome;
    content: "\f103";
    color: #23cccf;
    font-weight: 300;
    font-size: 1.8em;
    float: right;
    margin-right: .5em;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover,
button.choose:hover {
    background-color: #a40e4c;
}

button.accordion.active:after {
    font-family: FontAwesome;
    content: "\f102";
    color: #fff;
    font-weight: 300;
    font-size: 1.8em;
    float: right;
    margin-right: .5em;
}

button.choose {
    font-family: 'Roboto', 'Helvetica', sans-serif;
    font-size: 1em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    line-height: 1.3em;
    margin: 0;
    padding-top: 1em;
    color: #fff;
    background: #008eff;
    width: 100%;
    padding: 1em .5em;
    text-align: center;
     cursor: pointer;
     border: none;
    outline: none;
    width: 33.3%;
    display: inline-block;
    float: left;
}

button.choose {
    border-left: 1px solid #fff;
}



button.day {
    color: #000;
    background: #fff600;
    border-left: none;
}

button.day:hover {
      background: #fff600;
}


/* Style the accordion panel. Note: hidden by default */

 
div.panel {
    padding: .5em;
    background-color: white;
    font-size: .9em;
    display: none;
    max-height: 0;
    opacity: 0;
}


/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
div.panel.show {
    display: block;
    opacity: 1;
    padding: 0;
    max-height: 600px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}

table.event_table {
    width: 100%;
    font-size: 1.1em;
    padding-left: .5em;
}

table.event_table tr td:nth-child(1) {
    color: #ff02b7;
    font-weight: 600;
}

ul.filterchoices {
    padding: 0;
    margin: 0;
}

ul.filterchoices li {
    background-color: #520726;
    width: 100%;
}

ul.filterchoices li a {
    display: block;
    padding: .5em;
    line-height: 1.3em;
    width: 100%;

}

ul.filterchoices li:hover {
    background-color: #310416;

}

input[type=date] {
    padding: 1em;
    width: 100%;
} 

.crisis {
    display: none;
}


ul.listofshows {
    padding: 0;
}

ul.listofshows li {
    width: 100%;
    padding: 1em .5em .5em .5em;
    border-bottom: 1px solid #14080e;
}
ul.listofshows li img {
    width: 100%;
}

ul.listofshows li h3 {
    font-size: 1.6em;
    margin: .5em 0;
    text-transform: none;

}

ul.listofshows li h4 {
    margin: 0;
    margin-bottom: .5em;
    color: #14080e;
}


.colorbackground {
    background: #14080e;
     border-bottom: 1px solid #ff02b7;
}




/*BEGIN MEDIA QUERIES*/

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

    body {
        font-size: 1.1em;
    }

    h3.mfa {
        top: -28px;
    }

    .popup {
        width: 97%;
    }

}



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

    footer {
        height: 150px;
    }

    .logosvg {
        width: 40%;
    }

    .dl-menuwrapper button {
        top: .7em;
        margin-left: 50%;
    }

    h2.academic_heading {
        width: auto;
        font-size: 3.2em;
    }


.next{
  right: 0;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}


ul.listofshows li {
    width: 47%;
    display: inline-block;
    vertical-align: bottom;

}

ul.listofshows li:nth-child(-n+2) {
   vertical-align: top;
}

ul.listofshows li:nth-child(even) {
    margin-left: .5em;
}

ul.listofshows li h3 {
  font-size: 1.1em;
  line-height: 1em;
}

ul.listofshows li h4 {
  font-size: .8em;
  letter-spacing: .2em;
}

.gallery_page .diy-slideshow {
    height: 18em;
}

.gallery_page .next, .gallery_page .prev {
    top: 7em;
}


}



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

 .logosvg {
    width: 34%;
 }   

 .dl-menuwrapper button {
   left: 60%;
    margin: 0;
}

.homehero_mobile {
    display: none;
}    

.homehero_desktop{
    width: 100%;
    height: 28em;
    background-image: linear-gradient(transparent 60%, #a40e4c 40%),
    url(../images/bgthesis.jpg);
    background-size: cover;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}

.heroinfo {
   padding-top: 42%;
    background-color: transparent;
}


ul.socialmedia {
    margin-left: 25%;
}

.specialtext, .specialtext2 {
    font-family: 'Roboto', sans-serif;
     float: left;
}

.specialtext {
    float: left;
    display: inline-block;
    padding: 0;
    font-size: 3em;
    width: 250px;
    margin: 0;
    word-wrap: break-word;
    letter-spacing: .2em;
    line-height: 1.2em;
}

.specialtext2 {
    text-transform: uppercase;
   font-size: 1em;
   font-weight: 300;
   width: 200px;
   /*width: 35px;
   height: 220px;*/
   padding: .5em;
   letter-spacing: .2em;
   margin-top: 1em;
    color: #fff;
    /*color: #23cccf;*/
    background-color: #ff02b7;
}

ul.upcoming_events {
    padding: 0 4em;
}

.gallery_page .diy-slideshow {
    height: 22em;
}



}

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

    .homehero_desktop{
    width: 100%;
    height: 35em;
}

    .heroinfo {
    padding-top: 20em;
}

table {
    width: 75%;
}



}


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

    .dl-menuwrapper button {
        left: 63%;
    }



}

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

    .dl-menuwrapper button {
        left: 68%;
    }


    .homehero_desktop{
    background-image: linear-gradient(transparent 70%, #a40e4c 30%),
    url(../images/bgthesis.jpg);
    background-position: 0 26%;
}

.heroinfo {
    padding-top: 24em;
}

h2.academic_heading {
    padding: 0 0 0 .1em;
}

h2.academic_heading, 
.history_page .academic_heading {
   font-size: 3em;
    margin: auto;
}

.events_page .academic_heading, 
.gallery_page .academic_heading,
.archives_page .academic_heading {
    font-size: 3em;
}

h3.headingspecial {
    display: inline-block;
}

.artsy {
    width: 30%;
    float: left;
}
   
.bg-text:before {
    width: 100%;
    display: block;
    float: left;
    font-family: 'Roboto', sans-serif;
    content: attr(data-text);
    mix-blend-mode: multiply;
    color: rgba(35,204,207, 0.5);
    font-size: 5em;
    font-weight: 700;
    text-transform: uppercase;
    word-wrap: break-word;
    letter-spacing: .5em;
    line-height: 1.4em;
    margin: 0; 
}

.bg-photo-img-container, 
.bg-photo-img-container2,
.bg-photo-img-container3, 
.bg-photo-img-container4, 
.bg-photo-img-container5 {
    width: 100%;
    float: left;
}

.photography_page .bg-photo-img-container { 
    margin-top: 0;
    background: url(../images/photothesis1.jpg);
    background-position: 50%;
    background-size: cover;  
    height: 500px;
}

.photography_page .bg-photo-img-container2 {
    margin-top: 2em;
    background: url(../images/photo2.jpg); 
    background-position: 20%;
    background-size: cover; 
    height: 300px;
}

.history_page .bg-photo-img-container {
    margin-top: 0;
    background: url(../images/women_students.jpg);
    background-position: 0 40%;
    background-size: cover;
    height: 500px;
}

.history_page .bg-photo-img-container2 {
    background: url(../images/oldgallery.jpg);
    background-position: 0 40%;
    background-size: cover;
    height: 300px;
    margin-top: 2em;
}

.history_page .bg-photo-img-container3 {
    background: url(../images/yaleoldpaintingclass.jpg);
    background-position: 0 40%;
    background-size: cover;
    height: 300px;
    margin-top: 15em;
}

.history_page .bg-photo-img-container4 {
    background: url(../images/arch.jpg);
    background-position: 0 40%;
    background-size: cover;
    height: 500px;
    margin-top: 15em;
}
.history_page .bg-photo-img-container5 {
    background: url(../images/artschool.jpg);
    background-position: 40% 10%;
    background-size: cover;
    height: 350px;
    margin-top: 21em;
}


.academic_info {
    float: left;
    width: 60%;
    margin-left: 5%;
}


.event_info {
    font-size: 1.3em;
}

.exhibitionschedule {
    width: 35%;
    float: left;

}
/*
.event_image1 {
    width: 50%;
    height: 500px;
    float: left;
}
*/
.padding_wrapper {
    width: 60%;
    margin: 0;
    float: right;
    display: inline-block;
    clear: both;
    padding-right: 1em;

}

button.accordion1 {
    display: none;
}

div.panel1 {
    display: block;
    opacity: 1;
    height: 350px;
}

.mnlwrapper {
    display: inline-block;
    width: 35%;
    height: 450px;
}

.crisis {
    display: block;
    float: right;
    width: 60%;
    padding-right: 3em;
}

.crisiscontainer {
    margin-top: 2em;
    margin-bottom: 3em;
}

.crisis img {
    width: 60%;
}

.galleryinfo{
    padding-top: .5em;
    padding-bottom: 2em;
}

.gallery_page .diy-slideshow {
    height: 30em;
}

.gallery_page .next, .gallery_page .prev {
    top: 10em;
}

.gf {
    width: 50%;
    float: left;
}
.showingartists {
    float: right;
    width: 50%;
}


}

@media screen and (min-width: 860px) {
.homeleft {
        width: 40%;
        float: left;
    }

    .homealum {
        width: 35%;
        float: left;
        margin-left: 8%;
    }


    
}


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


.homehero_desktop {
    background-position: 0 27%;
}

.logosvg {
    width: 20%;
    top: .5em;
}

.homealum {
        width: 52%;
        margin-left: 5%;
}

.homeprograms a {
    display: inline-block;
    width: 19%;
    vertical-align: top;
    margin-right: .3em;
    padding-bottom: 2em;
}

.homeprograms .overlay h3 {
    font-size: 3.2em;
    letter-spacing: .4em;
}

.overlay {
    height: 25em;
}

.alum {
    padding: 0;
}

.containdesktop {
    max-width: 1280px;
    margin: 0 auto;
}


nav {
   background: #14080e;
}

button.dl-trigger {
    display: none;
}

.dl-menuwrapper .dl-menu {
   display: none;
}

.dl-desktopwrapper {
    display: block;
    max-width: 1280px;
}

.dl-desktopmenu li a {
    display: block;
    position: relative;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    padding: .9em 1em;
    font-size: 1em;
    line-height: 1.3em;
    font-weight: 300;
    color: #fff;
    outline: none;
}

.navstyling {
    background: none;
}

ul.dl-desktopmenu {
    margin: 0;
    float: right;
}

ul.dl-desktopmenu li ul {
   display: none;
}


ul.dl-desktopmenu li {
    position: relative;
    display: inline-block;
     cursor: pointer;
     z-index: 5;
}

ul.dl-desktopmenu li > a {
    display: inline-block;
    font-size: .7em;
    line-height: 1em;  
    cursor: pointer;
    padding: .5em 1em;
}

ul.dl-desktopmenu li > a:not(:only-child):after {
    position: static;
}


ul.dl-desktopmenu li:hover > a {
    color: #23cccf;
}

ul.dl-desktopmenu li:hover ul.dl-desksubmenu {
    display: block;
    position: absolute;
    padding-left: 2em;
}

ul.dl-desktopmenu li:hover ul.dl-desksubmenu li {
    display: block;
    position: relative;
}

ul.dl-desktopmenu li:hover ul.dl-desksubmenu a {
    transition: all 0.1s ease-in-out;
    padding: .9em;
    line-height: 1.1em;
}

ul.dl-desktopmenu li:hover ul.dl-desksubmenu li:hover {
    background-color: #a40e4c;
}

 ul.dl-desktopmenu li a.selected {
        background-color: #a40e4c;
    }


.heroinfo h2 {
    padding-top: 1.2em;
}

.event {
    width: 90%;
}

.artsy {
    width: 32%;
}

.popup {
    display: none;
    position: absolute;
    background: #fff; 
    left: 15%;
    right: 15%;
    width: 70%;
    padding: 1em 1em;  
    line-height: 1.5em;
    z-index: 9999;
}

.event_image1 {
    background-position: 20% 55%;
}

li.event_info {
    font-size: 1em;
    display: inline-block;
    width: 30%;
    max-width: 400px;
    vertical-align: top;
    margin-right: 2em;
}



.filterwrapper {
    width: 17em;
    float: left;
}

button.filter {
    border-right: 1px solid #ff02b7;
}

button.choose {
    width: 8em;
    padding: 1.1em .5em;

}

.events_page .academic_heading {
    word-wrap: normal;
}

.crisis {
    width: 60%;
}


.colorbackground {
    background: #14080e;
}

.bar {
    width: 100%;
    background-color: #14080e;
}



}


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

    .logosvg {
        top: .3em;
    }

    .homehero_desktop{
    background-image: linear-gradient(transparent 80%, #a40e4c 20%),
       url(../images/bgthesis.jpg);
       background-position: 0 28%;
}    

.heroinfo h2 {
    padding-top: 3.3em;
}    

.heroinfo h2, .heroinfo p, .heroinfo a {
    float: left;
}

.heroinfo a {
    margin-left: 30%;
    margin-top: .2em;
}


.overlay {
    height: 35em;
}

.homeprograms .overlay h3 {
    font-size: 3em;
    letter-spacing: .5em;
}

.homeprograms .pho {
    background-position: 45% 25%;
}

h3.mfa {
    font-size: 6em;
    top:-33px;
    margin-right: 10%;
}

.bg-photo-img-container {
    margin-top: 0;
}

.bg-photo-img-container2 {
    margin-top: 27em;
    }


.academic_info {
    width: 45%;
    margin-left: 9%;
}

table.event_info {
    font-size: 1.3em;
}

.crisiscontainer {
    margin-top: 2em;
    margin-bottom: 2em;
}

.crisis, .padding_wrapper {
    width: 60%;
    padding-right: 15%;
}



ul.listofshows li {
    width: 20%;
    display: inline-block;
    vertical-align: bottom; 
    margin-right: 3em;
    vertical-align: bottom;

}



ul.listofshows li:nth-child(-n+2) {
    vertical-align: bottom;
}

ul.listofshows li:nth-child(even) {
    margin-left: 0;
}

.events_page .filterwrapper {
    margin-left: 2.5em;
}

}