/*Note: you need to move more of the inline stylesheet from the HTML to the CSS. the CSS works now, just bear in mind to 
avoid the semicolon at the end of each element. */



body {
	
	color: white;
	width: html.width;
	margin-top: 2% 
	margin-left: auto;
	margin-right:auto;
	font-family: "Lato", sans-serif;

}

hr {

}

.navbar {

	background-color:white;
	border-bottom: 1px solid white;
	z-index:7;
}


#video_container {
	width:100%;
	position:relative;
	display:block;
	float:left;
	top:30px;
	z-index:6;
}



#presentazione {

	width: 100%;
	position:relative;
	display: block;
	float:left;
	background-color: rgb(50, 168, 82);
	background-position: center center;
	background-size: contain;
	object-fit: cover;
	opacity:0.6;
	/*NB: if you use "filter:opacity(60%)" it will mess up the whole thing; use "opacity:0.6;" instead*/
	z-index:6;
}


/*#screenshot_light_air {

display: none;
width: 100%;
float:left;
}*/

.content {
	width:100%;
	position: absolute;
	top: 50%;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 10%;
	text-shadow:0px 4px 3px rgba(0,0,0,0.4),
				0px 8px 13px rgba(0,0,0,0.1),
				0px 18px 23px rgba(0,0,0,0.1);
	background-color: transparent;
	z-index: 6;
}

.btn {

	background-color: transparent;
	color: white;
	border: 2px solid white;
	letter-spacing: 5;
    margin-top: 40px;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow:0px 4px 3px rgba(0,0,0,0.4),
				0px 8px 13px rgba(0,0,0,0.1),
				0px 18px 23px rgba(0,0,0,0.1);
	box-shadow: 0px 4px 3px rgba(0,0,0,0.4),
				0px 8px 13px rgba(0,0,0,0.1),
				0px 18px 23px rgba(0,0,0,0.1);

}

.btn:hover {

	opacity: 60%;
	transition: 0.5s;
	background-color: white;
	text-shadow:none;
	box-shadow:none;
	font-weight: 800;
	border: 2px solid white;

}

.btn:focus {

}


#preorder_btn:focus {

	outline: 2px solid white !important;
	background-color: transparent !important;
	color: white !important;
	border-radius: 6px !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}


#crowdfunding_btn {
	text-shadow: none;
	box-shadow: none;
	letter-spacing: 0;

}

#crowdfunding_btn:focus {
	outline: 2px solid white !important;
	background-color: transparent !important;
	color: white !important;
	border-radius: 6px !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}


#learn_more_btn {

	text-shadow: none;
	box-shadow: none;
	letter-spacing: 0;
	
}

#learn_more_btn:focus {

	outline: 2px solid white;
	background-color: transparent;
	color: white;
	border-radius: 6px;
}



h1 {
	font-weight:700;
	font-size:50;
	letter-spacing: 5;
	margin-bottom:40px;

}

h2 {
	margin-bottom: 4%;
	font-weight: 700;
	letter-spacing: 5;

}

h3 {
	font-weight:700;
	font-size:25;
}

p {
	font-weight: 600;
	margin-top: 2.5%;
}

ol {
	font-weight: 600;
	margin-top: 2.5%;
	text-align: left;
}

li {
	font-weight: 600;
	margin-top: 2.5%;
	text-align: left;
}

i {

}

.section-colored {
	width: 100%;
	display: block;
	float: left;
	padding-left: 20%;
    padding-right: 20%;
    padding-top: 4%;
    padding-bottom: 4%;
    color: white;
    text-align: center;
 	position: relative;
	font-size: 20px;
	
	}

.section-white {
	width:100%;
	display: block;
	float:left;
	padding-left: 20%;
    padding-right: 20%;
    padding-top: 4%;
    padding-bottom: 4%;
    color: rgb(0,153,176); /*bondi blue*/
    text-align: center;
    width:100%;
	position: relative;
	top: 1px;
	font-size: 20px;
	background-color: white;
	
	}

#section1 {

	background-color: orange;
	position:relative;
	top: 30px;

}

#section2 {

}

#section3 {

	background-color: rgb(51, 153, 255);
	padding-bottom: 9%;
}

