/* 
PT. Circlecom Nusantara Indonesia

Indonesia Stock Exchange Bldg, Tower 2, 28th #2804 Floor, Jl. Jend. Sudirman Kav. 52-53, RT.5/RW.3, Senayan, Kec. Kby. Baru, Jakarta, Daerah Khusus Ibukota Jakarta 12190

Author Website : Magioti(NS), Zhomed(NS), Rendy(NS), Zaenal(NS) 
*/


:root {
    --text-color : #545454;
    --first-color : #F4C10D;
    --second-color : #F26722;
    --third-color : rgba(244, 193, 13, 0.1);
    --fourth-color : rgba(244, 106, 13, 0.1);
    }

body{
    height: 100vh;
}

/* 1400 */
@media screen and (min-width:1400px) {
    body{
        background: linear-gradient(90deg, rgba(244, 106, 13, 0.1) 50.96%, rgba(244, 193, 13, 0.1) 114.65%);
    }
    
    .logo-circleone{
        margin-top: 20px;
    }
    
    .logo-circleone img{
        width: 200px;
    }
    
    .logo-kominfo{
        margin-top: 20px;
    }
    
    .logo-kominfo img{
        height: 90px;
    }
    
    .logo-Internet-positif img{
        width: 200px;
        margin-top: 32px;
    }
    
    #head {
        height: 500px;
        margin-top: 25px;
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 70px;
        background : linear-gradient(90deg, var(--first-color), var(--second-color));
        color: #fff;
        font-weight: 400;
        border-radius: 20px;
    }
    
    .pembuka{
        margin-top: 95px;
        margin-bottom: 20px;
        font-size: 40px;
        height: 300px;
        color: white;
        padding-left: 20px;
        padding-top: 30px;
        text-align: right;
    }
    
    .isi{
        margin-top: 50px;
        margin-bottom: 30px;
        font-size: 24px;
        padding-top: 20px ;
        padding-right: 5px;
        padding-left: 10px;
    }
    
    footer{
        margin-bottom: 40px;
        font-size: 18px;
        color: #545454;
    }
    
    .img-stop img{
        margin-top: 30px;
        width: 320px;
    }
    
    .situs-terlarang{
        color: red;
        font-weight: 500;
        font-size: 40px;
    } 
    
    .Inggris{
        margin-top: 70px;
        font-size: 24px;
    } 
}

/* 1200 */
@media screen and (min-width:1200px) and (max-width:1400px) {
    body{
        background: linear-gradient(90deg, rgba(244, 106, 13, 0.1) 50.96%, rgba(244, 193, 13, 0.1) 114.65%);
    }
    
    .logo-circleone{
        margin-top: 20px;
    }
    
    .logo-circleone img{
        width: 200px;
    }
    
    .logo-kominfo{
        margin-top: 20px;
    }
    
    .logo-kominfo img{
        height: 90px;
    }
    
    .logo-Internet-positif img{
        width: 200px;
        margin-top: 32px;
    }
    
    #head {
        height: 450px;
        margin-top: 25px;
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 70px;
        background : linear-gradient(90deg, var(--first-color), var(--second-color));
        color: #fff;
        font-weight: 400;
        border-radius: 20px;
    }
    
    .pembuka{
        margin-top: 100px;
        margin-bottom: 20px;
        font-size: 32px;
        height: 300px;
        color: white;
        padding-left: 20px;
        padding-top: 30px;
        text-align: right;
    }
    
    .isi{
        margin-top: 45px;
        margin-bottom: 20px;
        font-size: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    footer{
        margin-bottom: 40px;
        font-size: 18px;
        color: #545454;
    }
    
    .img-stop img{
        margin-top: 50px;
        width: 270px;
    }
    
    .situs-terlarang{
        color: red;
        font-weight: 500;
        font-size: 36px;
    } 
    
    .Inggris{
        margin-top: 75px;
        font-size: 20px;
    } 
}

