/*** FONTS *********************/

/*** COLORS *********************

@color_1: #cccd98;
@color_2: #6A6057;
@color_3: #7963a8;
@color_4: #f29602;
@color_5: #a12623; red
@color_6: #B8FF1C;
@color_7: #1c508c;
@color_8: #ffffff;
@color_9: #000000;

@color_10: #43018F;
@color_11: #5383bb;

********************************/



html{
    font-family: Arial, sans-serif;
    font-size: 100%;
}

body{
    font-family: Arial, sans-serif;
    font-size: 1.8rem;
    line-height: 1.4em;
}

body.home{
    background-image: url('img/u__franz__echaz__papiermuehle.jpg');
    background-size: cover;
}

body.home.bg-top-left{
    background-image: url('img/hg_papier.jpeg');
}

body.home.bg-top-right{
    background-image: url('img/hg_foto.jpeg');
}

body.home.bg-middle-left{
    background-image: url('img/hg_druck.jpeg');
}

body.home.bg-middle-right{
    background-image: url('img/hg_environment.jpeg');
}

body.home.bg-bottom-left{
    background-image: url('img/hg_buecher.jpeg');
}

body.home.bg-bottom-right{
    background-image: url('img/hg_malerei.jpeg');
}

#secondary{
    margin-top: 394px !important;
}

#main{
    margin-top: 280px;

    @media screen and (max-width: 921px){
        margin-top: 230px;
    }

     @media screen and (max-width: 544px){
        margin-top: 130px;
    }
}

p, h1, h2, h3, h4, h5, h6{
    font-family: Arial, sans-serif;
    font-weight: 400 !important;
    margin-bottom: 0.5em !important;
}

h1{
    margin-bottom: 0 !important;
}

h4, h5, h6{
    font-weight: 600 !important;
}

p{
    margin-bottom: 1em !important;
}

.small p{
    font-size: 0.7em;
}

.no-underline{
    text-decoration: none !important;

    a{
       text-decoration: none !important;
    }
}

.site-logo-img{
    padding-right: 0 !important;
}

#mainnav{
    margin-top: 30px;

    p, img{
        margin-top: -10px;
        margin-bottom: 0 !important;
    }

    a{
        font-size: 1.5rem;
        color: #A12623;
        font-weight: 700;
        text-decoration: none;

        @media screen and (max-width: 544px){
            font-size: 1.2rem;
        }

    }

}

.sidenav{
    position: fixed !important;
    z-index: 1000 !important;
    width: auto !important;

    a{
        font-size: 2rem;
        color: #A12623 !important;
        font-weight: 700;
        text-decoration: none !important;
        line-height: 1;

        @media screen and (max-width: 544px){
            font-size: 1.2rem;
        }

    }
}

#shopnav{

    .inline-block p{
        margin-bottom: 0 !important;

        a{
            display: inline-block;
            width: max-content;
        }

    }

}

.top-left{
    top: 100px;
    left: 60px;

    @media screen and (max-width: 544px){
        top: 20px;
        left: 1%; 
    }

}

.top-right{
    top: 100px;
    right: 60px;

    @media screen and (max-width: 544px){
        top: 20px;
        right: 1%;
    }

}

.middle-left{
    top: 50%;
    left: 60px;
    transform: translate(-50%);
    margin-top: -75px !important;
    margin-left: 90px !important;

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

        left: 2%;
        margin-top: -40px !important;
        margin-left: 40px !important;
    }

}

.middle-right{
    top: 50%;
    right: 60px;
    transform: translate(-50%);
    margin-top: -75px !important;
    margin-right: -90px !important;

    @media screen and (max-width: 544px){
        right: 1%;
        margin-top: -40px !important;
        margin-right: -50px !important;
    }

}

.bottom-left{
    bottom: 100px;
    left: 60px;

    @media screen and (max-width: 544px){
        bottom: 20px;
        left: 1%; 
    }

}

.bottom-right{
    bottom: 100px;
    right: 60px;

    @media screen and (max-width: 544px){
        bottom: 20px;
        right: 1%;
    }

}

#footernav{
    margin-top: 40px;

    p{
        margin-top: -20px;
        margin-bottom: 0;
    }

    a{
        font-size: 1.5rem;
        color: #A12623;
        font-weight: 700;
        text-decoration: none;

        @media screen and (max-width: 544px){
            font-size: 0.9rem;
        }

    }

}