body{
	--main-bg-color: #131515;
	--not-main-bg-color: #2B2C28;
	--fisrt-color:#339989;
	--second-color:#7DE2D1;
	--third-color:#FFFAFB;
	--light--grey:#687a89;
	color:var(--second-color);
	font-family: 'Fira Sans', 'Montserrat', sans-serif;
}
#main_wrapper_front{
	display:grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-rows: 2fr 6fr 1fr;
	grid-template-areas:
      "header article aside2"
      "header aside1 aside2"
      "footer footer footer";
    width: 100vw;
    height: 100vh; 
    overflow-x: hidden; 
}
#main_wrapper_project{
	display:grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-rows: 6fr 1fr 1fr;
	grid-template-areas:
      "header article article"
      "header article article"
      "footer footer footer";
    width: 100vw;
    height: 100vh; 
    overflow-x: hidden; 
}
#main_wrapper_project aside#first, #main_wrapper_project aside#second{
	display:none;
}
a{
	color:var(--second-color) !important;
}
header{
	background: var(--main-bg-color);
	grid-area: header;
	padding-top: 30px
}

header #main-navigation{
	width:100%;
}
header .logo{
	max-width: 50%;
  	height: auto;
  	margin: 0 auto;
  	margin-left: 0;
  	margin-bottom:20px;
}

header .logo img{
	max-width: 100%;
  	height: auto;
}
header a{
	
	font-size:22px;
}
nav{
	font-family: 'Oswald', sans-serif;
}
article{
	background: var(--not-main-bg-color);
	grid-area: article;
	
	color:#fff;
	position: relative;
	font-size: 0.9vw;
}
article#front, article#flatpage{
	padding:10%;
}
article h1{
	font-family: 'Oswald', sans-serif;	
	border-bottom: 3px solid;
    border-right: 3px solid;
    margin-bottom: 0px;
    position: relative;
    min-width:100%;
    font-size: 1.7em;
    padding-right:25%;
    padding-bottom: 10px;
}
article h1>.colorite{
	color:var(--second-color);
}
article#front .lnr{
	font-size:24px;
	border:3px solid;
	border-radius:100px;
	padding:15px;
	background-color: var(--not-main-bg-color);
	display: block;
    position: absolute;
    top:2px;
}

article#front .lnr:nth-child(odd){
	left:-35px;
	
}
article#front .lnr:nth-child(even){
	right:-35px;
	
}

article div.front-article-div{
	position: relative;
	border-bottom: 3px solid;
	padding:20px 0px 20px 80px;
	width:80%;
}	
article>div.front-article-div:nth-child(even){
	border-left: 3px solid;
}

article>div.front-article-div:nth-child(odd){
	border-right: 3px solid;
	text-align: right;
	padding-right: 80px;
}
article>h1>span.lnr-rocket{
	top:-85px;
	right:-75px !important;
	font-size:4vw;
	padding:30px;
}

aside#first{
	background: var(--not-main-bg-color);
	grid-area: aside1;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
aside#first>div{
	display:flex;
    flex-wrap: wrap;  /* NEW */
    width:100%;
}
aside#first>div#firstline>div{
	height:250px;
	overflow-y: hidden;
	width:25%;
	overflow: unset;
}
aside#first>div#secondline>div{
	
	overflow-y: hidden;
	width:33.33%;
	display: flex;
	align-self:flex-end;
	overflow: unset;
}
aside#first div#firstline img{
	width:auto;

}
aside#first div#secondline {
	position:relative;
}
aside#first div#secondline img{
	width:100%;
	align-self: flex-end;
}
aside#first div#secondline>div{
	position:relative;
}
aside#first div#secondline>div>div{
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.64);
	color:#fff;
	text-align:center;
	font-family: 'Oswald', sans-serif;
	font-size:22px;
	padding-top:30%;
}
aside#first div#secondline>div>div>div{
	font-size:12px;
}
aside#second{
	background:var(--third-color);
	grid-area: aside2;
	padding:15%;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: unset;
}
aside#second h3{
	text-transform: uppercase;
	font-size: 38pt;
	padding:10px 0 30px 0;
} 
aside#second h3 a{
	color:var(--second-color);
}
aside#second h4{
	color:var(--not-main-bg-color);
	font-size: 19pt;
}
aside#second div{
	color:#687a89;
	font-size: 10pt;
}
aside#second div .float-left, aside#second div .float-right{
	padding-top: 10px;
	font-family: 'Oswald', sans-serif;
	

}
aside#second div .float-right{
	text-transform: uppercase;
	color:var(--second-color);
	font-weight: 900;
}
aside#second .node{
	padding-bottom:60px	;
}
.modal-body img{
	width:100%;
}
footer{
	background:  var(--main-bg-color);
	grid-area: footer;	
}

