/*
Theme Name: Spacious Child
Theme URI: https://themegrill.com/themes/spacious
Author: ThemeGrill
Author URI: https://themegrill.com
Description: Spacious is an incredibly spacious multipurpose responsive theme coded & designed with a lot of care and love. You can use it for your business, portfolio, blogging or any type of site. It has 4 page layouts, 2 page templates, 4 blog display types, 13 widgets areas, 5 custom widgets focusing on business template, awesome slider, primary color option to match your logo & website, boxed & wide layout, light & dark color skin, translation ready and many more. You can get free support in https://themegrill.com/support-forum/ and check the demo at https://demo.themegrill.com/spacious/.
Template: spacious
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, left-sidebar, flexible-header, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options, footer-widgets, blog, e-commerce, rtl-language-support
Text Domain: spacious
*/

html, body {
    background-color: #ffffff;
    color: #000000;
    font-size: 100%;
}

.hidden {
    display: none !important;
}

h2 {
    padding: 0;
    padding-bottom: 0.5em;
    margin: 0.8em 0;
    font-size: 1.8em;
    border-bottom: 1px solid darkgray;
}

h3 {
    margin-top: 1em;
    border-bottom: 1px solid darkgray;
}

h5 {
    font-size: 1.3em;
    padding-bottom: 0.8em;
}

.wp-caption {
    border: none;
}

.wp-caption-text {
    text-align: left;
}

#content.users .page {
    padding-bottom: 0 !important;
}

a {
    color: #5276BA;
    transition: all 0.2s linear;
}

a:hover,
a:focus{
    font-weight: bold;
}

.post .entry-meta a:hover,
.type-page .entry-meta a:hover,
.post .entry-title a:hover,
.page .entry-title a:hover{
    color: #5276BA;
}

a#scroll-up {
    background-color: #5276BA;
}

.read-more,
.more-link {
    color: #5276BA;
}

.spacious-button, input[type="reset"],
input[type="button"],
input[type="submit"], button {
    background-color: #FFFFFF;
    color:#5276BA;
}

.spacious-button:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover {
    box-shadow: none;
}

.post .entry-meta .read-more-link {
    background-color: #5276BA;
}

.btn {
    box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    height: 36px;
    left: 0px;
    letter-spacing: 0.5px;
    position: relative;
    right: 0px;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    text-transform: uppercase;
    top: 0px;
    vertical-align: middle;
    /*width: 120px;*/
    z-index: 1;
    user-select: none;
    caret-color: rgb(255, 255, 255);
    background: rgb(82, 118, 186) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(255, 255, 255);
    border-radius: 2px 2px 2px 2px;
    font: normal normal normal normal 15px / 36px Roboto, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
    overflow: hidden;
    padding: 0px 30px;
    transition: all 0.3s ease-out 0s;
}

.btn-outline {
    background: #FFFFFF none repeat scroll 0% 0% / auto padding-box border-box;
    border: 1px solid #0FBE7C;
    color: #0FBE7C;
}

#header-text-nav-container {
    border-bottom: none;
}

#featured-slider {
    border-bottom: none;
}

#featured-slider .entry-container {
    top: 40%;
}

#featured-slider .entry-description-container,
.featured-image .entry-description-container {
    background-color: rgba(0,0,0,0.8);
    padding: 1rem;
    color: #FFFFFF;
}

#featured-slider .entry-container {
    max-width: 32%;
}

.featured-image .entry-container {
    max-width: 32%;
}

#featured-slider .entry-content {
    padding: 0;
}

.featured-image img {
    margin-bottom: 0;
}

#controllers a:hover,
#controllers a.active {
    background-color: #5276BA;
}

.slider-title-head h3 {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    margin-top: 0;
}

.logos-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 0.8em;
}

.logo-item:nth-child(2) {
    text-align: right;
}

.logo-item img {
    width: 55%;
    margin-bottom: 5px;
}

.logo-item .eo4sdg-logo {
    width: 70%;
}

#header-text-nav-container {
    background-color: #FFFFFF;
}

.nav-container {
    background-color: #5276BA;
    text-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s linear;
}

.main-navigation {
    float: none;
    padding: 0;
}

.menu-main-menu-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
}

.main-navigation {
    display: flex;
    flex-direction: row;
}

