@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;400;700&display=swap');

body,html{
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif !important;
}
 a, a:hover, a:focus, a:active {
      text-decoration: none;
      color: inherit;
 }
section{
	height: 100vh;
	width: 100vw;
	margin-bottom: 0px;
	padding: 0;
	position: relative;
}
.home{
	position: relative;
}
.block{
	position: absolute;
	height: 20vh;
}
.yellow{
	width: 50vw;
	z-index: 18;
	background: url("images/blank_yellow.png") no-repeat top left / 100% 100%;
}
.green{
	width: 100vw;
	z-index: 20;
	top: 0;	
	background: url("images/blank_green.png") no-repeat top center / 100% 100%;
	position: fixed;
}
.orange{
	width: 45vw;
	height: 30vh;
	background: url("images/blank_orange.png") no-repeat top right / 100% 100%;
	right: 0;
	z-index: 19;
}
.chartreuse{
	width: 90vw;
	height: 15vh;
	background: url("images/blank_chartreuse.png") no-repeat top left / 100% 100%;
	z-index: 17;
}
/*.logo{
	width: 250px;
    height: 80px;
    background: url(images/logo_.png) no-repeat top center / contain;
    z-index: 22;
    right: 5vw;
    top: 1vh;
}*/
.logo{
	position: fixed;
	width: 250px;
	height: 73px;
	z-index: 22;
	right: 5vw;
    top: 1vh;
}
.logo_12{
	position: absolute;
	background: url(images/1.png) no-repeat top left / 100% 100%;
	z-index: 1;
	top: 4px;
	left: 4px;
	width: 55px;
	height: 55px;
}
.logo_22{
	position: absolute;
    background: url(images/2.png) no-repeat top left / 100% 100%;
    z-index: 1;
    top: 43px;
    left: 48px;
    width: 35px;
    height: 35px;
}
.logo_text{
	position: absolute;
    background: url(images/text.svg) no-repeat top left / 100% 100%;
    z-index: 1;
    top: -4px;
    left: 91px;
    width: 160px;
    height: 90px;
}
.langs {
    position: absolute;
    z-index: 23;
    color: #a0a2a2;
    right: 5vw;
    top: 10vh;
}
.langs > .active{
	color: #f6a70a;
}
.home_bg{
	width: 100vw;
	height: 100vh;
	position: absolute;
	left: 0;
	top: 0;
	
}
.home_content {
    height: 100vh;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    background: url("images/home_bg.png") no-repeat bottom left / cover;
  filter: brightness(1);
}
.h_col {
    width: 50%;
    display: flex;
    justify-content: center;
    padding: 20px;
    color: white;
    flex-direction: column;
}
.titles{
	padding: 10vw;
}
.h_col .title1{
	font-size: 33px;
	font-weight: 200;
}
.h_col .title2{
	margin-top: 20px;
	font-size: 25px;
	font-weight: 700;
}
.h_col .title3{
	font-size: 14px;
}
.servers{
	align-items: center;
}
div.footer{
	position: fixed;
	bottom: 0;
	right: 0;
	background: url(images/menu_bg.png) no-repeat bottom right / 50vw 100%;
	width: 100vw;
	height: 100px;
}

/* Menu */
span#menu_hamg{
	display: none;
}
.citrus_menu  {
	list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
    right: calc(6% + 250px);
    top: 0;
    z-index: 20;
}

.citrus_menu li {
   float: left;
}

.citrus_menu li a.menu_item {
    display: block;
    color: white;
    text-align: center;
    padding: 22px 10px 4px 10px;
    text-decoration: none;
    font-size: 15px;
    transition: 0.9s ease;
    border-top: 1px solid #537473;
}

.citrus_menu li a:hover:not(.active) {
  background-color: #95b72c;
  color: black;
  border-top: 12px solid #f48734;
  padding: 10px 10px 4px 10px;
}

.citrus_menu li a.active {
  background-color: #95b72c !important;
  color: black !important;
  border-top: 12px solid #f48734 !important;
  padding: 10px 10px 4px 10px !important;
  float: right !important;
}
/* Menu End */

/*About*/

.about_content{
	position: relative;
	width: 100vw;
	color: black;

}
.about_header{
	position: absolute;
	top: 50vh;
	opacity: 1;
}
.line {
  width: 100%;
  max-width: 800px;
  height: 8px;
  margin: 0 0 10px 0;
  position: relative;
  display: inline-block;
  background-color: rgba(255,255,255,1);
}
.title_bg{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.title_bg_title{
	position: absolute;
    left: 5vw;
    top: 7vh;
    font-weight: 600;
    font-size: 5rem;
    z-index: 2;
    color: black;
}
.ac {
    padding-top: 20vh;
}
.about_info {
    padding: 5%;

}
/* About End */

/* Services  */
.projects_content{
	
	width: 100vw;
	height: 100%;
	color: black;
}
img.p_cl {
    position: absolute;
    top: 30vh;
}
.services_info{
	padding: 5%;
	right: 0;
	z-index: -2;
	position: absolute;
	top: 0;
}
.contact_info {
    top: 30vh;
    padding: 5%;
}
@media only screen and (max-width: 600px) {
	.block{
		height: 20vh;
	}
	.logo {
		top: 1vh;
		right: -30px;
	}
	.logo_12{
		top: 4px;
		left: 4px;
		width: 45px;
		height: 45px;
	}
	.logo_22{
	    top: 36px;
	    left: 41px;
	    width: 25px;
	    height: 25px;
	}
	.logo_text{
	    top: -11px;
	    left: 75px;
	    width: 120px;
	}
	.langs {
	    right: 6vw;	
	}
	.chartreuse{
		height: 18vh;
	}
	.home_bg{
		left: -30vw;
	}
	.images{
		display: none;
	}
	/* Menu  */
	.citrus_menu {
	    list-style-type: auto;
	    margin: 0;
	    padding: 0;
	    overflow: hidden;
	    top: 0;
	    display: inline-grid;
	    width: 46vw;
	    justify-items: start;
	    align-content: start;
	    justify-content: start;
	    align-items: start;
	    background: #a9d145;
	    position: fixed;
	    left: -50vw;
	    z-index: 19;
	    height: 100vh;
	    padding-top: 17vh;
	    transition: 0.5s ease;
	}
	.citrus_menu_hamg{
		left: 0;
	}
	.citrus_menu li {
	    width: 100vw;
	}
	.citrus_menu li a.menu_item {
	    display: block;
	    color: white;
	    padding: 22px 10px 17px 10px;
	    text-decoration: none;
	    font-size: 15px;
	    transition: 0.9s ease;
	    border-top: 1px solid #537473;
	    text-align: left;
	}
	.citrus_menu li a.active {
	    float: unset !important;
	}
	span#menu_hamg {
	    background: #a9d145;
	    top: 3vh;
	    left: 2vw;
	    z-index: 90;
	    color: #fbfbfb;
	    position: absolute;
	    width: 43px;
	    height: 34px;
	    border-radius: 7px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    font-size: 26px;
	}
	.h_col{
		width: unset;
	}
	.h_col .title1{
		font-size: 25px;
	}
	.title_bg_title {
	    position: absolute;
	    left: 4vw;
	    top: 12vh;
	    font-weight: 600;
	    font-size: 20px;
	    z-index: 2;
	    color: black;
	}
	.title_bg {
	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: 1;
	    height: 23vh;
	    width: 129vw;
	}
}