/*
* {
	margin: 0;
	padding: 0;
}
*/



body {
  margin: 0;
  padding: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #052219;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  letter-spacing: 0.2em;
	text-decoration: none !important;
  color: #fff;
}

p {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  color: #fff;
  padding-top: 5px;
  padding-left:60px;
  padding-right:30px;
  font-weight: 300;
  font-style: normal;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.15em;
  text-decoration: none !important;
  text-align: left;
}

p a{
  font-family: Roboto, Arial, Helvetica, sans-serif;
  color: #fff;
  padding-top: 5px;
  padding-right:30px;
  font-weight: 300;
  font-style: normal;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.15em;
  text-decoration: none !important;
  text-align: left;
}

p a:link {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  color: #fff;
  padding-top: 5px;
  padding-right:30px;
  font-weight: 300;
  font-style: normal;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.15em;
  text-decoration: none !important;
  text-align: left;
}

p a:hover {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  color: #fff;
  padding-top: 5px;
  padding-right:30px;
  font-weight: 300;
  font-style: normal;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.15em;
  text-decoration: none !important;
  text-align: left;
}

p a:visited {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  color: #fff;
  padding-top: 5px;
  padding-right:30px;
  font-weight: 300;
  font-style: normal;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.15em;
  text-decoration: none !important;
  text-align: left;
}

p a:active {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  color: #fff;
  padding-top: 5px;
  padding-right:30px;
  font-weight: 300;
  font-style: normal;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.15em;
  text-decoration: none !important;
  text-align: left;
}

h8 {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 300;
  background-color:#052219;
  font-style: normal;
  font-size: 9px;
  line-height: 20px;
  letter-spacing: 0.15em;
  text-decoration: none !important;
}

h8 a {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 300;
  background-color:#052219;
  font-style: normal;
  font-size: 9px;
  line-height: 20px;
  letter-spacing: 0.15em;
  text-decoration: none !important;
}

h8 a:link {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 300;
  background-color:#052219;
  font-style: normal;
  font-size: 9px;
  line-height: 20px;
  letter-spacing: 0.15em;
  text-decoration: none !important;
}

h8 a:hover {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  color: #7c9c91;
  font-weight: 300;
  background-color:#052219;
  font-style: normal;
  font-size: 9px;
  line-height: 20px;
  letter-spacing: 0.15em;
  text-decoration: none !important;
}

h8 a:visited {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 300;
  background-color:#052219;
  font-style: normal;
  font-size: 9px;
  line-height: 20px;
  letter-spacing: 0.15em;
  text-decoration: none !important;
}

h8 a:active {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 300;
  background-color:#052219;
  font-style: normal;
  font-size: 9px;
  line-height: 20px;
  letter-spacing: 0.15em;
  text-decoration: none !important;
}




.footer {
    position: fixed;
    left:0px;
    bottom: 0px;
    width: 100%;
    height: 75px;
    background-color:#052219;
	z-index: 2000;
}




.foot {
	text-align: center;
	background-color:#052219;
}



/************************************************************************
video index
************************************************************************/

#myVideo {
  display:block;
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
	
#myVideo_staand {
  display:none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}


/************************************************************************
Lightbox
************************************************************************/

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 150%;
	max-height: 150%;
	margin-top: 2%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}



/************************************************************************
Lightbox posters
************************************************************************/

.lightbox2 {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}

.lightbox2 img {
	/** Pad the lightbox image */
	max-width: 150%;
	max-height: 150%;
	margin-top: 2%;
}

.lightbox2:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}

/************************************************************************
Boxloader
************************************************************************/


[data-aos="fade"] {
  opacity: 0;
  transition-property: opacity;
}

[data-aos="fade"].aos-animate {
  opacity: 1;
}




/************************************************************************
************************************************************************/

.overall {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #052219;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.overall_design {
  position: absolute;
  background-image: url("https://www.tokyo-amsterdam.nl/testen_DEF/images/design/design_beeld_default.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #052219;
  width: 100%;
  height: 100%;
}


.overall_design a:hover {
	background-image: url("https://www.tokyo-amsterdam.nl/testen_DEF/images/design/design_beeld_hover.jpg");
}


#fade {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

#light {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 600px;
  max-height: 360px;
  margin-left: -300px;
  margin-top: -180px;
  border: 0px solid #FFF;
  background: #FFF;
  z-index: 1002;
  overflow: visible;
}

#boxclose {
  float: right;
  cursor: pointer;
  color: #000;
  border: 1px solid #AEAEAE;
  border-radius: 3px;
  background: #fff;
  font-size: 31px;
  font-weight: bold;
  display: inline-block;
  line-height: 0px;
  padding: 11px 3px;
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 1002;
  opacity: 0.9;
}

.boxclose:before {
  content: "×";
}

