*{
			box-sizing: border-box;font-family: 'Roboto Flex',sans-serif;
		}
       html,body{
			margin: 0;padding: 0;
		}
       body{
			background-color: rgb(0,0,0);
		}
       .logo{
			width: 150px;height: auto;
		}
       header{
			display: flex;justify-content: space-between;align-items: center;color: rgb(200,20,20);
			font-size: 30px;position: absolute;background-color: transparent;width: 100%;
			padding: 20px 5%;
		}
       header button{
			background-color: rgb(200,20,20);color: white;border: none;width: 75px;height: 35px;font-size: 15px;border-radius: 3px;cursor: pointer; 
		}
       .firstdiv{
			position: relative; width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;
			text-align: center;font-size: 20px;color: white;height: 1
			height: 600px;z-index: -1;margin-bottom: 100px;
			
		}
       .firstdiv::before{
			content: "";position: absolute;background: black;background-image: url('wallpaper.png');
	        width: 100%;height: 600px;filter: brightness(50%);z-index: -1;left: 0;top: 0;right: 0;bottom: 0;
	        background-size: cover;background-repeat: no-repeat;padding-bottom: 100px;
	        border-bottom: 8px solid rgb(40,40,40);
		}
        .firstdiv> div{
			width: 600px;margin-top: 150px;
		}
        .f2{
			margin-top: 10px;line-height: 40px;
		}
		.f1{
			font-size: 55px;
		}
		.mailly{
			width: 90%;height: 65px;padding-left: 5px;border: none;
		}
		.firstbtn{
			background-color: rgb(200,20,20);color: white;border: none;width: 180px;height: 65px;font-size: 20px;
			border-radius: 0px 3px 3px 0px;cursor: pointer;display: inline;
		}
		.myform{
			display: flex;justify-content: center;align-items: center;margin-top: 5px;
			padding-bottom: 150px;
		}
		span{
			display: inline-block;
		}
		#error{
				color: rgb(250,150,0);text-align: left;width: 420px;padding-left: 0px;margin-top: 10px;
			}
		.desktop{
			display: none;
		}
		.mobile{
			display: block;
		}
		.box{
			background-color: black;width: 250px;height: 100px;padding: 0px 20px;
			 position: absolute;top: 210px;left: 90px; border-radius: 10px;
			display: flex;justify-content: space-between;align-items: center;
			flex-direction: row;color: white;font-size: 16px;border: 2px solid rgb(40,40,40);
		}
		.blue{
			color: rgb(50,100,255);
		}
		main{
			color: white;
		}
		main .text{
			font-size: 30px;margin-top: 0;
		}
		main h1{
			font-size: 50px;margin-bottom: 10px;
		}
		.row{
			display: flex;flex-direction: row;justify-content: center;align-items: center; padding: 90px 30px 90px 30px;
			border-bottom: 8px solid rgb(40,40,40);
		}
		.col1{
			margin-right: 100px;
		}
		.col2{
			position: relative; width: 430px;padding: 0;
		}
		.col2-img{
			width: 430px; height: 330px;
		}
		.imager{
			width: 40px;height: 50px;
		}
		.loader{
			border-left: 2px solid rgb(50,100,255);border-right: 2px solid rgb(50,100,255);border-top: 4px solid rgb(50,100,255);
			border-bottom: 4px solid rgb(50,100,255);padding: 2px 2px;
		}
		footer{
			color: rgb(100,100,100);font-size: 14px;padding: 3%;
		}
		footer h3{
			margin-left: 40px;
		}
		footer li{
			list-style-type: none;
		}
		footer a{
			color: rgb(100,100,100);text-decoration: none;
		}
		footer .targ1{
			display: grid;grid-template-columns: repeat(2,1fr);line-height: 40px;
		}
		footer .targ2{
			display: none;
		}
		footer .targ3{
			display: none;
		}
		footer p{
			margin-left: 40px;
		}
		.foot-row2{
			
		}
		aside{
			color: white;display: flex;justify-content: center;align-items: center;
			flex-direction: column;border-bottom: 8px solid rgb(40,40,40);padding: 20px 0px;
		}
		aside h1{
			font-size: 45px;
		}
		.free-quest{
            display: flex;justify-content: center;align-items: center;flex-direction: column;width: 700px;
           font-size: 30px;margin-bottom: 8px;
		}
		.preview{
			margin-bottom: 1px;background-color: rgb(50,50,50);width: 100%;height: 80px;line-height: 80px;display: flex;justify-content: space-between;align-items: center;padding: 15px 15px;
		}
		.solution{
			background-color: rgb(50,50,50);padding: 25px 25px;display: none;
		}
		.aside-form{
			margin-top: 50px;
		}
		aside .f2{
			font-size: 20px;text-align: center;
		}
		aside .mailly{
			width: 500px;
		}
		@media(max-width: 480px){
			header{
				padding: 20px 5%;
			}
			header button{
				width: 60px;padding: 0px;height: 25px;
			}
			.logo{
			width: 100px;height: 25px;
		}
			.f1{
				font-size: 30px;
			}
			.f2{
				line-height: 30px;
			}
			.firstdiv> div{
			width: 95%; margin-top: 130px;
	}
	.firstdiv{
		height: 100%;margin-bottom: 0px;
	}
	.firstdiv::before{
	height: 400px;
	}
	.myform{
		flex-direction: column;
	}
	.mailly{
		width: 90%;height: 50px; padding-left: 5px;
	}
	.firstbtn{
		width: 130px;height: 45px;margin-top: 10px;border-radius: 3px;font-size: 16px;
	}
	#error{
		width: 90%;
	}
	main .text{
			font-size: 20px;margin-top: 0;
		}
		main h1{
			font-size: 25px;margin-bottom: 10px;
		}
	.row{
		flex-direction: column;padding: 30px 10px 35px 10px;justify-content: center; text-align: center;
	}
		.col2{
			position: relative; width: 300px;padding: 0;
		}
	.col1{
		margin-right: 0;font-size: 14px;
	}
	.col2-img{
			width: 300px; height: 250px;
		}
		.box{
			top: 170px; left: 20px;height: 70px;padding: 5px 10px;
		}
		.hello{
			width: 200px;height: 2px;
		}
		.free-quest{
			width: 100%; font-size: 20px;
		}
		aside h1{
			font-size: 30px;text-align: center;padding: 10px;
		}
		.preview{
			height: 60px;
		}
		aside .mailly{
			width: 95%;
		}
	}
