/* Reset */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#F2F2F2; font-size: 13px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
p { font-size:1.8em; line-height:1.2em; color:#4C4C4C; text-align:center;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}

/**
 * @license
 * MyFonts Webfont Build ID 3036554, 2015-06-04T00:32:24-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: FF Franziska Web Pro Bold by FontFont
 * URL: http://www.myfonts.com/fonts/fontfont/franziska/pro-bold/
 * Copyright: 2014 published by FontShop International GmbH
 * Licensed pageviews: 50,000
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=3036554
 * 
 * © 2015 MyFonts Inc
*/
  
@font-face {font-family: 'FFFranziskaWebProBold';src: url('../webfonts/2E558A_0_0.eot');src: url('../webfonts/2E558A_0_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/2E558A_0_0.woff2') format('woff2'),url('../webfonts/2E558A_0_0.woff') format('woff'),url('../webfonts/2E558A_0_0.ttf') format('truetype');}

.FFFranziskaWebProBold {font-family:FFFranziskaWebProBold; font-weight:normal; font-style:normal;}
 

	
/* Layout */
#wrapper 			{width:96%; max-width: 720px; margin:0 auto; padding:10% 2% 0% 2%;} 
#about				{float:left; margin-bottom: 15px; width: 100%;}
#about p			{margin-bottom:1%;}
#skills				{width:100%; float:left; margin-top:3%;}		
#gifleft			{width:33%; background:url(../images/circle_gif_sd.gif) no-repeat center top; float:left;}
#gifcenter			{width:33%; background:url(../images/circle_gif_dpd.gif) no-repeat center top; float:left;}
#gifright			{width:33%; background:url(../images/circle_gif_dps.gif) no-repeat center top; float:left;}

footer				{width:100%; height:10px; left:0; margin-top:20%; float:left;}		
/*footer			{width:100%; height:20px; left:0; margin-top:0%; float:left;}*/
/*.padfix				{padding-top:100px;}	*/
	
h1 					{font-size:4.5em; font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; color:#FF4432; line-height:1.1em; text-align:center; margin-bottom:1%; z-index:-1;}
h2					{font-size:1.2em; font-family:Georgia, Times, 'Times New Roman', serif; font-weight:500; line-height:1.2em; color:#4C4C4C; padding-top:160px; text-align:center;}
footer h2			{font-size:1.0em; font-family:Georgia, Times, 'Times New Roman', serif; font-weight:500; line-height:1.2em; color:#B4B4B4; padding-top:50px; text-align:center; 				margin-bottom:10px; line-height:50px;}
h3					{font-size:1.2em; font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; color:#EF4939; text-align:center; padding-top:16px;}
a					{color:#FF4432; text-decoration: none;}
#button				{width:180px; height:45px; border:solid 2px; border-color:#FF4432; margin:0 auto; margin-top:15px; display:block; background:none;}

/*hr				{border-style:solid; border-color:#FF4432; display:block;}*/
.hr 				{background-color:#FF4432; border: 1px solid #FF4432; height: .5px; margin: 1px 0 4% 0; width:100%; display:block; float:left;}



/*-- START GALLERY --*/

.module_5			{width:100%; margin-top:4%;}
					 
.row img			{width:100%;
					 transition: opacity 0.6s ease;
					 opacity:1;
					 display:inline;
					 overflow:hidden;
					 border:none;
					 }			 
					 
.row img:hover 		{transition: opacity 0.6s ease;
					 opacity:.8;
  					 background-color:none;/* For IE8 and earlier */
					 opacity:.8;
					}			 
					 
.row				{width:100%;
					 float:left;
					 margin-bottom:2%;
					}
					
.column-left		{width:48%;
					 float:left;
					 margin-right:4%;
					 overflow:hidden;
					}				
					
.column-right		{width:48%;
					 float:right;
					}		
																							 

/*-- END GALLERY --*/


.button_container {
  position: fixed;
  top: 5%;
  right: 5%;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  -webkit-transition: opacity .25s ease;
          transition: opacity .25s ease;
}	
	
	
/* Media Queries */
@media screen and (max-width: 940px) {	

.button_container {
  position: fixed;
  top: 2%;
  right: 2%;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  -webkit-transition: opacity .25s ease;
          transition: opacity .25s ease;
}



/* Media Queries */

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

#wrapper 			{width:100%; max-width:500px; margin:0 auto; padding:10% 0% 0% 0%;}

#about				{width:96%; margin:15% 5% 5% 4%;}

h1 					{text-align:left;}
#about p			{margin-bottom:0%; text-align:left; margin-right:5%;}
#gifleft			{width:100%; margin-bottom:7%; float:left;}
#gifcenter			{width:100%; margin-bottom:7%; float:left;}
#gifright			{width:100%; margin-bottom:7%; float:left;}
.module_5 img		{width:100%; float:left; margin-bottom:-1%;}

.hr 				{display:none;}


.module_5			{width:100%; float:left;}
.module_5 img		{width:100%; float:left; margin-bottom:0%;}

.leftimg			{margin-left:0%;}


.row				{width:100%;
					 margin-bottom:0%;
					}

.column-left		{width:100%;
					 float:left;
					 margin-right:0%;
					}				
					
.column-right		{width:100%;
					 float:right;
					}		
					

.button_container {
  position: fixed;
  top: 2%;
  right: 2%;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  -webkit-transition: opacity .25s ease;
          transition: opacity .25s ease;
}

/* Media Queries */
@media screen and (max-width: 400px) {

#wrapper 			{width:100%; margin:0 auto; padding:10% 0% 0% 0%;} 
#about				{width:90%; margin:15% 5% 0% 8%;}

#about p			{margin-bottom:0%; margin-right:5%;}

#skills				{width:100%; float:left; margin-top:8%;}		
#gifleft			{width:100%; margin-bottom:12%; float:left;}
#gifcenter			{width:100%; margin-bottom:12%; float:left;}
#gifright			{width:100%; margin-bottom:0%; float:left;}
hr					{display:none;/*border-color:#EF4939; width:90%; margin:0 auto;*/}
	
.module_5			{width:100%; float:left; margin-top:10%;}
/*.module_5 img		{width:100%; float:left; margin-bottom:0%;}	*/

h1 					{font-size:6.0em; font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; color:#FF4432; line-height:1.0em; text-align:left; margin-bottom:4%;}
p					{font-size:1.8em; line-height:1.3em; color:#4C4C4C; text-align:left;}
#button				{width:98%; height:45px; border:solid 2px; border-color:#EF4939; margin:0 auto; margin-top:8%; display:block; background:none;}

.button_container {
  position: fixed;
  top: 3%;
  right: 3%;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  -webkit-transition: opacity .25s ease;
          transition: opacity .25s ease;
}