/* Resources lists to cards */


#content ul.resources {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style-type: none;
    margin:0;
    }
#content ul.resources li {
    display:flex;
    width:49%;
    align-items: center;
    justify-content: center;
    border: 1px solid #1e407c;
    text-align: center;
    margin-bottom: 1rem;
    }
#ccontent ul.resources li + li { margin-left:.25rem; }
#content ul.resources li a { display:block;padding: .75rem; width: 100%; }
#content ul.resources li a:hover {background: rgba(16, 171, 105, .15);}

#content ul.slideshow {
    margin:1rem 0;
    list-style: none;
    display:flex;
    align-items: center;
    }
#content ul.slideshow li { padding:0 .25rem; }
#content ul.slideshow li img {
    border: 3px solid #d7d7d7;
    border-radius: 3px; 
    }
#content ul.slideshow .slick-arrow { text-decoration:none; }
#content ul.slideshow .slick-arrow i:before {text-decoration:none; font-size:2rem;}

#content ul.grid {
    margin:0;
    display:flex;
    flex-wrap:wrap;
    font-family: roboto-slab, serif;
    font-size: .95rem;
}
#content ul.grid li {
    list-style:none;
    flex-grow:1;
    flex-basis:20%;
    text-align:center;
    padding: 1rem;
}
#content ul.grid img { 
    width: auto;
    padding-bottom: 1rem;
    height: 6rem;
    }


.cards {
    display:flex;
    flex-wrap:wrap;
    margin:0;
    }

.card {
    margin: 1rem;
    padding: .5%;
    width: 100%;
    min-height: 15rem; 
    text-align: center;
    pointer: cursor;
    -webkit-backface-visibility: hidden !important;
}
.card:hover .front img {
    transform: rotateY(33deg);

}
.card img{
    height: 7rem;
    width: 7rem;
    margin: 0 auto;
    display: block;
    transition: all .5s;
    outline: 1px solid transparent; /* holy cow this is a legit way to trigger anti-aliasing */
    -webkit-backface-visibility: hidden !important;
    }
    
.card .front, .card .back { padding:1rem;-webkit-backface-visibility: hidden !important; }
.card .front *, .card .back *{
    -webkit-backface-visibility: hidden !important;
    -moz-backface-visibility:hidden;
    z-index:50000;
    }
.front, .back { 
    font-family: "effra", serif;
    }
.back, .front {
    background: white;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: 1px solid #00acee;
}
.back, .back p, .back div {
    width:100%;
    -webkit-backface-visibility: hidden !important;
    }
.back:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #d2d2d2;
    border-radius: 15px;
    top: 0;
    left: 0;
}

.mceContentBody .card {outline:1px solid #d7d7d7;}
.mceContentBody .front {outline:1px solid orange!important;}
.mceContentBody .front:before {content:"front: ";}
.mceContentBody .back {outline:1px solid purple; display: block; padding: 0;}
.mceContentBody .back:before {content:"back: ";}

.mceContentBody .back:after {display:none;}  /* the :after effect gets messed up in TinyMCE, overrides clicking on the other stuff */


/* questions table styles */
.questions { font-family:roboto-slab, serif; font-size:1.2rem; line-height: 1.5; }
.questions td {
    vertical-align:middle;
    padding: 0;
    width: 50%;
    }
.questions td:first-child { text-align:left }
.questions td:last-child {text-align:right;}
  /* questions table fade in image, js is selecting ".questions img" */
#content .questions p {
    padding: 0 1rem;
    font-size: 1rem;
}
 
  
.questions img { 
    opacity:0;transition: all 5s; 
    max-height: 15rem;
    width: 100%;
    height: 100%;
    object-fit: cover;
    }
.mceContentBody .questions img { opacity:1; }
.questions td:first-child img { border-radius: 15px 0 0 15px; }
.questions td:last-child img { border-radius: 0 15px 15px 0; }

.fade-in { opacity:1 !important; }

.portaltype-fsdspecialty .listing #directory-listing > a {
 display: block!important;   
}

.portaltype-fsdspecialty .listing a h4 {
     color: #fd5309!important;

}

.portaltype-fsdspecialty h3 {
    width: 100%;
    border: 0!important;
}

.portaltype-fsdspecialty #content h2 { 
    margin: 0;
}

.portaltype-fsdspecialty .classificationListing {
 margin-left: 2rem;
 margin-right: 2rem;
}

@media only screen and (min-width: 34em) {
    
    .card { width: 42.5%; }
    
}




@media only screen and (min-width: 44em) {
/* top-right hex-pattern image, fade in */

.index-main-container,
.main-container {

    background-image: url("../img/hexgrid 4.png"), url("../img/hexgrid 5.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right bottom;
}


.card { width: 44.5%; }

}

@media only screen and (min-width: 49em) {
 
.card { width: 100%; }
}



@media only screen and (min-width: 60em) {
.singleClass {
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
}
.section-graduate #content .facultyStaffDirectory .listing,
.section-directory.portaltype-fsdspecialty #content .facultyStaffDirectory .listing { width: 45%; flex: 1 0 auto; margin-right: 1rem;}



footer#copyright .content { display:flex; }

#content .questions p {
    font-size: 1.2rem;
}

#bghex { opacity:1; }
@-webkit-keyframes bgfade {
    from {opacity: 0;}
    to {opacity: 1;}
    }
@keyframes bgfade {
    from {opacity: 0;}
    to {opacity: 1;}
    }


}



@media only screen and (min-width: 61em) { 
    
.card {
    width: 43.5%;
}
    
}




@media only screen and (min-width: 80em) {
.card { width: 45%; }

}