/* khusus untuk mengatasi error di div.webinar dan div.lomba
TAMBAH KEKUATAN SPESIFIKASI TAG
*/
.detail-global h2 {font-size: 2.2em;}
.box-competition h1,
.box-competition h2,
.box-competition h3,
.box-competition h4,
.box-competition {color: #fff; text-align: center;}
.box-competition h3 {font-size: 26px; font-weight: 600; color: #fff;}

.detail-global .box-competition h2 {z-index: 30;}



.web {
    width: 100%;
    display: flex;
    position: relative; 
    padding: 30px;
    box-sizing: border-box;
    border-radius: 15px;

    /* margin-top: 35px;
    
    padding: 25px;
    box-sizing: border-box; */
}
.web-detail {width: 60%;}
.web-detail .text {padding-top: 30px; padding-right: 30px}
.web-detail .text h2 {font-size: 3em; text-align: center;}
.web-detail .text h3 {font-size: 2em; margin-bottom: 30px;}
.web-detail .text h4 {font-size: 1.5em;}
.web-detail .text h5 {font-size: 1.2em; margin-top:25px; margin-bottom: 25px; text-transform: small-caps; font-weight: 500;}
.web-pamflet {width: 40%;}
.web-pamflet img {
    width: 100%;
}
.web-detail .btn-webinar input {
    width: 50%;
    padding: 20px;
    margin: 10px;
    border-radius: 20px;
    font-size: 16px;
    color:#fff;
    background-color: #5561ff;
    font-weight: 600;
    border: none;
    
}
.web-detail .btn-webinar input:hover {
    background-color: hsl(47, 100%, 69%) ;
    color: #000;
}
.btn-webinar {width: 100%; display: flex; position: relative;}

.web h2 {font-size: 2em;}
.web h3 {font-size: 1.5em;}
.web h4 {font-size: 1.2em; text-align: center;}
.art, .sport, .lkti, .gen {height:350px; position: relative;}
.art, .sport, .lkti, .gen {
    width: 100%;
    margin-top: 35px;
    border-radius: 15px;
    padding: 25px;
    box-sizing: border-box;
}
.box-competition .web {
    background: #200122;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #6f0000, #200122);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #6f0000, #200122); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.box-competition .art {
    background: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114)); 
}
.box-competition .sport {
    background: linear-gradient(90deg, #a0cea7, #cfecd0);    
}
.box-competition .lkti {
    background: linear-gradient(90deg, #fab397, #faf0cd);  
}
.box-competition .gen {
    background: linear-gradient(90deg, #69b7eb, #b3dbd3);
}
.art .maskot, .sport .maskot, .lkti .maskot, .gen .maskot {
    position: absolute;
    width: 320px;
    height: 65%;
    right: 5px;
    top: 55px;
    bottom: 30px;
    background-size: cover;
    background-position: center center;
}

.btn-comp {
    display: flex;
    width: 100px;
    height: 40px;
    background-color: #69b7eb;
    position: absolute;
    bottom: 8px;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    font-weight: 500;
}

.art .maskot {background-image: url(../img/maskot/merah.png);}
.sport .maskot {background-image: url(../img/maskot/hijau.png);}
.lkti .maskot {background-image: url(../img/maskot/kuning.png);}
.gen .maskot {background-image: url(../img/maskot/biru.png);}

@media screen and (max-width: 992px) {
    
    .web {
        width: 100%;
        display: flex;
       
        padding: 30px;
        box-sizing: border-box;
        border-radius: 15px;

        /* margin-top: 35px;
        
        padding: 25px;
        box-sizing: border-box; */
    }
    .web-detail {width: 65%;}
    .web-detail .text {padding-top: 30px; padding-right: 30px}
    .web-detail .text h2 {font-size: 2.8em; text-align: center;}
    .web-detail .text h3 {font-size: 1.5em; margin-bottom: 30px;}
    .web-detail .text h4 {font-size: 1.3em;}
    .web-detail .text h5 {font-size: 1em; margin-top:25px; margin-bottom: 25px; text-transform: small-caps; font-weight: 500;}
    .web-pamflet {width: 35%;}
    .web-pamflet img {
        width: 100%;
    }
    .web-detail .btn-webinar input {
        width: 50%;
        padding: 20px;
        margin: 10px;
        border-radius: 20px;
        font-size: 16px;
        color:#fff;
        background-color: #5561ff;
        font-weight: 600;
        border: none;
    }
    .web-detail .btn-webinar input:hover {
        background-color: hsl(47, 100%, 69%) ;
        color: #000;
    }
    .btn-webinar {width: 100%; display: flex; position: relative;}

    .web h2 {font-size: 2em;}
    .web h3 {font-size: 1.5em;}
    .web h4 {font-size: 1.2em; text-align: center;}
        
}
@media (max-width: 768px) {
    .web, .art, .sport, .lkti, .gen {height: 400px;}
    .art .maskot, .sport .maskot, .lkti .maskot, .gen .maskot {
        position: absolute;
        width: 320px;
        height: 60%;
        right: 1px;
        top : 90px;
        bottom: 20px;
        background-size: cover;
        background-position: center center;
    }
    .web {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 12px;
        box-sizing: border-box;
        border-radius: 15px;
        height: max-content;
    }
    .web-detail {
        width: 100%;
    }
    .web-pamflet {
        width: 100%;
    }
    .web-detail .text {padding-top: 30px; padding-right: 0px;}
    .btn-webinar {
        width: 100%; padding: 5px; box-sizing: border-box; margin-bottom: 25px;
    }
    .web-detail .btn-webinar input {
        width: 50%;
        margin: 5px;
        padding: 10px;
        border-radius: 20px;
        font-size: 16px;
        color:#fff;
        background-color: #5561ff;
        font-weight: 600;
        border: none;
        box-sizing: border-box;
    }

    .web-detail .text {padding-top: 30px; padding-right: 0px}
    .web-detail .text h2 {font-size: 2em; text-align: center;}
    .web-detail .text h3 {font-size: 1.5em; margin-bottom: 30px;}
    .web-detail .text h4 {font-size: 1.3em;}
    .web-detail .text h5 {font-size: 1em; margin-top:25px; margin-bottom: 25px; text-transform: small-caps; font-weight: 500;}
    
}