article>div.project_article_header{
	position: absolute;
	width:100%;
	top:-25%;
	font-size:20vw;
	font-weight:100;
	color: var(--second-color) !important;
	font-family: 'Oswald', sans-serif;
	z-index: 111;
}
article>div.projects-article-div{
	flex-grow: 1;

	
	background-size: cover;
	position: relative;
	padding: 0!important;
	    display: flex;
    align-items: center;
    overflow: hidden;
    cursor:pointer;
}
article>div.projects-article-div>a>.blackshadow, .project-link>.blackshadow{
	position: absolute;
	width:100%;
	height:100%;
	background: rgba(0,0,0,0.77);

	top:0;

}
article>div.projects-article-div>a>.year-pr{
	position: relative;
	z-index:2;
	font-size:9vw;
	font-weight: 200;
	font-family: 'Oswald', sans-serif;
	margin-left: -8%;
	color: var(--second-color) !important;
}


.justModals, .loader{
	position: absolute;
	width:100%;
	height:100%;
	background: rgba(0,0,0,0.77);
	top:0;
	left:0;
	z-index:11;
	display: none;
}
.justModals>.close{
	color:white!important;
	font-size:22vh!important;
	position: absolute;
	top:2%;
	right:2%;
	z-index:1111;
}
.justModals>.content{
	 display: flex;
  align-items: flex-start;
  flex-wrap:wrap;
    overflow: scroll;
    height: inherit;
}
.project-link{
	position: relative;
	height:400px;
	width:25%;
	overflow:hidden;
	padding:1%;
	cursor:pointer;
	    margin-bottom: 5px;

}
.project-link>div{
	position: relative;
	z-index: 111;
	font-size:2vw;
	font-family: 'Oswald', sans-serif;
	left:1%;
	color: var(--second-color) !important;
}
.project-link>.imgProj{
	position: absolute;
	top:0;
	z-index:110;

}

.project-link>.blackshadow{
	z-index:110;
}
.project-link>div.exp, .project-link>div.customer{
	background: rgba(0,0,0,0.45);
}

.modal-lg {
    max-width: 1200px;
}

.modal-body>.service{
	width:20%;
	border:1px solid var(--not-main-bg-color);
	height: 300px;
	
}
.modal-body>.service>div{
	margin:3% 6%;
	color:var(--light--grey);
}
.modal-body>.service>div:first-child{
	background: var(--not-main-bg-color);
	margin: 0;
	padding:0 2%;
	height: 50px;
	color:white;
}








.loader>.animation{
	width:25%;
	margin:0 auto;
	position: relative;
	top:25%;
}
.filter {
  position: absolute;
  visibility: hidden;
}

.dots {
  filter: url(#gooeyness);
  padding: 30px;
}

.dot {
  background: white;
  border-radius: 50%;
  display: inline-block;
  margin-right: 20px;
  width: 32px;
  height: 32px;
}

.dot:first-child {
  animation: FirstDot 3s infinite;
}

.dot:nth-child(2) {
  animation: SecondDot 3s infinite;
}

.dot:nth-child(3) {
  animation: ThirdDot 3s infinite;
}

.dot:nth-child(4) {
  animation: FourthDot 3s infinite;
}

.dot:nth-child(5) {
  animation: FifthDot 3s infinite;
}

@keyframes FirstDot {
  0% {
    transform: scale(1) translateX(0);
  }
  25% {
    transform: scale(2.5) translateX(0);
  }
  50% {
    transform: scale(1) translateX(0);
  }
  83% {
    transform: scale(1) translateX(240px);
  }
  100% {
    transform: scale(1) translateX(0);
  }
}

@keyframes SecondDot {
  0% {
    transform: translateX(0px);
  }
  27% {
    transform: translateX(-40px);
  }
  50% {
    transform: translateX(0px);
  }
  81% {
    transform: translateX(180px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes ThirdDot {
  0% {
    transform: translateX(0px);
  }
  29% {
    transform: translateX(-100px);
  }
  50% {
    transform: translateX(0px);
  }
  79% {
    transform: translateX(120px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes FourthDot {
  0% {
    transform: translateX(0px);
  }
  31% {
    transform: translateX(-160px);
  }
  50% {
    transform: translateX(0px);
  }
  77% {
    transform: translateX(60px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes FifthDot {
  0% {
    transform: scale(1) translateX(0);
  }
  33% {
    transform: scale(1) translateX(-220px);
  }
  50% {
    transform: scale(1) translateX(0);
  }
  75% {
    transform: scale(2.5) translateX(0);
  }
  100% {
    transform: scale(1) translateX(0);
  }
}