#maggiori-informazioni {

	background-color: rgb(0, 153, 153);
}

.icon-container {

	float:left;
	display: block;


}

.icon-frame {

	float: left;
	display: inline;
	width: 33%;
	margin-top: 30px;
	margin-bottom: 20px;
}

.icon-description {

	margin-top: 40px;
}

.icon-further-descr {

	padding-top: 30px;
	padding-right: 30px;
	padding-left: 30px;
	font-size: 80%;
}

.spacer1 {

	min-width:100%;
	max-width:100%;
/*	display: block;
	float: left;*/
	margin: 2px auto;
}

.footer-container {

	height: 45px;
	width: 100%;
	background-color: #101010;
	position:relative;
	display: block;
	float:left;

}

form.validate {

	background-color: rgb(51, 153, 255);
}

#crowdfunding_btn_txt_mobile {
	display: none;
}

.long_text {
	text-align:left;
}

.subtitle_more_info {
	margin-top: 80px; 
	text-decoration: underline;
}

.ol_more_info {
	padding-left:0%;
}

.li_more_info {
	margin-left:30px; 
	padding-left:10px;
}

.img_more_info {
	width:100%;
	margin-top: 80px;
	border-radius:4%;

}

figcaption {
	font-style:italic;
	text-align:left;
}

#static_footer {

	padding-top: 2%;
	padding-bottom: 2%;

}

.ftr_elements {

	margin: 0 auto;
	color: black;
}

#author_signature {
	font-size: 80%;
	padding-top: 2%;
	color: black;

}

#terms, #author_name {
	text-decoration: underline;
	color: black;
	
}

#terms:focus, #author_name:focus {
	color: black;

}

#terms:hover, #author_name:hover, #reddit_text:hover {
	background-color: orange;
	transition: 0.6;
	color: black;

}

#termini_e_condizioni {
	background-color: grey;
}



#back_to_home_btn {
font-size: 70%;
width: 25%;

}

#back_to_home_btn:hover {
background-color: orange;
transition: 1s;
text-decoration: none; 
		
}


/*cookie banner styling*/
.cc-banner.cc-bottom {
    left: 0;
    right: 0;
    bottom: 0;
}
.cc-window.cc-banner {
    -ms-flex-align: center;
    align-items: center;
}
.cc-window.cc-banner {
    padding: 1em 1.8em;
    width: 100%;
    -ms-flex-direction: row;
    flex-direction: row;
}

.cc-color-override--672889400.cc-window {
    color: rgb(255, 255, 255);
    background-color: rgb(15, 14, 15);
}
.cc-bottom {
    bottom: 1em;
}
.cc-revoke, .cc-window {
    position: fixed;
    overflow: hidden;
    box-sizing: border-box;
    font-family: Helvetica,Calibri,Arial,sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    z-index: 9999;
}
.cc-window {
    opacity: 1;
    transition: opacity 1s ease;
}

#cookie_consent_btn {
	padding: 10%;
	border-radius: 5%;
	background-color: green;
	color: white;
}

.cookie_banner_collapsed {
	visibility: hidden;
	transition: visibility 0.1s ease;
}

/*end of cookie banner styling*/

	/*tablet-size viewport*/
	@media (min-width: 1019px) and (max-width: 1121px) {

		#video_container {
			display:block;
			float:left;
		}

		#presentazione {

		/*	position: relative;*/
		/*	top: 30px; */


		}	

/*		#screenshot_container {
			width:100%; 
			float:left; 
			display:none; 
			position:relative; 
			top:30px;
		}*/

