@charset "utf-8";
/* CSS Document */


@font-face 			{font-family:"Handwritten2";
					src: url(../fonts/Handwritten2.ttf)format("truetype");
					font-style:normal;}

*					{margin:0px;
					padding:0px;}

body 				{background-image:url(../images/back.png);
					background-color:#1FAB9E;}

#wrapper			{max-width:72%;
					border-radius:3vw;
					padding:1.5vw;
					margin:1vw auto;
					/*transparency:*/
					background:rgba(0,0,0,0.5);
					color:#000;}

#wrapper:before,#wrapper:after{content: " ";
					display:table;}

#wrapper:after 		{clear:both;}

/*index start*/

#main				{max-width:100%;
					border-radius:3vw;
					background-image:radial-gradient(circle at center, #FAD02F,#F67429);
					color:#E52D48;
					font-family: 'Handwritten2' !important;
					font-size:1.5vw;
					padding: 0.2vw 0vw 2vw 0vw;
					text-align: center;}

.mainlogo			{max-width:70%;
					margin:1vw 0 1vw 0;}

#mainheadermobile 	{display:none;}

.mainphoto			{margin:0vw auto;
					max-width:90%;}
.mainphotomobile	{display:none;}

.maintext			{display: block;
					margin:1vw auto 0vw auto;}

.maintextmobile 	{display:none;}

#navmobile 			{display:none;}

#mainnav 			{width:100%;
					margin:1vw auto 1vw auto;
					border-radius:1vw;
					height:4vw;
					float:left;}

#mainnav ul			{list-style-type: none;
					display:flex;
					padding:0vw 15vw 0 15vw;
					flex-flow:row;
					align-items:center;
					justify-content:center;}

#mainnav ul li 		{flex-grow: 1;}

#mainnav ul li a 	{text-decoration:none;
					text-align:center;
					color:#E52D48;
					font-family: Handwritten2;
					font-size:3vw;
					display:block;
					border-radius:1vw;
					width:18vw;}

#mainnav ul li a:hover{color:#FAD02F;}

/*index end*/

/*all pages start*/

header 				{max-width:100%;
					height:auto;
					margin:0 auto -1vw auto;
					border-radius:2.5vw;
					border:solid 0.4vw #FAD02F;
					background-image:repeating-radial-gradient(#F69B27,#F67429);
					padding:0.2vw;
					text-align:center;}

.logo				{max-width:60%;}


nav 				{width:14.5vw;
					color: #F67429;
					background-image:radial-gradient(circle at center, #F6AE27,#F67429);
					border-radius:1.5vw;
					float:left;
					position:sticky;
					left:1.5vw;
					top:11.7vw;}

nav ul				{list-style-type:none;
					display:flex;
					flex-flow:column;
					align-items:center;}

nav ul li a 		{text-decoration:none;
					text-align:center;
					color:#E52D48;
					font-family:Handwritten2;
					font-size:2.4vw;
					display:block;
					background-color:#FAD02F;
					border-radius:1vw;
					padding:1.5vw;
					width:10.5vw;
					margin-top:0.6vw;}

nav ul:last-child{margin-bottom:0.5vw;}

nav ul li a:hover 	{background-color:#E52D48;
					color:#FAD02F;}

.current			{color:#FAD02F;
					text-decoration:none;
					background-color:#E52D48;}

/*all pages end*/

/*about me start*/

article				{max-width:80%;
					margin: 3.5vw -1vw 0 0vw;
					float:right;}

.photo				{float:left;
					width:45%;
					margin:-1.8vw 1vw 0 1vw;
					border-radius:1vw;
					background-color:#1FAB9E; 
					border:#1FAB9E solid 0.5vw;}

#bio				{border: solid 0.5vw #F67429;
					margin:-1vw 1vw 1vw 2.5vw;
					border-radius:2.5vw;
					background-color:#FAD02F}

#bio p				{color:#EA2E49;
					font-family: 'Handwritten2';
					font-size:2.1vw;
					line-height: 2.6vw;
					text-align:justify;
					font-weight:bold;
					padding:1.8vw;}


/*about me end*/

/*portfolio start*/

#mainport			{width:42vw;
					position:relative;
					left:6vw;
					margin:1vw auto 5vw auto;
					float:left;
					min-height:25vw;}

.work 				{position:absolute;
					left:33vw;
					top:0vw;
					width:12vw;}

#mainport a img:last-child{width:5vw;
					float:left;
					margin-left:0vw;
					margin-top: 15vw;}

#mainport a img:first-child {display: none;}

#mainport a:hover img:first-child{display: block;
					width:5vw;
					float:left;
					margin-left:0vw;
					margin-top: 15vw;}

#mainport a:hover img:last-child {display: none;}
	
#folder 			{background-image:radial-gradient(circle at center,#FAD02F,#FAD02F);
					width:22vw;
					display: block;
					margin:1vw 1vw 0 1vw;
					height:auto;
					padding:1vw;
					text-align: center;
					color: #E52D48;
					font-family: "Handwritten2";
					font-weight: bold;
					float:left;
					border-radius:2vw;
					font-size:2vw;
					border-color:#1FAB9E;
					border:dotted 0.5vw;}

