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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

@font-face{
font-family: 'Stars';
src: url(SEEIS___.TTF);}

body{
font-family: 'Raleway', sans-serif;
font-size:20px;
width:100%; }


#logo:hover{
-webkit-animation: cssAnimation 1s 1 ease;
-moz-animation: cssAnimation 1s 1 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}

#about{
width:100%; 
height:82vh;
padding-top: 18vh;
text-align:center;}

#about-inner{}

h1{
font-size:60px;
line-height:60px;
font-weight:200;
margin:25px 0 0;}

h2{
font-size:40px;
line-height:40px;
font-weight:900;
margin:5px 0 20px;}

h3{
font-size:40px;
line-height:40px;
font-weight:700;
margin:10px 0 0;
text-transform:uppercase;}

.button{
display: inline-block;
font-size:20px;
line-height:20px;
font-weight:900;
text-transform: uppercase;
padding: 12px 40px;
margin: 18px 8px;
border-radius:40px;
opacity:1;
margin-bottom:200px;
cursor:pointer;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out}
.button:hover{opacity:0.7;}

.button a{
text-decoration:none;
color:#ffffff;}

.work{background: linear-gradient(0.25turn, #ffa800, #ff0600);}
.resume{background: linear-gradient(0.25turn, #38d56c, #00a8e6);}
.contact{background: linear-gradient(0.25turn, #e75995, #6d27e1);}

#start{
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out}
#start:hover{margin-top:18px;}






#work{
width:100%;
position:absolute;}

.txt-left{text-align:left;} .txt-right{text-align:right;}

h2.txt-right{padding:30px 5% 30px 0; margin:0}

.workline{
width:100%;
opacity:0.2;
height:714px;
margin-bottom:356px;}
.workline.first{margin-top:237px;}
.workline.last{opacity:1; 
background-image:url(../img/bg.jpg);
background-size: 100%;
margin-bottom: 550px;}

.work-featured{
position:absolute; z-index:5; width: 40%;}
.work-featured.left{
left:7%;}
.work-featured.right{
right:7%;}
.work-featured img, .work-featured h3, .work-all-inner{
opacity:1;
cursor:pointer;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;}
.work-featured:hover img, .work-featured:hover h3, .work-all-inner:hover{
opacity:0.7;}
.work-featured img{width:100%; border-radius:15px;}

#wf1{top:95px;}
#wf2{top:450px;}
#wf3{top:805px;}
#wf4{top:1160px;}
#wf5{top:1515px;}
#wf6{top:1870px;}

#work-all{
width:88%;
max-width:1920px;
position:absolute;
top:2580px;
left:6%;}

.work-all-inner{
margin: 0.5%;
width:32%;
border-radius:15px;}






#skills{
width:100%;
background: linear-gradient(0.25turn, #000000, #13233e);
color:#fff;}

#skills h2, #skills h3{color:#fff;}

#skills-contain{
width:88%;
margin:0 6%;
padding-bottom:60px;}

.clear{clear:both; width:100%; height:1px;}

.skills-column{
float:left;
width:30%;
margin-right:3.3%;}

.software span {
    display: inline-block;
    margin-bottom: 12px;
    line-height: 20px;
}

.skills-column p{
margin: 15px 0 0;}

.skills-column img{
display:inline-block;
line-height:20px;}

.bold{font-weight:800;}

.stars{
font-family: 'Stars';
font-size:16px;
line-height:16px;
color: #fa9300;}

#career{width:100%; margin-top:60px;}

#career h3{margin-left:6%;}

#timeline{
margin:40px 0 40px 6%;
width:94%;
overflow:scroll;}

#career-bottom{
width:100%;
text-align:center;}

#career-bottom p{
font-style:italic;
font-size:16px;
margin-bottom:15px;}

#career-inner-buttons .button{margin-bottom:80px;}




#contact{
width:100%; 
height:100vh;
text-align:center;
color:#ffffff;
background: linear-gradient(0.25turn, #00baff, #6529ff);}

#contact-inner{
margin-top:12vh;}

#photo{margin-bottom:30px;}

#contact p{
font-weight:200;
line-height:28px;
margin:12px 0 50px;}

#contact-inner-links{text-align:center; width:100%;}

#contact-inner-links a{
display:inline-block;
margin: 0 30px;
cursor:pointer;
opacity:1;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;}
#contact-inner-links a:hover{
opacity:0.7;}

