body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,img,form,fieldset,input,textarea,blockquote {
	margin:0;padding:0;border:0;
} 
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}
body, html {
	font:16px/30px "Helvetica", sans-serif;
	margin: 0;
	height: 100%;
}
html {
	height:;
}
body {

}
a {
	text-decoration: none;
}

#page-container {
	height:100vh;
}
#header {
	height: 110px;
	transition: all 0.4s;
	position: fixed;
	width: 100%;
	background: white;
	background: -moz-linear-gradient(top, white 0%, #ffffff 100%);
	background:-webkit-linear-gradient(top, white 0%, #ffffff 100%);
	box-shadow:0 5px 10px rgba(0,0,0,0.1);
	z-index: 10;
	top:0;
	border-radius:2.7px;
}
	#nav-buttons {
		display: none;
	}
		#nav-buttons a {
			border-radius: 50%;
			color: #212529;
			margin-bottom: 11px;
		}
		#nav-buttons span {
			font-size: 1.5em;
			color: #212529;
		}
	.navbar-nav a,.navbar-nav a:visited,.navbar-nav a:hover,.navbar-nav a:active {
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		backface-visibility: hidden;
		position: relative;
		transition:0.5s color ease;
		text-decoration: none;
		color: black;
		bottom: 0;
		text-transform: uppercase;
		font-size: 1.3em;
		font-family: Franklin Gothic Medium,
			Franklin Gothic,ITC Franklin Gothic,
			Arial,sans-serif;
	}
		.square a,.square a:visited,.square a:hover,.square a:active {
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		backface-visibility: hidden;
		transition: 0.5s color ease;
		text-decoration: none;
	}
	.navbar-nav a:hover {
		color: #ffdb4d;
	}
	.square a:hover {
		color: #0000b3;
	}
	#header a.before:before,
	#header a.after:after	{
		content: "";
		transition: 0.5s all ease;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		position: absolute;
	}
	#header a.before:before {
		top: -0.25em;
	}
	#header a.after:after {
		bottom: -0.25em;
	}
	.square a.before:before,
	.square a.after:after {
		height: 5px;
		height: 0.35rem;
		width: 0;
		background: #0000b3;
	}
	.navbar-nav a.after:after {
		height: 5px;
		height: 0.35rem;
		width: 0;
		background: black;
	}
	.navbar-nav a.second:after {
		right: 0;
	}
	#header a.before:hover:before,
	#header a.after:hover:after {
		width: 100%;
	}
	.square {
		float: left;
		font-size: 2.5em;
		font-weight: 500;
		line-height: 1.1em;
		letter-spacing: 1px;
		text-transform: uppercase;
	    font-family: 'Inknut Antiqua', serif;
		box-sizing: border-box;
		position: relative;
	}
	#name-responsive {
		display: none;
	}	
	.square a {
		position: static;
		font-size: 100%;
		overflow: hidden;
		padding: 0 5px 0 23px;
	}
	.square a:visited,
	.square a:active {
		color: #0000b3;
	}
	.square:before,.square:after{
		content: "";
		box-sizing: border-box;
		transition: 0.25s all ease;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		position: absolute;
		width: 5px;
		width: 0.35rem;
		height: 0;
		background: #0000b3;
	}
	.square:before {
		left: 0;
		bottom: -0.2em;
	}
	.square:after {
		right: 0;
		top: -0.2em;
	}
	.square a:before {
		left: 0;
		transition: 0.25s all ease;
	}
	.square a:after {
		right: 0;
		transition: 0.25s all ease;
	}
	.square:hover:before,
	.square:hover:after {
		height: calc(100% + 0.4em);
	}
	.square:hover a:before,
	.square:hover a:after {
		width: 100%;
	}
	#header .navbar-nav {
		float: right;
	}	
		#header .navbar-nav li {
			float: left;
			margin: 0 0 0 50px;
			list-style: none;
		}
