body { background-color: #333; }



header { position: absolute; height: 100px; z-index: 1; }
header nav { padding: 0; background-color: unset; }
.widther { width: 100%; padding: 0 50px; margin: 0; }



.home { height: 100%; overflow: hidden; }
.home > div { width: 100%; height: 100%; padding: 10px; position: relative; }

.home .le { background-color: #006633; height: 100%; border-radius: 30px; }
.home .le h1 { font-family: bold; font-size: 500%; color: #fff; padding: 50px; width: 70%; } 

.home .ri { background-color: #333; height: 100%; border-radius: 30px; text-align: center; }
.home .ri .box { width: 50%; height: 70%; position: relative; }
.home .ri .box a { 
    width: 100%; 
    margin: 5px 0; 
    opacity: 0.5; 
    text-decoration: none; 
    transition: 0.5s; 
    position: absolute; 
}
 
.home .ri .box a.r1 { top: -100%; }
.home .ri .box a.r2 { top: 0%; }
.home .ri .box a.r3 { top: 100%; } 

.home .ri .box a:hover { opacity: 1; }
.home .ri .box a .img { 
    width: 100%;
    padding: 100% 0 0 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fff;
    border-radius: 20px;
}
.home .ri .box a .bt2 { font-family: 'bold'; padding: 10px; color: #fff; }

.home .ron {
    width: 30%;
    padding-top: 30%;
    background-color: #333;
    position: absolute;
    border-radius: 300px;
}

.home .ron .miniron {
    width: 60%;
    padding-top: 60%;
    background-color: #d21;
    position: absolute;
    border-radius: 300px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    top: 20%;
    transition: 0.5s;
}

footer { position: absolute; height: 75px; bottom: 0; background-color: unset; }
footer > div { background-color: unset; }



@media only screen and (max-width: 1200px) {
    .home .ri .box { height: 60%; }
}


@media only screen and (max-width: 1000px) {
    .home .ri .box { height: 50%; }
    .home .le h1 { font-size: 400%; }
}

@media only screen and (max-width: 500px) {
    
    /* html { overflow: unset; } */
    header { height: 60px; }

    .widther { padding: 0 30px; }
    
    .home { overflow: unset; height: unset; }
    .home > div { padding: 0 5px; }
    .home .le {
        height: 350px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .home .le .bt1 { width: 100%; font-size: 350%; padding: 30px; }
    .home .ri { height: 50%; align-content: flex-start; }
    .home .ri a { width: 100%; }
    .home .ri .box { width: 100%; height: unset; position: unset; }
    .home .ri .box a { position: unset; width: 90%; margin: 30px 0 0 0; }
    .home .ron { top: 300px; }

    footer { position: relative; height: unset; }
    
}













/* 

html { background-color: #006633; }

body { 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    flex-flow: column;
}

header { 
    height: 75px; 
    flex-shrink: 0; 
    flex-grow: 0;
}

/* .home { height: 80%; flex-shrink: 1; }
.home > div { height: 100%; padding: 20px; }
.home .posts { padding: 20px 20px 20px 0; }
.home .posts .item {padding: 10px 0; }
.home .posts .item .titl { font-size: 150%; font-family: bold; color: #fff; padding: 0 0 15px 0; }
.home .posts .item .desc { font-size: 80%; color: #fff; }
.home .posts .item .stripe { background-color: #ff0044; width: 50px; height: 2px; margin: 15px 5px 5px 0; }
.home .image { position: relative; padding: 20px; height: 100%; }
.home .image .pic { width: 65%; background-size: cover; padding-top: 65%; z-index: 1; }
.home .image .ron {
    position: absolute;
    width: 55%;
    background: #ff0044;
    padding-top: 55%;
    border-radius: 1000px;
}

footer { 
    height: 75px; 
    flex-shrink: 0; 
}



@media only screen and (max-width: 1200px) {}


@media only screen and (max-width: 1000px) {
    body { display: block; overflow: unset; }
    .home { height: unset; }
}


@media only screen and (max-width: 500px) {
    .home .posts { padding: 20px 0; }
    .home .image { padding: 20px 0; }
    .home .image .pic { width: 100%; padding-top: 100%; }
    .home .image .ron { width: 100%; padding-top: 100%; }
}


 */