/*   Y O U R   C S S   S T Y L E S

** Add your CSS styles here
** Style all markdown content elements properly
** Use the markdown test file to check it: https://github.com/typemill/typemill/blob/master/content/00-Welcome/03-Markdown-Test.md
** You can activate and use the Tachyons CSS library: https://typemill.net/theme-developers/helper-functions#activate-tachyons

*/

article h1 {
	background-color:#F2A2A3;
}

article p {
	font-size:1.2rem;
	font-weight: 400;
}

time {
	font-family: 'Courgette';
  font-style: italic;
  font-weight: 400;
}

li p{
	margin-top:0;
}
/* latin */
p.facebook{
	text-align:center;
	margin-top:0;
}

div.flex-l{
	margin-bottom:0;
}
@font-face {
  font-family: 'Courgette';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/themes/aboutme/fonts/Courgette-Regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Gayathri';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(/themes/aboutme/fonts/Gayathri-Thin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Gayathri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/themes/aboutme/fonts/Gayathri-Regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Gayathri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/themes/aboutme/fonts/Gayathri-Bold.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Keep Footer at the bottom */
html {
	background-color: #F2A2A3;
} 

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family:"Gayathri";
  font-weight: 400;
  font-style: normal;
  font-size:18px;
  color:#234C4B;
}

header {
	background-color: #FDE2CF;
}

.font-copy em {
	color:#234C4B;
}

.headertext {
	flex-grow: 2;
  text-align: center;
  font-family: "courgette";
  font-size: 2rem;
  color: #66C1BF;
}

main {
	 padding-top: 1.5rem;
}

footer {
  margin-top: auto;
  background-color: #FDE2CF;
}

.footertext {
flex-grow: 2;
  text-align: center;
  font-family: "courgette";
  font-size: 1.2rem;
  color: #66C1BF;
	
}
.footertext a {
	color:  #66C1BF
}

a.virginie {
	margin:0.4em 0 0 0;
	padding-left: 1em;
}

div.info {
	margin:0.2em 0 0 0;
	font-weight: bold;
}

p.virginie {
	float:left;
	margin: 0.5em 0.5em 0 1em;
}

p.mentions {
	float:right;
	margin: 0.5em 1em 0.5em 0;
}

footer::before{
	content:"";
	background-image:url(/themes/aboutme/logo_footer.png);
	display:block;
	position:absolute;
	left:calc(50% - (292px / 2));
	margin-top:-80px;
	width:292px;
	height:155px;
	background-size:cover;
	
}

a em {
	font-family:"courgette";
	font-size:18px;
	text-decoration: underline;
}

p em {
	font-family:"courgette";
	font-size:18px;
}

/* border-box */
.border-box, a, article, aside, blockquote, body, code, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, html, input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"], legend, li, main, nav, ol, p, pre, section, table, td, textarea, th, tr, ul {box-sizing: border-box;}

/* fonts */
.fw4{ font-weight: 400; }
.font-lead{ font-size:1.2rem; }
.lh-lead { line-height: 1.6rem; }
.font-copy{ font-size: 1rem; }
.lh-copy{ line-height: 1.4rem; }

p{
	text-align:justify;
}

.headertext p {
	text-align:center;
}

.footertext h2 p{
	text-align:center;
}