#credits{
position:absolute;
bottom:20px;
font-weight:700;
font-size:14px;
width:100%;
text-align:center;}






#img_menu{
position:fixed;
z-index:10;
top:40px;
right:40px;
cursor:pointer;
opacity:1;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;}
#img_menu:hover{
opacity:0.7;}

#menu{
width:210px;
padding:10px 20px;
background-color: rgba(255, 255, 255, 0.7);
position:fixed;
z-index:10;
top:40px;
right:-380px;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;}

#menu a{
display:block;
text-transform:uppercase;
font-size:24px;
text-decoration:none;
color:#000000;
font-weight:900;
margin:10px 0;
opacity:1;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;}
#menu a:hover{
opacity:0.7;}





#work-display{
left:-100%;
position:fixed;
min-height:100vh;
z-index:15;
width:90%;
padding:5%;
opacity:0;
-webkit-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;}
.red-gradient{background: linear-gradient(0.25turn, #ff0600, #ffa800);}
.green-gradient{background: linear-gradient(0.25turn, #00a8e6, #38d56c);}
.purple-gradient{background: linear-gradient(0.25turn, #6d27e1, #e75995);}

#closing-work{
position:absolute;
top:40px;
right:40px;
cursor:pointer;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;}
#closing-work:hover{
opacity:0.7;}

#work-display-left{
float:left;
color:#ffffff;
width:35%}

#work-display-right{
width: 60%;
float:right;
height:90.5vh;
overflow-y: scroll;}

#work-display-right img{
margin-bottom:40px;
width:100%;}

.work-display-right-mobile{
width:100%;
text-align:center;}

.work-display-right-mobile img{
width:35% !important;
margin:0 5% 40px;}

#work-title{margin:0 0 5px; text-transform:uppercase;}

#work-year{
font-weight:700;}

#work-description{
margin: 25px 0 35px;}

#work-button{
margin:0;
background-color:#fff;}

.red-gradient #work-button a{color: #ff0600;}
.green-gradient #work-button a{color:#00a8e6;}
.purple-gradient #work-button a{color: #6d27e1;}

#next, #previous{
margin-top:40px;
cursor:pointer;
display:block;
float:left;
margin-right:30px;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;}
#next:hover, #previous:hover{
opacity:0.7;}

.no-button .button{display:none;}
.no-button #work-description {
    margin: 25px 0 0;
}


