/* resources */
    
    /* Font styles

    font-family: 'Barlow Condensed', sans-serif;
    font-family: 'Average Sans', sans-serif;

    */

    /* Colors
    
    ==== Font Colors ==================
            heavy font color:   #404040
            light font color:   #808080
    ===================================

    ==== Section Colors ===============
            Background:         #ffffff
            Jumbotron:          #f1f4f5
            Footer:             #2d2d30
    ===================================

    ==== Accessorie Colors ============
            button color:       #ef5f60
    ==================================
   
    */


/* 
====================
=== Global Style ===
====================
*/


body {
    font-family: 'Barlow Condensed', sans-serif;
    color: #808080;
}

h3 em {
    color: #ef5f60;
}

h3 {
    text-transform: uppercase;
    color: #404040;
}
/* 
====================
=== Header style ===
====================
*/

nav, nav ul li a {
    font-family: 'Barlow Condensed', sans-serif;
    color: #404040;
    font-weight: 500;
    text-transform: uppercase;
    background-color: #ffffff;
}
nav ul li a:hover {
    color: #808080;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#32404040' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
  
.navbar-toggler {
    border-color: #32404040;
} 

/* 
=====================
=== Welcome Style ===
=====================
*/

.jumbotron h1 {
    color: #404040;
    font-family: 'Barlow Condensed', sans-serif;
}

.jumbotron {
    border-radius: 0;
}
/* 
=======================
=== Portfolio Style ===
=======================
*/

    /* =====================
    === Filter Option ===
    ===================== */
        .portfolio-filter {
            font-family: 'Barlow Condensed', sans-serif;
            padding: 10px 0;
        }

        .portfolio-filter button {
            background-color: #ef5f60;
            color: #ffffff;
            border-radius: 0;
            width: 158px;
        }

        .dropdown-menu {
            border-radius: 0;
            cursor: pointer;
        }

        .dropdown-menu .dropdown-item:active {
            background: #808080;
            color: #ffffff !important;
        }

        .dropdown-menu .active {
            background: #ef5f60;
            color: #ffffff !important;
        }

    /* =========================
    === Portfolio Gallery ===
    ========================= */

        .portfolio-container {
            padding: 10px 0 50px;
        }

        .portfolio-container .img-fluid {
            height: 100%;
            padding: 5px;
            transition: .5s;
        }

        .portfolio-container .img-fluid:hover {
            padding: 0px;
            box-shadow: 10px 10px 5px;
            cursor: pointer;
        }

    /* ======================
    === Lightbox modal ===
    ====================== */
    
        #lightbox-modal {
            background-color: #000000;
            height: 100%;
            width: 100%;
            z-index: 1;
            top: 0;
            left: 0;
            position: fixed;
        }

        #lightbox-modal .close-button {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 30px;
            font-weight: 700;
            cursor: pointer;
            box-sizing: border-box;
            height: 50px;
            width: 50px ;
            border-radius: 50%;
            margin: auto;
        }

        .next:hover, .prev:hover,.close-button:hover {
            background: radial-gradient(#808080, transparent, transparent);
            color: #ffffff !important;
        }

        .next, .prev {
            position: absolute;
            top: 50%;
            font-size: 30px;
            margin-top: -10px;
            cursor: pointer;
            box-sizing: border-box;
            height: 50px;
            width: 50px;
            border-radius: 50%;
        }

        .next {
            right: 20px;
        }

        .display-none {
            display: none;
        }

        .lightbox-content {
            height: 100%;
            width: 100%;
        }

        .lightbox-content img {
            position: absolute;
            box-sizing: border-box;
            height: auto;
            width: auto;
            max-height: 90%;
            max-width: 90%;
            padding: 10px;
            margin: 0 10px 0 15px;
        }

    /* ======================
    === Recruit button ===
    ====================== */

        .recruit-container {
            padding: 10px 0;
            font-family: 'Barlow Condensed', sans-serif;
            
        }

        .recruit-container h3 {
            color: #404040;
            text-transform: uppercase;
        }

        .recruit-container button {
            color: #ffffff;
            background-color: #ef5f60;
            border-radius: 0;    
        }
    
/* 
======================
=== Services Style ===
======================
*/

.services-container {
    padding: 10px 0;
    font-family: 'Barlow Condensed', sans-serif;
    min-height: 500px;
}

.services-container h3 {
    color: #404040;
    padding: 0;
    text-transform: uppercase;
}

.services-container .row {
    padding: 50px 10px;
}

.services-container .services-logo-container {
    background-color: #f1f4f5;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    transition: 1s;
}

.services-container h4 {
    padding: 20px 0 0 0;
    color: #404040;
}

.logo-container:hover .services-logo-container {
    width: 150px;
    height: 150px;
    box-shadow: 3px 3px 5px #404040;
}

.logo-container:hover img, {
    width: 100px;
    height: 100px;
}

.logo-container:hover h4 {
    font-weight: bold;
}

/* 
=====================
=== Journal Style ===
=====================
*/

.journal-container {
    padding: 10px 0px;
}

.journal-container .row {
    padding: 30px 0;
}

.journal-container img {
    padding: 10px;
}

.journal-entry-container {
    padding: 0 0 10px;
}

.date-published {
    text-transform: uppercase;
}
.journal-container h6 {
    color: #404040;
    text-transform: uppercase;
}

.journal-entry-container:hover {
    cursor: pointer;
    box-shadow: 1px 1px 1px;
}

/* 
====================
=== Footer Style ===
====================
*/

.footer-container {
    background-color: #2d2d30;
}

.footer-container img {
    padding: 0 2px;
}

.footer-content {
    padding: 20px 0;
}