.mapbanner
{
    color:white;
    background-size: 100% 100%;
    width:60%;
    height:100%;
    background-image: url("../graphics/map.jpg");
}

.wash2
{
    color:white;
    width:100%;
    height:35vw;
    background-size: cover;
    background-image: url("../graphics/wash2.jpg");
}


.mapimage
{
    margin:2vh;
    width:100%;
    height:100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../graphics/map.png");
}

.contactsection
{
    width:100%;
    height:30vh;
}

.count_washes
{
    width:8%;
    height:100%;
    border-radius:1vh;
    background-color:grey;
    color:white;
    margin-right:0.5%;
    margin-left:0.5%;
}

.count_carwashes
{
    width:8%;
    height:100%;
    border-radius:1vh;
    background-color:red;
    color:white;
    margin-right:0.5%;
    margin-left:0.5%;
}


@media (min-aspect-ratio: 4/3) {
    .buttoniconcolor {
        margin-top:1vh;
        font-size: 4vw;
        color:#cc0000;
    }

    .bottom_line_text
    {
        width:90%;
        height:100%;
        font-weight: bold;
        font-size:1.2vw;
        color:black;
        text-align:center;
    }

    .bottom_copyright_text
    {
        font-size:0.8vw;
        color:black;
    }

    .wash_div1
    {
        width:56%;
        height:100%;
    }
    .wash_div2
    {
        width:46%;
        height:100%;
    }
    .phoneimage
    {
        color:white;
        width:100%;
        height:100%;
        background-position:center;
        background-size: contain;
        background-repeat:no-repeat;
        background-image: url("../graphics/phoneimage.png");
    }
    .wash1
    {
        color:white;
        width:100%;
        height:calc(35vw + 22vh);
        background-size: cover;
        background-image: url("../graphics/wash1.jpg");
    }
    .explain_title_text
    {
        font-weight: bold;
        font-size:4.3vw;
        color:black;
        text-shadow: 1px 2px white;
    }

    .explain_text
    {
        font-size:2.3vw;
        color:black;
        text-shadow: 1px 1px white;
    }

    .buttoniconsize {
        font-size:8vh;
    }
    
    .buttonicon {
        cursor:pointer;
        display:flex;
        display:-webkit-flex;
        flex-flow:column;
        align-items:center;
        justify-content:center;
        margin-right:2vw;
        margin-left:2vw;
        margin-top:2vh;
    }

    .counters_half1 {
        width:50%;
        height:23vw;
    }
    .counters_half {
        width:50%;
        height:100%;
    }
    .buttonicontext {
        width:200%;
        margin-top:0.2vh;
        font-size:2vh;
        text-align:center;
        color:#CC0000;
    }

    .contactsection
    {
        display:flex;
        display:-webkit-flex;
        flex-flow:row;
        align-items:center;
        justify-content:center;
        width:100%;
        height:82vh;
    }
    .contacthalf
    {
        display:flex;
        display:-webkit-flex;
        flex-flow:column;
        align-items:center;
        justify-content:center;
        width:50%;
    }
    .numbers_container
    {
        display:flex;
        display:-webkit-flex;
        flex-flow:row;
        align-items:center;
        justify-content:center;
        width:100%;
        height:10vh;
    }
}

@media (max-aspect-ratio: 4/3) {
    .buttoniconcolor {
        margin-top:1vh;
        font-size: 6vw;
        color:#cc0000;
    }

    .phoneimage
    {
        color:white;
        width:100%;
        height:100%;
        background-position:center;
        background-size: contain;
        background-repeat:no-repeat;
        background-image: url("../graphics/phoneimage.png");
    }

    .bottom_line_text
    {
        width:90%;
        height:100%;
        font-weight: bold;
        font-size:1.8vh;
        color:black;
        text-align:center;
    }

    .bottom_copyright_text
    {
        font-size:1.5vh;
        color:black;
    }

    .wash_div1
    {
        width:1%;
        height:100%;
    }
    .wash_div2
    {
        width:99%;
        height:100%;
    }
    .wash1
    {
        color:white;
        width:100%;
        height:calc(73vh - 14vw);
        background-size: cover;
        background-image: url("https://otonaki.co/graphics/wash1bw.jpg");
    }
    .explain_title_text
    {
        font-weight: bold;
        font-size:4vh;
        color:white;
        text-shadow: 1px 2px black;
    }

    .explain_text
    {
        font-size:3vh;
        color:white;
        text-shadow: 1px 1px black;
    }

    .buttonicon {
        cursor:pointer;
        display:flex;
        display:-webkit-flex;
        flex-flow:column;
        align-items:center;
        justify-content:center;
    }

    .counters_half1 {
        width:100%;
        height:calc(23vw + 12vh);
    }
    .counters_half {
        width:100%;
        height:100%;
    }

    .buttonicontext {
        margin-top:0.2vh;
        font-size:1.2vw;
        color:#CC0000;
    }

    .contactsection
    {
        display:flex;
        display:-webkit-flex;
        flex-flow:column;
        align-items:center;
        justify-content:center;
        width:100%;
        height:calc(21vw + 82vh);
    }
    .contacthalf
    {
        display:flex;
        display:-webkit-flex;
        flex-flow:column;
        align-items:center;
        justify-content:center;
        width:100%;
    }
    .numbers_container
    {
        display:flex;
        display:-webkit-flex;
        flex-flow:column;
        align-items:center;
        justify-content:center;
        width:100%;
        height:20vh;
    }
}

