/*Unlikely Attitude CSS*/

/*
GOOGLE FONTS
font-family: 'Archivo Black', sans-serif;
font-family: 'Actor', sans-serif;
*/

img, object, embed, video {
     max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
     width:100%;
}

/* Mobile Layout: 480px and below. */

/* ~~~~~~~~~~~~~ GENERAL STYLES < 480 ~~~~~~~~~~~*/
*{ 
	margin: 0; 
	padding: 0;
}

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

html {
	position:relative;
	min-height:100%;
}

body {
	font-family:'Actor',Helvetica, Arial, sans-serif;
	font-size: 100%;
	line-height: 100%;
	margin: 0 0 0 0;
}

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

h1 { 
	font-family: 'Archivo Black', Helvetica, Arial, sans-serif;
	font-size: 0.8em; 
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 0.5em;
	margin-top: 1em;
	line-height: 1em;
}

h2 {
	font-size: 0.8em;
	font-weight: bold;
	text-transform: uppercase;
	color: #3c4c7a;
	padding-top: 1em;
	padding-bottom: 0.5em;
}

h3 {
	font-size: 0.8em;
	line-height: 1.15em;
	margin: 0 0 .25em 0;
}

p {
	font-size: 0.9em;
	line-height: 1.25em;
	margin-bottom: .5em;
}

a:link {
	font-weight: normal;
	color: #B50210;
	text-decoration: none;
}
a:hover {
	color: #FF0000;
	text-decoration: underline;
}
a:visited {
	color: #d57250;
	text-decoration: none;
}


/* ~~~~~~~~~~~~~ HEADER STYLES < 480  ~~~~~~~~~~~*/
header {
	background-color: #000000;
	background-repeat: no-repeat;
	background-size:cover;
	background-position:right;
	width: 100%;
	position: relative;
	margin: 0;
	}
	
#home header {
	min-height:175px;
	background-image:url(../graphics/UnAt_MainHead_01.jpg);
	background-position:bottom right;
	}
	
#projects header, #project header, #portfolio header{
	min-height:75px;
	background-image:url(../graphics/UnAt_MainHead_01.jpg);
	background-position:bottom right;
	}
	
	
#titleBar {
	background-color:#fff;
	opacity:0.5;
	padding: 0 4.25%;
}

.mainTitle{
	font-family: 'Archivo Black', Helvetica, Arial, sans-serif;
	color: #300;
	font-size: 1.25em;
	text-align:center;
	line-height:100%;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);  /* IE filter extension */
	width:100%; /* Required for IE filter */  
	-moz-opacity: 0.75;  /* Mozilla extension */  
	-khtml-opacity:0.75; /* Konqueror extension (Safari 1.1)*/  
	opacity:0.75;        /* the correct CSS3 syntax */
	}

#social {
	display:none;
}

#navBar{
	width:100%;
	background-color:#000;
	position: absolute;
	bottom: 0em;
	padding: 0.1em 0 0 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);  /* IE filter extension */
	width:100%; /* Required for IE filter */  
	-moz-opacity: 0.7;  /* Mozilla extension */  
	-khtml-opacity:0.7; /* Konqueror extension (Safari 1.1)*/  
	opacity:0.7;        /* the correct CSS3 syntax */
	
}

.imageCap {
	display:none;
	}
	
nav{
	margin: 0 0 0 4.25%;
}

nav li{
	float:left;
	text-decoration:none;
	list-style:none;
	margin: 0 4% 0 0;
}

nav li a{
	color:#fff;
	font-size: 0.7em;
}

nav li a:link{
	color:#fff;
}

nav li a:visited{
	color:#fff;
}


nav li a:hover {
	color: #FF0000;
	text-decoration: underline;
}

/* ~~~~~~~~~~~~~ CONTENT STYLES < 480  ~~~~~~~~~~~*/
#content{
	width:100%;
	margin:2% 0;
	clear:both;
	padding: 0 0 2em 0;
}
article{
	width:100%;
	position:relative;
}

