body 

{

    margin: 0px;  

}



body h1, h2, h3

{

    font-family: roboto, arial;

    font-weight: normal;   

}



body p

{

    font-family: Open Sans, arial;

    font-size: 18px;

    line-height: 1.5;

    letter-spacing: 0.03em;

}



.header

{

    float: left;

    width: 100%;

    height: 120px;

    background-color: #4f4f4f;

}



.logo

{

    float: left;

    width: 80px;

    margin-top: 5px;

    margin-left: 30px;

}



.logo_teksti

{

    float: left;

    width: 260px;

    margin: 5px;

    margin-left: 10px;

}



.menu_desktop

{

    float: right;

    background-color: inherit;

    height: 100%;

    width: 600px;

    margin-right: 20PX;

}



.menu_button

{

    cursor: pointer;

    background-color: inherit;

    height: inherit;

    width: 24%;

    color: white;

    border: 0px;

    padding: 0px;

    font-size: 24px;

}



.menu_button:hover

{

    background-color: #757575;

    color: black;

}



.menu_button:active

{

    background-color: #e37d00;

    color: black;

}



.menu_mobile

{

    display: none;  

    float: right;

    width: 100px;

    height: 100px;

}



.hamburger

{

    float: right;

    width: 80px; 

    padding: 15px;

}



.dropdown_button 

{

    cursor: pointer;

    background-color: inherit;

    width: inherit;

    height: inherit;

    color: white;

    font-size: 24px;

    border: none;

}



.dropdown_content 

{

    display: none;

    position: absolute;

    border-top: solid 2px darkgrey;

    background-color: #545454;

    transform: translate(-200px, 20px);

    width: 300px;

}



.dropdown_content a

{

    width: inherit;

    color: white;

    font-size: 22px;

    padding: 20px 0px;

    text-decoration: none;

    display: block;

}



.dropdown_content p

{

    margin-left: 40px;

}



.dropdown_content a:hover 

{

    background-color: #757575;

    color: black;

}



.dropdown:active

{

    background-color: #e37d00;

    color: black;

}



.show 

{

    display: block;

}



.julkisivu_kuva

{

    width: 100%;

}



.palvelut

{

    float: left;

    width: 60%;

    margin-left: 20%;

    margin-top: 40px;

    margin-bottom: 40px;

    text-align: center;

   

}



.palvelut p

{

    margin-top: 10px;

    margin-bottom: 5px;

}



.oheistuotteet

{

    float: left;

    width: 100%;

    background-color: #4f4f4f;

}



.oheistuotteet_keskitys

{

    width: 60%;

    height: inherit;

    margin-left: 20%;

}



.oheistuotteet_teksti

{

    float: left;

    width: 30%;

    margin-left: 20%;

    margin-top: 50px;

    text-align: center;

    color: white;

}



.oheistuotteet_teksti p

{

    margin-bottom: 10px;

}

 

.hylly

{

    float: left;

    width: 30%;

    margin-left: 5%;

    margin-right: 15%;

}



.hylly img

{

    width: 300px;

    margin-top: 20px;

    margin-bottom: 20px;

}



.ennen_yhteydenottoa

{

    float: left;

    width: 100%;

    margin-top: 20px;

    margin-bottom: 20px;

}



.ennen_yhteydenottoa_kuva

{

    float: left;

    width: 33%;

    margin-left: 2%;

    margin-right: 15%;

}



.taalta_linkki

{

    color: #0e07d9;

    text-decoration: none;

}



.taalta_linkki:hover

{

    color: #86d2db;

    text-decoration: none;

}



.taalta_linkki:active

{

    color: #e37d00;

    text-decoration: none;

}



.tiskikone_kuva

{

    float: left;

    width: 400px;

}



.ennen_yhteydenottoa_teksti

{

    float: left;

    width: 30%;

    margin-left: 20%;

    margin-top: 10px;

    text-align: center;

}













.takuumerkit

{

    width: 100%;

}



.takuumerkit_mobile

{

    display: none;

}



.merkit

{

    width: 60%;

    margin-left: 20%;

    margin-right: 20%;

    margin-top: 20px;

    margin-bottom: 20px;

}



.merkki

{

    text-align: center;

    width: 200px;

    height: 75px;

}



.takuumerkit_teksti