/* 1100 */
@media screen and (min-width:1100px) and (max-width:1200px) {
    body{
        background: linear-gradient(90deg, rgba(244, 106, 13, 0.1) 50.96%, rgba(244, 193, 13, 0.1) 114.65%);
    }
    
    .logo-circleone{
        margin-top: 20px;
    }
    
    .logo-circleone img{
        width: 200px;
    }
    
    .logo-kominfo{
        margin-top: 20px;
    }
    
    .logo-kominfo img{
        height: 90px;
    }
    
    .logo-Internet-positif img{
        width: 200px;
        margin-top: 32px;
    }
    
    #head {
        height: 420px;
        margin-top: 25px;
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 70px;
        background : linear-gradient(90deg, var(--first-color), var(--second-color));
        color: #fff;
        font-weight: 400;
        border-radius: 20px;
    }
    
    .pembuka{
        margin-top: 65px;
        margin-bottom: 20px;
        font-size: 32px;
        height: 300px;
        color: white;
        padding-left: 20px;
        padding-top: 30px;
        text-align: right;
    }
    
    .isi{
        margin-top: 40px;
        margin-bottom: 20px;
        font-size: 18px;
        padding-left: 20px;
    }
    
    footer{
        margin-bottom: 40px;
        font-size: 18px;
        color: #545454;
    }
    
    .img-stop img{
        margin-top: 40px;
        width: 270px;
    }
    
    .situs-terlarang{
        color: red;
        font-weight: 500;
        font-size: 32px;
    } 
    
    .Inggris{
        margin-top: 70px;
    } 
}

/* 1060 */
@media screen and (min-width:1060px) and (max-width:1100px) {
    body{
        background: linear-gradient(90deg, rgba(244, 106, 13, 0.1) 50.96%, rgba(244, 193, 13, 0.1) 114.65%);
    }
    
    .logo-circleone{
        margin-top: 20px;
    }
    
    .logo-circleone img{
        width: 200px;
    }
    
    .logo-kominfo{
        margin-top: 20px;
    }
    
    .logo-kominfo img{
        height: 90px;
    }
    
    .logo-Internet-positif img{
        width: 200px;
        margin-top: 32px;
    }
    
    #head {
        height: 420px;
        margin-top: 25px;
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 70px;
        background : linear-gradient(90deg, var(--first-color), var(--second-color));
        color: #fff;
        font-weight: 400;
        border-radius: 20px;
    }
    
    .pembuka{
        margin-top: 50px;
        margin-bottom: 20px;
        font-size: 35px;
        height: 300px;
        color: white;
        padding-left: 20px;
        padding-top: 30px;
        text-align: right;
    }
    
    .isi{
        margin-top: 45px;
        margin-bottom: 20px;
        font-size: 18px;
        padding-left: 15px;
    }
    
    footer{
        margin-bottom: 40px;
        font-size: 18px;
        color: #545454;
    }
    
    .img-stop img{
        margin-top: 40px;
        width: 280px;
    }
    
    .situs-terlarang{
        color: red;
        font-weight: 500;
        font-size: 35px;
    } 
    
    .Inggris{
        margin-top: 75px;
        font-size: 22px;
    } 
}


/* 1000 */
@media screen and (min-width:1000px) and (max-width:1060px){
    body{
        background: linear-gradient(90deg, rgba(244, 106, 13, 0.1) 50.96%, rgba(244, 193, 13, 0.1) 114.65%);
    }
    
    .logo-circleone{
        margin-top: 20px;
    }
    
    .logo-circleone img{
        width: 200px;
    }
    
    .logo-kominfo{
        margin-top: 20px;
    }
    
    .logo-kominfo img{
        height: 90px;
    }
    
    .logo-Internet-positif img{
        width: 200px;
        margin-top: 32px;
    }
    
    #head {
        height: 400px;
        margin-top: 25px;
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 70px;
        background : linear-gradient(90deg, var(--first-color), var(--second-color));
        color: #fff;
        font-weight: 400;
        border-radius: 20px;
    }
    
    .pembuka{
        margin-top: 70px;
        margin-bottom: 20px;
        font-size: 30px;
        height: 300px;
        color: white;
        padding-left: 20px;
        padding-top: 30px;
        text-align: right;
    }
    
    .isi{
        margin-top: 50px;
        margin-bottom: 20px;
        font-size: 17px;
        padding-left: 15px;
        padding-right: 10px;
    }
    
    footer{
        margin-bottom: 40px;
        font-size: 18px;
        color: #545454;
    }
    
    .img-stop img{
        margin-top: 30px;
        width: 270px;
    }
    
    .situs-terlarang{
        color: red;
        font-weight: 500;
        font-size: 30px;
    } 
    
    .Inggris{
        margin-top: 70px;
    } 
}

