/* CSS Document */
/* Desktop */
/*MEDIA 601+*/

@font-face {
	font-family: "Quicksand";
	font-display: swap;
	src: url(/font/Quicksand-Regular.woff2) format("woff2");
}

@media screen 
and (max-width: 1200px)
and (orientation: portrait) {

* {
	box-sizing: border-box;
}
html{
	overflow-x:hidden;
}
/*Body*/
body{
/*Colors*/
	--my-first-color: #ff6C0C;
	--my-second-color: #3D4543;
	--my-third-color: #cacaca;
	--my-forth-color: white;

/*Font-Colors*/
	--my-first-font-color: #ff6c0C;
	--my-second-font-color: black;
	--my-third-font-color:#cacaca;
	--my-forth-font-color: white;

/*Fonts*/
	--my-font_p1: 200 4.5vw/1.2 'Quicksand', sans-serif;
	--my-font_p2: 300 3.2vw/1.2 'Quicksand', sans-serif;
	--my-font_p3: 300 0.1vw/1.0 'Quicksand', sans-serif;
	--my-font_h1: 300 8.0vw/1.0 'Quicksand', sans-serif;
	--my-font_a: 300 3.5vw/1.0 'Quicksand', sans-serif;
	--my-font_hero: 300 8vw/1.2 'Quicksand', sans-serif;

/*Buttons and borders*/
	--my-button-size: 8vw;
	--my-border: 2px var(--my-third-color) dashed;

	font: var(--my-font_p1);
	background-color: var(--my-forth-color);
	margin: 0%;
}
h1 {
	font: var(--my-font_h1)
}
.span_1{
	font-weight: 800;
}
.span_2{
	color:var(--my-first-color);
}
/*Header*/	
header{
    height: 15vh;
	width: 100%;
	position:sticky;
	top:0;
	display: flex;
	justify-content:space-between;
	align-items: center;
	background-color:var(--my-forth-color);
	border-bottom: 1px var(--my-first-color) solid;
	z-index: 99;
}
header img{
	display:flex;
	margin-left: 5vw;
	width: 10vh;
	align-items: center;
}
.btn_logo{
	transition: 0.5s;
}
.btn_logo:hover{
	transform: rotate(-5deg);
}
/* Navigation*/	
nav{
	display:none;
}
nav ul {
	list-style: none;
	display: flex;
	gap: 1rem;
}
nav a{
	font: var(--my-font_a);
	text-decoration: none;
	color: var(--my-second-font-color);
	transition: color 0.3s;
}
nav a:hover{
	color: var(--my-first-color);
}
.btn_header{
	color: var(--my-second-font-color);
	background-color: var(--my-forth-color);
	border: 1px var(--my-first-color) solid;
	border-radius: 100px;
	margin-right: 8vw;
	padding: 1vh 1vw;
	font: var(--my-font_a);
	text-decoration: none;
}
.btn_header:hover{
	color: var(--my-forth-font-color);
	background-color: var(--my-first-color);
}
.btn_header:active{
	color: var(--my-forth-font-color);
	background-color: var(--my-second-color);
	border-color: var(--my-second-color);
}
/*Main*/
main{
	padding: 0rem 1rem;
}
.hero {
	height: 15vh;
	width: 100%;
	display:flex;
	justify-content:center;
	align-items: center;
	text-align: center;
	margin:0;
}
.hero p{
	font: var(--my-font_hero);
	color: var(--my-first-font-color);
}
/*About me*/	
.ab {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 45vh 65vh;
	padding: 0vh 3vw;
	justify-content: center;
	align-items: center;
	border: var(--my-border);
	border-radius: 30px;
	background: url("../img/png/bg.png") bottom left;
}
.ab_grid_1{
	grid-column:1 / 2; 
  	grid-row: 1 / 2;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ab_grid_1 img{
	max-width: 25vh;
}
.ab_grid_2{
	grid-column:1 / 2; 
	grid-row: 2 / 3;
}
.ab_grid_2 p{
	color:var(--my-second-font-color);
	transform: rotate(3deg);
	text-align: center
}
/* Content Part I - Title*/
.l1_tit{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 22vh 12vh;
	align-items: flex-end;
	justify-items: center;
	margin-top: 10vh;
}
.l1_tit_grid_1 {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
.l1_tit_grid_1 h1{
	color:var(--my-first-font-color);
}
.l1_tit_grid_2 {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
.l1_tit_grid_2 img{
	width: 70vw
}
/*Learning 1*/	
.l1 {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 65vh 40vh;;
	justify-content: center;
	align-items: center;
	padding: 0vh 3vw;
	gap: 5vw;
	border: var(--my-border);
	border-radius: 30px;
	background: url("../img/png/bg.png") bottom left;
}
/*Learning1-Left Div*/
.l1_grid_1{
	grid-column: 1 / 2;
 	grid-row: 1 / 2;
}
.l1_grid_1 p{
	color:var(--my-second-font-color);
	transform: rotate(-3deg);
	text-align: center;
}
/*Learning1-Right Div*/
.l1_grid_2{
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
.l1_btn{
	height: 15vh;
 	width: 15vh;
	font: var(--my-font_p2);
	text-decoration: none;
	color: var(--my-forth-font-color);
	display: flex;
  	justify-content: center;
	align-items: center;
	border-radius: 8%;
	transition: 0.4s;
	position: relative;
	text-align: center;
}	
#l1_btn_1{
	background-color:var(--my-third-color);
	transform: rotate(-9deg);
	top: 0vh;
	left: 7vw;
}
#l1_btn_2{
	background-color: var(--my-first-color);
	transform: rotate(9deg);
	top: -10vh;
	left: 45vw;
}
#l1_btn_3{
	background-color: var(--my-second-color);
	transform: rotate(5deg);
	top: -8vh;
	left: 22vw;
}
#l1_btn_1:hover, 
#l1_btn_2:hover, 
#l1_btn_3:hover {
	font-weight: 400;
	opacity: 1;
	transform: rotate(360deg);
	scale: 1.3;
	position:relative;
	z-index: 50;
}
#l1_btn_1:visited, 
#l1_btn_2:visited, 
#l1_btn_3:visited{
color: var(--my-forth-font-color);
}
/* Content Part I - Title*/
.l2_tit{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 22vh 12vh;
	margin-top: 10vh;
	align-items: flex-end;
	justify-items: center;
}
.l2_tit_grid_1 {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
.l2_tit_grid_1 img{
	width: 70vw
}
.l2_tit_grid_2 {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
.l2_tit_grid_2 h1{
	color:var(--my-first-font-color);
}
/*Learning 2*/	
.l2 {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 65vh 35vh;
	justify-content: center;
	align-items: center;
	padding: 0vh 3vw;
	gap: 5vw;
	border: var(--my-border);
	border-radius: 30px;
	background: url("../img/png/bg.png") bottom left;
}
/*Learning1-Left Div*/
.l2_grid_1 {
	grid-column: 1 / 2;
 	grid-row: 2 / 3;
}
.l2_btn{
 	height: 22vw;
	width: 22vw;
	font: var(--my-font_p2);
	color: var(--my-forth-font-color);	
	text-decoration: none;
	background-color: var(--my-second-color);
	border-radius: 8%;
	transition: 0.5s;
	position: absolute;
	display:flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}	
#l2_btn_1{
	transform: rotate(-12deg);
	top: 393vh;
	left: 15vw;
}
#l2_btn_2{
	transform: rotate(-5deg);
	top: 393vh;
	left: 40vw;
}
#l2_btn_3{
	transform: rotate(8deg);
	top: 393vh;
	left: 65vw;
}
#l2_btn_4{
	transform: rotate(10deg);
	top: 410vh;
	left: 15vw;
}
#l2_btn_5{
	transform: rotate(-7deg);
	top: 410vh;
	left: 40vw;
}
#l2_btn_6{
	transform: rotate(6deg);
	top: 410vh;
	left: 65vw;
}
#l2_btn_1:hover, 
#l2_btn_2:hover, 
#l2_btn_3:hover, 
#l2_btn_4:hover, 
#l2_btn_5:hover, 
#l2_btn_6:hover{
	background-color: var(--my-first-color);
	scale: 1.3;
	z-index: 50;
}
#l2_btn_1:hover{
	transform: rotate(6deg);
}
#l2_btn_2:hover{
	transform: rotate(4deg);
} 
#l2_btn_3:hover{
	transform: rotate(-8deg);
} 
#l2_btn_4:hover{
	transform: rotate(-8deg);	
}	
#l2_btn_5:hover{
	transform: rotate(7deg);
} 
#l2_btn_6:hover{
	transform: rotate(-6deg);
}
#l2_btn_1:visited, 
#l2_btn_2:visited, 
#l2_btn_3:visited, 
#l2_btn_4:visited, 
#l2_btn_5:visited, 
#l2_btn_6:visited{
color: var(--my-forth-font-color);
}
.l2_grid_2{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
.l2_grid_2 p{
	color: var(--my-second-font-color);
	transform: rotate(3deg);
	text-align: center
}

/*so*/

/*Content Part III - Title*/
.so_tit{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 22vh 12vh;
	margin-top:10vh;
	align-items: flex-end;
	justify-items: center;
}
.so_tit_grid_1 {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
.so_tit_grid_1 h1{
	color:var(--my-first-font-color);
}
.so_tit_grid_2 {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
.so_tit_grid_2 img{
	width: 80vw
}
.so {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 55vh 35vh;
	align-items: center;
	padding: 0vh 3vw;
	margin-bottom: 10vh;
	border: var(--my-border);
	border-radius: 30px;
	background: url("../img/png/bg_blog.png") no-repeat right bottom;
	background-size: 100%;
	background-color:var(--my-forth-color);
}
.so_grid_1 {
	grid-column:1 / 2; 
  	grid-row: 1 / 2;
}
.so_grid_1 p {
	color: var(--my-second-font-color);
	transform: rotate(2deg);
	text-align: center;
}
.so_grid_2 {
	grid-column:1 / 2; 
	grid-row: 2 / 3;
}
.so_grid_2 a{
	height: 22vw;
	width: 22vw;
	font: var(--my-font_a);
	color:var(--my-forth-font-color);
	text-decoration: none;
	display: flex;
  	justify-content: center;
	align-items: center;
	background-color:var(--my-second-color);
	border-radius: 8%;
	transition: 0.5s;
	position: relative;		
}
.so_btn_1 {
	transform: rotate(-7deg);
	top: 0vh;
	left: 10vw;
}
.so_btn_2 {
	transform: rotate(12deg);
	top: -12vh;
	left: 45vw;
}
.so_btn_1:hover, 
.so_btn_2:hover {
	background-color:var(--my-first-color);
	scale: 1.3;
	z-index: 50;
}
.so_btn_1:hover{
	transform: rotate(3deg);
}
.so_btn_2:hover{
	transform: rotate(-4deg);
} 
/*Information*/
.inf {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5vh 0vw;
	text-transform: uppercase;
	letter-spacing: 0.5vw;
	font: var(--my-font_p2);
	color: var(--my-forth-font-color);
	background-color: var(--my-third-color);
}
/*Footer*/
footer {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4vh 0vw;
	text-transform: uppercase;
	letter-spacing: 0.5vw;
	font: var(--my-font_p2);
	color: var(--my-forth-font-color);
	background-color:var(--my-second-color);
}
.up{
display: none
}

.outer-menu{
display: none;
}
}

@media screen 
and (max-width: 1200px)
and (orientation: landscape) {

	* {
		box-sizing: border-box;
	}
	html{
		overflow-x:hidden;
	}
/*Body*/
	body{

/*Colors*/
	--my-first-color: #ff6C0C;
	--my-second-color: #3D4543;
	--my-third-color: #cacaca;
	--my-forth-color: white;

/*Font-Colors*/
	--my-first-font-color: #ff6c0C;
	--my-second-font-color: black;
	--my-third-font-color:#cacaca;
	--my-forth-font-color: white;

/*Fonts*/
		--my-font_p1: 300 1.8vw/1.2 'Quicksand', sans-serif;
		--my-font_p2: 300 1.3vw/1.2 'Quicksand', sans-serif;
		--my-font_p3: 300 0.5vw/1.0 'Quicksand', sans-serif;
		--my-font_h1: 300 4.5vw/1.0 'Quicksand', sans-serif;
		--my-font_a: 300 1.vw/1.0 'Quicksand', sans-serif;
		--my-font_hero: 300 5vw/1.2 'Quicksand', sans-serif;

/*Buttons and border*/
		--my-button-size: 8vw;
		--my-border: 2px var(--my-third-color) dashed;
		
		font: var(--my-font_p1);
		background-color: var(--my-forth-color);
		margin: 0%;
	}
	h1 {
		font: var(--my-font_h1);
	}
	.span_1{
		font-weight: 800;
	}
	.span_2{
		color: var(--my-first-font-color);
	}
	/*Header*/	
	header{
		height: 14vh;
		width: 100%;
		position:sticky;
		top:0;
		display: flex;
		justify-content:space-between;
		align-items: center;
		background-color:var(--my-forth-color);
		border-bottom:1px var(--my-first-color) solid;
		z-index: 99;
	}
	header img{
		display:flex;
		margin-left: 4vw;
		width: 14vh;
		align-items: center;
	}
	.btn_logo{
		transition: 0.5s;
	}
	.btn_logo:hover{
		transform: rotate(-5deg);
	}
	/*Navigation*/	
	nav{
		padding-right: 0rem;
	}
	nav ul {
		list-style: none;
		display: flex;
		gap: 1rem;
	}
	nav a{
		font: var(--my-font_a);
		text-decoration: none;
		color: var(--my-second-font-color);
		transition: color 0.3s;
	}
	nav a:hover{
		color:var(--my-first-font-color);
	}
	.btn_header{
		color:var(--my-second-font-color);
		background-color:var(--my-forth-color);
		border: 1px var(--my-first-color) solid;
		border-radius: 100px;
		margin-right: 4vw;
		padding: 1.2vh 1.2vw;
		font: var(--my-font_p2);
		text-decoration: none;
	}
	.btn_header:hover{
		color:var(--my-forth-font-color);
		background-color:var(--my-first-color);
	}
	.btn_header:active{
		color:var(--my-forth-font-color);
		background-color:var(--my-second-color);
		border-color: var(--my-second-color);
	}
	/*Main*/
	main{
		padding: 0rem 1.5rem;
	}
	.hero {
		height: 20vh;
		width: 100%;
		display:flex;
		justify-content:center;
		align-items: center;
		margin:0;
	}
	.hero p{
		font: var(--my-font_hero);
		color:var(--my-first-font-color);
	}
	/*About me*/	
	.ab {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 60vh;
		align-items: center;
		padding: 0vh 8vw;
		gap: 3vw;
		border: var(--my-border);
		border-radius: 30px;
		background: url("../img/png/bg.png") bottom left;
	}
	.ab_grid_1{
		grid-column: 1 / 2; 
		grid-row: 1 / 2;
	}
	.ab_grid_1 img{
		max-width: 40vh;
		padding-left: 3vw;
	}
	.ab_grid_2{
		grid-column:2 / 3; 
		grid-row: 1 / 2;
	}
	.ab_grid_2 p{
		color:var(--my-second-font-color);
		transform: rotate(3deg)
	}
	/* Content Part I - Title*/
	.l1_tit{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 55vh;
		align-items:flex-end;
		justify-items: start	;
		background: url("../img/png/bg_25.png") no-repeat bottom left;
		background-size: 40%;
	}
	.l1_tit_grid_1 {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		padding-left: 4.5vw;
	}
	.l1_tit_grid_1 h1{
		color:var(--my-first-font-color);
	}
	.l1_tit_grid_2 {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}
	.l1_tit_grid_2 img{
		width: 40vw
	}
	/*Learning 1*/	
	.l1 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 65vh;
		justify-content: center;
		align-items: center;
		padding: 0vh 5vw;
		gap: 5vw;
		border: var(--my-border);
		border-radius: 30px;
		background: url("../img/png/bg.png") bottom left;
	}
	/*Learning1-Left Div*/
	.l1_grid_1{
		grid-column: 1 / 2;
		 grid-row: 1 / 2;
	}
	.l1_grid_1 p{
		color:var(--my-second-font-color);
		transform: rotate(-3deg);
	}
	/*Learning1-Right Div*/
	.l1_grid_2{
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}
	.l1_btn{
		height: 18vh;
		width: 18vh;
		font: var(--my-font_p2);
		text-decoration: none;
		color: var(--my-forth-font-color);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 8%;
		transition: 0.4s;
		position: relative;
		text-align: center;
	}	
	#l1_btn_1{
		background-color: var(--my-third-color);
		transform: rotate(-9deg);
		top: 5vh;
		left: 10vw;
	}
	#l1_btn_2{
		background-color: var(--my-first-color);
		transform: rotate(9deg);
		top: 12vh;
		left:7vw;
	}
	#l1_btn_3{
		background-color: var(--my-second-color);
		transform: rotate(-20deg);
		top: -12vh;
		left:22vw;
	}
	#l1_btn_1:hover, 
	#l1_btn_2:hover, 
	#l1_btn_3:hover{
		font-weight: 400;
		opacity: 1;
		transform: rotate(360deg);
		scale: 1.3;
		position:relative;
		z-index: 50;
	}
	#l1_btn_1:visited, 
	#l1_btn_2:visited, 
	#l1_btn_3:visited{
		color: var(--my-forth-font-color);
}
	/* Content Part I - Title*/
	.l2_tit{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 55vh;
		align-items:flex-end;
		justify-items: end;
		background: url("../img/png/bg_26.png") no-repeat bottom right;
		background-size: 40%;
	}
	.l2_tit_grid_1 {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		padding-left: 4.5vw;
	}
	.l2_tit_grid_1 img{
		width: 40vw
	}
	.l2_tit_grid_2 {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		padding-right: 4.5vw;
	}
	.l2_tit_grid_2 h1{
		color:var(--my-first-font-color);
	}
	/*Learning 2*/	
	.l2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 65vh;
		justify-content: center;
		align-items: center;
		padding: 0vh 5vw;
		gap: 5vw;
		border: var(--my-border);
		border-radius: 30px;
		background: url("../img/png/bg.png") bottom left;
	}
	/*Learning1-Left Div*/
	.l2_grid_1 {
		grid-column: 1 / 2;
		 grid-row: 1 / 2;
	}
	.l2_btn{
		 height: 8vw;
		width: 8vw;
		color:var(--my-forth-font-color);
		font: var(--my-font_p2);
		text-decoration: none;
		background-color: var(--my-second-color);
		border-radius: 8%;
		transition: 0.5s;
		position: absolute;
		display:flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}	
	#l2_btn_1{
		transform: rotate(-12deg);
		top: 285vh;
		left: 15vw;
	}
	#l2_btn_2{
		transform: rotate(-5deg);
		top: 285vh;
		left: 26vw;
	}
	#l2_btn_3{
		transform: rotate(8deg);
		top: 285vh;
		left: 37vw;
	}
	#l2_btn_4{
		transform: rotate(10deg);
		top: 307vh;
		left: 15vw;
	}
	#l2_btn_5{
		transform: rotate(-7deg);
		top: 307vh;
		left: 26vw;
	}
	#l2_btn_6{
		transform: rotate(6deg);
		top: 307vh;
		left: 37vw;
	}
	#l2_btn_1:hover, 
	#l2_btn_2:hover, 
	#l2_btn_3:hover, 
	#l2_btn_4:hover, 
	#l2_btn_5:hover, 
	#l2_btn_6:hover{
		background-color:var(--my-first-color);
		scale: 1.3;
		z-index: 50;
	}
	#l2_btn_1:hover{
		transform: rotate(6deg);
	}
	#l2_btn_2:hover{
		transform: rotate(4deg);
	} 
	#l2_btn_3:hover{
		transform: rotate(-8deg);
	} 
	#l2_btn_4:hover{
		transform: rotate(-8deg);	
	}	
	#l2_btn_5:hover{
		transform: rotate(7deg);
	} 
	#l2_btn_6:hover{
		transform: rotate(-6deg);
	}
	#l2_btn_1:visited, 
	#l2_btn_2:visited, 
	#l2_btn_3:visited, 
	#l2_btn_4:visited, 
	#l2_btn_5:visited, 
	#l2_btn_6:visited{
		color: var(--my-forth-font-color);
	}
	.l2_grid_2{
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}
	.l2_grid_2 p{
		color: var(--my-second-font-color);
		transform: rotate(3deg)
	}
	
	/*so*/
	
	/*Content Part III - Title*/
	.so_tit{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 55vh;
		align-items:flex-end;
		justify-items: start	;
		background: url("../img/png/bg_27.png") no-repeat bottom left;
		background-size: 40%;
	}
	.so_tit_grid_1 {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		padding-left: 4.5vw;
	}
	.so_tit_grid_1 h1{
		color:var(--my-first-font-color);
	}
	.so_tit_grid_2 {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}
	.so_tit_grid_2 img{
		width: 40vw
	}
	.so {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 55vh;
		align-items: center;
		padding: 0vh 5vw;
		margin-bottom: 20vh;
		gap: 5vw;
		border: var(--my-border);
		border-radius: 30px;
		background: url("../img/png/bg_blog.png") no-repeat right bottom;
		background-size: 100%;
		background-color:var(--my-forth-color);
	}
	.so_grid_1 {
		grid-column:1 / 2; 
		  grid-row: 1 / 2;
	}
	.so_grid_1 p {
		color:var(--my-second-font-color);
		transform: rotate(2deg);
	}
	.so_grid_2 {
		grid-column:2 / 3; 
		grid-row: 1 / 2;
	}
	.so_grid_2 a{
		height: 8vw;
		width: 8vw;
		font: var(--my-font_p2);
		color:var(--my-forth-font-color);
		text-decoration: none;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: var(--my-second-color);
		border-radius: 8%;
		transition: 0.5s;
		position: relative;		
	}
	.so_btn_1 {
		transform: rotate(-7deg);
		top: -5vh;
		left: 0vw;
	}
	.so_btn_2 {
		transform: rotate(12deg);
		top: 5vh;
		left: 0vw;
	}
	.so_btn_1:hover, 
	.so_btn_2:hover {
		background-color:var(--my-first-color);
		scale: 1.3;
		z-index: 50;
	}
	.so_btn_1:hover{
		transform: rotate(3deg);
	}
	.so_btn_2:hover{
		transform: rotate(-4deg);
	} 
	/*Information*/
	.inf {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5vh 0vw;
		background-color:var(--my-third-color);
	}
	.inf p{
		text-transform: uppercase;
		letter-spacing: 0.5vw;
		color: var(--my-forth-font-color);
	}
	/*Footer*/
	footer {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 3vh 0vw;
		text-transform: uppercase;
		letter-spacing: 0.5vw;
		color: var(--my-forth-font-color);
		background-color:var(--my-second-color);
	}
	.up{
		display: none
	}
	.up a{
		text-decoration: none;
		color:var(--my-forth-font-color);
	}
	
	.up:hover{
		height:7vh;
		border-top-left-radius:48%;
		border-top-right-radius:48%;
	}
	.outer-menu{
	display: none;
	}
	}