@charset "UTF-8";
/* CSS Document */

*{border:none;}
button:focus {outline:0;}
	
#wrapper {
    max-width: 600px; 
    margin: 0 auto;
	position:relative;
	top:30px;
	height:auto;
	background-color:#FFF;
	overflow:visible;
	}
	
	
    
	#list {
        position:relative;
		width: 600px; /* controll number of images per row */
        overflow: hidden;
        margin-left: 0px; /* 15px */
        margin-bottom: -10px; /* 30px */
		top:20px;
		left:0px;
		
    }
     
	.item
        {
         width: auto; /*  width of each image, from 230px needs to add to 80+x=1000 TRY 1080 */
         float: left;
         margin: 20px 20px; /* distance between each image TRY 15px*/	
		
		 
        }
	
	.description {
    position:relative;
	width: 500px; /* controll number of images per row */

  	font-family: 'Noto Sans', sans-serif;
	color:#666666;
	font-size: 10px;
	text-decoration:none;
	padding-left:10px;
	padding-top:10px;
	text-align:justify;
	
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
	column-gap: 20px;
 }


.description_title {
    position:relative;
	width: 500px; /* controll number of images per row */
  	font-family: 'Noto Sans', sans-serif;
	color:#666666;
	font-size: 10px;
	text-decoration:none;
	padding-top:80px;
	text-align:left;
	padding-left:10px;
}	
	
	.work_title {
		
	font-family: 'Noto Sans', sans-serif;
	color:#666666;
	font-size: 11px;
	text-decoration:none;	
	padding-left:20px;
	padding-top:30px;
	line-height:14px;	
	}
     
	 .header {
	font-family: 'Noto Sans', sans-serif;
	color:#666666;
	font-size: 20px;
	text-decoration:none;	
	padding-left:20px;
	line-height:26px;
}

.info {
	font-family: 'Noto Sans', sans-serif;
	color:#666666;
	font-size: 20px;
	text-decoration:none;	
	padding-left:20px;
	
	
}





/* 1st*/

.imageWrapper1 { 
    position: relative;
    width: 230px; 
    height: 217px;  /*actual height image*/
	display: block;
	}

.imageWrapper1 img {
    display:block;
	}

.imageWrapper1 .cornerLink1 {
	position:absolute;
	visibility:hidden;
	height: 191px; /*actual height image minus padding top (26)*/
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper1:hover .cornerLink1 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}
	
	
	
	
	/*2*/

.imageWrapper2 { 
    position: relative;
    width: 230px; 
    height: 298px; 
	display: block;
	}

.imageWrapper2 img {
    display:block;
	}

.imageWrapper2 .cornerLink2 {
	position:absolute;
	visibility:hidden;
	height:272px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper2:hover .cornerLink2 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}
	
	/*3*/

.imageWrapper3 { 
    position: relative;
    width: 230px; 
    height: 298px; 
	display: block
	}

.imageWrapper3 img {
    display:block;
	}

.imageWrapper3 .cornerLink3 {
	position:absolute;
	visibility:hidden;
	height: 272px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper3:hover .cornerLink3 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}
	
	/*4*/
.imageWrapper4 { 
    position: relative;
    width: 230px; 
    height: 186px; 
	display: block;
	}

.imageWrapper4 img {
    display:block;
	}

.imageWrapper4 .cornerLink4 {
	position:absolute;
	visibility:hidden;
	height: 160px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper4:hover .cornerLink4 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}
	


/*5*/
.imageWrapper5 { 
    position: relative;
    width: 230px; 
    height: 184px; 
	display: block;
	}

.imageWrapper5 img {
    display:block;
	}

.imageWrapper5 .cornerLink5 {
	position:absolute;
	visibility:hidden;
	height: 158px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper5:hover .cornerLink5 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}
	
	
	
/*6*/
.imageWrapper6 { 
    position: relative;
    width: 230px; 
    height: 187px; 
	display: block;
	}

.imageWrapper6 img {
    display:block;
	}

