div,  h1, p, html {
	color: #000;
	font-family: "CanelaWeb-Regular", georgia, serif;
	line-height:1.3;
	font-weight: 400;
	font-size: 42px;
	}

	@font-face { 
        font-family: "Lora"; 
        src:url("Lora-Regular.ttf") format("ttf");
        } 
		
		
		@font-face { 
			font-family: "Lora"; 
			font-weight: bold;
			src:url("Lora-Bold.ttf") format("ttf");
			} 
			

@font-face { 
	font-family: "CanelaWeb-Regular"; 
	src:url("CanelaWeb-Regular.otf") format("otf"),
		url("CanelaWeb-Regular.woff") format("woff");
	} 

@font-face { 
	font-family: "Apercu"; 
	font-weight: bold; 
	src:url("apercu-bold-webfont.eot") format("eot"), 
		url("apercu-bold-webfont.ttf")format("ttf"),
		url("apercu-bold-webfont.woff") format("woff");

	}
@font-face { 
	font-family:"Apercu"; 
	font-weight: 100; 
	src: url("apercu-light-webfont.ttf") format("ttf"),
		url("apercu-light-webfont.woff") format("woff");
}

@font-face { 
	font-family:"Apercu"; 
	src: url("apercu-medium-webfont.ttf")format("ttf"),
		url("apercu-medium-webfont.woff") format("woff");
	}

@font-face { 
	font-family:"Circular"; 
	font-weight: 100;
	src: url("circular-light.ttf")format("ttf"),
		url("circular-light.woff") format("woff");
	}

@font-face { 
	font-family:"Circular"; 
	font-weight: bold;
	src: url("circular-bold.ttf")format("ttf"),
		url("circular-bold.woff") format("woff");
	}

body {
	background-color: #e8e8e8;
	padding-bottom:5px;
}


.container {
	width:750px;
	max-width:100%;
	padding-left:20px;
	padding-right:20px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
}

.container-big {
	width:880px;
	max-width:100%;
	padding-left:20px;
	padding-right:20px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
}

.portfolio-left {
	text-align:right;
	margin-bottom:50px;
	margin-top:50px;
	position:relative;
}


.portfolio-right {
	text-align:left;
	margin-bottom:50px;
	margin-top:50px;
	position:relative;
}



.img {
	width:600px;
	max-width:100%;
	z-index:0;
	position:relative;
}


