@charset "utf-8";

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  
	{
		font:100% Verdana, Arial, Helvetica, sans-serif;
		background: #333333;
		margin: 0; 
		padding: 0;
		text-align: left; 
		color: #CCCCCC;
		font-size: 16px;
	}
 	
		
.image.fit img 
	{
		width: 100%;
		height: auto;
	}
	 
img.resize
	{
		max-width: 100%;
		min-width: 300px;
		height: auto;
	}

#wrapper
	{  
       width:1800px;  
       margin:0 auto;  
       text-align:Center;  
	}
	
.top-wrapper 
	{	
		margin: 0 auto;
		max-width: 1200px;
		width: 90%;
		padding: 10px;
		text-align: center;
    }
	
.page-wrapper 
	{	
		margin: 0 auto;
		max-width: 800px;
		width: 90%;
		padding: 10px;
		text-align: center;
    }
	
table, td, th
	{
		border:1px solid white;
	}

td
	{
		padding:15px;
	}

th
	{
		background-color:none;
		color:white;
	}
	
a:link 
	{
		color: #CCCCCC;
		text-decoration: none;
	}
	
a:visited 
	{
		text-decoration: none;
		color: #CCCCCC;
	}

a:hover 
	{
		text-decoration: none;
		color: #CCCCCC;
	}

a:active 
	`{
		`text-decoration: none;
		`color: #CCCCCC;
	`}

h1 
	{
		font:100% Verdana, Arial, Helvetica, sans-serif;
		color: #CCCCCC;
		font-size: 26px;
		text-align:left;
		font-weight: bold;
	}

h2 
	{
		font:100% Verdana, Arial, Helvetica, sans-serif;
		color: #CCCCCC;
		font-size: 22px;
		text-align:left;
		font-weight: bold;
	}

h3 
	{
		font:100% Verdana, Arial, Helvetica, sans-serif;
		color: #CCCCCC;
		font-size: 18px;
		text-align:left;
		font-weight: bold;
	}
	
h4
	{
		font:100% Verdana, Arial, Helvetica, sans-serif;
		color: #CCCCCC;
		font-size: 16px;
		text-align:left;
		font-weight: bold;
	}

html
	{
	overflow-y:scroll;
	overflow-x:auto;
	}
	
p, li 
	{
      line-height: 1.5;
    }
	
ul 
	{ 
		margin: 10px 0 0; padding-right: 20px; list-style-position: inside; 
	}
	
.icon 
	{
		-webkit-tap-highlight-color: transparent; /* Removes blue flash on iOS/Safari */
		outline: none; /* Removes focus ring */
	}

.icon:focus,
.icon:active 
	{
		outline: none;
		background-color: transparent; /* Prevent any active background flash */
	}

a 
	{
		-webkit-tap-highlight-color: transparent;
		outline: none;
	}
	
    .contact, .education, .skills, .achievements { margin-bottom: 20px; }
    .experience-item { margin-bottom: 20px; }
    .experience-item h3 { margin: 0; }
    .dates { font-style: italic; font-size: 14px; margin-bottom: 6px; }
	
	
/* Desktop nav */
.desktop-nav 
	{
		font:100% Verdana, Arial, Helvetica, sans-serif;
		background: #333333;
		margin: 0; 
		padding: 0;
		text-align: center; 
		color: #CCCCCC;
		font-size: 16px;
		overflow: hidden;
	}

.desktop-nav #wrapper
	{  
       width:1200px;  
       margin:0 auto;  
       text-align:Center;  
	}
	
.desktop-nav a 
	{
		text-decoration: none;
		color: #CCCCCC;
	}

.desktop-nav a:hover 
	{
		text-decoration: none;
		color: #CCCCCC;
	}


/* *//* *//* *//* *//* *//* *//* *//* *//* */	


/* Mobile nav */
.mobile-nav 
	{
		background-color: #333333;
		overflow: hidden;
		display: none; /* Hidden by default */
	}

.nav-header 
	{
	display: flex;
	align-items: center;
	}

.mobile-nav .icon 
	{
		font-size: 30px;
		color: white;
		padding: 14px 16px;
		display: block;
		text-decoration: none;
	}

.mobile-nav .nav-title 
	{
		color: white;
		font-size: 20px;
		font-weight: bold;
	}

.mobile-links 
	{
		display: none;
		background-color: #333333;
	}

.mobile-links a 
	{
		color: white;
		padding: 12px 16px;
		display: block;
		text-decoration: none;
	}

.mobile-links a:hover 
	{
		background-color: #575757;
	}

/* *//* *//* *//* *//* *//* *//* *//* *//* */	
	

/* Responsive behavior */
@media screen and (max-width: 768px) 
	{
	.mobile-nav 
		{
			display: block;
		}
	
	.desktop-nav 
		{
			display: none;
		}
	}

