/* Colors */
.bg-gpblue {
    background-color: #243C7D;
}
.bg-kayumanggi {
    background-color: #AF6C29;
}
.bg-peach {
    background-color: #F47B58;
}
.bg-gpgreen {
    background-color: #25B69D;
}
.bg-gpdark {
    background-color: #222930;
}
.bg-lightgray {
    background-color: #F5F7F7;
}
.text-gpblue {
    color: #243C7D;
}
.text-kayumanggi {
    color: #AF6C29;
}
.text-peach {
    color: #F47B58;
}
.text-gpgreen {
    color: #25B69D;
}
.text-gpdark {
    color: #222930;
}
.text-darkgray {
    color: #3E3E3F;
}
.border-gpblue {
    border-color: #243C7D !important;
}
.border-kayumanggi {
    border-color: #AF6C29;
    border-width: 1px;
    border-style: solid;
}
.border-lightgray {
    border-color: #F5F7F7 !important;
}
.border-darkgray {
    border-color: #3E3E3F !important;
}

/* Fonts */
@font-face {
    font-family: 'SourceSerif';
    src: url('fonts/SourceSerif/SourceSerifPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SourceSerifBold';
    src: url('fonts/SourceSerif/SourceSerifPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'GraphikBold';
    src: url('fonts/GraphikFont/GraphikBold.otf');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'GraphikLight';
    src: url('fonts/GraphikFont/GraphikLight.otf');
    font-weight: normal;
    font-style: normal;
}
* {
    font-family: 'GraphikLight';
    font-size: 16px;
}
.font-page-header {
    font-family: 'SourceSerifBold', Times, serif;
    font-size: 54px;
}
.font-h1, .mobile-font-h1 {
    font-family: 'SourceSerifBold';
    font-size: 36px;
}
.font-h2 {
    font-family: 'GraphikBold';
    font-size: 24px;
}
.font-body {
    font-family: 'GraphikLight';
    font-size: 16px;
}
.font-body-bold {
    font-family: 'GraphikBold';
    font-size: 16px;
}
.font-btn-meta {
    font-family: 'GraphikBold';
    font-size: 14px;
}


/* Underline Hover */
.sliding-middle-out {
    display: inline-block;
    position: relative;
    padding-bottom: 2px;
}
.sliding-middle-out:after {
    content: '';
    display: block;
    margin: auto;
    height: 1px;
    width: 0px;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
    width: 100%;
    background: #AF6C29;
    left: 0;
}
.sliding-middle-out:active:after {
    width: 100%;
    background: #243C7D;
    left: 0;
}

.underlin-hover-parent {
  display: flex;
  flex-flow: row nowrap;
  margin: 0;
}
.underline-hover {
  margin: 0 auto;
  padding: 0;
  transition: all 0.2s ease-in-out;
  position: relative;
}
.underline-hover:before, .underline-hover:after {
  content: "";
  position: absolute;
  bottom: -1px;
  width: 0px;
  height: 1px;
  margin: 0;
  transition: all 0.2s ease-in-out;
  transition-duration: 0.5s;
  opacity: 0;
  background-color: #AF6C29;
  left: 0;
}
.underline-hover:hover {
  cursor: pointer;
}
.underline-hover-parent:hover .underline-hover:before, .underline-hover-parent:hover .underline-hover:after {
  width: 100%;
  opacity: 1;
}
.underline-hover-parent:active .underline-hover:before, .underline-hover-parent:active .underline-hover:after {
  width: 100%;
  background-color: #243C7D;
  opacity: 1;
}

/* Buttons, Click, & Hover */
.btn-pill {
    font-family: 'GraphikBold';
    font-size: 14px !important;
    width: 200px;
    height: 45px;
    transition: transform 0.3s ease;
}
.btn-read-more {
    color: #464652;
    background-color: transparent;
    border: transparent;
}
.view-video {
    background-color:transparent;
}
.btn-view-magazine {
    background-color:transparent;
}
.btn-outline-item {
    color: #464652;
}

.btn-pill:hover {
    /* font-size: 16px !important; */
    -webkit-transform: scale(1.07); /* WebKit */
    -moz-transform: scale(1.07); /* Mozilla */
    -o-transform: scale(1.07); /* Opera */
    -ms-transform: scale(1.07); /* Internet Explorer */
    transform: scale(1.07); /* CSS3 */
}
.btn-read-more:hover {
    color: #AF6C29;
}
.view-video:hover {
    background-color:transparent;
    border-bottom: #243C7D;
}
.btn-view-magazine:hover {
    color: white;
    background-color: #243C7D;
}
.btn-outline-item:hover {
    color: #243C7D;
    background-color: transparent;
}

.btn-pill.bg-kayumanggi:active {
    background-color: #956A3D;
    /* font-size: 16px !important; */
    -webkit-transform: scale(1.07); /* WebKit */
    -moz-transform: scale(1.07); /* Mozilla */
    -o-transform: scale(1.07); /* Opera */
    -ms-transform: scale(1.07); /* Internet Explorer */
    transform: scale(1.07); /* CSS3 */
}
.btn-pill.bg-gpblue:active {
    background-color: #464652;
    /* font-size: 16px !important; */
    -webkit-transform: scale(1.07); /* WebKit */
    -moz-transform: scale(1.07); /* Mozilla */
    -o-transform: scale(1.07); /* Opera */
    -ms-transform: scale(1.07); /* Internet Explorer */
    transform: scale(1.07); /* CSS3 */
}
.btn-pill.bg-peach:active {
    background-color: #464652;
    /* font-size: 16px !important; */
    -webkit-transform: scale(1.07); /* WebKit */
    -moz-transform: scale(1.07); /* Mozilla */
    -o-transform: scale(1.07); /* Opera */
    -ms-transform: scale(1.07); /* Internet Explorer */
    transform: scale(1.07); /* CSS3 */
}
.btn-read-more:active {
    color: #243C7D;
}
.btn-outline-item:active {
    color: white;
    background-color: #243C7D;
}

/* Base Elements */
div {
    font-size: 18px;
}
a {
    text-decoration: none;
}

.mobile-display-b {display: none;}

a#back-to-top {
    color: #243C7D;
}
a#back-to-top:hover {
    color: #3E3E3F;
}

