::-moz-selection { /* Code for Firefox */
  color: black;
  background: rgb(0,168,89);
}

.animation
{
	-webkit-transition: all 1s ease-in-out;
    -moz-transition:    all 1s ease-in-out;
    -o-transition:      all 1s ease-in-out;
    -ms-transition:     all 1s ease-in-out;
    transition:         all 1s ease-in-out;
}

.animation_fast
{
	-webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out;
}


::selection {
  color: black;
  background: rgb(0,168,89);
}

  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, .footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  	margin: 0;
  	padding: 0;
  	border: 0;
  	font-size: 100%;
  	font: inherit;
  	vertical-align: baseline;
  }

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

.cover_main_page
{
  width:100%; 
  height:auto;
}

@keyframes showmeup {
  0% {opacity: 0;visibility: hidden;}
  1% {opacity: 0;visibility: visible;}
  100% {opacity: 1;visibility: visible;}
}



@keyframes showmeupopacity {
  0% {opacity: 0}
  1% {opacity: 0}
  100% {opacity: 1}
}





@keyframes opacitydown {
  0% {opacity: 1}
  1% {opacity: 1}
  100% {opacity: 0.15}
}


@keyframes opacityup {
  0% {opacity: 0.15}
  1% {opacity: 0.15}
  100% {opacity: 1}
}


@keyframes mouse2 {
  0% {margin-top:-50px}
  50% {margin-top:0px}
  100% {margin-top:-50px}
}

@keyframes mouse {
  0% {margin-top:50px}
  50% {margin-top:100px}
  100% {margin-top:50px}
}

.section_description h2
{
  font-size: 30px;
}

.mouse
{
position: relative;
width: 40px;
height:150px;
margin-top:50px;
animation-name: mouse;
animation-duration: 2s;
animation-iteration-count: infinite;
}

.mouse_black
{
  top:0;
  left:0;
  opacity:1;
  width:100%;
  height:auto;
  position:absolute;
  z-index:999999;
}

.mouse_green
{
  top:0;
  left:0;
  opacity:0;
  width:100%;
  height:auto;
  position:absolute;
  z-index:999998;
}

.mouse:hover
{
  cursor:pointer;
}





.postcontent iframe {
  display:block;
	width:100vw;
	height: calc(100vw * 0.5625);
  animation-name: showmeupopacity;
  animation-duration: 3s;
}

body {
margin:0px;
color: rgb(230,230,230);
-webkit-text-size-adjust: none;
font-family: 'Lato', sans-serif;
background-color: black;
}

body.is-loading *, body.is-loading *:before, body.is-loading *:after {
    -moz-animation: none !important;
    -webkit-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
}

a {color: rgb(230,230,230);
text-decoration:none;
opacity:1}

/* GENREAL SETTINGSS */

.logotypehead_link
{
  display:block;
  float:left;
  margin-left: 10px;
	margin-top: 14px;
	width:38px;
	height:23px;

}
.logotypehead
{
  height:100%;
	width:100%;
	border-radius:4px;
	border:1px solid;
  border-width: 5px;
	border-color: rgb(222,222,222);
	background-color: rgba(0,0,0,0);
}
.logotypehead:hover
{
	border-color: rgb(0,168,89);
	-webkit-box-shadow:
	0px 0px 20px -4px rgb(0,168,89),
	inset 0 0 5px rgb(0,168,89);
-moz-box-shadow:
	0px 0px 20px -4px rgb(0,168,89),
	inset 0 0 5px rgb(0,168,89);
-o-box-shadow:
	0px 0px 20px -4px rgb(0,168,89),
	inset 0 0 5px rgb(0,168,89);
box-shadow:
	0px 0px 20px -4px rgb(0,168,89),
	inset 0 0 5px rgb(0,168,89);
}

p, h1, h2, h3, p, a{letter-spacing: 0.06em; text-transform:uppercase; color:rgba(230,230,230); }


.mainmenu
{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
	align-items:center;
	justify-content:space-evenly;
  float:left;
  width:100%;
  height:auto;
  padding-top:12px;
  padding-bottom:12px;

  background-color: rgb(15,15,15);
}

.category_font
{
  padding-top:10px;
  padding-bottom:10px;
  font-size: 10px;
  display:inline;
  color: rgb(200,200,200);
  cursor: default;
}
.choosen
{
  color: rgb(0,168,89);
  text-shadow: 0px 0px 10px rgb(0,168,89);
}

.category:hover
{
  color: rgb(0,168,89);
  text-shadow: 0px 0px 10px rgb(0,168,89);
  cursor: pointer;
}

/* BANNER */
.banner {


    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    cursor: default;
    height: 100vh;
    overflow: hidden;
    position: relative;
    text-align: center;
}


.introduction{
padding: 30px 0 20px 0;
background-color:rgba(0,0,0,0.9);
margin-right: calc(50% - 400px);
margin-left: calc(50% - 400px);
margin-top:260px;
width:800px;
}

