body
{

font-size: 17px;
background-color: rgb(255, 255, 255);
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* heder section */

.header
{

color: #f36720;
padding: 10px;
font-weight: 800;
border: 0;
border-bottom: 1px solid;
}

.optionL
{
    
float: left;
margin-right: 10px;
cursor: pointer;
padding: 20px;
}

.optionL:hover
{

color: rgb(0, 0, 0);
}

.optionR
{
    
float: right;
margin-left: 10px;
cursor: pointer;
padding: 20px;
}

.optionR:hover
{

color: rgb(0, 0, 0);
}


#logo
{

width: 70px;
height: 70px;
padding: 0px;
}

#cb
{

clear: both;
}

/* main section */

.main-content
{

font-weight: 900;
color: black;

}

.left-bar{

margin: 18px;
width: 15vw;
height: fit-content;
padding: 20px;
border: 1px solid #888;
border-radius: 10px;
float: left;
}

.left-bar-item
{

border-bottom: 1px solid #f36720;
padding: 10px;
}

.center-content
{

display:flow-root;
margin: 18px;
padding: 15px;
}

.center-content-item
{

margin: 10px;
border: 1px solid #888;
border-radius: 10px;
padding: 15px;
padding-top: 5px;
padding-right: 5px;
width: 21vw;
float:right;
max-height: 30vw;
height: fit-content;
cursor: pointer;
}
 
.center-content-item:hover
{

color: #f36720;
}

img.center-content-item
{
border: 0;
width: 17vw;
height: 30vh;
}

/* product page*/
.center-product
{

margin: 30px auto 0px auto;
width: fit-content;
border: 1px solid black;
padding: 20px;
border-radius: 10px;
position: relative;
max-width: 60vw;
}

img.center-product
{
border: 0;
margin: 0;
width: 20vw;
height: 30vw;
}

#button_form
{

border-radius: 5px;
font-weight: 600;
border-color: #888;
background-color: #fff;
}

@media screen and (max-width:700px){
    
    body
    {
        font-size: 17px;
    }
    .header
    {

    padding: 10px 5px 5px 10px;
    }
    .optionL,.optionR
    {

        padding: 15px 10px 10px 15px;
    }
    .center-content-item
    {

        max-width: 50vw;
        width: fit-content;
        max-height: 45vh;
        height: fit-content;

    }
    img.center-content-item
    {

        max-width: 45vw;
    }
    .left-bar{

        width: 88vw;
        height: fit-content;
        font-size: 13px;
        padding: 2vW;
        }
        
        img.center-product
        {
        border: 0;
        margin: 0;
        width: fit-content;
        max-width: 50vw;
        height: 30vw;
        }
} 
@media screen and (max-width:1000px) and (min-width:700px){
.left-bar,.center-content-item{

    font-size: 12px;

}
.center-content-item{

height: fit-content;
max-height: 50vh;
}
}

.kontakt{

color: #f36720;
cursor: pointer;
text-decoration: underline;
text-decoration-color: black;
}

.kontakt:hover{

color: black;
text-decoration-color: #f36720;
}
.center-content-item-text{

    float: none;
}

@media screen and (min-width:1000px){
    
.center-content-item-text{

position: absolute;
bottom: 2vw;
}
.center-content-item{

max-height: 40vw;
height: fit-content;
position: relative;
}



}

@media screen and (min-width:1400px){
    body{
    
    font-size: 23px;
    }
}