.navbar button {
    width: 2em;
    height: 2em;
}

.ul-style-none {
    list-style: none;
}

input {
    height: 2.5em;
    color: white !important;
    padding-bottom: 0;
    margin-bottom: 0;
    background-color:transparent !important;
    outline: 0;
    border-width: 0 0 1px;
    border-color: gray;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: gray;
}

/* Custom Classes */
.left-margin {
    margin-left: 13vw;
}
.right-margin {
    margin-right: 8vw;
}
.left-padding {
    padding-left: 13vw;
}
.right-padding {
    padding-right: 8vw;
}
.top-padding {
    padding-top: 80px;
}
.bottom-padding {
    padding-bottom: 80px;
}

/* Search */
.search-left-fauxto {
    width: 120px;
}
.navbar-search ul {
    width: 240px;
}
.navbar-search input {
    color: #464652 !important;
    background-color: #E0E2E1 !important;
    width: 93%;
    margin-left: 0.5em;
    padding-left: 0.5em;
}

#carouselHome .carousel-caption {
    text-align: left;
    bottom: 15rem;
}
.carousel-caption-buttons {
    margin-top: 1.5em;
}

.section-margin-top {
    margin-top: 5em;
}

.section-overlay-height {
    height: 600px;
}
.section-overlap-main {position: relative;}


.footer-links-col {
    flex: 1 0 0%;
}
.footer-links {
    margin-left: 2.5em;
}
.footer-links a {
    color: white;
}
#footer-form-display {
    display: flex;
}
.footer-socials-col {
    flex: 0 0 auto;
    width: 50%;
}


/* Container holding the image and the text */
.page-header, .call-to-action-section {
  position: relative;
  text-align: center;
  color: white;
}

/* Centered text */
.page-header .centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.call-to-action-section .call-to-action-content {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
}


.left-side-navbar a, .search-view-all a {
    color: #8E8E8E;
    font-family: 'GraphikBold' !important;
    font-size: 14px !important;
}
.left-side-navbar a:hover {
    color: #414042 !important;
}
.left-side-navbar a:active {
    color: #243C7D !important;
}
.left-side-navbar-heading {
    color: #243C7D;
    font-family: 'GraphikBold' !important;
    font-size: 14px !important;
}
ul.sidebar-ul-hi {
    padding-left: 0 !important;
}
.sidebar-ul-hi li {
    padding-left: 2rem !important;
}
.sidebar-ul-hi li:active {
    background-color: #243C7D;
}
.sidebar-ul-hi a:active {
    color: white !important;
}

.load-more-btn {
    font-kerning: normal;
    align-items: center;
    width: 180px;
    height: 40px;
    color: #243C7D;
}

