/* felipa-regular - latin */
@font-face {
  font-family: 'Felipa';
  font-style: normal;
  font-weight: 400;
  src: url('../webfonts/felipa-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Felipa'), local('Felipa-Regular'),
       url('../webfonts/felipa-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../webfonts/felipa-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../webfonts/felipa-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../webfonts/felipa-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../webfonts/felipa-v7-latin-regular.svg#Felipa') format('svg'); /* Legacy iOS */
}

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../webfonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url('../webfonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../webfonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../webfonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../webfonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../webfonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

* {
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
}
body {
	background-color: #faf8ff;
	margin: 0;
	padding: 0;
	font-family: 'Roboto',Helvetica, sans-serif;
}
/* ============================================================================== */
/* ===================================== Logo =================================== */
/* ============================================================================== */
/* Header bar */
.head-style {
	position: fixed;
	background-color: #060030;
	width: 100%;
	height: 80px;
	top: 0;
	left: 0;
	right: 0;
	border-bottom: 2px solid rgb(0,0,168);
	padding: 0;
	margin: 0;
	z-index: 1;
}
.l-container {
	position: absolute;
	width: 40%;
	height: 80%;
	top: 12%;
	left: 3%;
	padding: 0 0 0 2%;
	overflow: none;
}
.logo {
	position: relative;
	max-width: 90%;
	max-height: 80%;
	padding: 0;
}

/* ============================================================================== */
/* ================================== End of Logo =============================== */
/* ============================================================================== */

/* ============================================================================== */
/* ===================================== Begin Menu ============================= */
/* ============================================================================== */
/* Menu icon */
.menu-icon {
	display: inline-block;
	cursor: pointer;
}

.bar1, .bar2, .bar3 {
	width: 35px;
	height: 5px;
	background-color: #fff;
	margin: 6px 0;
	z-index: 5;
	-webkit-transition: 0.4s;
		-ms-transition: 0.4s;
		 -o-transition: 0.4s;
			transition: 0.4s;
}

.bar1:hover, .bar2:hover, .bar3:hover {
	background-color: #a62626;
}

	/* Rotate first bar */
.change .bar1 {
	-webkit-transform: rotate(-45deg) translate(-9px, 6px);
		-ms-transform: rotate(-45deg) translate(-9px, 6px);
			transform: rotate(-45deg) translate(-9px, 6px);
}

	/* Fade out the second bar */
.change .bar2 {
	opacity: 0;
}

	/* Rotate last Bar */
.change .bar3 {
	-webkit-transform: rotate(45deg) translate(-8px, -8px);
		-ms-transform: rotate(45deg) translate(-8px, -8px);
			transform: rotate(45deg) translate(-8px, -8px);
}

/* Menu */ 
.menu {
	position: absolute;
	right: 4%;
	margin-top: 4%;
}
.topnav-overlay {
	height: 0%;
	width: 100%;
	position: fixed;
	z-index: 3;
	top: 80px;
	left: 0;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.8);
	overflow-y: hidden;
	-webkit-transition: 0.5s;
		-ms-transition: 0.5s;
		 -o-transition: 0.5s;
			transition: 0.5s;
}
.overlay-content {
	position: relative;
	top: 25%;
	width: 100%;
	text-align: center;
	margin: 30px auto 0 auto;
	padding: 0;
	list-style: none;
}

.overlay-content a {
	padding: 8px;
	text-decoration: none;
	list-style: none;
	font-size: 30px;
	color: #818181;
	display: block;
	-webkit-transition: 0.5s;
		-ms-transition: 0.5s;
		 -o-transition: 0.5s;
			transition: 0.5s;
}
/* ============================================================================== */
/* ===================================== End of Menu ============================ */
/* ============================================================================== */

/* ============================================================================== */
/* ===================================== Main Begin ============================ */
/* ============================================================================== */
.serv-container {
	display: block;
	float: left;
	clear: right;
	width: 100%;
	margin-top: 25%;
	background-color: #faf8ff;
}
.serv-container h3, .serv-container p {
	text-align: center;
}
.row-container  {
	margin: 0 5%;
	font-family: 'Roboto',Helvetica, sans-serif;
}
.row-container h3 {
	background-color: #f2f2f2;
	border-radius: 5px;
	-webkit-box-shadow: 0 4px 8px 0 rgba(120, 117, 134,0.5);
			box-shadow: 0 4px 8px 0 rgba(120, 117, 134,0.5);
	padding: 2%;
	text-align: center;
}
p {
	font-size: 0.9em;
}
.info-container {
	display: block;
	float: left;
	clear: both;
	width: 100%;
	background-color: #faf8ff;
	margin-bottom: 20%;
}
.card, .pro-card {
	background-color: #4660eb;
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0,0.5);
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0,0.5);
	border-radius: 5px;
	max-width: 80%;
	margin: auto auto 5% auto;
	padding: 3%;
	text-align: center;
	font-family: arial;
	color: #fff;
}