/* 900 */
@media screen and (min-width:900px) and (max-width:1000px) {
    body{
        background: linear-gradient(90deg, rgba(244, 106, 13, 0.1) 50.96%, rgba(244, 193, 13, 0.1) 114.65%);
    }
    
    .logo-circleone{
        margin-top: 20px;
    }
    
    .logo-circleone img{
        width: 200px;
    }
    
    .logo-kominfo{
        margin-top: 20px;
    }
    
    .logo-kominfo img{
        height: 90px;
    }
    
    .logo-Internet-positif img{
        width: 200px;
        margin-top: 32px;
    }
    
    #head {
        height: 360px;
        margin-top: 25px;
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 70px;
        background : linear-gradient(90deg, var(--first-color), var(--second-color));
        color: #fff;
        font-weight: 400;
        border-radius: 20px;
    }
    
    .pembuka{
        margin-top: 60px;
        margin-bottom: 20px;
        font-size: 24px;
        height: 300px;
        color: white;
        padding-left: 20px;
        padding-top: 30px;
        text-align: right;
    }
    
    .isi{
        margin-top: 50px;
        margin-bottom: 20px;
        font-size: 14px;
        padding-left: 20px;
    }
    
    footer{
        margin-bottom: 40px;
        font-size: 18px;
        color: #545454;
    }
    
    .img-stop img{
        margin-top: 30px;
        width: 250px;
    }
    
    .situs-terlarang{
        color: red;
        font-weight: 500;
        font-size: 24px;
    } 
    
    .Inggris{
        margin-top: 70px;
    } 
}

/* 800 */
@media screen and (min-width:800px) and (max-width:900px) {
    body{
        background: linear-gradient(90deg, rgba(244, 106, 13, 0.1) 50.96%, rgba(244, 193, 13, 0.1) 114.65%);
    }
    
    .logo-circleone{
        margin-top: 20px;
    }
    
    .logo-circleone img{
        width: 200px;
    }
    
    .logo-kominfo{
        margin-top: 20px;
    }
    
    .logo-kominfo img{
        height: 90px;
    }
    
    .logo-Internet-positif img{
        width: 200px;
        margin-top: 32px;
    }
    
    #head {
        height: 360px;
        margin-top: 25px;
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 70px;
        background : linear-gradient(90deg, var(--first-color), var(--second-color));
        color: #fff;
        font-weight: 400;
        border-radius: 20px;
    }
    
    .pembuka{
        margin-top: 70px;
        margin-bottom: 20px;
        font-size: 24px;
        height: 300px;
        color: white;
        padding-left: 20px;
        padding-top: 30px;
        text-align: right;
    }
    
    .isi{
        margin-top: 30px;
        margin-bottom: 20px;
        font-size: 14px;
        padding-left: 25px;
    }
    
    footer{
        margin-bottom: 40px;
        font-size: 18px;
        color: #545454;
    }
    
    .img-stop img{
        margin-top: 30px;
        width: 220px;
    }
    
    .situs-terlarang{
        color: red;
        font-weight: 500;
        font-size: 24px;
    } 
    
    .Inggris{
        margin-top: 80px;
    } 
}

/* 800 */
@media screen and (min-width:771px) and (max-width:800px) {
    body{
        background: linear-gradient(90deg, rgba(244, 106, 13, 0.1) 50.96%, rgba(244, 193, 13, 0.1) 114.65%);
    }
    
    .logo-circleone{
        margin-top: 20px;
    }
    
    .logo-circleone img{
        width: 200px;
    }
    
    .logo-kominfo{
        margin-top: 20px;
    }
    
    .logo-kominfo img{
        height: 90px;
    }
    
    .logo-Internet-positif img{
        width: 200px;
        margin-top: 32px;
    }
    
    #head {
        height: 240px;
        margin-top: 25px;
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 70px;
        background : linear-gradient(90deg, var(--first-color), var(--second-color));
        color: #fff;
        font-weight: 400;
        border-radius: 20px;
    }
    
    .pembuka{
        margin-top: 25px;
        margin-bottom: 20px;
        font-size: 16px;
        height: 300px;
        color: white;
        padding-left: 20px;
        padding-top: 30px;
        text-align: right;
    }
    
    .isi{
        margin-top: 30px;
        margin-bottom: 8px;
        font-size: 12px;
        padding-left: 5px;
    }
    
    footer{
        margin-bottom: 40px;
        font-size: 18px;
        color: #545454;
    }
    
    .img-stop img{
        margin-top: 10px;
        width: 180px;
    }

    .situs-terlarang{
        color: red;
        font-weight: 500;
        font-size: 16px;
    } 
    
    .Inggris{
        margin-top: 40px;
    } 
}

