:root {
	--mainWhite: #FDFEFE;
	--btnBlue: #44A5E1;
	--mainLBlue: #E7F6FF;
	--mainDBlue: #409CE8;
	--mainOrange: #FFBC5E;
	--darkBlue: #677EFC;
	--lightgrey: rgb(248, 247, 247);
}

body {
	margin: 0px;
	padding: 0px;
	overflow-x: auto;
	font-family: 'Open Sans', sans-serif;
	background: var(--mainWhite);
	transition: none!important;
}

html {
	overflow: auto;
}

/*Header*/

#top_left_cloud {
	width: 35rem;
	height: 35rem;
	position: absolute;
	z-index: -100;
}

#main_logo {
	width: 10rem;
	height: 10rem;
	margin-top: -1.5rem;
	margin-left: 8rem;
	position: relative;
	z-index: 100;
}

#main_nav {
	display: grid;
	float: right;
	width: 45rem;
	text-decoration: none;
	list-style: none;
	grid-template-columns: repeat(6, 1fr);
	padding: 1.5rem;
	text-align: center;
	margin-right: 7rem;
	z-index: 100;
}

.main_nav > a {
	text-decoration: none;
	color: black;
	transition: 1s all;
}

.main_nav {
	font-size: 1rem;
	cursor: pointer;
}

.main_nav > a:hover {
	text-decoration: underline;
	color: #409CE8;
}

#fa-bars {
	display: none;
	cursor: pointer;
}

.mini_navigation {
	/* display: none; */
	/* float: right; */
	background-color: var(--mainDBlue);
	height: 30rem;
	margin-top: -2rem;
	border-radius: 5px;
	/* margin-right: -15rem; */
	transition: .5s all;
	position: absolute;
	right: 0;
	z-index: 1;
	width: 0rem;
	opacity: .9;
}

.act {
	/* margin-right: 0rem; */
	width: 15rem;

}

#mini_nav {
	list-style: none;
	padding-left: 1rem;
	text-align: center;
}

.mini_nav {
	margin: 3rem auto;
	width: 100%;
	font-weight: bold;
}

.mini_nav_a {
	text-decoration: none;
	color: var(--mainWhite);
	/* color: red; */
	display: none;
}

.mini_nav_a_act {
	display: block;
}

a {
	text-decoration: none;
	color: var(--mainWhite);
}

#flags {
	width: 8rem;
	height: 2rem;
	position: fixed;
	right: 3rem;
	top: 35rem;
	z-index: 1000;
	text-align: center;
}

.flags {
	width: 2.5rem;
	height: 1.5rem;
	cursor: pointer;
	transition: 2s all;
	border-radius: 100%;
	color: white;
	font-size: 1rem;
	padding: .5rem;
	background-color: var(--mainDBlue);
	box-shadow: 2px 2px 2px black;
	position: relative;
	display: inline;
	box-sizing: border-box;

}

#engl_flag {
	background-color: var(--mainOrange);
	z-index: 1200;
}


#ger_flag {
	z-index: 1100;
}

#srb_flag {
	z-index: 1100;
}

#flags > img:hover {
	transform: scale(1.2);
}

/*Home Div*/

#home_div {
	width: 90%;
	height: 27rem;
	margin-top: 1rem;
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

#home_desc {
	margin-left: 8rem;
	margin-top: 2rem;
}

#home_desc > h1 {
	font-size: 2.5rem;
}

#home_desc > h2 {
	font-size: 2rem;
	margin-top: -1.5rem;
}

#home_desc > p {
	width: 25rem;
	margin-bottom: 2.1rem;
	font-size: 1.1rem;

}

#main_btn, #portfolio_btn {
	border: none;
	border-radius: 20px;
	font-weight: bold;
	color: var(--mainWhite);
	background: var(--btnBlue);
	transition: 1s all;
	display: inline;
	padding: 8px 20px;
	margin-bottom: -10rem;
}

#main_btn:hover, #portfolio_btn:hover {
	background: #FFBC5E;
	cursor: pointer;
}

#desk{
	width: 30rem;
	height: 30rem;
	position: absolute;
	margin-left: 5rem;
	z-index: -100;
}

#man {
	width: 30rem;
	height: 30rem;
	display: inline;
	position: absolute;	
	margin-left: 50rem;
	animation-name: go_man;
	animation-duration: 5s;
	animation-delay: .5s;
	animation-fill-mode: forwards;
}

#mug {
	width: 2.3rem;
	height: 2.3rem;
	margin-left: 13rem;
	margin-top: -15rem;
	z-index: 100;
	position: absolute;
	animation-name: go_mug;
	animation-duration: .5s;
	animation-delay: 5s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

/*Second Div*/

#second_div_h {
	text-align: center;
	margin-top: 4rem;
	color: var(--btnBlue);
	font-size: 2rem;
}

hr {
	width: 50%;
	margin: 1rem auto;
}

#second_div {
	width: 90%;
	height: 25rem;
	margin: 10rem auto;
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2rem;	
}

.second_div {
	text-align: center;
	height: 30rem;
	transition: 1s all;
}

.second_div:hover {
	border-radius: 10px;
	box-shadow: 5px 5px 5px 3px lightgrey;
	cursor: pointer;
	transition-timing-function: linear;
}

.second_div > img {
	width: 13rem;
	height: 13rem;
	cursor: pointer;
}

.second_div > h3 {
	margin-top: -2rem;
	font-size: 2rem;
}

.second_div > p {
	width: 15rem;
	margin: 0px auto;
	margin-top: -1rem;
	font-size: 1.1rem;
}

#second_div div:nth-child(1) {
	margin-top: -5rem;
	margin-left: 4rem;
} 

#second_div_truck {
	width: 10rem;
	height: 10rem;
} 

#second_div div:nth-child(3) {
	margin-top: -3rem;
} 

#icon_alarm_left {
	width: 12rem;
	height: 12rem;
	position: absolute;
	margin-left: -12.5rem;
	margin-top: .1rem;
}

