body { font-family: 'Open Sans', sans-serif; background-color: #fff; position: relative; }

.color-blue   { color: #78A6D4 !important; }
.color-orange { color: #F4B12C !important; }
.color-green  { color: #4DB252 !important; }
.color-black  { color: #000 !important; }
.color-red    { color: #e30513 !important; }
.color-pink   { color: #dd61c2 !important; }
.color-light  { color: #aaa !important; }
.color-white  { color: #fff !important; }
.color-dark   { color: #212529 !important; }
.color-grey   { color: #6c757d !important; }

.bg-blue     { background-color: #78A6D4; }
.bg-orange   { background-color: #F4B12C; }
.bg-green    { background-color: #4DB252; }
.bg-black    { background-color: #000000; }
.bg-grey     { background-color: #606060; }
.bg-red      { background-color: #e30513; }
.bg-pink     { background-color: #dd61c2; }
.bg-light    { background-color: #aaaaaa; }
.bg-darkgrey { background-color: #222; }

.bg-animated { background-image:none !important; animation: fadeIt 12s ease-in-out; animation-iteration-count: infinite; }

@keyframes fadeIt {
  0%   { background-color: #78A6D4; }
  30%  { background-color: #78A6D4; }
  35%  { background-color: #F4B12C; }
  65%  { background-color: #F4B12C; }
  70% { background-color: #4DB252; }
  95% { background-color: #4DB252; }
  100% { background-color: #78A6D4; }
}


.bt { border-top: 1px solid #ddd; }
.br { border-right: 1px solid #ddd; }
.bb { border-bottom: 1px solid #ddd; }
.bl { border-left: 1px solid #ddd; }

.uc { text-transform: uppercase; }
.oh { overflow: hidden; }
.nw { white-space: nowrap; }

.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }

.clear { clear: both; }





/*  --------------------------
 *	Interface du site
 *  -------------------------- */

#main-nav { position: fixed; top: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.8); z-index: 1010; }
#main-nav a { color: #fff; font-weight: 400; text-transform: uppercase; }
#main-nav a span { position: relative; top: -5px; }
#main-nav a:hover, #main-nav a.active { background-color: #666; }
#main-nav a.hover-blue:hover, #main-nav a.hover-blue.active { background-color: #78A6D4; }
#main-nav a.hover-orange:hover, #main-nav a.hover-orange.active { background-color: #F4B12C; }
#main-nav a.hover-green:hover, #main-nav a.hover-green.active { background-color: #4DB252; }
#main-nav a.hover-red:hover, #main-nav a.hover-red.active { background-color: #e30513; }
#main-nav a.hover-pink:hover, #main-nav a.hover-pink.active { background-color: #dd61c2; }

#main-nav a.bg-menu-home.active { animation: fadeIt 12s ease-in-out; animation-iteration-count: infinite; }


#page-wrapper { background-color: #fff; transition: all 0.2s ease; }

.page-header { min-height: 100vh; padding-top: 66px; }
.page-header-half { min-height: 50vh; }
.page-header h1, .page-header h2 { font-family: 'Kavoon', cursive; font-size: 80px; }
.page-header p.lead { /* font-family: 'Rubik', sans-serif; */ font-size: 36px; }
.header-project p.lead { font-size: 30px; }

.header-scroll a i { transition: all 0.3s ease-in-out; }
.header-scroll a:hover i { transform: rotate(360deg);  }


.container-fluid { max-width: 1440px; }

#sup-footer { background-color: rgba(0,0,0,0.9); color: #aaa; font-weight: 400; font-size: 13px; }
#sup-footer a { color: #aaa; }
#sup-footer .support-link { display: block; padding: 15px 15px; text-decoration: none; }
#sup-footer .support-link:hover { background-color: #F4B12C; }
#sup-footer .support-link span { position:relative; top: -5px; }


#contact-info .contact-title { font-size: 32px; }
#contact-info .contact-infos { font-size: 24px; }

/* Bandeau cookies */
#cookiechoice { font-size: 15px; position: fixed; z-index: 1000; left: 1.5em; bottom: 1.5em; width: 230px; padding: 1.5em; border-radius: 11px; background-color: rgba(255,255,255,0.9); box-shadow: 0 6px 40px rgba(0,0,0,0.4); }

/*  --------------------------
 *	Composants
 *  -------------------------- */

/* Boutons classiques */

.btn-blue { background-color: #78A6D4; border-color: #78A6D4; color: #fff; }
.btn-blue:hover, .btn-blue:focus, .btn-blue:active, .btn-blue.active { background-color: #6599ce; border-color: #518dc8; color: #fff; }
.btn-blue.disabled:hover, .btn-blue.disabled:focus, .btn-blue.disabled:active, .btn-blue.disabled.active, .btn-blue[disabled]:hover, .btn-blue[disabled]:focus, .btn-blue[disabled]:active, .btn-blue[disabled].active, fieldset[disabled] .btn-blue:hover, fieldset[disabled] .btn-blue:focus, fieldset[disabled] .btn-blue:active, fieldset[disabled] .btn-blue.active { background-color: #78A6D4; border-color: #78A6D4; color: #fff; }

.btn-orange { background-color: #F4B12C; border-color: #F4B12C; color: #fff; }
.btn-orange:hover, .btn-orange:focus, .btn-orange:active, .btn-orange.active { background-color: #f3a814; border-color: #e19a0c; color: #fff; }
.btn-orange.disabled:hover, .btn-orange.disabled:focus, .btn-orange.disabled:active, .btn-orange.disabled.active, .btn-orange[disabled]:hover, .btn-orange[disabled]:focus, .btn-orange[disabled]:active, .btn-orange[disabled].active, fieldset[disabled] .btn-orange:hover, fieldset[disabled] .btn-orange:focus, fieldset[disabled] .btn-orange:active, fieldset[disabled] .btn-orange.active { background-color: #F4B12C; border-color: #F4B12C; color: #fff; }

.btn-green { background-color: #4DB252; border-color: #4DB252; color: #fff; }
.btn-green:hover, .btn-green:focus, .btn-green:active, .btn-green.active { background-color: #45a04a; border-color: #3e8e42; color: #fff; }
.btn-green.disabled:hover, .btn-green.disabled:focus, .btn-green.disabled:active, .btn-green.disabled.active, .btn-green[disabled]:hover, .btn-green[disabled]:focus, .btn-green[disabled]:active, .btn-green[disabled].active, fieldset[disabled] .btn-green:hover, fieldset[disabled] .btn-green:focus, fieldset[disabled] .btn-green:active, fieldset[disabled] .btn-green.active { background-color: #4DB252; border-color: #4DB252; color: #fff; }

.btn-red { background-color: #e30513; border-color: #e30513; color: #fff; }
.btn-red:hover, .btn-red:focus, .btn-red:active, .btn-red.active { background-color: #ca0411; border-color: #b1040f; color: #fff; }
.btn-red.disabled:hover, .btn-red.disabled:focus, .btn-red.disabled:active, .btn-red.disabled.active, .btn-red[disabled]:hover, .btn-red[disabled]:focus, .btn-red[disabled]:active, .btn-red[disabled].active, fieldset[disabled] .btn-red:hover, fieldset[disabled] .btn-red:focus, fieldset[disabled] .btn-red:active, fieldset[disabled] .btn-red.active { background-color: #e30513; border-color: #e30513; color: #fff; }

.btn-pink { background-color: #dd61c2; border-color: #dd61c2; color: #fff; }
.btn-pink:hover, .btn-pink:focus, .btn-pink:active, .btn-pink.active { background-color: #d84cba; border-color: #d437b2; color: #fff; }
.btn-pink.disabled:hover, .btn-pink.disabled:focus, .btn-pink.disabled:active, .btn-pink.disabled.active, .btn-pink[disabled]:hover, .btn-pink[disabled]:focus, .btn-pink[disabled]:active, .btn-pink[disabled].active, fieldset[disabled] .btn-pink:hover, fieldset[disabled] .btn-pink:focus, fieldset[disabled] .btn-pink:active, fieldset[disabled] .btn-pink.active { background-color: #dd61c2; border-color: #dd61c2; color: #fff; }


/* Boutons outline */

.btn-outline-blue { color: #78A6D4; background-color: transparent; background-image: none; border-color: #78A6D4; border-width: 2px; font-weight: 600; }
.btn-outline-blue:hover { color: #fff; background-color: #78A6D4; border-color: #78A6D4; }
.btn-outline-blue:focus, .btn-outline-blue.focus { box-shadow: 0 0 0 0.2rem rgba(120,166,212, 0.5); }
.btn-outline-blue.disabled, .btn-outline-blue:disabled { color: #78A6D4; background-color: transparent; }
.btn-outline-blue:not([disabled]):not(.disabled):active, .btn-outline-blue:not([disabled]):not(.disabled).active, .show > .btn-outline-blue.dropdown-toggle { color: #212529; background-color: #78A6D4; border-color: #78A6D4; box-shadow: 0 0 0 0.2rem rgba(120,166,212, 0.5); }

.btn-outline-orange { color: #F4B12C; background-color: transparent; background-image: none; border-color: #F4B12C; border-width: 2px; font-weight: 600; }
.btn-outline-orange:hover { color: #fff; background-color: #F4B12C; border-color: #F4B12C; }
.btn-outline-orange:focus, .btn-outline-orange.focus { box-shadow: 0 0 0 0.2rem rgba(244,177,44, 0.5); }
.btn-outline-orange.disabled, .btn-outline-orange:disabled { color: #F4B12C; background-color: transparent; }
.btn-outline-orange:not([disabled]):not(.disabled):active, .btn-outline-orange:not([disabled]):not(.disabled).active, .show > .btn-outline-orange.dropdown-toggle { color: #212529; background-color: #F4B12C; border-color: #F4B12C; box-shadow: 0 0 0 0.2rem rgba(244,177,44, 0.5); }

.btn-outline-green { color: #4DB252; background-color: transparent; background-image: none; border-color: #4DB252; border-width: 2px; font-weight: 600; }
.btn-outline-green:hover { color: #fff; background-color: #4DB252; border-color: #4DB252; }
.btn-outline-green:focus, .btn-outline-green.focus { box-shadow: 0 0 0 0.2rem rgba(77,178,82, 0.5); }
.btn-outline-green.disabled, .btn-outline-green:disabled { color: #4DB252; background-color: transparent; }
.btn-outline-green:not([disabled]):not(.disabled):active, .btn-outline-green:not([disabled]):not(.disabled).active, .show > .btn-outline-green.dropdown-toggle { color: #212529; background-color: #4DB252; border-color: #4DB252; box-shadow: 0 0 0 0.2rem rgba(77,178,82, 0.5); }

.btn-outline-red { color: #e30513; background-color: transparent; background-image: none; border-color: #e30513; border-width: 2px; font-weight: 600; }
.btn-outline-red:hover { color: #fff; background-color: #e30513; border-color: #e30513; }
.btn-outline-red:focus, .btn-outline-red.focus { box-shadow: 0 0 0 0.2rem rgba(227,5,19, 0.5); }
.btn-outline-red.disabled, .btn-outline-red:disabled { color: #e30513; background-color: transparent; }
.btn-outline-red:not([disabled]):not(.disabled):active, .btn-outline-red:not([disabled]):not(.disabled).active, .show > .btn-outline-red.dropdown-toggle { color: #212529; background-color: #e30513; border-color: #e30513; box-shadow: 0 0 0 0.2rem rgba(227,5,19, 0.5); }

.btn-outline-pink { color: #dd61c2; background-color: transparent; background-image: none; border-color: #dd61c2; border-width: 2px; font-weight: 600; }
.btn-outline-pink:hover { color: #fff; background-color: #dd61c2; border-color: #dd61c2; }
.btn-outline-pink:focus, .btn-outline-pink.focus { box-shadow: 0 0 0 0.2rem rgba(221,97,194, 0.5); }
.btn-outline-pink.disabled, .btn-outline-pink:disabled { color: #dd61c2; background-color: transparent; }
.btn-outline-pink:not([disabled]):not(.disabled):active, .btn-outline-pink:not([disabled]):not(.disabled).active, .show > .btn-outline-pink.dropdown-toggle { color: #212529; background-color: #dd61c2; border-color: #dd61c2; box-shadow: 0 0 0 0.2rem rgba(221,97,194, 0.5); }

.btn-outline-white { color: #fff; background-color: transparent; background-image: none; border-color: #fff; border-width: 2px; font-weight: 600; }
.btn-outline-white:hover { color: #212529; background-color: #fff; border-color: #fff; }
.btn-outline-white:focus, .btn-outline-white.focus { box-shadow: 0 0 0 0.2rem rgba(255,255,255, 0.5); }
.btn-outline-white.disabled, .btn-outline-white:disabled { color: #fff; background-color: transparent; }
.btn-outline-white:not([disabled]):not(.disabled):active, .btn-outline-white:not([disabled]):not(.disabled).active, .show > .btn-outline-white.dropdown-toggle { color: #212529; background-color: #fff; border-color: #fff; box-shadow: 0 0 0 0.2rem rgba(255,255,255, 0.5); }

.btn-outline-dark { border-width: 2px; font-weight: 600; }
.btn-outline-secondary { border-width: 2px; font-weight: 600; }


.btn-xl { font-size: 1.6rem; padding: .8rem 1.4rem; }
.btn-outline-blue.btn-xl,
.btn-outline-orange.btn-xl,
.btn-outline-green.btn-xl,
.btn-outline-red.btn-xl,
.btn-outline-pink.btn-xl,
.btn-outline-white.btn-xl { border-width: 3px; }



.modal-content { border-radius: 0; }

.thumbnail-overlay { position: relative; }
.thumbnail-overlay .overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(244,177,44,0.4); opacity: 0; transition: all ease 0.3s; }
.thumbnail-overlay:hover .overlay { opacity: 1; }


/* Blocs avec picto */
.bloc-item a { text-decoration: none; color: #333; border-radius: 20px; }
.bloc-item a:hover { background-color: #fafafa; }
.bloc-item a { text-decoration: none; color: #333; }
.bloc-item h3 {  }


/*  --------------------------
 *	Contenus dynamiques
 *  -------------------------- */

.dynamic-content .dynamic-row { padding: 15px 0; }

.dynamic-content .row-text h2 { font-size: 26px; font-weight: 600; padding-bottom: 15px; }
.dynamic-content .row-text h3 { font-size: 22px; font-weight: 600; padding-bottom: 15px; }
.dynamic-content .row-text a { color: #F4B12C; font-weight: 600; }

.dynamic-content .row-gallery { padding-bottom: 30px; }
.dynamic-content .row-gallery .gallery-item { display: block; width: 33.33%; float: left; border: 2px solid #fff; }





/* ------------------------------------------------------------------ */
/* Projets
/* ------------------------------------------------------------------ */


#project-filter { z-index: 1000; background-color: rgba(255,255,255,0.9); }
#project-filter .btn-link { text-decoration: none !important; }
#project-filter .toggle-filter span { position: relative; top: -6px; }

/* .project-item-container { transition: all ease 0.3s; } */

.project-item a { text-decoration: none !important; color: #333; border: none; transition: all ease 0.3s; }
.project-item .card-img-top { border-radius: 0; padding:5px; }
.project-item .overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(244,177,44,0.3); opacity: 0; transition: all ease 0.3s; }
.project-item h3 { font-size: 1.5rem; color: #888; transition: all ease 0.3s; }
.project-item .fad { transition: all ease 0.3s; font-size: 1.5em; color: #888; }
.project-item:hover a { background-color: #fcfcfc; }
.project-item:hover h3 { color: #333; }
.project-item:hover .overlay { opacity: 1; }
.project-item:hover .fad { color: #888; transition: all ease 0.3s; }
.project-item:hover .picto-blue   { color: #78A6D4; }
.project-item:hover .picto-orange { color: #F4B12C; }
.project-item:hover .picto-green  { color: #4DB252; }
.project-item:hover .picto-red    { color: #e30513; }
.project-item:hover .picto-pink   { color: #dd61c2; }

#project-header-container { background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-color:  #333; background-size: cover; }
#project-header-overlay { position: absolute; z-index: 50; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5); }

.project-header { min-height: 50vh; padding-top: 66px; z-index: 100; position: relative; }
.project-header h1 { font-family: 'Kavoon', cursive; font-size: 80px; }
.project-header p.lead { font-family: 'Rubik', sans-serif; font-size: 30px; }

#project-carousel .carousel-inner { padding: 10px; border: 1px solid #ddd; }
#project-carousel .carousel-indicators { position: inherit; }
#project-carousel .carousel-indicators li { background-color: #222; }

/* ------------------------------------------------------------------ */
/* Contact
/* ------------------------------------------------------------------ */

#contact-form label { color: #333; }

#contact-form input[type=text],
#contact-form input[type=email],
#contact-form textarea { border-radius: 0; border: none; background-color: #eee; }

#contact-form .custom-checkbox .custom-control-label::before { border-radius: 0; border: none; background-color: #eee; }
#contact-form .custom-control-input:checked~.custom-control-label::before { border-color: #F4B12C; background-color: #F4B12C; }

#contact-form .form-control.is-invalid { background-color: rgba(227,5,19, 0.2); }
#contact-form .invalid-feedback { color: #e30513; font-weight: 600; }



/* ------------------------------------------------------------------ */
/* Recherche
/* ------------------------------------------------------------------ */

.search-result { text-decoration: none !important; }
.search-result .icon { border: 5px dashed #ddd; border-radius: 20px; }
.search-result h2 { color: #333; font-weight: 700; font-size: 22px; }
.search-result p.excerpt { color: #555; }


/* ------------------------------------------------------------------ */
/* Compétences
/* ------------------------------------------------------------------ */

/*
.function-item { transition: all ease 0.3s; border-radius: 20px; }
.function-item i, .function-item h3 { transition: all ease 0.3s; }
.function-item:hover { background-color: #fafafa; }
.function-item:hover i,
.function-item:hover h3 { color: red !important; }
*/




/* ------------------------------------------------------------------ */
/* Spécifique LG
/* ------------------------------------------------------------------ */

@media (max-width: 1199px) and (min-width:992px) {

	#main-nav a { font-size: 15px; }
	#main-nav a i { font-size: 1.52em; }
	#main-nav a span { top: -3px; }

	.page-header { padding-top: 56px; }

	.dynamic-content .row-gallery .gallery-item { width: 50%; }

}




/* ------------------------------------------------------------------ */
/* Spécifique MD
/* ------------------------------------------------------------------ */

@media (max-width: 991px) and (min-width:767px) {

	.col-border { border: none; }

}


/* ------------------------------------------------------------------ */
/* Spécifique Mobile SM
/* ------------------------------------------------------------------ */

@media(max-width:767px) {

	.col-border { border: none; }

	.page-header h1, .page-header h2 { font-size: 50px; }
	.page-header p.lead { font-size: 30px; }

	.header-project p.lead { font-size: 30px; }

	.project-header h1 { font-size: 50px; }
	.project-header p.lead { font-size: 30px; }

	.project-item .card-img-top { padding:3px; }
	#project-carousel .carousel-inner { padding: 5px; }

	.btn-xl { font-size: 1.25rem; padding: .5rem 1rem; }


	.dynamic-content .row-gallery .gallery-item { width: 50%; }

}


/* ------------------------------------------------------------------ */
/* Spécifique Mobile (encore plus petit)
/* ------------------------------------------------------------------ */

@media(max-width:575px) {

	#main-nav a { font-size: 11px; }

	.page-header { padding-top: 55px; }

	#footer { position: inherit; }

	.page-header h1, .page-header h2 { font-size: 33px; }
	.page-header p.lead { font-size: 19px; }

	.header-project p.lead { font-size: 19px; }

	.project-header h1 { font-size: 33px; }
	.project-header p.lead { font-size: 19px; }

	#page-content { margin-top: 0; }


	.page-section h2 { font-size: 22px; }
	.page-section .lead { font-size: 18px; }

	#bloc-list .bloc-item { border-bottom: 1px solid #eee !important; }
	#bloc-index .bloc-item:last-child { border-bottom: none; }
	#bloc-index .bloc-item h3 { font-size: 24px; }

	#contact-info .contact-title { font-size: 24px; }
	#contact-info .contact-infos { font-size: 20px; }

	#project-filter .toggle-filter i { font-size: 1.6em; }


	.btn-xl { font-size: 1.25rem; padding: .5rem 1rem; }

	.dynamic-content .row-gallery .gallery-item { width: 50%; }

}