@import url("./GatewayFonts.css");

.font-75 { font-size: 75% !important; }
.fw-100 { font-weight: 100; }
.fw-300 { font-weight: 300; }
.fw-700 { font-weight: 700; }
.fw-900 { font-weight: 900; }
.ff-montserrat { font-family: "Montserrat",sans-serif; }
.ff-lato { font-family: "Lato",sans-serif; }
.ff-titillium { font-family: "Titillium Web",sans-serif; }
.ff-archivo { font-family: "Archivo Narrow",sans-serif; }
.no-bullets { list-style-type: none; }
body { font-family: "Lato", sans-serif !important; }
.bumped { font-weight:900!important; }
/* end of generic styles */

body.site-body { display: flex; height: 100vh; min-height: 90vh; flex-direction: column; }
body a { color: #5e73ac; transition: all 0.25s ease; }
body a:hover { color: #32498a; }
div.subpage { flex: 1 0 auto; /* auto: fixes IE flex-column arrangement problems */ }
nav.gateway-header-navbar { z-index: 1; }
.g2aging-logo img { width: 75px; }
#g2g-collapse-toggle { display: none; }
.scroll-active { box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.25); }
.header-navlinks .nav-item { text-align: center; font-weight: 900; }
.header-navlinks .nav-link { white-space: nowrap; }
.sub-nav-title { display: block; font-size: 0.8em; font-weight: normal; }
#gatewayHeaderNavbarContent .nav-link:hover, .user-navbar .nav-link:hover { color: #5e73ac!important; }
.user-account-buttons .btn { background-color: #5e74ac; color: #f5f5f5; font-weight: 300; text-transform: uppercase; padding: 0.25rem 0.625rem; }
.user-account-buttons .btn:hover { background-color: #415c9f; color: white; }

/* STANDARD FACEBOOK ICON COLOR */
.user-buttons .fa-facebook-square { color: #3B5998 }

/* STANDARD TWITTER ICON COLOR */
.user-buttons .fa-twitter { color: #00ACEE }
.user-buttons .dropdown-item { font-size: 0.875rem; }
#searchbar { display: none; position: fixed; z-index: 20; padding: 10px; }
.g2gsearch { box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1); }
#searchbar input, #searchbar-mini input { height: 2.7rem; box-shadow: none; border-color: transparent; }
.searchbutton, .searchbutton:active { outline-style: none; box-shadow: none; border: none; float: right; background: #5e73ac; color: white; cursor: pointer; padding: 0 10px; }
/* end of header styles */

.banner-container .bg-banner { background: url('../images/affection-couple-daylight-1589865.jpg') no-repeat center right; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; min-height: 100vh; }
.overlay { position: absolute; top: 0; width: 100%; }
.message-container { position: absolute; top: 100px; left: 0; right: 0; margin: 0 auto; width: 75%; z-index: 5; }
.message-container .messages p { font-size: 120%; font-weight: 300; }
.overlay-content { display:flex; flex-direction:column; justify-content:flex-end; height:100vh; }
.description { background-color: #2e487c; }
.description h1 { font-family: "Montserrat", sans-serif; display: inline-block; background-color: #2e487c; color: #fff; padding: .75rem 2.4rem; border-radius: 0 1.25em 1.25em 0; font-weight: 600; }
.description h5 { font-family: "Montserrat", sans-serif; font-weight:100; padding: .25rem 2.4rem; color: #f0e094; }
.scroll-down img { width: 60px; padding: 5px; border-radius: 10rem; background-color: #5e73ac; transition: background-color 0.3s ease-out; }
.scroll-down img:hover { background-color: #32498a; }
.carousel-control-prev, .carousel-control-next { transition: 0.4s all ease-in; width: 8%; }
.carousel:hover .carousel-control-prev, .carousel:hover .carousel-control-next { background-color: rgba(70,70,70,.15); }
.carousel:hover .carousel-control-prev .active, .carousel:hover .carousel-control-next .active { background-color: #cccccc; }
h4.card-title { font-weight: 900; word-spacing: 3px; }
.shadow { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !important; transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.shadow:hover { box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 36px 8px rgba(0, 0, 0, 0.12) !important ; }
#carouselOverview table td { padding-bottom: 4px; }
#carouselOverview img { height: 390px; }
#carouselOverview .carousel-item { height: 390px; }
#carouselOverview td:first-child { color: #2e487c; white-space: nowrap; padding: 7px; font-weight: bold; }
#carouselOverview .card-content-title { font-weight: 900; font-size: 1.1em; text-align: center; text-transform: uppercase; margin: 12px; }
#carouselOverview .study-desc { background-color: #ffffffad; }
#carouselFeatures img { width: auto; height: 390px; }
#features-card .card-img-overlay { display: flex; flex-direction: column; align-items: center; }
#features-card a { color: white; text-decoration: none; }
#features-card .card-img-overlay .overlay-link { position: absolute; padding: 0.45rem 0.95rem; border-radius: 5px; font-size: 1.25rem; background-color: #2e487c; color: #efefef; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; transition: all 0.25s ease; }
#features-card .card-img-overlay .overlay-link:hover { background-color: #2e487c; }
#events-card .card-body { height: 390px; }
#events-card .btn.btn-editor { float: right; }
.content-color-darkblue { color: #2e487c !important; }
#eventsUpdaterForm .input-group-text, #eventsUpdaterForm .form-control { font-size: 0.8em; }
.input-group-text { transition: all 0.1s ease-in; }
.tag-remove-request { background-color: #bc3545; border-color: #bc3545; color: #ffffff; }
#gateway-learn-more .card-header, #gateway-features .card-header { color: #2e487c; }
.learn-more-panel .whatsnew { height: 100%; }
.learn-more-panel .whatsnew ul { height: 100%; display: flex; flex-direction: column; justify-content: space-evenly; list-style-type: circle; }
.learn-more-panel .whatsnew ul li:hover { list-style: disc; }
.btn.btn-editor { padding: 1px 7px 2px; }
.gateway-footer-top { background-color: #eeeeee; color: #444444 }
.gateway-footer-top a { color: #444444; }
.gateway-footer-top .sub-sitecontent ul { list-style: none; }
.gateway-footer-top .sub-sitecontent { margin-bottom: 1em; }
.gateway-footer-top .sub-sitecontent > a { font-weight: bold; }
.gateway-footer-bottom { font-size: 0.7em; }
.visible-small { display:none; }

/* MEDIA BREAKPOINTS FOR GATEWAY FACEPAGE */
@media (max-width: 400px) {
    .g2aging-logo img { width: 60px; }
    .overlay .description { width: 100%!important; }
    .overlay .description h1 { padding: 0 1rem; }
    .overlay .description .title-landing { font-size: 1.4rem; }
    .overlay .description .subtitle-landing { padding: 0 1rem; font-size: 1rem; }
    .learn-more-panel .whatsnew ul { padding: 0; }
    .btn-register {display: none; }
}

@media (max-width: 576px) {
    .g2aging-logo img { width: 60px; }
    .overlay .description { width: 100%!important; }
    .overlay .description h1 { padding: 0 1rem; }
    .overlay .description .title-landing { font-size: 1.4rem; }
    .overlay .description .subtitle-landing { padding: 0 1rem; font-size: 1rem; }
    .learn-more-panel .whatsnew ul { padding: 0; }
    .btn-register {display: none; }
}

@media (max-width: 992px) {
    #g2g-collapse-toggle { display: block; }
    .g2aging-logo img { width: 50px; }
}

@media (min-width: 992px) {
    .gateway-header-navbar.navbar-expand-lg .navbar-nav .nav-link { padding-right: .3rem; padding-left: .3rem; }
}

@media (min-width: 1200px) {
    .gateway-header-navbar.navbar-expand-lg .navbar-nav .nav-link { padding-right: .5rem; padding-left: .5rem; }
}

@media (max-width:1386px) {
    .user-welcome-msg {display:none;}
    #facebook-page-link {display:none;}
    .visible-small {display:block;}
    #userSettingDropdown { left:auto; right:0; }
    #gatewayHeaderNavbarContent { font-size: 0.9rem; }
}

@media (max-width: 1440px) {
    #carouselOverview { font-size: 0.8rem; }
}

@media (min-width: 1600px) {
    #carouselOverview img { height: 525px; }
    #carouselOverview .carousel-item { height: 525px; }
    .learn-more-panel .whatsnew ul li { font-size: 1.2rem; }
    #events-card .card-body { height: 525px; }
    #carouselFeatures img { width: auto; height: 525px; }
    #data-explorer-card .carousel-item { width: auto; height: 525px; }
}

@media (max-width: 1600px) {
    nav.gateway-header-navbar { padding: 0.5rem; }
    nav.gateway-header-navbar .g2aging-logo { padding: 0; }
    #gatewayHeaderNavbarContent .navbar-nav { font-size: 0.8rem; }
    .user-navbar .nav-link { padding: 0.25rem 0.75rem; }
}

@media (min-width: 2000px) {
    #carouselOverview .carousel-inner { font-size: 1.25em; }
}