/*Website Structure////////////////////////////////////////////////////////////////////////////////////////////////////*/

body,html{
    /*overflow-x: hidden;*/
}

body{
    padding: 0;
    margin: 0;
    background-color: white;

    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body::after{
    content: '';
    display: block;

}

#mobileNav{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0,0.85);
    z-index: 2;
    display: none;



    position: absolute;
    left: 0;
    right: 0;

    transition: 1s;

}

    #mobileSelection{
        margin: 45px 18px;
    }

    #mobileNavClose{
        margin: 32px 28px;
        width: 65px;
        height: 65px;
        float: right;
        color: white;
        font-size: 3rem;
        background-color: red;
        background-color: transparent;
        cursor: pointer;
        text-align: center;
        position: relative;
        left: 10px;

    }

    .mobileNavCell{
        color: white;
        font-size: 2rem;
        padding: 12px;
    }

#container{
    background-color: rgb(235, 235, 235);
    background-color: transparent;
    width: 85%;

    overflow: hidden;
    
}

    #header{

        width: 100%;
        height: 200px;
        
        
        background-image: url("images/harjulaHeaderHQb.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        

        background-color: rgb(128, 93, 93);
        background-color: transparent;

        text-align: center;
        background-position: 0 -32px;

        position: relative;
        margin-top: 20px;
        margin-bottom: 18px;


    }

        #headceil{
            background-color: red;
            background-color: transparent;
            width: 100%;
            height: 30%;
            padding-bottom: 3px;
        }

        #headflor{
            background-color: green;
            background-color: transparent;
            width: 100%;

            position: relative;
            display: flex;
        }

            #hfleft, #hfcent, #hfright{
                height: 100%;
                width: 20%;
                display: inline-block;
            }

            #hfleft{
                background-color: aquamarine;
                background-color: transparent;
                text-align: right;
                margin-right: 2.5%;
            }

            #hfcent{
                background-color: brown;
                background-color: transparent;
                width: 60%;
                text-align: center;
            }

            #hfright{
                background-color: blue;
                background-color: transparent;
                text-align: left;
                margin-left: 2.5%;
            }

                #harjulaHome{
                    width: 60%;
                }

                    

                #harjulaHeader{
                    width: 100%; 
                }

                #harjulaContact{
                    width: 40%;

                }

        #harjulaHeaderLogo{
            width: 200px;
            position: relative;
            right: 40px;
            top: 30px;
    
        }



        #harjulaHeaderLogo, #harjulaContact{
            cursor: pointer;
        }


        /*
        #headerImage{
            background-image: url("/images/img0093.jpg");
            background-repeat: no-repeat;

            background-size: cover;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 0;
        }*/

        #mobileSelect{
            width: 40px;
            height: 100%;
            background-color: rgb(82, 117, 117);
            background-color: transparent;
            float: right;
            display: none;
            margin-right: 15px;
            cursor: pointer;
        }

            .mobileSelectLine{
                width: 100%;

                display: inline-block;
                background-color: black;
                padding: 3px 0px;
                margin: 0;
                border-radius: 10px;
                margin: 5.5px auto;


            }
            


    

    #nav{
        background-color: rgba(166, 166, 166);
        background-color: transparent;
        width: 100%;
        height: 100px;
        
    }

        #mouseNav{
            position: absolute;
            width: 175px;
            height: 0px;
            padding: 4px 4px;

            background-color: rgb(64, 64, 64);

            top: 2555px;
            right: 2555px;

            z-index: 10;
            display: none;
            transition: height 0.50s;
            border-radius: 0 0 10px 10px;
        }

            .nmcell{

                width: 100%;    

                font-size: 1.2rem;
                padding: 5px 0;
                text-align: center;
            }

            .nmpath{
                cursor: pointer;
                color: white;
                text-decoration: none;
            }
            .nmpath:hover{
                text-decoration: underline;
            }



        #navBar{
            display: table;
  
            background-color: rgba(47, 47, 47, 0.5);
            background-color: transparent;

            width: 70%;


            margin: 0 auto;



        }

        .navCell{
            display: table-cell;
            vertical-align: middle;

            font-size: 1.25rem;
            text-align: center;

            /*font-family: Arial, Helvetica, sans-serif;*/

            background-color: pink;
            background-color: transparent;


            border-bottom: 6px transparent solid;


        }
        
        .navCellLink{
            padding: 12px;
        }

        .navCellLink:hover{
            text-decoration: underline;
        }

        .navCell a{
            cursor: pointer;
            color: black;
            text-decoration: none;
        }

        #navCell0{
            /*border-bottom: 6px green solid*/
        }

        #carousel{
            padding: 2em;

        }

            #carWrapper{
                position: relative;
                max-width: 83.333vw;
                min-width: 43.333vw;
                right: 40.625vw;

                margin: 0 auto;


                transition: 1s;

            }

            #car{
                display: flex;


                scroll-behavior: smooth;
                border-radius: 0.5rem;
            }

            #car img{
                flex: 1 0 52.083vw;
                width: 52.083vw;
                position: relative;

                margin: 0px 1.042vw;
                scroll-snap-align: start;


            }

            .carNav{
                display: flex;
                column-gap: 1rem;
                position: absolute;
                bottom: 1.25rem;
                left: 50%;
                transform: translateX(-50%);
                z-index: 1;
            }

            .carNav a{
                width: 0.5rem;
                height: 0.5rem;
                border-radius: 50%;
                background-color: white;
                opacity: 0.75;
                transition: 250ms;
            }

            .slide, #car{
                right: 0vw;
                /*transition: 1s;*/
            }

            






        #section{
            float: left;
            background-color: rgb(141, 88, 88);
            background-color: transparent;


        }


        .section{
            width: 100%;
            margin-bottom: 60px;
            display: inline-block;
            color: black;
            text-align: center;
            padding-top: 10px;
        }

            #uc{
                display: table;
                width: 100%;
                height: 50vh;
                font-size: 2em;
                text-align: center;


            }

                #uctx{
                    border: 4px rgb(183, 183, 183) solid;
                    border-radius: 20px;

                    width: 50%;
                    margin: 0 auto;
                    vertical-align: center;
                    position: relative;
                    top: 120px;
                }



            #about{
                margin: 0 auto;
                width: 85%;
                font-size: 1.25rem;
                background-color: green;
                background-color: transparent;
                text-align: left;
                padding-bottom: 10px;
            }
            #about div{
                margin: 10px 0;
            }

            


            #sec-c div{
                width: 100%;
                font-size: 22px;
            }
            #sec-c span{
                font-weight: 900;
            }


        #section-b{
            background-color: rgb(111, 111, 88);
            background-color: transparent;
            width: 100%;
            margin: 0 auto;
            text-align: center;
        }

            #section-b-prod{
                width: 100%;


                background-color: rgb(145, 128, 128);
                background-color: transparent;
                
            }

                .prodGroup{
                    background-color: green;
                    background-color: transparent;
                    width: 16%;

                    display: inline-block;
                    
                    text-align: center;

                }

                .product{
                    display: inline-block;
                    width: 90%;
                    margin: 10px;
                    cursor: pointer;

                    
                }



    #footer{
        position: relative;
        bottom: 0;
        width: 100%;



    }

    #ftrSection{
        width: 100%;
        height: 240px;
        display: inline-block;
        text-align: center;

        background-image: url("/images/harjula_alapalkki.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        color: black;
        background-position: 0px 50px;
    
    }

        #ftrSection{
            background-color: rgb(129, 156, 156);
            background-color: transparent;
            float: left;

        }

        #date{
            background-color: white;
            padding: 20px 0;

        }





