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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

body{
background:#999;
}

@font-face {
    font-family: 'Nyet';
    src: url('Font/nyet.eot');
    src: url('Font/nyet.eot') format('embedded-opentype'),
         url('Font/nyet.woff') format('woff'),
         url('Font/nyet.ttf') format('truetype'),
         url('Font/nyet.svg#NyetRegular') format('svg');
}

@font-face {
    font-family: 'red_octoberregular';
    src: url('Font/red_october-regular-webfont.eot');
    src: url('Font/red_october-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Font/red_october-regular-webfont.woff2') format('woff2'),
         url('Font/red_october-regular-webfont.woff') format('woff'),
         url('Font/red_october-regular-webfont.ttf') format('truetype'),
         url('Font/red_october-regular-webfont.svg#red_octoberregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

ul{
list-style:none;
font-family:red_octoberregular;
text-align:left;
float:left;
padding:30px 10px 0 0;
color:#fff;
z-index:1000;
}


#wrapper{
overflow:hidden;
outline:1px solid #fff;
position:absolute;
background-color:#F89823;
box-shadow:10px 10px 15px rgba(0,0,0,0.7);
background-image:url('bg.svg');
background-origin:left bottom;
background-size:cover;
margin-top: 2%;
padding:0;
}

.WDitem{
display:none;
}

.webLink:hover{
color:#CB2027;
}

.webSkills{
display:none;
}

.graphicSkills{
display:none;
}

.leader{
width:90%;
height:70%;
background-image:url('leader.svg');
background-size:contain;
background-position:left bottom;
background-repeat:no-repeat;
position:absolute;
left:5%;
bottom:7%;
z-index:1;
pointer-events:none;
}

.vivaLaRevolution{
width:100%;
height:12%;
background-image:url('vivaLaRevolution.svg');
background-size:contain;
background-position:center top;
background-repeat:no-repeat;
position:absolute;
left:0;
bottom:0;
z-index:100;
background-color:#FEFCEA;
}

.soldiers{
width:8%;
height:5%;
/*outline:1px solid blue;*/
background-image:url('soldiers.svg');
background-size:contain;
background-position:left top;
background-repeat:no-repeat;
position:absolute;
left:-8%;
bottom:10%;
z-index:10;
margin-bottom:0px;
animation: march 30s ease-in infinite, stomp 0.5s linear infinite;
-webkit-animation: march 30s ease-in infinite, stomp 0.5s linear infinite;
}



@keyframes stomp{
	0%{margin-bottom:0px;}
	50%{margin-bottom:4px;}
	100%{margin-bottom:0px;}
}

@-webkit-keyframes stomp{
	0%{margin-bottom:0px;}
	50%{margin-bottom:4px;}
	100%{margin-bottom:0px;}
}

.planes{
width:10%;
height:10%;
top:70%;
left:-10%;
position:absolute;
background-image:url('planes.svg');
background-size:contain;
background-repeat:no-repeat;
/*outline:1px solid green;*/

}

#plane0{
-webkit-animation:plane0 10s linear infinite;
animation:plane0 10s linear infinite;	
}

#plane1{
margin:10% 0 0 10%;
-webkit-animation:plane1 10s linear infinite;
animation:plane1 10s linear infinite;
}

#plane2{
	-webkit-animation:plane2 10s linear infinite;
animation:plane2 10s linear infinite;
margin:10% 0 0 -20%;
}

@-webkit-keyframes plane0 {
	0%{left:-20%;top:70%;width:10%;height:10%;}
	100%{left:80%;top:-70%;width:60%;height:40%;}
}

@keyframes plane0 {
	0%{left:-20%;top:70%;width:10%;height:10%;}
	100%{left:80%;top:-70%;width:60%;height:40%;}
}

@-webkit-keyframes plane1 {
	0%{left:-20%;top:70%;width:10%;height:10%;}
	100%{left:120%;top:-60%;width:60%;height:40%;}
}

@keyframes plane1 {
	0%{left:-20%;top:70%;width:10%;height:10%;}
	100%{left:120%;top:-60%;width:60%;height:40%;}
}

@-webkit-keyframes plane2{
	0%{left:-20%;top:70%;width:10%;height:10%;}
	100%{left:100%;top:-40%;width:60%;height:40%;}	
}