/*		#screenshot_light_air {

		display: none;
		width:100%;
		float:left;

		}*/

		#preorder_btn:focus {

		outline: 2px solid white !important;
		background-color: transparent !important;
		color: white !important;
		border-radius: 6px !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
		}

		.content {

		position: absolute;
		top: 50%;
		padding-bottom: 25%;
		

		}

		#section1 {
		top: 60px;
		padding-bottom: 10%;
		}

		.icon-frame {

		float: left;
		width: 100%;

		}

		#crowdfunding_btn_txt_mobile {

		display: none;
		}

		#crowdfunding_btn:focus {
			outline: 2px solid white !important;
			background-color: transparent !important;
			color: white !important;
			border-radius: 6px !important;
			-webkit-box-shadow: none !important;
			box-shadow: none !important;
		}

		#learn_more_btn {
		color: white;
		border: 2px solid white;
		margin: 10% auto;
		font-size: 80%;
		}

		#learn_more_btn:focus {
		color: white !important;
		}

		.ftr_elements {

		margin: 0 auto;
		color: black;
		}

		#author_signature {
			font-size: 80%;
			padding-top: 2%;
			color: black;

		}

		#author_name {
			text-decoration: underline;
			color: black;
			
		}

		#author_name:focus {
			color: black;

		}

		#author_name:hover {
		background-color: orange;
		transition: 0.6;
		}

		#termini_e_condizioni {
		background-color: grey;
		}


		#back_to_home_btn {
		font-size: 70%;

		}

		#back_to_home_btn:hover {
		background-color: orange;
		transition: 1s;
		text-decoration: none; 
		
		}
	}


	/*mobile-size viewport*/
	@media (max-width: 1018px) {

		#video_container {
			
			position:relative;
			top:20px;
			
		}

/*		#presentazione {

			position: relative;
			top: 30px;

		}*/

/*		#screenshot_light_air {

			display:none;
			width:100%;
			float:left;
			margin-top:4%;
		}*/

		.content {

		width:100%;
		position: relative;
		top: 90px;
		padding-left: 10%;
		padding-right: 10%;
		padding-bottom: 10%;
		text-align: center;
		color: rgb(0,153,176); /*bondi blue*/
		text-shadow:none;

		
		}


		.btn {

	    background-color: transparent;
		border: 2px solid rgb(0,153,176); /*bondi blue*/
	    margin-top: 40px;
	    margin-bottom: 30%;
	    font-size: 20px;
	    color: rgb(0,153,176); /*bondi blue*/
	    text-shadow:none;
	    box-shadow: none;
	    	
	    	}

	    .btn:hover {

	    border: 3px solid rgb(76, 118, 144);
	    transition: 0.3s;
	    color: rgb(76, 118, 144);

	    }

	    h1 {
	    font-size:35;
	    letter-spacing:0;
	    }

	    h2 {

	    margin-bottom: 30px;

	    }

	    #preorder_btn:focus {

		outline: 2px solid rgb(0,153,176) !important; /*bondi blue */
	    background-color: transparent !important;
		border: 2px solid rgb(0,153,176) !important; /*bondi blue */
		color: rgb(0,153,176) !important; /*bondi blue */
		border-radius: 6px !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
		}

		#section1 {
		padding-bottom: 10%;
		}

	    .icon-frame {

		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
		
		}

		#crowdfunding_btn {

		color: white;
		border: 2px solid white;
		margin: 10% auto;
		font-size: 80%;


		}

		#crowdfunding_btn:hover {

		color: rgb(76, 118, 144);
		border: 2px solid white;
		transition: 0.3s;
		
		}

		h2 {

		letter-spacing: 0px;


		}

		#crowdfunding_btn_txt_desktop {

		display: none;

		}

		#crowdfunding_btn_txt_mobile {

		display: inline-block;

		}

		#learn_more_btn {

		color: white;
		border: 2px solid white;
		margin: 10% auto;
		font-size: 80%;

		}

		#learn_more_btn:hover {

		color: #000000;

		}

		#learn_more_btn:focus {
		color: white !important;
		}

		#maggiori-informazioni {
		padding-left: 5%;
    	padding-right: 5%;
    	font-size:20px;
    	}

    	.ftr_elements {

		margin: 0 auto;
		color: black;
		}

		#author_signature {
			font-size: 80%;
			padding-top: 2%;
			color: black;

		}

		#author_name {
			text-decoration: underline;
			color: black;
			
		}

		#author_name:focus {
			color: black;

		}

		#author_name:hover {
		background-color: orange;
		transition: 0.6;
		}

		#termini_e_condizioni {
		background-color: grey;
		}

		#back_to_home_btn {
		font-size: 70%;
		width:50%;

		}

		#back_to_home_btn:hover {
		background-color: orange;
		transition: 1s;
		text-decoration: none; 
		
		}
	}