.numbers_toppart
{
    width:100%;
    height:70%;
}

.numbers_bottompart
{
    font-weight: bold;
    font-size:calc(1.5vw + 1.0vh);
    color:black;
    width:100%;
    height:30%;
}

.question_title_container
{
    width:100%;
    height:5vh;
}

.question_container_empty
{
    width:20%;
    height:100%;
}

.question_container_question
{
    width:50%;
    height:100%;
}

.question_container_icon
{
    width:10%;
    height:100%;
}




.question_text_container
{
    width:100%;
}

.question_container_text_empty
{
    width:20%;
}

.question_container_text_question
{
    width:60%;
}


.explain_toppart
{
    width:100%;
    height:10%;
}

.explain_bottompart
{
    width:100%;
    height:90%;
}

.maptext {
    display:flex;
    display:-webkit-flex;
    flex-flow:row;
    align-items:center;
    justify-content:flex-start;
}

.planicon
{
    background-position: center;
    height:80%;
    width:20%;
    background-size: contain;
    background-repeat:no-repeat;
    background-image: url("../graphics/planicon.png");
}

.bottomicons
{
    width:100%;
    height:20vh;
}

.icon_android
{
    background-position: center;
    height:80%;
    width:20%;
    background-size: contain;
    background-repeat:no-repeat;
    background-image: url("../graphics/android.png");
}

.icon_facebook
{
    background-position: center;
    height:80%;
    width:20%;
    background-size: contain;
    background-repeat:no-repeat;
    background-image: url("../graphics/icon_facebook.jpg");
}

.icon_whatsapp
{
    background-position: center;
    height:80%;
    width:20%;
    background-size: contain;
    background-repeat:no-repeat;
    background-image: url("../graphics/icon_whatsapp.jpg");
}

.icon_youtube
{
    background-position: center;
    height:80%;
    width:20%;
    background-size: contain;
    background-repeat:no-repeat;
    background-image: url("../graphics/icon_youtube.jpg");
}

.icon_gmail
{
    background-position: center;
    height:80%;
    width:20%;
    background-size: contain;
    background-repeat:no-repeat;
    background-image: url("../graphics/icon_gmail.jpg");
}


.icon_aws
{
    background-position: center;
    height:80%;
    width:20%;
    background-size: contain;
    background-repeat:no-repeat;
    background-image: url("../graphics/icon_aws.jpg");
}

.icon_box
{
    background-position: center;
    height:80%;
    width:20%;
    background-size: contain;
    background-repeat:no-repeat;
    background-image: url("../graphics/icon_box.jpg");
}

.icon_hapoalim
{
    background-position: center;
    height:80%;
    width:20%;
    background-size: contain;
    background-repeat:no-repeat;
    background-image: url("../graphics/icon_hapoalim.jpg");
}

.icon_unity
{
    background-position: center;
    height:80%;
    width:20%;
    background-size: contain;
    background-repeat:no-repeat;
    background-image: url("../graphics/icon_unity.jpg");
}

.icon_gsuite
{
    background-position: center;
    height:80%;
    width:20%;
    background-size: contain;
    background-repeat:no-repeat;
    background-image: url("../graphics/icon_gsuite.jpg");
}

.arrowleft
{
    background-position: center;
    height:80%;
    width:20%;
    background-size: contain;
    background-repeat:no-repeat;
    background-image: url("../graphics/arrowleft.png");
}

.arrowdown
{
    background-position: center;
    height:80%;
    width:20%;
    background-size: contain;
    background-repeat:no-repeat;
    background-image: url("../graphics/arrowdown.png");
}

.title_text
{
    font-weight: bold;
    font-size:5vw;
    color:white;
    text-shadow: 1px 2px black;
}

.button_title_text
{
    font-weight: bold;
    font-size:3vw;
    color:white;
    text-shadow: 1px 2px black;
}

.button_title_border
{
    width:80%;
    height:80%;
    border-style:solid;
    border-radius:6px;
    border-width:thin;
    border-color:white;
}


.question_text
{
    font-weight: bold;
    font-size:calc(3.0vw + 1.2vh);
    color:black;
}

.map_text
{
    font-weight: bold;
    font-size:calc(1.2vw + 0.5vh);
    text-align:center;
    color:black;
}

.answer_text
{
    font-size:calc(2.6vw + 1.0vh);
    color:grey;
}


.contact_address_title
{
    font-weight: bold;
    font-size:calc(3vw + 1vh);
    color:black;
    width:100%;
    height:calc(3vw + 1vh);
}

.contact_address_linebig
{
    font-weight: bold;
    font-size:calc(2.2vw + 1vh);
    color:black;
    width:100%;
    height:calc(4vw + 2.5vh);
}

.contact_address_line
{
    font-size:calc(2.2vw + 1vh);
    color:black;
    width:100%;
    height:calc(2.5vw + 1vh);
}


.bottomtext1
{
    width:100%;
    height:8vh;
}

.bottomtext2
{
    width:100%;
    height:4vh;
}


.questionflex {
    display:flex;
    display:-webkit-flex;
    flex-flow:column;
    align-items:right;
    justify-content:center;
}

.maphalfcolumn1 {
    width:30%;
    height:100%;
}

.maphalfcolumn2 {
    width:70%;
    height:100%;
}


.contacttitletext
{
    font-weight: bold;
    font-size:calc(1.8vw + 1.6vh);

}