@charset "utf-8";

@font-face {
    font-family: 'Rick Sanchez';
    src: url('../images/fonts/sanchezregular-webfont.html');
    src: url('../images/fonts/sanchezregular-webfont.eot') format('embedded-opentype'),
         url('../images/fonts/sanchezregular-webfont.woff2') format('woff2'),
         url('../images/fonts/sanchezregular-webfont.woff') format('woff'),
         url('../images/fonts/sanchezregular-webfont.ttf') format('truetype'),
         url('../images/fonts/sanchezregular-webfont.svg#321impactregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Pure Boi'; 
    src: url('../images/fonts/pure-thindurango-webfont.eot'); 
    src: url('../images/fonts/pure-thindurango-webfont.eot?#iefix') format('embedded-opentype'),
         url('../images/fonts/pure-thindurango-webfont.woff2') format('woff2'),
         url('../images/fonts/pure-thindurango-webfont.woff') format('woff'),
         url('../images/fonts/pure-thindurango-webfont.ttf') format('truetype'),
         url('../images/fonts/pure-thindurango-webfont.svg#321impactregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
    background-image: url("../images/grid-background.jpg");
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

nav {
    height: 50px;
    position: relative;
    z-index: 1000;
}

/* This is the base of our bulleted list */
nav ul {
	padding: 0px;
	margin: 0px;
	list-style-type: none; /* Hide those bullets */
	list-style-image: none; /* NO REALLY, hide those bullets */
}

nav ul li {
    display: block; /* Turns our list item into a box to contain our buttons */
    width: 10%;/* We want our buttons to take up equal parts of the navigation area. Because we have four buttons, then the width must be 25% */
    height: 31px; /* Match our <nav> tag height of 65px */
    float: right; /* Float them left so they go horizontally across the page */
    margin-top: 23px;
}

/* Here is the actual button style itself */

nav ul li a {
    display: block; /* This is really 65px, but I have subtracted the padding-top from this number in order to horizontally balance the type */
    text-align: center;
    text-decoration: none;
    font-size: 1em;
    padding-top: 15px; /* This padding vertically centeres the type */
    font-family: 'Pure Boi';
    text-transform: uppercase;
    color: rgba(123,123,123,1.00);
    margin-left: 0px;
}

nav ul li a:hover{
    color: rgba(176,188,34,1.00);	
}

nav ul li:hover ul {
	display: block;
	
}

nav ul li ul li {
	width: 100%;
} 

.gamt-logo {
    background-image: url(../images/GAMT-logo.png);
    display: block;
    width: 495px;
    height: 59px;
    background-repeat: no-repeat;
    float: left;
    position: relative;
    margin-top: 25px;
    margin-left: 25px;
}

.tmcc-logo {
    width: 107px;
    height: 73px;
    background-repeat: no-repeat;
    background-image: url("../images/tmcc-logo.png");
    position: absolute;
    margin-right: auto;
    margin-left: 842px;
    margin-top: 399px;
    float: right;
}

.container {
    padding-top: 0px;
    margin-top: 106px;
    padding-right: 24px;
    padding-left: 15px;
    margin-left: 403px;
    position: absolute;
    width: 548px;
}

.headline {
    color: rgba(176,188,34,1.00);
    font-family: 'Rick Sanchez';
    text-transform: uppercase;
    font-size: 2.5em;
    width: 579px;
}

.paragraph {
    font-family: 'Rick Sanchez';
    font-size: small;
    color: rgba(123,123,123,1.00);
    margin-top: -24px;
}

.learning-button {
    display: block;
    width: 175px;
    height: 25px;
    font-family: 'Pure Boi';
    border-radius: 25px; /* This rounds the corners of our rectangle */
    color: rgba(255,255,255,1.00);
    font-size: 1em;
    text-decoration: none;
    text-align: center;
    padding-top: 10px;
    background-color: rgba(176,188,34,1.00);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    margin-top: 25px;
    position: absolute;
}

.learning-button:hover {
    color: rgba(236,236,236,1.00);
}

.left-shapes {
    background-image: url(../images/left-shapes.png);
    float: left;
    width: 364px;
    height: 600px;
    background-repeat: no-repeat;
    margin-left: 25px;
    position: absolute;
    margin-top: 97px;
    left: 0px;
}

.right-shapes {
    background-image: url(../images/right-shapes.png);
    float: right;
    width: 545px;
    height: 852px;
    background-repeat: no-repeat;
    margin-left: 25px;
    position: static;
    margin-top: 26px;
    right: 0px;
    padding-bottom: 20px;
}

/* media queries! */

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

	.right-shapes {
		background-image: none;  
		float: right;
		width: 0px;
		height: 0px;
}
	
	.gamt-logo {
		background-image: url("../images/GAMT-logo-small.png");
		width: 387px;
		height: 49px;

	}
	
	.tmcc-logo {
		margin-top: 0px;
		position: relative;
}
	
	.container {
		position: relative;
		width: auto;
		z-index: 62;
		
	}
		
	.headline {
		width: auto;
	}
}
	
/* 730px media queries!! */

@media only screen and (max-width: 730px) {
	
	nav ul li {
		display: block;
		width: 69%;
		height: 29px;
		margin-top: 10px;
		padding-top: 0px;
		float: left;
}

/* Here is the actual button style itself */

	nav ul li a {
		text-align: center;
		text-decoration: none;
		font-size: 1em;
		padding-top: 10px;
		width: 187px;
		margin-left: 91px;
}

	.left-shapes {
    background-image: url("../images/left-shapes-small.png");
    width: 244px;
    margin-top: 17px;
    opacity: 0.3;
    height: 199pt;
}
	.container {
		position: relative;
		width: auto;
		z-index: 62;
		margin-left: auto;
		margin-top: 281px;
	}
	
	.gamt-logo {
		background-image: url("../images/GAMT-logo-smallest.png");
	}
		
}