html body
{
/* background-image:url("../images/swing-bg-ug.jpg"); */
background-repeat: no-repeat;
background-color: #dc3301;
/* cd3301 */
}


header h1.mobilemode
{
	display:none;
	color: #fff;
	font-weight:500 !important;
}

body div.wrapper { background-color: #dc3301; }

div.wrapper.wrapper-style2
{
   background-image:url("../images/about.jpg");
   background-repeat: no-repeat;
   background-size: contain;
   background-color:#000;
  height: 900px;
}

div.wrapper.wrapper-style3 {  background: #000; display: none;}	

body div.wrapper article#work div.container
{
 width: 100%;
}

body nav#nav
{
 background:#111;
}


html.desktop body nav#nav ul.container
{
	
}


strong, b
{
 color: #eee;
}

img#mainlogo
{
z-index:99999;
top: 0;
position:absolute;
left: 0px;
max-width:100%;

	-webkit-transition: -webkit-transform 1s ease;
	-moz-transition: transform 1s ease;
	-ms-transition: -ms-transform 1s ease;
	-o-transition: -o-transform 1s ease;
	transition: transform 1s ease;
}

span#subtitle
{
	
}

img.opa8
{
opacity:0.8;
}

img.opa0
{
	opacity: 0;
}


.row + .row > *
{
	width: 300px;
}



article#middle
{
	position:relative;
	width: 100%;
	margin-bottom: 5em;
}


img#typewriter
{
	position:absolute;
	width: 600px;
	right:0;
	bottom:20px;
	max-width:100%;
	z-index:50;
}



#work div.container div.row
{
    /* background: rgba(0,0,0,0.5); */
	padding: 10px 30px;
    float: right;
    text-align: right;
    width: 40%;
	text-shadow:none;
	color: #fff;
}

div.container div.row span a
{
 color: #eee;
}

a.city
{
 font-size: 1.4em;
 padding-left: 17px;
    position: relative;
    top: -20px;
}



h1.f500 a:hover
{
	color:#fff;
}


	/* animation */

	#top.container div.row div.4u span.me img
	{
		max-width: 300px;
	}	

	#top.container div.row.magic .showface .me
	{
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-ms-transition: all 1s ease;
		-o-transition: all 1s ease;
		transition: all 1s ease;			
		position: absolute;		
		opacity: 0;
		z-index: 100;
	}
				

	#top.container div.row.magic:hover .showface .me
	{
		opacity: 1;
	}
						


	#lacy {top: 330px;}
	#heather {top: 330px;}
	#laurel  {top: 330px;}
	#donna   {top: 330px;}
	#amelia    {top: 330px;}
	#eric    {top: 330px;}



@media screen and (max-width: 800px) {
	
	img#mainlogo{ width: 300px;}
	.container {width: 100%;}
	span#subtitle {
	    display:none;
	}

}






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

a.city.desktopmode,	
header h1.desktopmode
{
	display:none;
}	
	
header h1.mobilemode	
{
	display: block;
	z-index:9999;
}

#work div.container div.row
	{
     background: rgba(0,0,0,0.1);
     text-shadow: 1px 1px 1px #000; 
  	}
	
img#mainlogo
{
    left: -25%;
    top: 120px;
    width: 80%;
	-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}


.row:not(.flush):not(.no-collapse):not(.no-collapse-1):not(.no-collapse-2):not(.no-collapse-3) > *
{
	text-align: right;
}


body div.wrapper.wrapper-style2 {
    height: 600px;
}

#work div.container div.row
	{ width: 100%; }

#work div.container div.row span
	{ font-size: 14px; }	

body div.wrapper article img#typewriter
{
	display: none;
}

html.mobile body div.wrapper article#top.container div.row
{
	margin-top: 25px;
}

#top.container div.row div#cities.4u header h1 strong
{
	font-weight: 600;
}

#top.container div.row.magic .showface .me
{
	display: none;
}

h1.f500
{
	font-size: 500;
}

a.city
{
	top: 5px;	
}

	
}