/* COLORS */
.main-color{
	color: #618199;
}
.dark-color{
	color: #214764;
}

.new_main_color{
	color: #008CAD;
}
.new_dark_color{
	color: #003743;
}
.new_light_color{
	color: #70D8F0;
}
.new_light_accent{
	color: #AEE4F1;
}
.new_dark_accent{
	color: #40B9D5;
}

img{
	max-width: 100%;
}
.no-padding{
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.centeres{
	text-align: center;
}
html,body{
	min-height: 100vh;
	position: relative;
	background: linear-gradient(90deg, #fff 0, #fff 30%, #D5E4F0);
}
/* HEADER */
header{
	text-transform: uppercase;
	background: #008CAD;
	color: white;
}
header a, header a:active, header a:focus, header a:hover{
	color: white;
}
header .nav{
	float: right;
}
header .nav-item.open, header .nav-link{
	background-color: #008CAD !important;
}
header .nav-item.open{
	text-decoration: underline;
}
header .dropdown-item a{
	max-width: 480px;
	white-space: pre-wrap;
	overflow: auto;
	color: #008CAD;
}
header .dropdown-item{
	width: 500px;
}
header .nav-stacked .dropdown-item{
	width: 100%;
}
header .nav-stacked .dropdown-item a{
	max-width: 100%;
}
#pre-body{
	overflow-y: hidden;
	background: linear-gradient(90deg, #fff 0, #fff 50%, #D5E4F0);
}
#pre-body .titling{
	padding: 18px 0 12px 0;
	font-weight: 700;
	font-size: 2.2em;
	color: #003743;
	float: right;
	text-transform: uppercase;
}

.titling a{
	color: #003743 !important;
}
.titling a:hover{
	text-decoration: none;
}
#pre-body .subtitle{
	font-size: 1.1em;
	text-transform: uppercase;
	float: right;
	padding: 0;
	color: #999;
}
#header_logo{
	z-index: 999;
	display: block;
	margin: 12px auto;
}
.hamburger{
	font-size: 1.4em;
	padding: 12px;
	display: none;
}