@media screen and (max-width: 1690px) {

		body {font-size: 18px;}
		
		#logo{width: 120px;}
		
		h1 {
			font-size: 52px;
			line-height: 52px;
			margin: 20px 0 0;}
		
		h2 {
			font-size: 36px;
			line-height: 36px;
			margin: 0 0 15px;}
		
		.button {
			font-size: 18px;
			line-height: 18px;
			padding: 10px 30px;
			margin: 18px 8px;
			margin-bottom: 100px;}
		
		#start {width: 65px;}
		
		
		
		
		
		
		#img_menu {
			top: 40px;
			right: 30px;}
		
		
		
		
		
		h2.txt-right {
			padding: 30px 7% 30px 0;}
		
		h3 {
			font-size: 32px;
			line-height: 32px;
			margin: 8px 0 0;}
		
		
		
		.workline {
			height: 605px;
			margin-bottom: 295px;
		}
		
		.workline.first {margin-top: 205px;}
		.workline.last {margin-bottom: 380px;}
		
		#wf1 {top: 95px;}
		
		#wf2 {top: 400px;}
		
		#wf3 {top: 705px;}
		
		#wf4 {top: 1010px;}
		
		#wf5 {top: 1315px;}
		
		#wf6 {top: 1620px;}
		
		#work-all {top: 2190px;}
		
		
		
		
		
		
		
		.software span {
			display: inline-block;
			margin-bottom: 8px;
			line-height: 16px;
		}
		
		#timeline img {height: 300px;}
		
		#career-bottom p {
			font-size: 14px;
			margin-bottom: 0;}
		
		
		
		
		
		
		#photo {
			margin-bottom: 12px;
			width: 220px;}
		
		#contact p {
			margin: 12px 0 30px;
		}
		
		
		
		
		
		
		
		
		
		#work-display-right {
			height: 90.5vh;
		}
		
		#work-description {
			margin: 18px 0 30px;
			line-height: 20px;}
		
		#closing-work {
			top: 30px;
			right: 30px;
			width: 40px;}
		
		#work-title {margin: 0 0 2px;}

		}






@media screen and (max-width: 1350px) {

				#about {
					height: 85vh;
					padding-top: 15vh;
				}
				
				#img_menu{width:45px;}
				
				.workline {
					height: 510px;
					margin-bottom: 255px;}
				
				.workline.first {margin-top: 155px;}
				.workline.last {margin-bottom: 300px;}
				
				#wf1 {top: 95px;}
				
				#wf2 {top: 350px;}
				
				#wf3 {top: 605px;}
				
				#wf4 {top: 860px;}
				
				#wf5 {top: 1115px;}
				
				#wf6 {top: 1370px;}
				
				#work-all {top: 1870px;}
				
				#contact-inner {margin-top: 5vh;}
				
				#contact p {margin: 12px 0 20px;}
				
				#contact-inner-links img{width:40px;}
				
				#closing-work {
					top: 25px;
					right: 25px;
					width: 35px;}

}




@media screen and (max-width: 1078px) {

		body {font-size: 16px;}
		
		#logo{width: 100px;}
		
		h1 {
			font-size: 46px;
			line-height: 46px;
			margin: 16px 0 0;}
		
		h2 {
			font-size: 32px;
			line-height: 32px;
			margin: 0 0 12px;}
		
		.button {
			font-size: 16px;
			line-height: 16px;
			padding: 8px 34px;
			margin: 14px 6px;
			margin-bottom: 65px;}
		
		#start {width: 50px;}
		
		
		
		
		
		
		
		
		h3 {
			font-size: 26px;
			line-height: 26px;
			margin: 6px 0 0;}
		
		
		
		.workline {
			height: 415px;
			margin-bottom: 200px;
		}
		
		.workline.first {margin-top: 120px;}
		.workline.last {margin-bottom: 250px;}
		
		#wf1 {top: 95px;}
		
		#wf2 {top: 300px;}
		
		#wf3 {top: 505px;}
		
		#wf4 {top: 710px;}
		
		#wf5 {top: 915px;}
		
		#wf6 {top: 1120px;}
		
		#work-all {top: 1530px;}
		
		
		
		
		
		
		
		.software span {
			margin-bottom: 6px;
			line-height: 14px;
		}

		.stars {
			font-size: 14px;
			line-height: 14px;}
		
		#timeline img {height: 240px;}
		
		#career-bottom p {
			font-size: 12px;
			margin-bottom: 0;}
		
		
		
		
		
		
		#photo {
			margin-bottom: 10px;
			width: 200px;}
		
		#contact p {
			margin: 10px 0 24px;
		}

}




/**********************************************   M   O   B   I   L   E   ************************************************************/

@media screen and (max-width: 935px) {
#about {
	height: 75vh;
    padding-top: 25vh;}

#contact-inner {
    margin-top: 15vh;}