#icon_alarm_right {
	width: 12rem;
	height: 12rem;
	position: absolute;
	margin-left: -12.5rem;
	margin-top: .1rem;
}

.icon_alarm_left_anim {
	animation-name: icon_alarm_left;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
}

.icon_alarm_right_anim {
	animation-name: icon_alarm_right;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
}

.second_div_truck {
	position: absolute;
	margin-left: -18rem;
	margin-top: 1.5rem;
}

.second_div_truck_anim {
	animation-name: truck;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

#second_div_ruler {
	position: absolute;
	margin-left: -13rem;
	margin-top: .5rem;
}

#second_div_pen {
	position: absolute;
	margin-left: -13rem;
	margin-top: .5rem;
	z-index: 1;
}

.second_div_pen_anim {
	animation-name: second_div_pen;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.second_div_ruler_anim {
	animation-name: second_div_ruler;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

/*Third Div*/

#portfolio_h {
	text-align: center;
	color: var(--btnBlue);
	z-index: 100;
	font-size: 2rem;
}

#portfolio {
	width: 100%;
	height: 64rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	background: url('Images/portfolio_back.png');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	margin-top: -15rem;
}

#portfolio_comp {
	width: 45rem;
	height: 45rem;
	position: absolute;
	margin-top: 15rem;
}

#portfolio_img {
	width: 24rem;
	height: 15rem;
	top: 108.5rem;
	left: 9.1rem;
	transform: translate(50, 50);
	position: absolute;
	border-radius: 4px;
}

#portfolio_desc {
	margin-top: 25rem;
	margin-left: 5rem;
}

#portfolio_desc > h2 {
	font-size: 2rem;
}

#portfolio_desc > p {
	width: 30rem;
	margin-bottom: 2rem;
	font-size: 1.1rem;
}

/*Services*/

#services_h {
	text-align: center;
	color: var(--btnBlue);
	font-size: 2rem;
}

#services {
	width: 90%;
	height: 70rem;
	margin: 2rem auto;
	background: white;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 1rem;
	text-align: center;
}

.services_divs {
	margin: 0rem auto;
	margin-top: 2rem;
	font-size: 2rem;
	padding: .5rem;
	transition: 1s all;
	text-align: center;
	height: 30rem;
	width: 20rem;
}

.services_divs:hover {
	border-radius: 10px;
	box-shadow: 5px 5px 5px 3px lightgrey;
	cursor: pointer;
	transition-timing-function: linear;
}

.services_divs > div {
	text-align: center;
	padding-top: -7rem;
	width: 15rem;
	margin: -1rem auto;
	font-size: 1rem;

}

.services_divs > img {
	width: 10rem;
	height: 10rem;
	margin: 0px auto;
	margin-bottom: 3rem;
}

.services_divs > h2 {
	margin-top: -2.2rem;
	font-size: 2rem;
}

.services_p {
	margin-top: -3rem;
}

/*Footer*/

#footer {
	width: 100%;
	height: 15rem;
	background: var(--mainDBlue);
}

#footer_logo {
	width: 15rem;
	height: 10rem;
	margin-top: -1.5rem;
	margin-left: 8rem;
	cursor: pointer;
}

#footer > p {
	font-weight: bold;
	display: inline;
	margin-left: -15rem;
}

#mini_logo {
	width: 3rem;
	height: 3rem;
	margin-top: 2rem;
}

i {
	color: var(--btnBlue);
}

#footer_icons {
	display: inline;
	margin-top: 10rem;	
	margin-left: -17rem;
	position: absolute;
}

#footer_icons > i {
	color: white;
	font-size: 2rem;
	padding-right: 1rem;
}

#footer_div {
	float: right;
	width: 15rem;
	height: 60%;
	margin-top: 2rem;
	display: inline;
	display: grid;
	grid-template-rows: repeat(5, 1fr);
	color: white;
}

#footer_div > span:hover {
	text-decoration: underline;
	cursor: pointer;
}

.links {
	cursor: pointer
}

						/* About Us Page*/


/* About Us */

#about_us_homeDiv {
	width: 100%;
	height: 30rem;
	z-index: -100;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

#about_us_homeDiv_desc {
	margin: 4rem;
	margin-left: 8rem;
	width: 50%;
}

#about_us_homeDiv_desc > h1, p {
	display: block;
	width: 100%;
}

#about_us_homeDiv_desc > h2 {
	font-size: 2rem;
}

#about_us_homeDiv_desc > p {
	margin-bottom: 3rem;
	font-size: 1.2rem;
	width: 28rem;
	line-height: 1.4;
}

#about_us_homeDiv_port, #about_us_homeDiv_cont {
	border: none;
	border-radius: 20px;
	font-size: 1rem;
	font-weight: bold;
	width: 7rem;
	height: 2rem;
	color: var(--mainWhite);
	background: var(--btnBlue);
	transition: 1s all;
	display: inline;
	padding: 4px 20px;
}

#about_us_homeDiv_port:hover, #about_us_homeDiv_cont:hover {
	background: #FFBC5E;
	cursor: pointer;
}

#about_us_homeDiv_cont {
	margin-left: 1rem;
}

#main_cloud {
	float: right;
	width: 30rem;
	height: 30rem;
	display: block;
}

/* About_us_steps */

#about_us_steps_div {
	width: 90%;
	height: 60rem;
	margin: 2rem auto;
}

#about_us_steps_div_h2 {
	text-align: center;
	font-size: 2rem;
	margin-bottom: 4rem;
}

#about_us_steps {
	width: 100%;
	height: 50rem;
	display: grid;
	grid-template-rows: repeat(4, 1fr);
}

.steps_desc > p {
	width: 24rem;
}

.about_us_steps > img {
	max-width: 10rem;
	max-height: 10rem;
	display: block;
	margin: 1rem auto;
}

