/* Gallery -START- */
.gallery{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
}
.gallery > h2{
    flex-basis: 100%;
    width: 100%;
    text-align: center;
    font-size: 40px;
    color:#80C342;
    margin-bottom: 3%;
}
.gallery > h2::before{
    content: "";
    background-image: url("../images/Aesthetic/fragments-left.png");
    background-size: contain;
    background-repeat: no-repeat;
    padding: 40px 102px;
    display: inline-block;
    position: relative;
    top: 20%;
    right: 2%;
}
.gallery > h2::after{
    content: "";
    background-image: url("../images/Aesthetic/fragments-left.png");
    background-size: contain;
    background-repeat: no-repeat;
    padding: 40px 102px;
    display: inline-block;
    position: relative;
    top: 20%;
    left: 3.2%;
}
.gallery img{
    width: 100%;
}
.gallery > img{
    padding: 0 5px 0 5px;
    margin-bottom: 10px;
    border-radius: .9rem;
}
@media screen and (min-width: 576px){
    .gallery{
        width: 80vw;
    }
    .gallery img{
        width: 50%;
    }
}
@media screen and (min-width: 1600px){
    .gallery img{
        width: 33%;
    }
}
/* Gallery -END- */

/* time lapse video -START- */
h2.title-one{
    flex-basis: 100%;
    font-size: 40px;
    text-align: center;
    color:#80C342;
    margin-bottom: 1.5%;
}
h2.title-one::before{
    content: "";
    background-image: url("../images/Aesthetic/fragments-left.png");
    background-size: contain;
    background-repeat: no-repeat;
    padding: 40px 102px;
    display: inline-block;
    position: relative;
    top: 20%;
    right: 2%;
}
h2.title-one::after{
    content: "";
    background-image: url("../images/Aesthetic/fragments-left.png");
    background-size: contain;
    background-repeat: no-repeat;
    padding: 40px 102px;
    display: inline-block;
    position: relative;
    top: 20%;
    left: 3.2%;
}
.vidBg{
    width: 100%;
    margin:0; 
    padding: 15px 0 15px 0;
    position: relative; 
    background-color: #313438; 
    border-radius: 1rem; 
    border-style: dashed; 
    border-color: #515152;
}

.mariTonton{
    padding: 0 2px 0 2px;
    height: calc(100vh - 100px)!important;
    width: 100%;
    max-height: calc(100vw * 0.514);
    object-fit: fill;
    border-radius: 0.7rem;
}
.Btn{
    left: 5px;
    top: 17px;
    z-index: 4;
    background-color: white;
    background-image: url(../images/Icon/mute.svg);
    background-repeat: no-repeat;
    opacity: 0.4;
    position: absolute;
    width: 30px;
    height: 26px;
    border-style: none;
    border-radius: 0.6rem;
}
.Btn.replay{
    left: 45%;
    top: 42%;
    z-index: 4;
    background-color: #d9d9d9;
    background-image: url(../images/Icon/replay.svg);
    background-repeat: no-repeat;
    opacity: 0.6;
    position: absolute;
    width: 6.3vw;
    height: 6.3vw;
    display: none;
}
/* time lapse video -END- */

/* About -START- */
section#About{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 25px auto 55px auto;
}
section#About div#aboutPara{
    flex-basis: 41%; 
    border-left: 2px groove rgb(97, 97, 97);
    border-right: 2px dashed rgb(97, 97, 97);
}
section#About p{
    text-align: justify;
    padding: 0 50px 0 10px;
}
section#About span#planetQEOS{
    font-weight: 600;
}
section#About span#connect{
    font-family: 'Ubuntu', sans-serif;
    font-style: italic;
    font-weight: 400;
}
section#About span#sun{
    font-family: 'Ubuntu', sans-serif;
    font-style: italic;
    font-weight: 400;
}   
section#About span#people{
    color : #0dbb47;
}
section#About span#power{
    color : #eea721;
}
section#About span#data{
    color : #00b0f0;
}
section#About div#aboutPic {
    flex-basis: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
    border-right: 2px groove rgb(97, 97, 97);
    margin-left: 50px;
    max-width: 547px;
}
section#About div#aboutPic img {
    width: 100%;
    border-radius: 0.5rem;
}
@media screen and (max-width: 780px) {
    section#About {
        margin-bottom: 20px;
    }
    section#About div#aboutPara{
        flex-basis: 91%; 
        border: none;
        order: 3;
        margin-top: 20px;
    }
    section#About p{
        text-align: justify;
        padding: 0;
    }
    section#About div#aboutPic {
        flex-basis: 95%;
        justify-content: center;
        padding: 0;
        border: none;
        margin: 0;
        max-width: 100%;
    }
    section#About div#aboutPic img {
        width: 100%;
        border: 4px solid #80C342;
        border-radius: 10px;
    }
}
@media screen and (min-width: 781px) and (max-width: 1367px) {
    section#About div#aboutPara{
        flex-basis: 90%; 
        border: none;
        order: 3;
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    section#About div#aboutPara p {
        flex-basis: 50%;
        padding: 0;
    }
    section#About div#aboutPara > p:nth-of-type(1) {
        padding-right: 20px;
    }
    section#About div#aboutPara > p:nth-of-type(2) {
        padding-left: 20px;
    }
    section#About div#aboutPic {
        flex-basis: 90%;
        justify-content: center;
        padding: 0;
        border: none;
        margin: 0;
        max-width: 100%;
    }
    section#About div#aboutPic img {
        width: 100%;
        border: 4px solid #80C342;
        border-radius: 10px;
    }
}
/* About -END- */

