/* 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: 20%;
    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;
}


li.aktiv a{
    color: darkorange;
}
.navProdukte{
    text-align: left;
	display: none;
}
.produktContainer{
	margin-top: 20px;
}
.produktArrowLinks{
	float: left;
	width: 10%;
	margin-top: 5%;
}
.produktArrowRechts{
	float: right;
	width: 9%;
	margin-top: 5%;	
}
.produktArrowLinks:hover{
	cursor: pointer;
}
.produktArrowRechts:hover{
		cursor: pointer;
}
.ArrowL6{
	margin-top: 11.7%;
}
.Arrow6{
	margin-top: 11.7%;	
}
.produktArrowRechts img{
	width: 30px;	
}
.produktArrowLinks img{
	width: 30px;	
}
.produktIntro{
	float: left;
	width: 80%;
	
}

.produktBild img{
	width: 10%;
}
.produktBild{
	float: left;
	width: 80%;
	text-align: center;
}

.produktBeschrieb{
	clear: both;
}

.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;
    right: -217px;
}
.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;
}
.produktKreise{
	clear: both;
}
.produktKreis img{
	width: 1%;
	margin-top: 2%;
}

@media only screen and (max-width: 2560px){
    
    .mainContainer{
        margin-top: 50px;
    
    }
    .mainContainer p{
        width: 50%;
    }
   
    .produktContainer p{
        width: 40%;
    }
    
    .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;
    }
    
}




@media only screen and (max-width: 1440px){
    
    .mainContainer{
        margin-top: 20%;
    
    }
    .mainContainer p{
        width: 60%;
    }
    .logo{
        font-size: 6.5vw;
    }
    .mainMenu{
        font-size: 2.3vw;
    }
    
    .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%;
    }
	
	.produktBild img{
		width: 50%;
	}
    
}
@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;
    }
    .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%;

    }
    
    .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;
    }
	.mainContainer{
		margin-top: 10%;
	}
	
	.produktKreis img{
		width: 4%;
		margin-top:4%;
	}
	.produktArrowLinks img,.produktArrowRechts img {
		width: 50%;
	}
	.produktArrowLinks ,.produktArrowRechts {
		margin-top: 20%;
	}

	.ArrowL6{
		margin-top: 40%;
	}
	.Arrow6{
		margin-top: 40%;	
	}

	
	
    .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%;
    }
    
}