.play-container {
    position: relative;
}
.play-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    color: white;
    opacity: 0.8;
}
.play-underline-hover {
    margin: 0 auto;
    padding: 0;
    transition: all 0.2s ease-in-out;
    position: relative;
}
.play-underline-hover:before {
    content: "";
    position: absolute;
    bottom: -1px;
    width: 0px;
    height: 15px;
    margin: 0;
    transition: all 0.2s ease-in-out;
    transition-duration: 0.5s;
    opacity: 0;
    background-color: #AF6C29;
    left: 0;
}
.play-underline-hover:hover, .play-center:hover {
    cursor: pointer;
    font-size: 6rem;
}
.play-underline-hover-parent:hover .play-underline-hover:before, .play-underline-hover-parent:hover .play-underline-hover:after {
    width: 100%;
    opacity: 1;
}
.play-underline-hover-parent:active .play-underline-hover:before, .play-underline-hover-parent:active .play-underline-hover:after {
    width: 100%;
    opacity: 1;
}

.text-block-scroll {
    height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
}

.grandchild {
    float: left;
}

.filter-sort, .filter-search {
    width: 180px;
}
.filter-sort label {
    color: #464652;
    font-family: 'GraphikBold' !important;
    font-size: 14px !important;
}
.filter-sort select {
    font-size: 14px !important;
    height: 30px !important;
    color: #464652 !important;
    border-color: #464652 !important;
}
.catalog-search input {
    font-size: 14px;
    height: 30px;
    color: #464652 !important;
    padding: 0 0.5em;
    margin: 0;
    background-color: transparent !important;
    outline: 0;
    border-color: #464652;
    border-width: 1px;
    border: 1px solid #464652 !important;
}
.catalog-search button {
    background-color: transparent !important;
    padding: 0;
    margin: 0;
    border-width: 1px;
    height: 30px;
}

.filter-grid-list {
    /* height: 1em;  */
    /* line-height: 1em; */
    vertical-align: middle;
}
.filter-row a, .filter-grid-list a {
    color: #222930;
}
.filter-row a:hover, .filter-grid-list a:hover,
.filter-row a:active, .filter-grid-list a:active {
    color: #243C7D;
    border-color: #243C7D !important;
}
.filter-row a.active {
    color: #fff;
    border-color: #243C7D !important;
    background-color: #243C7D !important;
}

.join-btn {
    vertical-align: middle;
}
a.join-btn, button.join-btn {
    color: #fff;
    background-color: #243C7D;
}
a.join-btn:hover, a.join-btn:active,
button.join-btn:hover, button.join-btn:active {
    background-color: #222930
}

.card-thumbnail-container {
    position: relative;
}
.card-thumbnail-tag {
    position: absolute;
    top: 0%;
    left: 5%;
    transform: translate(0%, -5%);
    /* font-size: 1.5rem; */
    color: white;
    background-color: #243C7D;
}

.map-results {
    height: 600px;
    overflow-x: hidden;
    overflow-y: auto;
}

.mobile-lh {
    line-height: 2;
}