article p{
	margin: 0.5em 0 1em 0;
	text-align:left;
}

#home article h1, #projects article h1, #project article h1{
	text-align:left;
	font-size:0.8em;
}

#projects article h1, #project article h1{
	width: 90%;
}

#workingOn {
	float:left;
	width:90%;
	margin: 0 4%;
	position:relative;
}

.label{
	color:#fff;
	background-color:#000;
	width:96%;
	padding: 2%;
	position:absolute;
	bottom: 0;
	text-align:right;
	font-size:0.8em;
	letter-spacing: 0.2em;
	opacity:0.85;
}


#alsoWorking .label{
	display: none;
}

#workingOn img{
	width:100%;
	height:auto;
}

#alsoWorking {
	float:left;
	width:90%;
	margin: 0 4% 20% 4%;
}

#alsoWorking .proj {
	float:left;
	width:45%;
	margin: 0 2% 0 0;
	min-height:150px;
	position:relative;
}

#alsoWorking img{
	width:100%;
	height:auto;
	margin: 0 0 2% 0;
}

#andSoOn {
	display: none;
}

#andSoOn img{
	width:100%;
	height:auto;
	margin: 0 0 1em 0;
	border-width:1px;
}

#adInfinitum {
	margin:0 0 0 4.25%;
	float:left;
	width:95.75%;
}

#projThumbs {
	margin: 2em 0 2.5em 4.25%;
	float:left;
	width:95.75%;
}

#adInfinitum img, #projThumbs img{
	float:left;
	width:13%;
	border-width:1px;
	padding:0;
	margin: 0 1.2% 1% 0;
	height:auto;
}

#projThumbs img{
	width:5%;
}

.projThumgs_section {
	clear:both;
}

#projects article, #project article{
	width: 92%;
	margin: 0 4.25%;
}

.projectCard{
	float:left;
	width:100%;
	margin: 0 0 1em  0;
	min-height: 50px;
}

.projectCard .thumb{
	float:left;
	width: 46%;
	margin: 4% 4% 4% 0;
	min-height: 150px;
	max-height:150px;
	background-image:url(../projects/projImages/ph_thumb.jpg);
	background-repeat:no-repeat;
	background-position:center; 
	background-size:cover;
	overflow:hidden;
	
}

.projectCard .thumb img{
	width: 100%;
	
}

#projects .info{
	float:left;
	width: 46%;
	margin: 4% 4% 4% 0;
	min-height: 150px;
}

#project .info{
	float:left;
	width: 100%;
	margin: 0 0 0 2%;
	min-height: 150px;
}

#project .info span, #projects .info span{
	font-weight:bold;
}

#project .info li, #projects .info li{
	list-style:none;
	font-size:0.8em;
	margin: 0 0 0.2em 0;
	/*line-height:1.6em;*/
}

#project ul, #projects ul{
	padding: 0;
}

#movieGallery {
	background-color:#000;
}

#movieGallery #content {
	width: 50%;
	margin:auto;
	margin-top: 50px;
	
}


/*~~~~~~~~~~~~~~~~~ FOOTER < 641 ~~~~~~~~~~~~~~~~~~*/

footer{
	clear:both;
	background-color:#000;
	color:#fff;
	position:absolute;
	left:0;
	bottom:0;
	text-align:center;
	padding: 0.6em 0 0 0;
	width:100%;
	margin:2em 0 0 0;
	height:1.5em;
}

@media only screen and (min-width: 641px) {

/* ~~~~~~~~~~~~~ GENERAL STYLES 640 - 850 ~~~~~~~~~~~*/

h1 { 
	font-size: 1.20em; 
}

h2 {
	font-size: 1.15em;
}

h3 {
	font-size: 1.10em;
}

p {
	font-size: 1em;
	line-height: 1.35em;
}

/* ~~~~~~~~~~~~~ HEADER STYLES 640 - 850 ~~~~~~~~~~~*/
#projects header, #project header{
	min-height:150px;
	}