#first_step {
	display: grid;
	grid-template-columns: 20% 80%;
}

#first_step > div {
	padding-top: 1rem;
}

#second_step {
	display: grid;
	grid-template-columns: 20% 60% 20%;
}

#second_step_div {
	text-align: right;
	width: 98%;
	padding-top: 1rem;
}

#second_step_div > p {
	float: right;
	margin-top: -.2rem;
}

#second_arrow {
	margin-left: 7rem;
	margin-top: -1.1em;
}

#third_step {
	display: grid;
	grid-template-columns: 20% 60% 20%;
}

#third_step > div {
	padding-top: 1rem;
}

#third_arrow {
	margin-right: 6rem;
	margin-top: -1.1rem;
	max-width: 11rem;
	max-height: 11rem;
}

#fourth_step {
	display: grid;
	grid-template-columns: 20% 60% 20%;
	margin-top: 1rem;
}

#fourth_step_div {
	text-align: right;
	width: 98%;
	padding-top: 1rem;
}

#fourth_step_div > p {
	float: right;
	margin-top: -.2rem;
}

#fourth_arrow {
	margin-left: 7rem;
	margin-top: -.8rem;
}


/* Footer */

#about_us_footer {
	width: 100%;
	height: 15rem;
	background: var(--mainDBlue);
}

				/* Contact Page */

/* Contact */

#con_top_left_cloud {
	width: 35rem;
	height: 35rem;
	position: absolute;
	z-index: -100;
}

#contact_div {
	width: 100%;
	height: 40rem;
}

#con_div {
	width: 91%;
	height: 30rem;
	margin: 2rem auto;
	display: grid;
	grid-template-columns: 41% 59%;
}

#con_first {
	margin-left: 4rem;
}

#con_first > h2 {
	color: black;
	font-size: 2rem;
}

#con_desc {
	width: 17rem;
}

#con_email_wraper {
	margin-top: 2.5rem;
}

#con_email_span {
	margin-top: 4rem;
}

#con_email_icon {
	font-size: 1.5rem;
}

#con_email_div {
	display: flex;
	margin-left: 2rem;
	margin-top: -2.62rem;
}

#con_email_address {
	display: inline;
	font-weight: bold;
}

#con_first i {
	font-size: 1.5rem;
}

#con_all_icons {
	margin-top: 2.5rem;
}

#con_all_icons i:hover {
	color: var(--mainOrange);
	transition: 1s all;
	cursor: pointer;
}

#con_all_icons i:not(:first-child) {
	margin-left: 1rem;
}

::placeholder {
	color: var(--darkBlue);
}

#con_second {
	margin-top: 1.5rem;
}

#con_form > input {
	border-radius: 5px;
	width: 13rem;
	height: 2rem;
	border: none;
	background: var(--lightgrey);
	padding-left: 2rem;
}

#con_form > input, #textarea {
	color: var(--btnBlue);
}

#con_form > input:not(:first-child) {
	margin-left: 1.5rem;
}

#con_form {
	margin-top: 1rem;
	margin-left: 3rem;
}

#con_form > textarea {
	display: block;
	margin-top: 2rem;
	border-radius: 5px;
	background: var(--lightgrey);
	border: none;
	padding-left: 2rem;
	padding-top: 1rem;
}


textarea:focus, input:focus {
	outline: none;
}

#con_submit {
	padding: 12px 20px;
	background: var(--btnBlue);
	border: none;
	border-radius: 20px;
	margin-top: 2rem;
	color: var(--mainWhite);
	font-weight: bold;
	cursor: pointer;
	transition: 2s all;
}

#con_submit:hover {
	background: var(--mainOrange);
}

#mail_sent {
	margin: 0px auto;
	width: 40%;
	height: 40%;
	display: flex;
	align-self: center;
	justify-content: center;
}

#mail_sent_p {
	width: 80%;
	text-align: center;
	margin: 0rem auto;
	font-size: 1.5rem;
	font-weight: bold;
}

		/* Portfolio Page */

#top_right_cloud {
	position: absolute;
	z-index: -1;
	float: right;
	right: 0;
	transform: rotateY(180deg);
}

#port_page_main_div {
	width: 90%;
	height: 27rem;
	margin-top: 1rem;
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

#port_page_desc {
	margin-left: 8rem;
	margin-top: 2rem;
}

#port_page_desc > h1 {
	font-size: 2.5rem;
}

#port_page_desc > p {
	width: 28rem;
	font-size: 1.1rem;
}

#port_page_second_div {
	width: 100%;
	height: 10rem;
}

#portfolio_nav {
	width: 16rem;
	height: 5rem;
	margin: 0px auto;
	color: var(--mainDBlue);
	border: 3px solid var(--mainDBlue);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-radius: 50px;
	color: var(--mainWhite);
	text-align: center;
	font-weight: bold;
	font-size: 1.1rem;
	cursor: pointer;
	transform: 2s all;
}

#port_page_slider_text {
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	font-size: 1.8rem;
	font-weight: bold;
	margin: 0px auto;
	width: 17rem;
	color: var(--mainDBlue);
	margin-left: 0.1rem;
}

#port_page_circle {
	height: 3.5rem;
	width: 3.5rem;
	background-color: var(--mainDBlue);
	border-radius: 100px;
	margin: 0px;
	position: absolute;
	margin-top: .8rem;
	margin-left: .7rem;
}

.port_page_port_div_dev {
	width: 90%;
	height: 250rem;
	margin: 10rem auto;
	margin-top: 5rem;
	border-radius: 5px;
	display: grid;
	grid-template-rows: repeat(5, 1fr);
}

.port_page_line {
	display: inline;
	margin-top: -6rem;
	left: 20%;
	width: 60%;
	position: absolute;
	z-index: 1000;
}


.portfolio_page_comps_div {
	position: relative;
	z-index: 0;
}

