/* CSS Document */
/* PHILIPP DÉCUREY */

@font-face{
    font-family: 'prodelt'; /* Gewünschter Name */
    src: url("../content/schrift/prodelt_co/Prodelt Co.ttf");
           /* für IE9 */
    src: url('.eot?#iefix') 
           format('embedded-opentype'),
           /* für IE6-IE8 */
         url("../content/schrift/prodelt_co/prodelt-Co.woff") 
           format('woff'), 
          /* für moderne Browser */
         url("../content/schrift/prodelt_co/Prodelt Co.ttf") 
           format('truetype');
         /* für Safari, Android, iOS */
}

html::-webkit-scrollbar { 
    display: none;
}
html{
    -ms-overflow-style: none; 
    scrollbar-width: none;
    
}

html{
    background-color: #162f2c;
    background-image: url("../content/background/background_5.svg");
    background-size: cover;

}

body,html{
	margin: 0px;
	padding: 0px;
    font-family: "Segoe UI","sans-serif";
	width: 100%;
    transform: all ease-in-out 2s;
    color: white;
    font-size: 25px
}


h1{
    font-size: 1.9vw;
    font-weight: 100;
}

p{
    font-size: 0.8vw;
    font-weight: 100;
}
.logo{
    width: 100%;
    text-align: center;
    margin-top: 50px;
    font-family: Prodelt;
    font-size: 6vw;
 
}

.logo a{
    text-decoration: none;
    color: white;
}

.mainContainer{
    width: 100%;
    text-align: center;
    margin-top: 250px;
    margin-bottom: 50px;
    
}
.mainContainer a{
    text-decoration: none;
    color: white;
    transform: all ease-in-out 2s;
    
}

.mainContainer a:hover{
    color: darkorange;
    transform: all ease-in-out 1s;

}
.mainContainer p{
    width: 35%;
    margin: auto;
}
.mainContainer li{
    text-decoration: none;
    list-style-type: none;
    display: inline-block;
    transition: all 1s ease-in-out;
}

.produktContainer p{
    width: 40%;

}
.mainMenu{
    font-family: prodelt;
    width: 60%;
    margin: auto;
    text-align: center;
    font-size: 1.5vw;
    padding: 0px;
    
}
.mainMenu li{
    text-decoration: none;
    list-style-type: none;
    padding: 0px 2%;
    display: inline-block;
    transition: all 1s ease-in-out;
}
.mainMenu ul{
    padding: 0px;
    margin: 0px;
}
.mainMenu a{
    text-decoration: none;
    color: white;
}
.mainMenu a:hover{
    color: darkorange;
    transition: all 0.5s ease-in-out;
}
.mainProdukt{
    width: 100%;
}

.mainProdukt img{
    width: 10%;
    margin: auto;
}

li.aktiv a{
    color: darkorange;
}
.navProdukte{
    text-align: left;
}
.p1, .p2, .p3, .p4, .p5, .p6{
    transition: all 1s ease-in-out;
    background-color: darkorange;
    padding: 5px 0px 2px 10px;
    border: solid white 1px;
    border-radius: 5px;
    cursor: pointer;
    width: 250px;
    position: fixed;
    right: -223px;
}
.p1{
    top: 50%;
    padding: 5px 0px 2px 5px;
}
.p2{
    top: 53%;
}
.p3{
    top: 56%;
}
.p4{
    top: 59%;
}
.p5{
    top: 62%;
}
.p6{
    top: 65%;
}

.aktivProdukte{
    right: -5px;
    transition: all 1s ease-in-out;
    color: black;
}

.produktContainer li{
    text-decoration: none;
    list-style-type: none;
    transition: all 1s ease-in-out;

}

.ueberMichBild img{
    width: 300px;
}
@media only screen and (max-width: 2560px){
    
    .mainContainer{
        margin-top: 150px;
    
    }
    .mainContainer p{
        width: 50%;
    }
   
    .produktContainer p{
        width: 40%;
    }
    
    .mainProdukt img{
        width: 10%;
    }
    .p2{
        top: 54%;
    }
    .p3{
        top: 58%;
    }
    .p4{
        top: 62%;
    }
    .p5{
        top: 66%;
    }
    .p6{
        top: 70%;
    }

}

@media only screen and (max-width: 1920px){
    h1{
        font-size: 2.5vw;
    }

    p{
        font-size: 1.2vw;
    }
    
}
    
@media only screen and (max-width: 1600px){
    h1{
        font-size: 2.5vw;
    }

    p{
        font-size: 1.5vw;
    }
    
    .logo{
        font-size: 5.5vw;
    }
    
    .mainProdukt img{
        width: 20%;
    }

    
}




