/*Theme name: Rozdělovník Skalka/Ridera 2021
Author: Ludek Pasecky, ludek.pasecky@seznam.cz, +420602775598
*/

@font-face {font-family: ele_bold; src: url("fonts/elektra_bold.woff");}
@font-face {font-family: ele_reg; src: url("fonts/elektra_regular.woff");}


b {font-family: ele_bold; font-weight: normal;}
p {font-family: ele_reg;}
a {color: inherit; text-decoration: none;}



@media only screen and (min-width: 600px) {

    html, body {width: 100%; height: 100%; margin: 0; padding: 0; border: 0; min-width: 300px; background-color: white;}

    .mobile {display: none;}
    .desktop {display: block;}

    .intro {position: relative; width: 100%; height: 100%; overflow: hidden; min-height: 45vw; max-height: 56vw;}

    .ridera_blok {position: absolute; width: 50%; height: 100%; left: 0; background-color: #981005; background-image: url("images/Ridera_bg.png"); background-size: 100%; background-repeat: no-repeat; background-position: center top;}
    .skalka_blok {position: absolute; width: 50%; height: 100%; right: 0; background-color: #E10717; background-image: url("images/Skalka_bg.png"); background-size: 100%; background-repeat: no-repeat; background-position: center top;}

    .top_claim {position: relative; margin-top: 2vw; margin-bottom: 3vw; width: 100%; text-align: center; color: white; font-family: ele_bold; font-size: 1.5vw;}

    .logo_ridera {position: absolute; bottom: 15vw; width: 100%; height: 8vw; background-image: url("images/logo_ridera.svg"); background-size: contain; background-position: center center; background-repeat: no-repeat;}
    .logo_skalka {position: absolute; bottom: 14vw; width: 100%; height: 11.5vw; background-image: url("images/logo_skalka.svg"); background-size: contain; background-position: center center; background-repeat: no-repeat;}

    .guide_box {position: absolute; width: 42%; height: 9vw; bottom: 3vw; left: 50%; transform: translateX(-50%);}

    .guide_claim_ridera {position: absolute; width: 100%; left: 0; transition: 0.2s; height: 3vw; background: white; color: #981005; text-align: center; font-family: ele_bold; font-size: 1.5vw; line-height: 3vw;}
    .guide_claim_skalka {position: absolute; width: 100%; left: 0; transition: 0.2s; height: 3vw; background: white; color: #E10717; text-align: center; font-family: ele_bold; font-size: 1.5vw; line-height: 3vw;}
    .guide_claim_ridera:hover, .guide_claim_skalka:hover {width: 106%; left: -3%; transition: 0.2s;}

    .shadow:hover {filter: drop-shadow(0 0 0.5vw rgba(0,0,0,0.5));}
    .bigger:hover {background-size: 50% !important;}
    .bigger:hover .box_name {font-size: 0.75vw;}

    .box_1 {position: absolute; left: 0; bottom: 0; width: 25%; height: 5.5vw; background-image: url("images/ico_rezervace.svg"); background-size: 45%; background-position: center center; background-repeat: no-repeat; transition: 0.2s;}
    .box_2 {position: absolute; left: 25%; bottom: 0; width: 25%; height: 5.5vw; background-image: url("images/ico_sportoviste.svg"); background-size: 45%; background-position: center center; background-repeat: no-repeat; transition: 0.2s;}
    .box_3 {position: absolute; left: 50%; bottom: 0; width: 25%; height: 5.5vw; background-image: url("images/ico_navigace.svg"); background-size: 45%; background-position: center center; background-repeat: no-repeat; transition: 0.2s;}
    .box_4 {position: absolute; left: 75%; bottom: 0; width: 25%; height: 5.5vw; background-image: url("images/ico_pronajmy.svg"); background-size: 45%; background-position: center center; background-repeat: no-repeat; transition: 0.2s;}
    .box_5 {position: absolute; left: 0; bottom: 0; width: 25%; height: 5.5vw; background-image: url("images/ico_vstupenky.svg"); background-size: 45%; background-position: center center; background-repeat: no-repeat; transition: 0.2s;}
    .box_6 {position: absolute; left: 25%; bottom: 0; width: 25%; height: 5.5vw; background-image: url("images/ico_atrakce.svg"); background-size: 45%; background-position: center center; background-repeat: no-repeat; transition: 0.2s;}

    .box_name {position: absolute; bottom: 0; width: 100%; text-align: center; color: white; font-size: 0.65vw; font-family: ele_bold; line-height: 0.65vw; transition: 0.2s;}

    .arrow_down {position: absolute; bottom: 1.25vw; left: 50%; transform: translateX(-50%); background-image: url("images/ico_arrow_down.svg"); width: 5vw; height: 2vw; background-repeat: no-repeat; background-position: center bottom; transition: 0.2s;}
    .arrow_down:hover {width: 5.5vw;}


    /* nová sekce karty */

    .cards {position: relative; width: 100%; height: 30vw; background-color: white;}

    .cards_claim {position: absolute; left: 9vw; top: 4vw; font-family: ele_bold; font-size: 4.5vw; text-align: left; color: #981005;}
    .cards_subclaim {position: absolute; left: 9vw; top: 15.5vw; font-family: ele_reg; font-size: 2vw; text-align: left; color: #981005;}
    .cards_pic {position: absolute; height: 100%; width: 70%; top: 0; right: 0; background-image: url("images/cards_mockup.png"); background-size: 90%; background-repeat: no-repeat; background-position: 140%;}
    .cards_btn {position: absolute; width: 10vw; left: 9vw; top: 24vw; transition: 0.2s; height: 3vw; background: #981005; color: white; text-align: center; font-family: ele_bold; font-size: 1.5vw; line-height: 3vw;}
    .cards_btn:hover {width: 11vw; left: 8.5vw; transition: 0.2s;}

    /* konec */


    .news {position: relative; width: 100%; height: 50vw; display: none;}
    .darkred_blok {position: absolute; width: 50%; height: 100%; left: 0; background-color: #981005;}
    .lightred_blok {position: absolute; width: 50%; height: 100%; right: 0; background-color: #E10717;}

    .news_pic {position: relative; width: 25vw; height: 14vw; left: 50%; transform: translateX(-50%); background: white;}



}






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

    html, body {width: 100%; height: 100%; margin: 0; padding: 0; border: 0; min-width: 300px; background-color: white;}

    .mobile {display: block;}
    .desktop {display: none;}

    .intro {position: relative; width: 100%; height: 100%; overflow: hidden;}

    .ridera_blok {position: absolute; width: 50%; height: 100%; left: 0; background-color: #981005; background-image: url("images/Ridera_bg.png"); background-size: 305%; background-repeat: no-repeat; background-position: center top;}
    .skalka_blok {position: absolute; width: 50%; height: 100%; right: 0; background-color: #E10717; background-image: url("images/Skalka_bg.png"); background-size: 265%; background-repeat: no-repeat; background-position: center top;}

    .top_claim {position: relative; margin-top: 5vw; margin-bottom: 3vw; width: 100%; text-align: center; color: white; font-family: ele_bold; font-size: 3.5vw; line-height: 4.5vw;}

    .logo_ridera {position: absolute; bottom: 67vw; width: 100%; height: 16vw; background-image: url("images/logo_ridera.svg"); background-size: contain; background-position: center center; background-repeat: no-repeat;}
    .logo_skalka {position: absolute; bottom: 66vw; width: 100%; height: 21vw; background-image: url("images/logo_skalka.svg"); background-size: contain; background-position: center center; background-repeat: no-repeat;}

    .guide_box {position: absolute; width: 78%; height: 52vw; bottom: 8vw; left: 50%; transform: translateX(-50%);}

    .guide_claim_ridera {position: absolute; width: 100%; left: 0; transition: 0.2s; height: 10vw; background: white; color: #981005; text-align: center; font-family: ele_bold; font-size: 3.5vw; line-height: 4vw; padding-top: 2vw;}
    .guide_claim_skalka {position: absolute; width: 100%; left: 0; transition: 0.2s; height: 10vw; background: white; color: #E10717; text-align: center; font-family: ele_bold; font-size: 3.5vw; line-height: 4vw; padding-top: 2vw;}
    .guide_claim_ridera:hover, .guide_claim_skalka:hover {width: 106%; left: -3%; transition: 0.2s;}

    .shadow:hover {filter: drop-shadow(0 0 0.5vw rgba(0,0,0,0.5));}
    .bigger:hover {background-size: 50% !important;}
    .bigger:hover .box_name {font-size: 3vw;}

    .box_1 {position: absolute; left: 0; bottom: 20vw; width: 50%; height: 20vw; background-image: url("images/ico_rezervace.svg"); background-size: 45%; background-position: center center; background-repeat: no-repeat; transition: 0.2s;}
    .box_2 {position: absolute; right: 0; bottom: 20vw; width: 50%; height: 20vw; background-image: url("images/ico_sportoviste.svg"); background-size: 45%; background-position: center center; background-repeat: no-repeat; transition: 0.2s;}
    .box_3 {position: absolute; left: 0; bottom: 0; width: 50%; height: 20vw; background-image: url("images/ico_navigace.svg"); background-size: 45%; background-position: center center; background-repeat: no-repeat; transition: 0.2s;}
    .box_4 {position: absolute; right: 0; bottom: 0; width: 50%; height: 20vw; background-image: url("images/ico_pronajmy.svg"); background-size: 45%; background-position: center center; background-repeat: no-repeat; transition: 0.2s;}

    .box_5 {position: absolute; left: 0; bottom: 20vw; width: 50%; height: 20vw; background-image: url("images/ico_vstupenky.svg"); background-size: 45%; background-position: center center; background-repeat: no-repeat; transition: 0.2s;}
    .box_6 {position: absolute; right: 0; bottom: 20vw; width: 50%; height: 20vw; background-image: url("images/ico_atrakce.svg"); background-size: 45%; background-position: center center; background-repeat: no-repeat; transition: 0.2s;}

    .box_name {position: absolute; bottom: 0; width: 100%; text-align: center; color: white; font-size: 2.5vw; font-family: ele_bold; line-height: 2.5vw; transition: 0.2s;}

    .arrow_down {position: absolute; bottom: 2vw; left: 50%; transform: translateX(-50%); background-image: url("images/ico_arrow_down.svg"); width: 10vw; height: 3vw; background-repeat: no-repeat; background-position: center bottom; transition: 0.2s;}
    .arrow_down:hover {width: 11vw;}



    /* nová sekce karty */

    .cards {position: relative; width: 100%; height: 105vw; background-color: white;}

    .cards_claim {position: relative; width: 100%; margin-top: 10vw; font-family: ele_bold; font-size: 9vw; line-height: 9vw; text-align: center; color: #981005;}
    .cards_subclaim {position: relative; width: 100%; margin-top: 4vw; font-family: ele_reg; font-size: 4vw; line-height: 4vw; text-align: center; color: #981005;}
    .cards_pic {position: relative; height: 50vw; width: 100%; top: 0; right: 0; background-image: url("images/cards_mockup.png"); background-size: 110%; background-repeat: no-repeat; background-position: center center;}
    .cards_btn {position: relative; width: 36vw; left: 50%; transform: translateX(-50%); margin-top: 8vw; transition: 0.2s; height: 8vw; background: #981005; color: white; text-align: center; font-family: ele_bold; font-size: 3.5vw; line-height: 8vw;}
    .cards_btn:hover {width: 42vw; transition: 0.2s;}

    /* konec */



    .news {position: relative; width: 100%; height: 50vw; display: none;}
    .darkred_blok {position: absolute; width: 50%; height: 100%; left: 0; background-color: #981005;}
    .lightred_blok {position: absolute; width: 50%; height: 100%; right: 0; background-color: #E10717;}

    .news_pic {position: relative; width: 25vw; height: 14vw; left: 50%; transform: translateX(-50%); background: white;}



}