.nav-menu {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
}

.main-navigation ul li {
    float: none;
    padding: 0;
}

.sub-menu {
    /*Edited 3_3_2020*/
    margin-top: 20px;
}

.main-navigation ul li a {
    padding: 1em;
    height: auto;
    color: #FFFFFF;
    opacity: 0.8;
    border-bottom: 2px solid transparent;
}

.main-navigation a:hover,
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor a,
.main-navigation ul li.current-menu-ancestor a,
.main-navigation ul li.current_page_item a,
.main-navigation ul li:hover > a {
    color: #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    opacity: 1.0;
}

.main-navigation ul li ul {
    background-color: #5276BA;
    border-top: 2px solid #FFFFFF;
    width: 180px;
}

.main-navigation ul li ul li a,
.main-navigation ul li.current-menu-item ul li a,
.main-navigation ul li ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor ul li a,
.main-navigation ul li.current-menu-ancestor ul li a,
.main-navigation ul li.current_page_item ul li a {
    color: #FFFFFF;
    border-bottom: none;
}

.main-navigation ul li ul li:last-child {
    border-bottom: none;
}

.main-navigation ul li ul li a:hover,
.main-navigation ul li ul li:hover > a,
.main-navigation ul li.current-menu-item ul li a:hover {
    color:#5276BA;
}

.main-navigation ul li ul li a:hover {
    border-bottom: 0;
}

.site-header .menu-toggle {
    background: transparent;
    color: #FFFFFF;
    text-align: left;
}

.site-header .menu-toggle:hover {
    background: transparent;
    color: #FFFFFF;
}

.main-small-navigation ul {
    display: flex;
    flex-direction: column;
}

li.search-menu.default a {
    display: none;
}

.search-form {
    padding: 0.7em;
}

#masthead .search-wrap input,
#masthead .search-wrap button {
    border: none !important;
}

#masthead .search-wrap input {
    padding: 5px 0 5px 10px;
    line-height: 32px;
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#masthead .search-wrap button {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

#masthead .search-wrap button:hover,
#masthead .search-wrap button:focus {
    opacity: .75;
}

.twitter-wrapper {
    margin-top: 1em;
}

#main {
    padding-top: 10px;
}

.main-body {
    padding-top: 0;
}

.secondary-page .main-body {
    width: 100%;
}

.home-page,
.secondary-page,
.sidebar-page{
    display: flex;
}

.home-page aside,
.secondary-page aside,
.home-page .main-body,
.secondary-page .main-body,
.sidebar-page .main-body,
.sidebar-page .side-menu{
    padding: 0.2em 1em;
}

.home-page aside,
.sidebar-page .side-menu {
    width: 35%;
}

.home-page .main-body,
.sidebar-page .main-body {
    width: 65%;
    display: flex;
    flex-direction: column;
}