@media only screen and (max-width: 1440px){
    
    .mainContainer{
        margin-top: 150px;
    
    }
    .mainContainer p{
        width: 60%;
    }
    .logo{
        font-size: 6.5vw;
    }
    .mainMenu{
        font-size: 2.3vw;
    }
    
    .mainProdukt img{
        width: 20%;
    }
    .p2{
        top: 54%;
    }
    .p3{
        top: 58%;
    }
    .p4{
        top: 62%;
    }
    .p5{
        top: 66%;
    }
    .p6{
        top: 70%;
    }
    
}
@media only screen and (max-width: 1200px){
    
    .mainMenu{
        font-size: 2.5vw;
    }
    .logo{
        font-size: 7.5vw;
    }

    h1{
        font-size: 3.5vw;
    }

    p{
        font-size: 1.7vw;
    }
    .produktContainer p{
        width: 40%;
    }
    
}
@media only screen and (max-width: 900px){
    .logo{
        font-size: 11vw;
    }
   
    .mainMenu{
        width: 100%;
        font-size: 4vw;
    }
    h1{
        font-size: 4.5vw;
    }

    p{
        font-size: 2.5vw;
    }
    
    .produktContainer p{
        width: 50%;    
    }
    .aktivProdukte{
        right: -220px;
    }
    .mainProdukt img{
        width: 30%;
    }
    .p1{
        width: 255px;
    }
    .p2{
        top: 56%;
    }
    .p3{
        top: 62%;
    }
    .p4{
        top: 68%;
    }
    .p5{
        top: 74%;
    }
    .p6{
        top: 80%;
    }
    
    
}

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

    
    .logo{
        font-size: 16.57vw;
        margin-bottom: 20px;
    }
   
    .mainMenu{
        font-size: 5.7vw;
    }
    h1{
        font-size: 7vw;
    }

    p{
        font-size: 3.5vw;
    }
    .mainContainer p{
        width: 90%;
    }
    .produktContainer p{
        width: 80%;

    }
    .mainProdukt img{
        width: 40%;
    }
    
    .p1, .p2, .p3, .p4, .p5, .p6{
        right: -235px;
        font-size: 3vw;
    }
    .p1{
       width: 255px; 
    }
    
    .p2{
        top: 55%;
    }
    .p3{
        top: 60%;
    }
    .p4{
        top: 65%;
    }
    .p5{
        top: 70%;
    }
    .p6{
        top: 75%;
    }
    .aktivProdukte{
        right: -230px;

    }
    
}




@media only screen and (max-width:500px){
    h1{
        font-size: 8vw;
    }

    p{
        font-size: 5.5vw;
    }
    
    .p1, .p2, .p3, .p4, .p5, .p6{
        right: -240px;
        font-size: 3vw;
    }
    .p2{
        top: 54%;
    }
    .p3{
        top: 58%;
    }
    .p4{
        top: 62%;
    }
    .p5{
        top: 66%;
    }
    .p6{
        top: 70%;
    }

    .aktivProdukte{
        right: -238px;

    }
   
    
    
    
}


@media only screen and (max-height:1200px){
    .p2{
        top: 55%;
    }
    .p3{
        top: 60%;
    }
    .p4{
        top: 65%;
    }
    .p5{
        top: 70%;
    }
    .p6{
        top: 75%;
    }
    
    
}
@media only screen and (max-height:900px){
    .p2{
        top: 56%;
    }
    .p3{
        top: 62%;
    }
    .p4{
        top: 68%;
    }
    .p5{
        top: 74%;
    }
    .p6{
        top: 80%;
    }
    
    
}
@media only screen and (max-height:750px){
    .p2{
        top: 57%;
    }
    .p3{
        top: 64%;
    }
    .p4{
        top: 71%;
    }
    .p5{
        top: 78%;
    }
    .p6{
        top: 85%;
    }
    
    
}
@media only screen and (max-height:660px){
    
    .p1, .p2, .p3, .p4, .p5, .p6{
        right: -225px;
        font-size: 1.9vw;
        padding-left: 10px;
    }
    .p1{
        width: 250px;
    }
    
    .p2{
        top: 58%;
    }
    .p3{
        top: 66%;
    }
    .p4{
        top: 74%;
    }
    .p5{
        top: 82%;
    }
    .p6{
        top: 90%;
    }
    
    .aktivProdukte{
        right: -220px;
    }
}
@media only screen and (max-height:570px){
    
    .p1, .p2, .p3, .p4, .p5, .p6{
        right: -230px;
        font-size: 2vw;
    }
    .p1{
        width: 255px;
        top: 40%
    }
    
    .p2{
        top: 50%;
    }
    .p3{
        top: 60%;
    }
    .p4{
        top: 70%;
    }
    .p5{
        top: 80%;
    }
    .p6{
        top: 90%;
    }
    .aktivProdukte{
        right: -222px;
    }
    
}
@media only screen and (max-height:400px){
    
    .p1, .p2, .p3, .p4, .p5, .p6{
        right: -230px;
        font-size: 2vw;
    }
    
    .p1{
        width: 255px;
        top: 20%
    }
    
    .p2{
        top: 34%;
    }
    .p3{
        top: 48%;
    }
    .p4{
        top: 62%;
    }
    .p5{
        top: 76%;
    }
    .p6{
        top: 90%;
    }
    
}