.banner-content h1
{
    font-size:4vw;
    line-height:200px;
    padding-left:120px;
    padding-right:120px;
    background-color:rgb(10,10,10);
    animation-name: mouse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.banner-content p
{
    font-size:1vw; 
    line-height:50px; 
    background-color:rgb(10,10,10); 
    padding:4px 30px 4px 30px; 
    margin-top:15px;
}

#portfolio_button:hover
{
  cursor:pointer;
}

#blog_button:hover
{
  cursor:pointer;
}

#order_button:hover
{
  cursor:pointer;
}

.blogpost_content
{
	position:absolute;
	z-index:100000;
	top:0;
	left:0;
	width:100%;
	height:auto;
	opacity:0;
	animation-duration: 2s;
	animation-fill-mode:both;
}

.post
{
	position:relative;
	display:flex;
	flex-direction: row;
	align-items:center;
	justify-content:center;
	height: max-content;
	float:left;
	background-color:rgb(8,8,8);
	text-transform: uppercase;
	font-size: 11px;
	margin-left: 3vw;
	margin-right: 3vw;
	margin-top:3vw;
    margin-bottom:1vw;
}

.post_content
{
	position:absolute;
	z-index:1000;
	top:0;
	left:0;
	width:100%;
	height:auto;
	opacity:0;
	animation-duration: 2s;
	animation-fill-mode:both;
}

.loading
{
	position:relative;
	width:50px;
	height:50px;
	-webkit-animation:spin 4s linear infinite;
	-moz-animation:spin 4s linear infinite;
	animation:spin 4s linear infinite;
}

@-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);
	}
}

.loading_dot
{
	position:absolute;
	z-index:700;
	width:40%;
	height:40%;
	border-radius: 50%;
	background-color: rgb(220,220,220);
}

.dot_one
{
	top:4%;
	left:30%;
}

.dot_two
{
	bottom:4%;
	left:0;
}

.dot_three
{
	bottom:4%;
	right:0;
}

/* BANNER END */



/* BLACKBLOCK */

#section2
{
	width:100vw;
	height:auto;
	display:flex;
	flex-direction: row;
	align-items:center;
	justify-content:center;

	background-color:black;
}


.footer
{
  width:100vw;
	height: 60px;
	background-color: rgb(12,12,12);
	display: flex;
	flex-direction: row;
	align-items:center;
	justify-content:center;
}
.column2
{
  width:100vw;
	height: fit-content;
	background-color: rgb(12,12,12);
	display: flex;
	flex-direction: row;
	align-items:center;
	justify-content:center;
}
.padding-top
{
  padding: 3vw 1.5vw 1.5vw 1.5vw;
}
.padding-bottom
{
  padding: 1.5vw 1.5vw 3vw 1.5vw;
}
.h3-margin
{
  margin-bottom: 10px;
}

.column
{
  text-align: center;
  width: 47vw;
  margin: 0 1.5vw 0 1.5vw;
}

.three_menu_btn
{
	font-size: 15px;
	text-transform: uppercase;
	width:33.33%;
	height:33.33vw;
	background-color: rgb(12,12,12);
	display: flex;
	flex-direction: column;
	align-items:center;
	justify-content:center;
}

.three_menu_btn p
{
	color: rgb(222,222,222);
}

.three_menu_btn:hover
{
	background-color: rgb(2,2,2);
}

.three_menu_btn:hover p
{
	color: rgb(0,168,89);
	text-shadow: 0px 0px 10px rgb(0,168,89);

}

.three_menu_btn:hover .point
{
	color: rgb(0,168,89);
	-webkit-box-shadow: 0px 0px 20px rgba(0,168,89,0.5);
	-moz-box-shadow: 0px 0px 20px rgba(0,168,89,0.5);
	-o-box-shadow: 0px 0px 20px rgba(0,168,89,0.5);
  -ms-box-shadow: 0px 0px 20px rgba(0,168,89,0.5);
	box-shadow: 0px 0px 20px rgba(0,168,89,0.5);
}

.points
{
	height:auto;
	width:auto;
	margin-bottom: 15px;
}

.point
{
	margin:5px;
	display:block;
	float:left;
	width:25px;
	height:25px;
	border-radius: 50%;
	color: rgb(222,222,222);
}

.menu ul li
{
	color: rgb(222,222,222);
}

.menu ul li:hover
{
	color: rgb(0,168,89);
	text-shadow: 0px 0px 10px rgb(0,168,89);
}



h3{margin-top:3px}

/* BLACKBLOCK END */




/* MAIN MENU */












	#page-wrapper {
		-moz-transition: opacity 0.5s ease;
		-webkit-transition: opacity 0.5s ease;
		-ms-transition: opacity 0.5s ease;
		transition: opacity 0.5s ease;
		background: transparent;
		content: '';
		display: block;
		float:left;
		position: static;
		height: auto;
		width: 100%;}


	#header {
		-moz-transition: background-color 0.2s ease;
		-webkit-transition: background-color 0.2s ease;
		-ms-transition: background-color 0.2s ease;
		transition: background-color 0.2s ease;
		background: rgba(0,0,0,0.9);
		height: 51px;
		left: 0;
		line-height: 3em;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 99990;
}





/* MENU */
#tohide{