.nav-item.menu-mobile{
	display: none;
	padding: 0;
}
.nav-item.menu-mobile a{
	font-size: 1.2em;
}
/* FOOTER */
footer{
	background: #008CAD;
	color: white;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	font-size: 0.8em;
	line-height: 2em;
	text-align: right;
}
/* MAIN PAGE */
.direction_item{
	border-bottom: solid 3px #008CAD;
	text-align: center;
	box-sizing: border-box;
}
.direction_item div{
	margin: auto;
	width: 75%;
	padding: 24px;
}
.direction_item i{
	font-size: 5em;
}
.direction_item p{
	font-size: 1.2em;
	text-transform: uppercase;
	padding: 24px 0 0 0;
	margin: 0;
}
.direction_item.dark:hover{
	background: #40B9D5;
	border-color: #40B9D5;
}
.direction_item.light:hover{
	background: #fff;
}
.purpose{
	font-size: 1.2em;
}
.principle{
	text-align: center;
	font-size: 0.8em;
	padding: 6px;
}
.principle div{
	border-radius: 12px;
	padding: 12px;
}
.principle div i{
	font-size: 4em;
	margin-bottom: 12px;
	color: #003743;
}
.principle.dark div i{
	color: white;
}
/* BASIC */
.main{
	padding-bottom: 36px;
}
.text-block{
	padding: 24px 0;
}
.uppercase{
	text-transform: uppercase;
}
.accent{
	font-size: 2em;
	text-align: center;
	color: #003743;
	font-weight: 700;
}
.accent-light{
	font-size: 1.2em;
	font-weight: 600;
	text-align: justify;
}
.accent-paragraph{
	text-transform: uppercase;
	color: #333;
	margin: 12px 0 24px 0;
}
strong{
	color: #333;
}
.dark{
	background: #008CAD;
	color: white !important;
}
.light{
	border-color: #008CAD;
	color: #008CAD !important;
}
/* CAROUSEL */
#carousel-example-generic{
	height: 480px;
	overflow: hidden;
	position: relative;
}
#carousel-example-generic img{
  object-fit: cover;
  object-position: top center;
  height: 100%;
  width: 100%;
}
.carousel-inner, .carousel-item{
	height: 100%;
}
.carousel-caption{
	position: absolute;
	left: 0;
	bottom: 24px;
	width: 100%;
	padding: 2px 12px 2px 48px ;
	background: rgba(255,255,255,0.7);
	font-size: 0.7em;
	text-align: left;
	text-shadow: none;
}
.carousel-caption p{
	margin-bottom: 0;
}
.carousel-caption a{
	color: #1A2833;
	text-decoration: none;
}
.carousel-caption a:hover{
	text-decoration: underline;
}
.carousel-indicators {
bottom: -16px;
}
/* SIMPLE PAGE */
.simple-page .page-header{
	font-size: 1.8em;
	font-weight: 600;
	text-transform: uppercase;
	color: #003743;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	width: 100%;
	margin-top: 24px;
	margin-bottom: 24px;
	line-height: 2em;
}
.simple-page h1{
	font-size: 1.2em;
	font-weight: 400;
	color: #008CAD;
	text-transform: uppercase;
	margin: 12px 0;
}
.simple-page li{
	padding-bottom: 12px;
}
.card-img-div{
	height: 25vh;
	width: 100%;
	overflow: hidden;
	position: relative;
}
.card-img-div.fullscreen{
	z-index: 999;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	padding: 3vh 3vw;
	background: rgba(99,99,99,0.7);
}
.card-fullscreen-label{
	position: fixed;
	left: 0;
	bottom: 5vh;
	color: #333;
	background: white;
	width: 100%;
	padding: 0 20vw;
	display: none;
}
.card-img-div.fullscreen .card-fullscreen-label{
	display: block;
}
.card-img-div img{
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100%;
}
.card-img-div.fullscreen img{
	object-fit: contain;
}
.image-preview:hover{
	border: 1px solid #008CAD;
	cursor: pointer;
}
.modal-content{
	width: 50vw;
	height: 75vh;
	margin: auto;
}

/* ADAPTIVE */

@media (max-width: 1199px){
	#pre-body .titling{
	font-size: 1.8em;
	padding-bottom: 6px;
	}
}

@media (max-width: 991px) {
	#carousel-example-generic{
		height: 240px;
	}
	#pre-body .titling{
	font-size: 1.4em;
	line-height: 1.2em;
	padding-bottom: 3px;
	}
	#pre-body .subtitle{
		font-size: 0.8em;
		padding-bottom: 24px;
	}
	header .nav{
		float: left;
	}
	.hamburger{
		background: #008CAD;
		width: 100vw;
		display: block;
	}
}

@media (max-width: 543px) {
	br{
		display: none;
	}
	.container{
		padding: 12px;
	}
	header{
		background: none;
	}
	#pre-body{
		border-top: 12px solid #008CAD;
	}
	.principle div{
		font-size: 1.2em;
		text-transform: uppercase;
		font-weight: 600;
		text-align: center;
		padding: 3px 24px 12px 24px;
	}
	.principles .principle div{
		border-bottom: 1px solid #AEE4F1;
		border-radius: 0px;
		text-align: right;
		font-size: 1em;
	}
	.principle div i{
	font-size: 2em;
	margin-bottom: 12px;
	color: #003743;
	float: left;
	margin-right: 12px;
	}
	.principles i{
		line-height: 2em;
	}
	.direction_item div{
		padding: 12px 6px;
	}
	.direction_item i{
		font-size: 2em;
	}
	.direction_item p{
		font-size: 1em;
		padding: 6px;
	}
	.accent{
		font-size: 1.4em;
	}
	.simple-page .page-header{
		font-size: 1.4em;
		line-height: 1.1em;
	}
}