{

    float: left;

    text-align: center;

    margin-left: 20%;

    margin-right: 20%;

    width: 60%;

    margin-top: 25px; 

    margin-bottom: 30px;

}



.takuumerkki_linkki

{

    color: #0e07d9;

    text-decoration: none;

}



.takuumerkki_linkki:hover

{

    color: #86d2db;

    text-decoration: none;

}



.takuumerkki_linkki:active

{

    color: #e37d00;

    text-decoration: none;

}

















.Kodinkone

{

    float: left;

    width: 90%;

    margin-left: 10%;

    margin-right: 0%;

    margin-bottom: 5%;

}



.Kodinkone_kuva_container

{

    float: left;

    width: 40%;

}



.Kodinkone_kuva

{

    margin-left: 10%;

    margin-top: 5px;

    width: 70%;

}



.Jaakaappi_kuva

{

    margin-left: 10%;

    width: 50%;

}



.Pyykinpesukone_kuva

{

    margin-left: 15%;

    width: 60%;

}



.Kodinkone_teksti_container

{

    float: left;

    width: 60%;

}



.Kodinkone_teksti

{

    float: left;

    width: 100%;

    font-size: 20px;

}

 



.arvokilpi_lista_jasen

{

    font-size: 20px;

}

















.yhteystiedot_keskitys

{

    float: left;

    width: 70%;

    height: inherit;

    margin-left: 20%;

    margin-right: 10%;

    margin-top: 70px;

    margin-bottom: 40px;

}



.yhteystiedot

{

    float: left;

    width: 55%;

}



.yhteystiedot p

{

    margin-top: 5px;

}



.yhteystieto_linkki

{

    text-decoration: none;

}



.yhteystieto_linkki:hover

{

    color: dodgerblue;

}



.yhteystieto_linkki:active

{

    color: #e37d00;

}



.yhteystiedot_keskitys h1

{

    margin-top: 20px;

}



.kartta_container

{

    float: left;

    width: 45%;

}



.kartta

{

    width: 100%;

    height: 800px;

    border: none;

    box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.2);

}























.footer
{

    float: left;

    width: 100%;

    color: white;

    background-color: #404040;

}



.footer_tiedot

{

    float: left;

    width: 22%;

    margin-left: 18%;

    text-align: left;

}



.footer_tiedot p 

{ 

    font-size: 16px;

    margin-top: 40px;

    margin-bottom: 30px;

}



.footer_linkki

{

    color: white;

    text-decoration: none;

    text-decoration: underline;

}



.footer_linkki:hover

{

    color: #e37d00;

}



.footer_linkki:active

{

    color: #e37d00;

}



.footer_kuvat

{

    float: right;

    width: 600px;

    margin-top: 40px;

    margin-bottom: 30px;

}



.footer_kuvat img

{

    display: block;

    margin-left: auto;

    margin-right: auto;

}



.flex_box

{

    float: left;

    width: 33%;

}



.luotettava_kumppani

{

    width: 150px;

   

}



.yrittajat

{  

    width: 150px;  

}



.fb

{

    width: 80px;

}





/* Tabletti */

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

{

    .menu_mobile

    {

        display: inline-block;

    }

    

    .menu_desktop

    {

        display: none;    

    } 

    

    .palvelut

    {

        width: 80%;

        margin-left: 10%;

    }

    

    .oheistuotteet_keskitys

    {

        width: 80%;

        margin-left: 10%;

    }

    

    .oheistuotteet_teksti

    {

       width: 49%;

        margin-left: 6%;

    }

    

    .hylly

    {

        width: 30%;

        margin-left: 2%;

        margin-right: 0%;

    }

    

    .hylly img

    {

        width: 250px;

    }

    

    .ennen_yhteydenottoa_teksti

    {

        width: 49%;

        margin-left: 6%;

    }

    

    .ennen_yhteydenottoa_kuva

    {

        width: 30%;

        margin-left: 0%;

        margin-right: 0%;

    }



    .tiskikone_kuva

    {

        width: 350px;

    }

    

    .merkit

    {

        width: 80%;

        margin-left: 10%;

        margin-right: 10%;

    }



    .merkki

    {

        text-align: center;

        width: 200px;

        height: 60px;

    }



    .takuumerkit_teksti

    {

        text-align: center;

        width: 74%;

        margin-left: 13%;

        margin-right: 13%;

    }



    

    

    

    .Kodinkone

    {

    }

    

    .Kodinkone_kuva_container

    {

        width: 50%;

    }

    

    .Kodinkone_kuva

    {

        width: 80%;

    }

    

    .Jaakaappi_kuva

    {

        width: 65%;

    }



    .Pyykinpesukone_kuva

    {

        width: 70%;

    }

    

    .Kodinkone_teksti_container

    {

        width: 50%;

    }

    

    Kodinkone_teksti

    {

        float: left;

        width: 100%;

        font-size: 15px;

    }

    

    

    

    

    .yhteystiedot_keskitys

    {

        width: 90%;

        margin-left: 5%;

        margin-right: 5%;

    } 

    

    .footer_tiedot

    {

        width: 30%;

        margin-left: 10%;

    }

    

    .footer_tiedot p 

    { 

        font-size: 18px;

        

    }

    

    .footer_kuvat

    {

        width: 60%;

        margin-bottom: 30px;

    }

    

    .luotettava_kumppani

    {  

        width: 130px;

    }

    

    .yrittajat

    {  

        width: 130px;  

    }



    .fb

    {     

        width: 70px;

    }

}