animation-duration: 2s;animation-fill-mode:both;}


		#menu {

		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		-webkit-overflow-scrolling: touch;
		background: rgb(10,10,10);
		color: #ffffff;
		height: 100%;
		max-width: 80%;
		overflow-y: auto;
		padding: 3em 2em;
		position: fixed;
		right: 0;
		top: 0;
		width: 20em;
		z-index: 90002;
	}

		#menu ul {
			list-style: none;
			padding: 0;
		}

			#menu ul > li {
				border-top: solid 1px rgba(0, 0, 0, 0.125);
				margin: 10px 0 0px 0;
				padding: 20px 0 10px 0;
			}

				#menu ul > li:first-child {
					border-top: 0 !important;
					margin-top: 0 !important;
					padding-top: 0 !important;
				}

				#menu ul > li > a {
					border: 0;
					color: inherit;
					display: block;
					font-size: 0.6em;
					font-size:9px;
					letter-spacing: 0.225em;
					outline: 0;
					text-decoration: none;
					text-transform: uppercase;
				}

		.close {
			cursor: pointer;
			position:absolute;
			display: flex;
			flex-direction: column;
			align-items:center;
			justify-content:center;
			height: 51px;
			width: 51px;
			right: 0;
			top: 0;
			z-index: 99999;
		}


		.corner_menu_cross
		{
			width:35%;
			height:35%;
		}

		.corner_menu_cross line
		{
			stroke: rgb(222,222,222);
		}

		.close:hover .corner_menu_cross line
		{
			stroke: rgb(0,168,89);
		}

		.close:hover .corner_menu_cross
		{
			-webkit-filter: drop-shadow( 0px 0px 7px rgba(0,168,89,1));
		   filter: drop-shadow( 0px 0px 7px rgba(0,168,89,1));
		}

	.tohideinvisible{
		animation-name: opacitydown;
		display:block;
		float:left;
		position: relative;
		height: 100%;
		width: 100%;
	}

	.tohidevisible{
		animation-name: opacityup;
		display:block;
		float:left;
		position: relative;
		height: 100%;
		width: 100%;
	}

		body.is-menu-visible #page-wrapper:before {
			display: block;
		}


		.invisiblemenu {
			-moz-transform: translateX(20em);
			-webkit-transform: translateX(20em);
			-ms-transform: translateX(20em);
			transform: translateX(20em);
		}

	.visiblemenu {
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);

	}

	#header nav {
		height: inherit;
		width: 51px;
		line-height: inherit;
		position: absolute;
		right: 0;
		top: 0;
		}

		#header nav > ul {
			width:100%;
			height:100%;
			list-style: none;
			margin: 0;
			padding: 0;
			white-space: nowrap;
			}

		#header nav > ul > li {
			width:100%;
			height:100%;
			display: inline-block;
			padding: 0px;
			margin:0px;
			}

		#header nav > ul > li > a {
			width:100%;
			height:100%;
			border: 0;
			color: #fff;
			display: block;
			font-size: 0.7em;
			letter-spacing: 0.225em;
			padding: 0 1.5em;
			text-decoration: none;
			text-transform: uppercase;
			}

		#header nav > ul > li > a.menuToggle {
			outline: 0;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items:center;
			justify-content:center;
			}

		.corner_menu_line
		{
			stroke: rgb(222,222,222);
		}

		#header nav > ul > li > a.menuToggle:hover .corner_menu .corner_menu_line
		{
			stroke: rgb(0,168,89);

			-webkit-filter: drop-shadow( 0px 0px 7px rgba(0,168,89,1));
		   filter: drop-shadow( 0px 0px 7px rgba(0,168,89,1));
		}

		#header nav > ul > li > a.menuToggle:hover .corner_menu
		{
			-webkit-filter: drop-shadow( 0px 0px 7px rgba(0,168,89,1));
		   filter: drop-shadow( 0px 0px 7px rgba(0,168,89,1));
		}

		#header.alt {background: transparent;}

		#header.alt img{
			-moz-pointer-events: none;
			-webkit-pointer-events: none;
			-ms-pointer-events: none;
			pointer-events: none;
			opacity: 0;
			}

		/* Chrome, Safari, Opera */
		@-webkit-keyframes example {
  		  0%   {top:0px;}
  		  50%  {top:30px;}
 		  100% {top:0px;}
		  }

		/* Standard syntax */
		@keyframes example {
   		  0%   {top:0px;}
    		  50%  {top:30px;}
  		  100% {top:0px;}
		  }

		/* Chrome, Safari, Opera */
		@-webkit-keyframes example2 {
	          0%   {left:0px;}
   		  50%  {left:30px;}
     		  100% {left:0px;}
		  }

		/* Standard syntax */
		@keyframes example2 {
   		 0%   {left:0px;}
   		 50%  {left:30px;}
   		 100% {left:0px;}
    		 }

.service_description
{
  height:auto;
  width: calc(100% - 40px);
  margin-bottom: 50px !important;
}


.ourworks
{
  display:block;
  float:left;
  width:100%;
  height:min-content;
  background-color: rgb(12,12,12);
}

.item3
{
 width:29.3%;
 margin: 10px 2% 30px 2%; 
 height: auto;
 display: block;
 float:left; 

 text-align: center;
}

.image_block
{
  position:relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width:100%;
  aspect-ratio: 1 / 1;
}



.subimage3
{
  position:absolute;
  top:0;
  left:0;
  z-index:900;
  width:100%;
  height:auto;
  opacity:0;
  animation-duration: 2s;
  animation-fill-mode:both;
}

.subp3
{
  display:block;
  margin-top:30px;
  font-size: 14px;
  line-height: 18px;
  text-transform: capitalize;
}

.item2
{
 width:96%;
 margin: 20px 2% 30px 2%; 
 height: auto;
 display:flex;
 flex-direction: row;
 align-items:center;
 justify-content: flex-start;
 text-align:left;
}