.icon-img {
	width:23px;
	max-width:100%;
	z-index:0;
	padding:15px;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.icon-img:hover {
	 -webkit-transform:scale(1.20); /* Safari and Chrome */
    -moz-transform:scale(1.20); /* Firefox */
    -ms-transform:scale(1.20); /* IE 9 */
    -o-transform:scale(1.20); /* Opera */
     transform:scale(1.20);
}



.icon {
	width:180px;
	height:70px;
	max-width:100%;
	z-index:0;
	margin-right:auto;
	margin-left:auto;
	margin-top:40px;
	display:block;
}


img.horizontal{
	max-width:100%;
	width:750px;
	padding:5px;
	z-index:0;
	position:relative;
}


img.vertical{
	width:371px;
	max-width:100%;
	z-index:0;
	position:relative;
}


.vertical-2 {
	width:750px;
	max-width:100%;
	padding:5px;
	z-index:0;
	position:relative;
}

h1 a{
	color:blue;
	font-family:"apercu";
	font-weight:bold;
	font-size:45px;
}

h1 a:hover {
	border-bottom:4px blue solid;
}


h1.header {
	max-width:500px;
	margin-top:100px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:80px;
	text-align:center;
	font-size: 38px;
}	


h1.header-single {
	max-width:500px;
	margin-top:100px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;	
	font-size:46px;
	margin-bottom:0;
}

h1.header-letter {
	max-width:95%;
	margin-top:100px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;	
	font-size:50px;
	margin-bottom:0;
	font-family: "lora";
	font-weight: 700;
}


h1.text-header {
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
	font-size: 36px;
}

h1.letter-header {
	margin-top: 5%;
	margin-bottom: 0;
	text-align: left;
	font-size: 26px;
	font-family: "Lora";
	font-weight: 700;
}


h1.selected-work {
	text-align:left;
	font-size:24px;
	position:relative;
	display:inline-block;
}



hr { 
	width:65px; 
	height:2px; 
	background: #000;
	display:inline-block; 
	border: 0;
    margin-bottom:5px;
    margin-left:10px;
}

h2{
	font-family:"apercu";
	font-size:12px;
	letter-spacing:4px;
	text-transform:uppercase;
	z-index:5;
	text-align:center;
}

h4{
	text-align:left;
	font-size: 18px;
	line-height: 160%;
    font-weight: 400;
	letter-spacing:normal;
	font-family: "Lora", serif;
}

h4 a{
	text-decoration: underline;
}

h4 a:hover{
	color: blue;
}

h4.left-align{
	text-align:left;
}

h4.letter{
	text-align:left;
	font-family: "Lora", "work sans", "Karla";
	font-size: 18px;
	line-height: 160%;
	font-weight: 400;
}

li.letter {
	display: list-item;
	font-family: "Lora", "work sans", "Karla";
  }

h4.letter ul li { 
	text-align:left;
	font-family: "Lora", "work sans", "Karla";
	font-size: 18px;
	line-height: 160%;
	font-weight: 400;
	display: list-item;
	padding-left:10px;
	padding-right:0px;
	padding-bottom:16px;
	text-transform:none;
	letter-spacing:normal;

}


h4.letter a{	
	text-decoration: underline;
}

h4.letter a:hover{	
	color:blue;
}


h4.left-align-big {
	text-align: left;
	font-size: 16px;
	line-height: 2;
}

h4.header {
	text-align: left;
	font-weight: bold;
	font-size: 18px;
	line-height: 0;
	margin-top: 40px;
}

h5{
	font-family:"apercu";
	font-size:11px;
	letter-spacing:2px;
	line-height:1.5;
	z-index:5;
	text-align:center;
	font-weight:100;
	margin-top:10px;
	margin-bottom:60px;
}


h6{
	font-family:"apercu";
	font-size:14px;
	letter-spacing:1px;
	line-height:1.5;
	z-index:5;
	text-align:left;
	font-weight:100;
	margin-top:10px;
	margin-bottom:40px;
}


.text-box {
	max-width:90%;
	margin-right:auto;
	margin-left:auto;
}

.text-box-letter {
	max-width:95%;
	margin-right:auto;
	margin-left:auto;
}

.center-img {
	margin-left:auto;
	margin-right:auto;
	margin-bottom:50px;
	margin-top:40px;
	max-width:100%;
	height:auto;
	display:block;
	position:relative;
}

.photo{
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
	margin-top:20px;
	max-width:100%;
	height:auto;
	display:block;
	position:relative;
}


.center-img-small {
	margin-left:auto;
	margin-right:auto;
	margin-bottom:50px;
	margin-top:40px;
	max-width:90%;
	height:auto;
	display:block;
	position:relative;
}

.center-img-smaller {
	margin-left:auto;
	margin-right:auto;
	margin-bottom:50px;
	margin-top:40px;
	max-width:80%;
	height:auto;
	display:block;
	position:relative;
}

.center-gif {
	margin-left:auto;
	margin-right:auto;
	width:400px;
	max-width:100%;
	height:auto;
	display:block;
	position:relative;
}

.small-box{
	width:330px;
	max-width:100%;
	display:inline-block;
	position:relative;
	float:left;
	padding-left:10px;
	padding-right:10px;
}

.work-box{
	max-width:100%;
	width:880px;
	padding-left:10px;
	padding-right:10px;
	margin-left:auto;
	margin-right:auto;
}

.big-box{
	width:900px;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	padding-left:20px;
	padding-right:20px;
	display:block;
}


.small-img {
	padding-top:30px;
	padding-right:10px;
	max-height:130px;
	height:auto;
	display:inline;
	position:relative;
}

.small-gif {
	max-width:330px;
	height:auto;
	display:inline-block;
	margin-top:10px;
}

a{
    text-decoration:none;
    color: inherit;
}


h2 a:hover{
text-decoration:underline;
}


h2.top{
	top:20px;
	text-align:center;
	display:inline-block;
	position:fixed;
	left: 0;
	right:0;
    margin: 0 auto;
}

h2.about{
	top:20px;
	text-align:right;
	display:inline-block;
	position:fixed;
	right:25px;
    margin: 0 auto;
    color:blue;
    z-index:6;
}


h2.back{
	top:20px;
	text-align:left;
	display:inline-block;
	position:fixed;
	left:25px;
    margin: 0 auto;
    z-index:6;
}


h2 a.about:hover{
	top:20px;
	text-align:right;
	display:inline-block;
	position:fixed;
	right:25px;
    margin: 0 auto;
    color:blue;
    text-decoration:underline;
}

h2.selected-work{
	text-align:left;
	margin-top:50px;
	margin-bottom:-8px;
}


h2.vertical-text {
	/*position:fixed;
	margin-left:-110px;
	margin-top:300px; */
	top:350px;
	left:-100px;
	text-align:left;
	display:inline-block;
	position:fixed;
    margin: 0 auto;

	/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}



h2.vertical-text-single {
	/*position:fixed;
	margin-left:-110px;
	margin-top:300px; */
	top:350px;
	left:-30px;
	text-align:left;
	display:inline-block;
	position:fixed;
    margin: 0 auto;

	/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

h2.button {
	border:2px solid black;
	width:190px;
	height:25px;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	text-align:center;
	color:black;
	margin-left:auto;
	margin-right:auto;
	text-decoration:none;
}

h2.button:hover {
	border:2px solid blue;
	width:190px;
	height:25px;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	text-align:center;
	color:blue;
	margin-left:auto;
	margin-right:auto;
	text-decoration:none;
}


h2.button a:hover{
	text-decoration:none;
}


h3 {
	font-family:"apercu";
	font-size:63px;
	font-weight:700;
	z-index:2;
	position:absolute;
	display:inline;
	border-bottom:6px blue solid;
	text-decoration:none;
	text-align:left;
	left:70px;
	margin-top:15px;
	color:blue;
}

h3.left {
	text-align:right;
	right:70px;
	left:auto;
	display:inline;
}

h3.small {
	text-align:center;
	font-size:16px;
	left:auto;
	display:inline;
	border-bottom:0px blue solid;	
	margin-top:170px;
}

span.details {
	display:none;
}

.img-text {
	display:inline;
}

.img-text:hover span{
	display:inline;
}


.portfolio-left:hover span{
	display:inline;
}

.portfolio-right:hover span{
	display:inline;
}

.about-overlay {
	visibility:hidden;
	position:absolute; /*or  absolute*/
   	top:0;
   	right:0;
  	width:70%;
  	height:100%;
   	background:white;
   	z-index: 999; /* or  greater value */
}

.about-overlay:hover {
	visibility:visible;
	position:absolute; /*or  absolute*/
   	top:0;
   	right:0;
  	width:70%;
   	height:100%;
   	background:white;
   	z-index: 999; /* or  greater value */
}


.streck {
 	display:none;
 }


#menu ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
line-height:1.8;

}

#menu ul li { 
	display: inline; 
}

