@charset "utf-8";
/* ************************************** */
:root{
	--main-color:										#333333;
	--link-color:										#C7254E;
	--background-color:							#F5F5F5;
	--selection-content-color:			white;
}
/* ************************************** */
/* GLOBAL */
*{
  margin:               0;
  padding:              0;
  border:               0;
	border-spacing:       0;
	list-style:           none;
	text-decoration:      none;
	text-rendering: 			optimizeLegibility;
/*text-align:           justify;*/ 
  color:                var(--main-color);
  line-height:          1.2em;
  font-size:            1em;
  font-family:          Consolas, "sans-serif", "monospace";
}
*:focus{
  outline: 							none;
}
::-moz-selection { /* Code for Firefox */
  color: 								var(--selection-content-color);
  background: 					var(--link-color);
}

::selection {
  color: 								var(--selection-content-color);
  background: 					var(--link-color);
}
body{
  background:           var(--background-color);
  background-position:  center;
  background-attachment:fixed;
  background-repeat:    repeat;
  margin:               0 1em 1em 1em;
}
a:link{									color:        var(--link-color)}
a:visited{							color:        var(--link-color)}
a:hover{								color:        var(--main-color)}
a:active{								color:        var(--link-color)}

nav h2{									color:				var(--main-color)}
nav a:link{             color:        var(--link-color)}
nav a:visited{					color:        var(--link-color)}
nav a:hover{            color:        var(--main-color)}
nav a:active{           color:        var(--link-color)}

nav h4{									color: 				var(--main-color)}

strong {
	font-weight: 					700;
}
p{
  text-indent:          1em;
}
p:first-child{
  text-indent:          0px;
}
h1, h2, h3, h4, h5, h6{
  font-family:          Consolas, "sans-serif", "monospace";
	color: 								var(--link-color);
	font-weight: 					700;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{
  font-family:          Consolas, "sans-serif", "monospace";
	color: 								var(--link-color);
}
h1{
  font-size:            1.3em;
  text-align:           center;
	text-transform: 			uppercase;
}
h2{
  font-size:            1.2em;
}
h3{
  font-size:            1.1em;
	margin:               .75em 0 .25em 0;
	text-align: 					left;
}
h4{
  font-size:            1em;
	text-align: 					left;
	clear: 								both;
}
del, s, strike{
  text-decoration:      line-through;
}
dt{
  font-weight:          700;
}
hr{
  display:              block;
  width:                100%;
  color:                var(--main-color);
  border-top:           1px;
	border-style: 				dashed;
  margin:               1em 0 1em 0;
}
label{
  display:              inline-block;
  margin-right:         1em;
  vertical-align:       middle;
}
input{
  margin-right:         0.5em;
  vertical-align:       middle;
}
/* ************************************** */
/* HTML5 ELEMENTS */
section{
  width:                100%;
  max-width:            1250px;
  margin:               auto;
}
header, nav, article{
  width:                100%;
}
header{
	padding-top: 					.5em;
	padding-bottom: 			.5em;
	background-color:     var(--background-color);
	z-index: 							2;
}
article{
  padding-top:          1em;
}
nav{
  text-transform:       uppercase;
	width: 								80%;
	margin-left: 					20%;
}
nav ul{
	text-align: 					right;
}
nav li{
  display:              inline-block;
  margin:               0 0 0 .5em;
}
.vid_wrapper{
	position:             relative;
	padding-bottom:       56.25%; /* 16:9 */
	height:               0;
  margin:               1em 0 1em 0;
}
.vid_wrapper iframe{
	position:             absolute;
	top:                  0;
	left:                 0;
	width:                100%;
	height:               100%;
}
.map_wrapper{
	position:             relative;
	padding-bottom:       33%; /* 16:9 */
	height:               0;
  margin:               1em 0 1em 0;
}
.map_wrapper iframe{
	position:             absolute;
	top:                  0;
	left:                 0;
	width:                100%;
	height:               100%;
}
img{
	transition:           all .5s linear; 
  -o-transition:        all .5s linear; 
  -moz-transition:      all .5s linear; 
  -webkit-transition:   all .5s linear;
}
.print{
  visibility:           hidden;
  display:              none;
}
/* ************************************** */
/* BRANDING LOGO */
#branding{
  width:                auto;
  background-size:      contain;
  background-repeat:    no-repeat;
  background-position:  top left;
  text-align:           left;
}
/* ************************************** */
/* ID & CLASS */
/* TEMP SHOT PAGE */
#temp_background_image{
	/* IMAGE */
	background-image: 		url("../img/temp_background_image.jpg");
	/* FULL HEIGHT */
	height: 							100%;
	/* CENTER & SCALE */
	background-position: 	center;
	background-repeat: 		no-repeat;
	background-size: 			cover;
}
#temp_caption, #temp_footer{
	display: 							block;
	position: 						absolute;
	left: 								0;
	width: 								100%;
	text-align: 					center;
}
#temp_caption, #temp_footer ul li{
	color: 								white;
}
#temp_link{
	display: 							block;
	position: 						absolute;
	top: 									10%;
	left: 								0;
	width: 								50px;
	height: 							50px;
	/*background-color: 		aqua;*/
}
#temp_caption{
	top: 									40%;
	font-size: 						4em;
	line-height: 					.8em;
}
#temp_maintenance{
  font-size:            .4em;
	clear: 								both;
	margin-top: 					.5em;
	background-color: 		var(--link-color);
	color: 								white;
	display: 							inline-block;
}
#temp_footer{
	bottom: 							5%;
	font-size: 						.9em;
	font-kerning: 				normal;
}
#temp_footer a{
	font-weight: 					lighter;
}