.image_block_2
{
  width:300px;
  height:300px; 
  position:relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  float:left;
}
.subimage2
{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:900;
  opacity:0;
  animation-duration: 2s;
  animation-fill-mode:both;

}

.subp2
{

  width: calc(100% - 330px);
  margin-left:30px;
  font-size: 14px;
  line-height: 18px;
  text-transform: capitalize;
}

.portfolio
{
position:static;
display: block;
float: left;
background-color: rgb(12,12,12);
width: 100vw;
height:auto;
padding-right:0vw;
padding-bottom:30px;
padding-top:0px;
}

.pagemenu {padding:0px; margin:0px;}
.pagemenu img{margin-top:calc(16.5vw - 72px); margin-right: calc(50% - 30px); margin-left: calc(50% - 44px); margin-bottom:20px;}
.pagemenu a{height: 33vw; opacity:0;animation-duration: 2s;animation-fill-mode:both; }
.menu-image-title{padding:0px !important;}
.menu-image-title-after {padding:0px !important;}
.pagemenu li{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
margin:0px;
width:33.333%;
height: 33vw;
text-align:center;
background-color:rgb(10,10,10);
float:left;
display:block;
}


.pagemenu li:hover {background-color: rgb(2,2,2);}


.banner-content
{
  position:relative;
  width:100%;
  height: calc(100% - 100px);
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
}

#bg {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}
#bg img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}











/*PREVIOUS - NEXT*/

.row img{width:100%;}



/* COURSE IN SCHOOL END*/

/*PROJECT*/
.for_next_previous {padding:0; width:100%; height:auto; display:block; float:left; position: relative; }


.greybg{background-color:rgb(12,12,12)}
.project {padding:0px 20px 46px 20px; width:100%; height:auto; display:block; float:left; position: relative;
visibility: hidden;animation-duration: 2s;animation-fill-mode:both;}
.project h1{padding-top:5px; font-size:24px;}
.project h2{font-size: 15px; padding-top:50px;}

.project h3{padding-top:40px;}


.project p{line-height:20px; font-size:9px;margin-top:10px;}
.project black{padding-top:50px;}
.project h4{margin-top:50px; margin-bottom:20px;
}


#share-buttons img {
width: 30px;
padding: 0px 10px 10px 0px;
border: 0;
box-shadow: none;
display: inline;
}

#share-buttons a {text-decoration: none; float:left;}
.projectimg{margin-top:58px}

.imgprojectdesign{width:50%;float:left;}
.imgprojectdesign2{width:25%;float:left;}




/*PROJECT END*/





.bottom{
width:100%;
height: 100vh;
position:static;
display: flex;
float: left;
flex-direction: column;
align-items:center;
justify-content:center;

background-color: rgb(0,0,0);
text-align:center; font-size:8px;
}


.beforeposts
{ 
  position:relative; 
  display: block; 
  float:left; 
  background-color:rgb(0,0,0);  
  text-transform: uppercase; 
  font-size: 11px; 
  width: 33%; 
  height: 39vw; 
  text-align:center; 
  padding-top: 16vw; 
}

.cover
{
  position:relative;
  display:block;
  float:left;
  width:100%;
  height:auto;
}

.spinner
{
  position:absolute;
  top: calc(50% - 35px);
  left: calc(50% - 35px);
  z-index:100;

}

.description
{
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content: flex-start;
  width: 100%;
  float:left;
  height:50px;
  background-color: rgb(0,0,0);
  color: rgb(220,220,220);
}

 .menuportfolio { float:left;  display:block; position:absolute;padding-top:20px; padding-bottom:30px; top: calc(100vh - 50px); width:100%; height:30px; background-color:rgb(230,230,230); z-index:10; }

.post img{width:100%; height:auto; float:left; padding:0px;margin:0px;}
.blackcover{

	position:absolute; z-index:100; width: 100%; height:100%; background-color: rgba(0,0,0,0.15)}
	.blackcover2{

	position:absolute; width:100%; height:100%; background-color: rgba(0,0,0,0.5)}

.post a:hover .blackcover{background-color: rgba(0,0,0,0)}

.post a:hover .description{color: rgb(260,260,260);}

.post a:hover .description h3
{
	color: rgb(0,168,89);
	text-shadow: 0px 0px 10px rgb(0,168,89);

}

.description h3
{
  margin: 0 0 0 20px;
}


.post a img{
margin-top:0vw;
 -webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	}



a{
 -webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	}

    a{display: block; }


  .parallax {
  	position:relative;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-perspective: 1px;
    perspective: 1px;
  }

  .parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .parallax__layer--back2 {
    background-color:rgb(200,200,200);

  position:absolute;
  top:0;
  -webkit-transform: translateZ(-1px) scale(2);

  transform: translateZ(-1px) scale(2);
  }


  .parallax__layer--back {
  position:absolute;
  top:0;
  -webkit-transform: translateZ(-1px) scale(2);

  transform: translateZ(-1px) scale(2);
  }

  .parallax__layer {
    padding: 0 0;

  }

.banner {
background-color: rgba(0,0,0,0.6); width:100%; height:100%; display:flex; flex-direction: column;
align-items:center;
justify-content:center;
}