@media (min-width: 481px) and (max-width: 977px){
		.firstdiv> div{
			width: 480px;
		}
		.firstdiv::before{
			padding-bottom: 300px;height: 500px;
		}
		.logo{
			width: 100px
		}
		.myform{
			flex-direction: column;
		}
		.mailly{
				width: 80%;height: 55px;margin-bottom: 10px;padding-left: 5px;
			}
		.firstbtn{
				width: 120px;height: 45px;border-radius: 3px 3px;font-size: 15px;
			}
		.row{
				flex-direction: column;text-align: center;
			}
		.col1{
			margin-right: 0px;margin-bottom: 80px;
		}
		.col2-img{
			width: 400px;height: 300px;
		}
		.box{
			left: 75px;
		}
		main .text{
			font-size: 23px;margin-top: 0;
		}
		main h1{
			font-size: 40px;
		}
		.f2{
			font-size: 25px;text-align: center;margin-top: 15px;
		}
		.free-quest{
			width: 470px;
		}
		aside h1{
			font-size: 35px;
		}
		aside .mailly{
			width: 90%;
		}
		footer .targ1{
			display: none;
		}
		footer .targ2{
			display: grid;grid-template-columns: repeat(3,1fr);line-height: 40px;
		}
		footer .targ3{
			display: none;
		}
		}
		@media(min-width: 978px){
			.mobile{
				display: none;
			}
			.desktop{
				display: block;
			}
			.myform{
				flex-direction: row;
			}
			footer .targ1{
			display: none;
		}
		footer .targ2{
			display: none;
		}
			footer .targ3
			{
				display: grid;grid-template-columns: repeat(4,1fr);line-height: 30px;
			}
		}