#folder:hover		{background-image:radial-gradient(circle,#E8475F,#E52D48);
					color: #FAD02F;	
					font-family: "Handwritten2";
					border-color:#FAD02F;}

.file				{max-height:19vw;
					margin-top:0.5vw;
					margin-bottom:1vw;
					text-align: center;}

.pdf				{max-height:19vw;
					margin-top:0.5vw;
					text-align: center;}

#sae a img:first-child{width:16vw;
					display:block;
					position:absolute;
					top:31vw;
					right:13vw;
					float:left;}

#sae a img:last-child{display:none;
					float:right;}

#sae a:hover img:first-child{display:none;
					float:right;}

#sae a:hover img:last-child{width:16vw;
					display:block;
					position:absolute;
					top:31vw;
					right:13vw;
					float:left;}


#mainport2			{width:49vw;
					position:relative;
					left:-1vw;
					top:2vw;
					margin:0 auto 3vw 0;
					float:left;
					border-radius:2.5vw;}


#folder2			{background-image:radial-gradient(circle,#E8475F,#E52D48);
					width:90%;
					height:auto;
					padding: 0.5vw;
					color: #FAD02F;
					font-family: "Handwritten2";
					font-weight: bold;
					float:left;
					border-radius:20px;
					font-size:1.5vw;
					border:dotted 0.5vw;
					border-color:#FAD02F;
					text-align: center;}

.work3 				{width:40vw;}

/*portfolio end*/

/*contact start*/

#maincont			{position:relative;
					top:-5vw;
					height:32vw;
					left:4vw;float:left;}


#cont				{float:left;}
#cont2				{float:left;}
			
#cont a img:first-child{position:absolute;
					top:09vw;
					left:5vw;
					width:14vw;float:left;
					display:block;}

#cont a img:nth-child(2){display:none;float:left;}

#cont a img:nth-child(3){position:absolute;
					top:19vw;
					left:1vw;
					width:23vw;
					display:block;
					float:left;}

#cont a img:nth-child(4){display:none;float:left;}

#cont:hover a img:first-child{display:none;float:left;}

#cont:hover a img:nth-child(2){position:absolute;
					top:09vw;
					left:5vw;
					width:14vw;
					display:block;
					float:left;}

#cont:hover a img:nth-child(3){display:none;float:left;}

#cont:hover a img:nth-child(4){position:absolute;
					top:19vw;
					left:1vw;
					width:23vw;
					display:block;
					float:left;}

#cont2 a img:first-child{position:absolute;
					top:8.8vw;
					left:30vw;
					width:8vw;float:left;
					display:block;}

#cont2 a img:nth-child(2){display:none;float:left;}

#cont2 a img:nth-child(3){position:absolute;
					left:33vw;
					top:09vw;
					width:22vw;
					display:block;
					float:left;}

#cont2 a img:nth-child(4){display:none;float:left;}

#cont2:hover a img:first-child{display:none;float:left;}

#cont2:hover a img:nth-child(2){position:absolute;
					top:8.8vw;
					left:30vw;
					width:8vw;
					display:block;
					float:left;}

#cont2:hover a img:nth-child(3){display:none;float:left;}

#cont2:hover a img:nth-child(4){position:absolute;
					left:33vw;
					top:09vw;
					width:22vw;
					display:block;
					float:left;}