.socialmenu li { display: inline-block;}
.socialmenu li:first-child {margin-right: 10px; }


/* Navigation Menu - List items */
.nav-item {
  /* non-critical appearance styles */
  width: 200px;
  border-top: 1px solid #111;
  border-bottom: 1px solid #000;
}

.nav-item a {
  /* non-critical appearance styles */
  display: block;
  padding: 1em;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  color: white;
  font-size: 1.2em;
  text-decoration: none;
  transition: color 0.2s, background 0.5s;
}

.nav-item a:hover {
  color: rgb(10,10,10);
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
}

/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
  /* Critical position and size styles */
  min-height: 100%;
  min-width: 100%;
  background-color: white; /* Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;

  /* non-critical apperance styles */
  padding: 4em;
  background-image: linear-gradient(135deg, rgb(254,255,255) 0%,rgb(221,241,249) 35%,rgb(160,216,239) 100%);
  background-size: 200%;
}

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px; top: 15px;
  z-index: 2;

  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
  background-size: contain;
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: left 0.2s;
}

.nav-trigger:checked + label {
  left: 215px;
}

.nav-trigger:checked ~ .site-wrap {
  left: 200px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

body {
    /* Without this, the body has excess horizontal scroll when the menu is open */
  overflow-x: hidden;
}


code {
    padding: 2px;
    background: #ddd;
}

/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }

.postcontent
{
  display:block; 
  width:100%; 
  height: min-content; 
  padding-top:51px;
}

.postdescription
{
  display:block;
  float:left; 
  width:100vw;
}

.postcontent p
{
  display: block; 
  float:left; 
  font-size:16px; 
  line-height: 1.5em; 
  text-transform: none;
  margin:20px 20px 0px 20px; 
}

.postcontent h1
{
  display:inline; 
  margin-top: 60px;
  margin-left:20px;
  float:left; 
  font-size: 40px;
}

.postcontent .horizontal
{
  width:100vw; 
  height:auto;
}

.postcontent .vertical
{
  width:auto; 
  max-width: 100vw; 
  height:auto;
}

.postcontent img{
visibility: hidden;animation-duration: 2s;animation-fill-mode:both;
}

.postcontent .leftside {width: 30vw; min-width:350px; float:left; display: block;}
.postcontent .rightside {float:left; display: block;padding-top: 70px}
.bottom img{-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease; }
.bottom img:hover {opacity: 0.85}


.loading_text
{
  font-size:15px;
  margin: 50px 0px 30px calc(50% - 50px);
}
.navigation{width:100%; height:10vw;text-transform: uppercase; font-size:10px; }
.top_p {font-size:15px; position: absolute; z-index:100; background-color: black; top:10px; left: 10px; padding:10px 20px;}
.bottom_p {font-size:15px; position: absolute; z-index:100; background-color: black; top:45px; left: 10px; padding:10px 20px;}

.common img{ -webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease; opacity: 0.9}
.common:hover img{opacity: 1}

.previous{
position: relative;
text-align:center;  height:auto; width: 50vw; float:right; display:block;
visibility: hidden;animation-duration: 2s;animation-fill-mode:both;}
.next{
position: relative;
    text-align:center; width:50vw; height:auto; float:left; display:block;
	visibility: hidden;animation-duration: 2s;animation-fill-mode:both;}
.next:hover p
{
	color:rgb(0,168,89);
	text-shadow: 0px 0px 10px rgb(0,168,89);
}
.previous:hover p
{
	color:rgb(0,168,89);
	text-shadow: 0px 0px 10px rgb(0,168,89);
}



.showing
{
  animation-name: showmeup;
}

.previous2{float: left; display: block; width: 0px; background-color: rgb(0,0,0)}
.previous img{
top: 0px; left:0px;   height: auto; width: 100%;}

.next img{
top: 0px; left:0px; height: auto; width: 100%;}


.postwidth{width:94vw;}


@keyframes showup {
	0% {opacity: 0;visibility: hidden;}
	1% {opacity: 0;visibility: visible;}
	100% {opacity: 1;visibility: visible;}
}
@keyframes hideit {
  0% {opacity: 1;visibility: visible;}
  99% {opacity: 0;visibility: visible;}
  100% {opacity: 0;visibility: hidden;}
}

#back{opacity:0; animation-duration: 2s;animation-fill-mode:both;}

#background {animation-duration: 1s; animation-fill-mode: both; width:100vw;position:fixed;top:0;left:0;height:100vh; z-index:99999;  background-color:rgba(0,0,0,0.9); text-align:center;padding-top: calc(50vh - 14px);padding-left:90px;padding-right:90px; visibility: hidden;}
.backshow {animation-name: showup;}
.backhide {animation-name: hideit;}
.cross {

  position:fixed;
  top:30px;
  right:30px;
  z-index:99996;
  width:60px;
  height:60px;
  transform-origin: center;
  transform: rotate(45deg);
  transition: 0.3s linear;}
  .strip{position:absolute;background-color:rgb(220,220,220);}
  .stripone{z-index:999991; width:100%;height:8px; left:0px;top:26px;}
  .striptwo{z-index:999992; width:8px;height:100%; left:26px;top:0px;}
