/*typography*/

html {
	-webkit-font-smoothing: antialiased;
	height: 100%;
	margin: 0px;
	padding: 0px;

}

@font-face {font-family: 'CircularStd-medium';  src: url('font/CircularStd-Medium.otf');format('embedded-opentype')}

@font-face{
	font-family:VideoJS;
	src:url(http://vjs.zencdn.net/f/2/vjs.eot);
	src:url(http://vjs.zencdn.net/f/2/vjs.eot?#iefix) format('embedded-opentype'),
		url(http://vjs.zencdn.net/f/2/vjs.woff) format('woff'),
		url(http://vjs.zencdn.net/f/2/vjs.ttf) format('truetype');
}		

body{
	font-family: CircularStd-medium;
	font-size: 11pt;
	margin: 0px;
	padding: 0px;
	height: 100%;
	/*border-style: solid;
	border-width: 21px;
	border-color: red;*/
}


div{
	border-width: 0;
	border-color: black;
	border-style: solid; 
}

.clear{
	
	clear: both;
}

.project1Color{
	border-color: red;
}

.container{
	border-style: solid;
	border-left-width: 21px;
	border-right-width: 21px; 
	position: fixed;
	left: 0;
	right: 0;
	margin-top:147px;
	z-index:106;
}
.header{
	padding: 42px;
	background-color: white;
	cursor: default;
	z-index:199;
	position: fixed;
	border-style: solid;
	border-top-width: 21px;
	border-left-width: 21px;
	border-right-width: 21px; 
	left: 0;
	right: 0;
}

.logo{
	display: inline-block;
	width:200px;
	height:38;
	vertical-align: bottom;
}
#imgLogo{
	height: 38px;
	
}
.projectTitle{
	display: inline-block;
	vertical-align: bottom;
	font-size: 11pt;
}
.aboutWorkContact{
	display: inline-block;
	float: right;
	vertical-align: bottom;
	font-size: 11pt;
	padding-top:4px;
}
.work{
	display: inline;
	margin-left: 10px;
}

.email a{
	text-decoration: none;
	color: black;
}

.resume{
	margin-top:5px;	
}
.resume a{
	text-decoration: none;
	color: black;
}
.aboutBox{
	position:fixed;
	width:180px;
	border-right-width:21px;
	font-size: 9pt;
	top:82px;
	right:0;
	z-index:999;
	padding-left:25px;
	padding-right:30px;
	padding-bottom:25px;
	padding-top:0px;
	margin-top:0px;
	background-color:white;
	display:none;
	line-height: 17px;
}
.aboutBox hr{
	height:21px;
	border-width:0px;
	margin-top:15px;
	margin-bottom:15px;
	width:150px;
	background-color:red;	
}

#aboutBoxText{
	width:150px;
}

.workBox{
	position:fixed;
	width:180px;
	border-right-width:21px;
	font-size: 9pt;
	top:82px;
	right:0;
	z-index:999;
	padding-left:25px;
	padding-right:30px;
	padding-bottom:25px;
	padding-top:0px;
	margin-top:0px;
	background-color:white;
	display:none;
}
.workBox hr{
	height:21px;
	border-width:0px;
	margin-top:15px;
	margin-bottom:15px;
	width:150px;
	background-color:red;
}

.listMenu
{
	list-style-type:none;
	padding:0px;
	line-height: 17px;
}
.listMenu li
{
	
}

.listMenu li a:hover
{
	color: gray;
}

.listMenu li a
{
	color: black;
	text-decoration:none;
}

.leftside
{
	width: 200px;
	display: inline-block;
	padding-left: 42px;
}

.title{
	height: 95px;
	width: 150px;
	border-top-width: 21px;
	border-bottom-width: 21px;
	position: relative;
	margin-bottom: 40px;
	
}

.titleText{
	
	position: absolute;
	display: table;
	top: 12px;
	padding-left:2px;
}

.titleText p{
		
}

.borderedDiv
{
	border-color: #e11e22;
}

#projectDescription1
{
	width: 150px;
	font-size: 9pt;
	line-height: 17px;
}

#projectDescription2
{	
	font-size: 9pt;
	line-height: 17px;
	/*padding-bottom: 25px;*/
	display:none;
	z-index:101;
}

#divProjectParent
{
	padding-top: 144px;
	padding-left: 242px;
	padding-right: 42px;
	padding-bottom: 42px;
	vertical-align: top;
	border-style: solid;
	border-bottom-width: 21px;
	border-left-width: 21px;
	border-right-width: 21px; 
}

.divProjectList
{
	/*min-width: 200px;*/
}

.divProjectInner{
	margin-bottom: 200px;
	overflow: hidden;
	position:relative;
}

/*.cycle-slideshow  div{ width: 100%; height:100%;}*/
.galleria
{ 
	height:753px;
	width: 1560px;	
	max-width:100%;
	max-height:100%;
	
}
.galleria-container
{
	z-index:197;
	position:absolute;
	background-color:yellow;
}
.galleria-stage
{ 
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}

.galleria-frame img
{
	width:100%;
	height:100%;
	top:0;
	bottom:0;
	left:0;
	right:0;
	
}

.galleria-image
{
	position:absolute;
}

.galleria-image-nav
{
	z-index:198;
}

.galleria-thumbnails-list
{
	display:none;
}

#slide0, #slide1, #slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8{
	
	z-index:500;
	/*display:none;*/
}

.slidesjs-pagination{
	display:none;
}

a.slidesjs-navigation{

	font-size: 50px;
	text-decoration: none;
	color: #e11e22;
	
	
}

.slidesjs-navigation {
    position: absolute;
z-index: 106;
/* margin-top: -202px; */
top: 0px;
margin: auto;
/* margin-top: 225px; */
margin-top: 22%;
    }

    .slidesjs-previous {
      margin-left: 20px;
      left: 0px;
      height:50px;
    }

    .slidesjs-next {
      margin-right: 20px;
      right: 0px;
      height:50px;
    }
	
.right{
	float:right;
	cursor: url(arrowRight.png),pointer;
	margin-top: 10px;
}

.cycle-overlay{
	z-index:200;
	width:100%;	
}

.trigger {
top: 0;
width: 50%;

z-index:106;
position:absolute;
}
.back-trigger{
	cursor: url(arrowLeft.png),pointer;
	left:0;
}
.forward-trigger{
	right:0;
	cursor: url(arrowRight.png),pointer;
}


.imgProjects{
	/*min-width: 200px;	*/
	max-width: 100%;
}

.video-play-button
{	
	display:none;
	font-family: VideoJS;
	color; white;
	left: 46%;
	top: 44%;
	font-size: 3em;
	position: absolute;
	width: 75px;
	height: 60px;
	cursor: pointer;
	opacity: .5;
	/*background-color: #07141e;*/
	background-color: black;
	-webkit-border-radius: 6.8em;
	-moz-border-radius: .8em;
	border-radius: 14px;
	-webkit-box-shadow: 0 0 0.1em;
	-moz-box-shadow: 0 0 0.1em rgba(255,255,255,1);
	box-shadow: 0 0 0.1em rgba(255,255,255,1);
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
	z-index:198;
}


.myVideo
{
	/*object-fit: fill;*/
	height: 86%;
	z-index:106;
}

.video-play-button:focus 
{
	outline:0;
	border-color: #fff;
	-webkit-box-shadow: 0 0 3em #fff;
	-moz-box-shadow: 0 0 .3em #fff;
	box-shadow: 0 0 3em #fff;
	-webkit-transition: all 0s;
	-moz-transition: all 0s;
	-o-transition: all 0s;
	transition: all 0s;
	z-index:198;
}

.video-play-button:hover
{
	cursor: pointer;
}

/*.video-play-button::before*/
.imgPlay
{
	/*font-family: VideoJS;
	color: white;
	content: "\e002";
	text-shadow: .05em .05em .1em  #000;*/
	position: absolute;
	padding-left: 24px;
	padding-top: 14px;
	z-index:199;
	cursor: pointer;
}

.lastProject{
	margin-bottom: 40px;
}

.footer{
	clear: both;
}

::-webkit-scrollbar { 
    display: none; 
}


@media screen and (max-width: 768px) {
.aboutWorkContact
  {
	display: none;  
  }
}

/*@media screen and (max-width: 768px) */
/* iPads (portrait) ----------- */
/*@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) */
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
{
	
	#projectDescription1{
		display:none;
	}
	
	#projectDescription2{
		display:block;
		padding-top:144px;
		padding-left:246px;
		padding-right:42px;
		padding-bottom:25px;
		border-left-width:21px;
		border-right-width:21px;
		position:fixed;
		background-color:white;
		height:155px;
		overflow-y: hidden;
		z-index:107;
	}
	
	.container{
		z-index:108;
	}
	
	#divProjectParent
	{
		padding-top:323px;
		padding-left:42px;
	}	
	
	.leftside{
		position:fixed;
		background-color:white;
	}
	
	.aboutWorkContact{
		display: inline-block;
	}
	
	.divProjectInner{
		margin-bottom: 100px;
	}
	
	.lastProject{
	  margin-bottom: 200px;
    }
    
    .projectTitle{
	    display: inline-block;
    }
    
    .logo
       {
	   margin-bottom: 0px;
    }
	
	.trigger {visibility:hidden;}
	
	.slidesjs-navigation {
		margin-top: 19%;
	}
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

	.lastProject{
		margin-bottom: 40px;
    }
	
	.trigger {visibility:hidden;}
	
	#projectDescription2{z-index:107}
	.container{z-index:108;}
	
	.aboutWorkContact{
		display: inline-block;
	}
}


