﻿:root {
	--blue: darkblue;
	--blue_content: #253791 !important;
}

@font-face {
	font-family: 'Averta Bold';
	src: url('../Assets/css/fonts/Averta Bold.otf') format('opentype');
}

@font-face {
	font-family: 'Averta';
	src: url('../Assets/css/fonts/Averta.otf') format('opentype');
}

@font-face {
	font-family: 'Averta Semibold';
	src: url('../Assets/css/fonts/Averta Semibold.otf') format('opentype');
}

@font-face {
	font-family: 'Averta Extra Bold';
	src: url('../Assets/css/fonts/Averta Extra Bold.otf') format('opentype');
}

* {
	margin: 0;
	padding: 0;
}

.jumbotron {
	padding: 0;
	margin: 0;
	background-size: cover;
	padding: 5em inherit;
}

.title_01 {
	font-family: 'Averta Extra Bold';
	color: var(--blue);
	margin-bottom: 25px;
}

.title_02 {
	font-family: 'Averta Semibold';
	color:red;
}
p {
	font-family: 'Averta Semibold';
	color: var(--blue_content);
	text-align: justify;
/*	font-weight: bold;*/
}

.container {
	padding-top: 50px;
	padding-bottom: 40px;
}

.responsive {
	width: 100%;
	height: auto;
}

ul{
	margin-top: 30px;
}

ul > li{
	margin: 20px;
}

img.responsive {
	padding-right: 15px;
}


.rlogo {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.clogo {
	flex: 25%;
	max-width: 25%;
	padding: 0 4px;
}

.clogo img {
	margin-top: 8px;
	vertical-align: middle;
	width: 90%;
}


/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
	.img_header {
		display: none;
	}

	.clogo {
		flex: 100%;
		max-width: 50%;
	}
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
	.img_header {
		display: none;
	}

	.clogo {
		flex: 100%;
		max-width: 50%;
	}
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
	.img_header {
		display: none;
	}
	.clogo {
		flex: 50%;
		max-width: 25%;
	}
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
	.img_header2 {
		display: none;
	}

	.clogo {
		flex: 50%;
		max-width: 25%;
	}
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	.img_header2 {
		display: none;
	}

	.clogo {
		flex: 50%;
		max-width: 25%;
	}
}