.cross:hover {cursor: pointer;transform: rotate(-45deg);}
.cross:hover .strip{background-color:rgb(0,168,89);
  -webkit-box-shadow: 0px 0px 20px rgba(0,168,89,0.5);
	-moz-box-shadow: 0px 0px 20px rgba(0,168,89,0.5);
	-o-box-shadow: 0px 0px 20px rgba(0,168,89,0.5);
	box-shadow: 0px 0px 20px rgba(0,168,89,0.5);
}

.words {color:white;}
.invisible2{animation-name: fadetopmenu; animation-duration: 1s;animation-fill-mode: forwards;}


.myform{width:100%;}
.forms
{
  width:calc(50vw - 60px);
  height:50px;
  padding:10px;
  margin-bottom:10px;
  background-color:rgb(250,250,250);
  border:none;
  font-size: 14px;
  font-family: 'Lato', sans-serif;
  display:block;
  float:left;
}
.forms:focus{outline: none;}
.messageform:focus{outline: none;}
.messageform
{
  width:calc(50vw - 60px);
  height:200px;
  padding:10px;
  background-color:rgb(250,250,250);
  border:none;
  font-size: 14px;
  font-family: 'Lato', sans-serif;
  display:block;
  float:left;
}
.formbtn{
    cursor:pointer;
    width:100px;
    height:50px; 
    background-color:rgb(250,250,250);
    border:none;
    margin-top:7px; 
    -webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
}
.formbtn:hover{background-color:rgb(0,168,89);}
.output_message
{
  display:block;
  float:left;
  padding-left:20px;
  margin-top: 40px;
}


.part
{
  padding-left:20px;
  padding-right:20px;
  display:block;
  float:left;
  width:50%;
  height:auto;
}
.aboutus
{
  width:100%;
  display:block;
  float:left;
  height:auto;
  padding: 40px 20px 40px 20px;

}




.mailfooter
{
	color: rgb(222,222,222);
}

.mailfooter:hover
{
	color: rgb(0,168,89);
	text-shadow: 0px 0px 10px rgb(0,168,89);
}






.toppatch{position:static; display:block; float:left; width:100vw; height: 60px ; background-color:rgb(12,12,12);}

.eModal{
  position:relative;
	display:flex;
	flex-direction: row;
	align-items:center;
	justify-content:center;

  float:left;
  height:10vw;
  width:70vw;
  padding:0px;
  margin-left:15%;
  margin-right:15%;
  margin-bottom:30px;
  background-color:rgb(3,3,3);
  transition: 0.1s linear;
}
.eModal:hover {background-color:rgb(5,5,5);}
.eModal:hover .blog_number {color: rgb(0,168,89); text-shadow: 0px 0px 10px rgb(0,168,89);}
.eModal:hover .blogcover img{opacity:1}
.eModal:hover .blogdescription h1{color: rgb(0,168,89); text-shadow: 0px 0px 10px rgb(0,168,89);}
.eModal:hover .pdescription{color: rgb(0,168,89); text-shadow: 0px 0px 10px rgb(0,168,89);}
.eModal:hover .p2description{color: rgb(0,168,89); text-shadow: 0px 0px 10px rgb(0,168,89);}
.eModal:hover .p3description{color: rgb(0,168,89); text-shadow: 0px 0px 10px rgb(0,168,89);}
.blogcover {position:relative; display:block; float:left; height:fit-content; width:fit-content;}
.blog_number {position:absolute; z-index: 1000; top:10px;left:10px; background-color:rgb(3,3,3); color:rgb(222,222,222);font-size: 35px;padding:15px 15px 15px 20px;border-radius:30px;}
.blogcover img{ opacity:0.85;transition: 0.1s linear; width:20vw; height:10vw; float:left; display:block;}
.blogdescription{padding-left:15px;padding-top:15px;float:left;display:block; height: calc(10vw - 15px); width: calc(49vw - 15px); text-align:left; position:relative;}
.h1description {font-size: 20px; margin-bottom:15px;}
.pdescription {font-size: 10px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;}
.p2description {font-size: 10px; position:absolute; left:30px; bottom:0px;}
.p3description {font-size: 10px; position:absolute; right:0; bottom:0px;}

.single_blog_main_block{position:relative;width:100vw;height:fit-content;}
.postcontent ul
{
  margin-left:40px;
  margin-top:30px;
  line-height: 1.5em;
  font-size:16px;
}
.single_blog_main_img {width:100%;}
.single_blog_title {position:absolute; z-index:500; background-color: rgb(3,3,3); padding:14px; left:50px;top:50px;margin:0px !important;}
.single_blog_title2{font-size:30px; margin-bottom:10px; margin-top:35px; margin-left:20px; width: calc(100% - 40px); height:auto;}
.single_blog_title3{font-size:30px; margin-bottom:10px; margin-top:35px; margin-left:3vw; width: calc(100% - 40px); height:auto;}

.right-menu-link:hover
{
  color: rgb(0,168,89);
}



.services
{
  display:block;
  width:100vw;
  height:159vw;
  background-color: rgb(0,0,0);
  padding: 0 1vw 0 1vw;
}
.service
{
  position:relative;

  width:45vw;
  height:22.5vw;
  margin: 2vw 2.0vw 2vw 2.0vw;
  display:flex;
  float:left;
  flex-direction: column;
  align-items:center;
  justify-content:center;
}
.service_link
{
  position:absolute;
  z-index:100000;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  animation-duration: 2s;
  animation-fill-mode:both;
}
.service_img
{
  width:100%;
  height:100%;
  opacity:0.7;
}