#fade:hover ~ #boxclose {
  display:none;
}







/************************************************************************
DESIGN
************************************************************************/


.sizzlereel{
  width:50%;
  padding-top: 80px;	
  left: 0;
  right: 0;
  margin: 0 auto;
}

.sizzlereel_video{
  width:100%;
  border: solid 1px rgba(255, 255, 255, 0.4);
  left: 0;
  right: 0;
  margin: 0 auto;
}




/************************************************************************
contact
************************************************************************/

.tokyo{
  width:50%;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  text-align: center;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 24px;
  color:#fff;
  display: flex;
	flex-direction: column;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-decoration: none !important;
	padding-top: 20px;
}

.map{
	border-radius: 25px;
	width: 50% !important;
    left: 0;
  	right: 0;
  	margin: 0 auto;
	text-align: center;
}



.contact {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  width: 65%;
  text-align: center;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 24px;
  color:#fff;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-decoration: none !important;
	padding-top: 20px;
}


.overal a {
   font-family: Roboto, Arial, Helvetica, sans-serif;
  width: 65%;
  text-align: center;
  font-weight: 300;
  font-style: normal;
  font-size: 15px;
  letter-spacing: 0.2em;
  line-height: 24px;
  color:#fff;
  text-decoration: none !important;
}

.contact a:link {
   font-family: Roboto, Arial, Helvetica, sans-serif;
  width: 65%;
  text-align: center;
  font-weight: 300;
  font-style: normal;
  font-size: 15px;
  letter-spacing: 0.2em;
  line-height: 24px;
  color:#fff;
  text-decoration: none !important;
}

.contact a:hover {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  width: 65%;
  text-align: center;
  font-weight: 300;
  font-style: normal;
  font-size: 15px;
  letter-spacing: 0.2em;
  line-height: 24px;
  color:#fff;
  text-decoration: none !important;
}

.contact a:visited {
   font-family: Roboto, Arial, Helvetica, sans-serif;
  width: 65%;
  text-align: center;
  font-weight: 300;
  font-style: normal;
  font-size: 15px;
  letter-spacing: 0.2em;
  line-height: 24px;
  color:#fff;
  text-decoration: none !important;
}

.contact a:active {
   font-family: Roboto, Arial, Helvetica, sans-serif;
  width: 65%;
  text-align: center;
  font-weight: 300;
  font-style: normal;
  font-size: 15px;
  letter-spacing: 0.2em;
  line-height: 24px;
  color:#fff;
  text-decoration: none !important;
}


.icoon {
   text-align: center;
   left:0;
   right:0;
   margin: 0 auto;
}



/************************************************************************
NAVIGATIE
************************************************************************/

.nav-bar {
  height: 80px;
  background: #052219;
  top: 0;
}
 
.brand {
  position: absolute;
  padding-left: 5%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right:20px;
  width: 350px;
  left: 5%;
}
.brand a img {
	max-height: 80px;
}
.brand a,
.brand a:visited {
  color: #ffffff;
  text-decoration: none;
}
 
.nav-container {
  width: 100%;
  margin: 0 auto;
  background: #052219;
  position: fixed;
  z-index: 100;
}
 
nav {
  float: right;
  padding-right: 10%;
	
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  float: left;
  position: relative;
	
	
}
nav ul li a,
nav ul li a:visited {
  display: block;
	padding-top: 0px;
	padding-right:10px;
	padding-bottom:0px;
	padding-left: 10px;
  line-height: 80px;
  background: #052219;
  color: #ffffff;
  text-decoration: none;
	width:100%;
}
nav ul li a:hover,
nav ul li a:visited:hover {
/*  background: #7c9c91;*/
  color: #ffffff;
	font-weight: bold;
	width:100%;
	
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
	width:100%;
}
nav ul li ul li {
  min-width: 190px;
	
}
nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}
 
/*
.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
*/
.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: #052219;
  height: 80px;
  width: 80px;
}




/************************************************************************
Street
************************************************************************/

/*
.street {
	display: flex;
	width: 100%;
	flex-wrap: stretch;
	flex-direction: column;
		text-align: center;
}


.street1 {
	flex: 1;
}

.street2 {
	flex: 1;
}
*/


/************************************************************************
PROJECTEN VIDEO
************************************************************************/

.blocks {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-flow: column wrap;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-flow: column wrap;
}

.projects {
	width: 100%;
	opacity: 1;
	float: left;
	text-align: center;
	margin: 0;
}

.projects img {
	opacity: 1;
	-webkit-filter: none;
	filter: none;

}

.projects img:hover {
	
    opacity: 0.6;
    transition: all 500ms;
    -webkit-transition: all 500ms;
/*

	-webkit-filter: grayscale(1);
	filter: grayscale(1);
*/
}


/*
.projects  img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.projects img:hover {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}
*/

