/**
 * CSS styles that are imported into the WYSIWYG editor in WordPress and used on the
 * user facing website. Styles here override or add to the file adelphi.edu/editor_style.css
 */


/* ------- COMMONLY USED STYLE WITH BORDER ON TOP AND BOTTOM OF TEXT ------- */


/* --------- HEADER STYLES -------- */

H2 {
    color: #000000;
    font-family: 'Graphik', Arial, Helvetica, sans-serif;
    font-size: 1.8em;
    line-height: 1.2em;
    font-weight: normal;
    padding-top: 10px;
}

H1,
H3 {
    color: #000000;
    font-family: 'Graphik', Arial, Helvetica, sans-serif;
    font-size: 1.8em;
    line-height: 1.2em;
}

H4 {
    font-size: 1.5em;
    font-family: 'Graphik', Arial, Helvetica, sans-serif;
    line-height: 1.2em;
    margin: 0 0 0.5em 0;
}

h1.bfah1 {
    font-size: 2.6em;
}


/* ------- HR STYLES ---------------- */

HR {
    border-top: 1px solid #ffb500;
}

table.three-column-table tr td:first-child {
    padding-right: 0;
}


/*----------------------SLATE FORM STYLING-------------------------*/

#register_date {
    font-weight: bold;
    font-size: 1.2em;
}

#register_location {
    font-weight: bold;
}


/* ------- FONTAWESOME BULLETED LIST (CHECKS) ---------------- */

.grid_16.lpcontent ul,
li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.grid_16.lpcontent ul {
    margin: 2em 0;
}

.grid_16.lpcontent li {
    margin: 1em;
    margin-left: 3em;
    list-style: none;
}

.grid_16.lpcontent li:before {
    font-family: 'FontAwesome';
    content: '\f058';
    /* fa-check-circle */
    font-size: 2em;
    float: left;
    margin-left: -1.5em;
}

TABLE {
    width: auto !important;
}


/* Plugin Styles for Gallery*/

#bwg_container1_0 #bwg_container2_0 .bwg-container-0.bwg-standard-thumbnails .bwg-play-icon2 {
    font-family: 'bwg' !important;
}

.bwg-play-icon1 {
    pointer-events: none !important;
}

i.bwg-icon-play.bwg-title2.bwg-play-icon2 {
    color: #fff !important;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.3) !important;
    font-family: 'bwg' !important;
}

div.bwg-title2 {
    padding-top: .7em !important;
    font-family: 'Graphik', Arial, Helvetica, sans-serif !important;
    font-size: 16px;
    font-weight: bold;
    padding: 2px;
    color: #323A45;
    box-sizing: border-box;
    text-align: center;
}

.bwg-item1 {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.bwg-item2 {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

div.bwg-item2:hover img {
    -ms-transform: scale(1.08);
    -webkit-transform: scale(1.08);
    transform: scale(1.08)
}

.bwg-title1 .bwg-title2 {
    font-family: 'Graphik', Arial, Helvetica, sans-serif !important;
}

#bwg_container1_0 #bwg_container2_0 .bwg-container-0.bwg-standard-thumbnails .bwg-thumb-description span {
    font-family: 'Graphik', Arial, Helvetica, sans-serif !important;
    margin: auto!important;
    display: table !important;
}

#bwg_container1_0 #bwg_container2_0 .bwg-container-0.bwg-standard-thumbnails .bwg-item>a {
    margin-right: 15px !important;
    margin-bottom: 20px !important;
}

.bwg_image_title,
.bwg_image_title * {
    font-family: 'Graphik', Arial, Helvetica, sans-serif !important;
    color: #333333 !important;
}

.bwg_image_description,
.bwg_image_description * {
    font-family: 'Graphik', Arial, Helvetica, sans-serif !important;
    color: #333333 !important;
    font-weight: normal !important;
}

.bwg_image_description,
.bwg_image_description * {
    font-family: 'Graphik', Arial, Helvetica, sans-serif !important;
    color: #333333 !important;
}

#bwg_container1_0 #bwg_container2_0 .bwg-container-0.bwg-standard-thumbnails .bwg-item0 {
    background-color: #fff !important;
    padding: 0px;
    background-color: #000000;
    border: 0px none #CCCCCC;
    opacity: 1.00;
    border-radius: 0;
}

.bwg_thumbnail div[id^=bwg_search_container_1_] div[id^=bwg_search_container_2_] .bwg_search_input,
.bwg_thumbnail div[id^=bwg_search_container_1_] div[id^=bwg_search_container_2_] .bwg_search_input:focus {
    font-family: 'Graphik', Arial, Helvetica, sans-serif !important;
}

#bwg_container1_0 #bwg_container2_0 .bwg-container-0.bwg-standard-thumbnails .bwg-item0 {
    -webkit-box-shadow: 3px 3px 20px -1px rgba(0, 0, 0, 0.51);
    -moz-box-shadow: 3px 3px 20px -1px rgba(0, 0, 0, 0.51);
    box-shadow: 3px 3px 20px -1px rgba(0, 0, 0, 0.51);
}

@media only screen and (min-width: 480px) {
    .bwg-standard-thumbnails .bwg-zoom-effect .bwg-zoom-effect-overlay {
        background-color: rgba(0, 0, 0, 0.5) !important;
        ;
    }
}

@media only screen and (max-width: 480px) {
    .bwg-standard-thumbnails .bwg-zoom-effect .bwg-zoom-effect-overlay {
        background-color: 5px 10px rgba(0, 0, 0, 0.5) !important;
        ;
    }
}


/*front gallery*/


/*

.img-wrapper-container {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}

.img-wrapper {
    max-width: 300px;
    max-height: 300px;
    width: auto;
    height: auto;
    overflow: hidden;
    box-shadow: 3px 3px 20px -1px rgba(0, 0, 0, 0.51);
    margin-right: 15px;
    margin-bottom: 20px;
    display: inline-block;
    box-sizing: border-box;
    flex: 1;
}

.inner-img {
    transition: 0.3s;
}

.inner-img:hover {
    transform: scale(1.08);
}

img.inner-img {
    width: 411.043px !important;
    height: 100%;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover;
}*/


/*another option*/

.gallery2 {
    display: flex;
    flex-wrap: wrap;
    /* Compensate for excess margin on outer gallery flex items */
    margin: -1rem -1rem;
}

.gallery2-item {
    /* Minimum width of 24rem and grow to fit available space */
    flex: 1 0 24rem;
    /* Margin value should be half of grid-gap value as margins on flex items don't collapse */
    margin: 1rem;
    box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.gallery2-wrapper p {
    margin: 1em 0;
    text-align: center;
}

.gallery2-wrapper a {
    color: #323A45;
    font-size: 16px;
    font-weight: bold;
    padding: 2px;
    max-height: 100%;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    -webkit-transition: background 0.25s, border 0.25s, color 0.25s;
    transition: background 0.25s, border 0.25s, color 0.25s;
}

.gallery2-wrapper a:hover {
    border-bottom-color: #ffb500;
    color: #000;
}

.gallery2-image {
    display: block;
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease-out;
}

.gallery2-image:hover {
    transform: scale(1.15);
}


/*

The following rule will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox styling. 

*/

@supports (display: grid) {
    .gallery2 {
        display: grid;
        /*grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
        grid-gap: 2rem;*/
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        grid-gap: 1rem;
    }
    .gallery2,
    .gallery2-item {
        margin: 0;
    }
}