.w-30-l p {
	text-align:center;
}
/* link */
a { background-color: transparent; }
.link { text-decoration: none; }
.link, .link:active, .link.active, .link:focus, .link:hover, .link:link, .link:visited { transition: color .15s ease-in; padding-right: 2em;}
.link:focus, main a:focus, footer a:focus{ color: #234c4b; }
nav .active a, main a{ text-decoration: none; 	color: #234c4b; font-weight: bold; }
main a:hover{ text-decoration: underline; color: #234c4b; }
footer a{ text-decoration:underline; color: #333; }
footer a:hover{ color: #234c4b; }


/* list */
.list { list-style-type: none; }

/* Layouts */
.flex{ display: flex; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.align-center {align-items:center;}
.db{ display:block; }
.dib{ display: inline-block; }
.dn{ display: none; }
.overflow-hidden{ overflow: hidden; }

/* Position */
.fixed{ position:fixed; }
.relative{ position:relative; }
.absolute{ position: absolute; }

/* Absolute */
.top-0{ top: 0; }
.left-0{ left: 0; }
.right-0{ right: 0; }
.bottom-0{ bottom: 0; }

/* margins */
.ma0{ margin: 0 0 0 0; }
.ma1{ margin: .1rem; }
.ma2{ margin: .5rem; }
.ma3{ margin: 1rem; }
.ma4{ margin: 2rem; }
.ma5{ margin: 5rem; }
.mt0{ margin-top: 0; }
.mt1{ margin-top: .1rem; }
.mt2{ margin-top: .5rem; }
.mt3{ margin-top: 1rem; }
.mt4{ margin-top: 2rem; }
.mt5{ margin-top: 5rem; }
.mt6{ margin-top: 8rem; }
.mb0{ margin-bottom: 0; }
.mb1{ margin-bottom: .1rem; }
.mb2{ margin-bottom: .5rem; }
.mb3{ margin-bottom: 1rem; }
.mb4{ margin-bottom: 2rem; }
.mb5{ margin-bottom: 5rem; }
.mt6{ margin-top: 8rem; }
.ml0{ margin-left: 0; }
.ml1{ margin-left: .1rem; }
.ml2{ margin-left: .5rem; }
.ml3{ margin-left: 1rem; }
.ml4{ margin-left: 2rem; }
.ml5{ margin-left: 5rem; }
.ml6{ margin-left: 8rem; }
.mr0{ margin-right: 0; }
.mr1{ margin-right: .1rem; }
.mr2{ margin-right: .5rem; }
.mr3{ margin-right: 1rem; }
.mr4{ margin-right: 2rem; }
.mr5{ margin-right: 5rem; }
.mr6{ margin-right: 8rem; }

/* paddings */
.pa0{ padding:0 0 0 0; }
.pa1{ padding: .1rem; }
.pa2{ padding: .5rem; }
.pa3{ padding: 1rem; }
.pa4{ padding: 2rem; }
.pa5{ padding: 5rem; }
.pl0{ padding-left: 0; }
.pl3{ padding-left: 1rem; }
.pr3{ padding-right: 1rem; padding-top: 1.5rem; }

/* colors */
.primary,.hover-primary:hover{ color: #D73B00; }
.bg-primary{ background-color: #D73B00; }
.b--primary{ border-color: #D73B00; }

.dark{ color: #234C4B; }
.bg-light{ background: #FDE2CF; }
.b--light{ border-color: #f5f5f5; }

/* border 
.bt{ border-top-style: solid; } */
.bw1{ border-width: .1rem; }
.bw5{ border-width: .5rem; }

/* width */
.w-100{ width: 100%; }


/**************************
*  Content Elements  *
**************************/

.mainnav{
	/*width: 70%;*/
	position: absolute;
	right: 0;
}
.burgerbutton{
	display: inline-block;
	font-size: 2rem;
	width: auto;
	text-align: right;
	padding: 2rem;
	box-sizing: border-box;
}
.menu {
   	max-height: 0; /* hide menu completely when burger unchecked */
	margin: 0px;
	text-align: right;
	padding-right: 1rem;
	padding-bottom: 1rem;
	overflow:hidden;
	position: relative;
	z-index: 1;
	font-size: 1.5rem;
	flex-grow: 2;
}
.burgerbutton, .menu{
    transition:all .2s ease;
	color: #f2a2a3;
}
.menu a{
	color: #234c4b;
	display:inline-block;
	font-size: 1.1rem;
}
#burger:checked ~ .menu {
	max-height: 200%;
	background: #f2a2a3;
}
/* #burger:checked ~ .burgerbutton {
	color: #fff;
	background: #333;
} */
@media (min-width: 50em) {
	.mainnav{
		position: relative;
		/*width: auto;*/
		width: 70%;
	}
	.burgerbutton{
		display: none;
	}
	.menu{
		display: flex;
		font-size: inherit;
		max-height: inherit;
		margin: 0 0 0 0;
		padding-right: 0;
		padding-bottom: 0;
		flex-grow: 1;
		justify-content: flex-end;
	}
	.menu a{
		color: #234c4b;
		font-size:1.2rem;
	}
}
.logo-round{
	background: #333;
	height: 70px;
	width: 70px;
	display: block;
	color: #fff;
	text-decoration: none;
	line-height: 70px;
	border-radius: 50%;
	font-weight: 500;
	font-size: 2rem;
	text-align: center;
}
.logo-classic{
	background: #333;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	font-size: 2rem;
	text-align: center;
	padding: 5px 15px;
	display: inline-block;
	margin-top: .6rem;	
}
.logo-pure{
	background: transparent;
	color: #333;
	text-decoration: none;
	font-weight:900;
	font-size:2rem;
	padding: 5px 0;
	display: inline-block;
	margin-top: .6rem;
}
.logo-image{
	width: 250px;
}
h1,h2,h3,h4,h5,h6 {
	font-family: "Courgette", cursive;
	font-weight: 400;
	font-style: normal;}
	
h1{ font-size: 1.8rem; line-height: 2rem; margin-top: 2.5rem;}
h2{ font-size: 1.4rem; line-height: 1.6rem; margin-top: 2.8rem;}
h3{ font-size: 1.4rem; line-height: 1.6rem; margin-top: 2.8rem;}
h4{ font-size: 1rem; line-height: 1.2rem; margin-top: 2.2rem;}
h5{ font-size: .9rem; line-height: 1rem; margin-top: 1.4rem; text-transform: uppercase; }
h6{ font-size: 1.2rem; line-height: 1rem; margin-top: 0.3rem; text-transform: none; font-weight:100; font-family:"gayathri"; margin-bottom: 0;}

article a, article a:link, article a:visited{
	text-decoration: none;
	color: #234C4B;
}
article a:active, article a:focus, article a:hover{
	text-decoration: underline;
	color: #66C1BF;
}
article ul, article p, article blockquote, article pre, article table, article dl, article img{
	margin: 1.7em 0;
}
article ul, article ol{
	padding-left: 15px;
}
/*article ul li{
	list-style: none;
*/
/* article ul li::before {
	content: "•"; 
	color: #D73B00;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
	float:left; 
} */
pre,code{ 
	background-color: #333;
	color: #fff;
}
code{
	display: inline-block;
	padding: 0 0.5em;
	font-size: 0.8em; 
	line-height: 1.4em;	
	border-radius: 2px;	
	word-break: break-all;
}
pre{
	white-space: pre;
	padding: 16px;
	display: block;	
	max-width: 100%;
	border-radius: 2px;
	overflow-x: auto;
	box-sizing: border-box;
}
pre > code{
	font-size: 0.8em;
}
blockquote{
	position: relative;
	font-family: times new roman,serif;
	font-size: 1.8em;
	font-style: italic;
	z-index: 2;
}
blockquote:before {
	content: '\201C';
	position: absolute;
	top: -0.25em;
	left: -0.25em;
	color: #ddd;
	font-size: 4em;
	z-index: -1;
	font-family: times new roman,serif;
	line-height: 1em;
}
.tm-table {
    overflow-x: auto;
}
table{
	width: 100%;
	border-collapse: collapse;
}
thead{
	border-bottom: 1px solid #e3e3e3;
	border-top: 1px solid #e3e3e3;
	background: #f5f5f5;
	font-weight: 700;
	text-align: left;
}
tbody{}
tr{}
tr:nth-child(odd){ }
tr:nth-child(even){ 
	background-color: #f5f5f5;
}
td,th{ padding: 5px;}
dl{
	border-top: 1px solid #D73B00;
	border-bottom: 1px solid #D73B00;
	padding: 0.5em 0;
	box-sizing: border-box;
}
dt,dd{
	width: 100%;
	margin: 0;
	padding: 3px 5px;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
}
dt{
	font-weight: 700;
}
dt::after{
	content: ":";
}
dd{
	width: 80%
}
hr{
    border: 0;
    height: 0;
	margin: 1.5rem 0 1.5rem 0;
	clear: both;
}
.left{float:left;}
.right{float:right;}
.center{margin:auto;}

/************************
*  		IMAGES  		*
************************/

img, figure,figure img{
	max-width: 100%;
	height: auto;
	aspect-ratio: attr(width) / attr(height);
	width: 100%;
}
figure {
    /*display: table;*/
    margin: 2em auto;
    padding: 0;
}
p + figure.left {
	clear: both;
}
figure.right, figure.left {
    width: auto;
    float: none;
    margin: auto auto;
}
figcaption {
    display: table-caption;
    caption-side: bottom;
    font-size: 0.8em;
    margin-top: .5em;
    line-height: 1.2em;
}
figure img {
    display: block;
    margin: auto;
	object-fit: cover;
	height:100%;
}
img{
	max-width:100%;
}
img.left{
	margin: 0 1.7em 1.7em 0;
}
img.right{
	margin: 0 0 1.7em 1.7em;	
}
img.middle{
	margin: auto;
	display: block;
}

ul.menu.list {
	text-align:left;
	font-size:1rem;
	font-weight: bold;
	
}
/************************
*  	TABLE OF CONTENTS 	*
************************/

ul.TOC,.TOC ul{
	list-style: none;
	padding-left: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.TOC li:before{
	content: "\2192";
	margin-left: -7px;
	margin-right: 7px;
}
.TOC li.h1:before{
	content: "";
}
ul.TOC{
	background: #f5f5f5;
	width: 100%;
	padding: 20px;
	box-sizing:border-box;
}
li.h1{
	font-weight: 700;
	height: auto;
}
li.h2, li.h3, li.h4, li.h5, li.h6
{
	font-weight: 300;
	padding-left: 25px;	
	height: auto;
}


/*******************
* Headline anchors *
*******************/

a.tm-heading-anchor {
	display:  inline-block;
	margin-left:  -0.8em;
	width: 0.8em;
	font-weight: 300;
    opacity: .5;
    text-decoration: none;
    float: right;
}
a.tm-heading-anchor:hover,a.tm-heading-anchor:focus {
    text-decoration: none;
}
h2:focus > .tm-heading-anchor, 
h2:hover > .tm-heading-anchor, 
h3:focus > .tm-heading-anchor, 
h3:hover > .tm-heading-anchor, 
h4:focus > .tm-heading-anchor, 
h4:hover > .tm-heading-anchor,
h5:focus > .tm-heading-anchor, 
h5:hover > .tm-heading-anchor,
h6:focus > .tm-heading-anchor, 
h6:hover > .tm-heading-anchor{
	opacity: 1;
	text-decoration: none;
}

/************************
*  	DOWNLOAD LINKS 		*
************************/

a.tm-download{}
a.tm-download::before{
	content: "\2193";
  	-webkit-mask: url("data:image/svg+xml; utf8, <svg width='24' fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM11 8v5.586l-2.293-2.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l4 4c0.092 0.092 0.202 0.166 0.324 0.217 0.245 0.101 0.521 0.101 0.766 0 0.118-0.049 0.228-0.121 0.324-0.217l4-4c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.293 2.293v-5.586c0-0.552-0.448-1-1-1s-1 0.448-1 1z'></path></svg>") no-repeat 50% 50%;
  	mask: url("data:image/svg+xml; utf8, <svg width='24' fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM11 8v5.586l-2.293-2.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l4 4c0.092 0.092 0.202 0.166 0.324 0.217 0.245 0.101 0.521 0.101 0.766 0 0.118-0.049 0.228-0.121 0.324-0.217l4-4c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.293 2.293v-5.586c0-0.552-0.448-1-1-1s-1 0.448-1 1z'></path></svg>") no-repeat 50% 50%;
  	-webkit-mask-size: cover;
  	mask-size: cover;
	background-color: currentColor;	
	display: inline-block;
	margin-right: 5px;
	width:  24px;
	height: 24px;
	text-decoration: none;
	vertical-align: middle;
}
a.tm-download:hover::before{
	text-decoration: none;
}


/************************
*  		NOTICE 			*
************************/

.notice1 {
    margin: 1em 0;
    padding: 10px 1em;
	background-color: #ffded4;
	border-left: 4px solid #f65a3c;    
}
.notice2 {
    margin: 1em 0;
    padding: 10px 1em;
	background-color: #fff3d4;
	border-left: 4px solid #f6b73c;    
}
.notice3,
.notice4,
.notice5,
.notice6 {
    margin: 1em 0;
    padding: 10px 1em;
    background-color: #d4e0ff;
    border-left: 4px solid #3c7bf6;	
}

/*******************
* youtube videos   *
*******************/

.video-container{
	position: relative;
	text-align: center;
}
img.youtube{
	position: relative;
	max-width: 560px;
}
button.play-video { 
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
	height: 100px;
	width: 100px;
	background: #e0474c;
	color: #FFFFFF;
	border-radius: 50%;
	border: 0px;
	padding: 0;
	text-align: center;
}
button.play-video:hover {
	background: #cc4146;
	cursor: pointer;
}
button.play-video::after {
	position: absolute;
	top: 50%;
	margin: -20px 0 0 -15px;
	height: 0;
	width: 0;
	border-style: solid;
	border-width: 20px 0 20px 40px;
	border-color: transparent transparent transparent rgba(255, 255, 255, 0.75);
	content: ' ';
}


/**************
* 	Forms 	  *
**************/

form{
	width: 100%;
	border: none;
	margin: 20px 0 20px 0;
	padding: 0 0 0 0;
}
fieldset{
	width: 100%;
	border: none;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
label{
	width: 100%;
	display: block;
	color: #333;
}
input, textarea{
	width: 100%;
	display: block;
	border: 1px solid #ddd;
	padding: 15px;
	margin: 0 0 20px 0;
	background: #f5f5f5;
}
input:focus,select:focus,textarea:focus{
	outline: none;
	border: 1px solid rgba(229, 226, 211, 1);
	box-shadow: 0 0 2px #D73B00;;
}
input[type="submit"],button,.button{
	cursor: pointer;
	color: #fff;
	background: #D73B00;
	font-size: 1em;
	border: 0;
}
input[type="submit"]:hover,button:hover,.button:hover{
	background: rgba(232, 99, 78, 0.8);
}

@media (min-width: 40em) {
	figure.right {
	    width: 30ch;
	    float: right;
	    margin: 0 0 0.5em 1em;
		height:20ch;
	}
	figure.left {
	    width: 30ch;
	    float: left;
		height:20ch;
	    margin: 0 1em 0.5em 0;
	}
}

@media (min-width: 50em) {

	h1{ font-size: 2.3rem; line-height: 3.3rem; margin-top: 2.5rem;}
	h2{ font-size: 1.8rem;  margin-top: 0; line-height: 1.5rem;}
	h3{ font-size: 1.4rem; line-height: 1.4rem; margin-top: 2.8rem;}
	h4{ font-size: 1rem; line-height: 1.2rem; margin-top: 2.2rem;}
	h5{ font-size: .9rem; line-height: 1rem; margin-top: 1.4rem; text-transform: uppercase; }
	h6{ font-size: 1.2rem; line-height: 1rem; margin-top: 0.3rem; text-transform: none; font-weight:100; font-family:"gayathri"; margin-bottom: 0;}
	a.tm-heading-anchor { float:left; }
	.dn-l{ display:none; }
	.db-l{ display:block; }
	.dib-l{ display: inline-block; }
	.mt4-l{ margin-top: 2rem; }
	.mt5-l{ margin-top: 5rem; }
	.mt6-l{ margin-top: 8rem; }
	.mb4-l{ margin-bottom: 2rem; }
	.mb5-l{ margin-bottom: 5rem; }
	.mb6-l{ margin-bottom: 8rem; }
	.flex-l{ display:flex; }
	.fw1-l{ font-weight: 100; }
	.fw2-l{ font-weight: 400; }
	.font-lead{ font-size:1.6rem; }
	.lh-lead { line-height: 1.5rem; }
	.font-copy{ font-size: 1.2rem;}
	.lh-copy{ line-height: 1.8rem; }
	.w-30-l{ width: 40%; margin-top: 1.5em; }
	.mw-800-l{ max-width: 1200px; }
	.mauto-l{ margin-left:auto; margin-right:auto;padding-top: 0.5rem; }
}