/* CSS Document */

body {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	background: #181818;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	/* text-align: center; this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	line-height: 18px;
}


/* -----------------------
=Regulars
------------------------*/
.group:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
    }


img { border: 0; border-radius: 10px; }
p {margin-bottom: 10px;}

a {color: #7b3229;text-decoration:none;	}
a:hover  {text-decoration:underline;}

h1 {font-size: 20px; color: #00417a; margin-bottom: 8px; font-family: Arial;}
h2 {font-size: 30px; color: #4e769a; margin:0 0 20px 0; padding: 0 0 10px 0; border-bottom: 1px dotted #cbcbcb; 
font-family: 'Open Sans Condensed', sans-serif; font font-weight: normal;}

/* -----------------------
=Structure
------------------------*/
#page-wrapper { margin: 20px auto; width: 920px;  }
#content-header h2 {  color: #303030; margin-left: 29px; padding: 20px 0; font-size: 60px; border-bottom: 0;}
#content-wrapper {  padding: 30px;  background: #303030; border-radius: 10px; }
#content-wrapper h2 {  color: #fff; border-bottom: 0;}
ul.portfolio-images {list-style: none; margin:0; padding:0;}
ul.portfolio-images li {float: left; width: 270px; margin-bottom: 35px;}
ul.portfolio-images li.middle {margin: 0 25px;}


/* -----------------------
=Homepage
------------------------*/
#homecontentarea {	}

/* -----------------------
=Flipbox
------------------------*/
.flip3d {width: 250px; height: 250px; margin: 10px; /*float: left;*/}
.flip3d > .front {position: absolute; 
				   transform: perspective( 600px ) rotateY( 0deg );
				   background: #fc0; width: 250px; height: 250px; border-radius: 7px; 
				   backface-visibility: hidden;
				   transition: transform .5s linear 0s;
				}
.flip3d > .back {position: absolute; 
				   transform: perspective( 600px ) rotateY( 180deg );
				   background: #80BFFF; width: 250px; height: 250px; border-radius: 7px; 
				   backface-visibility: hidden;
				   transition: transform .5s linear 0s;
				}
.flip3d:hover > .front, .flipit > .front  {transform: perspective( 600px ) rotateY( -180deg );}				
.flip3d:hover > .back, .flipit > .back  {transform: perspective( 600px ) rotateY( 0deg);}				

.middleFlip {margin: 10px 35px}

/* -----------------------
=Innerpage
------------------------*/
#innercontentarea	 { 	}
#topnav {width: 380px; float: right; text-align: right;}
#topnav a {color: #fff; font-size: 23px; 
	font-family: 'Open Sans Condensed',  sans-serif; 
	font-weight: normal;
	padding: 10px;
	text-decoration: none;
	transition: 0.3s;}
#topnav a:hover {color: #000; font-weight: bold;}
#topnav .resume {margin-top: 20px; float: right;}	
img.nav-logo {width: 80%; max-width: 75px; padding: 0 0 0 20px;  
		-webkit-animation-duration: 1s;

/* -----------------------
=Footer
------------------------*/
#footer {padding: 30px 0;color: #8b8b8a; text-align:center}
#footer li {display:inline;margin-right: 20px;}
#footer li.end {display:inline;margin-right: 0px;}
#footer a  {color: #8b8b8a;}
#footer a:hover  {text-decoration:underline;}