/* ********** CSS Reset Starts ********** */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, em, img, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, tr, th, td,
article, aside, footer, header, nav, section, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ********** CSS Reset Ends ********** */


/* ********** CSS Main Starts ********** */
body {
	background: linear-gradient(45deg, rgba(0, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 255, 255, 0.1) 50%, rgba(0, 255, 255, 0.1) 75%, transparent 75%);
	background-color: #000000;
	background-size: 20vw 20vw;
	font-family: verdana, sans-serif;

	animation-name: gradient_motion;
	animation-duration: 40s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes gradient_motion {
	from {background-position: 0 0;}
	to {background-position: 80vw 0;}
}


.wrapper {
	margin: 0 auto 0 auto;
	width: 90%;
	width: 90vw;
}

/* HEADER ----- HEADER ----- HEADER */
header {
	position: relative;
	/*background-color: rgba(255, 255, 255, 0.1);*/
	width: 100%;
	min-height: 10px;
	margin: 0 0 1.5vw 0;
}

header .marcos_logo {
	width: 20%;
	margin: 0;
}

header .marcos_text {
	position: absolute;
	top: 20%;
	left: 20%;
	width: 50%;
}

header .skills {
	position: absolute;
	top: 50%;
	left: 20.5%;
	color: #008888;
	font-size: 2.1vw;
}

header h2 {
	color: #555555;
	margin: 0;
	width: 100%;
	font-size: 2.8vw;
	text-align: right;
}
/* HEADER ----- HEADER ----- HEADER */

/* NAV ----- NAV ----- NAV */
nav {
	background-color: rgba(255, 255, 255, 0.1);
	width: 100%;
	min-height: 40vw;
	margin: 0 0 1.5vw 0;
	padding: 2vw 0 2vw 0;
}

.dynamic_nav_wrap {
	/*background-color: rgba(255, 255, 255, 0.05);*/
	margin: 0 auto 0 auto;
	padding: 0;
	width: 50vw;
	height: 50vw;
}

.dynamic_nav_ul {
	position: relative;
	top: 25%;
	left: ;
	background: radial-gradient(#18b0b0 30%, #f6d186 30%, #f6d186 40%, #116979 40%);
	margin: 0 auto 0 auto;
	width: 50%;
	height: 50%;
	border-radius: 50%;
	transform-origin: 50% 50%;

	animation-name: nav_ul_rotation;
	animation-duration: 60s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes nav_ul_rotation {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}

.dynamic_nav_ul li {
	position: absolute;
	top: -50%;
	left: 25%;
	background-color: #DE7119;
	width: 50%;
	height: 50%;
	border-radius: 50%;
	text-align: center;
	line-height: 12.5vw;
	transform-origin: 50% 200%;
	cursor: pointer;
}

li.dynamic_nav_home {
	transform: rotate(0deg);	
}

li.dynamic_nav_home p {
	color: #FFFFFF;
	font-size: 1.8vw;

	transform: rotate(0deg);

	animation-name: nav_home_rotation;
	animation-duration: 60s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes nav_home_rotation {
	from {transform: rotate(0deg);}
	to {transform: rotate(-360deg);}
}



li.dynamic_nav_skills {
	transform: rotate(72deg);	
}

li.dynamic_nav_skills p {
	color: #FFFFFF;
	font-size: 1.8vw;

	transform: rotate(-72deg);

	animation-name: nav_skills_rotation;
	animation-duration: 60s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes nav_skills_rotation {
	from {transform: rotate(-72deg);}
	to {transform: rotate(-432deg);}
}



li.dynamic_nav_projects {
	transform: rotate(144deg);	
}

li.dynamic_nav_projects p {
	color: #FFFFFF;
	font-size: 1.8vw;

	transform: rotate(-144deg);

	animation-name: nav_projects_rotation;
	animation-duration: 60s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes nav_projects_rotation {
	from {transform: rotate(-144deg);}
	to {transform: rotate(-504deg);}
}



li.dynamic_nav_about {
	transform: rotate(216deg);	
}

li.dynamic_nav_about p {
	color: #FFFFFF;
	font-size: 1.8vw;

	transform: rotate(-216deg);

	animation-name: nav_about_rotation;
	animation-duration: 60s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes nav_about_rotation {
	from {transform: rotate(-216deg);}
	to {transform: rotate(-576deg);}
}



li.dynamic_nav_contact {
	transform: rotate(288deg);	
}

li.dynamic_nav_contact p {
	color: #FFFFFF;
	font-size: 1.8vw;

	transform: rotate(-288deg);

	animation-name: nav_contact_rotation;
	animation-duration: 60s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes nav_contact_rotation {
	from {transform: rotate(-288deg);}
	to {transform: rotate(-648deg);}
}
/* NAV ----- NAV ----- NAV */

/* MAIN ----- MAIN ----- MAIN */
main {
	background-color: #18471C;
	margin: 0 0 1.5vw 0;
	width: 90vw;
	min-height: 20vw;
}

main article {
	position : relative;
	min-height: 9vw;
}

main article .h1_title {
	position: absolute;
	top: -2.6vw;
	left: -1vw;
	color: rgba(255, 255, 255, 0.3);
	font-size: 10vw;
}

main h2.h2_title {
	color: #FFFFFF;
	margin: 0 0 1% 30%;
	padding: 0;
	font-size: 6vw;
	font-style: italic;
	font-weight: lighter;
}

main .slide_wrapper {
	/*background-color: pink;*/
	display: flex;
	padding: 2% 0 0 0;
	width: 100%;
}

main .slide_wrapper aside {
	/*background-color: yellow;*/
	margin: 0;
	width: 30%;
}

main .slide_wrapper aside p.slide_text {
	color: #FFFFFF;
	margin: 0 auto 0 auto;
	width: 90%;
	font-size: 3.5vw;
	text-align: right;
}


main .slide_wrapper section {
	/*background-color: grey;*/
	width: 70%;
	min-height: 100px;
}

main .slide_wrapper section img {
	margin: 0;
	width: 100%;
	padding: 0 0 8% 0;
}

main .content_wrapper {
	display: flex;
	margin: 0 0 4vw 0;
	padding: 0 0 0 0;
	width: 100%;
	min-height: 190px;
}

main .content_wrapper aside {
	width: 30%;
}

main .content_wrapper aside p {
	color: #CCCCCC;
	margin: 0 auto 0 auto;
	width: 90%;
	font-size: 2vw;
	text-align: right;
}

/*main .content_wrapper aside a:link, main .content_wrapper aside a:visited {
	color: #FFFF00;
	text-decoration: none;
}*/

main .content_wrapper section {
	background-color: #000000;
	width: 70%;
	min-height: 80px;
}

main .content_wrapper section .section {
	/*background-color: #333333;*/
	margin: 0 0 4% 0;
	padding: 0 0 1% 0;
	border-bottom: #555555 dotted 0.6vw;
	width: 100%;
}

main .content_wrapper section .section .text_before, main .content_wrapper section .section .text_after {
	color: #888888;
	margin: 0 3% 3% 3%;
	font-size: 2vw;
}

main .content_wrapper section .section .text_after {
	font-style: italic;
	text-align: right;
}

main .content_wrapper section .section img {
	width: 50%;
	margin: 0 0 0 10%;
	padding: 0;
}
/* MAIN ----- MAIN ----- MAIN */

/* FOOTER ----- FOOTER ----- FOOTER */
footer {
	background-color: #DE7119;

	margin: 0 0 1.5vw 0;
	width: 100%;
	min-height: 15vw;
}

footer p {
	color: #7C3524;
	padding: 2vw 0 0 0;
	text-align: center;
	font-size: 2.5vw;
}

footer p a {
	text-decoration: none;
}

footer p span {
	color: #FFFFFF;
}
/* FOOTER ----- FOOTER ----- FOOTER */
/* ********** CSS Main Ends ********** */