@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Cardo');
@import url('https://fonts.googleapis.com/css?family=Poiret+One');
@import url('https://fonts.googleapis.com/css?family=Special+Elite');

body{
	font-family: "Open Sans";
	font-weight: lighter;
}

h1, h2, h3, h4, h5, h6{
	font-family: Cardo;
}

h1{
	text-align: center;
	font-size: 100%;
	text-transform: uppercase;
	margin: 48px 0px;
	max-width: 100%;
}

.oh2v-container-title{
	font-size: 2em;
	font-weight: bold;
	margin-bottom: 8px;
}

main{
	font-size: 1rem;
	margin-top: 68px;
}

.hr-white{
	border-color: #FFF;
}

.oh2v-container{
	padding-bottom: 48px;
}

/*
 * 
 * ERROR 404
 *
 */

.error-404-container{
	text-align: center;
	margin-bottom: 64px; 
}

/*
 * 
 * NAV 
 *
 */

.nav-oh2V-logo{
	max-width: 64px;
	max-height: 64px
}

.navbar{
	font-family: Cardo;
	font-weight: normal;
	font-size: 32px;
	background-color: #FFF;
	box-shadow: 0px 0px 32px #444;
}

.navbar-toggler{
	color: #018A9C;
}

.nav-link {
	color: #018A9C;
}

.nav-item.active a{
	padding-bottom: 0;
	border-bottom: 2px solid #FF7A00;
}

.navbar-toggler{
	font-size: 2.25rem;
}

/*
 * 
 * JUMBOTRON 
 *
 */

.jumbotron{
	margin-bottom: 0;
	border-radius: 0;
}
.jumbotron h1.OH2V-Title, .jumbotron .h1.OH2V-Title{
	color: #018A9C;
}

.OH2V-Title{
	margin-top: 16px;
	font-size: 2rem;
	margin-bottom: 0;
}

.nowrap{
	white-space: nowrap;
}


.jumbotron .container{
	margin: 16px auto;
	overflow: auto;
}

.jumbotron p{
	font-size: 1rem;
	margin-bottom: 16px;
}

/*
 * 
 * WELCOME CONTAINER 
 *
 */

.welcome-container{
	background-color: #FF7A00;
	background-image: url("./images-interface/header-bg.jpg");
	background-size: 100%;
	background-position: center;
	overflow: auto;
}

.welcome-container .container{
	background-color: #FFF;
}

.main-oh2V-logo-in-title{
	height: 32px;
	margin-bottom: 8px;
}

 /*
 * 
 * PRESENTATION CONTAINER 
 *
 */

.presentation-container{
	background-color: #018A9C;
	/* background-image: url("./images-interface/presentation-bg.png"); */ /* Removed image because (1) heavy so not mobile friendly, (2) on a responsive behaviour don't size correctly  */ 
	background-size: 100%;
	background-position: center;
	color: #FFF;
	overflow: auto;
}

 /*
 * 
 * AGENDA CONTAINER 
 *
 */

.agenda-title-container{
	/*background-color: #E0E0E0;*/
	background-color: #FFF;
	color: #FF7A00;
	/*background-image: url("./images-interface/agenda-bg.jpg");*/
	background-size: 100%;
	background-position: center;
	overflow: auto;
	/*border-top: 8px solid #FF7A00;
	border-bottom: 8px solid #FF7A00;*/
}



.agenda-content-container{
	background-color: #FFF;
	overflow: auto;
}

.agenda-container hr{
	border-color: #FF7A00;
}

.agenda-item-title-container{
	background-color: #FF7A00;
	padding: 8px 32px;
}

.agenda-item-container:first-child{
	margin-top: 0;
}

.agenda-item-wrapper{
	padding-top: 16px
}

.agenda-item-container{
	margin: 64px 0;
	padding: 8px;
	background-color: #FFF;
	/*border: 1px solid #FF7A00;*/
}
.agenda-item-list{
	padding: 0;
}
.agenda-item-list li{
	list-style-type: none;
}
.agenda-item-container sup{
	font-family: 'Cardo';
	vertical-align: -2px;
	font-weight: bold;
	margin: 0 32px;
	color: #666;
	width: 50px;
	display: inline-block;
}
.agenda-item-container p{
	margin: 0;
	color: #018A9C;
}
.agenda-item-container h2{
	font-family: "Cardo";
	color: #FFF;
	margin-top: 8px;
}

.agenda-value{
	color: #018A9C;
}


/*
 *
 * ARTICLE CONTAINER
 *
 *
 */


.article-container{
	margin-bottom: 64px; 
}

.article-container hr{
	border-color: #FF7A00;
}

.article-container h2{
	margin: 48px 0 16px;
}

.article-container h3{
	color: #FF7A00;
	margin: 48px 0 16px;
	font-weight: bold;
}

.card-body h3{
	font-size: 1.5rem;
	margin: auto;
	text-align: center;
}

.article-container .article-img-illustration{
	margin: auto;
	display: block;
}

.card{
	border-color: #FF7A00;
}

.card ul{
	padding-left: 8px;
}
.card li{
	font-size: 18px;
	list-style-type: none;
	margin: 0;
}
 /*
 * 
 * FOOTER 
 *
 */

.footer{
	color: #FFF;
	width: 100%;
	background-color: #00434C;
	overflow: auto;
}

.footer p{
	text-align: center;
	margin: 32px 0; 
}




/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/
 
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
 
/* 
Extra small devices (portrait phones, less than 544px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/
 
 
/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) { 
	.OH2V-Title{
		font-size: 4.5rem;
	}

	.main-oh2V-logo-in-title{
		height: 64px;
		margin-bottom: 28px;
	}
 	
 	.jumbotron p{
 		font-size: 1.5rem;
 	}
	.oh2v-container-title{
		font-size: 3rem;
	}
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
	.OH2V-Title{
		margin-top: 48px;
	}
	.jumbotron p{
		margin-bottom: 48px;
	}
	.nav-item{
		font-size: 80%;
	}
	.oh2v-container-title{
		font-size: 4.5rem;
	}
	.agenda-item-list li{
		display: inline-block;
	}

	.main-oh2V-logo-in-title{
		height: 128px;
		margin-bottom: 28px;
	}

 	main{
 		font-size: 1.5rem;
 	}
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	.nav-item{
		font-size: 100%;
	}
	.oh2v-container-title{
		font-size: 5rem;
		letter-spacing: 10px
	}
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
    
}