/* END OF TEMP SHOT PAGE */
.alert, .warning{
  color:                var(--link-color);
  display:              inline;
}
.prj_preload{
	visibility: 					hidden;
	display: 							none;
}
.ul_dwn{
  margin:               0em 0em 0.5em 0em;
  display:              inline-block;
  vertical-align:       top;
  width:                80%;
}
#prj_m{
  display:              none;
	margin: 							0 0 1em 0;
}
.prj_thumb{
	margin: 							0em 0em 1em 0em;
  display:              inline-block;
	vertical-align: 			middle;
	max-width:            100%;
  width:                100%;
	resize: 							both;
}
#prj_item{
  margin-bottom:        1em;
	vertical-align: 			top;
}
.wip_thumb{
	width: 								100%;
}
#wip_container a{
	flex: 								1 1 50%;
	max-width: 						200px;
	width: 								100%;
	line-height: 					0px;
}
#wip_container{
	margin: 							0;
	display: 							flex;
	flex-direction: 			row-reverse;
	flex-wrap: 						wrap;
	align-items: 					flex-start;
	justify-content: 			flex-start;
	box-sizing: 					border-box;
	width: 								100%;
}
#cv_pic{
  width:                    75px;
  min-width:                75px;
  height:                   75px;
  min-height:               75px;
  -webkit-border-radius:    75px;
  -moz-border-radius:       75px;
  border-radius:            75px;
  float:                    left;
  margin-right:             1em;
  margin-top:               1em;
}
#prj_img{
  margin:               1em 0 0 0;
  clear:                both;
  display:              inline-block;
  max-width:            100%;
  width:                100%;
}
.button{
  font-size: 						1em;
  padding: 							10px;
  color: 								var(--selection-content-color);
  border: 							2px solid var(--link-color);
  border-radius: 				20px/50px;
  text-decoration: 			none;
  cursor: 							pointer;
  transition: 					all 0.3s ease-out;
}
.button:hover{
  background: 					var(--link-color);
}
.overlay{
  position: 						fixed;
  top: 									0;
  bottom: 							0;
  left: 								0;
  right: 								0;
  background: 					rgba(0, 0, 0, 0.7);
  transition: 					opacity 500ms;
  visibility: 					hidden;
  opacity: 							0;
}
.overlay:target{
  visibility: 					visible;
  opacity: 							1;
}
.popup{
  margin: 							70px auto;
  padding: 							20px;
  background: 					var(--selection-content-color);
  border-radius: 				5px;
  width: 								30%;
  position: 						relative;
  transition: 					all 5s ease-in-out;
}
.popup h2{
  margin-top: 					0;
  color: 								var(--main-color);
}
.popup .close{
  transition: 					all 200ms;
  font-size: 						30px;
  font-weight: 					bold;
  text-decoration: 			none;
  color: 								var(--main-color);
}
.popup .close:hover{
  color: 								var(--link-color);
}
.popup .content{
  max-height: 					30%;
  overflow-y: 					hidden;
}
/* SLICK */
.slider div, .slider div a{
	line-height: 					0px;
}
.slick-dotted.slick-slider{
	margin-bottom: 				1em;
}
/* SLICK CAPTION */
.slick .container{
	position: 						relative;
	line-height: 					0;
}
.caption-block {
	position: 						absolute;
	bottom: 							0;
	margin: 							0;
	background-color: 		rgba(255,255,255,0.20);
	color: 								black;
	padding: 							1em;
	line-height: 					0;
	width: 								100%;

  font-family:          Consolas, "sans-serif", "monospace";
	font-weight: 					bolder;
}
.upper{
  text-transform:       uppercase;
}
/* SWIPEBOX */
#swipebox-title {
  color: 								white;
	margin-top: 					1em;
	text-transform: 			uppercase;
}
@media screen and (max-width: 700px){
.popup{
	width: 								70%;
}
}
/* SLICK */
.slider{
	margin-top: 					1em;
	padding: 							1em;
	background-color: 		white;
}
.slider_img{
	width: 								100%;
}
.slick-prev, .slick-next{
	visibility: 					hidden;
}
.slick-dots {
	bottom: 							auto;
	margin-top: 					15px;
	width: 								95%;
	position: 						relative;
}
.slick-dots li{
	margin-left: 					0;
	margin-right: 				0;
}
.slick-prev{
	z-index: 							1;
}
.slick-next{
	z-index: 							0;
}
.slick-prev:before, .slick-next:before{
	color: 								var(--link-color);
	opacity: 							1;
	font-size: 						30px;
}
.slick-prev{
	left: 								30px;
}
.slick-next{
	right: 								38px;
}
/* ************************************** */
/* MOBILE PORTRAIT */
@media (min-width: 300px) {
/* GLOBAL */
/* ************************************** */
/* HTML5 ELEMENTS */
nav{
	position: 						absolute;
	right: 								1em;
	width: 								70%;
	margin-left: 					30%;
}
/* ************************************** */
/* ID & CLASS */
#wip_container a{
	flex: 								1 1 33%;
}
#wip_container{
	flex-direction: 			row;
}
.img_crop{
  object-fit:           cover; /* Do not scale the image */
  object-position:      center; /* Center the image within the element */
  height:               150px;
}
.prj_thumb{
	margin: 							0em;
  max-width:            50%;
}
/* SLICK */
.slider_img{
	max-width: 						100%;
	width: 								auto;
	height: 							200px;
}
}
/* ************************************** */
/* MOBILE LANDSCAPE */
@media (min-width: 530px) {
/* ************************************** */
/* BRANDING LOGO */
header > a, #branding{
  text-indent:          -9999px;
  display:              inherit;
	max-width: 						300px;
  height:               60px;
}
#branding{
  background-image:     url(../../../matter/img/banner.png);
	background-blend-mode:multiply;
	mix-blend-mode: 			multiply;
}
/* GLOBAL */
/* ************************************** */
/* HTML5 ELEMENTS */
header{
	position: 						sticky;
	top: 									0;
}
nav{
	width: 								50%;
	margin-left: 					20%;
  top:                  1em;
}
/* ************************************** */
/* ID & CLASS*/
#prj_item{
	display: 							inline-block;
	clear: 								left;
	margin-top: 					-1em;
  width:                65%;
  /*max-width:            615px;*/
}
#prj_m{
  display:              block;
  /*width:                100%;*/
	height: 							100%;
  max-height:           440px;
  max-width:            440px;
  float:                left;
	object-fit: 					cover;
	object-position: 			center;
}
#cv_pic{
  width:                150px;
  min-width:            150px;
  height:               150px;
  min-height:           150px;
}
#wip_container a{
  flex: 								1 1 20%;
}
.prj_thumb{
	width:           			15%;
	max-width: 						79px;
	cursor:               pointer;
}
#prj_img{
  margin:               0 1em 1em 0;
  /*height:               auto;*/
  max-height:           150px;
  max-width:            100%;
  width:                150px;
}
/* SLICK */
.slider_img{
	height: 							350px;
}
.slick-prev, .slick-next{
	visibility: 					visible;
}
}
/* ************************************** */
/* IPAD AND DESKTOP */
@media (min-width: 820px) and (min-height: 400px) {
/* GLOBAL */
/* ************************************** */
/* HTML5 ELEMENTS */
/* ************************************** */
/* ID & CLASS*/
#wip_container a{
	flex: 								1 1 12.5%;
}
.prj_thumb{
  height:               auto;
  max-width:            33%;
  width:                220px;
}
/* SLICK */
.slider_img{
	height: 							430px;
}
header > a, #branding{
  height:               80px;
}
nav{
	width: 								50%;
}
}
/* ************************************** */
/* FULL DESKTOP */
@media (min-width: 980px) and (min-height: 500px){
/*header > a, #branding{
	max-width: 						450px;
  height:               100px;
}*/
}
/* ************************************** */
/* VERTICAL MOBILE */
@media only screen and (max-width: 530px){
}