/*
Theme Name:		 Hero For Life
Theme URI:		 https://xmtn.net
Description:	 Hero For Life theme
Author:			 XMTN Studio
Author URI:		 https://xmtn.net
Version:		 1.0.0
Text Domain:	 hero-for-life
*/

	body {padding:0;margin:0;font-family: 'Noto Sans', sans-serif;font-size:18px;color:#2b4894}
    strong, h1, h2, h3, h4,h5,h6 {font-weight:bold}
    h1, h2 {font-size:3em;}
    .single h1 {font-size:45px;}
    img {max-width:100%;height:auto;}
    a {text-decoration: none; transition:0.5s ease;color: #2b4894;}
    a:hover {opacity:0.9}
    #content-swiper {position:relative; top:0;left:0;right:0;bottom:0;}

    #content-wrapper{position:relative;padding:0;margin:0}
    /* #content-wrapper>.swiper-slide {top:0;left:0;right:0;bottom:0;} */
	#content-wrapper>.swiper-slide {height: auto !important; min-height: 100vh;background-size:cover}

    #who-we-area-swiper {
        width: 100%;
        height:100%;
        margin: 3em 0;
    }

    #whoweare-swiper-navigation {
        position: absolute;
        bottom: 4em;
        left:0;
        right:0;
        z-index:2;
    }

    #whoweare-swiper-navigation .swiper-scrollbar-drag,
    #wave-swiper-navigation .swiper-scrollbar-drag,
    #news-swiper-navigation .swiper-scrollbar-drag {
        height: 9px;
        background-color: #f8bb18;
        border-radius: 5px;
        top: -4px;
        left:-12px;
    }

    #whoweare-swiper-navigation .whoweare-swiper-scrollbar,
    #wave-swiper-navigation .wave-swiper-scrollbar,
    #news-swiper-navigation .news-swiper-scrollbar {
        height: 1px;
        background-color: #274893;
    }

    .swiper-button-nav {font-size:1em;}

    #footer {
        position: fixed;
        bottom: 0;
        left:0;
        right:0;
        padding:1em;
        z-index: 99;
        font-size: 0.8em;
    }

    #header {
        position: absolute;
        top: 0;
        left:0;
        right:0;
        padding: 10px;
        z-index:99999;
    }
    .main-nav {
        text-decoration:none;
        color: #2b4894;
        font-size: 1.1em;
        transition: 0.5s ease;
    }

    .main-nav.active, .main-nav:hover {
        font-weight: bold;
    }

    #site-logo a {height:107px;display:block;visibility:none;opacity:0;transition:1s ease}
    #site-logo a img {max-height:100%;}
    #site-logo.show a {visibility:show;opacity:1}

    .homepage-section {min-height:100vh;display:flex;align-items:center; justify-content: center; background-size:cover;}
    #home.homepage-section {padding-top:150px;}
    .swiper, .swiper-slide {max-width:100vw;}

    .publication-swiper {max-width:100vw;}

    .white-box {
        border-radius: 10px;
        background-color: rgba(255,255,255,0.5);
        align-items: flex-start;
        padding: 3em;
		margin: 3em auto;
        min-height:60vh;
        max-width:85vw;
        /* max-height: 70vh; */
        /* overflow:auto; */
    }

    .portrait .white-box {padding:1em;}



    .white-box.box-row {
        flex-direction: row;
    }

    .publication-buttons {
        font-weight: bold;
        vertical-align: middle;
        color: #2b4894;
        margin-right: 3em;
        font-size: 1.2em;
        display: inline-block;
        /* max-height: 20px; */
    }

	.portrait .publication-buttons {
		max-height: none;
		display: block;
		margin-bottom: 10px;
	}

    .category-icon {
        height: 50px;
        display: block;
    }
    .category-icon img {margin-right:10px;max-height:100%;width:auto}

    .work-thumbnail {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 17vh;
        position: relative;
    }
    .work-archive-title {font-size:1em;}

    .pillars-archive-title {display:block;}
    .pillars-archive-title img {max-height:100%; width:auto; margin-right: 10px}
    .socmed-link {display:inline-block; margin-right:10px; font-size:1.2em}

    .background-overlay {
        position:fixed;
        top:0; left:0;right:0;bottom:0;
        z-index: -1;
    }

    .row-icon {font-weight:bold;font-size:1.4em;}
    .row-icon img {max-height:100%; width:auto}


    #searchform-wrapper {
        position:absolute;
        right: -100vw;
        top: 10vh;
        zoom: 0.4;
        max-width: 0;
        overflow: hidden;
        transition: 0.5s ease;
    }

    #searchform-wrapper.show {
        right: 0;
        top: 10vh;
        max-width: 100vw;
        zoom: 1;
        transition: 0.2s ease;
    }

    #mobile-menu {
        position:fixed;
        top:0;
        bottom: 0;
        width:100vw;
        left:-120vw;
        overflow: hidden;
        transition: 0.5s ease;
        zoom:0.4;
        z-index: 1000;
    }

    .mobile-menu-open #mobile-menu {
        left:0;
        zoom:1;
    }

    body.mobile-menu-open {
        height: 100vh;
        overflow-y: hidden;
    }

    #mobile-menu-button {
        position: fixed;
        top: 10px;
        right: 20px;
        z-index: 1000000;
    }