.page-tree {
    padding: 1em 0;
    border-radius: 0.4em;
    background-image: linear-gradient(to top, #EFEFEF 23%, rgba(239, 239, 239, 0));
}

.page-tree ul {
    margin: 0 2em;
}

.page-tree ul > li {
    border-bottom: 1px solid darkgray;
    padding: 1em 0;
}

.page-tree ul .current_page_item {
    font-weight: 700;
}

.page-tree ul li:first-child {
    padding-top: 0;
}

.contact-us ul > li {
    padding-bottom: 0.5em;
}

.contact-us a {
    line-height: 48px;
}

.sidebar-svg {
    height: 50px;
    width: 50px;
    margin-right: 1em;
    margin-bottom: 0;
}

.hp-list .wp-post {
    flex-direction: column;
    display: flex;
    border-bottom: 1px solid darkgray;
    margin-bottom: 1.0em;
}

.hp-list .wp-post p {
    margin-bottom: 0.8em;
}

.hp-list .wp-post-details {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.8em;
}

.hp-list .wp-post-details span {
    flex-grow: 1;
    width: 50%;
    font-size: 0.80em;
}

.hp-list .wp-post-details span:nth-child(2) {
    text-align: right;
}

.hp-list .btn {
    float: right;
    font-weight: normal;
    text-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s linear;
}

.hp-list .btn:hover,
.hp-list .btn:focus {
    background-color: #FFFFFF;
    color: #5276BA;
}

/* New post styles */
.article-post {
    border-bottom: 1px solid darkgray;
    padding: 0;
    padding-bottom: 0.8em;
    margin-bottom: 1.0em;
}

.article-post:last-child {
    border-bottom: none;
}

.article-body{
    display: flex;
    flex-direction: row;
    padding-bottom: 0.8em;
}

.article-body a {
    width: 25%;
    margin: 0;
}

.article-body a img,
.search-body img {
    width: 75% !important;
}

.article-body p{
    width: 60%;
    margin-bottom: 0;
}

.article-body p .more-link{
    margin: 0;
    width: auto;
    padding-left: 0.5em;
}

.documents-wrapper {
    display: flex;
    flex-direction: row;
}

.documents-wrapper .document-body {
    width: 70%;
}

.documents-wrapper .sidebar-nav {
    width: 30%;
}

.goals-body {
    flex-direction: column;
}

.goals-body p {
    width: 100%;
}

.pagination {
    margin: 0;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
}

.pagination ul {
    display: flex;
    flex-direction: row;
}

.pagination span {
    padding: 0.5rem 0.75rem;
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-bottom-left-radius: 0.25rem;
    border-top-left-radius: 0.25rem;
}

.page-item:last-child .page-link {
    border-bottom-right-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.page-item.active .page-link {
    z-index: 2;
    color: #fff;
    background-color: #5276BA;
    border-color: #5276BA;
}

.page-item.disabled .page-link {
    color: #636c72;
    pointer-events: none;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
}

.page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #5276BA;
    background-color: #fff;
    border: 1px solid #ddd;
}

.page-link:focus, .page-link:hover {
    color: #014c8c;
    text-decoration: none;
    background-color: #eceeef;
    border-color: #ddd;
    transition: all 0.2s linear;
}

.vision {
    display: flex;
    flex-direction: row;
}

.vision-editable,
.vision-subtainable{
    padding: 0 1.0em;
}

.vision-editable {
    width: 40%;
}

.vision-subtainable {
    width: 60%;
}

.org-logos {
    display: flex;
    flex-wrap: wrap;
}

.org-logos li {
    margin: 0.5em;
}

.our-users {
    padding: 1em 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.our-users li {
    margin: 0;
    padding: 0;
}

.wp-cat-post {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid darkgray;
    margin-bottom: 15px;
}

.wp-cat-post .post-img {
    width: 10%;
    margin-right: 1.5em;
}

.wp-cat-post .post-details {
    width: 80%;
}

.wp-cat-post strong {
    display: block;
    margin-bottom: 10px;
}

.wp-cat-post .ws-post-date {
    display: block;
    margin: 5px 0 10px;
}

.featured-image .entry-container {
    position: absolute;
    top: 260px;
    left: 180px;
}

.featured-image h3 {
    color: #FFFFFF;
}

.info {
    display: flex;
    flex-direction: row;
}

.footer-wrapper {
    margin: 1.2em auto 0 auto;
}

.footer-wrapper .member-org-wrapper {
    margin: 0 auto;
    padding: 0.4em 0;
}

.footer-links-wrapper {
    background-color: #2E2E2E;
    color: #FFFFFF;
    margin: 0 auto;
    padding: 0.4em 0;
}

.footer-links {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.5em 0;
}

.footer-links section {
    width: 25%;
    text-align: center;
}

.footer-links h6 {
    color: #FFFFFF;
    padding-bottom: 10px;
}

.footer-svg {
    height: 30px;
    width: 30px;
}

.links a {
    color: #FFFFFF;
}

.links a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.social-links {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 0 90px;
}

.social-links li {
    padding: 0 0.5em;
}

.footer-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-logo img {
    width: 100%;
    margin-bottom: 0;
}

.footer-socket-wrapper .copyright {
    float: none;
    text-align: center;
    max-width: 100%;
}

.sustainable-goals {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.sustainable-goals a:hover {
    outline: none;
}

.un-goals img {
    height: 100px;
    width: 100px;
    margin-bottom: 0;
    position:relative;
    -webkit-backface-visibility: hidden;
}

.no-poverty {
    background-color: #C92230;
}

.zero-hunger {
    background-color: #C59E38;
}

.well-being {
    background-color: #5D9A4F;
}

.quality-ed {
    background-color: #A72436;
}

.gender-eq {
    background-color: #CF4230;
}

.sub-communities {
    background-color: #E39B35;
}

.clean-water {
    background-color: #61ACD7;
}

.clean-engery {
    background-color: #EBB631;
}

.work-economy {
    background-color: #7A1F3A;
}

.industry {
    background-color: #D76C2F;
}

.reduce-inequal {
    background-color: #C11A81;
}

.consump-prod {
    background-color: #BB8935;
}

.climate-action {
    background-color: #597644;
}

.life-water {
    background-color: #467CB9;
}

.life-earth {
    background-color: #6EAF52;
}

.peace {
    background-color: #315688;
}

.partnership {
    background-color: #283966;
}

.un-goals {
    background-color: #F4F4F4;
}

.tablepress thead th {
    background-color: #5276BA !important;
    opacity: 0.5;
    color: #FFFFFF;
}

.tablepress .sorting:hover, .tablepress .sorting_asc, .tablepress .sorting_desc {
    opacity: 1.0;
}

@media screen and (min-width: 300px) and (max-width: 329px) {
    .nav-container {
        z-index: 9999;
        position: relative;
    }

    .featured-image .entry-container {
        top: 97px;
        left: 40px;
        z-index: 1;
        max-width: 75%;
    }
}

@media screen and (min-width: 330px) and (max-width: 370px) {
    .nav-container {
        z-index: 9999;
        position: relative;
    }

    .featured-image .entry-container {
        top: 100px;
        left: 40px;
        z-index: 1;
        max-width: 75%;
    }
}

@media screen and (min-width: 371px) and (max-width: 422px) {
    .nav-container {
        z-index: 9999;
        position: relative;
    }

    .featured-image .entry-container {
        top: 110px;
        left: 40px;
        z-index: 1;
        max-width: 75%;
    }
}

@media screen and (min-width: 423px) and (max-width: 499px) {
    .nav-container {
        z-index: 9999;
        position: relative;
    }

    .featured-image .entry-container {
        top: 120px;
        left: 50px;
        z-index: 1;
        max-width: 75%;
    }
}

@media screen and (min-width: 421px) {
    #featured-slider .slider-title-head,
    #featured-slider .entry-title span {
        display: none;
        line-height: 0;
    }
}

@media screen and (min-width: 500px) and (max-width: 521px) {
    .nav-container {
        z-index: 9999;
        position: relative;
    }

    .featured-image .entry-container {
        top: 140px;
        left: 50px;
        z-index: 1;
        max-width: 75%;
    }
}


@media screen and (min-width: 522px) and (max-width: 550px) {
    .nav-container {
        z-index: 9999;
        position: relative;
    }
    .featured-image .entry-container {
        top: 150px;
        left: 50px;
        z-index: 1;
        max-width: 75%;
    }
}

@media screen and (min-width: 551px) and (max-width: 620px) {
    .nav-container {
        z-index: 9999;
        position: relative;
    }
    .featured-image .entry-container {
        top: 150px;
        left: 80px;
        z-index: 1;
        max-width: 75%;
    }
}

@media screen and (max-width: 675px) {
    #featured-slider .entry-container {
        max-width: inherit;
    }

    .home-page {
        flex-direction: column;
    }
}

@media screen and (min-width: 621px) and (max-width: 699px) {
    .nav-container {
        z-index: 9999;
        position: relative;
    }
    .featured-image .entry-container {
        top: 165px;
        left: 100px;
        z-index: 1;
        max-width: 75%;
    }
}

@media screen and (min-width: 700px) and (max-width: 800px) {
    .nav-container {
        z-index: 9999;
        position: relative;
    }

    .featured-image .entry-container {
        top: 180px;
        left: 100px;
        z-index: 1;
        max-width: 75%;
    }
}

@media screen and (min-width: 801px) and (max-width: 800px) {
    .featured-image .entry-container {
        top: 200px;
    }
}

@media screen and (min-width: 801px ) and (max-width: 916px) {
    .featured-image .entry-container {
        top: 200px;
    }
}

@media screen and (max-width: 900px) {
    .menu-toggle,
    .main-navigation.toggled .nav-menu {
        display: block;
    }

    .main-navigation ul {
        display: none;
    }

    .nav-container .inner-wrap {
        width: 100%;
    }

    .main-small-navigation {
        background-color: #5276BA;
        padding: 0;
        margin: 0;
    }

    .main-small-navigation ul > .current_page_item,
    .main-small-navigation ul > .current-menu-item {
        background-color: #FFFFFF;
    }

    .main-small-navigation ul > .current_page_item a,
    .main-small-navigation ul > .current-menu-item a {
        color: #5276BA;
    }

    .main-small-navigation li {
        background-color: #5276BA;
    }

    .main-small-navigation a {
        color: #FFFFFF;
    }

    ul.sub-menu li:hover {
        background-color: #FFFFFF;
    }

    .main-small-navigation li:hover {
        background-color: #FFFFFF;
    }

    .main-small-navigation li:hover a {
        color: #5276BA;
    }

    .home-page,
    .vision {
        flex-direction: column;
    }

    .home-page aside,
    .home-page .main-body,
    .sidebar-page .main-body,
    .vision-subtainable,
    .vision-editable {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .home-page .main-body,
    .vision-subtainable{
        order: 1;
    }

    .home-page aside,
    .vision-editable{
        order: 2;
    }

    .sidebar-page .side-menu {
        display: none;
    }
}

@media screen and (min-width: 917px ) and (max-width: 1023px) {
    #featured-slider .entry-container {
        max-width: 60%;
        top: 220px;
    }

    .featured-image .entry-container {
        top: 240px;
    }
}

@media screen and (max-width: 650px) {
    #featured-slider .entry-container {
        /*border: 5px solid red;*/
        max-width: 80%;
    }
}