/*Elements////////////////////////////////////////////////////////////////////////////////////////////////////*/

#mainLogo{
    background-color: pink;
    background-color: transparent;
    width: 100%;

    float: left;



}

    #harjulaHeaderText{
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 16px;
        color: black;
        font-weight: 600;
        width: 120px;
        margin-left: 20px;
        position: relative;
        bottom: 5px;


    }




/*Classes////////////////////////////////////////////////////////////////////////////////////////////////////*/

.marginCenter{
    margin-left: auto;
    margin-right: auto;
}

.marginLeftAuto{
    margin-left: auto;
}

.marginRightAuto{
    margin-right: auto;
}

.inlineBlock{
    display: inline-block;
}

.positionRelative{
    position: relative;
}

.widthFull{
    width: 100%;
}

.heightFull{
    height: 100%;
}

/*@media Rule////////////////////////////////////////////////////////////////////////////////////////////////////*/

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

    

    #section, #aside, #ftrSection, #ftrAside{
        width: 100%;
        display: block;
    }

    #ftrSection, #ftrAside{
        margin-bottom: 0;
    }

    
    #carWrapper{
        max-width: 83.333vw;
    }

    #section-b{
        text-align: left;
    }


}

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

    #section-b-prod .prodGroup{
        width: 48%;

    }

    #header #headceil{

    }

    #header #hfcent{
        margin-top: 22px;
    }

    #header #hfleft{
        padding-top: 20px;
    }
}

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

    #nav{
        margin: 0;
        width: 100%;
        float: left;
    }


}

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

    #navBar{
        display: none;
    }
    #mobileSelect{
        display: initial;
    }
    #headceil{
        background-color: rgb(255, 255, 255, 0.8);
        padding-top: 10px;
    }
    .prodGroup{
        width: 140px;
    }

    #header #hfleft{
        background-color: blue;
        background-color: transparent;
        width: 22%;
        margin: 0;
        position: relative;
        top: 10px;
    }
    


    #hfright{
        display: none;
    }

    #header #hfcent{
        width: 78%;
        position: relative;
        background-color: red;
        background-color: transparent;
        margin-left: auto;

        padding: 10px;
    }






}

#container{
    position: relative;
    top: 0;
}
#langTab{

    position: relative;
    top: 0;
    
}

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



    #hfleft{
        width: 15%;
        margin-right: 1%;
    }

    #hfcent{
        width: 70%;
    }

    #hfright{
        width: 15%;
        margin-right: 1%;
    }

    
    #harjulaHome{
        width: 90%;
    }

    #harjulaHeader{
        width: 100%; 
    }

    #harjulaContact{
        width: 70%;
    }
    #harjulamContact{
        width: 70%;
    }

    #container{
        margin: 0;
        width: 100%;
    }



}