/* ==========================================================================

  custom-people-process-tools-nav.css
  
  This stylesheet styles the custom module `People + Process + Tools - Nav`

/* ========================================================================== */




.ppt-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.ppt-nav-anchor {
    width: 34%;
    color: #BEC5C9;
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 58px;
    font-weight: 300;
    text-decoration: none;
    position: relative;
}
.ppt-nav-anchor:hover,
.ppt-nav-anchor:active,
.ppt-nav-anchor:focus {
    text-shadow: 0px 3px 30px rgba(0, 0, 0, 1);
    color: #9AB7E8;
    
-webkit-transition: color 0.8s ease;
-moz-transition: color 0.8s ease;
-o-transition: color 0.8s ease;
-ms-transition: color 0.8s ease;
transition: color 0.8s ease;
;
}

.ppt-nav-anchor--people {
    background-image: url(/hubfs/people-process-tools/ppt-people.jpg);
}

.ppt-nav-anchor--process {
    background-image: url(/hubfs/people-process-tools/ppt-process.jpg);
}

.ppt-nav-anchor--tools {
    background-image: url(/hubfs/people-process-tools/ppt-tools.jpg);
}


.ppt-nav-opacity {
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    width: 100%;
    height: 100%;
    opacity: 0.4;
}
.ppt-nav-anchor:hover .ppt-nav-opacity {
    opacity: 0.6;
    
-webkit-transition: opacity 0.8s ease;
-moz-transition: opacity 0.8s ease;
-o-transition: opacity 0.8s ease;
-ms-transition: opacity 0.8s ease;
transition: opacity 0.8s ease;
;
}

.ppt-nav-label {
    z-index: 1;
}

@media (max-width: 768px) {
    .ppt-nav-anchor {
        font-size: 38px; 
        height: 200px;
    }

}

@media (max-width: 480px) {
    .ppt-nav-anchor {
        font-size: 22px; 
        height: 80px;
    }
}

/*-------------------------- Styles for the active box  -----------------------*/

.ppt-nav .ppt-nav-anchor:before {
    position: absolute;
    right: calc(50% - 15px);
    top: 0;
    content: "";
    border-style: solid;
    display: block;
    height: 0;
    width: 0;
    border-width: 15px 15px 0 15px;
    border-color: transparent;
}

.custom-people .ppt-nav .ppt-nav-anchor.ppt-nav-active-people .ppt-nav-opacity,
.custom-process .ppt-nav .ppt-nav-anchor.ppt-nav-active-process .ppt-nav-opacity, 
.custom-tools .ppt-nav .ppt-nav-anchor.ppt-nav-active-tools .ppt-nav-opacity {
    background-color: white;
    opacity: 0.7;
    
}

.custom-people .ppt-nav .ppt-nav-anchor.ppt-nav-active-people .ppt-nav-label,
.custom-process .ppt-nav .ppt-nav-anchor.ppt-nav-active-process .ppt-nav-label, 
.custom-tools .ppt-nav .ppt-nav-anchor.ppt-nav-active-tools .ppt-nav-label {
    color: black;
}

.custom-people .ppt-nav .ppt-nav-anchor.ppt-nav-active-people:before,
.custom-process .ppt-nav .ppt-nav-anchor.ppt-nav-active-process:before,
.custom-tools .ppt-nav .ppt-nav-anchor.ppt-nav-active-tools:before {
    border-color: #ffffff transparent;
}

@media (max-width: 480px) {
    .ppt-nav .ppt-nav-anchor:before {
        border-width: 10px 10px 0 10px;
    }

}

/*---------------- Overwrites the hover state of the active box ----------------*/

.custom-people .ppt-nav .ppt-nav-anchor.ppt-nav-active-people:hover,
.custom-process .ppt-nav .ppt-nav-anchor.ppt-nav-active-process:hover,
.custom-tools .ppt-nav .ppt-nav-anchor.ppt-nav-active-tools:hover {
    text-shadow: none;
    color: #BEC5C9;
    cursor: default;
}
/*
.custom-people .ppt-nav .ppt-nav-anchor.ppt-nav-active-people:hover .ppt-nav-opacity,
.custom-process .ppt-nav .ppt-nav-anchor.ppt-nav-active-process:hover .ppt-nav-opacity,
.custom-tools .ppt-nav .ppt-nav-anchor.ppt-nav-active-tools:hover .ppt-nav-opacity {
    opacity: 0;
}*/