#content {
	width: 100%;
	background-color: white;
	min-height: calc(100vh - 11em);
}
#banner-container {
	height: 40.5em;
}			
	#banner {
		position: relative;
		background-size: contain;
		background-image: url(../images/colorado_view2_optimized.jpg);
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
		background-attachment: fixed;
	}
	#banner-h2 {
		color: #ffdb4d;
		width: 100%;
		font-size: 28px;
		line-height:1.6;
		margin-top: 0px;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 5px;
		text-shadow: 0 3px 5px rgba(0,0,0,0.9);
		font-family: Papyrus,fantasy;
		float: right;
	}

	#block1 {
		width: 100%;
		height: 23.75em;
		background-color: #1a75ff;
	}
	#image-card {
		width: 13em;
		border-radius: 3px;
	}
	#image-card img {
		width: 100%;
		height: 13em;
		border-radius: 3px 3px 0 0;
	}
	#image-card a:hover {
		background-color: #bfbfbf;
	}
	#contact-left p {
		color: #fff;
		font-size:12px;
		font-family: 'Inknut Antiqua', serif;
	}
	#contact-right h2 {
		color: #fff;
		margin-top: 1em;
		letter-spacing: 1px;
		font-family: 'Inknut Antiqua', serif;
		font-size: 2em;
		font-weight: 500;
		text-transform: uppercase;
	}
	#contact-right.in-view #fadein-contact1 {
		-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
        -o-animation: fadein 2s; /* Opera < 12.1 */
        animation: fadein 2s;
	}
	#contact-right.in-view #fadein-contact2 {
		opacity: 0;
		-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
        -o-animation: fadein 2s; /* Opera < 12.1 */
        animation: fadein 2s;
		-webkit-animation-delay: 0.8s;
		-moz-animation-delay: 0.8s;
		-ms-animation-delay: 0.8s;
		-o-animation-delay: 0.8s;
		animation-delay: 0.8s;
		-webkit-animation-fill-mode: forwards;
	}
	#contact-right.in-view #fadein-contact3 {
		opacity:0;
		-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
        -o-animation: fadein 2s; /* Opera < 12.1 */
        animation: fadein 2s;
		-webkit-animation-delay: 1.6s;
		-moz-animation-delay: 1.6s;
		-ms-animation-delay: 1.6s;
		-o-animation-delay: 1.6s;
		animation-delay: 1.6s;
		-webkit-animation-fill-mode: forwards;
	}
	#contact-right.in-view #contact-hr {
		opacity:0;
		-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
        -o-animation: fadein 2s; /* Opera < 12.1 */
        animation: fadein 2s;
		-webkit-animation-delay: 2s;
		-moz-animation-delay: 2s;
		-ms-animation-delay: 2s;
		-o-animation-delay: 2s;
		animation-delay: 2s;
		-webkit-animation-fill-mode: forwards;
	}
	#contact-right.in-view p {
		color: white;
		font-weight: 500;
		line-height: 32px;
		margin-top: 2em;
		font-family: 'Inknut Antiqua', serif;
		opacity:0;
		-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
        -o-animation: fadein 2s; /* Opera < 12.1 */
        animation: fadein 2s;
		-webkit-animation-delay: 2.2s;
		-moz-animation-delay: 2.2s;
		-ms-animation-delay: 2.2s;
		-o-animation-delay: 2.2s;
		animation-delay: 2.2s;
		-webkit-animation-fill-mode: forwards;
	}
	#animation-tab {
		width: 15.5em;
		height: 2.4em;
		float: right;
		margin-right: 58px;
		border-radius: 0px 0px 8px 8px;
		background-color: #1a75ff;
		box-shadow: 0px 2px 5px #4d4d4d inset;
		padding-bottom: 2px;
	}
		#animation-tab div {
			text-align: center;
			color: white;
		}
	.animation-element {
		padding-top: 1px;
	}
	.about-me {
		font-family: 'Josefin Sans', sans-serif;
		text-align: center;
		font-size: 14.5em;
		color:black;
		margin: 80px 80px 10px;
		text-shadow: 3px 2px 1px #595959;
		text-transform: uppercase;
		position: relative;
	}
	.bounce-up .subject {
		opacity: 0;
		-moz-transition: all 1s ease-out;
		-webkit-transition: all 1s ease-out;
		-o-transition: all 1s ease-out;
		transition: all 1s ease-out;
		-moz-transform: translate3d(0px, 200px, 0px);
		-webkit-transform: translate3d(0px, 200px, 0px);
		-o-transform: translate(0px, 200px);
		-ms-transform: translate(0px, 200px);
		transform: translate3d(0px, 200, 0px);
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.bounce-up.in-view .subject {
		opacity: 1;
		-moz-transform: translate3d(0px, 0px, 0px);
		-webkit-transform: translate3d(0px, 0px, 0px);
		-o-transform: translate(0px, 0px);
		-ms-transform: translate(0px, 0px);
		transform: translate3d(0px, 0px, 0px);
	}
	
	.about-me-description {
		margin: 65px 0 0 0;
		line-height: 0;
		font-size: 12px;
		text-align: right;
		padding-right: 10px;
	}
	.about-me-flex {
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto 0;
		padding:0 4px;
		height: 35em;	
	}
		.column {
			flex: 25%;
			max-width: 25%;
			padding: 5px 5px;
		}	
			.am-link-container {
				position: relative;
				color: #ffdb4d;
			}
			.column .am-link-container {
				margin: auto;
				vertical-align: middle;
			}
				.image {
					opacity: 1;
					display: block;
					width: 100%;
					height:100%;
					margin-top: 5px;
					border-radius: 3px;
					-moz-transition: all .5s ease;
					-webkit-transition: all.5s ease;
					transition: all .5s ease;
					backface-visibility: hidden;
				}
				.overlay {
					position: absolute;
					top:0;
					bottom:0;
					left:0;
					right:0;
					height: 100%;
					width: 100%;
					opacity:0;
					transition: .3s ease;
					background-color: #d9d9d9;
				}
				.am-link-container:hover .overlay {
					opacity: 0.7;
				}
				.icon-locked {
					color: black;
					font-size: 40px;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					-ms-transform: translate(-50%, -50%);
					text-align: center;
				}
				.blur:hover .image {
					-moz-filter: blur(1px);
					-webkit-filter: blur(1px);
					filter: blur(1px);
					-moz-box-shadow: 3.1px 3.2px #595959;
					-webkit-box-shadow: 3.1px 3.2px #595959;
					-o-box-shadow: 3.1px 3.2px #595959;
					-ms-box-shadow: 3.1px 3.2px #595959;
					box-shadow: 3.1px 3.2px #595959;
					opacity: 1;
					cursor: pointer;
				}
				.blur:hover .middle {
					opacity: 1;
					cursor: pointer;
				}
				.blur:hover .text {
					opacity: 1;
					cursor: pointer;
				}
				.middle {
					-moz-transition: all .3s ease;
					-webkit-transition: all.3s ease;
					-o-transition: all .3s ease;
					-ms-transition: all .3s ease;
					transition: .5s ease;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					-ms-transform: translate(-50%, -50%);
					-webkit-transform: translate(-50%, -50%);
					text-align: center;
					font-family: 'Inknut Antiqua', serif;
					font-size: 1.5em;
				}
				.text {
					color: #ffdb4d;
					font-size: 1.15em;
					line-height: 1.2;
					padding: 16px 32px;
					opacity:0;
					-moz-transition: opacity .6s ease-in-out;
					-webkit-transition: opacity .6s ease-in-out;
					transition: opacity .6s ease-in-out;
				}
					.text a, .text a:hover {
						text-decoration: none;
						text-transform: uppercase;
						color: #ffdb4d;
					}
		/*Flex box media queries*/
		@media (max-width: 800px){
			.column {
				flex: 50%;
				max-width: 50%;
			}
		}
		@media (max-width:600px){
			.column {
				flex: 100%;
				max-width: 100%;
			}
		}
	.hr-bio {
		border:0;
		height: 1.5px;
		width: 50%;
		background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b,
		#f0f0f0);
		background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b,
		#f0f0f0);
		background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b,
		#f0f0f0);
		background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b,
		#f0f0f0);
		background-image: linear-gradient(left, #f0f0f0, #8c8b8b,
		#f0f0f0);
	}
	/*modals for project section starts*/
    .modal-header .close {
        margin:-1rem -1rem -1rem 0;
    }
    .modal-gallery img {
        height: 110px;
    }
    /*
        code by Iatek LLC 2018 - CC 2.0 License - Attribution required
        code customized by Azmind.com
    */
    @media (min-width: 768px) and (max-width: 991px) {
        /* Show 4th slide on md if col-md-4*/
        .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
            position: absolute;
            top: 0;
            right: -33.3333%;  /*change this with javascript in the future*/
            z-index: -1;
            display: block;
            visibility: visible;
        }
    }
    @media (min-width: 576px) and (max-width: 768px) {
        /* Show 3rd slide on sm if col-sm-6*/
        .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
            position: absolute;
            top: 0;
            right: -50%;  /*change this with javascript in the future*/
            z-index: -1;
            display: block;
            visibility: visible;
        }
    }
    @media (min-width: 576px) {
        .carousel-item {
            margin-right: 0;
        }
        /* show 2 items */
        .carousel-inner .active + .carousel-item {
            display: block;
        }
        .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
        .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
            transition: none;
        }
        .carousel-inner .carousel-item-next {
            position: relative;
            transform: translate3d(0, 0, 0);
        }
        /* left or forward direction */
        .active.carousel-item-left + .carousel-item-next.carousel-item-left,
        .carousel-item-next.carousel-item-left + .carousel-item,
        .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
            position: relative;
            transform: translate3d(-100%, 0, 0);
            visibility: visible;
        }
        /* farthest right hidden item must be also positioned for animations */
        .carousel-inner .carousel-item-prev.carousel-item-right {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            display: block;
            visibility: visible;
        }
        /* right or prev direction */
        .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
        .carousel-item-prev.carousel-item-right + .carousel-item,
        .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
            position: relative;
            transform: translate3d(100%, 0, 0);
            visibility: visible;
            display: block;
            visibility: visible;
        }
    }
    /* MD */
    @media (min-width: 768px) {
        /* show 3rd of 3 item slide */
        .carousel-inner .active + .carousel-item + .carousel-item {
            display: block;
        }
        .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
            transition: none;
        }
        .carousel-inner .carousel-item-next {
            position: relative;
            transform: translate3d(0, 0, 0);
        }
        /* left or forward direction */
        .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
            position: relative;
            transform: translate3d(-100%, 0, 0);
            visibility: visible;
        }
        /* right or prev direction */
        .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
            position: relative;
            transform: translate3d(100%, 0, 0);
            visibility: visible;
            display: block;
            visibility: visible;
        }
    }
    /* LG */
    @media (min-width: 991px) {
        /* show 4th item */
        .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
            display: block;
        }
        .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
            transition: none;
        }
        /* Show 5th slide on lg if col-lg-3 */
        .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item  {
            position: absolute;
            top: 0;
            right: -25%;  /*change this with javascript in the future*/
            z-index: -1;
            display: block;
            visibility: visible;
        }
        /* left or forward direction */
        .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
            position: relative;
            transform: translate3d(-100%, 0, 0);
            visibility: visible;
        }
        /* right or prev direction //t - previous slide direction last item animation fix */
        .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
            position: relative;
            transform: translate3d(100%, 0, 0);
            visibility: visible;
            display: block;
            visibility: visible;
        }
    }
	/*project section main part starts*/
	.projects {
        overflow: hidden;
        height: 27em;
        margin-top: 50px;
	}
		.projects a {
            cursor: default;
		}
			.box {
			    box-sizing: border-box;
			    box-shadow: 1.1px 1.2px #595959;
			}
				.projects h1 {
					text-align: center;
					text-shadow: 0 3px 3px rgba(0,0,0,0.9);
					text-transform: uppercase;
					font-size: 2.75em;
					font-family: 'Inknut Antiqua', serif;
					line-height: 70px;
					padding-top: 2px;
				}
			.projects-others, .projects-coding {
				width: 50%;
				-moz-transition: width .3s;
				-webkit-transition: width .3s;
				-o-transition: width .3s;
				transition: width .3s;
				height: 27em;
				padding: 1em;
				box-sizing: border-box;
			}
			
			.projects-others { 
				float: right;
				background: #00004d;
				background-size: cover;
				background-attachment: fixed;
				background-position: center;
				background-repeat: no-repeat;
			}
			.projects-coding {
				background: white;
				border-right:;
			}	
			.projects:hover .projects-others  {
				width: 40%;
			}	
			.projects-coding:hover {
				width: 60% ;
			}
				
			.projects-others:hover {
				width: 60% !important;
			}
				
			.projects-others:hover ~ .projects-coding {
				width: 40% !important;
			}
			/*carousel section starts*/
			.slideshow-container {
				max-width: 1000px;
				height: 7.5em;
				position: relative;
				margin: 7.5px auto;
			} 
				.mySlides, .mySlides2 {
					display: none;
				}
					.project-text {
					    display: flex;
					    width: 100%;
					    justify-content: center;
					    align-items: center;
					}
					    .project-text a:hover {
					        cursor: pointer;
					    }
					.slideshow-img {
						width: 17.4rem;
						height: 10.5rem;
						border-radius: 5px;
						box-shadow:2.5px 2.5px 2px rgba(0,0,0,0.7);
					}
					.fade-car {
						-moz-animation-name:fade-car;
						-webkit-animation-name: fade-car;
						-moz-animation-duration: 2.5s;
						-webkit-animation-duration: 2.5s;
							
					}
				.previous, .nexxt {
					cursor: pointer;
					position: absolute;
					top: 50%;
					width: auto;
					padding: 16px;
					margin-top:;
					font-weight: bold;
					font-size: 28px;
					transition:0.85s ease;
					border-radius: 0 3px 3px 0;
					user-select: none;
				}
				.nexxt {
					right:0;
					border-radius: 3px 0 0 3px;
				}
				.previous:hover, .nexxt:hover {
					cursor: pointer;
				}
				#p-others:hover, #n-others:hover {
					background-color: white;
					color: #00004d;
				}
				#p-coding:hover, #n-coding:hover {
					background-color: #00004d;
					color: white;
				}
					/*carousel media queries*/
					@-webkit-keyframes fade-car {
						from {opacity: 0.4}
						to {opacity: 1}
					}
					@keyframes fade-car {
						from {opacity: 0.4}
						to {opacity: 1}
					}
					@media only screen and (max-width: 300px) {
						.previous, .nexxt {font-size: 11px}
					}
			#coding-github-btn {
			    text-transform: uppercase;
				font-size: 1em;
				font-weight: 400;
				background: #00004d;
				border: 1px solid #00004d;
				transition: all 0.9s;
				color: white;
				cursor: pointer;
			}	
			#coding-github-btn:hover, #coding-github-btn:focus {
				background: white;
				border: 1px solid #00004d;
				color: #00004d;
			}	
			#moreProjects-btn {
			    text-transform: uppercase;
				font-size: 0.85em;
				font-weight: 600;
				width: 30%;
				background: #ffdb4d;
				border: 1px solid #ffdb4d;
				transition: all 0.6s;
				color: #00004d;
				cursor: pointer;
			}
			#moreProjects-btn:hover, #moreProjects-btn:focus {
				opacity: 0.7;
			}
	/*skills section starts*/
	#flex-skills {
		display: flex;
		padding:0 5px;
		color: #001e33;
		flex-wrap: wrap;
		margin-top: 15px;
		width: 100%;
		height: 51em;
	}
		.skills-box {
			position: relative;
			border-radius: 5px;
			height:100%;
			width: 100%;
			font-family: 'Josefin Sans', sans-serif;
		}
			.skills-box h2 {
				text-align: center;
				height: 16%;
				font-size: 19px;
				text-transform: uppercase;
				padding-top: 4px;
				font-family: 'Josefin Sans', sans-serif;
				border-radius: 4px;
			}
			.skills-box .skillboxp {
				text-align: center;
				height: 70px;
				font-size: 13.5px;
				font-weight: normal;
				font-family: 'Courgette', cursive;
				line-height: 18px;
				padding: 15px 10px 0;
			}
			.skillboxh3-top {
			    line-height: 20px;
			}
			.skillboxh3-bottom {
                line-height: 22px;
             }
			.skills-box h3 {
				text-align: center;
				font-size: 14.5px;
				height: 6em;
				font-weight: normal;
				padding: 10px 5px 0;
			}
			.skillbox-span {
			    text-transform: uppercase;
			    font-size: 12.6px;
			}
			.skillbox-span2 {
                text-transform: uppercase;
                font-size: 13.4px;
             }
			.og-height {
			    text-transform: uppercase;
				font-size: 18px;
				color: #002d4d;
			}
			.og-color {
				color: white;
			}
			.non-br {
				display: flex;
				font-size: 22px;
				justify-content: center;
				align-items: center;
			}
			.even {
				background: #002d4d;
				color: white;
			}
			/*svg progress circle starts*/
			/* RADIAL PROGRESS */
			/* Circumference = 2πr */
			/* π = 3.1415926535898 */
			/* r = 35 */
			svg.radial-progress {
				height: auto;
				max-height:;
				max-width: 100%;
				padding: 1em;
				transform: rotate(-90deg);
				width: 9em;
				margin-left: 22%;
				/*border: .5px solid black;*/
			}
			svg.radial-progress circle {
				fill: rgba(0,0,0,0);
				stroke: #fff;
				stroke-dashoffset: 282.74333882308139146163790;/* Circumference */
				stroke-width: 10;
				
			}
			svg.radial-progress circle.incomplete {
				opacity: 0.25;
			}
			svg.radial-progress circle.complete {
				stroke-dasharray: 282.74333882308139146163790;/* Circumference */
			}
			svg.radial-progress text {
				fill: #002d4d;
				text-anchor: middle;
			}
				.radial-progress text {
					font-size: 20px;
				}
				.perc-color {
					color: white;
				}
			svg.radial-progress:nth-of-type(6n+1) circle {
				stroke: #002d4d;
			}
			/*circle progress ends*/
			.skills-box h4 {
				text-align:;
				position: absolute;
				width: 100%;
				bottom: 1px;
				right:0;
				justify-content: center;
				align-items: center;
			}
				.skills-contact {
					text-decoration: underline;
					color: #e6b800;
					font-size: 18px;
					text-transform: uppercase;
				}
				#tournament-link, #tournament-link:hover {
					cursor: not-allowed;
				}
				.skills-contact:visited {
					color: #e6b800;
				}

				.skills-contact:hover {
					opacity: 0.8;
				}
			#other-p-container {
				width: 97%;
				height: auto;
				margin: auto;
				/*border: .5px solid black;*/
			}
				.op-headings {
					text-align: center;
					width: 100%;
					height: 1.5em;
					text-transform: uppercase;
					/*border: .5px solid black;*/
				}
				.op-fullbackground {
					width: 90%;
					height: 1em;
					margin: auto;
					text-align: center;
					border-radius: 2.5px;
					padding-top: 2px;
					/*border:.5px solid black;*/
				}
					.op-numbackground {
						height: 100%;
						background-color: #002d4d;
						border-radius: 4px;
						display: flex;
						justify-content: center;
						align-items: center;
					}
						.op-numbackground h6 {
							color: white;
						}
			.atag-skills-cab {
				text-decoration:underline;
				color: #003380;
			}
			.atag-skills-cab:visited {
				color: #003380;
			}
			.butt-container {
				height: 9em;
				display: flex;
				justify-content: center;
				align-items: center;
			}
				.butt-container a,.butt-container a:visited,.butt-container a:active,.butt-container a:link {
					border:none;
					width: 140px;
                    height: 75px;
				}
				.button-projects {
					transition: box-shadow .35s;
					width: 100%;
                    height: 100%;
					position: relative;
					background-color: #002d4d;
					border-radius: 5px;
					border: none;
				}
				.button-projects:hover {
					box-shadow: 0px 0px 1px 1.25px rgba(0,0,128,0.45);
					cursor: pointer;
					border: none;
				}
				    .button-transition {
				        opacity: 1;
				        display: block;
				        width: 100%;
				        height: auto;
				        transition: 0.5s ease;
				        backface-visibility: hidden;
				    }
                    .button-image {
                        transition: 0.5s ease;
                        opacity:0;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        -ms-transform: translate(-50%, -50%);
                        width: 75%;
                        height: 100%;
                    }
                    .button-projects:hover .button-transition {
                        opacity: 0.96;
                    }
                    .button-projects:hover .button-image {
                        opacity: 1;
                    }
			.others-ul {
				/*border:.5px solid black;*/
				text-align: center;
				list-style: none;
				padding-top: 7px;
			}	
		#top-row .skills-box:nth-child(even),#bottom-row .skills-box:nth-child(odd)  {
			background: #008ae6;
			-moz-box-shadow: 1px 2px 2px #333333;
					-webkit-box-shadow: 1px 2px 2px #333333;
					-o-box-shadow: 1px 2px 2px #33333;
					-ms-box-shadow: 1px 2px 2px #333333;
					box-shadow: 1px 2px 2px #333333;
		}	
