@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@300;400;500;600;700&display=swap');



*{

	padding: 0;

	margin: 0;

	box-sizing: border-box;

}



body{

	font-family: 'Google Sans', sans-serif;

}



.wrapper{

	width: 80%;

	margin: 0 auto;

}



.wrapper-global-stats{

	width: 100%;

	margin-top: 50px;

	margin: 0 auto;

}



.wrapper-tutorial{

	width: 100%;

	margin: 0 auto;

}



header{

	padding: 20px 0px;

	box-shadow: rgb(0 0 0 / 11%) 0 1px;

}



nav{

	display: flex;

	align-items: center;

	justify-content: space-between;

	font-family: 'Google Sans', sans-serif;

}



/* nav img{ #unselect this if you use an image!

	height: 50px;

	width: auto;

} */



nav span{

	color: #03a1fc;

}



.right a{

	color: black;

	font-weight: 400;

	margin-left: 10px;

	text-decoration: none;

	letter-spacing: 0.07rem;

}



.right a:hover{

	color: #03a1fc;

	transition: all .2s;

}



main{

	margin-top: 20px;

	margin-bottom: 20px;

}



.section-promo{

	position: relative;

	padding: 20px 0px;

}



.promo-background h1{

	color: black;

	font-size: 30px;

	padding: 40px 10px;

	position: absolute;

	bottom: 0;

	left: 0;

	letter-spacing: 0.07rem;

}



.promo-background{

	color: white;

	border-radius: 5px;

	background-size: cover;

	width: auto;

	height: 200px;

	padding: 10px;

	background-position: center;

	background-repeat: no-repeat;

	background-color: rgba(0, 0, 0, 0.5);

	background-image: url(../img/promo.png);

	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

}



.section-tutorial{

	padding: 50px 0px;

}



.section-tutorial h2{

	font-size: 50px;

	margin-bottom: 20px;

}



.section-tutorial-container{

	display: flex;

	align-items: baseline;

	justify-content: space-between;

}



.section-tutorial-container div{

	width: 350px;

  	height: auto; /*or use height: auto; if the box height looks weird and see above then change line 98 to align-items: top;*/

	margin-right: 10px;

  	padding: 10px 10px;

	background-color: whitesmoke;

	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

}



.section-tutorial-container div i{

	margin-right: 5px;

}



.section-tutorial-container div h3{

	color: #03a1fc;

	font-size: 13px;

	text-transform: uppercase;

}



.section-tutorial-container div p{

	color: black;

	padding: 10px 0px;

	font-size: 15px;

}



.section-tutorial-container h4{

	padding: 10px 0px;

	font-weight: 500;

}



.dsc a{

	font-size: 12px;

	color: white;

	padding: 5px 10px;

	border-radius: 3px;

	text-decoration: none;

	background-color: #7289DA;

	text-transform: uppercase;

	letter-spacing: 0.02rem;

	font-weight: 700;

	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

}



.lnumbers1{

	color: white;

	padding: 1px 11px;

	background-color: #03a1fc;

}



.lnumbers{

	color: white;

	padding: 1px 10px;

	background-color: #03a1fc;

}



button{

	color: black;

	border-radius: 3px;

	padding: 5px 8px;

	border: 1px solid #03a1fc;

	background-color: #22aeff54;

}



button:hover{

	cursor: pointer;

	color: whitesmoke;

}



hr{

	margin-top: 2rem;

	margin-bottom: 1rem;

}



.section-extra h2{

	font-size: 50px;

	margin-bottom: 20px;

	text-align: right;

}



.section-extra-staff{

	font-size: 50px;

	margin-bottom: 20px;

	text-align: center;

}



.section-extra-flex{

	display: flex;

	align-items: baseline;

	justify-content: space-between;

}



.section-extra-flex div{

	color: white;

	width: 350px;

	height: auto;

	border-radius: 5px;

	padding: 10px 10px;

	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

}



.section-extra-flex p{

	color: white;

	padding: 10px 0px;

}



.section-extra-flex a{

	color: #03a1fc;

	padding: 5px 10px;

	border-radius: 3px;

	text-decoration: none;

	background-color: white;

}



/* STATISTICS */

.wrapper-global-stats{

	margin-top: 1rem;

	margin-bottom: 1rem;

}



.wrapper-global-stats h2{

	font-size: 50px;

	margin-bottom: 20px;

	text-align: center;

}