/*contact end*/

/*contact form start */
form	 			{position:relative;
					float:left;
					left:11vw;
					border: solid 0.5vw #F67429;
					border-radius:2.5vw;
					background-color:#FAD02F;
					width:32vw;
					height:auto;;
					margin:2.5vw 0 5vw 0;
					padding:0.5vw 0.5vw 0.5vw 0.5vw;
					font-family: Handwritten2;
					font-size:2.2vw;
					color:#E52D48;
					font-weight:bold;
					text-align:left;}

.list				{font-family:Handwritten2;
					font-size:1.7vw;
					font-weight: bold;
					color:#E52D48;
					border:#E52D48 solid thin  ;
					border-radius:0.8vw;
					background-color:#FBDD69;
					text-align:left;
					padding:0 0.8vw 0 0.8vw;}

.table 				{text-align:left;
					margin:0 auto;}

.table2 			{text-align:center;
					margin:0 auto 0vw auto;}


/*contact form end */


/*homework start */

.homework a img 	{margin:3vw -2.5vw 0vw 4.5vw;
					width:12vw;
					display:block;
					float:left;}

#homework2 			{clear:both;
					min-height:2vw;
					margin-left:16vw;
					margin-top:3vw;}

#homework2 a img {margin:-2vw 0vw 2vw 2vw;}

#homework2 a img:first-child{width:5vw;
					display:block;
					float:left;}

#homework2 a img:last-child{display:none;
					float:right;}

#homework2 a:hover img:first-child{display:none;
					float:right;}
#homework2 a:hover img:last-child{display:block;
					width:5vw;
					float:left;}

/*homework end*/