.imageWrapper6 .cornerLink6 {
	position:absolute;
	visibility:hidden;
	height: 161px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper6:hover .cornerLink6 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}


/*7*/
.imageWrapper7 { 
    position: relative;
    width: 230px; 
    height: 185px; 
	display: block;
	}

.imageWrapper7 img {
    display:block;
	}

.imageWrapper7 .cornerLink7 {
	position:absolute;
	visibility:hidden;
	height: 159px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper7:hover .cornerLink7 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}



/*8*/
.imageWrapper8 { 
    position: relative;
    width: 230px; 
    height: 250px; 
	display: block;
	}

.imageWrapper8 img {
    display:block;
	}

.imageWrapper8 .cornerLink8 {
	position:absolute;
	visibility:hidden;
	height: 224px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper8:hover .cornerLink8 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}
	
	
	
/*9*/
.imageWrapper9 { 
    position: relative;
    width: 230px; 
    height: 334px; 
	display: block;
	}

.imageWrapper9 img {
    display:block;
	}

.imageWrapper9 .cornerLink9 {
	position:absolute;
	visibility:hidden;
	height: 308px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper9:hover .cornerLink9 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}

	
/*10*/
.imageWrapper10 { 
    position: relative;
    width: 230px; 
    height: 302px; 
	display: block;
	}

.imageWrapper10 img {
    display:block;
	}

.imageWrapper10 .cornerLink10 {
	position:absolute;
	visibility:hidden;
	height: 276px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper10:hover .cornerLink10 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}


/*11*/
.imageWrapper11 { 
    position: relative;
    width: 230px; 
    height: 301px; 
	display: block;
	}

.imageWrapper11 img {
    display:block;
	}

.imageWrapper11 .cornerLink11 {
	position:absolute;
	visibility:hidden;
	height: 275px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper11:hover .cornerLink11 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}



/*12*/
.imageWrapper12 { 
    position: relative;
    width: 230px; 
    height: 156px; 
	display: block;
	}

.imageWrapper12 img {
    display:block;
	}

.imageWrapper12 .cornerLink12 {
	position:absolute;
	visibility:hidden;
	height: 130px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper12:hover .cornerLink12 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}



/*13*/
.imageWrapper13 { 
    position: relative;
    width: 230px; 
    height: 259px; 
	display: block;
	}

.imageWrapper13 img {
    display:block;
	}

.imageWrapper13 .cornerLink13 {
	position:absolute;
	visibility:hidden;
	height: 233px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper13:hover .cornerLink13 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}





/*14*/
.imageWrapper14 { 
    position: relative;
    width: 230px; 
    height: 254px; 
	display: block;
	}

.imageWrapper14 img {
    display:block;
	}

.imageWrapper14 .cornerLink14 {
	position:absolute;
	visibility:hidden;
	height: 228px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper14:hover .cornerLink14 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}


/*15*/
.imageWrapper15 { 
    position: relative;
    width: 230px; 
    height: 301px; 
	display: block;
	}

.imageWrapper15 img {
    display:block;
	}

.imageWrapper15 .cornerLink15 {
	position:absolute;
	visibility:hidden;
	height: 275px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper15:hover .cornerLink15 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}



/*16*/
.imageWrapper16 { 
    position: relative;
    width: 230px; 
    height: 242px; 
	display: block;
	}

.imageWrapper16 img {
    display:block;
	}

.imageWrapper16 .cornerLink16 {
	position:absolute;
	visibility:hidden;
	height: 216px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper16:hover .cornerLink16 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}


/*17*/
.imageWrapper17 { 
    position: relative;
    width: 230px; 
    height: 153px; 
	display: block;
	}

.imageWrapper17 img {
    display:block;
	}

.imageWrapper17 .cornerLink17 {
	position:absolute;
	visibility:hidden;
	height: 127px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper17:hover .cornerLink17 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}

/*18*/
.imageWrapper18 { 
    position: relative;
    width: 230px; 
    height: 153px; 
	display: block;
	}