.portfolio_page_comp {
	width: 90%;
	height: 75%;
	margin-top: 5rem;
	display: block;
	left: 4.5%;
	position: relative;
	z-index: -1;
}

.imgs_container {
	width: 63.5%;
	height: 60.5%;
	position: absolute;
	z-index: 10;
	top: 15%;
	left: 17.6%;
	overflow-y: scroll;
	cursor: pointer;
}

.port_page_img_wrapper {
	width: 63.5%;
	height: 60.5%;
	position: absolute;
	background-color: black;
	opacity: 1;
	top: 15%;
	left: 17.6%;
	z-index: 11;
	opacity: .8;
	transition: 2s all;
	color: white;
	text-align: center;
}

.port_page_img_wrapper > h2 {
	margin-top: 3rem;
	font-size: 3rem;
}

.port_page_img_wrapper > p {
	font-size: 1.5;
}

.port_page_img_wrapper > i {
	font-size: 3rem;
	margin-top: 2rem;
}

.imgs_container::-webkit-scrollbar {
	display: none;
}

.imgs_container > img {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	margin-bottom: -5px;
}

.port_page_port_div_des {
	width: 95%;
	height: 65rem;
	margin: 10rem auto;
	border-radius: 5px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	text-align: center;
	display: none;
	margin-top: 2rem;
}

.s_logoes {
	width: 17rem;
	height: 17rem;
	text-align: center;
	display: block;
	margin: 0rem auto;
	box-shadow: 1px 1px 1px grey;
	margin-top: 1rem;
	cursor: pointer;
}

.s_logoes:hover {
	box-shadow: 2px 2px 2px grey;
}

.active {
	display: grid;
}

.inactive {
	display: none;
}

#second_div_third_p  {
	width: 14rem;
}


													/* Media Query */

@media screen and (max-width: 1200px) {
	
/*nav */
								
	#main_nav {
		display: none;
	}

	 #main_logo {
		margin-left: 2rem;
	} 

	#fa-bars {
		display: inline;
		width: 3rem;
		height: 3rem;
		float: right;
		margin: 2rem;
	}

/* services */

	#services {
		width: 90%;
		height: 106rem;
		margin: 2rem auto;
		background: white;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(6, 1fr);
		grid-gap: 1rem;
		text-align: center;
	}

	/* About Us Page*/

	#about_us_homeDiv_desc {
		margin: 4rem auto;
		width: 80%;
	}

	#about_us_homeDiv {
		width: 100%;
		height: 60rem;
		z-index: -100;
		display: grid;
		grid-template-columns: none;
		grid-template-rows: repeat(2, 1fr);
		text-align: center;
		margin: 0px auto;
	}

	#about_us_homeDiv_desc > p {
		margin: 3rem auto;
	}

	#main_cloud {
		display: block;
		margin: 0px auto;
	}


	/* Portfolio Page */

	#port_page_main_div {
		width: 90%;
		height: 27rem;
		margin: 1rem auto;
		grid-template-columns: none;
		text-align: center;
	}

	#port_page_desc {
		margin-left: 0rem;
	}
	
	#port_page_desc > p {
		width: 28rem;
		font-size: 1.1rem;
		margin: 0px auto;
	}
	
	.portfolio_page_comp {
		width: 90%;
		height: 65%;
	}

	.imgs_container {
		width: 63.5%;
		height: 53.5%;
		top: 13.50%;
	}
	
	.port_page_img_wrapper {
		width: 63.5%;
		height: 53.5%;
		top: 13.5%;
	}
}

strong {
	color: var(--mainWhite);
}

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

/* home div */

	#home_div {
		width: 100%;
		height: 55rem;
		margin-top: 1rem;
		position: relative;
		display: grid;
		grid-template-columns: none;
		grid-template-rows: repeat(2, 1fr);
	}

	#home_desc {
		margin-left: 0px;
		margin-top: 2rem;
		text-align: center;
	}
	
	#home_desc > h1 {
		font-size: 2.5rem;
	}
	
	#home_desc > h2 {
		font-size: 1.69rem;
	}
	
	#home_desc > p {
		margin: 0px auto;
		margin-bottom: 2rem;
	}
	
	#main_btn, #portfolio_btn {
		margin: 1.5rem auto;

	}

	 #main_ilustrtion {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#desk{
		width: 25rem;
		height: 25rem;
		position: absolute;
		margin-left: 0rem;
		z-index: -100;
	}
	
	#man {
		width: 25rem;
		height: 25rem;
		display: inline;
		position: absolute;	
		margin-left: 0rem;
		animation: none;
	}

	#mug {
		display: none;
	}

/* second div */
	
	#second_div {
		width: 100%;
		height: 130rem;
		margin: 0rem auto;
		position: relative;
		display: grid;
		grid-template-columns: none;	
		grid-template-rows: repeat(3, 1fr);	
	}

	.second_div {
		width: 60%;
		height: 35rem;
		margin: 0px auto;
	}

	#second_div div:nth-child(1) {
		margin: 0px auto;
	} 

	.second_div {
		text-align: center;
	}

	.second_div > img {
		width: 15rem;
		height: 15rem;
		cursor: pointer;
	}

	.second_div > h3 {
		margin-top: -2rem;
	}

	.second_div > p {
		width: 10rem;
		margin: 0px auto;
		margin-top: -1rem;
	}

	#second_div div:nth-child(1) {
		margin: -1rem auto;
	} 

	#second_div div:nth-child(3) {
		margin-top: 0rem;
	} 


	#icon_alarm_left {
		margin-left: -13.1rem;
		margin-top: 1rem;
	}

	#icon_alarm_right {
		margin-left: -13.6rem;
		margin-top: 1rem;
	}

	.second_div_truck {
		margin-left: -19rem;
		margin-top: 2.2rem;
	}

	#second_div_ruler {
		margin-left: -15rem;
		margin-top: .5rem;
	}
	
	#second_div_pen {
		margin-left: -15rem;
		margin-top: .5rem;
	}
	