.main-content-my {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.main-col {
    flex: 0 0 auto;
    width: 58.33333333%;
}
.left-nav-col {
    flex: 0 0 auto;
    width: 16.66666667%;
}

input[type='checkbox'] { display: none; } 
.lbl-toggle { 
    display: block;
    text-transform: uppercase;
    text-align: center; 
    padding: 0.5rem; 
    color: #222930; 
    background: white; 
    cursor: pointer; 
    transition: all 0.25s ease-out; 
} 
.lbl-toggle:hover { color: #FFF; } 
.lbl-toggle::before { 
    content: ' '; 
    display: inline-block; 
    /* border-top: 5px solid transparent; 
    border-bottom: 5px solid transparent; 
    border-left: 5px solid currentColor;  */
    vertical-align: middle; 
    margin-right: .7rem; 
    transform: translateY(-2px); 
    transition: transform .2s ease-out; 
} 
.toggle:checked+.lbl-toggle::before { 
    transform: rotate(90deg) translateX(-3px); 
}
.collapsible-left-content { 
    max-height: 0px; 
    overflow: hidden; 
    transition: max-height .25s ease-in-out; 
} 
.toggle:checked + .lbl-toggle + .collapsible-left-content { max-height: 350px; } 
.toggle:checked+.lbl-toggle { 
    border-bottom-right-radius: 0; 
    border-bottom-left-radius: 0; 
}  

.mobile-my-5 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.content-main-col {
    padding-left: 10vh;
}

.video-catalog-col {
    flex: 0 0 auto;
    width: 50%;
}
.mobile-justify-content {
    justify-content: center;
}

.mobile-display-0b {
    display: block;
}

.magazine-grid-card-col {
    flex: 0 0 auto;
    width: 50%;
}

.mobile-font-btn-meta {
    font-family: 'GraphikBold';
    font-size: 14px;
}

.video-section-col {
    flex: 0 0 auto;
    width: 50%;
}
.video-section-text-col {
    flex: 0 0 auto;
    width: 25%;
}

.video-section-m {
    margin-left: 0;
    margin-right: 5vw;
}

.blog-card-h {height: 300px;}
.blog-card-col {
    flex: 0 0 auto;
    width: 50%;
}

.event-grid-col {
    flex: 0 0 auto;
    width: 33%;
}

.event-img-col {
    flex: 0 0 auto;
    width: 58.33333333%;
}
.event-details-col {
    flex: 0 0 auto;
    width: 33.33333333%;
}

@media (min-width:320px) {
     /* smartphones, iPhone, portrait 480x320 phones */
     .font-page-header {
        font-size: 36px;
    } 
     .section-overlay-height {
        /* height: 100px; */
    }

    /* Search */
    .search-left-fauxto {
        width: 120px;
    }
}

@media (max-width: 425px) {
    .mobile-display-0 { display: none;}
    .mobile-display-b {display: block;}

    .header-nav-col-padding { display: none;}
    nav .col-9 {
        flex: 0 0 auto;
        width: 100%;
    }

    .font-page-header {
        font-size: 28px;
    }

    #footer-form-display {
        display: none;
    }
    .footer-socials-col {
        flex: 0 0 auto;
        width: 100%;
        text-align: center;
    }
    .footer-socials-col .row {
        margin-top: 1.5rem;
        margin-left: 3.5rem;
        margin-right: 3.5rem;
        text-align: center;
        justify-content: center;
    }
    
    .filter-sort, .filter-search {
        width: 100%;
    }

    .mobile-lh {
        line-height: 1.75;
    }

    .main-content-my {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .left-nav-col, .main-col {
        width: 100%;
    }

    .mobile-my-5 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .content-main-col {
        padding-left: 2.5rem;
        padding-right: 1.5rem;
    }

    .video-catalog-col {
        flex: 0 0 auto;
        width: 100%;
    }

    .mobile-font-h1 {
        font-family: 'SourceSerifBold';
        font-size: 28px;
    }
    .mobile-mt-3, .mobile-mt-03 {
        margin-top: 1rem;
    }    

    .mobile-flex-column {
        flex-direction: column;
    }
    .mobile-justify-content {
        justify-content: left;
    }
    .mobile-display-0b {
        display: none;
    }

    .magazine-grid-card-col {
        flex: 0 0 auto;
        width: 100%;
    }

    .mobile-font-btn-meta {
        font-family: 'GraphikBold';
        font-size: 10px;
    }

    .video-section-col, .video-section-text-col {
        width: 100%;
    }

    .video-section-m,
    .video-section-text-col {
        margin-left: 5vw;
        margin-right: 5vw;
    }
    .video-section-text-col {
        margin-top: 5vw;
    }
    .text-block-scroll {
        height: 100%;
    }

    .blog-card-h {}
    .blog-card-col {
        flex: 0 0 auto;
        width: 100%;
    }
    .event-grid-col {
        flex: 0 0 auto;
        width: 100%;
    }

    .event-img-col ,
    .event-details-col {
        width: 100%;
    }
}

@media (max-width: 1129px) {
    .half-flex-column {
        flex-direction: column;
    }
    .half-w-100 {
        width: 100%;
    }
}

@media (max-width: 1194px) {
    .half-col-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (min-width:481px) { 
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    .section-overlay-height {
        height: 810px;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

@media (min-width:641px) {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    .section-overlay-height {
        height: 800px;
    }
}

@media (min-width:882px) {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    .section-overlay-height {
        height: 710px;
    }
}


@media (min-width:961px) {
    /* tablet, landscape iPad, lo-res laptops ands desktops */
    .font-page-header {
        font-size: 54px;
    } 
    .section-overlay-height {
        height: 650px;
    }
}

@media (min-width:996px) {
    .triple-block-section {
        height: 168px;
    }
}

@media (min-width:1025px) {
     /* big landscape tablets, laptops, and desktops */ 
     .section-overlay-height {
        height: 650px;
    }
    .triple-block-section {
        height: 138px;
    }    
}

@media (min-width:1281px) {
     /* hi-res laptops and desktops */ 
     .section-overlay-height {
        height: 650px;
    }
    .triple-block-section {
        height: 120px;
    }    
}

@media (min-width:1352px) {
     /* hi-res laptops and desktops */ 
     .section-overlay-height {
        height: 600px;
    }
}