.upper_layer
{
  position:absolute;
  z-index:9999;
  width:100%;
  height:100%;
  display:block;
}
.designeling_logo
{
  width:50vw;
  height:auto;
}
.black_plane_0
{
  width:70vw;
  height:auto;


  background-color:rgba(0,0,0,0.7);
  padding:40px 20px 40px 20px;
}
.black_plane_1
{
  background-color:rgba(0,0,0,0.7);
  padding:20px 40px 20px 40px;
  text-align: center;
  -webkit-backdrop-filter: blur(1em);
     backdrop-filter: blur(1em);
}
.black_plane_1 h3
{
  font-size:25px;
  font-weight: bold;
}
.transparent_box
{
  position:absolute;
  z-index:1000;
  top:0;
  left:0;
  width:100%;
  height:60%;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
}
.black_plane_2
{
  position:absolute;
  z-index:1000;
  bottom:0;
  left:0;
  width:100%;
  height:40%;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  padding:10px;

  background-color:rgba(0,0,0,0.7);
  text-align: center;
  -webkit-backdrop-filter: blur(1em);
     backdrop-filter: blur(1em);
}
.black_plane_2 p
{
  font-size:10px;
  line-height: 18px;
}

.white_arrow
{
  width:50px;
  height:auto;
  opacity:0.9;
}

.section_description
{
height:50vh;
text-align:center;
width:100vw;
display: flex;
flex-direction: column;
align-items:center;
justify-content:center;
background-color: black;
}

.section_description p
{
  padding: 10px 0 15px 0;
  font-size: 12px;
}

.service_link:hover .service_img
{
  opacity:0.9;
}
.service_link:hover .black_plane_1 h3
{
  color:rgb(0,168,89);
  text-shadow: 0px 0px 10px rgb(0,168,89);
}
.service_link:hover .black_plane_2 p
{
  color:rgb(0,168,89);
  text-shadow: 0px 0px 10px rgb(0,168,89);
}

.arrow-down
{
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;

  border-top: 20px solid rgb(220,220,220);
}

.arrow-down:hover
{
  cursor: pointer;
  border-top: 20px solid rgb(0,168,89);
}
.for_botton
{
  margin-top:50px;
  margin-bottom:15px;
  display:block;
  float:left;
  width:100%;
  height:100px;
}
.make_an_order_link
{
  display:block;
  float:left;
  width:auto;
  height:auto;
  padding: 0px 60px 0px 60px;
  font-size: 16px;
  background-color:rgb(0,168,89);
  color: black;
  border-width: 20px;
  border-color: black;
  border-radius: 25px;
  border-style:solid;
  border-color: rgb(0,168,89);

}
.make_an_order_link:hover
{
  background-color:rgba(0,168,89,0.2);
  color: rgb(0,168,89);
  border-color: rgb(0,168,89);
  padding: 16px 76px 16px 76px;
  border-width: 4px;
  cursor:pointer;
}

.question
{
  display:block;
  float:left;
  font-size:25px;
  margin-bottom:20px;
  line-height: 30px;
  width:100%;
  height:auto;
}
.answer
{

  display:block;
  float:left;
  color: rgb(200,200,200);
  line-height: 15px;
  font-size:15px;
  margin-bottom:60px;
  text-transform: none;
  width:100%;
  height:auto;
}
.share_icon
{
  display:block;
  float:left;
  margin-left:15px;
  width:auto;
  height:50px;
  color: rgb(0,168,89);
  opacity:0.8;

}
.share_icon:hover
{
  cursor:pointer;
  opacity:1;
}

.arrow_link
{
  position:relative;
  display:block;
  float:left;
  margin-top:11px;
  margin-right:5px;
  margin-left:10px;
  height:29px;
  width:20px;
}


.arrow_common
{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:auto;
}
.arrow_white
{
  z-index:9999999;
}
.arrow_green
{
  z-index:9999998;
}

.spinner_Wezc
{
  color: white;
  transform-origin:center;
  animation:spinner_Oiah .75s step-end infinite;
}
@keyframes spinner_Oiah
{
  8.3%{transform:rotate(30deg)}
  16.6%{transform:rotate(60deg)}
  25%{transform:rotate(90deg)}
  33.3%{transform:rotate(120deg)}
  41.6%{transform:rotate(150deg)}
  50%{transform:rotate(180deg)}
  58.3%{transform:rotate(210deg)}
  66.6%{transform:rotate(240deg)}
  75%{transform:rotate(270deg)}
  83.3%{transform:rotate(300deg)}
  91.6%{transform:rotate(330deg)}
  100%{transform:rotate(360deg)}
}


@media only screen and (min-width: 2700px)
{
  .services
  {
    height:39.75vw;
  }
  .service
  {
  
    width:22.5vw;
    height:11.25vw; 
    margin: 1vw 1vw 1vw 1vw; 
  }

  .post
  {
    margin-left: 1vw;
    margin-right: 1vw;
    margin-top:1vw;
    margin-bottom:0;
  }
}

@media only screen and (max-width: 1920px)
{
	.eModal{width:90%;margin-left:5%;margin-right:5%;}
	.blogdescription{width: calc(69vw - 15px);}

}