.blockImage {
	width: 100%;
}



.projects .blockImage {
	margin: -2px;
}

.copyright {
padding-left:30%;
  color: #fff;
}


/************************************************************************
contact 1k
************************************************************************/
.projects_1k_contact {
	display: block;
	width: 100%;
	opacity: 1;
	float: left;
	text-align: center;
	margin: 0;
}

.projects_1k_contact img {
	display: block;
    width: 100%;
    max-width: 100%; /* corresponds to max height of 450px */
    margin: 0 auto;

}




/************************************************************************
DESIGN
************************************************************************/

.blocks_1k {
	width: 100%;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-flow: column wrap;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-flow: column wrap;
}

.projects_1k {
	width: 100%;
	opacity: 1;
	float: left;
	text-align: center;
	margin: 0;
}

.projects_1k img {
	opacity: 1;
	-webkit-filter: none;
	filter: none;

}

.blocks_3k_contact {
	position: fixed;
	bottom: 70px;
	width: 100%;
	height: auto;
	background-color: #052219;
	opacity: 1;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-flow: column wrap;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-flow: column wrap;
}

.projects_3k_contact {
	width: 100%;
	top: 0px;
	float: left;
	text-align: center;
}



/************************************************************************
PROJECTEN 3 KOLOMMEN
************************************************************************/

.blocks_3k {
	width: 100%;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-flow: column wrap;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-flow: column wrap;
}


.projects_3k {
	width: 100%;
	float: left;
	color: #000;
	text-align: center;
}

.blockImage_3k {
	width: 100%;
	margin:-2px;
}


.projects_3k img {
	opacity: 1;
	-webkit-filter: none;
	filter: none;

}

.projects_3k img:hover {
	
    opacity: 0.6;
    transition: all 500ms;
    -webkit-transition: all 500ms;
/*

	-webkit-filter: grayscale(1);
	filter: grayscale(1);
*/
}


/************************************************************************
Caroussel
************************************************************************/

.enter {
    position: fixed;
	bottom: 110px;
    width: 110px;
	left:0;
	right:0;
	margin: 0 auto;
	z-index: 100;
}



.crossfade > figure {
  animation: imageAnimation 15s linear infinite 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Safari */
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: -40px;
  opacity: 0;
  position: fixed;
  top: 0px;
  width: 100%;

}

.crossfade > figure:nth-child(1) {
  background-image: url('../images/img/001.jpg');
}
.crossfade > figure:nth-child(2) {
  animation-delay: 5s;
  background-image: url('../images/img/002.jpg');
}
.crossfade > figure:nth-child(3) {
  animation-delay: 10s;
  background-image: url('../images/img/003.jpg');
}


@keyframes imageAnimation {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
  }
  20% {
    animation-timing-function: ease-out;
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
 53% {
    opacity: 0;
  }
  100% {
    opacity: 0;
/*	  transform: scale(1.03);*/
  }
}




/************************************************************************
disclaimer
************************************************************************/

.disclaimer {
	padding-right:30%;
  color: #fff;
}

/************************************************************************
DESIGN
************************************************************************/

.blocks_design {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-flow: column wrap;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-flow: column wrap;
}

.projects_design {
	width: 100%;
	opacity: 1;
	float: left;
	text-align: center;
	margin: 0;
}

.projects_design img {
	opacity: 1;
	-webkit-filter: none;
	filter: none;

}

.projects_design img:hover {
	
    opacity: 0.6;
    transition: all 500ms;
    -webkit-transition: all 500ms;
/*

	-webkit-filter: grayscale(1);
	filter: grayscale(1);
*/
}


/*
.projects  img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.projects img:hover {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}
*/

.blockImage_design {
	width: 100%;
}

.projects_design .blockImage_design {
	margin: -2px;
}






/************************************************************************
MEDIAQUERY MOBILE 600px
************************************************************************/


@media only screen and (max-width: 600px) {
.enter {
    position: fixed;
	bottom: 92px;
    width: 110px;
	left:0;
	right:0;
	margin: 0 auto;
	z-index: 100;
}

	
	p {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  color: #fff;
  padding-top: 5px;
  padding-left:60px;
  padding-right:30px;
  font-weight: 300;
  font-style: normal;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.15em;
  text-decoration: none !important;
  text-align: left;
}
	
	
	.blocks_1k_contact {
		display: none;
	}

	
	.blocks_3k_contact {
		position: absolute;
		display: block;
		overflow: scroll;
	top: 80px;
	width: 100%;
/*	height: auto;*/
	background-color: #052219;

}

.projects_3k_contact {
	width: 100%;
		height: auto;

	
}

	
	
	
	.crossfade > figure {
    animation: imageAnimation 24s linear infinite 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Safari */
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: -40px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}
	
	
	.crossfade > figure:nth-child(1) {
  background-image: url('../images/img/001_mob.jpg');
}
.crossfade > figure:nth-child(2) {
  animation-delay: 8s;
  background-image: url('../images/img/002_mob.jpg');
}
.crossfade > figure:nth-child(3) {
  animation-delay: 16s;
  background-image: url('../images/img/003_mob.jpg');
}

	
	
	
	
	
	#myVideo {
	display:none;
	  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
	
#myVideo_staand {
	display:block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}



	.footer {
        position: fixed;
        left:0px;
        bottom: 0px;
        width: 100%;
        height: 75px;
        background-color:#052219;
	z-index: 100;
}
	.tokyo{
	width:95%;
}
	