.work-all-inner {
    margin: 1% 2%;
    width: 45%;}

.workline.last {
    margin-bottom: 820px;}

#closing-work{position:fixed;}

}



@media screen and (max-width: 820px) {


#work-display-left {
    width: 100%;
}

#work-display-right {
    width: 100%;
    height: auto;
    overflow-y: auto;
margin-top:45px;
}

#work-display {
    overflow: scroll;
    height: 100vh;
	padding-bottom:10px;
}

#next, #previous {
    margin-top: 25px;
}



@media screen and (max-width: 700px) {

#about-inner p, h1, h2{margin-left:5%; margin-right:5%;}

.work-featured {
    width: 86%;
}

		.workline {
			height: 870px;
			margin-bottom: 420px;}
		
		.workline.first {margin-top: 120px;}
		.workline.last {margin-bottom: 400px; height: 540px; margin-top:-250px;}
		
		#wf1 {top: 95px;}
		
		#wf2 {top: 500px;}
		
		#wf3 {top: 910px;}
		
		#wf4 {top: 1330px;}
		
		#wf5 {top: 1745px;}
		
		#wf6 {top: 2150px;}
		
		#work-all {top: 2620px;}

.skills-column {
    clear:both;
    width: 80%;
    margin:0 5% 20px;
}

.work-display-right-mobile img {
    width: 70% !important;
    margin: 0 15% 40px;
}

}




@media screen and (min-width : 320px) and (max-width : 570px) {



h2.txt-right {
    padding: 30px 0 30px 7%;
    text-align: left !important;
}

#about {
    height: 91vh;
    padding-top: 9vh;
}

#logo {
    width: 80px;}

#start {
    margin-top: 50px;
}

h1 {
    font-size: 32px;
    line-height: 32px;}

h2 {
    font-size: 24px;
    line-height: 24px;}

#about-inner p{margin-bottom:12px;}

.button {
    width:100%;
	max-width:250px;
	padding: 12px 0;
text-align:center;
	margin:8px auto;}

#about-inner-buttons, {margin-bottom:30px;}

#career-inner-buttons .button {
    margin: 10px auto;
}

#career {
    margin-bottom: 60px;
}


		
		#wf1 {top: 95px;}
		
		#wf2 {top: 440px;}
		
		#wf3 {top: 790px;}
		
		#wf4 {top: 1150px;}
		
		#wf5 {top: 1505px;}
		
		#wf6 {top: 1850px;}
		
		#work-all {top: 2260px;
				width: 86%;
				left: 7%;}

.workline.first {
    margin-top: 155px;}

.workline {
    height: 680px;
    margin-bottom: 370px;}

.workline.last {
    margin-bottom: 950px;
    height: 1800px;
    margin-top: -160px;
}

.work-all-inner {
    margin: 2% 0;
    width: 100%;}


}

@media screen and (min-width : 320px) and (max-width : 480px) {

		
		#wf1 {top: 95px;}
		
		#wf2 {top: 380px;}
		
		#wf3 {top: 670px;}
		
		#wf4 {top: 990px;}
		
		#wf5 {top: 1265px;}
		
		#wf6 {top: 1550px;}
		
		#work-all {top: 1910px;
				width: 86%;
				left: 7%;}

.workline.first {
    margin-top: 135px;}

.workline {
    height: 565px;
    margin-bottom: 320px;}

.workline.last {
    margin-bottom: 680px;
    height: 1450px;
    margin-top: -150px;
}

#timeline img {
    height: 200px;
}

}

@media screen and (min-width : 320px) and (max-width : 460px) {.workline.last {height: 1400px;}}
@media screen and (min-width : 320px) and (max-width : 440px) {.workline.last {height: 1350px;}}
@media screen and (min-width : 320px) and (max-width : 420px) {.workline.last {height: 1300px;}}
@media screen and (min-width : 320px) and (max-width : 400px) {.workline.last {height: 1250px;}}