@media screen and (max-width: 630px) {
	
  
  #projectDescription2{z-index:107}
}

@media screen and (max-width: 609px) {
  
  
  .title,
  .aboutWorkContact,
  #projectDescription1, #projectDescription2
  {
	display: none;  
  }
  .logo
  {
	  margin-bottom: 25px;
	  width:400px;
  }
  
  .header
  {	  
	margin-bottom: 55px;
	border-top-width: 12px;
	border-left-width: 12px;
	border-right-width: 12px; 
	padding-bottom:15px;
  }
  
  
.container{
	border-top-width: 12px;
	border-left-width: 12px;
	border-right-width: 12px; 
	
}

.projectTitle{
	margin-bottom:25px;
}

.title{
	border-top-width: 12px;
	border-bottom-width: 12px;
}

#divProjectParent
{
	border-bottom-width: 12px;
	border-left-width: 12px;
	border-right-width: 12px; 
	padding-right: 21px;
	padding-bottom: 21px;
	padding-left: 21px;
	padding-top: 206px;
} 
  
  .divProjectInner{
	  margin-bottom: 75px;
  }
  
  .lastProject{
	  margin-bottom: 0px;
  }
  
	.trigger {visibility:hidden;}  
}

@media screen and (max-width: 320px) {
	.container{
	border-top-width: 12px;
	border-left-width: 12px;
	border-right-width: 12px; 
}

@media screen and (max-width: 320px) {
	.container{
	border-top-width: 12px;
	border-left-width: 12px;
	border-right-width: 12px; 
}


.title{
	border-top-width: 12px;
	border-bottom-width: 12px;
}

#divProjectParent
{
	border-bottom-width: 12px;
	border-left-width: 12px;
	border-right-width: 12px; 
	padding-left: 21px;
	padding-right: 21px;
	padding-bottom: 21px;
	padding-top: 175px;
}

.header{
	padding: 21px;
	border-top-width:12px;
	border-left-width:12px;
	border-right-width:12px;
}
.leftside{
	padding-left: 21px;
}

.projectTitle{
	margin-bottom: 15px;
}
.logo{
	display:block;
}

.lastProject{
	margin-bottom: 236px;
}

.video-play-button
{	
	left: 35%;
	top: 29%;
}
.trigger {visibility:hidden;}
}