/*Third Div*/

	#portfolio_h {
		text-align: center;
		color: var(--btnBlue);
		margin: 1rem auto;
		font-size: 2.5rem;
	}

	#portfolio {
		background: none;
		grid-template-columns: none;
		height: 60rem;
		margin-top: 0px;
	}

	#portfolio_comp {
		display: block;
		position: relative;
		width: 30rem;
		height: 30rem;
		margin: 0px auto;
	}

	#portfolio_img {
		top: -11.5rem;
		left: -.79rem;
		transform: none;
		position: relative;
		display: block;
		width: 16rem;
		height: 9.9rem;
		margin: -10rem auto;
	}

	#portfolio_desc {
		display: block;
		margin: 17rem auto;
		text-align: center;
	}

	#portfolio_desc > p {
		width: 30rem;
		margin: 0px auto;
		margin-bottom: 2rem;
	}

	#portfolio_desc > button {
		margin: 2rem auto;
	}

	/* About Us page */

	#second_arrow,
	#third_arrow,
	#fourth_arrow {
		display: none;
	}

	#second_step {
		grid-template-columns: 80% 20%;
	}

	#fourth_step {
		grid-template-columns: 80% 20%;
	}

	/* Contact Page */

	#contact_div {
		height: 60rem;
		text-align: center;
	}
	
	#con_div {
		margin: 2rem auto;
		display: grid;
		grid-template-columns: none;
		grid-template-rows: repeat(2, 1fr);
	}

	#con_first {
		margin-left: 0rem;	
	}

	#con_desc {
		width: none;
		margin: 0px auto;
		font-weight: bold;
	}

	#con_email_icon {
		margin-left: -11rem;
	}

	#con_second {
		margin-top: 6rem;
	}

	#con_form > textarea {
		display: block;
		margin: 2rem auto;
		border-radius: 5px;
		background: var(--lightgrey);
		border: none;
		padding-left: 2rem;
		padding-top: 1rem;
	}

	#con_form {
		margin-top: 1rem;
		margin-left: 0rem;
	}

	.port_page_comp {
		width: 95%;
		height: 30rem;
		background-image: url('Images/port_page_comp.png');
		background-size: 100%; 
		margin: 15rem auto;
		background-repeat: no-repeat;
		z-index: -100;
	}

	#services {
		height: 105rem;
	}

	/* Portfolio Page */

	.portfolio_page_comp {
		width: 90%;
		height: 55%;
	}

	.imgs_container {
		width: 63.5%;
		height: 45%;
		top: 13.50%;
	}
	
	.port_page_img_wrapper {
		width: 63.5%;
		height: 45%;
		top: 13.5%;
	}

	.port_page_line {
		margin-top: -10rem;
	}

	.port_page_port_div_des {
		width: 95%;
		height: 105rem;
		margin: 10rem auto;
		grid-template-columns: repeat(2, 1fr);
	}

}





@media screen and (max-width: 900px) {
	/* About Us Page Steps */
	#first_step_div, #third_step_div {
		margin-left: 2rem;
	}

	#second_step_div, #fourth_step_div {
		margin-right: 2rem;
	}
}





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

/* Header */
	
	#top_left_cloud {
		display: none;
	}

/* Home Div */

	#home_div {
		width: 100%;
		height: 47rem;
		margin-top: 1rem auto;
		position: relative;
		display: grid;
		grid-template-columns: none;
		grid-template-rows: repeat(2, 1fr);
	}

	#home_desc {
		margin-left: 0px;
		margin-top: 20rem;
		text-align: center;
	}

	#desk {
		width: 20rem;
		height: 20rem;
		margin-top: -75rem;

	}

	#man {
		width: 20rem;
		height: 20rem;
		margin-top: -75rem;
	}

	#home_desc > h1 {
		font-size: 2rem;
	}

	#home_desc > h2 {
		font-size: 1.49rem;
	}

	#home_desc > p {
		margin: 0px auto;
		width: 20rem;
		margin-bottom: 2rem;
	}

	#second_div {
		height: 120rem;
		grid-gap: 0rem;
	}

	.second_div {
		width: 80%;
		height: 35rem;
		margin: 0px auto;
	}

	#second_div div:nth-child(1) {
		margin: 0px auto;
	} 

	#flags {
		position: fixed;
		right: -.3rem;
		top: 30rem;
	}

/* Portfolio  */

	#portfolio_h {
		text-align: center;
		color: var(--btnBlue);
		margin: 2rem auto;
		font-size: 1.8rem;
	}

	#portfolio {
		margin: 0px auto;
		height: 50rem;
		grid-template-columns: none;
	}

	#portfolio_comp {
		margin: 0px auto;
		width: 20rem;
		height: 20rem;
		position: relative;
		display: block;
	}

	#portfolio_img {
		top: -4.3rem;
		left: -.66rem;
		transform: none;
		position: relative;
		display: block;
		width: 10.8rem;
		height: 6.6rem;
		margin: -10rem auto;
	}

	#portfolio_desc {
		text-align: center;
		margin: 11rem auto;
	}

	#portfolio_desc > p {
		width: 20rem;
		margin: 0px auto;
		margin-bottom: 2rem;
	}

/* #services */

	#services {
		width: 90%;
		height: 226rem;
		margin: 2rem auto;
		background: white;
		display: grid;
		grid-template-columns: none;
		grid-template-rows: repeat(6, 1fr);
		grid-gap: 1rem;
		text-align: center;
	}

	.services_divs {
		width: 18rem;
		height: 34rem;
	}