/* Behind The Scenes -START- */
#BehindTheScene{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto 35px auto;
}
#BehindTheScene > div:nth-of-type(n+2){
    width: 21.5%;
    margin: 3px;
    padding: 6px 12px 12px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    border-radius: 15px;
}
#BehindTheScene > div:nth-of-type(n+2) > img{
    height: 100px;
    flex-basis: 100%;
    object-fit: contain;
}
#BehindTheScene > div:nth-of-type(n+2) > h3{
    flex-basis: 100%;
    height: 5ex;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#BehindTheScene > div:nth-of-type(n+2) > hr{
    flex-basis: 100%;
    height: 1ex;
    align-self: center;
}
#BehindTheScene > div:nth-of-type(n+2) > p{
    flex-basis: 100%;
    text-align: justify;
}
#BehindTheScene > div:nth-of-type(2){
    background-color: rgb(140, 245, 130);
}
#BehindTheScene > div:nth-of-type(3){
    background-color: #94d2eb;
}
#BehindTheScene > div:nth-of-type(4){
    background-color:#F0E68C;
}
#BehindTheScene > div:nth-of-type(5){
    background-color: #FF69B4;
}
@media screen and (max-width: 780px) {
    #BehindTheScene{
        margin: 0 auto 30px auto;
    }
    #BehindTheScene > div:nth-of-type(n+2){
        flex-basis: 90%;
        border-radius: 8px;
    }
}
@media screen and (min-width: 600px) and (max-width: 1200px) {
    #BehindTheScene > div:nth-of-type(n+2){
        flex-basis: 45%;
    }
}
/* Behind The Scenes -END- */

/* Application Fields -START- */
section#appField{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: url("../images/Gallery/BG2.3.jpg");
    background-size: contain;
    padding-bottom: 10px;
    margin-bottom: 30px;
}
section#appField span#sun{
    font-family: 'Ubuntu', sans-serif;
    font-style: italic;
    font-weight: 400;
}
section#appField span#eff{
    color: #6495ED;
}
section#appField span#sus{
    color: #3CB371;
}
section#appField span#avai{
    color: #9932CC;
}
section#appField div#para{
    flex-basis: 81%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
section#appField p{
    text-align: justify;
}
section#appField > div:nth-of-type(n+3){
    width: calc(37.6vw);
    height: calc(20.84vw);
    padding: 5px;
    margin: 6px 7px;
    border: 5px solid #80C342;
    border-radius: 30px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-clip:  content-box;
}
section#appField > div:nth-of-type(n+3) > div.overlay {
    position: absolute;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    padding: 5px;
    border: 5px solid transparent;
    border-radius: 30px;
    background-clip: content-box;
    background-color: #80C342;;
    z-index: 2;
    opacity: 0;
    transition: .15s linear;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
section#appField > div:nth-of-type(n+3) > div.overlay:hover {
    opacity: 1;
}
section#appField > div:nth-of-type(n+3) > div.overlay > h3.bg {
    position: absolute;
    background-color: white;
    color: white;
    opacity: 1;
    padding: 0 4px 0 4px;
    border-radius: 10px;
    margin: 0;
    text-align: center;
}
section#appField > div:nth-of-type(n+3) > div.overlay > h3:not(.bg) {
    position: absolute;
    color: rgb(68, 67, 67);
    z-index: 1;
    margin: 0;
    text-align: center;
}
section#appField > div:nth-of-type(3) {
    background-image: url("../images/Gallery/Header-VF.JPG");
}
section#appField > div:nth-of-type(4) {
    background-image: url("../images/Gallery/Header-RD.JPG");
}
section#appField > div:nth-of-type(5) {
    background-image: url("../images/Gallery/Header-RA2.jpg");
}
section#appField > div:nth-of-type(6) {
    background-image: url("../images/Gallery/Header-GH.JPG");
}
section#appField > div:nth-of-type(n+3) h3.bg {
    position: absolute;
    background-color: white;
    color: white;
    opacity: 0.45;
    padding: 0 4px 0 4px;
    border-radius: 10px;
    margin: 0;
    text-align: center;
}
section#appField > div:nth-of-type(n+3) h3:not(.bg) {
    position: absolute;
    color: rgb(68, 67, 67);
    z-index: 1;
    margin: 0;
    text-align: center;
}
@media screen and (max-width: 520px) {
    section#appField h3 {
        font-size: 22px;
    }
}
@media screen and (max-width: 780px) {
    section#appField div#para{
        flex-basis: 90%;
    }
    section#appField > div:nth-of-type(n+3){
        width: calc(80vw);
        height: calc(44.35vw);
    }
}
@media screen and (min-width: 781px) and (max-width: 1367px) {
    section#appField div#para{
        flex-basis: 90%;
    }
    section#appField > div:nth-of-type(n+3){
        width: calc(43vw);
        height: calc(23.85vw);
    }
}
/* Application Fields -END- */