.mainTitle{
	font-size: 2em;
	text-align: left;
}

#social {
	position:absolute;
	top:0;
	right:0;
	width: 25%;
	margin: 3px 4.25% 0 0;
	float:right;
}

#social li {
	margin: 0;
	padding: 0;
	list-style: none;
	position:relative;
	top: 0;
	left:auto;
}

#social li, #social {
	height:26px;
	display:block;
}

#social a {
	position:relative;
	float: right;
}

#twitter {
	left:0px;
	width:26px;
}

#twitter {
	background:url(../graphics/socIcon.png) 0 0;
}

#twitter:hover{background:url(../graphics/socIcon.png) no-repeat 0 -26px;}

#tumblr {
	left:26px;
	width:26px;
	background:url(../graphics/socIcon.png) -26px 0;
}

#tumblr:hover{background:url('../graphics/socIcon.png') -26px -26px;}

#instagram {
	left:52px;
	width:26px;
	background:url(../graphics/socIcon.png) -52px 0;
}

#instagram:hover{background:url('../graphics/socIcon.png') -52px -26px;}

#facebook {
	left:78px;
	width:26px;
	background:url(../graphics/socIcon.png) -78px 0;
}

#facebook:hover{background:url('../graphics/socIcon.png') -78px -26px;}

nav li a{
	font-size: 1em;
}

/* ~~~~~~~~~~~~~ CONTENT STYLES 640 - 850 ~~~~~~~~~~~*/
.label {
	font-size:1.1em;
}

#alsoWorking .label{
	display: inline;
	bottom: 0;
	/*top:65%;*/
	font-size:0.8em;
}

#workingOn {
	float:left;
	width:45.15%;
	margin: 0 1.2% 5em 4.25%;
	min-height:150px;
}


#workingOn img{
	width:100%;
	height:auto;
}



#alsoWorking {
	float:left;
	width:29.7%;
	margin: 0 1.2% 0 0;
}

#alsoWorking .proj {
	/*float:left;*/
	width:100%;
	margin: 0 2% 1em 0;
}

#alsoWorking img{
	width:100%;
	height:auto;
}

#andSoOn {
	float:left;
	width:14.25%;
	margin: 0 4.25% 0 0;
	display:block;
}

#andSoOn img{
	width:100%;
	height:auto;
	margin: 0 0 1em 0;
	border-width:1px;
}

.projectCard{
	width:50%;
	margin: 0 0 1em  0;
}

.projectCard .thumb{
	width: 46%;
	margin: 4% 4% 4% 0;
}

.projectCard .info{
	width: 46%;
	margin: 4% 4% 4% 0;
}

#mainImage {
	float:left;
	width: 66%;
	height:300px;
	background-color:#066;
	overflow:hidden;
}


#mainImage img{
	width:100%;
}

#project .info{
	width: 25%;
}


@media only screen and (min-width: 851px) {
/* ~~~~~~~~~~~~~ GENERAL STYLES gt 850 ~~~~~~~~~~~*/	

/* ~~~~~~~~~~~~~ HEADER STYLES gt 850 ~~~~~~~~~~~*/
#projects header, #project header{
	min-height:175px;
	}

nav li a{
	font-size: 1.25em;
}

.imageCap {
	font-family: 'Actor', Helvetica, Arial, sans-serif;
	color: #fff;
	font-size: .75em;
	text-align:right;
	margin-right: 4.25%;
	display:block;
	}

/* ~~~~~~~~~~~~~ CONTENT STYLES gt 850 ~~~~~~~~~~~*/
#home article h1{
	font-size:1em;
}



.projectCard{
	width:33.33%;
	margin: 0 0 1em  0;
}

.projectCard .thumb{
	width: 46%;
	margin: 4% 2% 4% 0;
}

.projectCard .info{
	width: 46%;
	margin: 4% 2% 4% 0;
}



}