/* greek-ext */
@font-face {
    font-family: 'Roboto Slab';
    font-display: auto;
    font-style: normal;
    font-weight: 300;
    src: url(Fonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf);
}

*{
    margin: 0;
    padding: 0;
    
}

p{
    font-size: 1.5rem;
}
.bg-main{
    background-color: #141419;
}

.bg-c1{
    background-color: #212128;
}

.of-cover{
    object-fit: cover;
}

.of-contain{
    object-fit: contain;
}

.grid{
    display: grid;
    grid-auto-flow: column;
}

.hover-transparent:hover{
    opacity: 0.5;
}

.centered{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.navbar-nav{
    
}

.page-banner{
    width: 100%;
    height: 45vh;
    margin-bottom: 3%;
}

.panel{
    position: relative;
    display: inline-flex;
    justify-content: center;
    margin-bottom: 3%;
    border-top: solid grey 1px;
    border-bottom: solid grey 1px;
    width: 100%;
    height: 400px;
}

.panel-inner{
    position: absolute;
    height: 100%;
    display: flex;
    padding: 2% 0%;
    grid-gap: 2%;
}
.panel-image{
    border: solid white thin;
    border-radius: 10px;
    width: 400px;
    filter: drop-shadow(0px 0px 15px white);
}
.panel-text-area{
    display: flex;
    width: 100%;
    height: 100%;
    justify-items: center;
    filter: drop-shadow(0px 0px 5px black);
    max-height: 100%;
    flex-flow: column;
}

.panel-text-area p{
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.panel-text-area a{
    margin: auto auto;
}

.frame-sm{
    width: 800px; height: calc(800px * 0.5625);
    
}

.grid-container{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    width: 100%;
    justify-content: center;
}

.grid-item{
    max-width: 100%;
    max-height: auto;
    margin: 3% 3%;
    border: solid transparent;
    transition: margin 0.5s ease;
}
.grid-item:hover{
    cursor: pointer;
    border: solid white;
    margin: 1% 1%;
}


.about-section-inner{
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 1400px){ /* EXTRA LARGE SCREENS, TV */
    .frame-sm{width: 700px; height: calc(700px*0.5625);}
}
@media only screen and (max-width: 1200px){ /* EXTRA LARGE SCREENS, TV */
    .frame-sm{width: 600px; height: calc(600px*0.5625);}
}

@media only screen and (min-width: 1025px) and (max-width: 1200px){ /* DESKTOPS, LARGE SCREENS */
    .frame-sm{width: 560px; height: calc(560px*0.5625);}
}

@media only screen and (min-width: 769px) and (max-width: 1024px){ /* SMALL SCREENS, LAPTOPS */
    .frame-sm{width: 530px; height: calc(530px*0.5625);}
}

@media only screen and (min-width: 481px) and (max-width: 768px){ /* IPADS, TABLETS */
    .frame-sm{width: 100vw; height: calc(100vw*0.5625);}
}

@media only screen and (min-width: 320px) and (max-width: 567px){ /* MOBILE DEVICES */
    .frame-sm{width: 100vw; height: calc(100vw*0.5625);}
}

@media only screen and (max-width: 991px){
    .nav-divider{
        display: none;
    }
}

@media only screen and (max-width: 767px){
    .about-section-inner{
        display: grid;
        justify-content: center;
        text-align: center;
    }
    .panel{
        margin-bottom: 10%;
        border-top: solid grey 1px;
        border-bottom: solid grey 1px;
        width: 100%;
        height: 650px;
    }
    .panel-inner{
        display: flex;
        flex-flow: column;
        height: 100%;
        width: 85%;
        padding: 0% 0%;
        grid-gap: 0px;
    }
    .panel-image-wrapper{
        margin: 5% auto;
        width: 85vw;
        height: 63.75vw;
    }
    .panel-image{
        border: solid grey thin;
        border-radius: 10px;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .panel-text-area{
        flex-flow: column;
    }
    .panel-text-area p{
        -webkit-line-clamp: 6;
    }
    
    .page-banner{
        width: 100%;
        height: 20vh;
    }
}