#menu ul li a
{
text-decoration: none;
padding: .7em 2em;
width:100px;
color: #fff;
background-color: blue;
border-radius:5px;

}

#menu ul li a:hover
{
color: #fff;
background-color: red;

}


li {
	display:inline;
	text-align:center;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
	font-size:12px;
	font-family:"apercu";
	text-transform:uppercase;
	letter-spacing:3px;
}



img.item{
	width:40%;
	display:inline-block;
}

@media all and (max-width: 700px) {

  	h2.vertical-text {
	display:none;
	}

  	h2.vertical-text-single {
	left:-25px;
	top:300px;
	}

	h2 {
	font-size:10px;
	line-height:1.5;
	}
	
	h1.header {
	margin-top:100px;
	font-size:25px;
  	}
	
 	.streck {
 	display:inline-block;
 	}

	.container {
	max-width:75%;
	}
		  

	span.details {
	display:inline;
	}

	h3 {
	font-size:26px;
	border-bottom:none;
	text-decoration:none;
	left:-20px;
	margin-top:-20px;
	}

	h3.left {
	text-align:right;
	right:-20px;
	left:auto;
	display:inline;
	}

	h3.small {
	text-align:center;
	font-size:16px;
	left:auto;
	display:inline;
	border-bottom:0px blue solid;	
	margin-top:170px;
	}

	.text-box {
	max-width:520px;
	margin-right:auto;
	margin-left:auto;
	padding-left:0px;
	padding-right:0px;

}

	.work-box {
	max-width:100%;
	width:418px;
	margin-right:auto;
	margin-left:auto;
	padding-left:0px;
	padding-right:0px;
}


	.center-img-small {
	max-width:100%;
}


}

@media all and (max-width: 900px) {

.other-work{
	display:none;
}


}