body{
	background-color: #3EBFFF;
	cursor: default;
	margin: 0;
	font-family: 'Fraunces', sans-serif;
}

#navbarMobile{
	display: none;
}

.sidepanel{
	display: none;
	font-family: 'Barlow', sans-serif;
	font-weight: 600;
}

#navbar{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 50px;
	margin: 0 25px;
	font-family: 'Barlow', sans-serif;
	font-weight: 600;
}

#navbar div{
	display: flex;
	flex-direction: row;
	height: 100%;
	align-items: center;
	justify-content: space-between;
	width: 30%;
}

#navbar a{
	color: white;
}

#navbar a:hover{
	cursor: pointer;
	color: hsl(167, 40%, 24%);
}

#navbar button{
	background-color: white;
	border-style: none;
	border-radius: 25px;
	height: 40px;
	width: 120px;
	text-transform: uppercase;
	font-weight: bold;
	font-family: 'Fraunces', sans-serif;
}

#navbar button:hover{
	color: white;
	background-color: hsl(0, 100%, 100%, 0.5);
	cursor: pointer;
}

.conteiner{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.section-1{
	text-align: center;
	color: white;
	grid-column: span 4; 
}

.background{
	width: 100%;
	height: 100%;
}

.section-1 h1{
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-transform: uppercase;
	letter-spacing: 5px;
	font-weight: 900;
}

.arrow{
	position: absolute;
	top: 67%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 100px;
}

.section-2, .section-5{
	grid-column: span 2;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: start;
	padding: 20%;
}

.section-2 h2, .section-5 h2{
	font-size: 50px;
	margin-bottom: 0;
}

.section-2 p, .section-5 p{
	line-height: 1.5;
	font-family: 'Barlow', sans-serif;
}

.section-2 a, .section-5 a{
	text-transform: uppercase;
	font-weight: bold;
}

.yellow{
	padding: 0 5px;
	box-shadow: inset 0 -0.4em 0 0 hsl(51, 100%, 49%, 25%);
}

.yellow:hover{
	padding: 0 5px;
	box-shadow: inset 0 -0.4em 0 0 hsl(51, 100%, 49%);
	cursor: pointer;
}

.red{
	padding: 0 5px;
	box-shadow: inset 0 -0.4em 0 0 hsl(7, 99%, 70%, 25%);
}

.red:hover{
	padding: 0 5px;
	box-shadow: inset 0 -0.4em 0 0 hsl(7, 99%, 70%);
	cursor: pointer;
}

.section-3, .section-4{
	grid-column: span 2;
}

.section-3 img, .section-4 img{
	height: 100%;
	width: 100%;
}

.section-6{
	color: hsl(167, 40%, 24%);
}

.section-7{
	color: hsl(198, 62%, 26%);
}

.section-6, .section-7{
	grid-column: span 2;
	position: relative;
	text-align: center;
}

.section-6 img, .section-7 img{
	height: 100%;
	width: 100%;
}

.section-6 div, .section-7 div{
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 45%;
}

.section-6 p, .section-7 p{
	font-family: 'Barlow', sans-serif;
}

.section-8{
	grid-column: span 4;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background-color: white;
	text-align: center;
	padding: 5% 10%;
	grid-gap: 30px 10px;
}

.section-8 h3{
	grid-column: span 3;
	text-transform: uppercase;
	letter-spacing: 5px;
	color: hsl(210, 4%, 67%);
}

.section-8 h5{
	margin-bottom: 5px;
}

.section-8 h6{
	margin-top: 5px;
	color: hsl(210, 4%, 67%);
	font-family: 'Barlow', sans-serif;
}

.section-8 p{
	line-height: 1.5;
	font-family: 'Barlow', sans-serif;
}

.profile{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.profile img{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-bottom: 15px;
}

.section-9 img, .section-10 img,.section-11 img,.section-12 img{
	width: 100%;
	height: 100%;
}

footer{
	background-color: rgb(144, 212, 197);
	height: 250px;
	margin-top: -5px;
	color: hsl(168, 34%, 41%);
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.links{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 30%;
	padding-bottom: 30px;
	font-family: 'Barlow', sans-serif;
	font-weight: 600;
}

.links a:hover{
	cursor: pointer;
	color: white;
}

.footerLogo{
	height: 30px;
	margin-top: 40px;
	filter: brightness(0) saturate(100%) invert(50%) sepia(8%) saturate(2248%) hue-rotate(118deg) brightness(95%) contrast(83%);
}

.social{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 20%;
	padding-bottom: 20px;
}

.socialIco:hover{
	cursor: pointer;
	filter: brightness(0) saturate(100%) invert(100%) sepia(11%) saturate(7479%) hue-rotate(290deg) brightness(121%) contrast(99%);
}

@media (max-width: 500px){
	.conteiner{
		grid-template-areas: 'section-1 section-1 section-1 section-1'
							 'section-3 section-3 section-3 section-3'
							 'section-2 section-2 section-2 section-2'
							 'section-4 section-4 section-4 section-4'
							 'section-5 section-5 section-5 section-5'
							 'section-6 section-6 section-6 section-6'
							 'section-7 section-7 section-7 section-7'
							 'section-8 section-8 section-8 section-8'
							 'section-8 section-8 section-8 section-8'
							 'section-8 section-8 section-8 section-8'
							 'section-9 section-9 section-10 section-10'
							 'section-11 section-11 section-12 section-12';
	}
	
	.section-1{
		grid-area: section-1;
	}
	
	.section-2{
		grid-area: section-2;
	}
	
	.section-3{
		grid-area: section-3;
	}
	
	.section-4{
		grid-area: section-4;
	}
	
	.section-5{
		grid-area: section-5;
	}
	
	.section-6{
		grid-area: section-6;
	}
	
	.section-6 p, .section-7 p{
		font-size: 20px;
		margin: 0 -50%;
	}
	
	.section-7{
		grid-area: section-7;
	}
	
	.section-8{
		grid-area: section-8;
		display: flow;
		flex-direction: column;
		justify-content: space-around;
	}
	
	.section-9{
		grid-area: section-9;
	}
	
	.section-10{
		grid-area: section-10;
	}
	
	.section-11{
		grid-area: section-11;
	}
	
	.section-12{
		grid-area: section-12;
	}
	
	.links{
		width: 100%;
		justify-content: space-around;
	}
	
	.social{
		width: 35%;
	}
	
	.background{
		content: url("images/mobile/image-header.jpg");
	}
	
	.section-3 img{
		content: url("images/mobile/image-transform.jpg");
	}
	
	.section-4 img{
		content: url("images/mobile/image-stand-out.jpg");
	}
	
	.section-6 img{
		content: url("images/mobile/image-graphic-design.jpg");
	}
	
	.section-7 img{
		content: url("images/mobile/image-photography.jpg");
	}
	
	.section-9 img{
		content: url("images/mobile/image-gallery-milkbottles.jpg");
	}
	
	.section-10 img{
		content: url("images/mobile/image-gallery-orange.jpg");
	}
	
	.section-11 img{
		content: url("images/mobile/image-gallery-cone.jpg");
	}
	
	.section-12 img{
		content: url("images/mobile/image-gallery-sugar-cubes.jpg");
	}
	
	#navbar{
		display: none;
	}
	
	#navbarMobile{
		position: fixed;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		margin-left: 5%;
		z-index: 1;
	}
	
	.sidepanel{
		width: 0;
		position: fixed;
		z-index: 1;
		height: 250px;
		top: 15%;
		right: 10%;
		background-color: white;
		overflow-x: hidden;
		transition: 0.5s;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		padding: 5% 0;
	}
	
	.sidepanel:before{
		content: '';
		position: absolute;
		width: 0;
		height: 0;
	}
	
	.sidepanel:before{
		right: 0;
		top: -15%;
		border: 25px solid;
		border-color: transparent white white transparent;
	}
	

	

	
	.sidepanel a{
		font-size: 20px;
		color: hsl(232, 10%, 55%);
		transition: 0.3s;
		cursor: pointer;
	}
	
	.openbtn{
		border: none;
		background-color: transparent;
		color: white;
		font-size: 20px;
		cursor: pointer;
	}
	
	#mySidepanel button{
		width: 40%;
		height: 50px;
		border-radius: 50px;
		border: none;
		text-transform: uppercase;
		background-color: hsl(51, 100%, 49%);
		color: black;
		cursor: pointer;
		font-weight: bold;
		font-size: 15px;
		font-family: 'Fraunces', sans-serif;
	}
}