/*****CSS Stylesheet for home page of Maegan Clawges's Portfolio Site*****/
/***********    By Maegan Clawges, please do not replicate    ************/

/*****FONT IMPORTS*****/

@font-face{
	font-family:Source Sans Pro;
	src:url('fonts/Cantarell-Regular.ttf');
}
@font-face{
    font-family:Priss;
    src:url('fonts/LittleMissPriss.ttf');
}
@font-face{
	font-family:Myriad Pro;
	src:url('fonts/MyriadPro-Regular.otf');
}


html,
body {
  height:100%;
  width:100%;
  overflow:hidden;
}

h1, h2, h3, h4, h5, h6, p, a {
	font-family:Helvetica;
}

#header {
   position:fixed;
   left:0;
   top:0;
   height:40px;
   width:100%;
   background:#420099;
}
	#header a {
	    color:#fff;
	}

/* Style main header content */

.toolbar {
    margin-left:8%;
}

	.toolbar h5 {
	    color:#fff;
	    float:left;
	    font-size:20px;   
	}

	.toolbar .right {
	    margin:0 8% 0 0;
	    color:#fff;
	    float:right;
	    position:relative;
	    width:20%;
	}
		.toolbar .right a {
            text-decoration: none;
            float:right;
            position:relative;
            margin:0;
            padding:10px 7%;
            font-size:16px;
            border-right:2px solid #fff;
            color:#fff;  
    	}
    	.toolbar .right a:hover {
		    background:#4d47e5;
		}
		.toolbar .right a:last-child {
	        border-left:2px solid #fff;
	    }

.about {
	margin:0;
	padding:10px 25px;
	width:300px;
	z-index:100;
	opacity:.01;
	position:absolute;
	top:40px;
	right:0;
	background:#420099;
}
	.about h6 {    
		color:#fff;
		font-size:14px;
	    font-weight:400;
	    color:#a0a0a0;
	}
		.about .school {
		    font-weight:600;
		    color:#fff;    
		}
			.about .school a:hover {
				color:#a0a0a0;
			}

.main {
    width:100%;
    margin-top:40px;
}
	.main img {
	    position:absolute;
	    z-index:-1;
	}

/* Row Dimensions */

.row {
    margin:0 15%;
    padding:0;
    position:relative;
    height:0;
}
	.a {
	    height:11.5%;
	}
	.b {
	    height:12.9%;
	}
	.c {
	    height:12.5%;
	}
	.d {
	    height:12.7%;
	}
	.e {
	    height:12.7%;
	}
	.f {
		height:13%;
	}
	.g {
		height:12.6%;
	}
	.h {
		height:12.6%;
	}

/* Column Dimensions */

.u, .v, .w, .x, .y, .z {
    float:left;
    position:absolute;
    z-index::-1;
    height:100%;
    opacity:.9;
}
	.u {
	    top:0;
	    left:0;
	    width:15.8%;
	}
	.v {
	    top:0;
	    left:15.8%;
	    width:17%;
	}
	.w {
	    top:0;
	    left:32.8%;
	    width:17%;
	}
	.x {
	    top:0;
	    left:49.8%;
	    width:16.8%;
	}
	.y {
	    top:0;
	    left:66.6%;
	    width:16.9%;
	}
	.z {
	    top:0;
	    left:83.5%;
	    width:16.5%;
	}

/* set :hover visibility and color for squares */

.a .w, .c .v, .c .z, .d .x, .f .v, .f .y, .h .w, .h .z {
    background-color:#50acf9; /**blue**/
}
.b .z, .c .w, .d .y, .e .v, .f .x, .g .z, .h .u, .a .x, .b .u, .d .y {
    background-color:#f9f00b; /**yellow**/
}
.a .v, .b .x, .c .u, .e .w, .e .z, .f .u, .g .x, .h .v {
    background-color:#4d47e5; /**purple**/
}
.a .u, .a .y, .c .x, .d .v, .e .y, .f .w, .g .u, .h .x {
    background-color:#297d0e; /**green**/
}
.b .v, .b .y, .d .w, .d .z, .e .u, .g .v, .g .y {
    background-color:#d8611d; /**orange**/
}
.a .z, .b .w, .c .y, .d .u, .e .x, .f .z, .g .w, .h .y {
    background-color:#aa0b31; /**red**/
}

/* style titles in squares */

h4 {
    padding:10% 0;
    color:#fff;
    margin:0;
    margin-top: 5%;
    position:relative;
    line-height:1.2em;
    font-size:14px;
    text-align: center;
    width:100%;
    font-weight:300;
    opacity:0;
}
a:hover {
	text-decoration: none;
}
.c .x:hover {
	background-color:#286000;
}

/* Make it responsive */
@media only screen and (max-width: 800px) {
	.toolbar .right {
		width: 30%;
	}

}

@media only screen and (max-width: 600px) {
	.toolbar {
		margin-left:4%;
	}
		.toolbar h5 {
			font-size:18px;
		}
		.toolbar .right {
			width: 40%;
			margin-right:0;
		}
			.toolbar .right a {
				font-size:14px;
		        border-right:none;
		        border-left: 2px #fff solid;
			}
}

@media only screen and (max-width: 450px) {
	.toolbar h5 {
		line-height: 1.5em;
		font-size:14px;
	}
		.toolbar .right a {
			padding-top:14px;
			font-size:12px;
		}
	.portrait {
		width:100%;
		padding:0;
	}
	h4 {
		padding-top:3%;
		font-size: 11px;
		line-height: 1em;
	}
}