/* GENERAL STYLES */
.visuallyHidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px; width: 1px;
    margin: -1px; padding: 0; border: 0;
}

.hamburger {
    margin: 0 auto;
    margin-top: 30px;
    width: 30px;
    height: 30px;
    position: relative;
}

.hamburger .bar {
    padding: 0;
    width: 30px;
    height: 4px;
    background-color: #0d6efd;
    display: block;
    border-radius: 4px;
    transition: all 0.4s ease-in-out;
    position: absolute;
}

.bar1 {
    top: 0;
}

.bar2,
.bar3 {
    top: 13.5px;
}

.bar3 {
    right: 0;
}

.bar4 {
    bottom: 0;
}

/* HAMBURGER 1 */
.checkbox1:checked + label > .hamburger1 > .bar1{
    transform: rotate(45deg);
    transform-origin: 5%;
    width: 41px
}

.checkbox1:checked + label > .hamburger1 > .bar2 {
    transform: translateX(-40px);
    background-color: transparent;
}

.checkbox1:checked + label > .hamburger1 > .bar3 {
    transform: translateX(40px);
    background-color: transparent;
}

.checkbox1:checked + label > .hamburger1 > .bar4 {
    transform-origin: 5%;
    transform: rotate(-45deg);
    width: 41px;
}

.badge-link {
    transition: all 0.5s ease;
    box-shadow: blue 0 0 0;
    margin-top: 0;
    padding: 10px;
    border-radius: 10px;
}

.badge-link:hover {
    box-shadow:blue 0px 1px 11px;
    margin-top: 4px;
}

.pillars-link img {
    box-shadow: #666 0 0 0;
    border-radius: 50%;
    transition: all 0.5s ease;
}

.pillars-link:hover img {
    box-shadow: #666 0 1px 11px;
}

.pillars-link, .pillars-link h3 {
    transition: all 0.5s ease;
}

.pillars-link:hover h3 {text-shadow: #666 1px 1px 6px;}

.pagination-wrap {
    clear: both;
    display: block;
    text-align: center;
}
.pagination-wrap .pagination {
    margin-bottom: 0;
    margin-top: 0;
}
.pagination-wrap .pagination > li:first-child > a,
.pagination-wrap .pagination > li:first-child > span {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}
.pagination-wrap .pagination > li:last-child > a,
.pagination-wrap .pagination > li:last-child > span {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}
.pagination-wrap .pagination > li > a,
.pagination-wrap .pagination > li > span {
    background-color: #4FBEBA;
    border: 1px solid #1BA5A0;
    padding: 10px 15px;
    font-weight: bold;
    color: #FFFFFF;
}
.pagination-wrap .pagination > li > a:hover,
.pagination-wrap .pagination > li > span:hover,
.pagination-wrap .pagination > li > a:focus,
.pagination-wrap .pagination > li > span:focus {
    background-color: #1BA5A0;
    border-color: #189690;
}
.pagination-wrap .pagination .current {
    background-color: #1BA5A0;
    border-color: #189690;
}
.pagination-wrap .pagination .current:hover,
.pagination-wrap .pagination .current span:hover {
    background-color: #189690;
    border-color: #148781;
}

@media (max-width: 992px) {
    .white-box {

    flex-direction: column;

    }

    h1,h2 {font-size: 2em;}
    .row-icon {font-size:1.2em}
    .pillars-archive-title img, .publication-buttons img {width: 25px; height: 25px;}
    .publication-buttons {margin-right: 0; clear:both; display:block; width:100%}
}