@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
 @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,300);
 @import url(https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@900&display=swap);
 @import url(https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&display=swap);
 @import url(https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;500&display=swap);
 * {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
 }

 body {
 	font-family: 'Montserrat', sans-serif;
 }
#nooo{
	position: fixed;width: 66px;
    margin-top: 810px; /**468px*/
	
}
 .container {
 	width: 100%;
 }
 .containerrr {
	 position: relative;
	display: grid; 
	grid-template-columns: 1fr 1fr 1fr; 
	gap: 0px 0px; 
  }

 /*  #liinks{
	  position: relative;
	margin-top: 510px;
	width:75px;
	 height:57px;cursor: pointer;
  }
  #liinks1{ position: relative;
	margin-top: 516px;cursor: pointer;
	width:119px;
	 height:56px;
  } 
   #liinks2{ position: relative;
	margin-top: 510px;cursor: pointer;
	width: 63px;
    height: 50px;
  } */
 nav {
 	position: fixed;
 	display: flex;
 	align-items: flex-start;
 	width: 20%;
 	height: 100%;
 	background-color: #111;
 }

 .img-fluid {
 	background-image: linear-gradient(rgb(181 65 86 / 50%), rgb(39 52 64 / 15%)), url("../img/yasmina.jpg");
 	width: 600px;
 	height: 600px;
 	position: absolute;
 	top: 284px;
 	right: 0px;
 }

 main {
 	position: fixed;
 	right: 0;
 	width: 80%;
 	height: 100%;
 	background-color: #ffe80f;
 	overflow-y: hidden;
 	overflow-x: hidden;
 	padding: 40px;
 }

 .fp3 {
 	display: block!important;
 	font-family: 'Roboto Slab', serif;
 	max-width: 400px;
 	height: auto;
 	bottom: 548px;
 	left: 500px;
 	margin-top: 263px;
 	position: relative;
 	color: #0c3169;
 	font-size: 130px;
 	margin-bottom: 0px;
 	text-decoration: auto;
 }

 .hero-image {
 	/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
 	/*background-image: linear-gradient(rgba(00, 100, 230, 0.5), rgba(230, 300, 330, 0.5)), url("../img/frog.jpg");*/
 	background-image: url("../img/frog1.png");
 	/* Set a specific height */
 	/*height: 50%;*/
 	/* Position and center the image to scale nicely on all screens */
 	background-position: left;
 	background-repeat: no-repeat;
 	background-size: cover;
 	/*position: relative;*/
 	border-radius: 80px/60px;
 	object-fit: none;
 	padding-top: 500px;
 	object-position: -20% 50%;
 	width: 100%;
 	max-width: 400px;
 	height: auto;
 }

 h1#icon {
 	font-family: 'Roboto Slab', serif;
 	max-width: 400px;
 	height: auto;
 	font-size: 4vw;
 	margin-bottom: 0px;
 	text-decoration: auto;
 }

 .hero-text {
 	font-family: 'Roboto Slab', serif;
 	text-align: center;
 	position: absolute;
 	top: 20%;
 	left: 40%;
 	margin-left: 0px;
 	/*transform: translate(-50%, -50%);*/
 	color: #0c3169;
 	max-width: 400px;
 	height: auto;
 	letter-spacing: 8px;
 	font-size: 4vw;
 }

 .audio {
 	display: none;
 }

 h1 {
 	font-family: 'Source Code Pro', monospace;
 	position: relative;
 	font-weight: bold;
 	margin-bottom: 50px;
 	font-size: 30px;
 	bottom: 433px;
 	left: 71px;
 	text-decoration: underline;
 	text-align: -webkit-center;
 }

 h2 {
 	font-family: 'Roboto Slab', serif;
 	position: relative;
 	font-weight: bold;
 	top: 277px;
 	margin-bottom: 50px;
 	font-size: 25px;
 	white-space: nowrap;
 	text-decoration: overline;
 	text-align: -webkit-center;
 }

 p {
 	margin-bottom: 20px;
 	line-height: 32px;
 	font-size: 20px;
 	font-family: 'Source Code Pro', monospace;
 	text-align: justify;
 	position: relative;
 	bottom: 458px;
 }

 p:last-of-type {
 	background: white;
 	position: relative;
 	line-height: 14px;
 	font-size: 11px;
 	top: -422px;
 	word-spacing: -1px;
 	bottom: 252px;
 	display: inline;
 }

 p::first-letter {
 	font-size: 148%;
 	font-weight: 300;
 }

 li, ul label.title, ul, a {
 	width: 100%;
 	color: #FFF;
 	font-family: 'Source Code Pro', monospace;
 	display: block;
 	font-weight: lighter;
 	letter-spacing: 2px;
 }

 ul label {
 	height: 35px;
 }

 ul li {
 	height: 35px;
 	overflow: hidden;
 	transition: all .3s;
 }

 li {
 	display: block;
 	/*background-color: #363636;*/
 	background-color: #0343cf;
 }

 label.title {
 	font-size: 14px;
 	/*background: linear-gradient(#111, #2f2f2f);*/
 	background: linear-gradient(#191818, #0e0e0e);
 	padding: 10px 15px;
 	cursor: pointer;
 	transition: all .25s;
 }

 a {
 	FONT-WEIGHT: 200;
 	font-size: 12px;
 	text-decoration: none;
 	color: #FFF;
 	display: block;
 	padding: 10px 25px;
 	transition: all .25s;
 	letter-spacing: 4px;
 }
 .ju{
	background-color:#ffe80f;
 }
 .ju:hover{
	background-color:#ffe80f;
 }
 a:hover {
 	background-color: #5188db;
 	box-shadow: inset 5px 0px 0px 0px #f000;
 }

 label:hover {
 	text-shadow: 0px 0px 10px #fff;
 }

 input[type="radio"] {
 	display: none;
 }

 #edit:checked+li, #archive:checked+li, #tools:checked+li, #preferences:checked+li {
 	height: 189px;
 }

 i {
 	margin-right: 12px;
 }

 .fp2 {
 	display: none;
 }

 .gitty {
 	width: 600%;
 	max-width: 154px;
 	height: auto;
 	position: relative;
	margin-top: 270px;
 	overflow: hidden;
 	margin-left: 102px;
 	top: 388px;
}

 .col--01 {
 	display: inline;
 	position: relative;
 	left: 625px;
 }

 @media screen and (max-width: 1440px) {
 	.fp3 {
 		left: 368px;
 	}
 	h1 {
 		left: 97px;
 	}
 	.gitty {
 		display: none;
 	}
 	p:last-of-type {
 		font-size: 10px;
 		top: -440px;
 		word-spacing: -1px;
 	}
 	.col--01 {
 		left: 539px;
 	}
	
 }

 @media screen and (max-width: 1024px) {
 	.fp3 {
 		left: 313px
 	}
 	h1 {
 		margin-top: 47px;
 		left: -270px;
 		bottom: 463px;
 		font-size: 22px;
 	}
 	p {
 		bottom: 465px;
 	}
 	.col--01 {
 		left: 5px;
 		right: 0px;
 		bottom: 0px;
 		top: 0px;
 	}
	 main{
		 overflow-y: auto;
	 }
	 html, body {
		overflow-x: hidden;
		width: 100%;
		position: inherit;
	}
 }

 @media screen and (max-width: 768px) {
 	h1 {
 		left: -141px;
 	}
 	.hero-image {
 		display: inherit;
 		position: relative;
 		right: 60px;
 	}
 	.fp3 {
 		left: 235px;
 		font-size: 106px;
 	}
 	h2 {
 		left: 140px;
 	}
 	#icon {
 		margin-top: 107px;
 	}
 }

 @media screen and (max-width: 425px) {
 	main {
 	right: 0;
    width: 100%;
    height: 116%;
    background-color: #ffe80f;
    overflow: auto;
    overflow-x: hidden;
    padding: 40px;
 	}
 	h1 {
 		bottom: 522px;
 		left: 0px;
 	}
 	p {
 		word-spacing: -11px;
 		
 		bottom: 555px;
 		line-height: 25px;
 		letter-spacing: -1px;
 		word-spacing: -11px;
 	}
 	.fp3 {
 		left: -5px;
 		font-size: 86px;
 		margin-top: 352px;
 	}
 	.hero-image {
 		bottom: 51px;
 		right: 8px;
 		background-image: url("../img/frog2.png");
 		/* Set a specific height */
 		/*height: 50%;*/
 		/* Position and center the image to scale nicely on all screens */
 		background-position: left;
 		background-repeat: no-repeat;
 		background-size: cover;
 		/*position: relative;*/
 		border-radius: 80px/60px;
 		object-fit: none;
 		padding-top: 500px;
 		object-position: -20% 50%;
 		width: 100%;
 		max-width: 400px;
 		height: auto;
 	} 
	 	
	
 	#icon {
 		margin-top: 216px;
 		left: -133px;
 		font-size: 18px;
 	}
	 p:last-of-type {
		
		top: -534px;
		
	}
 }

 @media screen and (max-width: 375px) {
 	.hero-image {
 		width: 126%;
 		right: 38px;
 	}
 	.fp3 {
 		left: -8px;
 		font-size: 75px;
 	}
 	#icon {
 		margin-top: 201px;
 		left: -114px;
 		font-size: 13px;
 	}
 	h1 {
 		bottom: 553px;
 		left: 0px;
 	}
 	p {
 		bottom: 575px;
 	}
	 .col--01 {
		left: 0px;}
 }

 @media screen and (max-width: 320px) {
 	.hero-image {
 		width: 140%;
 	}
 	.fp3 {
 		font-size: 63px;
 	}
 	#icon {
 		margin-top: 189px;
 		left: -95px;
 		font-size: 11px;
 		letter-spacing: 6px;
 	}
 	h1 {
 		font-size: 17px;
 		margin-top: 50px;
 	}
 	p {
 		bottom: 575px;
 	}
	 p:last-of-type {
		display: -webkit-inline-box;
		top: -529px;
		
	}.col--01 {
		display: none;}
 }

 @media screen and (max-width: 600px) {
 	nav {
 		width: 100%;
 		position: relative;
 	}
 	
 	.img-fluid {
 		display: none;
 	}
 	.fp {
 		position: relative;
 		bottom: 250px;
 		right: 200px;
 		font-size: 20px;
 		color: #3625fb;
 		text-align: center;
 		white-space: nowrap;
 		display: none;
 	}
 	.fp1 {
 		font-size: 21px;
 		position: relative;
 		color: #0c3169;
 		right: 150px;
 		text-decoration: none
 	}
 	.fp2 {
 		font-size: 21px;
 		position: relative;
 		color: #0c3169;
 		right: 150px;
 		text-decoration: none;
 		display: inline;
 		bottom: 385px;
 	}
 	html, body {
 		overflow-x: hidden;
 		width: 100%;
 		position: fixed;
 	}
 }

 @media screen and (max-width: 1400px) {
 	html, body {
 		overflow-x: hidden;
 		width: 100%;
 		position: inherit;
 	}
 	main {
 		
 		right: 0;
 		width: 100%;
 		height: 116%;
 		background-color: #ffe80f;
 		overflow: auto;
 		overflow-x: hidden;
 		padding: 40px;
 	}
 	.hero-image {
 		display: inherit;
 	}
 	.rez {
 		height: inherit;
 	}
 	a {
 		FONT-WEIGHT: 200;
 		font-size: 12px;
 		text-decoration: none;
 		/* display: none;*/
 		padding: 10px 25px;
 		transition: all .25s;
 		letter-spacing: 4px;
 		overflow: initial;
 		/*display: table-cell;*/
 	}
 	nav {
 		position: fixed;
 		display: contents;
 		align-items: flex-start;
 		width: 20%;
 		height: 100%;
 		background-color: rgb(190, 60, 60);
 		overflow: auto;
 	}
 	.gitty {
 		display: none;
 	}
 }
 @media screen and (max-width: 1024px) {

	html, body {
		overflow-x: hidden;
		width: 100%;
		height: 1140px;
		position: inherit;
	}
	main {
		position: relative;
		right: 0;
		width: 100%;
		height: 116%;
		background-color: #ffe80f;
		overflow: auto;
		overflow-x: hidden;
		overflow-y: hidden;
		padding: 40px;
	}
	h2{
		top: 151px;
	}


 }
 @media screen and (max-width: 888px) {
 	.fp {
 		font-size: 21px;
 		position: relative;
 		color: #0c3169;
 		right: 150px;
 		text-decoration: none
 	}
 	.fp1 {
 		font-size: 21px;
 		position: relative;
 		color: #0c3169;
 		right: 150px;
 		text-decoration: none
 	}
 }

 @media screen and (max-width: 768px) {
 	h2 {
 		margin-top: 36px;
 	}
 }

 @media screen and (max-width: 360px) {
 	h1#icon {
 		font-family: 'Roboto Slab', serif;
 		max-width: 400px;
 		height: auto;
 		font-size: 54px;
 		margin-bottom: 0px;
 		text-decoration: auto;
 	}
 	h2 {
 		margin-top: 196px;
 	}
 }

 /* FOOTER */

 #contact {
 	color: #fafafa;
 	min-height: 100vh;
 	width: 100%;
 	padding: 5rem 3rem;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	position: relative;
 	margin: -100px 0 140px;
 	z-index: 1;
 }

 #contact .container {
 	width: 70%;
 	max-width: 1200px;
 	padding: 25vh 0;
 }

 #contact .container .heading-wrapper {
 	display: flex;
 	justify-content: space-between;
 }

 .heading-wrapper .heading .title {
 	font-family: 'Overlock', Arial, Helvetica, sans-serif;
 	font-size: 3rem;
 	line-height: 2.4rem;
 }

 .heading-wrapper .heading .separator {
 	background: #f300b4;
 	width: 150px;
 	height: 2px;
 	margin: 1rem 0;
 }

 .heading-wrapper .heading .subtitle {
 	font-size: 1.4rem;
 }

 .grid-container {
 	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: 2.9fr 1.3fr 1fr;
 	gap: 0px 0px;
 	grid-template-areas: "." "." ".";
 }

 /* FORM */

 @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);
 #form {
 	position: relative;
 	width: 500px;
 	margin: 50px auto 100px auto;
 }

 input {
 	font-family: 'Roboto Slab', serif;
 	font-size: 0.875em;
 	width: 470px;
 	height: 50px;
 	padding: 0px 15px 0px 15px;
 	background: transparent;
 	outline: none;
 	color: #726659;
 	border: solid 1px #6163a0;
 	border-bottom: none;
 	transition: all 0.3s ease-in-out;
 	-webkit-transition: all 0.3s ease-in-out;
 	-moz-transition: all 0.3s ease-in-out;
 	-ms-transition: all 0.3s ease-in-out;
 }

 input:hover {
 	background: #6163a0;
 	color: #e2dedb;
 }

 textarea {
 	width: 470px;
 	max-width: 470px;
 	height: 110px;
 	max-height: 110px;
 	padding: 15px;
 	background: transparent;
 	outline: none;
 	color: #726659;
 	font-family: 'Roboto Slab', serif;
 	font-size: 0.875em;
 	border: solid 1px #6163a0;
 	transition: all 0.3s ease-in-out;
 	-webkit-transition: all 0.3s ease-in-out;
 	-moz-transition: all 0.3s ease-in-out;
 	-ms-transition: all 0.3s ease-in-out;
 }

 textarea:hover {
 	background: #6163a0;
 	color: #e2dedb;
 }

 #submit {
 	width: 470px;
 	padding: 0;
 	margin: -5px 0px 0px 0px;
 	font-family: 'Roboto Slab', serif;
 	font-size: 0.875em;
 	color: #6163a0;
 	outline: none;
 	cursor: pointer;
 	border: solid 1px #6163a0;
 	border-top: none;
 }

 #submit:hover {
 	font-family: 'Roboto Slab', serif;
 	color: #e2dedb;
 }

 /* ///////////////POP    */

 .center {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 }

 .popup-overlay {
 	position: fixed;
 	top: 0px;
 	left: 0px;
 	width: 100%;
 	height: 100vh;
 	z-index: 1;
 	background: rgba(0, 0, 0, 0.5);
 	display: none;
 }

 .popup {
 	position: absolute;
 	top: -150%;
 	left: 50%;
 	transform: translate(-50%, -50%) scale(1.15);
 	width: 300px;
 	height: 440px;
 	background: #f5f5f5;
 	z-index: 2;
 	opacity: 0;
 	box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.2);
 	transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
 }

 body.showLoginForm .popup-overlay {
 	display: block;
 }

 body.showLoginForm .popup {
 	top: 50%;
 	opacity: 1;
 	transform: translate(-50%, -50%) scale(1);
 }

 .popup .popup-close {
 	position: absolute;
 	top: -10px;
 	right: -10px;
 	width: 40px;
 	height: 40px;
 	background: #555;
 	color: #f5f5f5;
 	font-size: 25px;
 	font-weight: 600;
 	text-align: center;
 	border-radius: 50%;
 	cursor: pointer;
 }

 .popup .form .avatar {
 	margin: 30px 0px 20px;
 	text-align: center;
 }

 .popup .form .avatar img {
 	width: 120px;
 	border-radius: 50%;
 }

 .popup .form .header {
 	text-align: center;
 	font-size: 20px;
 	font-weight: 600;
 	color: #222;
 	margin: 20px 0px;
 }

 .popup .form .element {
 	padding: 8px 20px;
 }

 .popup .form .element label {
 	display: block;
 	font-size: 14px;
 	color: #222;
 	margin-bottom: 5px;
 }

 .popup .form .element input {
 	width: 100%;
 	padding: 8px 10px;
 	box-sizing: border-box;
 	outline: none;
 	border: 1px solid #aaa;
 	background: #eee;
 	border-radius: 5px;
 }

 .popup .form .element button {
 	margin-top: 5px;
 	width: 100%;
 	padding: 10px 0px;
 	text-transform: uppercase;
 	outline: none;
 	border: none;
 	font-size: 15px;
 	font-weight: 600;
 	border-radius: 5px;
 	cursor: pointer;
 	background: #4889da;
 	color: #f5f5f5;
 }

 .line-1 {
 	position: relative;
 	top: 50%;
 	width: 24em;
 	margin: 0 auto;
 	border-right: 2px solid rgba(255, 255, 255, .75);
 	font-size: 180%;
 	text-align: center;
 	white-space: nowrap;
 	overflow: hidden;
 	transform: translateY(-50%);
 }