.fa-briefcase, .fa-drafting-compass, .fa-industry {
	color: #a62626;
	font-size: 1.5em;
	padding: 0;
	margin: 0;
}
.fa-vial, .fa-crown, .fa-globe-africa, .fa-users {
	color: #a62626;
	font-size: 1.7em;
	padding: 0;
	margin: 10% 0 0 0;
}
.row-container h4 {
	background-color: #a62626;
	padding: 10px;
	color: #fff;
	border-radius: 5px 30px;
	border: 2px outset #a62626;
}
.proc-container {
	display: block;
	float: left;
	clear: both;
	width: 100%;
	margin-bottom: 5px;
}
.pro-card {
	-webkit-transition: 0.5s;
		-ms-transition: 0.5s;
		 -o-transition: 0.5s;
			transition: 0.5s;
	z-index: 0;
	border-radius: 40px 10px;
}
.pro-card:hover {
	background-color: #a62626;
	-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
			transform: scale(1.1);
	z-index: 0;
	border-radius: 10px 40px;
}
/* Collapse section */
.collapsible {
	background-color: #060030;
	color: #fff;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
}
.active, .collapsible:hover {
	background-color: #a62626;
}

#collapse {
	padding: 0 18px;
	display: none;
	overflow: hidden;
}
.years, .specialists, .countries, .ded-personnel {
	padding-top: 0;
}
/* Counter */
.count {
	color:white;
	margin: 15px 0 0 0;
	font-size:20px;
}

/* ============================================================================== */
/* ===================================== Main End =============================== */
/* ============================================================================== */

/* ============================================================================== */
/* ==================================== Footer Begin ============================ */
/* ============================================================================== */
footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-color: #060030;
	margin-top: 5%;
	z-index: 6;
}
.soc-container {
	width: 100%;
}
.soc-container:after {
	content: "";
	display: table;
	clear: both;
}
.col {
	float: left;
	width: 33.33%;
	margin: 0;
	text-align:center;
	overflow: auto;
}

.social-media .fab{
	margin: 8% 8% 8% 0;
	padding: 8% 0;
	font-size: 1.5em;
	width: 3%;
	text-align: left;
	text-decoration: none;
}
.fa-facebook:hover, .fa-twitter:hover, .fa-linkedin-in:hover {
	color: #a62626;
}
.fa-facebook, .fa-twitter, .fa-linkedin-in {
	color: #fff;
}
/* ============================================================================== */
/* ==================================== Footer End   ============================ */
/* ============================================================================== */

/* ============================================================================== */
/* ==================================== Media Queries  ========================== */
/* ============================================================================== */
@media screen and (max-height: 375px){
	.overlay-content {
		top: 5%;
		margin: 30px auto 0 auto;
	}
}
@media screen and (max-height: 420px) {
	.overlay-content {
		top: 3%;
	}
}
@media screen and (min-width: 500px) {
	.serv-container {
		margin-top: 14%;
	}
	.soc-container {
		width: 25%;
		margin: 0 auto;
	}
	.social-media .fab{
		padding: 10px 0;
		margin: 5px 0;
		width: 50px;
		text-align: center;
	}
}
@media screen and (min-width: 700px) {
	.menu {
		margin-top: 2%;
	}
	.serv-container {
		margin-top: 10%;
	}
	.card {
		float: left;
		max-width: 30%;
		height: 240px;
		margin: 1% 1% 1% 2%;
		padding: 3% 1%;
	}
	.pro-card {
		float: left;
		width: 30%;
		height: 240px;
		margin: 0 1% 1.2% 1%;
	}
	.prep {
		margin-left: 3%;
	}
	.prep, .con, .opps {
		padding-top: 2%;
	}
	.row-container:after {
		content: "";
		display: table;
		clear: both;
	}
	.info-container {
		margin-bottom: 10%;
	}
	.years, .specialists, .countries, .ded-personnel{
		width: 30%;
		margin-left: 10%;
		margin-right: 10%;
		padding-top: 0;
		height: 150px;
	}

}

@media screen and (min-width: 900px) {
	.serv-container {
		margin-top: 8%;
	}
	.years, .specialists, .countries, .ded-personnel {
		padding-top: 0;
	}


}

@media screen and (min-width: 1200px) {
	.menu {
		margin-top: 1%;
	}
	.serv-container {
		margin-top: 6%;
	}
	.serv1, .serv2, .serv3, .prep, .con, .opps {
		width: 25%;
	}
	.serv1{
		margin-left: 9%;
	}
	.pro-card {
		margin-bottom: 1.1%;
	}
	.prep {
		margin-left: 10%;
	}

	.years, .specialists, .countries, .ded-personnel {
		width: 18%;
		margin-left: 2.3%;
		margin-right: 2.2%;
	}
	.years {
		margin-left: 6%;
	}
	.info-container {
		margin-bottom: 6%;
	}

	.row-container h3 {
		padding: 0.5%;
	}
	.row-container h4 {
		padding: 0.5% 1%;
	}
}

@media screen and (min-width: 1580px) {
	.serv-container {
		margin-top: 4%;
	}
	.row-container {
		margin: 0 10%;
	}

	.serv1, .serv2, .serv3, .prep, .con, .opps {
		width: 20%;
	}
	.serv1 {
		margin-left: 17%;
	}
	.pro-card {
		margin-bottom: 0.5%;
	}
	.prep {
		margin-left: 18%;
	}
	.years, .specialists, .countries, .ded-personnel {
		width: 15%;
	}
	.years {
		margin-left: 13%;
	}
	.info-container {
		margin-bottom: 3%;
	}
	.collapsible {
		display: none;
	}
	#collapse {
		display: block;
	}

}

@media screen and (min-width: 1700px) {
	.menu {
		margin-top: 0.5%;
	}
	.serv-container {
		margin-top: 3%;
	}

	#collapse {
		padding: 0%;
	}
}