/* ==========================================================================
   Base styles
   ========================================================================== */

* ,
:after,
:before {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

html {
    color: #383838;
    font-size: 1.1em;
    line-height: 1.4;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

img {
    max-width: 100%;
    height: auto;
}



a{
	color: #E55300;
	text-decoration: none;}

a:visited {color: #E55300}
a:hover {color:red; text-decoration: none}

.button-group a:hover  {color:white}

/* ==========================================================================
   Portfolio styles
   ========================================================================== */

.type-groupT {float:left !important ; 
margin: 20px; 

width: 350px !important}





body {
    font-family:lato;
    font-weight: 300;
    color: #383838;
	background-image: url(images/background-MAIN.png)
}

.stronger {font-weight:400}

h1, h2, h3 {
    font-weight: 300; 
}

h1 {
    font-size: 38px;}

h2 {
    font-size: 22px;}

.titleMain h1 {font-size: 28px !important}

.about h1 {padding: 0 !important; margin: 0 !important;font-size: 1.1em !important;
    line-height: 1.4 !important; box-sizing: border-box;}


ul, li {font-weight:300}

.container {
    padding: 0px;
	text-align: center;
	max-width: 1600px;
	margin: 0 auto;
	width: 95%;
	border: 1px solid #C2C0C0}


.FullBar {
  background: url(../../projects/images/details/WSJ-newspaper.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; background-repeat: no; min-height: 300px; padding: 2%; width: 100%;margin: 4% 0 ; display: flex;
  flex-direction: column;
  justify-content: center;
}

.centerGroup {
	margin: 0 auto; border: 1px solid blue;
	width: auto
}

#Thumbgroup {
	/* clear: both; */
	text-align: center;
		z-index: 1000;

		}

.masonry-container {width: 95%;  margin:0 auto 0px auto !important; border: 1px red dotted; clear: both}

.masonry-brick {}

.masonry_item {
  width:350px;
  margin:12px auto 0px auto;
  padding:20px;
}

.pageNav {

display: none;
	width: 110px;
	background-color:#c60905;
	padding: 20px;
	border: 1px solid black;
	position: fixed;
	bottom: 0; right: 0;
	z-index: 500000}

.pageNav-home {
	bottom: 0; left: 0;
	padding: 20px;
	border: 1px solid black;
	position: fixed;
	width: 110px;
	background-color:#7f0505;
	z-index: 500000}

.pageNav a {color:white; font-weight: 300}



/* FULL SCREEN SAMPLES   */


.fullWidth {
	width: 100%;
	min-height: 350px;
	
	margin: -90px 0 320px 0; clear: both; border-top: 80px solid #efefef}





/* header/logo section */

.travel {padding: 0;
	position:relative;
	width: 100%;
	max-width: 1800px;
    height: 430px;
	clear: both;
	background-color:#BDBDBA;
    /*background-color: #f7f7f7; */
    display: block;
	background-image: url(images/DV-wide.jpg); background-position: left 50% top; background-repeat: no-repeat;
    color: #4f4f4f;
    margin: 0 9px 0px 0;
    border: 1px solid #e8e8e8;
	z-index: 500;
	background-size: cover;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,.2);
            box-shadow: 0 0 5px rgba(0,0,0,.2);
}

.travelBox {
	padding: 0 !important;
	width: 69%;
	max-width: 800px;
	border: 1px solid silver;
	background-image:url('images/white-fade.png'); 
	background-color: white;
	position: relative;
	margin: 0 auto;
	top: -130px;
	clear: both;
z-index: 501;
}


.travelBox h4 img {float: right; margin: 0px 0 0 18px; }

.travelBox h4 {
	font-size: 1.1em; 
	margin: 0 5%;
	padding: 20px;
	color: black; 
	font-weight:300;
	line-height: 1.4em;
	text-shadow: 0px 0px 10px rgba(255,255,255,1),
             1px 1px 10px rgba(255,255,255,1),
             1px 1px 10px rgba(255,255,255,1);
}

.resume {
	padding: 0 12% 40px 12%; z-index: 500
}
.resume h2 /* TITLE */ {
	font-size: 1.2em;
	line-height: 1.3em;
	text-transform:capitalize;
	color: #DA5F00;
	font-weight: 400;
	margin: 35px 0 6px 0;
	padding:0;
}

.resume h3 {
	font-weight: 300;
	font-size: 1.1em;
	line-height: 1.3em;
	text-transform:capitalize;
	margin: 0;
	padding:0;
}

.resume h4 /* SUMMARY LEVEL TITLES */{
	font-size: 1.5em;
	font-weight: 300;
	text-transform: uppercase;
	line-height: 1.2em;
	margin: 30px 0 10px 0;
	padding:0;
}

.resume h5 /* CLIENTS */ {
	font-size: 1em;
	font-weight: 400;
	line-height: 1.3em;
	margin: 0 0 10px 0;
	padding:0;
}

.resume h2 ul {    list-style-type: none; margin: 0}

.resume h2 ul li {margin: 11px 0}
.resume h2 ul li {margin-left: -36px}




.less {font-weight: 300}

header {
    padding: 290px 20px 20px 20px;
	width: 100%;
	max-width: 1800px;
    height: 500px;
	background-color:#BDBDBA;
    /*background-color: #f7f7f7; */
    display: block;
background-size: cover;
	background-image: url(images/skyline-perspective2.jpg); background-position: left 50% top; background-repeat: no-repeat;
    color: white;
    margin: 0 9px 0px 0;
    border: 1px solid #e8e8e8;
	position:relative;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,.2);
            box-shadow: 0 0 5px rgba(0,0,0,.2);

}


.header2 {

    height: 300px;
 padding: 120px 20px 20px 20px;
background-size: cover;
	background:linear-gradient( rgba(18, 49, 85, 0.3), rgba(18, 49, 85, 0.6) ),url(images/wtc-dark.jpg); background-position: left 50% top; background-repeat: no-repeat; background-size:cover;

}


.header3 {

    height: 300px;
 padding: 120px 20px 20px 20px;
background-size: cover;
	background:linear-gradient( rgba(18, 49, 85, 0.3), rgba(18, 49, 85, 0.6) ),url(images/oculous.jpg) center no-repeat;
	background-size:cover; 

}

.header4 {

    height: 300px;
 padding: 120px 20px 20px 20px;
background-size: cover;
	background:linear-gradient( rgba(18, 49, 85, 0.3), rgba(18, 49, 85, 0.6) ),url(images/bridge.jpg) center no-repeat;
	background-size:cover; 

}


.header5 {

    height: 400px;
 padding: 200px 20px 20px 20px;
background-size: cover;
	background:linear-gradient( rgba(18, 49, 85, 0.1), rgba(18, 49, 85, 0.3) ),url(images/DV-wide.jpg) center no-repeat;
	background-size:cover; 

}

header h1 {  	line-height: 18px; 
font-size: 42px;
				color: white;
				text-shadow: 0px 0px 5px rgba(0,0,0,1),
           		  1px 1px 5px rgba(0,0,0,1),
            		 1px 1px 5px rgba(0,0,0,1),}





header h4 {
    font-weight: 300;
	color: white;
	margin-top: 42px;
}



.title{
		height: 100px;position: relative;
		/* background-image:url(images/background-sq3.png);  */
		background-color:#F1F1F1;
	/* background-image: url(images/background-lines.png); */
		margin: 40px 0 60px 0; 
z-index: 30000;

}
.title h2 {
	padding: 12px 12px; 
	font-size: 44px;
	color: #DA5F00; 
	width: 360px; 
	height: 100%;
	border-left: 1px  solid silver;
	border-right: 1px  solid silver;
	background-image:url(images/white-fade.png); 
	margin: auto;
	position: absolute;
  	top: 50%;
  	left: 50%;
text-align: center !important;
z-index: 30001;
  	transform: translate(-50%, -50%);
	text-shadow: 0px 0px 10px rgba(255,255,255,1),
             1px 1px 10px rgba(255,255,255,1),
             1px 1px 10px rgba(255,255,255,1);
}
	


.titleBar {width: 100%;
	height: 40px;
	background-color: #e0e0e0;
margin: 80px 0 90px 0;
padding-top: 2px;
border-top: #8e8f91 1px solid
}

.titleBar h2 { background-color: #f4f4f4 !important; padding: 18px; color: red; margin: 0px auto 120px auto !important ; border: 2px dotted #a1a2a3;  position: relative; max-width: 400px; line-height: 105% !important; font-size: 200%}

.about {
	width: 100%;

	max-width: 1800px;
	background-color: white;
	padding-top: 60px;
	padding-bottom: 4px;
	margin-top: -13px
	
}

.about h1 {font-size: 140%; margin: 0 10%}

.logos img {margin: 10px 20px; opacity: .6; padding-bottom: 30px}

section {width: 100% !important; background-color: white}

.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

.about .left {
	width: 39%;
	text-align: right;
	padding: 60px 0 20px 0 ;
	height: 100%;
	
}
.about .right {
	padding: 0 0px 50px 0;
	float: right;
	background-color: white;
	text-align: left;
	width: 55%;
	margin: 30px 20px}

.about .right h1 {  margin: 0; padding: 0}

.red {
    color: #B53202;
}

/* filters buttons */
#filters {background-color: white;}

.filters-section {
    position: relative;
	background-color: white;
	z-index: 1000; 
	margin-top: -60px
}

.ui-group {
    margin-top: 0px; 
}

.ui-group h4 {
    margin: 0 0 0px 0;
    font-size: 14px;
}

.button-group > .button {
    float: none;
    display: inline-block;
    padding: 6px 11px;
    margin-bottom: 0px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    color: #333;
    background-color: #fff;
    position: relative;
    outline: 0;
    -webkit-transition: background-color 200ms linear, color 200ms linear;
       -moz-transition: background-color 200ms linear, color 200ms linear;
        -ms-transition: background-color 200ms linear, color 200ms linear;
         -o-transition: background-color 200ms linear, color 200ms linear;
            transition: background-color 200ms linear, color 200ms linear;
}

.button-group > .button:hover, .over {
    background-color: #DB4500;
    color: #fff;
}

.ONbtn {
    background-color: #DB4500 !important;
    color: #fff !important;
}



.button-group > .button:active,
.button-group > .button.is-checked {
    background-color: #E55300;
    border-color: #E55300;
    color: #fff;
}


.button-group > .button:active a,
.button-group > .button.is-checked a {
    color: white;
}

.button-group > .button:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.button-group > .button:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.button-group > .button:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.button-group .button + .button {
    margin-left: -1px;
}

/* portfolio items */

.item {margin: 0 0 0 -1px}

.centered { margin: 0 auto; }

.block {
	margin:20px 20px;
    /* margin: 0 10px 10px 0; */
  width:350px;
    min-width: 350px;
    min-height: 233px;
    border: none;
}
.block-TXT {
	margin:10px 10px !important;
    /* margin: 0 10px 10px 0; */
  	background-color:white;
	border: 1px silver solid;
    min-width: 320px;
 	min-height: 80px !important;
	min-width: 210px !important;
    padding: 10px;

   
}

.block-TXT h2 {color: #DA5F00 !important; font-size: 100%}

.block .item-title {
    font-size: 13px;
    display: none;
    text-transform: uppercase;
    background: #6F747A;
    color: white;
    padding: 8px 5px;
    font-weight: 100;  
}

.block .item-title a {margin: 0 }

.block .item-subline {
	visibility:hidden;
    font-size: 12px;
    margin: 5px 0px;
    font-style: normal;
    text-transform: uppercase;
    color: #8E8D8D;
}

.block .item-more {
    /* position: absolute; */
	display:none;
	margin-left: -13%;
    bottom: 12px;
    color: #EF1010;
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase;
    font-style: normal;
}


.whiteContainer {max-width: 1200px; width: 100%; margin: 0 auto; text-align:center; bacKGROUND-COLOR:WHITE; padding: 0%; position: relative;
}



/* Project detail view -CONTAINS THE WHOLE PROJECT DIV */

.project-container {
 
    position: relative;
	padding: 0px;
	background-color: white


}

/* view live button */
.project-container .view-live-btn {
    color: #fff;
    font-size: 13px;
    background-color: #8C0000;
    text-decoration: none;
    font-weight: 400;
    padding: 6px 14px;
	margin: 30px auto 30px auto;
     /*position: absolute;
    bottom: 0;
    right: 30px; */
}

/* top summary section */
.project-container .project-intro {
    margin: 0px auto 15px auto;
    position: relative;
    padding: 0px 25px;
	text-align: center;
}

.project-container .project-intro ul {
	margin: 0px auto 30px auto !important; 
	text-align: center;
	}

.project-intro .project-thumbnail,
.project-intro .project-summary {
  
	font-family:lato;
	font-weight:300
}

.project-intro .project-thumbnail {
    width: 260px;
    margin-right: 30px;
}

.project-intro .project-thumbnail .project-title {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: #222;
    color: white;
    padding: 8px 5px;
    font-weight: normal;
    font-family: 'Oswald', Arial, sans-serif;
    margin: 0 0 6px 0;
}

.project-intro .project-thumbnail .project-subline {
    font-size: 12px;
    margin: 5px 0px;
    font-style: normal;
    text-transform: uppercase;
    color: #8E8D8D;
}

.project-intro .project-summary {
    color: #383838;
    font-size: 120%;
    padding-top: 40px !important;
	max-width: 900px; 
margin: 0 auto;
}


.project-intro .project-summary ul li {margin-top: 18px}
.project-intro .project-summary ul {
    padding-left: 0px; padding-right: 0px;
    margin: 0 auto !imporant;
    list-style-type: none;

}

.project-summary h1 {font-size: 24px; font-weight: normal;}

/* additional details section */

.project-container .project-detail {
    padding: 1%  ;

}

.project-detail h2 {
	margin: 50px auto 10px auto;
	text-align: center;
	font-size: 30px;
	line-height: 34px
}


.project-container .project-detail ul { margin: 0 20px 0 80px}

.project-container .project-detail .full-background {
    background-size: cover;
    background-repeat: no-repeat;
    max-height: 600px;
    margin: 30px 0;
}

.project-container .project-detail .full-background-color {
	background-color: #EDEEEE;
max-width: 100%;
width:100%;
	margin:  0px;
	padding: 2px 30px;

}

.project-container .project-detail .full-background-color img {
   max-width: 1100px}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.FakeCol {
	width: 2px;
	padding: 0;
	height: 2200px;
	position: fixed;
	background-color: none;
	border: none;
	float: left
}



.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}


.thumbs img {margin:0; max-width: 350px !important ;padding 0 2px}



/* ==========================================================================
   MOBILE classes
   ========================================================================== */

@media only screen 
	and (min-device-width : 275px) 
	and (max-device-width : 967px) 
  	and (-webkit-min-device-pixel-ratio: 2) {

html {
    color: #383838;
    font-size: 18px;
    line-height: 20px; }


 .project-intro .project-summary li {
    color: #383838;
    font-size: 30px;
	line-hieght: 50px;
    padding: 10px 0px 10px 0px;
	max-width: 900px;  
} 


header h1  {font-size: 36px !important}
header {padding:300px 4px 20px 4px;}


.header-image {background-position: center;  background-repeat: no-repeat; background-size: cover; width: 95%; min-height: 250px; max-height: 400px; max-width: 1200px; ; margin: 0 auto; border: 1px solid silver}



li {margin: 0 0 11px 0;}

h4 {font-size: 100%; line-height: 130%}
	
.about .right {
		padding: 0 ;
		margin: 0 auto;
		float: none;
		width: 85%;
		text-align: center
	}

h1 {font-size: 22px; line-height: 24px}

.project-detail h2  {font-size: 50px !important; line-height: 52px !important}


.whiteContainer {max-width: 800px; width: 98%; margin: 0 auto; text-align:center; bacKGROUND-COLOR:WHITE; padding: 1%
}


.block {width: 100%; padding: 1px 0px;}

.block img: {width: 125%}


.thumbs img {margin:0; width: 350px;padding 2px}

.about h1 {font-size: 105%; line-height: 120%}

.about h2 {font-size: 80%; line-height: 100%; text-align: center}

header h2 {
	font-size: 18px !important
}

header h4 {
	font-size: 16px !important
}



.title {
		height: 60px;position: relative;
		background-color:#F1F1F1;
		margin: 20px 0 40px 0; 
		z-index: 30000;
text-align: center
}

.title h2 {
	padding: 8px 20px; 
	font-size: 40px; 
	line-height: 31px;
	width: 350px;
	z-index: 30001
;
}

.resume h2 {font-size: 18px}

.resume {font-size: 16px;
	line-height: 20px;
	padding: 0 9px 20px 9px }

.filters-section {
    margin-top: 22px !IMPORTANT;
}

#Thumbgroup {
	 clear: both; 
	margin: 0 auto !important; 
	text-align:center;
	margin-left: auto !important; 
	margin-right: auto !important; 
	min-height: 800px !important;
	border: 1px solid silver
	}



	
.about .left {
	width: 95%;
	text-align: right;
	padding: 0 ;
	height: 100%;
	}
.about .left img {
	width: 95%
	}
.item {margin-left: 0%}

.travelBox {
	width: 85%;
	}

.travelBox h4 {
	font-size: .9em; 
	padding: 8px !important;
	}

.project-container .project-detail .full-background-color img {
  width: 100%; padding: 0 2px;}

.logos img {max-height: 100px; max-width: 300px; margin: 8px 2px; padding-bottom: 14px}

.resumeTitle { display:none; !important}

.mobileBTN {margin-top: 35px}

.mobileLink {font-size: 80%; margin-bottom: -60px}

.pageNav {
display: none;
	width: 110px;
	padding: 16px;
	border: 1px solid black;
	position: fixed;
	bottom: 0; right: 0}

.pageNav a {
	font-size: 100%; 
	padding: 8px; 
	color:white; 
	font-weight: 700}

.pageNav-home {
	bottom: 0; left: 0;
	padding: 16px;
	border: 1px solid black;
	position: fixed;
	width: 110px;
	background-color:#7f0505;
	z-index: 500000}

.project-container .view-live-btn {
    font-size: 30px;
    padding: 10px 16px;
	margin: 30px auto 0 auto;
   }



.rightSideTXT  {font-size: 24px; line-height: 120%; padding: 0 5%}

/* top summary section */
.project-container .project-intro {
    margin: 10px auto 0 auto;
    position: relative;
    padding: 0 25px;
}

.project-intro .project-thumbnail,
.project-intro .project-summary {
    
	font-family:lato;
	font-weight:300
}

.project-summary ul li{
    line-height: 110% !important; 
}

.project-summary strong {font-size: 140% !important}

.project-intro .project-thumbnail {
    width: 460px;
    margin: 10px auto 0 auto
}

.project-intro .project-thumbnail img{
    object-fit: contain; WIDTH: 500PX; padding: 2px
  
}

.project-intro .project-thumbnail .project-title {
    font-size: 19px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: #222;
    color: white;
    padding: 8px 5px;
    font-weight: normal;

}

.project-intro .project-thumbnail .project-subline {
    font-size: 22px;
    font-style: normal;
    text-transform: uppercase;
    color: #8E8D8D;
}

.project-container .project-detail .full-background-color {

	max-width: 100%;
	width:100%;
	margin:  0px;
	padding: 2px 2px !important;

}
.project-container .project-detail {
    padding: 0 2px !important;}

.full-background-color IMG { object-fit: contain

}

}