.imageWrapper18 img {
    display:block;
	}

.imageWrapper18 .cornerLink18 {
	position:absolute;
	visibility:hidden;
	height: 127px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper18:hover .cornerLink18 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}

/*19*/
.imageWrapper19 { 
    position: relative;
    width: 230px; 
    height: 153px; 
	display: block;
	}

.imageWrapper19 img {
    display:block;
	}

.imageWrapper19 .cornerLink19 {
	position:absolute;
	visibility:hidden;
	height: 127px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper19:hover .cornerLink19 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}


/*20*/
.imageWrapper20 { 
    position: relative;
    width: 230px; 
    height: 153px; 
	display: block;
	}

.imageWrapper20 img {
    display:block;
	}

.imageWrapper20 .cornerLink20 {
	position:absolute;
	visibility:hidden;
	height: 127px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper20:hover .cornerLink20 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}
	
	
	/*21*/
.imageWrapper21 { 
    position: relative;
    width: 230px; 
    height: 150px; 
	display: block;
	}

.imageWrapper21 img {
    display:block;
	}

.imageWrapper21 .cornerLink21 {
	position:absolute;
	visibility:hidden;
	height: 124px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper21:hover .cornerLink21 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}


/*22*/
.imageWrapper22 { 
    position: relative;
    width: 230px; 
    height: 153px; 
	display: block;
	}

.imageWrapper22 img {
    display:block;
	}

.imageWrapper22 .cornerLink22 {
	position:absolute;
	visibility:hidden;
	height: 127px;
	width: 230px;
	bottom: 0px;
	left: 0px;
	top:0px;
	right: 0px;
	padding-top: 26px;
	padding-right: 0px;
	padding-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
	color:#666;
	text-align:center;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-decoration:none;
	}

.imageWrapper22:hover .cornerLink22 {
   visibility:visible;
background-color:rgba(255, 255, 255, 0.9);
	}


button:focus {outline:0;}


		
	/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#f4f2f3; opacity: 0.2; filter: alpha(opacity = 20);}
#colorbox{outline:0;}
    #cboxContent{top:0; padding-bottom:20px; background:#ffffff;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #fff; background:#fff;}
        #cboxTitle {  position: absolute;
  bottom:10px;
  height:20px;
  left:0px;
  width: 100%;
  color: #666666;
  text-align: center;
  font-size: 11px;
}
  #cboxTitle p {
    margin: 0; }
      
	  #cboxCurrent {
  position: fixed;
  bottom: 28px;
  right: 20%;
  width: 60%;
  color: #959595;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  display: none !important; }
	  
  

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        
    #cboxPrevious{
		position:absolute; 
		top:50%; 
		left:5px; 
		margin-top:-32px; 
		background:url(http://www.patrickhowlett.com/images/controls/arrow600left.png) no-repeat top left; 
		width:14px; 
		height:20px; 
		text-indent:-9999px;}
	
	@media (-webkit-min-device-pixel-ratio: 2) {
    #cboxPrevious {
      background-image: url(http://www.patrickhowlett.com/images/controls/arrow600leftret.png);
      background-size: 14px 20px; } }
	  
        #cboxPrevious:hover{background-position:bottom left;}
        
		#cboxNext{  
		position:absolute; 
		top:50%; 
		right:5px; 
		margin-top:-32px; 
		background:url(http://www.patrickhowlett.com/images/controls/arrow600right.png) no-repeat top right; 
		width:14px; 
		height:20px; 
		text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        
			@media (-webkit-min-device-pixel-ratio: 2) {
    #cboxNext {
      background-image: url(http://www.patrickhowlett.com/images/controls/arrow600rightret.png);
      background-size: 14px 20px; } }
		
		#cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(http://www.patrickhowlett.com/images/cross10.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;
		}

			@media (-webkit-min-device-pixel-ratio: 2) {
    #cboxClose {
      background-image: url(http://www.patrickhowlett.com/images/controls/cross10@2.png);
      background-size: 38px 19px; } }