/*  */
@media screen and (min-width:767px) and (max-width:771px) {
    body{
        background: linear-gradient(90deg, rgba(244, 106, 13, 0.1) 50.96%, rgba(244, 193, 13, 0.1) 114.65%);
    }
    
    .logo-circleone{
        margin-top: 20px;
    }
    
    .logo-circleone img{
        width: 200px;
    }
    
    .logo-kominfo{
        margin-top: 20px;
    }
    
    .logo-kominfo img{
        height: 90px;
    }
    
    .logo-Internet-positif img{
        width: 200px;
        margin-top: 32px;
    }
    
    #head {
        height: 240px;
        margin-top: 25px;
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 70px;
        background : linear-gradient(90deg, var(--first-color), var(--second-color));
        color: #fff;
        font-weight: 400;
        border-radius: 20px;
    }
    
    .pembuka{
        margin-top: 25px;
        margin-bottom: 20px;
        font-size: 16px;
        height: 300px;
        color: white;
        padding-left: 20px;
        padding-top: 30px;
        text-align: right;
    }
    
    .isi{
        margin-top: 30px;
        margin-bottom: 8px;
        font-size: 12px;
        padding-left: 5px;
    }
    
    footer{
        margin-bottom: 40px;
        font-size: 18px;
        color: #545454;
    }
    
    .img-stop img{
        margin-top: 10px;
        width: 180px;
    }

    .situs-terlarang{
        color: red;
        font-weight: 500;
        font-size: 16px;
    } 
    
    .Inggris{
        margin-top: 30px;
    } 
}

@media screen and (min-width:660px) and (max-width:767px) {
    body{
        background: linear-gradient(90deg, rgba(244, 106, 13, 0.1) 50.96%, rgba(244, 193, 13, 0.1) 114.65%);
    }
    
    .logo-circleone{
        margin-top: 20px;
    }
    
    .logo-circleone img{
        width: 100px;
    }
    
    .logo-kominfo{
        margin-top: 20px;
    }
    
    .logo-kominfo img{
        height: 50px;
    }
    
    .logo-Internet-positif img{
        width: 100px;
        margin-top: 32px;
    }
    
    #head {
        height: 240px;
        margin-top: 25px;
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 70px;
        background : linear-gradient(90deg, var(--first-color), var(--second-color));
        color: #fff;
        font-weight: 400;
        border-radius: 20px;
    }
    
    .pembuka{
        margin-top: 25px;
        margin-bottom: 20px;
        font-size: 16px;
        height: 300px;
        color: white;
        padding-left: 20px;
        padding-top: 30px;
        text-align: right;
    }
    
    .isi{
        margin-top: 25px;
        margin-bottom: 8px;
        font-size: 10px;
        padding-left: 5px;
    }
    
    footer{
        margin-bottom: 40px;
        font-size: 18px;
        color: #545454;
    }
    
    .img-stop img{
        margin-top: 10px;
        width: 180px;
    }

    .situs-terlarang{
        color: red;
        font-weight: 500;
        font-size: 16px;
    } 
    
    .Inggris{
        margin-top: 35px;
    } 

    .copyright{
        font-size: 10px;
    }
}

