/*                                                                   
     .*   `MICHELLE.                      .MICHELLE'    .*             
	       888888888.               	.888888888                  
	       888888'  `888.           .888'  `888888                    
	        88888!  .88.  88.   .88  .88.  88888!                    
	*     `888  	      `8 ( ) 8'           888'                  
	         8888  '"        |U|        "'  8888       .*             
	        888888888888"'   |U|  `888888888888                           
	                .8'     8|U|8     '8.                              
	               .8' 88   8|U|8  88 '8.         .*                 
	            888  `'     8|U|8  `' 888                               
	             88888   .88 |U| 88.   88888                      
	            :8888888888' (U) '8888888888:        *           
	            '! 8888888'       '8888888 !'                     
	      .*        ERAZO          ERAZO                          
	               8                    8                          
	              8                      8                                 
		                       
	.  .._. __ .  ..___.   .   .___  .___.__ .__..___..__.
	|\/| | /  `|__|[__ |   |   [__   [__ [__)[__]  _/ |  |
	|  |_|_\__.|  |[___|___|___[___  [___|  \|  |./__.|__.
*/


/* Class Demo 2 */ 

*{ 
	margin:0;
	padding: 0; 

	font-family: "Futura","Arial","Helvetica";
}

header#canvas {
	width: 52.15vw;
	height: 52.2vw;
	margin: 2vw auto 0 auto ;
}

section,article,figcaption {
	float: left;

}

	article#row-one {
		width: 27.6%;
		height: 100%;
	}

		section.red {
			width: 100%;
			height: 64%;
			float: none;
		}

			figure#section-red {
				display: inline-block;
				margin: 28% 21%;
				width: 58%;
				height: 76%;
			}

			figcaption#red-section {
				margin-top: 6%;
				margin-left: 5%;
				width: 18.4%;
				height: 96%;
			}

		section.cyan {
			width: 233%;
			height: 36%;
		}

			figure.purple {
				margin: 10.5% 13.2%;
				width: 73.5%;
				height: 63%;
			}

				figcaption.orange {
					margin-top: 2.5%;
					margin-left: 2.5%;
					width: 21.9%;
					height: 90%;
				}

	section.yellow {
		width: 44.7%;
		height: 36%;
	}

		figure.black {
			margin: 13.8% 16.8%;
			width: 67.5%;
			height: 65%;
		}

			figcaption.blue {
				margin-top: 4%;
				margin-left: 4%;
				width: 20%;
				height: 90%;
			}

	section.blue {
		width: 27.7%;
		height: 36%;
	}

		figure.red {
			margin: 25% 20%;
			width: 62%;
			height: 61%;
		}

			figcaption.white {
				margin-top: 6%;
				margin-left: 5.5%;
				width: 18%;
				height: 92%;
			}

	article#row-two {
		width: 72.4%;
		height: 28%;
	}

		section.orange {
			width: 50.3%;
			height: 100%;
		}

			figure.green {
				margin: 17% 18.5%;
				width: 64%;
				height: 56%;
			}

				figcaption.yellow {
					margin-top: 3%;
					margin-left: 3%;
					width: 21%;
					height: 91%;
				}

		section.black {
			width: 49.7%;
			height: 229%;
		}

			figure.yellow {
				margin: 24.5% 19.5%;
				width: 61.5%;
				height: 72.8%;
			}

				figcaption.red {
					margin-top: 5%;
					margin-left: 5.5%;
					width: 18%;
					height: 95%;
				}

					main {
							margin-top: 1%;
							margin-right: 10%;
							margin-left: 10%;
							margin-bottom: 10%;
						}	
							h1 {
								text-align: center;
								color: black;
							}
					
							h2 {
								text-align: center;
								color:#CFBAFF;
							}
							a {
								text-decoration: none;
								color: #CFBAFF;
							}
							a:hover {
								color: cyan;
							}

/* CSS COLOR CLASSES */

.red {
	background-color: red;
}
.pink {
	background-color: pink;
}
.orange {
	background-color: orange;
}
.yellow {
	background-color: yellow;
}
.green {
	background-color: limegreen;
}
.cyan {
	background-color: cyan;
}
.blue {
	background-color: blue;
}
.purple {
	background-color: purple;
}
.black {
	background-color: black;
}
.white {
	background-color: white;
}
.red:hover {
	background-color: green;
}
.pink:hover {
	background-color: teal;
}
.orange:hover {
	background-color: blue;
}
.yellow:hover {
	background-color: purple;
}
.green:hover {
	background-color: red;
}
.cyan:hover {
	background-color: pink;
}
.blue:hover {
	background-color: orange;
}
.purple:hover {
	background-color: green;
}
.black:hover {
	background-color: white;
}
.white:hover {
	background-color: black;
}

/* MEDIA SCREENS */

@media screen and (max-width:  479px) {
	body {
		width: 375px;
		height: 627px;
		background-color: black;
	}
}

@media screen and (min-width: 480px) and (max-width: 767px) {
	body {
		width: 480px;
		height: 768px;
		margin: 2vh auto 0 auto;
		background-color: #FFD0FF;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1365px) {
	body {
		width: 768px;
		height: 1024px;
		margin: 2vh auto 0 auto;
		background-color: lavender;
	}
}
@media screen and (min-width: 1366px) and (max-width: 1919px) {
	body {
		width: 1366px;
		height: 768px;
		margin: 2vh auto 0 auto;
		background-color: #F1D4FF;
	}
}
@media screen and (min-width: 1920px) {
	body {
		width: 1920px;
		height: 1080px;
		margin: 2vh auto 0 auto;
		background-color: powderblue;
	}
}