@media screen and (min-width: 651px) and (max-width: 785px) {
    #featured-slider .entry-container {
        /*border: 5px solid yellow;*/
        max-width: 70%;
        top: 48%;
    }
}

@media screen and (min-width: 786px) and (max-width: 960px) {
    #featured-slider .entry-container {
        /*border: 5px solid green;*/
        max-width: 50%;
    }
}

@media screen and (max-width: 725px) {
    .social-links {
        margin: 0;
    }
}

@media screen and (min-width: 726px) and (max-width: 1015px) {
    .social-links {
        margin: 0 30px;
    }
}

@media screen and (min-width: 1016px) and (max-width: 1240px) {
    .social-links {
        margin: 0 60px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1299px) {
    .featured-image .entry-container {
        top: 240px;
    }
}

@media screen and (min-width: 961px) and (max-width: 1170px) {
    #featured-slider .entry-container {
        /*border: 5px solid red;*/
        top: 45%;
        max-width: 40%;
    }
}

@media screen and (max-width: 1200px) {
    .un-goals img {
        width: 100%;
        height: 100%;
    }
}

@media screen and (min-width: 1300px) and (max-width: 1399px) {
    .featured-image .entry-container {
        top: 250px;
    }
}

@media screen and (min-width: 1400px) and (max-width: 1499px) {
    .featured-image .entry-container {
        top: 260px;
    }
}

@media screen and (max-width: 1500px) {
    .featured-image .inner-wrap {
        max-width: none !important;
        width: 100% !important;
    }
}

@media screen and (min-width: 1501px) and (max-width: 1569px) {
    .featured-image .entry-container {
        left: 350px;
    }
}

@media screen and (min-width: 1570px) and (max-width: 1699px) {
    .featured-image .entry-container {
        left: 450px;
    }
}

@media screen and (min-width: 1700px) and (max-width: 1920px) {
    .featured-image .entry-container {
        left: 450px;
    }
}

@media screen and (min-width: 1921px) and (max-width: 2200px) {
    .featured-image .entry-container {
        left: 550px;
    }
}

@media screen and (min-width: 2201px) and (max-width: 2500px) {
    .featured-image .entry-container {
        left: 700px;
    }
}

@media screen and (min-width: 2501px) {
    .featured-image .inner-wrap {
        display: flex;
        flex-direction: column;
    }

    .featured-image .entry-container {
        position: relative;
        top: -64px;
        margin-bottom: -64px;
        left: 0;
        width: 100%;
        max-width: inherit;
    }
}