/* Puhelin */

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

{ 

    .logo

    {

        float: left;

        width: 50px;

        margin-top: 25px;

        margin-left: 30px;

    }

    

    .logo_teksti

    {

        width: 180px;

        margin: 20px;

        margin-left: 0px;

        margin-right: 0px;

    }

    

    .palvelut

    {

        width: 80%;

        margin-left: 10%;

        margin-top: 40px;

        margin-bottom: 40px;

    }

    

    .oheistuotteet_keskitys

    {

        width: 90%;

        margin-left: 5%;
    }   



    .oheistuotteet_teksti

    {

        width: 90%;

        margin-right: 5%;

        margin-left: 5%;

        margin-top: 15px;

        

    }

 

    .hylly

    {

        width: 100%;

        margin: 0px;

    }

    

    .hylly img

    {

        width: 320px;

        margin-bottom: 20px;

        display: block;

        margin-left: auto;

        margin-right: auto;

    }

    

    .ennen_yhteydenottoa_teksti

    {

        width: 90%;

        margin-right: 5%;

        margin-left: 5%;

        margin-top: 0px;

    }

    

    .ennen_yhteydenottoa_kuva

    {

        float: right;

        width: 90%;

        margin-left: 5%;

        margin-right: 5%;

    }



    .tiskikone_kuva

    {

        width: 100%;

    }

    

    .takuumerkit

    {

        display: none;    

    }

    

    .takuumerkit_mobile

    {

        display: block;

    }

    

    .takuumerkit_teksti

    {

        text-align: center;

        width: 90%;

        margin-left: 5%;

        margin-right: 5%;

        font-size: 10px;

    }

    

    .takuumerkit_teksti h1

    {

        font-size: 28px;

    }

    

    .takuumerkit_teksti p

    {

        font-size: 16px;

    }

    

    

    Kodinkone

    {

        width: 100%;

        margin-top: 10%;

         margin-left: 5%;

        margin-right: 5%;

    }



    .Kodinkone_kuva_container

    {

        width: 100%;

    }



    .Kodinkone_kuva

    {

        width: 70%;

        margin-left: 15%;



    }

    

    .Jaakaappi_kuva

    {

        width: 50%;

        margin-left: 25%;

    }



    .Pyykinpesukone_kuva

    {

        width: 60%;

        margin-left: 20%;

    }



    .Kodinkone_teksti_container

    {

        width: 100%;

    }

    

    .Kodinkone_teksti

    {

       font-size: 20px;

    }



    

    .yhteystiedot_keskitys

    {

        width: 90%;

        margin-left: 5%;

        margin-right: 5%;

        margin-top: 10px;

    } 

    

    .yhteystiedot

    {

        width: 100%;

    }



    .kartta_container

    {

        width: 100%;

        margin-top: 40px;

    }



    .kartta

    {

        width: 100%;

        height: 550px;

        

    }

 

    .footer_tiedot

    {

        width: 100%;

        margin: 0px;

        text-align: center;

    }

    

    .footer_kuvat

    {

        width: 100%;

        margin-top: 0px;

    }

    

    .luotettava_kumppani

    {

        width: 90px;

    }

    

    yrittajat

    {  

        width: 70px;  

    }

}