/*Mobile Phone Responsiveness*/
@media (max-width: 720px){
	/*Top Part*/
	header{
		height: 700px;
	}


	header .myimage{
		height: 300px;
		width: 300px;
	}

	header h1{
		margin: 0px;
		font-size: 30px;
		left: 0px;
	}
	header h1 span{
		top: -10px;
		left: -10px;
	}

	header button{
		top: 220px;
		transform: scale(1.8);
	}

	/*Navigation Bar*/
	#menuic{
		visibility: visible;
		display: block;
		position: fixed;
		top: 10%;
		margin: 0px;
		padding: 5px;
		border-radius: 5px;
		cursor: pointer;
		z-index: 2;
		animation: idle;
		background-color: black;
	}
	@keyframes menIntro{
		0%{opacity: 100%;}
		95%{opacity: 5%;}
		100%{opacity: 0%;visibility: hidden;}
	}
	@keyframes menOutro{
		from{opacity: 0%;}
		to{opacity: 100%;}
	}

	nav{
		position: fixed;
		top: 0px;
		left: -300px;
		height: 100%;
		width: 50%;
		background: black;
		z-index: 1;
		animation: idle;
	}
	@keyframes transin{
		from{left: -300px;}
		to{left: 0px;}
	}
	@keyframes transout{
		from{left: 0px;}
		to{left: -300px;}
	}

	nav ul{
		padding: 0px;
		position: relative;
		left: 0px;
		top: 70px;
		width: 100%;
		justify-content: normal;
		align-items: normal;
		display: inline-block;
	}
	nav ul li{
		width: 100%;
		height: auto;
		margin-bottom: 20px;
		text-align: center;
	}

	nav ul li a{
		font-size: 20px;
		text-align: center;
	}
	nav ul li a:hover{
		cursor: default;
	}

	#closeMen{
		visibility: visible;
		display: block;
		position: relative;
		top: 0px;
		left: 50px;
		cursor: pointer;
	}

	/*Middle*/
	/*About Me Section*/
	.content .aboutme{
		width: 100%;
	}

	.content .aboutme h1{
		font-size: 30px;
	}

	.content .aboutme p{
		width: 80%;
		font-size: 20px;
		font-weight: 400;
		line-height: 23px;
		word-spacing: 1px;
	}
	/*Certifications Section*/
	.content .certifications h2{
		font-size: 25px;
	}
	.content .certifications ul{
		margin: 0px;
		padding: 0px;
	}
	.content .certifications ul li .card{
		width: 250px;
		margin: 0px;
		margin-bottom: 10px;
	}
	.content .certifications ul li .card:hover{
		transform: scale(1.01);
	}
	.content .certifications ul li .card h3{
		font-size: 20px;
	}
	.content .certifications ul li .card img{
		width: 250px;
		height: 250px;
	}

	/*Skills and Interests Section*/
	.content .sandi .content{
		padding: 0px;	
	}
	.content .sandi .content .interests{
	margin-bottom: 5px;
	}
	.content .sandi .content .interests ul{
		display: inline-block;
		align-items: normal;
		justify-content: normal;
	}

	.content .sandi .content h1{
		font-size: 30px;
	}
	.content .sandi .content h2{
		font-size: 25px;
	}
	.content .sandi .content .card{
		width: 300px;
		height: 300px;
		margin-bottom: 20px;
	}

	.content .sandi .content .card h3{
		font-size: 20px;
	}
	.content .sandi .content .card p{
		font-size: 20px;
	}

	.content .sandi .content .skills ul{
		display: inline-block;
		align-items: normal;
		justify-content: normal;
	}

	/*Projects Section*/
	.content .projects h1{
		font-size: 30px;
	}
	.content .projects .projs{
		padding: 0px;
	}
	.content .projects .projs ul{
		display: inline-block;
		align-items: normal;
		justify-content: normal;
	}
	.content .projects .projs ul li{
		float: none;
	}

	.content .projects .projs ul li .card{
		margin: 0px;
		width: 350px;
		height: 350px;
		margin-bottom: 20px;
	}
	.content .projects .projs .card h3{
		font-size: 20px;
	}
	.content .projects .projs .card p{
		font-size: 15px;
		padding: 5px;
	}

	/*Services Section*/
	.content .services h2{
		font-size: 25px;
	}
	.content .services ul{
		margin: 0px;
		padding: 0px;
		align-items: normal;
		justify-content: normal;
		display: inline-block;
	}
	.content .services ul li .card{
		height: 150px;
		padding: 0px;
	}
	@keyframes float{
		0%{transform: translateY(0px);}
		50%{transform: translateY(10px);}
		100%{transform: translateY(0px);}
	}
	.content .services ul li .card h3{
		font-size: 20px;
		margin: 5px;
	}
	/*Socials Section*/
	.content .socials{
		height: 100px;
		padding: 10px;
	}
	.content .socials img{
		width: 50px;
		height: 50px;
	}

	/*Footer Section*/
	.content footer{
		margin: 0px;
		padding: 10px;
		height: 400px;
		background-color: black;
	}

	.content footer p{
		font-size: 15px;
	}
}

/*Tablet Responsiveness*/
@media (min-width: 768px) and (max-width: 1024px){
	header{
		height: 950px;
	}
	header button{
		top: 190px;
	}

/*	Certifications Section*/
	.content .certifications ul li .card{
		transform: scale(1.05);
		margin: 20px;
	}
	/*Skills And Interests Section*/
	.content .sandi .content .interests ul{
		display: inline-block;
		align-items: normal;
		justify-content: normal;
	}
	.content .sandi .content .interests .card{
		width: 800px;
		height: 700px;
	}
	.content .sandi .content .skills ul{
		display: inline-block;
		align-items: normal;
		justify-content: normal;
	}
	.content .sandi .content h1{
		font-size: 60px;
	}
	.content .sandi .content h2{
		font-size: 50px;
	}
	.content .sandi .content .card{
		width: 800px;
		height: 700px;
		transform: scale(1.0);
		margin-bottom: 30px;
	}

	.content .sandi .content .card h3{
		font-size: 60px;
	}
	.content .sandi .content .card p{
		font-size: 40px;
	}

	/*Projects Section*/
	.content .projects .projs ul{
		display: inline-block;
		align-items: normal;
		justify-content: normal;
	}
	.content .projects .projs ul li{
		float: none;
	}
	.content .projects .projs .card{
		margin: 0px;
		width: 800px;
		height: 700px;
		margin-bottom: 50px;
	}
	.content .projects .projs .card h3{
		font-size: 50px;
	}
	.content .projects .projs .card p{
		font-size: 30px;
		padding: 5px;
	}
	/*Services Section*/
	.content .services ul{
		margin: 0px;
		padding: 0px;
	}
	.content .services ul li .card{
		width: 500px;
		height: 400px;
		padding: 10px;
	}
	.content .services ul li .card h3{
		font-size: 40px;
	}
	.content .services ul li .card p{
		font-size: 30px;
		width: 80%;
	}

	/*Contact Section*/
	.content .contact{
		margin: 0 auto;
	}
	.content .contact iframe{
		margin: 0 auto;
	}
}