/*Footer*/

	#footer {
		width: 100%;
		height: 15rem;
		background: var(--mainDBlue);
	}

	#footer_logo {
		width: 15rem;
		height: 10rem;
		margin-top: -1.5rem;
		margin-left: 1rem;
	}

	#footer > p {
		font-weight: bold;
		display: inline;
		margin-left: -15rem;
	}

	#footer_icons {
		display: inline;
		margin-top: 10rem;	
		margin-left: -17rem;
		position: absolute;
	}

	#footer_icons > i {
		color: white;
		font-size: 2rem;
		padding-right: 1rem;
	}

	#footer_div {
		display: none;
	}

	#footer_div > span:hover {
		text-decoration: underline;
		cursor: pointer;
	}

	/* About Us Page */

	#about_us_steps_div {
		width: 100%;
	}

	#about_us_homeDiv_desc > p {
		width: 90%;
	}

	#first_step, #third_step {
		grid-template-columns: 40% 60%;
	}

	#second_step, #fourth_step {
		grid-template-columns: 60% 40%;
	}

	#first_step_div, #third_step_div {
		margin-left: -1rem;
	}

	#second_step_div, #fourth_step_div {
		margin-right: -1rem;
	}

	/* Portfolio Page */

	.portfolio_page_comp {
		width: 90%;
		height: 45%;
		margin-bottom: -10rem;
	}

	.imgs_container {
		width: 63.5%;
		height: 37.5%;
		top: 13%;
	}
	
	.port_page_img_wrapper {
		width: 63.5%;
		height: 37.5%;
		top: 13%;
	}

	.port_page_line {
		margin-top: -12rem;
	}

	.port_page_img_wrapper > h2 {
		margin-top: 2rem;
		font-size: 2rem;
	}
	
	.port_page_img_wrapper > i {
		font-size: 2rem;
		margin-top: 1rem;
	}


	.port_page_port_div_des {
		width: 95%;
		height: 235rem;
		margin: 10rem auto;
		grid-template-columns: repeat(1, 1fr);
	}
}


@media screen and (max-width: 700px) {
		
	#con_top_left_cloud {
		width: 100%;
	}

	#con_form > input {
		width: 8rem;
		font-size: .7rem;
		padding-left: .3rem;
	}

	#con_form > textarea {
		display: block;
		margin-top: 2rem;
		border-radius: 5px;
		background: var(--lightgrey);
		border: none;
		padding-left: .5rem;
		padding-top: 1rem;
		width: 18rem;
	}

	#con_form {
		margin-top: 1rem;
		margin-left: 0rem;
	}

	
	.port_page_port_div_des {
		width: 95%;
		height: 235rem;
		margin: 10rem auto;
		grid-template-columns: repeat(1, 1fr);
	}

	/* About Us Page*/

	#about_us_homeDiv_desc > p {
	}

	#main_cloud {
		width: 25rem;
		height: 25rem;
	}

	.steps_desc > p {
		width: 18rem;
		font-size: .9rem;
		margin-top: -.5rem;
	}
	
	.about_us_steps > img {
		max-width: 8rem;
		max-height: 8rem;
	}

}


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

	#con_form > input {
		width: 5rem;
	}

	#con_form > textarea {
		width: 12rem;
	}

	#portfolio_desc h2 {
		font-size: 1.5rem;
	}

	/* About Us Page*/

	#about_us_homeDiv_desc {
		margin-top: -2rem;
	}

	#about_us_homeDiv_desc > p {
		font-size: 1rem;
	}
	
	#main_cloud {
		width: 20rem;
		height: 20rem;
	}

	#about_us_steps_div_h2 {
		font-size: 1.7rem;
	}
	
	#about_us_steps_div {
		margin: -6rem auto;
	}
	
	.steps_desc {
		margin-top: -1.3rem;
	}

	.steps_desc > p {
		width: 15rem;
		font-size: .7rem;
		margin-top: -.5rem;
	}
	
	.about_us_steps > img {
		max-width: 6rem;
		max-height: 6rem;
	}
	
	#third_step > div {
		margin-left: .6rem;
	}

	#first_step > div {
		margin-left: .1rem;
	}

	#fourth_step {
		margin-top: -.7rem;
	}


	/* Portfolio Page */

	#port_page_desc > p {
		width: 24rem;
		font-size: 1.1rem;
		margin-bottom: 4rem;
	}
	
	.portfolio_page_comp {
		width: 90%;
		height: 35%;
		margin-bottom: -10rem;
	}
	
	.imgs_container {
		width: 63.5%;
		height: 28.5%;
		top: 12%;
	}
		
	.port_page_img_wrapper {
		width: 63.5%;
		height: 28.5%;
		top: 12%;
	}
	
	.port_page_line {
		margin-top: -14rem;
	}
	
	.port_page_img_wrapper > h2 {
		margin-top: 2rem;
		font-size: 1.5rem;
	}
		
	.port_page_img_wrapper > i {
		font-size: 2rem;
		margin-top: 1.5rem;
	}

	
	.port_page_port_div_des {
		width: 95%;
		height: 235rem;
		margin: 10rem auto;
		grid-template-columns: repeat(1, 1fr);
	}

	/* #mail_sent {
		width: 50rem;
		height: 50rem;
	} */
	
}

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

	#about_us_homeDiv_desc > p {
		font-size: .8rem;
	}

	.steps_desc > p {
		width: 13rem;
	}

	/* Portfolio page */

	.portfolio_page_comp {
		width: 90%;
		height: 25%;
	}

	.imgs_container {
		width: 63.5%;
		height: 22%;
		top: 11%;
	}
		
	.port_page_img_wrapper {
		width: 63.5%;
		height: 22%;
		top: 11%;
	}

	.port_page_img_wrapper > h2 {
		margin-top: 1rem;
		font-size: 1rem;
	}

	.port_page_img_wrapper > p {
		font-size: 1rem;
	}
		
	.port_page_img_wrapper > i {
		font-size: 1.5rem;
		margin-top: .3rem;
	}


} 

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

	.services_divs {
		width: 18rem;
	}

	
	/* About Us Page*/

	#about_us_homeDiv_desc > p {
		line-height: 1.1;
	}
	
	#main_cloud {
		width: 18rem;
		height: 18rem;
	}

	/* About Us Page*/
	
	.steps_desc > p {
		width: 10rem;
		font-size: .7em;
		margin-top: -.5rem;
	}

	.steps_desc > h2 {
		font-size: 1rem;
	}	

	.about_us_steps > img {
		max-width: 6rem;
		max-height: 6rem;
	}

	.steps_desc {
		margin-top: -2rem;
	}
	

	/* Portfolio Page */
	
	#port_page_main_div {
		height: 32rem;
	}

	
	#portfolio_nav {
		width: 16rem;
		height: 5rem;
		margin: 5rem auto;
	}


	.port_page_port_div_dev {
		width: 90%;
		height: 180rem;
		margin: 10rem auto;
		margin-bottom: -8rem;
		border-radius: 5px;
		grid-template-rows: repeat(5, 1fr);
	}
	

	#port_page_desc > p {
		width: 17rem;
		font-size: 1.1rem;
	}
	
	.portfolio_page_comp {
		width: 90%;
		height: 30%;
	}
	
	.imgs_container {
		width: 63.5%;
		height: 25%;
		top: 15%;
	}
		
	.port_page_img_wrapper {
		width: 63.5%;
		height: 25%;
		top: 15%;
	}
	
	.port_page_line {
		margin-top: -10rem;
	}
	
	.port_page_img_wrapper > h2 {
		margin-top: 1rem;
		font-size: 1rem;
	}

	.port_page_img_wrapper > p {
		font-size: .8rem;
	}
		
	.port_page_img_wrapper > i {
		font-size: 1rem;
		margin-top: .5rem;
	}

	.port_page_port_div_des {
		width: 95%;
		height: 235rem;
		margin: 10rem auto;
		grid-template-columns: repeat(1, 1fr);
	}

}

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

	/* About Us Page*/
	
	#main_cloud {
		width: 15rem;
		height: 15rem;
	}
	
	#second_div_third {
		height: 37rem;
	}

	.services_divs {
		width: 17rem;
	}

	#services_web_development {
		height: 33rem;
	}
} 



														/* Animations */


