html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	vertical-align: baseline;

}

html{

	scroll-behavior: smooth;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

	display: block;

}
@font-face {
  font-family: Hind;
  src: url(../text-font/Hind-Regular.ttf);
}
body {

	line-height: 1;
	font-family: Hind;
}
ol, ul {

	list-style: none;

}

b{
	color:#ff9500;
	
}
blockquote, q {

	quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

	content: '';

	content: none;

}

table {

	border-collapse: collapse;

	border-spacing: 0;

}
a{
	color:white;
}
nav{
    height: 6rem;
    width: 100vw;
    background: #2f4f4fd4;
    background: -moz-linear-gradient(135deg,rgba(181, 0, 0, .8) 0%,rgba(102, 18, 0, .8) 40%,rgba(102, 18, 0, .8) 54%,rgba(181, 0, 0, .8) 100%);
    background: -webkit-linear-gradient(135deg,#2f4f4fcc 0%,#2f4f4fd6 40%,#2f4f4fc9 54%,#2F4F4F 100%);
    background: linear-gradient(135deg,#2f4f4fdb 0%,#2f4f4fd9 40%,#2f4f4fd6 54%,#2f4f4fd9 100%);
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    position: fixed;
    z-index: 999;
	transition: all .2s;
}
.solid-nav{
	    background: #b50000;
    background: -moz-linear-gradient(135deg,#b50000 0%,#661200 40%,#661200 54%,#b50000 100%);
    background: -webkit-linear-gradient(135deg,#b50000 0%,#661200 40%,#661200 54%,#b50000 100%);
    background: linear-gradient(135deg,#b50000 0%,#661200 40%,#661200 54%,#b50000 100%);
	transition: all .2s;
}
/*Styling logo*/
.logo{
    padding:1vh 1vw;
    text-align: center;
}
.logo img {
    
    margin: auto;
    text-align: center;
    margin-block: auto;
    margin-top: -62px;
}
.active{
	color: #ff9500;
}
/*Styling Links*/
.nav-links{
    display: flex;
    list-style: none; 
    width: 88vw;
    padding: 0 0.7vw;
    justify-content: space-evenly;
    align-items: center;
}
.nav-links li a{
    text-decoration: none;
    margin: 0 0.7vw;
	    text-transform: UPPERCASE;
    font-weight: bold;
    letter-spacing: 1px;
}
.nav-links li a:hover {
    color: #ff9500;
}
.nav-links li {
    position: relative;
}
.nav-links li a::before {
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    background-color: #ff9500;
    position: absolute;
    transition: all ease-in-out 250ms;
    margin: -10 0 0 5%;
}
.nav-links li a:hover::before{
    width: 90%;
}

/*Styling Buttons*/
.login-button{
    background-color: transparent;
    border: 1.5px solid #f2f5f7;
    border-radius: 2em;
    padding: 0.6rem 0.8rem;
    margin-left: 2vw;
    font-size: 1rem;
    cursor: pointer;

}
.login-button:hover {
    color: #131418;
    background-color: #f2f5f7;
    border:1.5px solid #f2f5f7;
    transition: all ease-in-out 350ms;
}
.join-button{
    color: #131418;
    background-color: #61DAFB;
    border: 1.5px solid #61DAFB;
    border-radius: 2em;
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    cursor: pointer;
}
.join-button:hover {
    color: #f2f5f7;
    background-color: transparent;
    border:1.5px solid #f2f5f7;
    transition: all ease-in-out 350ms;
}

/*Styling Hamburger Icon*/
.hamburger div{
    width: 30px;
    height:3px;
    background: #f2f5f7;
    margin: 5px;
    transition: all 0.3s ease;
}
.hamburger{
    display: none;
}

/*Stying for small screens*/
@media screen and (max-width: 1025px){
    nav{
        position: fixed;
        z-index: 99;
		width:100%;
    }
    .hamburger{
        display:block;
        position: absolute;
        cursor: pointer;
        right: 5%;
        top: 50%;
        transform: translate(-5%, -50%);
        z-index: 2;
        transition: all 0.7s ease;
    }
    .nav-links{
        position: fixed;
                background: #b50000;
    background: -moz-linear-gradient(135deg,#b50000 0%,#661200 40%,#661200 54%,#b50000 100%);
    background: -webkit-linear-gradient(135deg,#b50000 0%,#661200 40%,#661200 54%,#b50000 100%);
    background: linear-gradient(135deg,#b50000 0%,#661200 40%,#661200 54%,#b50000 100%);
        height: 100vh;
        width: 100%;
        flex-direction: column;
        clip-path: circle(50px at 90% -20%);
        -webkit-clip-path: circle(50px at 90% -10%);
        transition: all 1s ease-out;
        pointer-events: none;
    }
    .nav-links.open{
        clip-path: circle(1000px at 90% -10%);
        -webkit-clip-path: circle(1000px at 90% -10%);
        pointer-events: all;
    }
    .nav-links li{
        opacity: 0;
    }
    .nav-links li:nth-child(1){
        transition: all 0.5s ease 0.2s;
    }
    .nav-links li:nth-child(2){
        transition: all 0.5s ease 0.4s;
    }
    .nav-links li:nth-child(3){
        transition: all 0.5s ease 0.6s;
    }
    .nav-links li:nth-child(4){
        transition: all 0.5s ease 0.7s;
    }
    .nav-links li:nth-child(5){
        transition: all 0.5s ease 0.8s;
    }
    .nav-links li:nth-child(6){
        transition: all 0.5s ease 0.9s;
        margin: 0;
    }
    .nav-links li:nth-child(7){
        transition: all 0.5s ease 1s;
        margin: 0;
    }
    li.fade{
        opacity: 1;
    }
}
/*Animating Hamburger Icon on Click*/
.toggle .line1{
    transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
    transition: all 0.7s ease;
    width:0;
}
.toggle .line3{
    transform: rotate(45deg) translate(-5px,-6px);
}
.container {
	width:1250px;
	margin:0 auto;
}
.home-begin{
	    background-image: linear-gradient(145deg,#2f4f4f8c 0%,#2f4f4f8c 100%),url(../images/home-wallpaper.webp)!important;
	width:100%;
	height:100vh;
	background-position:center;
	background-size:cover;
}
.home-graphic-top{
	background-image: url(../images/grafica.svg);
    background-size: 100% 20vh;
	width: 100%;
	top:80.1vh;
    height: 20vh;
    z-index: 10;
    transform: rotateY(180deg);
	position:absolute;
}
.home-graphic-sec-top{
	background-image: url(../images/grafica2.svg);
    background-size: 100% 20vh;
	width: 100%;
	top:0;
    height: 20vh;
    z-index: 10;
	position:absolute;
}
.home-graphic-sec-under{
	background-image: url(../images/grafica2.svg);
    background-size: 100% 20vh;
	width: 100%;
	bottom:-0.5;
    height: 20vh;
    z-index: 10;
	position:absolute;
	    transform: rotateY(180deg) rotateX(180deg);
}
.home-begin-container{
	width:100%;
	height:100vh;
	position:relative;
}
.third-section-home{
	width:100%;
	min-height:70vh;
	height:max-content;
	position:relative;
}
.sec-section-home{
	width:100%;
	height:max-content;
	background-color:white;
}
.third-section-contain{
	background-image: linear-gradient(145deg,#2f4f4f8c 0%,#2f4f4f8c 50%),url(../images/5b7ec03b01bf9793a1df4d38_Roofer-Buddy-min.webp)!important;
	width:100%;
	min-height:70vh;
	height:max-content;
	background-attachment:fixed;
	background-position:center;
	background-size:cover;
	margin-top:20vh;
}
.third-section-contain h3{
	 font-weight: 800;
    text-transform: uppercase;
    font-size: 4vw;
    text-shadow: 0.03em 0.03em 0.05em rgb(0 0 0 / 30%);
    color: #fff!important;
    text-align: center;
	padding-top:30vh;
}
.third-section-contain a{
	border: 2px solid white;
    color: white;
	font-weight:bold;
    padding: 10px;
    text-decoration: none;
    margin: 0 auto;
    border-radius: 10px;
    transition: all 1s;
	margin-top:5vh;
	font-size:30px;
	text-shadow: 0.03em 0.03em 0.05em rgb(0 0 0 / 30%);
}
.third-section-contain a:hover{
		    background: #2F4F4F;
   
	color:white;
}
.home-begin p{
	padding-top:40vh;
	text-align:center;
	color:white;
	font-weight:bold;
}
.home-begin h3{
	font-weight: 800;
    text-transform: uppercase;
    font-size: 4vw;
    text-shadow: 0.03em 0.03em 0.05em rgb(0 0 0 / 30%);
	color: #fff!important;
	text-align:center;
}
footer{
	width:100%;
	height:max-content;
	min-height:30vh;
		background: #2F4F4F;
   
	padding-top:15vh;
	display:flex;
}
.copyright{
	display:block;
	width:100%;
	float:left;
	color:white;
	border-top: 1px solid rgba(255,255,255,.2);
	padding-top: 20px;
    padding-bottom: 20px;
}
.copyright a{
	color:#ff9500;
	text-decoration:none;
}
.column_footer{
	width:22%;
	padding:1.5%;
	height:max-content;
	display:inline-block;
	float:left;
	margin-bottom:10vh;
	color:white;
}
.column_footer p{
	display:block;
	padding-bottom:5px;
}
.column_footer a{
	text-decoration:none;
	transition:all .2s;
}
.column_footer .animated_a:hover{
	padding-left:10px;
	color:#ff9500;
}
.column_footer h3{
	font-size:20px;
	font-weight:bold;
	color:#ff9500;
	padding-bottom:20px;
}
.column_footer h2{
	display:inline-block;
	font-size:30px;
	padding-right:5px;
}
.leftside-sec-home-about{
	width:45%;
	display:inline-block;
}
.rightside-sec-home-about{
	width:49%;
	display:inline-block;
	height:max-content;
	min-height:100px;
	float:right;
	padding-top:15%;
}
.rightside-section-homeabout{
	width:40%;
	margin-right:5%;
	margin-bottom:5%;
	display:inline-block;
	background: #2F4F4F;
    
	height:max-content;
	min-height:100px;
	border-radius:5px;
}
.leftside-sec-home-about h3{
	font-weight: 800;
    text-transform: uppercase;
    font-size: 30px;
    text-shadow: 0.03em 0.03em 0.05em rgb(0 0 0 / 30%);
    color: #2F4F4F;
    text-align: center;
	padding-top:100px;
	padding-bottom:50px;
}
.leftside-sec-home-about p{
	padding-bottom:20px;
	font-size: 18px;
	line-height:30px;
    color: #666;
	text-align:center;
}
.rightside-section-homeabout-l{
	width:30%;
	height:100%;
	display:inline-block;
}
.rightside-section-homeabout-l i{
	    font-weight: 800;
    text-transform: uppercase;
    font-size: 55px;
    text-shadow: 0.03em 0.03em 0.05em rgb(0 0 0 / 30%);
    color: #fff!important;
    text-align: center;
	padding-top:20px;
	padding-left:15px;
}
.rightside-section-homeabout-r h3{
		    font-weight: 800;
    text-transform: uppercase;
    font-size: 18px;
    text-shadow: 0.03em 0.03em 0.05em rgb(0 0 0 / 30%);
    color: #fff!important;
    text-align: center;
	padding-top:45px;
}
.rightside-section-homeabout-r{
		width:69%;
	height:100%;
	display:inline-block;
	float:right;
}
.border{
	height:3px;
	width:10%;
	margin:0 auto;
	    background: #2F4F4F;
    
	margin-bottom:30px;
}
.leftside-sec-home-about a{
	border:2px solid #2F4F4F;
	color:#2F4F4F;
	padding:10px;
	text-decoration:none;
	font-weight:bold;
	margin:0 auto;
	border-radius:10px;
	transition:all 1s;
}
.leftside-sec-home-about a:hover{
		    background: #2F4F4F;
    
	color:white;
}
.button-left-sec-home-about{
	display:flex;
	width:100%;
	justify-content:center;
}
.third-section-home .third-section-contain.galerie{
background-image: linear-gradient(145deg,#2f4f4f8c 0%,#2f4f4f8c 100%),url(../images/IMG-20150909-WA0011-1024x576.jpg)!important;
min-height: 200vh;
padding-bottom:20vh;
}
.colum-galerie-home{
	width:100%;
}
.colum-galerie-home img{
	width:31%;
	margin-left:1.5%;
	border:1px solid #2F4F4F;
	display:inline-block;
	height:40vh;
	margin-top:1.5%;
}
.third-section-contain.galerie h3{
	padding-bottom:5vh;
}
.contact-home .rightside-sec-home-about{
	padding-top:2%;
}
.contact-home a {
    border: 2px solid #2F4F4F;
    color: #2F4F4F;
    font-weight: bold;
    padding: 10px;
    text-decoration: none;
    margin: 0 auto;
    border-radius: 10px;
    transition: all 1s;
    margin-top: 5vh;
    font-size: 30px;
    text-shadow: 0.03em 0.03em 0.05em rgb(0 0 0 / 30%);
}
.contact-home a:hover{
			    background: #2F4F4F;
   
	color:white;
}
.sec-section-home.contact-home{
	padding-top:10vh;
	padding-bottom:10vh;
}
.contact-home .leftside-sec-home-about h3{
	font-size:50px;
}
.contact-home .rightside-section-homeabout{
	width:70%;
}
.contact-home .rightside-section-homeabout-l{
	width:20%;
}
.contact-home .rightside-section-homeabout-r{
	width:80%;
}
.contact-home .rightside-section-homeabout-r h3{
	padding-top: 35px;
}
.rightside-section-homeabout a{
	border:none;
	color:white;
	padding-top: 0px !IMPORTANT;
}
.rightside-section-homeabout a:hover{
	background:transparent;
}
.home-begin.kontakt{
	background-image: linear-gradient(145deg,rgba(181,0,0,0.42) 0%,rgba(181,0,0,0.5) 100%),url(../images/5b7ec03b01bf9793a1df4d38_Roofer-Buddy-min.webp)!important;
	background-image: linear-gradient(145deg,#2f4f4f8c 0%,#2f4f4f8c 100%),url(../images/5b7ec03b01bf9793a1df4d38_Roofer-Buddy-min.webp)!important;
	}
.home-begin.kontakt h3{ padding-top:40vh !IMPORTANT; }

.mail_home_kontakt a{
	    font-size: 16px !IMPORTANT;
}
.contact-method{
	width:100%;
	display:flex;
}
.contact-container{
width:100%;
height:max-content;
padding-top:10vh;
padding-bottom:10vh;	
}
.contact-card{
	width:31%;
	margin-right:1%;
	height:max-content;
	min-height:25vh;
	background: #2F4F4F;
    
	display:inline-block;
	border-radius:5px;
}
.contact-card h3{
	font-weight: 800;
    text-transform: uppercase;
    font-size: 4vw;
    text-shadow: 0.03em 0.03em 0.05em rgb(0 0 0 / 30%);
    color: #fff!important;
    text-align: center;
	padding-top:4vh;
}
.contact-card a{
font-weight: 800;
    text-transform: uppercase;
    font-size: 2vw;
    text-shadow: 0.03em 0.03em 0.05em rgb(0 0 0 / 30%);
    color: #fff!important;
    text-align: center;
	padding-top:5vh;
	text-decoration:none;
	margin:0 auto;
}
.a-container-card{
	width:100%;
	display: flex;
	justify-content:center;
}
.mail_kontakt a{
	font-size:1.1vw !IMPORTANT;
}
.contact-form{
	width:100%;
	margin-top:10vh;
	padding-bottom:10vh;
	padding-top:10vh;
	display:flex;
}
.contact-form p{
	display:inline-block;
	color:#2F4F4F;
}
.contact-form input{
	display:block;
	padding:15px;
	margin-bottom:1vh;
	margin-top:1vh;
	width:100%;
	color:white;
	border:1px solid white;
	border-radius:5px;
		    background: #2F4F4F;
   
}
.contact-form textarea{
	display:block;
	padding:15px;
	margin-bottom:1vh;
	margin-top:1vh;
	width:100%;
	resize:none;
		color:white;
	border:1px solid white;
	border-radius:5px;
		    background: #2F4F4F;
    
}
.contact-form button{
	display:block;
	padding:15px;
	margin-bottom:1vh;
	margin-top:1vh;
	width:100%;
	resize:none;
		color:white;
	border:1px solid white;
	border-radius:5px;
	    background: #2F4F4F;
   
	transition:all .2s;
	cursor:pointer;
}
.contact-form button:hover{
	transform: scale(1.05);
}
.success_contact{
	width:100%;
	text-align:center;
	color:white;
	background-color:green;
	padding-top:10px;
	padding-bottom:10px;
	font-weight:bold;
}
.error_contact{
	width:100%;
	text-align:center;
	color:white;
	background-color:red;
	padding-top:10px;
	padding-bottom:10px;
	font-weight:bold;
}
.formular-contact{
	display:inline-block;
	width:50%;
}
.logo-contact{
	display:inline-block;
	width:50%;
	height:300px;
	background-image:urL(../images/logo.png);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
@media screen and (max-width: 1025px){
	.home-begin h3{
		font-size:9vw;
	}
	.container{
		width:100%;
	}
	.column_footer{
		width:97%;
		display:block;
		margin-bottom:2vh;
	}
	footer{
		    flex-direction: column;
			padding:5%;
			padding-top:10vh;
			width:90%;
	}
	.leftside-sec-home-about{
		width:100%;
	}
	.rightside-sec-home-about{
		width:100%;
	}
   .rightside-section-homeabout{
	width:96%;
	margin-left:2%;
	margin-right:0%;
  }
  .image-service{
	  width:96% !IMPORTANT;
	  margin-left:2% !IMPORTANT;
  }
  .text-services{
	  width:96% !IMPORTANT;
	  margin-left:2% !IMPORTANT;
  }
.home-begin-container{
	height:max-content !IMPORTANT;
}
  .contact-home .rightside-section-homeabout{
	width:97%;  
  }
  .contact-home .leftside-sec-home-about h3{
	  font-size:40px;
  }
  .serviciialb .image-service{
	  margin-right:0% !IMPORTANT;
  }
  .third-section-contain h3{
	  font-size:7vw;
  }
  .serviciialb .text-services{
	  float:none !IMPORTANT;
  }
  .serviciidoi{
	  height:max-content !IMPORTANT;
  }
  .contentserviciidoi {
	  height:max-content !IMPORTANT;
	  padding-bottom:20vh !IMPORTANT;
  }
  
  .contentserviciidoi .image-service{
	  margin-top:1vh !IMPORTANT;
  }
  .colum-galerie-home img{
	  width:96%;
  }
  .rightside-sec-home-about{
	  float:none !IMPORTANT;
  }
  .contentservicii h3{
	  font-size:10vw !IMPORTANT;
  }
  .contact-card{
	  width:96%;
	  	  margin-bottom:1vh;
		  margin-left:2%;
  }
  .contact-method{
	  flex-direction: column;
  }
  .contact-card h3{
	font-size:10vw !IMPORTANT;  
	}
	.contact-card a{
		font-size:5vw !IMPORTANT;  
	}
	.contact-form{
		width:96%;
		margin-left:2%;
		flex-direction: column;
	}
	.formular-contact{
		width:100%;
	}
	.logo-contact{
		display:none;
	}
}