/* 600 */
@media screen and (min-width:576px) and (max-width:660px) {
    body{
        background: linear-gradient(90deg, rgba(244, 106, 13, 0.1) 50.96%, rgba(244, 193, 13, 0.1) 114.65%);
    }
    
    .logo-circleone{
        margin-top: 20px;
    }
    
    .logo-circleone img{
        width: 100px;
    }
    
    .logo-kominfo{
        margin-top: 20px;
    }
    
    .logo-kominfo img{
        height: 50px;
    }
    
    .logo-Internet-positif img{
        width: 100px;
        margin-top: 32px;
    }
    
    #head {
        height: 190px;
        margin-top: 25px;
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 70px;
        background : linear-gradient(90deg, var(--first-color), var(--second-color));
        color: #fff;
        font-weight: 400;
        border-radius: 20px;
    }
    
    .pembuka{
        margin-top: 10px;
        margin-bottom: 20px;
        font-size: 14px;
        height: 300px;
        color: white;
        padding-left: 20px;
        padding-top: 30px;
        text-align: right;
    }
    
    .isi{
        margin-top: 27px;
        margin-bottom: 8px;
        font-size: 8px;
        padding-left: 5px;
    }
    
    footer{
        margin-bottom: 40px;
        font-size: 18px;
        color: #545454;
    }
    
    .img-stop img{
        margin-top: 10px;
        width: 140px;
    }

    .situs-terlarang{
        color: red;
        font-weight: 500;
        font-size: 14px;
    } 
    
    .Inggris{
        margin-top: 35px;
    } 

    .copyright{
        font-size: 8px;
    }
}

@media screen and (min-width:516px) and (max-width:576px) {
    body{
        background: linear-gradient(90deg, rgba(244, 106, 13, 0.1) 50.96%, rgba(244, 193, 13, 0.1) 114.65%);
    }
    
    .logo-circleone{
        margin-top: 20px;
    }
    
    .logo-circleone img{
        width: 100px;
    }
    
    .logo-kominfo{
        margin-top: 20px;
    }
    
    .logo-kominfo img{
        height: 50px;
    }
    
    .logo-Internet-positif img{
        width: 100px;
        margin-top: 32px;
    }
    
    #head {
        height: 170px;
        margin-top: 25px;
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 70px;
        background : linear-gradient(90deg, var(--first-color), var(--second-color));
        color: #fff;
        font-weight: 400;
        border-radius: 20px;
    }
    
    .pembuka{
        margin-top: 10px;
        margin-bottom: 20px;
        font-size: 12px;
        height: 300px;
        color: white;
        padding-left: 20px;
        padding-top: 30px;
        text-align: right;
    }
    
    .isi{
        margin-top: 10px;
        margin-bottom: 4px;
        font-size: 8px;
    }
    
    footer{
        margin-bottom: 40px;
        font-size: 18px;
        color: #545454;
    }
    
    .img-stop img{
        margin-top: 10px;
        width: 120px;
    }

    .situs-terlarang{
        color: red;
        font-weight: 500;
        font-size: 12px;
    } 
    
    .Inggris{
        margin-top: 20px;
    } 

    .copyright{
        font-size: 8px;
    }
}

@media screen and (max-width:516px) {
    body{
        background: linear-gradient(90deg, rgba(244, 106, 13, 0.1) 50.96%, rgba(244, 193, 13, 0.1) 114.65%);
    }
    
    .logo-circleone{
        margin-top: 20px;
    }
    
    .logo-circleone img{
        width: 100px;
    }
    
    .logo-kominfo{
        margin-top: 20px;
    }
    
    .logo-kominfo img{
        height: 50px;
    }
    
    .logo-Internet-positif img{
        width: 100px;
        margin-top: 32px;
    }
    
    #head {
        height: 150px;
        margin-top: 25px;
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 70px;
        background : linear-gradient(90deg, var(--first-color), var(--second-color));
        color: #fff;
        font-weight: 400;
        border-radius: 20px;
    }
    
    .pembuka{
        margin-top: 10px;
        margin-bottom: 20px;
        font-size: 10px;
        height: 300px;
        color: white;
        padding-left: 20px;
        padding-top: 30px;
        text-align: right;
    }
    
    .isi{
        margin-top: 20px;
        margin-bottom: 4px;
        font-size: 6px;
    }
    
    footer{
        margin-bottom: 40px;
        font-size: 18px;
        color: #545454;
    }
    
    .img-stop img{
        margin-top: 10px;
        width: 100px;
    }

    .situs-terlarang{
        color: red;
        font-weight: 500;
        font-size: 10px;
    } 
    
    .Inggris{
        margin-top: 30px;
    } 

    .copyright{
        font-size: 8px;
    }
}