@keyframes go_man {
	0% {
		transform: translateX(0);
	}

	90% {
		transform: translateX(-45.2rem);
	}

	100% {
		transform: translateX(-45rem);
	}

}				

@keyframes go_mug {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(30rem);
	}
}

@keyframes icon_alarm_left {
	0% {
		transform: translateX(0rem);
	}

	90% {
		transform: translateX(2.4rem);
	}

	100% {
		transform: translateX(2.2rem);
	}
}

@keyframes icon_alarm_right {
	0% {
		transform: translateX(0rem);
	}

	90% {
		transform: translateX(-2.4rem);
	}

	100% {
		transform: translateX(-2.2rem);
	}
}

@keyframes truck {
	0% {
		transform: translate(0rem);
	}

	90% {
		transform: translate(7.1rem);
	}

	100% {
		transform: translate(7rem);
	}
}

@keyframes second_div_ruler {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(90deg);
	}
} 



@keyframes second_div_pen {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(-90deg);
	}
}





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

	#home_div {
		height: 40rem;
	}

	#home_desc > h1 {
		font-size: 3rem;
	}

	#home_desc > h2 {
		font-size: 2.2rem;
	}

	#home_desc > p {
		width: 30rem;
		font-size: 1.5rem;
	}

	#desk{
		width: 40rem;
		height: 40rem;
	}

	#man {
		width: 40rem;
		height: 40rem;
	}

	#mug {
		width: 3rem;
		height: 3rem;
	}

	
	@keyframes go_mug {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(35.1rem);
		}
	}

	@keyframes go_man {
	0% {
		transform: translateX(0);
	}

	90% {
		transform: translateX(-45.5rem);
	}

	100% {
		transform: translateX(-45.3rem);
	}

}

	/* Portfolio Comp */

	#portfolio {
		height: 75rem;
	}
	
	#portfolio_img {
		top: 121.5rem;
	}
}

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

	/* About Us */

	#about_us_homeDiv {
		height: 40rem;
	}

	#about_us_homeDiv_desc > h2 {
		font-size: 3rem;
	}

	#about_us_homeDiv_desc > p {
		font-size: 1.5rem;
		width: 35rem;
	}

	#main_cloud {
		width: 40rem;
		height: 40rem;
	}
	
	
	#about_us_steps_div {
		height: 60rem;
		margin: 4rem auto;
	}

	/* Portfolio Page */

	.port_page_port_div_dev {
		height: 300rem;
	}

	.imgs_container {
		width: 63.5%;
		height: 61%;
		top: 13%;
		left: 17.6%;
	}
	
	.port_page_img_wrapper {
		width: 63.5%;
		height: 61%;
		top: 13%;
		left: 17.6%;
	}

	.port_page_line {
		margin-top: -8rem;

	}

	/* Contact */

	#con_div {
		grid-template-columns: 45% 55%;
	}

	#contact_div {
		height: 45rem;
	}

	#con_first > h2 {
		font-size: 3rem;
	}

	#con_desc {
		width: 30rem;
		font-size: 1.7rem;
	}

	#con_form > input {
		border-radius: 5px;
		width: 17rem;
		height: 2.5rem;
	}

	#con_form > textarea {
		width: 38rem;
		height: 19rem;
	}

}

