@charset "utf-8";
/*
 * @Course: Intro to CSS3
 * @Author: Luis Moreno
 */

/* Web Fonts */

@font-face {
    font-family: 'roboto_condenseditalic';
    src: url('fonts/robotocondensed-italic-webfont.eot');
    src: url('fonts/robotocondensed-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/robotocondensed-italic-webfont.woff') format('woff'),
         url('fonts/robotocondensed-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'roboto_condensedbold';
    src: url('fonts/robotocondensed-bold-webfont.eot');
    src: url('fonts/robotocondensed-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/robotocondensed-bold-webfont.woff') format('woff'),
         url('fonts/robotocondensed-bold-webfont.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'simonettablack_italic';
    src: url('fonts/simonetta-blackitalic-webfont.eot');
    src: url('fonts/simonetta-blackitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/simonetta-blackitalic-webfont.woff') format('woff'),
         url('fonts/simonetta-blackitalic-webfont.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

/* Media Query */

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

	.mainheader{
		display: block;
		float: none;
		width: auto;
		background: rgb(255,255,255);
	}
	
	hgroup *{
		float: none;
		width: auto;
	}

	header img {
		float: none;
		width: auto;
	}
}

@media screen {

	/* Bounce Animation */

	@-webkit-keyframes bounce {
		from {
			margin-top: 10%;
		}
		to {
			margin-top: 1%;
		}
	}

	@-moz-keyframes bounce {
		from {
			margin-top: 10%;
		}
		to {
			margin-top: 1%;
		}
	}

	@-ms-keyframes bounce {
		from {
			margin-top: 10%;
		}
		to {
			margin-top: 1%;
		}
	}

		@-o-keyframes bounce {
		from {
			margin-top: 10%;
		}
		to {
			margin-top: 1%;
		}
	}

	@keyframes bounce {
		from {
			margin-top: 10%;
		}
		to {
			margin-top: 1%;
		}
	}

	.animation{
		-webkit-animation-name: bounce;
		-moz-animation-name: bounce;
		-ms-animation-name: bounce;
		animation-name: bounce;
		-webkit-animation-duration: 2s;
		-moz-animation-duration: 2s;
		-ms-animation-duration: 2s;
		animation-duration: 2s;
		-webkit-animation-iteration-count: 5;
		-moz-animation-iteration-count: 5;
		-ms-animation-iteration-count: 5;
		animation-iteration-count: 5;
		-webkit-animation-direction: alternate;
		-moz-animation-direction: alternate;
		-ms-animation-direction: alternate;
		animation-direction: alternate;
		position: relative;
		right: 0px;
	}

	/* 2D Transformation */

	.trans2d{
		-webkit-transform: scale(1.2) skewY(2deg);
		-moz-transform: scale(1.2) skewY(2deg);
		-ms-transform: scale(1.2) skewY(2deg);
		-o-transform: scale(1.2) skewY(2deg);
		transform: scale(1.2) skewY(2deg);
		-webkit-transform-origin: -15%;
		-moz-transform-origin: -15%;
		-ms-transform-origin: -15%;
		-o-transform-origin: -15%;
		transform-origin: -15%;
		width: 90%;
	}

	/* 3D Transformation */

	.trans3d{
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transform: perspective(300px) rotate3d(30, 20, 10, -30deg) scale3d(1.5, 1.5, 1.5);
		-moz-transform: perspective(300px) rotate3d(30, 20, 10, -30deg) scale3d(1.5, 1.5, 1.5);
		-ms-transform: perspective(300px) rotate3d(30, 20, 10, -30deg) scale3d(1.5, 1.5, 1.5);
		transform: perspective(300px) rotate3d(30, 20, 10, -30deg) scale3d(1.5, 1.5, 1.5);
		-webkit-perspective-origin: 50% 50%;
		-moz-perspective-origin: 50% 50%;
		-ms-perspective-origin: 50% 50%;
		perspective-origin: 50% 50%;
		-webkit-backface-visibility: visible;
		-moz-backface-visibility: visible;
		-ms-backface-visibility: visible;
		backface-visibility: visible;
		margin-left: 10%;
		margin-right: 10%;
		width: 20%;
	}

	section a:link {
		text-decoration: none;
		font-weight: bold;
	}

	section a:visited {
		text-decoration: none;
		color: #FFA435;
	}

	section a:active {
		text-decoration: none;
	}

	section a:hover {
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 2px;
		-webkit-transition: letter-spacing 0.80s ease;
		-moz-transition: letter-spacing 0.80s ease;
		-ms-transition: letter-spacing 0.80s ease;
		-o-transition: letter-spacing 0.80s ease;
		transition: letter-spacing 0.80s ease;
	}

	section, article, aside, figure, header, footer{
		display: block;
	}

	h2, h3, h4, h5, h6 {
		font-family: roboto_condensedbold, Courier, monospace;
		height: 10px;
	}

	h1{
		color: navy;
		background-color: white;
		text-align: center;
		font-family: Arial, Helvetica, sans-serif;
		font-size: x-large;
		font-style: oblique;
		font-weight: 900;
		word-spacing: 10px;
		letter-spacing: 4px;
		height: 40px;
		line-height: 42px;
		width: 400px;
		-webkit-box-shadow: inset -3px -3px 2px 1px rgba(33, 98, 175, 1);
		-moz-box-shadow: inset -3px -3px 2px 1px rgba(33, 98, 175, 1);
		-o-box-shadow: inset -3px -3px 2px 1px rgba(33, 98, 175, 1);
		-ms-box-shadow: inset -3px -3px 2px 1px rgba(33, 98, 175, 1);
		box-shadow: inset -3px -3px 2px 1px rgba(33, 98, 175, 1);
		-webkit-border-radius: 80px;
		-moz-border-radius: 80px;
		-o-border-radius: 80px;
		-ms-border-radius: 80px;
		border-radius: 80px;
	}

	header {
		margin-top: 5%;
		width: 100%;
	}

	.mainheader{
		border: medium outset gray;
		width: 100%;
		float: left;
		/*131,234,200  138, 199, 235 -230deg to top left*/
		/*Works on Mobile*/
		background: url(embelish-bottom-right.png) no-repeat right bottom, -webkit-gradient(linear, left top, right bottom, color-stop(0.13, rgb(54, 155, 214)),color-stop(0.57, rgb(138, 199, 235)),color-stop(0.79, rgb(149, 155, 238))), rgb(255,255,255);
		background: url(embelish-bottom-right.png) no-repeat right bottom, -webkit-linear-gradient(-230deg, rgb(54, 155, 214) 13%, rgb(138, 199, 235) 57%, rgb(149, 155, 238) 79%), rgb(255,255,255);
		background: url(embelish-bottom-right.png) no-repeat right bottom, -ms-linear-gradient(-50deg, rgb(54, 155, 214) 13%, rgb(138, 199, 235) 57%, rgb(149, 155, 238) 79%), rgb(255,255,255);
		background: url(embelish-bottom-right.png) no-repeat right bottom, -o-linear-gradient(-230deg, rgb(54, 155, 214) 13%, rgb(138, 199, 235) 57%, rgb(149, 155, 238) 79%), rgb(255,255,255);
		background: url(embelish-bottom-right.png) no-repeat right bottom, -moz-linear-gradient(-230deg, rgb(54, 155, 214) 13%, rgb(138, 199, 235) 57%, rgb(149, 155, 238) 79%), rgb(255,255,255);
		background: url(embelish-bottom-right.png) no-repeat right bottom, linear-gradient(-230deg, rgb(54, 155, 214) 13%, rgb(138, 199, 235) 57%, rgb(149, 155, 238) 79%), rgb(255,255,255);
		-webkit-background-size: 15%, 100%;
		-moz-background-size: 15%, 100%;
		-ie-background-size: 15%, 100%;
		-o-background-size: 15%, 100%;
		background-size: 15%, 100%;
/*		background: linear-gradient(to top left, rgb(131,234,200) 13%, rgb(158,255,240) 57%, rgb(190,255,255) 79%);*/
	}

	hgroup *{
		width: 78%;
		margin-top: 1%;
		margin-right: 0;
		margin-bottom: 0;
		margin-left: 1%;
		float: left;
	}

	header img{
		float: left;
		width: 20%;
		border: medium outset gray;	
	}

	nav{
		clear: both;
		border: medium outset gray;
		width: 100%;
		background-color: #FFBB68;
	}

	.main-content{
		clear: both;
		text-align: justify;
		width: 100%;
		border: medium outset gray;
		-webkit-box-shadow: inset -3px -3px 2px 1px rgba(76, 76, 76, 1);
		-moz-box-shadow: inset -3px -3px 2px 1px rgba(76, 76, 76, 1);
		-o-box-shadow: inset -3px -3px 2px 1px rgba(76, 76, 76, 1);
		-ms-box-shadow: inset -3px -3px 2px 1px rgba(76, 76, 76, 1);
		box-shadow: inset -3px -3px 2px 1px rgba(76, 76, 76, 1);
	}

	.main-content section h2{
		padding: 0% 0% 2% 2%;
		-webkit-text-shadow: 2px 3px 5px rgba(166, 99, 17, 1);
		-moz-text-shadow: 2px 3px 5px rgba(166, 99, 17, 1);
		-o-text-shadow: 2px 3px 5px rgba(166, 99, 17, 1);
		text-shadow: 2px 3px 5px rgba(166, 99, 17, 1);
	}

	section{
		background-color: #FFFFFF;
		margin-right: 1%;
	}

	section h2{
		padding: 0% 0% 2% 2%;
		-webkit-text-shadow: 2px 3px 5px rgba(23, 32, 143, 1);
		-moz-text-shadow: 2px 3px 5px rgba(23, 32, 143, 1);
		-o-text-shadow: 2px 3px 5px rgba(23, 32, 143, 1);
		text-shadow: 2px 3px 5px rgba(23, 32, 143, 1);
	}

	article{
		border: thick outset rgba(149, 155, 238, 0.9);
		margin-left: 1%;
		width: 96%;
	}

	body{
		background-color: #8AC7EB;
		color: black;
		text-align: justify;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: larger;
		margin-left: 10%;
		margin-right: 10%;
		letter-spacing: 1px;
	}

	p{
		margin-right: 1%;
		text-indent: 1%;
	}

	/*
	.sidebar{
		float: right;
		width: 10%;
		text-align: center;
	}
	*/

	footer{
/*		background-color: #959BEE; */
	}

	.footer{
		clear: both;
		text-align: center;
		border: medium outset gray;
		width: 100%;
		background-color: #FFBB68;
	}

	.author{
		font-family: roboto_condenseditalic, Courier, monospace;
		font-style: italic;
		text-align: right;
	}

	.com-date{
		font-family: simonettablack_italic, Courier, monospace;
		color: graytext;
		font-style: oblique;
		font-weight: bold;
		text-align: right;
		margin-right: 5%;
	}

	/* CSS menu*/
	#navigation {
		text-align: center;
		font-size: 1em;
		font-family: "Times New Roman", Times, serif;
		font-weight: 600;
	}

	#navigation ul{
		margin-left: 1%;
		margin-right: 1%;
		padding-left: 0;		
		background-color: #4651DC;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-o-border-radius: 10px;
		-ms-border-radius: 10px;
		border-radius: 10px;
		-webkit-box-shadow: 3px 3px 1px rgba(166, 99, 17, 0.8);
		-moz-box-shadow: 3px 3px 1px rgba(166, 99, 17, 0.8);
		-o-box-shadow: 3px 3px 1px rgba(166, 99, 17, 0.8);
		-ms-box-shadow: 3px 3px 1px rgba(166, 99, 17, 0.8);
		box-shadow: 3px 3px 1px rgba(166, 99, 17, 0.8);
	}

	#navigation li {
		list-style: none;
		border-bottom: solid black;
		border-top: solid black;
		border-width: 1px;
		background: #369cd6;
		display: inline;
	}

	#navigation a {
		color: white;
		cursor: pointer;
		display: inline;
		height: 25px;
		line-height: 25px;
		text-decoration: none;
		width: 100%;
	}

	#navigation li a:hover {
		text-decoration:underline;
		color: black;
		background: #2162af;
		position: relative;
		-webkit-transition: color 0.50s ease-out;
		-moz-transition: color 0.50s ease-out;
		-ms-transition: color 0.50s ease-out;
		-o-transition: color 0.50s ease-out;
		transition: color 0.50s ease-out;
	}

	#navigation li span {
		text-decoration: underline;
		color: black;
		background: #2162af;
		position: relative;
		display: inline;
		height: 25px;
		line-height: 25px;	
	}
}