/* CSS Document */
/*Code by dawesi webdesign, 2019*/
/*Thanks for watching:-)*/
/* General */
body{
	box-sizing: border-box;
	background:#fff;
	margin:0px;
	padding:0px;
    font-family: lato;
}
.end{
	clear:both;
	height:0px;
	width:100%;
}

/*Inhalt*/
#logo{
    position:absolute;
    top:50px;
    left:30%;
    width:35%;
    padding:30px;
    background:rgba(255,255,255,0.5);
    border-radius:3px;
}
#logo img{
    width:100%;
}
#video{
    width:100%;
    max-height:40%;
}
#pfeil{
    width:100%;
    text-align:center;
    position:absolute;
    top:80%;
}
.fa-angle-double-down{
    font-size:3.5em;
    color:#1e492f;
}
.bounce {
  animation: bounce 3s infinite;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
#top{
    width:100%;
    text-align:center;
    margin-bottom:10%;
}
#top h1{
    font-size:3em;
    font-weight:600;
}
#top h2{
    font-size:2em;
    font-weight:500;
}
#top h3{
    font-size:1.5em;
    font-weight:400;
}
#martinelli{
    width:20%;
    float:left;
    margin-left:2%;
    margin-top:10%;
}
#info{
    width:20%;
    float:right;
    margin-right:2%;
    margin-top:10%;
    background:#1e492f;
    color:#fff;
    padding:30px 0px 50px 20px;
    font-size:1.2em;
    line-height: 1.8em;
}
#angebot{
    width:50%;
    float:left;
    text-align:center;
}
#angebot a{
    font-size:3em;
    color:#1e492f;
}
.icon{
    float:left;
    width:40%;
    margin:20px 10px;
    font-size:1.3em;
}

#kollektion{
    width:80%;
    margin-left:10%;
    text-align:center;
    line-height:3em;
    margin-bottom:10%;
}
#kollektion p{
    font-size:3em;
    color:#1e492f;
}
#kollektion a{
    text-decoration: none;
    color:#000;
    font-size:1.5em;
}
#kontakt{
    width:100%;
    text-align:center;
    margin-bottom:5%;
}
#kontakt span{
    font-size:3em;
    color:#1e492f;
}
#kontakt form{
    width:50%;
    margin-left:25%;
    text-align:left;
    border-color: #1e492f;
}
#kontakt form input{
    width:80%;
    height:30px;
}

#kontakt form textarea{
    width:80%;
    height:50px;
}
form p > .fehlermeldung {
	display: none;
}

form p.error > .fehlermeldung {
	display: block;	/* oder inline-block, oder inline */
	color:#1e492f;
    font-size:1em;
}
#fuss{
    width:100%;
    height:50px;
    background-color:#1e492f;
    color:#fff;
    text-align:center;
    padding-top:5px;
}
#fuss a{
    text-decoration: none;
    color:#fff;
}
#fuss span{
    margin-left:150px; 
    font-size:0.6em;
}
#rechts{
    position:fixed;
    top:20%;
    right:0px;
    width:75px;
    height:100px;
    background-color:#1e492f;
    opacity:0.8;
}
.fa-phone, .fa-envelope{
    color:#fff;
    font-size:2em;
    padding:10px;
}
#to-top{
	position:fixed;
	bottom:3%;
	right:1%;
}

.fa-chevron-circle-up{
	font-size:3em;
	color:#1e492f;
}

/*Screen*/
@media screen and (min-width: 1100px){
    
}
/*Tablet*/
@media screen and (min-width: 900px) and (max-width: 1100px){
    #pfeil{
        top:70%;
    }
}
/*Handy*/
@media screen and (min-width: 600px) and  (max-width: 900px){
    #pfeil{
    display:none;
    }
    #martinelli{
        float:none;
        width:100%;
        text-align: center;
    }
    #info{
        float:none;
        width:100%;
        text-align: center;
        margin-bottom:50px;
    }
    #angebot{
        float:none;
        width:100%;
        text-align: center;
    }
    #fuss{
        text-align:left;
        font-size:0.6em;
    }
    #fuss span{
    margin-left:50px; 
}
}
@media screen and (max-width: 600px){
    #pfeil{
        display:none;
    }
       #martinelli{
        float:none;
        width:100%;
        text-align: center;
    }
    #info{
        float:none;
        width:100%;
        text-align: center;
        margin-bottom:50px;
    }
    #angebot{
        float:none;
        width:100%;
        text-align: center;
    }
      #fuss{
        text-align:left;
        font-size:0.3em;
    }
    #fuss span{
    margin-left:20px; 
}
}