@media screen and (min-width: 1800px) {
	#home_div {
		height: 50rem;
	}

	#home_desc > h1 {
		font-size: 3.5rem;
	}

	#home_desc > h2 {
		font-size: 2.5rem;
	}

	#home_desc > p {
		width: 34rem;
		font-size: 1.7rem;
	}

	#desk{
		width: 45rem;
		height: 45rem;
	}

	#man {
		width: 45rem;
		height: 45rem;
		margin-left: 65rem;
	}

	#mug {
		width: 4rem;
		height: 4rem;
	}

	@keyframes go_man {
		0% {
			transform: translateX(0);
		}
	
		90% {
			transform: translateX(-60.5rem);
		}
	
		100% {
			transform: translateX(-60.3rem);
		}

	}

	@keyframes go_mug {
		0% {
			transform: translateY(0);
		}
	
		100% {
			transform: translateY(37rem);
		}
	}

	#second_div {
		height: 35rem;
	}

	.second_div {
		height: 40rem;
	}

	.second_div > p {
		font-size: 2rem;
		width: 80%;
	}

	/* Portfolio Comp */

	#portfolio {
		height: 80rem;
	}

	#portfolio_comp {
		margin: 10rem auto;
		width: 50rem;
		height: 50rem;
	}

	#portfolio_img {
		width: 26.5rem;
		height: 16rem;
		margin: -2rem auto;
		top: 140.95rem;
		left: 10.29rem;
	}

	#portfolio_h {
		font-size: 2.3rem;
	}

	#portfolio_desc > h2 {
		font-size: 2.3rem;
		margin-top: -2rem;
	}

	#portfolio_desc > p {
		font-size: 1.7rem;
		width: 40rem;
		margin-top: -1rem;
	}


	/* About Us */

	#about_us_homeDiv {
		height: 45rem;
	}
	
	#about_us_homeDiv_desc > h2 {
		font-size: 3.2rem;
	}
	
	#about_us_homeDiv_desc > p {
		font-size: 1.7rem;
		width: 37rem;
	}
	
	#main_cloud {
		width: 45rem;
		height: 45rem;
	}
			
	#about_us_steps_div {
		height: 60rem;
		margin: 4rem auto;
	}

	.steps_desc > p {
		font-size: 1.3rem;
	}

	/* Contact */

	#con_div {
		grid-template-columns: 50% 50%;
	}

	#contact_div {
		height: 50rem;
	}

	#con_first > h2 {
		font-size: 3.2rem;
	}

	#con_desc {
		width: 35rem;
		font-size: 1.9rem;
	}

	#con_form > input {
		border-radius: 5px;
		width: 19rem;
		height: 2.7rem;
	}

	#con_form > textarea {
		width: 42rem;
		height: 21rem;
	}
}

@media screen and (min-width: 2000px) {
	#home_div {
		height: 55rem;
	}

	#home_desc > h1 {
		font-size: 3.5rem;
	}

	#home_desc > h2 {
		font-size: 2.5rem;
	}

	#home_desc > p {
		width: 35rem;
		font-size: 1.8rem;
	}

	#desk{
		width: 50rem;
		height: 50rem;
	}

	#man {
		width: 50rem;
		height: 50rem;
		margin-left: 65rem;
	}

	#mug {
		width: 5rem;
		height: 5rem;
	}

	@keyframes go_man {
		0% {
			transform: translateX(0);
		}
	
		90% {
			transform: translateX(-60.5rem);
		}
	
		100% {
			transform: translateX(-60.3rem);
		}

	}

	@keyframes go_mug {
		0% {
			transform: translateY(0);
		}
	
		100% {
			transform: translateY(38.9rem);
		}
	}

	#portfolio_img {
		top: 145.95rem;
	}

	#portfolio_desc > p {
		width: 45rem;
	}

	/* Portfolio Page */

	#port_page_desc {
		grid-template-columns: 60% 40%;

	}

	.port_page_port_div_dev {
		height: 350rem;
	}
	
	.imgs_container {
		width: 63.5%;
		height: 60%;
		top: 12.5%;
		left: 17.6%;
	}
		
	.port_page_img_wrapper {
		width: 63.5%;
		height: 60%;
		top: 12.5%;
		left: 17.6%;
	}
	
	.port_page_line {
		margin-top: -10rem;
	}
}
	

@media screen and (min-width: 2300px) {
	#home_div {
		height: 60rem;
	}

	#home_desc > h1 {
		font-size: 4rem;
	}

	#home_desc > h2 {
		font-size: 3rem;
	}

	#home_desc > p {
		width: 45rem;
		font-size: 2.2rem;
	}

	#desk{
		width: 55rem;
		height: 55rem;
	}

	#man {
		width: 55rem;
		height: 55rem;
		margin-left: 75rem;
	}

	#mug {
		width: 6rem;
		height: 6rem;
	}

	@keyframes go_man {
		0% {
			transform: translateX(0);
		}
	
		90% {
			transform: translateX(-71.2rem);
		}
	
		100% {
			transform: translateX(-70.78rem);
		}

	}

	@keyframes go_mug {
		0% {
			transform: translateY(0);
		}
	
		100% {
			transform: translateY(40.9rem);
		}

		
	}

	/* Portfolio */

	#portfolio {
		height: 100rem;
	}

	#portfolio_comp {
		margin: 10rem auto;
		width: 60rem;
		height: 60rem;
	}

	#portfolio_img {
		top: 153.75rem;
		left: 12.29rem;
		width: 31.8rem;
		height: 19.4rem;
	}

	/* About Us */

	#about_us_homeDiv {
		height: 45rem;
	}
	
	#about_us_homeDiv_desc > h2 {
		font-size: 4rem;
	}
	
	#about_us_homeDiv_desc > p {
		font-size: 2.2rem;
		width: 45rem;
	}
	
	#main_cloud {
		width: 50rem;
		height: 50rem;
	}
			
	#about_us_steps_div {
		margin: 8rem auto;
	}

	/* Portfolio Page */

	#port_page_main_div {
		height: 45rem;
	}

	#port_page_desc > h1 {
		font-size: 4rem;
	}
	
	#port_page_desc > p {
		width: 50rem;
		font-size: 1.7rem;
	}

	.port_page_port_div_dev {
		height: 450rem;
		margin-top: 10rem;
	}

	.imgs_container {
		height: 60.5%;
		top: 10.5%;
	}
		
	.port_page_img_wrapper {
		height: 60.5%;
		top: 10.5%;
	}

	.port_page_line {
		margin-top: -15rem;
	}


}