@keyframes plane2{
	0%{left:-20%;top:70%;width:10%;height:10%;}
	100%{left:100%;top:-40%;width:60%;height:40%;}	
}

@-webkit-keyframes march {
    0% {left: -8%;}
    /*50% {bottom: 14px;}*/
    100% {left: 100%;height:30%;width:60%;}
}


@keyframes march {
        0% {left: -8%;}
    /*50% {bottom: 14px;}*/
    100% {left: 100%;height:30%;width:60%;}
        }

#visualArtTitle{
background-color:#FEFCEA;
color:#CB2027;
width:65%;
height:100%;
text-align:right;
position:absolute;
top:55%;
left:35%;
padding:1%;
font-family:Nyet;
cursor:pointer;
}

#visualArt{
outline:1px solid purple;
display:none;
}

#visArtThumbs{
margin:3% auto 0 auto;
}

.visArtThumb{
	width:15%;
	max-width:100px;
}

#webDesignTitle{
background-color:orange;
color:#CB2027;
width:80%;
height:100%;
text-align:right;
position:absolute;
top:70%;
left:30%;
padding:1%;
font-family:Nyet;
cursor:pointer;
}

/*#videoTitle{
background-color:#CB2027;
color:#FFF;
width:80%;
height:100%;
text-align:right;
position:absolute;
top:70%;
left:30%;
padding:1%;
font-family:Nyet;
cursor:pointer;
z-index:1;
}
.videoLink{
float:left;
margin-top:10px;
width:100%;
font-family:red_octoberregular;
}

.video a{
color:orange;
}

.video a:hover{
color:#fff;
}*/

#graphicDesignTitle{
background-color:#CB2027;
color:#FFF;
width:80%;
height:70%;
text-align:right;
position:absolute;
top:70%;
left:30%;
padding:1%;
font-family:Nyet;
cursor:pointer;
z-index:1;
overflow:scroll;
}
.graphicDesignLink{
float:left;
margin-top:10px;
width:100%;
font-family:red_octoberregular;
cursor:pointer;
font-size:40%;
}

.graphicDesign a{
color:orange;
}

.graphicDesign a:hover{
color:#fff;
}

.graphicDesignThumb{
width:25%;
}

.theme{
font-family:Nyet;
text-align:left;
list-style:none;
/*width:100px;*/
float:left;
padding:15px 10px 15px 0;
/*outline:1px solid red;*/
color:#CB2027;
z-index:1000;
cursor:pointer;
}

.theme:hover{
color:orange;
}

.sandBoxLink{
font-family:Nyet;
text-align:left;
list-style:none;
width:100px;
float:left;
padding:15px 10px 15px 0;
/*outline:1px solid red;*/
color:#CB2027;
z-index:1000;
}

.sandBoxLink:hover{
color:orange;
}

a{
text-decoration:none;
}

.styleMenu {
margin:0 auto;
position:relative;
bottom:0;
/*outline:1px solid green;*/
}

.styleMenu li:first-child {
width:250px;
padding-right:20px;
}

.webLink {
color:#fff;
text-decoration:none;
line-height:20px;
}

#about {
position:relative;
pointer-events:none;
z-index:2;
top:0;
left:50%;
padding:0;
width:61%;
height:90%;
color:#CB2027;
cursor:pointer;
}

#aboutBar{
	pointer-events:auto;
}

#aboutTitle{
font-family:Nyet;
font-size:3.5em;
text-align:left;
cursor:pointer;
}

#aboutText {
font-family:red_octoberregular,sans-serif;
/*width:70%;*/
text-align:justify;
}

#resume {
position:absolute;
top:0;
left:0%;
padding:0;
width:61%;
height:20%;
color:#CB2027;
/*z-index:400;*/
font-family:red_octoberregular,sans-serif;
font-size:3.5em;
text-align:right;
cursor:pointer;

}

.resumeLetter{
	pointer-events:none;
}

#theWebSkills{
font-size:20px;
font-family:red_octoberregular,sans-serif;
pointer-events:none;
}

#overlay {
width:10%;
height:16.666666%;
border: 15px solid white;
position:absolute;
margin:0 auto;
display:inline-block;
/*outline:1px solid green;*/
border-radius:50%;
z-index:500;
left:40%;
top:-5%;
background-color:orange;
}