/* *//* *//* *//* *//* *//* *//* *//* *//* */		
	
	
/* XLarge */

	@media screen and (max-width: 1680px) {

		/* Basic */

			body, input, select, textarea {
				font-size: 14pt;
			}

		/* Header */

			#header {
				padding: 6em 0 6em 0 ;
			}

	}
/* *//* *//* *//* *//* *//* *//* *//* *//* */	

/* Large */

	@media screen and (max-width: 1140px) {

		/* Basic */

			body, input, select, textarea {
				font-size: 13pt;
			}

			h1 br, h2 br, h3 br, h4 br, h5 br, h6 br {
				display: none;
			}

		/* List */

			ul.major-icons li {
				padding: 2em;
			}

				ul.major-icons li .icon {
					height: 8em;
					line-height: 8em;
					width: 8em;
				}

		/* Main */

			.main {
				padding: 4em 0 2em 0 ;
			}

				.main.style2 {
					background-attachment: scroll;
				}

		/* Header */

			#header {
				padding: 5em 0 5em 0 ;
				background-attachment: scroll;
			}

				#header br {
					display: inline;
				}

		/* Footer */

			#footer {
				padding: 4em 0 4em 0 ;
				background-attachment: scroll;
			}

	}
	
/* *//* *//* *//* *//* *//* *//* *//* *//* */	

/* Medium */

	@media screen and (max-width: 980px) {

		/* List */

			ul.major-icons li {
				padding: 2em;
			}

				ul.major-icons li .icon {
					height: 7em;
					line-height: 7em;
					width: 7em;
				}

		/* Main */

			.main {
				padding: 5em 3em 3em 3em ;
			}

		/* Header */

			#header {
				padding: 8em 3em 8em 3em ;
			}

		/* Footer */

			#footer {
				padding: 5em 3em 5em 3em ;
			}

		/* One */

			#one {
				text-align: center;
			}

		/* Two */

			#two {
				text-align: center;
			}

	}
	
/* *//* *//* *//* *//* *//* *//* *//* *//* */	

/* Small */

	@media screen and (max-width: 736px) {

		/* Basic */

			body, input, select, textarea {
				font-size: 12pt;
			}

			h1 {
				font-size: 1.75em;
			}

			h2 {
				font-size: 1.5em;
			}

			h3 {
				font-size: 1.1em;
			}

			h4 {
				font-size: 1em;
			}

		/* List */

			ul.major-icons li {
				padding: 1.5em;
			}

				ul.major-icons li .icon {
					height: 5em;
					line-height: 5em;
					width: 5em;
				}

					ul.major-icons li .icon:before {
						font-size: 42px;
					}

		/* Icon */

			.icon.major {
				margin: 0 0 1em 0;
			}

		/* Button */

			input[type="submit"],
			input[type="reset"],
			input[type="button"],
			button,
			.button {
				height: 3em;
				line-height: 3em;
			}

		/* Main */

			.main {
				padding: 3em 1.5em 1em 1.5em ;
			}

		/* Header */

			#header {
				padding: 4em 3em 4em 3em ;
			}

				#header .actions {
					margin: 2em 0 0 0;
				}

		/* Footer */

			#footer {
				padding: 3em 1.5em 3em 1.5em ;
			}

	}

/* *//* *//* *//* *//* *//* *//* *//* *//* */	

/* XSmall */

	@media screen and (max-width: 480px) {

		/* Button */

			input[type="submit"],
			input[type="reset"],
			input[type="button"],
			.button {
				padding: 0;
			}

		/* Main */

			.main {
				padding: 2em 1.5em 0.1em 1.5em ;
			}

		/* Header */

			#header {
				padding: 4em 2em 4em 2em ;
			}

				#header br {
					display: none;
				}

		/* Footer */

			#footer {
				padding: 2em 1.5em 2em 1.5em ;
			}

				#footer .copyright {
					margin: 1.5em 0 0 0;
				}

					#footer .copyright li {
						border: 0;
						display: block;
						margin: 1em 0 0 0;
						padding: 0;
					}

						#footer .copyright li:first-child {
							margin-top: 0;
						}

	}

/* *//* *//* *//* *//* *//* *//* *//* *//* */	

/* XXSmall */

	@media screen and (max-width: 320px) {

		/* Basic */

			html, body {
				min-width: 320px;
			}

		/* Main */

			.main {
				padding: 2em 1em 0.1em 1em ;
			}

		/* Header */

			#header {
				padding: 3em 1em 3em 1em ;
			}

		/* Footer */

			#footer {
				padding: 2em 1em 2em 1em ;
			}

	}
	
/* *//* *//* *//* *//* *//* *//* *//* *//* */	