/* ---BEGIN GOOGLE FONTS--- */
@import url('https://fonts.googleapis.com/css?family=Droid+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700');
/* ---END GOOGLE FONTS--- */

body {
	background-color: #f9f5ef;
}

.wrapper{
	width:100%;
	min-width:300px;
	font-family: 'Droid Sans', sans-serif;
}

.header {
	background: #fff url('trinity.logo.png') 20px 16px no-repeat;
	background-size: 210px;
	height:90px; /* << You'll usually need to adjust this to accommodate the org's logo */
	width: 31%;
	float:left;
	position:fixed;
	margin-top:-20px;
	z-index: 100;
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

.nav {
	background: #fff;
	color: #000;
	margin-top:0px;
	padding-top: 10px;
	height: 71px;
	font-family: 'Open Sans Condensed', sans-serif;
	border-bottom: 1px solid #eae7e3;
	position:fixed;
	right:0;
	width:70%;
	margin-top:-20px;
	z-index: 100;
	text-transform:uppercase;
	clip-path: polygon(0 0, 100% 0, 100% 73%, 0 100%);
}

.nav .title {
	font-size: 10pt;
}

.nav a, .nav a:visited {
	color: #ffffff;
	text-decoration: underline;
}

.content {
	background:transparent;
	color: #202020;
	padding-top: 80px;
}

/* ---Makes the "I would like to recieve the Trinity Rep Newsletter" checkbox field look like a text description--- */
#j_id0\3a j_id1\3a j_id13\3a j_id14\3a 3\3a j_id15{
	width: 100%;
	margin-left: 150px;
}
#j_id0\3a j_id1\3a j_id13\3a j_id14\3a 3\3a j_id15 > input[type="checkbox"]{
	display:none;
}

.footer {
	background: url('trinity.footer.png') 0px 25px no-repeat;
	color: transparent;
	background-color: #f9f5ef;
	border-top: solid black 8px;
	width: 95%;
	height: 150px;
	margin-left:auto;
	margin-right:auto;
}



/* ---BEGIN CUSTOM ADDITIONS---
If an org wants to add to, edit, or hide default text, or hide a section of the cart
or checkout page, place these changes below so they won't be accidentally deleted if
additional changes are made later on. */

/* ---END CUSTOM ADDITIONS--- */



/* ---RESPONSIVE CODE STARTS HERE---*/
@media only screen and (max-width:900px) {
	.wrapper {
		width:100%;
	}

	.header {
		background: #fff url('trinity.logo.png') center 15px no-repeat;
		background-size:100%;
		height:90px;
		background-size: 215px;
	}
	#j_id0\3a j_id1\3a j_id13\3a j_id14\3a 3\3a j_id15{
		width: 150%;
		margin-left: auto;
		margin-right: auto;
}
	.footer {
		background: url('trinity.footer.png') 0px 25px no-repeat;
		background-size: 100%;
		color: transparent;
		background-color: #f9f5ef;
		border-top: solid black 8px;
		width: 95%;
		height: 150px;
}
}

/*Under 768px */
@media only screen and (max-width:767px) {
	.header{
		background: #fff url('trinity.logo.png') center 10px no-repeat;
		background-size: 225px;
		width: 100%;
		height: 75px;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
	.nav{
		background: #fff;
		width: 100%;
		margin-top:45px;
		height: 5%;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);		
	}

	.nav .links a.allEventsLink, .nav .links a.allEventsLink:hover, .nav .links a.cartLink, .nav .links a.cartLink:hover{
		padding:15px;
	}

	.content{
		padding-top: 130px;
	}
}



/* Up To 480px*/
@media only screen  and (max-width:479px) {
	.header{
		background: #fff url('trinity.logo.png') center no-repeat;
		background-size: auto 100%;
		height: 70px;
	}
	.nav{
		margin-top:25px;
	}
	.nav .title{
		display:none;
	}
	.nav .links{
		margin-top: -10px;
	}
	.footer {
		background: url('trinity.logo.png') 2% 15px no-repeat, url('trinity.footer.jpg') 2% 100% no-repeat;
		background-size: 100%;
		height: 190px;
	}
}