/*footer begins*/
footer {
	width: 100%;
	height: 11em;
	background-color: #001e33;
	position:;
	bottom:;
	margin-top:;
}	

		#footer-contact {
			width:;
			height: auto;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: 'Dancing Script', cursive;
			font-weight: 125;
			font-size: 62.5px;
			padding:;
			text-decoration: none;
			transition: 0.5s all ease;
		}
			#footer-contact a,
			#footer-contact a:visited,
			#footer-contact a:hover,
			#footer-contact a:active {
				-webkit-backface-visibility: hidden;
				-moz-backface-visibility: hidden;
				backface-visibility: hidden;
				position: relative;
				transition:0.5s color ease;
				text-decoration: none;
			}
			#footer-contact a:hover {
				color: white;
			}
			#footer-contact a.before:before,
			#footer-contact a.after:after	{
				content: "";
				transition: 0.5s all ease;
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
				position: absolute;
			}
			#footer-contact a.before:before {
				top: -0.25em;
			}
			#footer-contact a.after:after {
				bottom: -0.475em;
			}
			#footer-contact a.after:after {
				height: 5px;
				height: 0.35rem;
				width: 0;
				background: white;
				border-radius: 2px;
			}

			#footer-contact a.second:after {
				right: 0;
			}

			#footer-contact a.before:hover:before,
			#footer-contact a.after:hover:after {
				width: 100%;
			}
		footer a,footer a:visited {
			color: white;
				
		}
	.flex-footer {
		width: 100%;
		height: 4.1em;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
		.flex-footer > div {
			margin: 10px;
			padding: 0px;
			font-size: 28px;
			display: flex;
		}
			.footer-left {
				width: 280px;
				height: auto;
				position: relative;
			}
				.footer-left img {
					width: 100px;
					height: 100%;
					
				}
				.footer-left p {
					font-size: 14px;
					display: flex;
					align-items: flex-end;
					padding:0 10px 0;
				}
					.footer-copyright, .footer-copyright:visited {
						color: white;
					}
					.footer-copyright {
						bottom:0;
					}
					.footer-copyright:hover {
						opacity: 0.75;
					}
			.flex-footer div ul {
					display: flex;
					list-style-type: none;
				}
			.footer-center {
				font-family: 'Josefin Sans', sans-serif;
			}
					.footer-nav li {
						display: flex;
						width: 4.85em;
						align-items: center;
						justify-content: center;
						text-decoration: underline;
					}
					.footer-smallnav {
						opacity:0.7;
					}
					.footer-smallnav:hover a{
						cursor: not-allowed;
					}
					.footer-nav li a:hover {
						opacity: 0.75;
					}
					.footer-smallnav {
						font-size:0.48em;
					}
			.footer-right {
			
			}
				.footer-social {
					display: flex;
					align-items: flex-end;
				}
				
					.footer-social li {
						padding:0 2.75px 0;
					}
					
					.footer-social li img:hover {
						opacity: .5;
					}
					/*tooltip starts*/
					.tooltip-contain {
						position: relative;
						display:;
					}
						.tooltip-contain .tooltipbody {
							visibility: hidden;
							width: 120px;
							height: 115px;
							background-color: white;
							color: #001e33;
							text-align: center;
							border-radius: 6px;
							position: absolute;
							margin-left: -17.5px;
							z-index: 1;
							bottom: 115%;
							opacity: 0;
							transition: opacity 1.25s;
							border: 2px solid #fb3958;
						}
							.tooltip-contain .tb1 {
								left: 50%;
								border: 2px solid #cc33ff;
							}
							.tooltip-contain .tb2 {
								left: -69%;
								border: 2px solid yellow;
							}
							.tooltip-contain .tb3 {
								left: 50%;
								margin-left: -65px;
								border: 2px solid red;
							}
							.tooltip-contain .tb4 {
								right: 0;
								border: 2px solid #0066ff;
							}
						.tooltip-contain .tooltipbody::after {
							content: "";
							position: absolute;
							top: 100%;
							margin-left: -5px;
							border-width: 7px;
							border-style: solid;
						}
							.tooltip-contain .tb1::after {
								left: 11.5%;
								border-color: #cc33ff transparent transparent;
							}
							.tooltip-contain .tb2::after {
								left: 45%;
								border-color: yellow transparent transparent;
							}
							.tooltip-contain .tb3::after {
								left: 52.25%;
								border-color: red transparent transparent;
							}
							.tooltip-contain .tb4::after {
								left: 85.5%;
								border-color: #0066ff transparent transparent;
							}
						.tooltip-contain:hover .tooltipbody {
							visibility: visible;
							opacity: 1;
						}
							.tooltipbody a,.tooltipbody a:visited {
								color: #1a75ff;
							}
							.mt-2 {
							    font-size: 20px;
							}
							.tt-header {
								width: 100%;
								height: 22.5px;
								color: #fff;
								font-size: 19px;
								letter-spacing: 0.5px;
								justify-content: center;
								align-items: center;
							}
								.tth1 {
									background-color: #cc33ff;
								}
								.tth2 {
									background-color: yellow;
								}
								.tth3 {
									background-color: red;
								}
								.tth4 {
									background-color: #0066ff;
	/*fade in keyframes*/
	}
	@keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    /* Firefox < 16 */
    @-moz-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    /* Safari, Chrome and Opera > 12.1 */
    @-webkit-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    /* Internet Explorer */
    @-ms-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    /* Opera < 12.1 */
    @-o-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }