@charset "UTF-8";
/* CSS Document */
/* table of content
-------------------------------
- general content
- typography 
- header & nav
- images
- media
- footer
- media queries




-----------------------------------*/ 

/* general content
---------------------------- */

header {margin-top: -20px; }


.main {padding: 3%; }
.row {padding:1% 0;}
.grey { background-color: #373737} 




/* typography 
------------------------------*/
.personaltext {font-size: .85em }

.videotitle {margin-top: 20%;}

.videotitletwo {margin-top: 10%;}

.flyertext {font-size: .85em }

.phototext {font-size: .85em }


body {font-family:Gotham, sans-serif;
	font-size:1.5em;
	color: #E2E2E2;
	/*background-color: #373737; width:auto; ------- this is th old og color*/
  background-color: #373737; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, #373737, black);}

aboutbody {font-family:Gotham, sans-serif;
	font-size:1.5em;
	color: #E2E2E2;
	/*background-color: #373737; width:auto; ------- this is th old og color*/
  background-color: #373737; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, #373737, black);}


h2 {font-family: Gotham, sans-serif;
	font-size:3em;
	margin:0.67em;
	}
	

h2.bio {color:#FFF800;}
p.bio {color:#FF0004;}

/* --- this is for the image text ---*/
h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}


h2 span.spacer {
   padding: 2px 5px 2px 10px;
}


.abutme {
	font-family:Gotham, sans-serif;
	color: #E2E2E2;
	margin-top:4%;}

#map {
		float:right;
        height: 400px;
        width: 50%;
       }


/* header & nav 
--------------------------------*/


logo {float:left;
	padding-top: 25%, 0;
	margin-top: 25%;}

menu {float: right; }


/* Top Horizontal Nav Bar ------------------------------------------------
Remove margins and padding from the list, and add a black background color 
------------------------------------------------------------------------*/


ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #373737;
	float:right;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 8px;
	 text-transform: uppercase;
	margin-top: 1em;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}



/* verticle nav
--------------------------------*/

.vertbar {
	text-align:left;
    list-style-type: none;
    margin-top: 0%;
	margin-left: 1%;
    padding: 0;
    width: 100px;
	font-size: .75em;
	position: fixed;	
}

.vertbar li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
	color:#A29D8C;
	
}

/* Change the link color on hover */
.vertbar li a:hover {
    background-color: #555;
    color: white;
}



/*homepage gif*/
.animated-gif{
width: 50px;
height: auto;
}




/* images 
-----------------to get avatar to a circle----------------*/
img {max-width: 100%;}


#mofo {margin-top: 75px;}


/* Box shadow here */
/*.image-link {box-shadow: 5px 8px 10px #252525;}*/


#logo {margin-top: 2em;}
				
		
/*B&W*/
.bw {
	float:left;
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.bw:hover {
  -webkit-filter: grayscale(100%);
}
/* media 
------------------------------*/


/* Possibly delete this later. MAybe the problem

video {float:right;
		margin-right: -150px;}*/



/* footer
--------------------------------- */



p.address {margin:auto;
	text-align:center;
		color: #A29D8C;
		font-size:1.5em }


p.copyright { text-align:center;
		color:#E2E2E2;
		font-size:.75em;}
		
nav a {text-decoration:none;
	color: #E2E2E2; 
	display: inline-block;
	background: red;
  }


nav a:hover { color: #8C0453; }

ul.social {
		display: block;
		list-style: none;
		text-align: center;
		margin: -4% 0; }
		
		
		
		
ul.social li {
	font-size: 1em;
	display: inline;
	padding: 0 1.2%; }
	
	
	
	
ul.social li a { 
	color: #666; }
	
	
	
/*-- hover effects */

ul.social li.facebook a:hover { 
	color: rgb(59, 89, 152); }


ul.social li.twitter a:hover { 
	color: rgb(0, 172, 237); }

ul.social li.instagram a:hover { 
	color: rgb(81, 127, 237); }

ul.social li.youtube a:hover { 
	color: rgb(187, 0, 0); }

ul.social li.flickr a:hover { 
	color: rgb(255, 0, 132); }

ul.social li.linkedin a:hover { 
	color: rgb(0, 123, 182); }


/* media queries 
---------------------------------*/

/* Clearfix Code */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */



/*Top Nav Bar Media Queries */


@media screen and (max-width: 1000px){
	/*Work iframe media quaries*/
	#work1 {width: 200px;}
	#work2 {width: 200px;}
	#work3 {width: 200px;}
	#work4 {width: 400px;}
	#lcvideo {width: 300px;}
	
}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
   
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }



  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }

.vertbar { font-size: .5pt;  }
.row {text-align:center;}

	
#work4 {width: 300px;}
	#lcvideo {width: 300px;}

}