.overall {
  margin: 0;
  padding: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #052219;
	height: 100%;
}
	
	
.overall_design {
	position: absolute;
  margin: 0;
  padding: 0;
	background-image: url("https://www.tokyo-amsterdam.nl/testen_DEF/images/design/design_beeld_staand_default.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #052219;
	height: 100%;
}
	
.overall_design a:hover {
	background-image: url("https://www.tokyo-amsterdam.nl/testen_DEF/images/design/design_beeld_staand_hover.jpg");
}
	
	
.brand {
  width: 70%;
  padding-top: 18px;
  padding-left: 10px;
  left:10px;
}	
	
.nav-mobile {
  display: block;
	z-index:2000;
}
 
  nav {
    width: 100%;
    padding-top: 80px;
	padding-left: 40px;	  
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
	padding-left: 7%;
	 
  }
  nav ul li ul li a {
    padding-left: 30%;
  }
 
	
.brand a img {
  max-height: 60px;
  margin-top: 5px;
}


}

@media screen and (min-width:768px) {
	

	
	.projects {
		width: 50%;
	}
	.blocks {
		-ms-flex-flow: row wrap;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-flow: row wrap;
		-ms-flex-pack: center;
		-webkit-box-pack: center;
		justify-content: center;
	}
	
	.projects_design {
		width: 100%;
	}
/*
	.blocks_design {
		-ms-flex-flow: row wrap;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-flow: row wrap;
		-ms-flex-pack: center;
		-webkit-box-pack: center;
		justify-content: center;
	}
*/
}




/************************************************************************
MEDIAQUERY TABLET
************************************************************************/


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


	
.brand {
  width: 70%;
  padding-top: 10px;
  padding-left: 10px;
  left:5px;
}	
	

.nav-mobile {
   display: block;
	z-index:2000;
}
 
 nav {
  width: 100%;
  padding-top: 80px;
  padding-left: 0px;
  padding-right:0px;
	 padding-bottom:5px;
 }
 nav ul {
  display: none;
 }
 nav ul li {
  float: none;
 }
 nav ul li a {
  padding-right: 0px;
	 padding-top:15px;
	 padding-bottom:15px;
  line-height: 20px;
  padding-left: 10%;
}
nav ul li ul li a {
  padding-left: 10%;
}
 
/*
.nav-dropdown {
  position: static;
}
*/
	
.brand a img {
  max-height: 60px;
  margin-top: 5px;
}
	
}




/************************************************************************
MEDIAQUERY DESKTOP
************************************************************************/


@media screen and (min-width: 1201px) {
.projects_3k {
	width: 33.333%;
	float: left;
	color: #000;
	text-align: center;	
}
	
.projects_3k_contact {
	width: 33.333%;
	float: left;
	color: #000;
	text-align: center;	
}
	
.blocks_3k {
	-ms-flex-flow: row wrap;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	flex-flow: row wrap;
	-ms-flex-pack: center;
	-webkit-box-pack: center;
	justify-content: center;
}
	
	
	
	
	
	.blocks_3k_contact {
	bottom: 70px;
	height: auto;
	background-color: #052219;
	opacity: 1;
	-ms-flex-flow: row wrap;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	flex-flow: row wrap;
	-ms-flex-pack: center;
	-webkit-box-pack: center;
	justify-content: center;
}

	
	.projects {
	width: 25%;
	float: left;
	text-align: left;
		margin: 0;
}
	
	.projects_design {
	width: 50%;
	float: left;
	text-align: left;
		margin: 0;
}
	
	
	
	
.blocks {
	-ms-flex-flow: row wrap;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	flex-flow: row wrap;
	-ms-flex-pack: center;
	-webkit-box-pack: center;
	justify-content: center;
	background-color: #052219;
}	
	


.brand {
  position: absolute;
  padding-left: 5%;
  padding-top: 12px;
  padding-bottom: 10px;
  padding-right:20px;
  width: 350px;
}
	
.nav-list {
  display: block !important;
	z-index:2000;
}
	
}

#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #ffffff;
  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}
 
article {
  width: 100%;
  margin: 0 auto;
  padding: 10px;
}