/* CSS Document */
/* 
bleu marine : 080b16
bleu clair : c0d0f1
section, div, p, ul, li, img, header, footer, main, h1, h2, h3, span {border : 1px solid blue}
*/
@import url('https://fonts.googleapis.com/css2?family=Teko&display=swap');
body {max-width: 1440px; margin: auto; background-color: #ffffff; color: #080b16;}
body, h1, h2 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
header {border-bottom:2px solid #b8b8b8;}
#intro {border-bottom:0px dashed #ffffff;}
#caligrafik {width: 60%; margin: auto; text-align: justify;}
.serial-block {border-bottom:2px dashed #b8b8b8; padding: 1em 0;}
.qui-block {border-top:2px dashed #b8b8b8; padding: 1em 0;}
.serial-info {margin-top: 1.8em; font-size: 0.7em; line-height: 1.2em; text-align: center; color: gray;}
footer {border-top:2px solid #b8b8b8;}
.font-custom {font-family: 'Teko', sans-serif; color: #080b16;}
.point-rouge {font-size: 23px; color: red;}

/* =============== INDEX =============== */
.baseline {margin: 10px; text-align: center;font-size: 0.8em;}

/* =========================================
----		   LINKS	        ----
============================================ */
a:link {
color: #080b16;
text-decoration: none;
}
a:visited {
color: #080b16;
text-decoration: none;
}
a:hover {
color: #080b16;
text-decoration: none;
}
a:active {
color:#080b16;
}

/* =============== PORTFOLIO =============== */
.gallery img {
	position:relative;
	padding: 0px;
	display: block;
	top: 0;
/*	border: 1px solid #ffffff;
*/	-webkit-transition-property: border-color,top,box-shadow;
	-webkit-transition-property: border-color,top,-webkit-box-shadow;
	transition-property: border-color,top,-webkit-box-shadow;
	-o-transition-property: border-color,top,box-shadow;
	transition-property: border-color,top,box-shadow;
	transition-property: border-color,top,box-shadow,-webkit-box-shadow;
	-webkit-transition-duration: .2s;
	-o-transition-duration: 0.2s;
	   transition-duration: 0.2s;
	-o-transition-duration: .2s;
	   transition-duration: .2s;
	-webkit-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	   transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}
.gallery img:hover {
    top: -6px;
    border-color: #ffffff;
    -webkit-box-shadow: 0 10px 10px 0 rgba(0,0,0,.2);
            box-shadow: 0 10px 10px 0 rgba(0,0,0,.2);
}




/* =========================================
----		   COMMONS	        ----
============================================ */
.arrondi {border-radius: 10px; behavior: url(border-radius.htc);}

/* effest */

/* flash utilisé pour ice screen */
.flash :hover img {
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}


/* bouton */
.btn {
	color: #080b16;
	background-color: transparent;
	border: 1px #080b16 solid;
	font-size: 2.1rem;
	-webkit-transition: background-color 1s;
	-o-transition: background-color 1s;
	transition: background-color 1s;
	font-family: 'Teko', sans-serif;
}
 
.btn:hover {
	color: #ffffff;
	background-color:#d9d9d9;
	text-decoration: none;
	transition: all 1s;
}

/* ------------------------------------------------------------- */
/* ------------      MOBILE max width 991px     --------------- */
/* ------------------------------------------------------------- */


/* @media all and (max-width:991px) { */
@media all and (max-width:810px) {
	.baseline{margin: 6px; text-align: center;}
}