@media only screen and (max-width: 1500px)
{
	.eModal{width:70%;height: 50vw;margin-left:15%;margin-right:15%;}
	.blogcover img{ width:70vw; height:35vw; float:left; display:block;}
	.blogdescription{width: calc(100% - 30px);height: calc(15vw - 15px);}

}

@media only screen and (max-width: 1400px)
{
	#menu ul li a {font-size: 16px;}



	.eModal
  {
    height: 55vw;
  }
	.blogdescription
  {
    height: calc(20vw - 15px);
  }

}

@media only screen and (max-width: 1366px)
{
  .transparent_box
  {
    height:50%;
  }
  .black_plane_2
  {
    height:50%;
  }
}

@media only screen and (max-width: 1300px)
{
.part{width:100%;}
.messageform{width: 50%; margin-right:50%;}
.forms{width: 50%;margin-right:50%;}
}

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

  
  .banner-content h1
  {
      font-size:3vw;
      line-height:100px;
      padding-left:60px;
      padding-right:60px;
  }
  .banner-content p
  {
    font-size:min(1.85vw, 15px);
    line-height:6vw; 
    padding:4px 3vw 4px 3vw; 
  }
  .transparent_box
  {
    height:60%;
  }

  .black_plane_2
  {
    height:40%;
  }

  .services
  {
    height:612vw;
    padding: 0;
  }
  .service
  {
    position:relative;
    width:96vw;
    height:47vw;
  }
}


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

  .postcontent h1
  {
    font-size: 20px;
  }

  .top_p 
  {
    font-size:10px; 
    padding:5px 10px;
  }

  .bottom_p 
  {
    font-size:10px;
    padding:5px 10px;
    top:37px;
  }


  .three_menu_btn
  {
    font-size: 10px;
  }

  .point
  {
    margin:3px;
    width:17px;
    height:17px;
  }
  .messageform
  {
    width: 100%; 
  }

  .forms{
    width: 100%;
  }



  .section_description p
  {
    padding: 5px 0 15px 0;
  }

  .make_an_order_link
  {
    font-weight: bold;
  }

  .postcontent ul
  {
    line-height: 40px;
    font-size:26px;
  }
  
  .banner-content h1
  {
      font-size:3vw;
      line-height:100px;
      padding-left:60px;
      padding-right:60px;
  }

  .mouse
  {
    width: 30px;
    height:107px;
  }

  @keyframes mouse {
    0% {margin-top:50px}
    50% {margin-top:65px}
    100% {margin-top:50px}
  }

  .postcontent
  {
    padding-top:74px;
  }

  .black_plane_1
  {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding:7px 14px 7px 14px;
  }

.black_plane_1 h3
{
  font-size:20px;
}

  .transparent_box
  {
    height:50%;
  }

  .black_plane_2
  {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    height:50%;
  }

  .black_plane_2 p 
  {
    font-size: 12px;
    line-height: 13px;
  }

  #menu ul li a 
  {
    font-size: 19px;
  }

	.eModal 
  {
    width:100%;
    height: 90vw;
    margin-left:0;
    margin-right:0;
  }

	.blogcover img
  { 
    width:100vw; 
    height:50vw; 
    float:left; 
    display:block;
  }

	.blogdescription
  {
    width: calc(100% - 30px);
    height: calc(40vw - 15px);
  }

  .mainmenu
  {
    padding-left:10px;
    padding-right:10px;
  }

  .category_font
  {
    padding-left:10px;
    padding-right:10px;
  }

	.postwidth
  {
    width:94vw !important
  }

	#section3
  {
    padding-left: calc(50vw - 200px);
    padding-right: calc(50vw - 200px);
	}

	.banner-content p
  {
    font-size:min(1.85vw, 15px);
    line-height:6vw; 
    padding:4px 3vw 4px 3vw; 
  }

	h2
  {
    font-size:20px;
    margin-bottom:10px;
  }

	.project h2 
  {
    font-size:20px;
  }


	.bottom a
  {
    font-size:15px
  }

  .subscription 
  {
    margin-top: 60px; 
    margin-left:5vw; 
    width:90vw
  }

  .imgprojectdesign
  {
    width:100%;
    float:left;
  }
  
  .beforeposts
  {
    display:none; 
  }
  
  .pagemenu img
  {
    height: 60px; 
    width: auto;
    margin-top: calc(16.5vw - 50px); 
    margin-right: calc(50% - 30px); 
    margin-left: calc(50% - 30px); 
    margin-bottom:20px;
  }
  
  .description
  {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  
  .item2
  {
    width:96%;
    margin: 20px 2% 40px 2%; 
    height: auto;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content: flex-start;
    text-align:center;
  }

.subimage2
{
  width:100%;
  height:auto; 
  margin-bottom:15px;
}

.subp2
{
  font-size: 16px;
  line-height: 1.5em; 

}

.item3
{
 width:96%;
 margin: 20px 2% 40px 2%; 
 height: auto;
}

.image_block
{
  float: left;
  margin-bottom:15px;
}


.subp3
{
  font-size: 16px;
  line-height: 1.5em; 

}

}

 
@media only screen and (max-width: 840px){
  .transparent_box
  {
    height:40%;
  }
  .black_plane_2
  {
    height:60%;
  }
}  
@media only screen and (max-width: 750px){
	.eModal{height: 130vw;width:100%; }
	.blogdescription{height: calc(80vw - 15px);width: calc(100vw - 30px);margin:0px;}

}