@media screen and 	(max-width: 768px) {
	
					
					html 				{height: 100%;}
	
					body 				{display: flex;
				  	 					flex-direction: column;
										height: 100vh;}
	
					#wrapper			{max-width:95%;
  										flex: 1 0 auto;}

					.footer 			{flex-shrink: 0;
										padding: 0.5vw;
										}
					#main				{border-radius:3vw;
										font-size:2.5vw;
										padding:6vw 0 0 0vw;
										height:75vw;
										margin:12vw 0vw 0 0vw;}

					#mainheader 		{display:none;}


					.mainlogo			{max-width:100%;
										margin:2vw 0 4vw 0;}

					.mainphoto			{display:none;}

					.mainphotomobile 	{display:block;
										width:95%;
										margin:0 auto;}


					.maintextmobile		{display: block;
										margin:-2vw auto -1vw auto;}

					.maintext			{display: none;}

					#mainnav 			{display:none;}

					#mainheadermobile	{max-width:100%;
										display:block;
										height:auto;
										margin:0 auto 0vw auto;
										border-radius:2.5vw;
										border:solid 0.4vw #FAD02F;
										background-image:repeating-radial-gradient(#F69B27,#F67429);
										padding:0.5vw;
										text-align:center;}

					header 				{padding:0.5vw;
										margin-bottom: -1.5vw;}

					.logo				{max-width:100%;}
					.logomobile			{max-width:100%;}



					nav 				{width:95%;
										display:block;
										border-radius:1vw;
										float:left;
										margin-bottom:1vw;
										position:absolute;
										left:2.5vw;
										top:20vw;}

					nav ul				{flex-flow:row;
										justify-content: space-around;}

					nav ul li a 		{font-size:4.3vw;
										padding:2vw;
										line-height:4vw;
										width:19vw;
										margin:0.5vw 0 0vw 0;}

					#navmobile 			{width:95%;
										display:block;
										border-radius:1vw;
										color: #F67429;
										background-image:radial-gradient(circle at center, #F6AE27,#F67429);
										float:left;
										position:absolute;
										left:2.5vw;
										top:20vw;}

					#navmobile 	 ul		{display:flex;
										flex-flow:row;
										list-style-type:none;
										align-items:center;
										justify-content: space-around;}

					#navmobile 	 ul li a {text-decoration:none;
										text-align:center;
										color:#E52D48;
										font-family:Handwritten2;
										font-size:4.3vw;
										padding:2vw;
										line-height:4vw;
										width:18.8vw;
										display:block;
										background-color:#FAD02F;
										border-radius:1vw;
										margin:0.5vw 0 0.5vw 0;}


					nav ul:last-child{margin-bottom:0.5vw;}

					#navmobile ul li a:hover 	{background-color:#E52D48;
										color:#FAD02F;}

					#navmobile 	 ul li:first-child a	{color:#FAD02F;
										text-decoration:none;
										background-color:#E52D48;}



					article				{max-width:100%;
										margin:13vw -0.5vw 0 0vw;
										float:left;}

					.photo				{float:left;
										max-width:80%;
										margin:-0.5vw 2vw 0 -1vw;
										border-radius:1vw;
										border-right:#1FAB9E solid 0.7vw;}

					#bio				{border: solid 0.5vw #F67429;
										margin:0.8vw 0vw 0vw 0vw;
										border-radius:2.5vw;
										background-color:#FAD02F}

					#bio p				{color:#EA2E49;
										font-size:4.1vw;
										text-align:justify;
										font-weight:bold;
										line-height:4.8vw;
										padding:3vw;}

					#mainport			{width:100%;
										position:static;
										text-align: center;
										margin:11vw 0vw 18vw 2.5vw;
										float:left;}
	
	.work 				{display:none;}

					#mainport img:nth-child(1) {}
	
					#mainport a img:last-child{width:18vw;
										margin: 0 1.5vw;
										margin-top: 38vw;}

					#mainport a:hover img:first-child{width:18vw;
										margin: 0 1.5vw;
										margin-top: 38vw;}


					#folder 			{width:48%;
										margin:2vw auto 0 auto;
										height:80vw;
										padding:1vw;
										font-size:6vw;
										border:solid 0.5vw;
										line-height: 6vw;}

					#folder:hover		{border:solid 0.5vw;}
	
					.nomobilelink		{pointer-events: none;}

					.file				{max-height:55vw;
										margin-top:2vw;}


					#sae a img:first-child{width:27vw;
										top:110vw;
										right:1vw;
										clear:both;}

					#sae a img:last-child{clear:both;}

					#sae a:hover img:first-child{clear:both;}

					#sae a:hover img:last-child{width:27vw;
										clear:both;
										top:110vw;
										right:1vw;}
	
					#maincont			{top:-5vw;
										height:110vw;
										left:4vw;}


					#cont2				{float:none;}

					#cont a img:first-child{top:17vw;
										left:3vw;
										width:30vw;}

					#cont a img:nth-child(3){top:39vw;
										left:0vw;
										width:40vw;}


					#cont:hover a img:nth-child(2){position:absolute;
										top:17vw;
										left:3vw;
										width:30vw;
										display:block;
										float:left;}

					#cont:hover a img:nth-child(4){
										top:39vw;
										left:0vw;
										width:40vw;}

					#cont2 a img:first-child{
										top:65vw;
										left:40vw;
										width:18vw;}

					#cont2 a img:nth-child(3){
										left:53vw;
										top:69vw;
										width:40vw;}


					#cont2:hover a img:nth-child(2){
										top:65vw;
										left:40vw;
										width:18vw;}


					#cont2:hover a img:nth-child(4){
										left:53vw;
										top:69vw;
										width:40vw;}
	
					form	 			{left:11vw;
										width:90vw;
										margin:13.3vw 0 0vw -11vw;
										padding:3vw 2vw;
										font-size:5.2vw;}

					.list				{font-size:5vw;
										margin:1.5vw 0;
										padding:0 0.8vw 0 0.8vw;}

					.table 				{margin:0 auto;}

					.table2 			{margin:0 auto 0vw auto;}


					.homework a img 	{margin:15vw 6vw 5vw 6vw;
										width:35vw;}

					#homework2 			{clear:both;
										min-height:2vw;
										margin-left:3.5vw;
										margin-top:5vw;}

					#homework2 a img {margin:-2vw 0vw 2vw 2vw;}

					#homework2 a img:first-child{width:15vw;
										display:block;
										float:left;}

					#homework2 a img:last-child{display:none;
										float:right;}

					#homework2 a:hover img:first-child{display:none;
										float:right;}
					#homework2 a:hover img:last-child{display:block;
										width:15vw;
										float:left;}}