.section-global-stats{

	display: flex;

	color: #03a1fc;

	margin-bottom: 70px;

	text-align: center;

	align-content: center;

	justify-content: space-between;

}



.section-global-stats div{

	width: auto;

	height: auto;

	padding: 20px;

	border-radius: 3px;

	border: 1px solid #03a1fc;

	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

}



.section-global-stats div i{

	font-size: 50px;

	padding: 10px;

}



.section-global-stats div h1{

	padding: 5px 20px;

	font-size: 25px;

	font-weight: 400;

}



.section-global-stats div h3{

	padding: 0px 20px;

	font-size: 20px;

}



/* IMAGES SET HERE YOUR IMAGE */

.img1{

	background-size: cover;

	background-position: center;

	background-repeat: no-repeat;

	background-color: #03a1fc;

	/* background-image: url(../img/1.jpg); */

}



.img2{

	background-size: cover;

	background-position: center;

	background-repeat: no-repeat;

	background-color: #03a1fc;

	/* background-image: url(../img/2.jpg); */

}



.img3{

	background-size: cover;

	background-position: center;

	background-repeat: no-repeat;

	background-color: #03a1fc;

	/* background-image: url(../img/3.jpg); */

}



.img4{

	background-size: cover;

	background-position: center;

	background-repeat: no-repeat;

	background-color: #03a1fc;

	/* background-image: url(../img/4.jpg); */

}



footer{

	margin-top: 40px;

	padding: 10px;

	text-align: center;

	margin-bottom: 1rem;

}



/* MEDIA PORT, MOBILE*/

@media only screen and (max-width: 1300px) {



	button{

		margin-top: 10px;

	}



	.section-extra-flex{

		display: flex;

		align-items: baseline;

		justify-content: space-between;

	}

	

	.section-extra-flex div{

		color: white;

		width: 250px;

		height: auto;

		border-radius: 5px;

		padding: 10px 10px;

		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

	}



}



/* MEDIA PORT, MOBILE*/

@media only screen and (max-width: 768px) {



	header{

		padding: auto;

	}



	.wrapper{

		width: 90%;

		margin: 0 auto;

	}



	.wrapper-tutorial{

		width: 100%;

		margin: 1 auto;

	}



	nav h2{ /* Community name */

		font-size: 20px;

	}



	.section-tutorial h2{

		font-size: 27px;

		margin-bottom: 20px;

		text-align: left;

	}



	.section-tutorial-container{

		display: flex;

		align-items: top;

		flex-direction: column;

		justify-content: space-between;

	}



	.section-promo div{

		color: white;

		border-radius: 5px;

		background-size: cover;

		width: auto;

		height: auto;

		padding: 20px;

		background-position: center;

		background-repeat: no-repeat;

		background-color: rgba(0, 0, 0, 0.5);

		background-image: url(../img/promo.png);

		box-shadow: rgb(0 0 0 / 11%) 0 1px;

	}



	.section-tutorial-container{

		display: flex;

		align-items: flex-start;

		justify-content: flex-start;

	}



	.section-tutorial-container div{

		margin-bottom: 20px;

	}



	.section-extra-flex div{

		color: white;

		width: auto;

		height: auto;

		border-radius: 5px;

		padding: 10px 0px;

		margin-bottom: 20px;

		box-shadow: rgb(0 0 0 / 15%) 2px 2px;

	}



	.right a{

		color: black;

		font-size: 15px;

		font-weight: 400;

		padding: 10px 5px;

		text-decoration: none;

		letter-spacing: 0.02rem;

	}



	.section-extra-flex{

		flex-direction: column;

	}



	.section-extra-flex h3{

		padding: 5px 10px;

	}



	.section-extra-flex p{

		padding: 5px 10px;

		font-size: 13px;

	}



	.section-extra-flex a{

		padding: 2px 5px;

		font-size: 13px;

	}

	

	.section-extra h2{

		font-size: 30px;

		/* margin-bottom: 20px; */

	}



	.section-global-stats{

		display: flex;

		flex-direction: column;

		justify-content: stretch;

	}



	.wrapper-global-stats h2{

		font-size: 40px;

	}



	.section-global-stats div{

		margin-bottom: 20px;

	}



	footer{

		display: none;

	}



	.webtemplatestaffteam {

		text-align: center;

	  }

}