html, body {

    height: 100%;

    width: 100%;

    margin:0px;

    padding:0px;

    margin-top:0px;
    
}    


html, body {
  overflow-x: hidden;
  margin:0;
  padding:0;
  background-color:#FFFFFF;
}

h1 {font-size:11px; color:#686868; font-family: "open-sans",sans-serif; font-weight: 600; letter-spacing: 1px; line-height: 14px; }

h2 {font-size:11px; color:#909090; font-family: "open-sans",sans-serif; letter-spacing:1px; font-weight: 100; line-height: 14px;}

h3 {font-size:10px; color:#686868; font-family: "open-sans",sans-serif; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; line-height: 14px; }

h4 {font-size:16px; color:#909090; font-family: "open-sans",sans-serif; letter-spacing:1px; font-weight: 100; line-height: 16px;}

h5 {font-size:24px; line-height: 38px; color:#909090; font-family: "open-sans",sans-serif; font-weight: 100;}



.partner h1, .partner h2, .partner h3, .partner h4, .partner h5, .partner p, .item_industry, .item_business {color:#686868; font-family: "open-sans",sans-serif; text-transform: none;} 
.partner h1 {font-size: 62px; font-weight: 600; line-height: 70px;  -webkit-margin-before: 0em; -webkit-margin-after: 0em;}
.partner h2 {font-size: 34px; font-weight: 600; line-height: 44px;}
.partner h3 {font-size: 24px; font-weight: 300; line-height: 34px;}
.partner h4 {font-size: 30px; font-weight: 400; line-height: 38px;}
.partner h5 {font-size: 14px; font-weight: 700; line-height: 22px;}
.partner p {font-size: 18px; font-weight: 100; line-height: 29px;}

.button-text {font-family: arial, sans-serif; font-size: 14px;}

.clear {clear: both;}

.extendfull img, .extendright img, .extendleft img { max-width:100%; }

.white { background-color: white; }

.grey { background-color:#FBF9F9; }
.black { background-color:#000; }


.myButton {
	background-color:#44c767;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
	background-color:#5cbf2a;
}
.myButton:active {
	position:relative;
	top:1px;
}
  

a {text-decoration: none;}
a:hover h2 { color:black; }

body {margin:0; font-family: "kepler-std-subhead",serif; color: #333; letter-spacing: .5px; line-height: 26px;}

img{width:100%;height:auto; display:block;}

li {text-decoration: none; list-style: none; float: left; display:inline-block;}

.container { margin:0 auto; padding: 0 5% 0px 5%; }

.col-md-60  { padding:0px 10% 0px 10%;  }


.client_title {font-weight: 500;}
.client_description {color:#ccc;}


.index_grid{display:flex;flex-direction:row;justify-content:flex-start;width:100%;flex-wrap:wrap; }

.item{box-sizing:border-box;padding:15px;}

.item_business {font-size: 14px; font-weight: 100; line-height: 24px; padding-top:8px; display:none;}
.item_industry {font-size: 13px; font-weight: 100; line-height: 14px; color: gray; padding-bottom:15px; display:none;}

.item_client {font-family: azo-sans-web, sans-serif;font-weight: 900;font-style: normal;font-size:12px; letter-spacing: 3px;}
.item_business {font-family: azo-sans-web, sans-serif;font-weight: 300;font-style: normal;font-size:22px; letter-spacing: 1px;}
.item_sell {font-family: azo-sans-web, sans-serif;font-weight: 300;font-style: normal;font-size:18px; letter-spacing: 1px;}
.item_sell {text-align:right; padding-right:0; padding-top:0px;}




.footer_social ul {float:right;}

.divider_01 { border-bottom:2px solid black; width:12px; text-align:left;  }


.nav {padding-bottom:25px; padding-top:50px;  text-align:left;}

.nav a { text-decoration: underline; color:#909090; }  
.nav h5 a:hover { color:black; }
    

    
    #logo {width:44px; margin: 0 auto; padding:25px;}
   
   underline {text-decoration: underline; display: inline;}

.footer { width:100%; margin:0 auto; background-color: #FFF; height:360px; margin-top:50px; overflow:hidden;  }
.footer .inside { max-width:1400px; margin:0 auto; padding:0px 5% 0px 5%;  }

.vertical {float:left; width:100%; padding: 180px 0; clear: both;}

.vertical { padding-left: 3000px; margin-left: -3000px; padding-right: 3000px; margin-right: -3000px; }  

.full_width {
  margin: 0 -9999rem;
  /* add back negative margin value */
  padding: 0.25rem 9999rem;
}


.quotes {display: none;}

.index_grid {padding-bottom:100px;}

.index_grid li {
	opacity: 0;
	animation: fadeIn .05s ease-in both;
}

.index_grid li:nth-child(2) {
	animation-delay: .1s;
}
.index_grid li:nth-child(3) {
	animation-delay: .15s;
}
.index_grid li:nth-child(4) {
	animation-delay: .2s;
}
.index_grid li:nth-child(5) {
	animation-delay: .25s;
}
.index_grid li:nth-child(6) {
	animation-delay: .3s;
}
.index_grid li:nth-child(7) {
	animation-delay: .35s;
}
.index_grid li:nth-child(8) {
	animation-delay: .4s;
}
.index_grid li:nth-child(9) {
	animation-delay: .45s;
}
.index_grid li:nth-child(10) {
	animation-delay: .5s;
}
.index_grid li:nth-child(11) {
	animation-delay: .55s;
}
.index_grid li:nth-child(12) {
	animation-delay: .6s;
}


.videocontainer {
	position:relative;
	max-height:1580px;
	overflow: hidden;
  background-size:cover;
	background-color:#000;
}
.videocontainer video {
	display: block;
	width:100%;
	height:auto;
  opacity:0.9;
}


@keyframes fadeIn {
	from {
		opacity: 0;

	}
	to {
		opacity: 1;

	}
}


ul, menu, dir {
    display: block;
    list-style-type: disc;
    margin:0; padding:0;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}

.pagination {padding-bottom: 150px;}

.pagination a:hover .previous { }

.previous img, .next img {width:34px; display: inline-block;}

.right {text-align:right;} 
.left {text-align:left;} 
.center {text-align:center;}











aside {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: black;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
  z-index: 2;
}
.open {
  opacity: 1;
  visibility: visible;
}
nav {
  text-align: center;
  height: 95vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  align-items: center;
  flex: 1;
  line-height: 20vh;
}
nav ul li a {
  font-size: 1.5em;
  transition: all 0.5s ease;
  display: block;
  text-decoration: none;
  color: rgba(255, 255, 255, .5);
}
nav ul li a:hover {
  color: rgba(255, 255, 255, .9);
}
nav ul li a:before {
  content: "";
  position: absolute;
  width: 50%;
  height: 2px;
  bottom: 0;
  left: 25%;
  background: white;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.open {
  position: fixed;
  top: 40px;
  right: 60px;
  color: black;
  z-index: 3;
  cursor: pointer;
  font-family: sans-serif;
}
.open span, .open span:before, .open span:after {
  border-radius: 4px;
  height: 5px;
  width: 35px;
  background: black;
  position: absolute;
  display: block;
  content: '';
}
.open span {
  background: transparent;
}
.open span:before {
  transform: rotate(45deg);
}
.open span:after {
  transform: rotate(-45deg);
}
.outer-open {
  position: absolute;
  right: 0;
  top: 0;
  width: 85px;
  height: 85px;
  cursor: pointer;
}

.close {
  position: fixed;
  top: 40px;
  right: 60px;
  color: white;
  z-index: 3;
  cursor: pointer;
  font-family: sans-serif;
}
.close span, .close span:before, .close span:after {
  border-radius: 4px;
  height: 5px;
  width: 35px;
  background: white;
  position: absolute;
  display: block;
  content: '';
}
.close span {
  background: transparent;
}
.close span:before {
  transform: rotate(45deg);
}
.close span:after {
  transform: rotate(-45deg);
}
.outer-close {
  position: absolute;
  right: 0;
  top: 0;
  width: 85px;
  height: 85px;
  cursor: pointer;
}





#ha, #ncb, #ku, #ame, #en, #brick { 
  width:100%;
  height:auto;
  position:relative;
  display:block;
}

.haslide, .ncbslide, .kuslide, .ameslide, .enslide, .brickslide {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  color: white;
  -webkit-transition-duration: 0.25s;
  transition-duration: 0.25s;
  opacity: 0;
  cursor: pointer;
}

.brickslide.brickactive, .enslide.enactive, .ameslide.ameactive, .kuslide.kuactive, .haslide.haactive, .ncbslide.ncbactive { opacity: 1; }





.opacityhover {opacity:.2;}
.opacityhover:hover {opacity:.8;}




@media screen and (max-width: 814px) and (min-width: 100px){.item{width:100%}.col-md-60  { padding:0px 3% 0px 3%;  } .item_sell {text-align:left; padding-left:0; padding-top:0px;} .footer .item_client {display:none;}.nav {display:none;} .mobilenav {display:block;}}

@media screen and (max-width: 99999px) and (min-width: 814px){.item{width:33.33%} .footer {height:600px;}.nav {display:block;} .mobilenav {display:none;}}



@media screen and (min-width: 600px) {
  nav ul li a {
    font-size: 3em;
  }
}


.element::-webkit-scrollbar { width: 0 !important; }

.agency-section {height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}

#section {display:block; height:100%; width:100%;}

h1 {text-transform: uppercase; font-size:90px; line-height: 80px; font-family: acumin-pro-condensed, sans-serif; font-weight: 800;}
p {font-family: open-sans, sans-serif; font-weight: 300; font-style: normal; line-height: normal; color: #231f20;}
a {color:black; text-decoration: underline; }
body {background-color: #ffffff;}

.upperpunch {font-size:9px; text-transform: uppercase; font-family: acumin-pro-condensed, sans-serif; font-weight: 800; letter-spacing: 3px;}
.project_meta {font-size:80%;}

.jmus_logo img {position:absolute; top:30px; left:30px; width:auto; height:11px; z-index:9999999;}

/* Radio Slider */
.slider-container {position: relative; margin-bottom: 40px;}
.slider {-webkit-appearance: none;  appearance: none;  height: 1px;  background: white;  outline: none;  width: 99.5%;  margin-left: 6px;  margin-right: 6px;}
.mark {width: 10px;  height: 10px;  background-color: white;  position: absolute;  top: 12px;  z-index: -1;  border-radius: 50%;  border: 1px solid black;}
.mark1 {left: 5px;}
.mark2 {left: 49.5%;}
.mark3 {right: -1px;}

.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: white; cursor: e-resize; border-radius: 50%; margin: 0; margin-top:5px;}
.slider::-webkit-slider-thumb, .slider::-moz-range-thumb {width: 35px; height: 35px; background: white; cursor: e-resize; border-radius: 50%; margin: 0; margin-top:5px;}
#stage_note {font-size: 18px; color:white;}
/* End Radio Slider */

h3 {color: white; font-weight: bold; text-transform: uppercase; font-size:16px; font-family: acumin-pro-condensed, sans-serif; font-weight: 800;}

.contact a {position:absolute; top:20px; right:30px; width:auto; font-size:14px; font-family: "open-sans", sans-serif; text-transform: uppercase; color:white; z-index:9999999;}

.line {border-bottom: 1px solid #958007; opacity: .4;}

.brief {padding-right:0;}        

#ha, #ncb, #ku, #ame, #en, #brick, #shell { width:100%; height:auto; position:relative; display:block;}
.haslide, .ncbslide, .kuslide, .ameslide, .enslide, .brickslide, .shellslide { position:absolute; top:0; left:0; width: 100%; height: 100%; color: white; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; opacity: 0; cursor: e-resize;}
.brickslide.brickactive, .enslide.enactive, .ameslide.ameactive, .kuslide.kuactive, .haslide.haactive, .ncbslide.ncbactive, .shellslide.shellactive { opacity: 1; }


.description{display:none;}



.intro p {font-size:44px; line-height: normal; font-weight: 100; opacity: .7; padding-right:20%;}



/* Video Modal
-----------------------------------------*/
.video-modal, .video-modal .overlay {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3000;}
.video-modal {overflow: hidden; position: fixed; opacity: 0.0; -webkit-transform: translate(500%,0%); transform: translate(500%,0%);

 -webkit-transition: -webkit-transform 0s linear 0s;
  transition: transform 0s linear 0s;

  /* using flexbox for vertical centering */

  /* Flexbox display */
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;

  /* Vertical alignment */
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.video-modal .overlay {z-index: 0; background: rgba(0,0,0,0.82); /* overlay color */ opacity: 0.0; -webkit-transition: opacity 0.2s ease-out 0.05s; transition: opacity 0.2s ease-out 0.05s;}

.video-modal-content {position: relative; top: auto; right: auto; bottom: auto;	left: auto;	z-index: 1;	margin: 0 auto; overflow-y: visible; background: #000; width: calc(100% - 12em); height: 0; padding-top: calc((100% - 12em) * 0.5625); /* 16:9 calc */}

/* Scaling to fit within the current Viewport size:
   When viewport aspect ratio is greater than 16:9
   work off the height instead of the width for calc */
 @media (min-aspect-ratio: 16/9) {
  .video-modal-content {
    width: 0;
    height: calc(100vh - 10em);
    padding-top: 0;
    padding-left: calc((100vh - 10em) * 1.7778); /* 16:9 calc */
  }
}

/* Mobile Layout Tweaks - side margins reduced */
@media (max-width: 640px) {
	.video-modal-content {
		width: calc(100% - 1em);
    padding-top: calc((100% - 1em) * 0.5625); /* 16:9 calc */
	}
}

/* modal close button */
.close-video-modal { display: block; position: absolute; left: 0; top: -40px; text-decoration: none; font-size: 20px; font-weight: bold; color: #fff;}

/* set the iframe element to stretch to fit its parent element */
iframe#youtube {position: absolute; top: 0;	right: 0;	bottom: 0;	left: 0; z-index: 1; background: #000; box-shadow: 0px 2px 16px rgba(0,0,0,0.5);}

/* show the modal:    add class to the body to reveal */
.show-video-modal .video-modal {	opacity: 1.0; transform: translate(0%,0%); -webkit-transform: translate(0%,0%);}
.show-video-modal .video-modal .overlay { opacity: 1.0; }
.show-video-modal .video-modal-content { transform: translate(0%,0%); -webkit-transform: translate(0%,0%);}


.video-banner-image img {opacity:.8;}
.video-banner-image:hover img {opacity:1;}







	.element::-webkit-scrollbar { width: 0 !important; }
	
	.agency-row {height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}


p {font-family: open-sans, sans-serif; font-weight: 300; font-style: normal;}
a {color:black;}

.videocontainer {
	position:relative;
	max-height:640px;
	overflow: hidden;
  background-size:cover;
	background-color:#000;
}
.videocontainer video {
	display: block;
	width:100%;
	height:auto;
  opacity:0.9;
}




.element::-webkit-scrollbar { width: 0 !important; }

.agency-section {height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}

#section {display:block; height:100%; width:100%;}

h1 {text-transform: uppercase; font-size:90px; line-height: 80px; font-family: acumin-pro-condensed, sans-serif; font-weight: 800;}
p {font-family: open-sans, sans-serif; font-weight: 300; font-style: normal; line-height: normal; color: #231f20;}
a {color:black; text-decoration: underline; }
body {background-color: #ffffff;}

.jmus_logo img {position:absolute; top:30px; left:30px; width:auto; height:11px; z-index:9999999;}

/* Radio Slider */
.slider-container {position: relative; margin-bottom: 40px;}
.slider {-webkit-appearance: none;  appearance: none;  height: 1px;  background: white;  outline: none;  width: 99.5%;  margin-left: 6px;  margin-right: 6px;}
.mark {width: 10px;  height: 10px;  background-color: white;  position: absolute;  top: 12px;  z-index: -1;  border-radius: 50%;  border: 1px solid black;}
.mark1 {left: 5px;}
.mark2 {left: 49.5%;}
.mark3 {right: -1px;}

.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: white; cursor: e-resize; border-radius: 50%; margin: 0; margin-top:5px;}
.slider::-webkit-slider-thumb, .slider::-moz-range-thumb {width: 35px; height: 35px; background: white; cursor: e-resize; border-radius: 50%; margin: 0; margin-top:5px;}
#stage_note {font-size: 18px; color:white;}
/* End Radio Slider */

h3 {color: white; font-weight: bold; text-transform: uppercase; font-size:16px; font-family: acumin-pro-condensed, sans-serif; font-weight: 800;}

.contact a {position:absolute; top:20px; right:30px; width:auto; font-size:14px; font-family: "open-sans", sans-serif; text-transform: uppercase; color:white; z-index:9999999;}

.line {border-bottom: 1px solid #958007; opacity: 1;  background-color: white;}

.brief {padding-right:0;}        

#ha, #ncb, #ku, #ame, #en, #brick, #shell { width:100%; height:auto; position:relative; display:block;}
.haslide, .ncbslide, .kuslide, .ameslide, .enslide, .brickslide, .shellslide { position:absolute; top:0; left:0; width: 100%; height: 100%; color: white; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; opacity: 0; cursor: e-resize;}
.brickslide.brickactive, .enslide.enactive, .ameslide.ameactive, .kuslide.kuactive, .haslide.haactive, .ncbslide.ncbactive, .shellslide.shellactive { opacity: 1; }

.intro p {font-size:51px; line-height: normal; font-weight: 300; opacity: .7; }
.description{display:none;}
.testimonial {font-size:24px; line-height:34px;}







/* Video Modal
-----------------------------------------*/
.video-modal, .video-modal .overlay {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3000;}
.video-modal {overflow: hidden; position: fixed; opacity: 0.0; -webkit-transform: translate(500%,0%); transform: translate(500%,0%);

 -webkit-transition: -webkit-transform 0s linear 0s;
  transition: transform 0s linear 0s;

  /* using flexbox for vertical centering */

  /* Flexbox display */
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;

  /* Vertical alignment */
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.video-modal .overlay {z-index: 0; background: rgba(0,0,0,0.82); /* overlay color */ opacity: 0.0; -webkit-transition: opacity 0.2s ease-out 0.05s; transition: opacity 0.2s ease-out 0.05s;}

.video-modal-content {position: relative; top: auto; right: auto; bottom: auto;	left: auto;	z-index: 1;	margin: 0 auto; overflow-y: visible; background: #000; width: calc(100% - 12em); height: 0; padding-top: calc((100% - 12em) * 0.5625); /* 16:9 calc */}

/* Scaling to fit within the current Viewport size:
   When viewport aspect ratio is greater than 16:9
   work off the height instead of the width for calc */
 @media (min-aspect-ratio: 16/9) {
  .video-modal-content {
    width: 0;
    height: calc(100vh - 10em);
    padding-top: 0;
    padding-left: calc((100vh - 10em) * 1.7778); /* 16:9 calc */
  }
}

/* Mobile Layout Tweaks - side margins reduced */
@media (max-width: 640px) {
	.video-modal-content {
		width: calc(100% - 1em);
    padding-top: calc((100% - 1em) * 0.5625); /* 16:9 calc */
	}
}

/* modal close button */
.close-video-modal { display: block; position: absolute; left: 0; top: -40px; text-decoration: none; font-size: 20px; font-weight: bold; color: #fff;}

/* set the iframe element to stretch to fit its parent element */
iframe#youtube {position: absolute; top: 0;	right: 0;	bottom: 0;	left: 0; z-index: 1; background: #000; box-shadow: 0px 2px 16px rgba(0,0,0,0.5);}

/* show the modal:    add class to the body to reveal */
.show-video-modal .video-modal {	opacity: 1.0; transform: translate(0%,0%); -webkit-transform: translate(0%,0%);}
.show-video-modal .video-modal .overlay { opacity: 1.0; }
.show-video-modal .video-modal-content { transform: translate(0%,0%); -webkit-transform: translate(0%,0%);}





.js-trigger-video-modal img:hover {opacity:1; cursor: pointer;}
.js-trigger-video-modal img:hover {opacity:.8; cursor: pointer;}




.hero {padding: 0px; position: relative; z-index:1; opacity:1;}
.header {position: fixed; z-index:50;}
.content {position: relative; z-index: 100; background-color:white; width:100%; height:auto;}   
    

.project_note {text-align:center; padding:100px 20% 40px 20%;}
.tablet img {width:50%; margin:0 auto;}
	
	
.sticker {
  width:50px;
  height:50px;
  background: url(https://www.joshuamichaeldavis.com/assets/images/logo_02.png) top center no-repeat; 
  background-size:50px;
  -webkit-animation:spin 1s linear infinite;
  -moz-animation:spin 1s linear infinite;
  animation: spin 1s linear infinite;
  /*Set our animation play state to paused initially */
  animation-play-state: paused; 



}

.sticker:hover {
  /* Toggle our animation play state to running when we are hovering over our sticker */
  animation-play-state: running;
  
}


@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }	


#contact-area {padding-top:200px;}



input, textarea { padding:3% 0 3% 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width:100%; margin-bottom: 10px; font-size: 16px; border: 0px solid #DDDDDD; float:left;}
textarea {height: 150px;}

textarea:focus, #contact-area input:focus {border: 0px solid #fff;}

input.submit-button {text-align:center; text-transform: uppercase; font-size: 14px; float: left; cursor:pointer; }
input.submit-button:hover {background-color:;}

.intro {padding-top:50px;}

/* More Work */

.flex-grid-half {display: flex; flex-wrap: wrap; justify-content: space-around; justify-content: flex-start; }
.flex-grid-half .design {width:calc(50% - 20px); margin:10px;}

.filters {font-size:11px; text-transform: uppercase; font-family: sans-serif; padding-top:0px; margin-top:0;}

.filters p {font-size:11px;}

ul {position: relative; width:678px; height:50px; display: block; margin: 0 auto; text-align: center;}

.filters li {padding-right: 20px; }
.filters li:last-child {padding-right: 0;}

.filters a {text-decoration: none; }
.filters a:hover {text-decoration: underline;}
.filters a:active {text-decoration: underline;}


.project-grid-sort .col-xs-30:nth-child(2n+1){clear:left;}
.project-grid-sort .col-md-30:nth-child(2n+1){clear:left;}
.project-grid-sort .col-lg-30:nth-child(2n+1){clear:left;}

.flex-grid-half {display: flex; flex-wrap: wrap; justify-content: space-around; justify-content: flex-start; }
.flex-grid-half .design {width:calc(33.33% - 20px); margin:10px;}

.col-xs-60 ul {display: none;}
.col-lg-60 ul {display: block;}

@media screen and (min-width: 1200px) {
.col-xs-0 ul {display:none;}
.col-md-60 ul {display: none;}
.col-lg-60 ul {display:block;}
}

@media screen and (max-width: 1199px) {
.col-xs-60 ul {display:none;}
.col-md-60 ul {display: block;}
.col-lg-60 ul {display: none;}
}

@media screen and (max-width: 768px) {
.flex-grid-half .design {width:calc(100% - 10px); margin:5px;}
.filters {position: fixed; bottom:0; left:0; width:100%; height:60px; z-index: 10; background-color:#f3f3f3; opacity:.9; padding-top:10px; padding-bottom:10px; padding-left:3%;}
.filters li {background-color:white; border-radius:30px; color:#606060; text-align:center; padding:20px; margin-right:8px; opacity:1;}
.filters li:last-child {padding-right:20px;}
.filters li a {font-size: 12px;}
.project-grid-sort {position: relative; z-index: 1;}
.filters p {margin-block-start: 0em; margin-block-end: 0em;}
.col-lg-60 ul {display: none;}
.col-md-60 ul {display: none;}
.col-xs-60 ul {display: block;}
}






/* == Menu Left == */



.menuleft {
	line-height: 12px; padding:0; margin:0; text-transform: none; font-family: 'Futura'; font-weight: 300;
}

.menuleft {
  background: #fafafa; position:fixed; width: 200px; padding: 15px 10px; box-shadow: 0 1px 1px rgba(0,0,0,0.15); top:120px; left:15px; margin-top:15px;
}

.menuleft a {
  font-family: helvetica; font-size:8px; color: #333; padding: 2px; display: block; text-decoration: none; margin-top:2px; border-bottom:2px solid #fafafa;
}

.menuleft a:hover,

.menuleft a.active {
	color: blue;
}

.menuleft h3 {margin:0;}


@media only screen and (max-width: 1076px) {

	.menuleft {

		display: none;

	}

}

@media only screen and (max-width: 640px) {



}