/*
Theme Name: TAO
Author: 56k SPRL
Author URI: https://56k.be
Description: Tackling Adolescent Obesity 2019 WP theme.
Version: 1.0
License: All rights reserved  Safefood Advocacy
Text Domain: tao
*/


/***** Variables *****/

  /* Colors */

:root{
	--tao-green :  				#76A226;
	--tao-blue-underline: 		#75dfff;
	--tao-red: 					#ea2b1f;
	--tao-blue-background : 	#00798c;
	--tao-grey: 				#a7a3a3;
	--tao-shadow-grey: 			#F2F2F2;
	--tao-yellow : 				#fbcf00;
	--tao-red-background : 		#d1495b;
	--tao-creme-background: 	#f4b266;
	--tao-black: 				#121212;
	--tao-light-grey: 			#fafafa;
	--tao-red-animation-btn: 	#ea2b1f; /*color : red used as <a></a> link color/
	/* based on browser default font-size 16px */
	/*for easier calculation - which makes 1rem=10px*/
	font-size:62.5%;
}

/***** End Variables *****/

/* General style */

  /* fonts & background */

body{
	font-size: 1.6rem;
	hyphens:auto;
	font-family: 'Lato', sans-serif;
	background-color: var(--tao-light-grey);
	overflow-x:hidden;
	color: var(--tao-black);
}

/* Elements */

ul li{
	list-style-type: none;
}

a{
	color:var(--tao-black);
}

a:hover{
	text-decoration: none;
	color:var(--tao-green);
}

p{
	line-height: 1.5;
	color: #2F2F2F;
}


/* ugc content */

.ugc-content h2{
	font-size: 2.6rem;
}

.ugc-content h3{
	font-size: 2.3rem;
}

.ugc-content h4{
	font-size: 2.1rem;
}

.ugc-content h2, .ugc-content h3,
.ugc-content h4{
	margin-bottom: 1rem;
}

.ugc-content a{
	color:var(--tao-green);
}

.ugc-content a:hover{
	text-decoration: none;
	color:var(--tao-red-animation-btn);
}

.ugc-content p{
	margin-bottom: 2rem;
}

.ugc-content p strong{
	font-size: 1.7rem;
}

.ugc-content li{
	list-style-type: circle;
	margin: 0;
	padding: 0;
	margin-bottom: 1rem;
}

.ugc-content blockquote {
    padding: 1rem;
    font-size: 2rem;
    font-style: italic;
    font-weight: 100;
}

.ugc-content blockquote:before {
    content: "\201C";
    color: var(--tao-green);
    font-size: 4rem;
    font-family: Georgia, serif;
    position: absolute;
    line-height: 2.3rem;
}

.ugc-content blockquote p {
    margin-left:2rem;
    margin-bottom: 0.5rem;
}

.ugc-content blockquote cite {
    display: block;
    font-size: 1.7rem;
    font-weight: 600;
    font-style: normal;
    text-align: right;
    margin-bottom: 2rem;
    margin-top: 0.3rem;
    margin-left: 1rem;
}

.ugc-content blockquote:after {
    content: "\201D";
    font-size: 4rem;
    color: var(--tao-green);
    font-family: Georgia, serif;
    position: absolute;
    line-height: 0;
    right: 2rem;
}


/* comic style */

.comic-text{
	font-family: 'Amatic SC', cursive;
}

.bubble.comic-text{
	font-size: 2.7rem;
}

.small-text-bubble{
	position:relative;
	width:15rem;
	height: 7.5rem;
	z-index:100;
}

.big-text-bubble{
	position:relative;
	top:-2rem;
	width: 21rem;
	height: 10rem;
	z-index:100;
}

.comic-container{
	width:100%;
	height:100%;
	position:relative;
	background-color: var(--tao-shadow-grey);
	border-radius: 50%;
}

.comic-container .speaker{
	position:absolute;
	transform:rotate(-35deg);
	bottom:0.3rem;
	left:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1rem 4rem 1rem 0;
	border-color: transparent #F2F2F2 transparent transparent;
}

.small-text-bubble .comic-text,
.big-text-bubble .comic-text{
	position:absolute;
	width:120%;
}

.small-text-bubble .comic-text{
	top:1.5rem;
	left:1rem;
}

.big-text-bubble .comic-text{
	top:3rem;
	left:2rem;
}

/* Pages Custom Style */

.header-section{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position:relative;
	z-index:50;
}

.page {
	min-height: 100vh;
}

/* Single */

.single{
	position:relative;
}

.single .header-section .header-title-container{
	margin-top:10rem;
	padding-bottom: 10rem;
}

.single .header-section h1{
	font-size: 10rem;
	font-weight: 900;
	color:#fff;
	display: inline;
	background-image: linear-gradient(to right, rgba(118, 162, 38) 0%, rgba(118, 162, 38) 100%);
	margin: 0;
	background-repeat: repeat-x;
	background-position: 0 3.5rem;
}

/* Sections */

.section{
	margin-top:4rem;
	padding-top:2rem;
	padding-top:2rem;
}

/* buttons */

.btn-wrapper{
	border:none;
	background: none;
	overflow:hidden;
	position:relative;
	padding-left: 0px;
	padding-right:0px;
}

.btn-tao-yellow, .btn-tao-green, .alt-btn-tao-green{
	text-transform:uppercase;
	font-size: 1.4rem;
	font-weight: 700;
	border-radius:0;
	overflow:hidden;
}

.btn-tao-yellow, .btn-tao-green{
	display:block;
	color:#fff;
	padding: 0.8rem 7rem 0.8rem 1rem;
}

.btn-tao-yellow{
	background-color: var(--tao-yellow);
	border:1px solid var(--tao-yellow);
	text-align:left;
	margin:-1px;
}

.btn-tao-green{
	border:1px solid var(--tao-green);
	background-color: var(--tao-green);
	text-align:left;
	margin:-1px;
}

.alt-btn-tao-green{
	display:block;
	width:100%;
	border:1px solid var(--tao-green);
	color:var(--tao-green);
	background-color: #fff;
	font-size: 1.7rem;
	text-align:center;
	position:relative;
	z-index:0;
}

.alt-btn-tao-green::before{
	transform: translate(-50%, -50%);
}

.btn-tao-yellow:hover, .btn-tao-green:hover, .alt-btn-tao-green:hover{
	background-color:transparent;
	color:#fff;
}

.btn-tao-yellow:hover{
	border:1px solid var(--tao-red-animation-btn);
}

.btn-tao-green:hover, .alt-btn-tao-green:hover{
	border:1px solid var(--tao-yellow);
}

.btn-tao-yellow::before,.btn-tao-green::before,.alt-btn-tao-green::before {
	content:"";
	position: absolute;
	top:50%;
	left:50%;
	z-index:-1;
	transition: all 0.35s ease-in-out;
}

.btn-tao-yellow::before{
	background: var(--tao-red-animation-btn);
}

.btn-tao-green::before,.alt-btn-tao-green::before {
	background: var(--tao-yellow);
}

.btn-hover1::before{
	width:85%;
	height:0;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.btn-hover1:hover::before{
	height: 575%;
}

.btn-hover2::before, .btn-hover3::before{
	width: 100%;
	height: 0;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.btn-hover2:hover::before{
	height: 500%;
}

.btn-hover3:hover::before{
	height: 2600%;
}

.big-btn-tao-green{
	border-radius:0;
	border:1px solid var(--tao-green);
	background-color: var(--tao-green);
	padding:0.5rem;
	text-align:center;
}

.big-btn-tao-green a{
	text-transform:uppercase;
	color:#fff;
	font-size: 3.2rem;
	font-weight: 900;
}

.btn.focus, .btn:focus {
	box-shadow: none;
}

/* borders */

.br-green {
	border-right:1px solid var(--tao-green);
}

.bl-green {
	border-left:1px solid var(--tao-green);
}

/* Quiz - play  & go buttons */

.play-btn,.go-btn, .next-btn{
	width:25rem;
	height:5.5rem;
	font-family: 'Lato';
	font-weight: 900;
	font-size: 2.5rem;
	background-color: var(--tao-yellow);
	padding:0.6rem;
	position:relative;
	z-index:1;
}

.play-btn::before{
	content: "Play";
}

.go-btn::before{
	content: "OK";
}

.next-btn::before{
	content: "Next";
}
.play-btn::before, .go-btn::before,.next-btn::before {
width: 90%;
height: 70%;
transform: translate(-50%, -50%) skew(-10deg, 1deg) rotate(-2deg);
background:#fff707;
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
}

.play-btn:hover::before{
content: "Play!";
}

.go-btn:hover::before{
content: "Next!";
}

.next-btn:hover::before{
content: "Next!";
}

.play-btn:hover::before, .go-btn:hover::before, .next-btn:hover::before {
	background:var(--tao-red);
	animation:play 0.2s 2;
}

@keyframes play {
	from {transform: translate(-50%, -50%) skew(-10deg, 1deg) rotate(-2deg);}
	to {transform: translate(-50%, -50%) skew(-10deg, 1deg) rotate(-1deg);}
}

#single-quiz .play-btn{
	position: relative;
	z-index: 100;
}

#single-quiz .submit-visible{
	position:absolute;
	bottom: -115%;
	right: 5%;
	z-index: 0;
	width:250px;
	height:50px;
	font-family: 'Roboto';
	font-weight: 700;
	font-size: 2.5rem;
	background-color: var(--tao-yellow);
	padding:6px;
}

/* customised badge */

.badge-custom-tao{
	background-color: var(--tao-green);
	text-transform: uppercase;
}

.badge-custom-tao a{
	color:#fff;
}

/* customised icons */

.icon-recipe{
	color:var(--tao-green);
}

/* NAVBAR */

.navbar{
	position:sticky;
	z-index:1000;
	background-color: var(--tao-light-grey);
	padding: .6rem 1rem;
}

.navbar-brand img{
	position:absolute;
	top:0.1rem;
}

.navbar button.navbar-toggler:focus {
	outline: none;
}

.navbar .dropdown-menu.languages .dropdown-item{
	color:var(--tao-green);
	font-size: 1.5rem;
}

.navbar-light .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(118, 162, 38, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")!important;
}

.navbar-toggler {
	padding: 0.15rem .75rem;
}

.custom-toggler.navbar-toggler {
	border-color: rgb(255,102,203);
}

#quiz-score img{
	width:2.6rem;
	height:3.8rem;
	margin-right: 1rem;
}

#language-switcher {
	font-weight: bold;
	color: var(--tao-green);
	font-size: 1.7rem;
	padding: 1rem;
}

#language-switcher .nav-link{
	padding:0;
	border-top:2.4px solid var(--tao-green);
	border-bottom:2.4px solid var(--tao-green);
	color:var(--tao-green);
	font-size: 1.5rem;
}

.navbar-light .navbar-toggler{
	border-color:transparent;
	font-size: 3rem;
	position: relative;
	top: -3px;
}

/*Menu style after FadeIn*/
#navbarSupportedContent{
	display: block;
	width: 100vw;
	height: 100vh;
	background-image: url('core/img/tao_lamy_menu.png');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--tao-light-grey);
	padding: 3.2rem 0 0 12rem;
	position: absolute;
	z-index: 10000;
	left: 0;
	top: 0;
}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link{
	color:var(--tao-green);
	font-size: 3.5rem;
	font-weight: 700;
}

.navbar .dropdown-menu{
	border: none;
	background-color: transparent;
}

.navbar .dropdown-item{
	font-size: 2.3rem;
	-webkit-transition: font-size 0.1s;
	transition: font-size 0.1s;
}

.navbar .dropdown-item:hover{
	background-color: transparent;
	font-size: 2.55rem;
	font-weight: 700;
}

/*Close button style after fadeIn*/
.close-menu {
	font-size: 4em;
	position: absolute;
	z-index: 99999;
	top: 20px;
	right: 40px;
}

.close-menu a {
	color: rgba(0,0,0,.7);
}

.close-menu .icon-cancel-circle{
	position: relative;
	top: -1rem;
	right:-2rem;
	display:block;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition:all 0.2s linear;
	transition:all 0.2s linear;
}


.close-menu .icon-cancel-circle:hover{
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	color:var(--tao-green);
}


@-webkit-keyframes closeanim{
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
}

@keyframes closeanim{
	from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

/* BREADCRUMB */
.breadcrumb-container{
	position:relative;
	top:80px;
	padding-left:0;
}

.breadcrumb-container{
  top: 1rem;
  margin-left: auto;
  padding-left: 15px;
}

.breadcrumb{
	display:inline-flex;
	background-color:var(--tao-yellow);
	padding: .2rem .5rem;
}

.breadcrumb a{
	color: #fff;
	font-size: 1.35rem;
}

.breadcrumb-item+.breadcrumb-item::before {
	display: inline-block;
	padding-right: .5rem;
	color: #fff;
	content: ">";
}

/* COMMON STYLE FOR PAGES H1 TITLES IN COMIC CLASS*/
 h1.comic-text{
	font-size:4.5rem;
}

/* HOMEPAGE * SINGLE RECIPE */

.recipe-archives .card{
	margin-bottom: 4rem;
	background: transparent;
	border: none;
	transition: all .2s ease-in-out;
}
.recipe-archives .card-body{
	padding: 0;
	padding-top: 1rem;
}
.recipe-archives .card.no-hover-effet:hover{
	-webkit-box-shadow:none;
	-moz-box-shadow: none;
	box-shadow: none;
	transform: scale(1);
}
.recipe-archives .card:hover,
/* common effect on news preview on homepage */
.news-preview:hover,
#teacher-news .news img:hover{
	transform: scale(1.01);
}

.recipe-short-info, .meal{
	font-size: 1.2rem;
	text-transform: uppercase;
	font-weight: 400;
	font-family: 'Nunito', sans-serif;
}

.meal{
	color:var(--tao-green);
	font-weight: 900;
}

.recipe-name, .recipe-name:visited{
	font-weight: 400;
	font-family: 'Nunito', sans-serif;
	font-size: 1.8rem;
	line-height: 2.8rem;
	color:var(--tao-black);
}

.recipe-name:hover,
.recipe-name:active,
.recipe-name:focus{
	color:var(--tao-green);
}

/* HOMEPAGE */

/* ---- HOMEPAGE TITLES --- */

/* Titles in message section */

#homepage .section.message h1 {
	font-size: 10rem;
	font-weight: 900;
	color: var(--tao-black);
	display: inline;
	background-image: linear-gradient(to right, rgba(124,243,245) 0%, rgba(124,243,245) 100%);
	margin: 0px;
	background-repeat: repeat-x;
	background-position: 0px 4.5rem;
}

#homepage .section.message h2{
	font-size: 5rem;
}

/* Titles in news section */

#homepage .news-preview h2,
#homepage p.art-date{
	padding:0 1.7rem;
}

#homepage .news-preview h2 a{
	color:#fff;
	font-size: 1.7rem;
	text-transform: uppercase;
	font-weight: 700;
}

/* Titles in additionnal news section */

#homepage .section.additional-news .filter h5 a{
	text-transform: uppercase;
	font-weight: 700;
	color: #2F2F2F;
	font-size: 2.1rem;
	line-height: 1.5;
}

#homepage .section.additional-news .big-news .filter h5{
	position: absolute;
	top:50%;
	transform:translateY(-50%);
	padding:1rem;
}

/* h3 in news section */

#homepage .ugc-content h2{
	font-weight: 500;
	margin-bottom:3rem;
}

#homepage h4{
	font-size: 5rem;
	font-weight: 700;
	margin-bottom:3rem;
}

#homepage h4{
	color:#2F2F2F;
}

/* ---- End of HOMEPAGE Titles --- */

#homepage #shape-container{
	position:relative;
	z-index:-2;
}

#homepage #triangle-shape{
	position :absolute;
	top: -40rem;
	left:0;
	width: 0;
	height: 0;
	border-top: 41.2rem solid transparent;
	border-bottom: 83rem solid transparent;
	border-left: 108vw solid #fff;
}

#homepage #semi-ellipse{
	position:absolute;
	left:-1rem;
	margin-top:-3rem;
	width:6rem;
	height:60rem;
	background-color: var(--tao-light-grey);
	border-radius: 0 100% 100% 0 / 50%;
}

#homepage .carousel-indicators {
	left:86%;
	bottom:45%;
}

#homepage .carousel-indicators li{
	background-color: #6c757d;
	height:1rem;
	width:1rem;
	border-radius:50%;
	border-top:0.5rem solid transparent;
	border-bottom: 0.5rem solid transparent;
}

#homepage .carousel-item.active img,#homepage .carousel-item img {
	width:26rem;
	height:auto;
}

#homepage .carousel-caption{
	text-align: left;
	margin-left:15%;
}

#homepage .carousel-caption p{
	font-size: 3rem;;
}

#home-carousel{
	margin-top:-1rem;
	height:40rem;
}

#home-carousel .carousel-inner{
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	overflow:visible;
}

#home-carousel .btn-wrapper{
	position:absolute;
	bottom:-5rem;
	right:23%;
}

#home-carousel .btn-wrapper a{
	font-size: 1.5rem;
	font-family: 'Lato', sans-serif;
}

#homepage .news-section{
    background: -webkit-linear-gradient(149deg, #fff 33.1%,#fafafa 0);
    background: -o-linear-gradient(149deg, #fff 33.1%,#fafafa 0);
	background :linear-gradient(149deg, #fff 33.1%,#fafafa 0);

}

#homepage .mapandquiz-section{
	background-color: var(--tao-light-grey);
}

.news-preview-wrapper{
	height:100%;
}

#homepage .news-preview{
	position:relative;
	background-color: var(--tao-blue-background);
	padding:1.5rem;
	height:48%;
	transition: all .2s ease-in-out;
}

.news-preview > div{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}

#homepage p.art-date{
	font-size: 1.3rem;
	color:#a1d1f0;
}

#homepage .svg-text a{
	color:#fff;
	font-weight: 700;
	font-size: 4rem;
	position:absolute;
}

#homepage .svg-text.map-text a,
#homepage .svg-text.quiz-text a{
	left: 2rem;
	top: 4.5rem;
	font-weight: 900;
}

#homepage .section.mapandquiz .tips .small-text-bubble,
#homepage .section.mapandquiz .tips .big-text-bubble {
	transition: all .2s ease-in-out;
}

#homepage .section.mapandquiz .tips .map-text:hover ~ .small-text-bubble,
#homepage .section.mapandquiz .tips .quiz-text:hover ~ .big-text-bubble {
	transform: scale(1.04);
}

#homepage .section.mapandquiz .tips a:hover ~ .small-text-bubble {
	transform: scale(1.04);
}

#homepage .section.mapandquiz img.character{
	width:100px;
	height:100px;
	position: relative;
	top: 2rem;
}

#homepage .section.mapandquiz .ugc-content p{
	margin: 30px 0;
}

#homepage .section.additional-news{
	background-color: #fff;
}

#homepage .section.additional-news img{
	object-fit: cover;
}

#homepage .section.additional-news .small-news{
	position:relative;
}

#homepage .section.additional-news .small-news:first-child{
	margin-bottom:10px;
}

#homepage .section.additional-news .filter{
	position:absolute;
	background-color: rgba(255, 255, 255, 0.68);
}

#homepage .section.additional-news .filter p{
	font-weight: normal;
}

#homepage .section.additional-news .filter h5 a:hover{
	color:var(--tao-green);
}

#homepage .small-news-duo{
	padding-left:0;
}

#homepage .small-news-duo,
#homepage .section.additional-news .big-news{
	margin-top:15px;
}

#homepage .section.additional-news .small-news .filter{
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:4rem;
}

#homepage .section.additional-news .big-news{
	overflow: hidden;
	padding-left: 0;
	padding-right: 0;
}

#homepage .section.additional-news .big-news .filter{
	top:2%;
	left:2%;
	width:96%;
	height:96%;
	padding:2rem;
}

#homepage .section.additional-news .big-news .filter p{
	position: absolute;
	top:67%;
	transform:translateY(-70%);
	padding:1rem;
}

#homepage .section.additional-news .big-news .filter .btn-wrapper{
	position: absolute;
	top:95%;
	left:65%;
	transform:translateY(-95%);
}

#homepage .section.additional-news .alt-btn-tao-green{
	margin:2rem 0 4rem;
}

#homepage .section.message .main-message{
	overflow:auto;
	margin-bottom:30px;
}

#homepage .section.message .main-message img{
	float:right;
	clear:right;
}

#homepage .project-desc p{
	font-size: 1.3rem;
}

/* Recipe Single*/

#single-recipe .instructions-section{
	position:relative;
	margin-top:-4rem;
	background-color: var(--tao-light-grey);
	z-index:100;
}

#single-recipe .icon-recipe-selection{
	font-size: 2rem;
	color: var(--tao-black);
}

#single-recipe .recipe-info-overview{
	padding-top:1rem;
	padding-bottom:6rem;
}

#single-recipe .icon-recipe{
	font-size: 3rem;
}

#single-recipe .instructions-details h2{
	font-size: 3rem;
	padding-bottom:0.7rem;
	margin-bottom:3rem;
	border-bottom:1px solid var(--tao-green);
}


#single-recipe .instructions-details .ingredients h2,
#single-recipe .instructions-details .method h2{
	padding-right:3rem;
}

#single-recipe .ingredients li{
	margin-bottom: .5rem;
}

.recipe-author-label{
	color:var(--tao-grey);
	font-weight: 500;
	font-size: 0.9em;
}
.recipe-author-link{
	color:var(--tao-red);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9em;
}

.recipe-author-link:hover{
	color:var(--tao-green);
}

#single-recipe .method .comic-text{
	font-size:7rem;
}

#single-recipe .method .instruction{
	margin-bottom:4rem;
}

#single-recipe .ending-dash{
	padding-top:5rem;
	border-bottom:1px solid var(--tao-green);
}

/*  QUIZ  */

/* Quiz common style */

.quiz-spec-label{
	margin: 0;
	padding: 0;
}
.quiz-spec-label .desc{
	font-size: 1.6rem;
	font-weight: 600;
}

.quiz-single-spec{
	color:var(--tao-green);
	font-size: 1.55rem;
}

.quiz-spec-label .icon-star-full,
.quiz-spec-label .icon-star-empty{
	color:var(--tao-yellow);
}

/* QUIZ  HEADER COMMON STYLE */
#quiz .quiz-illu{
	width:40%;
}

#quiz .quiz-spec-label{
	padding: 0 1rem;
}

/* QUIZ PRELAUNCH */

.quiz-prelaunch .warning-section{
	border-bottom: 1px solid var(--tao-green);
	margin-bottom: 8rem;
	padding-bottom: 85px;
}

#quiz .quiz-prelaunch h6{
	color:var(--tao-red);
	font-size: 4rem;
	font-weight: 900;
}


/* SINGLE QUIZ */

.quiz-header-section,.recipes-header-section {
	margin-top:2rem;
	padding-bottom:4rem;
	border-bottom: 1px solid var(--tao-green);
}

#quiz .single-question h2, #quiz .quiz-eval h2{
	font-size:6rem;
	font-weight:900;
}

#quiz .single-question .quiz-question,
#quiz .quiz-eval .eval-text {
	font-size: 2.1rem;
	font-weight: 600;
}
#quiz .single-question .quiz-question p{
	font-family: 'Nunito', sans-serif;
}

#quiz-word-container{
	width:100%;
	position:relative;
	top:10.9rem;
	margin-top:-8rem;
	z-index:10;
	opacity:0;
	-webkit-animation-name: blink;
	-webkit-animation-delay: 2s;
	-webkit-duration: 0.5s;
	-webkit-iteration-count:4;
	-webkit-fill-mode: forwards;
	animation-name: blink;
	animation-delay: 2s;
	animation-duration: 0.5s;
	animation-iteration-count:4;
	animation-fill-mode: forwards;
}

@-webkit-keyframes blink {
from {opacity:0;}
to {opacity:1;}
}

@keyframes blink {
from {opacity:0;}
to {opacity:1;}

}

#quiz .clip{
	position:relative;
	margin-top:-8rem;
	width:100%;
	min-height:50rem;
	-webkit-clip-path: polygon(0 28%, 100% 9%, 92% 100%, 14% 100%);
	clip-path: polygon(0 28%, 100% 9%, 92% 100%, 14% 100%);
	background: linear-gradient(-15deg,#00a7c2 50%, #00798c 50%);
	margin-bottom:60px;
	z-index:1;
}

.quiz-options{
	color:#fff;
	position:absolute;
	width:85%;
	left:8%;
	top:40%;
	z-index:10;
}

#quiz .qz-option{
	position:relative;
}

.qz-option .option-text{
	margin-bottom:8rem;
}
.qz-option .option-text p{
	color:#fff;
	width: 30rem; 
}
.qz-option .option-text img{
	max-height: 220px;
}
.qz-option .option-input{
	height:5.5rem;
}

#quiz .qz-option .option-input{
	position:absolute;
	bottom:1rem;
	font-family:
}

.quiz-red-bottom {
	position: relative;
	margin-top: -6rem;
	margin-left:12%;
	width: 82%;
	height: 3rem;
	border-radius : 15px;
	background-color: var(--tao-red);
}

#quiz-bottom-illu{
	position: absolute;
	top: -16rem;
	left: -6.5rem;
	width: 15%;
}

.quiz-char{
	position:relative;
}

#quiz-bottom-text{
	position: absolute;
	left: -2.5rem;
	top: -13.5rem;
	width: 15%;
}

.quiz-ellipse{
	position:relative;
	z-index:-1;
	top:-10rem;
	width:100%;
	height:200px;
	background-color: var(--tao-shadow-grey);
	border-radius: 50%;
}

/* Radio inputs customisation*/

/* Customize the label (the container) */
.radiocontainer {
	display: block;
	position: relative;
	padding-left: 4rem;
	margin-bottom: 1.2rem;
	cursor: pointer;
	font-size: 2.2rem;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default radio button */
.radiocontainer input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom radio button */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 5rem;
	width: 5rem;
	background-image: linear-gradient(166deg, #d5d9dceb 35%, #a7a3a3 55%);
	border-radius: 50%;
	border: 0.5rem solid #343a40;
}

/* On mouse-over, add a grey background color */
.radiocontainer:hover input ~ .checkmark {
	background-color:  #a7a3a3;
}

/* When the radio button is checked, add a blue background */
.radiocontainer input:checked ~ .checkmark {
	background-image: linear-gradient(166deg, #b6dc71 35%, #76a226 60%);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	/*display: none;*/
}

/* Show the indicator (dot/circle) when checked */
.radiocontainer input:checked ~ .checkmark:after {
	/*display: block;*/
}

/* Style the indicator (dot/circle) */
.radiocontainer .checkmark:after {
	top: 0.4rem;
	left: 1.2rem;
	width: 1.5rem;
	height: 0.8rem;
	border-radius: 50%;
	background: white;
}

#quiz .go-btn{
	position:relative;
	right:-70%;
	top:-12rem;
}

/* QUIZ ANSWER */

.quiz-answer h6,
.quiz-challenge h6 {
	display: inline-block;
	font-size: 4.5rem;
	padding-left:0;
}

.quiz-answer h6 > span.right{
	color:var(--tao-green);
}
.quiz-answer h6 > span.wrong{
	color:var(--tao-red);
}

.quiz-answer .next-btn{
	float:right;
}

/* QUIZ FINAL EVALUATION */

.quiz-eval .dot {
	width:1.5rem;
	height:1.5rem;
	border-radius: 50%;
}

.quiz-eval .green.dot {
	background-color: var(--tao-green);
}

.quiz-eval .yellow.dot {
	background-color: var(--tao-yellow);
}

.quiz-eval .results-prez{
	position:relative;
}

.quiz-eval .results-prez img{
	position:absolute;
	top:5%;
	right:0;
}


/* ARCHIVES RECIPES */

.filters{
	background-color: var(--tao-light-grey);
}
.card.filters-heading:hover{
	transform: scale(1);
	box-shadow: 0 0 0;
}

.filters-heading{
	font-size: 1.8rem;
	font-weight: 900;
	background-color: var(--tao-light-grey);
	border-top: var(--tao-light-grey);
	border-left:var(--tao-light-grey);
	border-right:var(--tao-light-grey);
	border-bottom:1px solid #D8D8D8;
}

.filter{
	font-size: 1.7rem;
	font-weight: 700;
}

.filters label{
	color:#909396;
	font-size: 1.4rem;
	margin-right: 0.3rem;
}

.filters input[type=checkbox]{
	border: 1px solid var(--tao-green);
	padding:0.2rem;
}

/* Custom checkbox in filters options */

#archives-recipes input[type="checkbox"]+label::before{
	content: "\a0";/*nbsp*/
	display: inline-block;
	border:1px solid var(--tao-green);
	vertical-align: .2rem;
	width: 1.45rem;
	height: 1.45rem;
	margin-right: .4rem;
	background: transparent;
	text-indent: 0;
	line-height: .75;
}

#archives-recipes input[type="checkbox"]:checked+label::before{
	content:"\2713";
}

#archives-recipes input[type="checkbox"]{
	position:absolute;
	clip-path: polygon(0 0,0 0,0 0,0 0);
}

#archives-recipes .filters .icon-recipe{
	color:#909396;
}

/* ARCHIVES QUIZ*/

.quiz-archives .media-cta{
	position:relative;
	width:25rem;
	height:30rem;
}

.quiz-archives .media-cta img{
	width: 100%;
	height:100%;
	object-fit:cover;
}
.quiz-archives .media-cta .play-btn{
	position:absolute;
	bottom:-3.5rem;
}

.quiz-archives .media-body h5{
	font-size: 2.5rem;
	font-weight: 700;
}

.quiz-archives .quiz-specs-wrapper{
	margin-top: 4rem;
}

/* LOCATIONS PAGE */

#map .nav-pills .nav-link.active , #map .nav-pills .show>.nav-link{
	background-color: #FFDA93;
	border-radius: 0;
}
#map .nav-pills .nav-link{
	border-right: 1px solid #E4E4E4;
}
#map .nav-pills .nav-link:last-child{
	border-right: none;
}
#map .location{
	margin-bottom: 2rem;
	background-color: #F0F8E2;
	padding: 1rem;
}
#map .location h3{
	font-size: 2.2rem;
	border-bottom: 1px solid #eee;
	font-weight: 300;
	margin-bottom: 1rem;
}
#map .location p{
	font-size: 1.3rem;
}
#map .location address{
	font-size: 1.1rem;
	text-transform: uppercase;
	font-weight: 900;
	color: #76A226;
}
#map .location-elements{
	height: 80vh;
	overflow: scroll;
}

#map .marker-resto {
  background-image: url('core/img/map_restaurant.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 60px;
  height: 36px;
  cursor: pointer;
}
#map .marker-wellness {
  background-image: url('core/img/map_wellness.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 60px;
  height: 36px;
  cursor: pointer;
}
#map .marker-sport {
  background-image: url('core/img/map_sportclub.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 60px;
  height: 36px;
  cursor: pointer;
}
#map .marker-assoc {
  background-image: url('core/img/map_organisation.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 60px;
  height: 36px;
  cursor: pointer;
}
#map .marker-medical {
  background-image: url('core/img/map_medical.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 60px;
  height: 36px;
  cursor: pointer;
}
#map .marker-food {
  background-image: url('core/img/map_shopping.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 60px;
  height: 36px;
  cursor: pointer;
}

#map .mapboxgl-popup {
  min-width: 200px;
  max-width: 200px;
}

#map .mapboxgl-popup-content {
	padding: 2em;
}
#map .mapboxgl-popup-content h5{
	padding-bottom: 0.5em;
	border-bottom: 1px solid #F3F6FA;
	margin-bottom: 0.5em;
	font-size: 1.5rem;
	font-weight: 700;
}

#map .mapboxgl-popup-content p{
	font-size: 1.4rem;
	font-weight: 300;
}

#map .sticky-top{
	z-index:900;
	top:5.7rem;
}

.modal-dialog{
	max-width: 800px;
}

.modal-dialog input.acf-button{
	background-color: var(--tao-green);
	color: #fff;
	border: none;
	display: block;
	width: 100%;
	font-size: 2rem;
	text-transform: uppercase;
	text-align: center;
	font-weight: 700;
	margin-bottom: 1rem;
}
.modal-dialog input.acf-button:hover{
	background-color: var(--tao-yellow);
}

#exampleModal input.acf-button:hover {}
#exampleModal p.description{
	font-size: .9rem;
}
.modal-dialog .screen-reader-text{
	display: none;
}

#exampleModal .acf-field select {
    width: 100%;
    padding: 5px;
    resize: none;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.4;
    border-style:none;
}

#exampleModal .acf-field input[type="text"],#exampleModal .acf-field select {
	border: 1px solid #eee;
	padding: .5rem;
}

#exampleModalLabel{
  color: var(--tao-black);
	font-size:2.5rem;
}

#exampleModal .modal-header{
  border-bottom: 1px solid var(--tao-green);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#exampleModal input{
  border-style:none none none solid;
  border-left:5px solid var(--tao-green);
}

#exampleModal .acf-fields>.acf-field{
  border-top: transparent;
}

#exampleModal .acf-field .acf-label label,
#exampleModal .acf-field p.description{
  color: var(--tao-grey);
}
#exampleModal .leaflet-control-geocoder-icon {
  background-color: var(--tao-green);
}


/*LOGIN PAGE */

#login label{
	display: block;
	text-transform: capitalize;
	font-size: 1.6rem;
	margin-bottom: 1rem;
}

#login #wp-submit{
	position:relative;
	/* .btn-tao-green */
	text-transform:uppercase;
	font-size: 1.4rem;
	font-weight: 700;
	border-radius:0;
	overflow:hidden;
	/* .btn-tao-green */
	display:block;
	color:#fff;
	padding: 0.8rem 7rem 0.8rem 1rem;
	/* .btn-tao-green */
	border:1px solid var(--tao-green);
	background-color: var(--tao-green);
	text-align:left;
	margin:-1px;
}

#login #wp-submit::before {
	/*.btn-tao-green::before */
	content:"";
	position: absolute;
	top:50%;
	left:50%;
	z-index:-1;
	transition: all 0.35s ease-in-out;
	/*.btn-hover2::before */
	width: 100%;
  height: 0;
  transform: translate(-50%, -50%) rotate(-45deg);
}

#login #wp-submit:hover{
	/* .btn-tao-green:hover */
	border:1px solid var(--tao-yellow);
	background-color:var(--tao-yellow);;
	color: #fff;
}

#login #wp-submit:hover::before {
	/* .btn-hover2:hover::before */
	height: 500%;
}

input:-internal-autofill-selected{
	background-color:var(--tao-light-grey)!important;
	border-style: none!important;
}

#login input #user_pass, #login input #user_login  {
	background-color: var(--tao-light-grey)!important;
	border-style: none!important;
}

.login-remember{
	margin-top:2rem;
	margin-bottom: 3rem;
}

/* Custom checkbox "remember me" on login page  */

#rememberme{
/*	position: absolute;
	clip-path: polygon(0 0,0 0,0 0,0 0);
	border: 1px solid var(--tao-green);
  padding: 0.2rem;*/
}

#rememberme+label::before {
    content: "\a0";
    display: inline-block;
    border: 1px solid var(--tao-green);
    vertical-align: .2rem;
    width: 1.45rem;
    height: 1.45rem;
    margin-right: .4rem;
    background: transparent;
    text-indent: 0;
    line-height: .75;
}

#rememberme:checked+label::before{
	content:"\2713";
}

#login a[title="Lost Password"]{
	color:var(--tao-green);
	font-size: 1.5rem;
}

#login a[title="Lost Password"]:hover{
	border-bottom:1px solid var(--tao-green);
}

#rememberme {

}

#rememberme:checked+label::before{
}

/* SOCIAL MEDIA SHARER*/
.sharer{
  position: fixed;
  left: 1rem;
  top: 43%;
  z-index:1;
}

.list-unstyled{
  padding-left: 0;
  list-style: none;
}

.sharer li {
  margin-bottom: .8rem;
}

.sharer li a {
	color:#1e1e1e;
	-webkit-transition: font-size 0.1s;
	transition: font-size 0.1s;
}

.sharer li a:hover{
	font-size: 2.1rem;
}

/* NEWS & TEACHER NEWS */

.news-page .news img {
	object-fit: cover;
  width: 100%;
  height: 25rem;
	transition: all .2s ease-in-out;
}

.news-page .news img:hover{
  box-shadow: var(--tao-grey) 1px 1px 23px 1px;
	transform: scale(1.01);
}

.news-page h2 a{
	font-size: 2.5rem;
	color:var(--tao-black);
}

.news-page h2 a:hover{
	color:var(--tao-green);

}
.news-page .news-date p{
	font-size: 1.3rem;
}
/* Teacher News comments */
.comments{}
.comments h3{
	color: var(--tao-green);
    	text-transform: uppercase;
    	font-weight: 700;
    	border-bottom: 1px solid var(--tao-green);
    	padding-bottom: .5rem;
    	margin-bottom: 1rem;
    	margin-top: 3rem;
}
.comments h4{
	text-transform: uppercase;
	font-weight: 700;
	border-bottom: 1px solid gray;
	padding-bottom: .5rem;
	margin-bottom: 1rem;
}
.comments .comment-body{
	background-color: #fff;
	padding: .5rem;
	margin-bottom: 1rem;
}
.comments ul.commentlist{
	margin: 0;
	padding: 0;
}
.comments .comment-author{
	font-size: 2rem;
	font-weight: 300;
}
.comments .commentmetadata{
	font-size: 1rem;
	font-weight: 700;
	border-bottom: 1px solid #eee;
	text-align: right;
	margin-bottom: 1.5rem;
	padding-bottom: .25rem:
	margin-top: -1rem;
	text-transform: uppercase;
}
.comments .commentmetadata a{
	color: var(--tao-green);
}
.comments .comment-reply-link{
	background-color: var(--tao-yellow);
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
	padding: .25rem;
	font-size: 1.2rem;
}
.comments .reply{
	text-align: right;
}
.comments .comment-reply-link:after{
	content: ' >';
}
.comments .logged-in-as{
	display: none;
}
.comments label{
	display: block;
}
.comments textarea{
	width: 100%;
}

/*C*/
#single-teacher #commentform #submit{
	background-color: var(--tao-green);
    	color: #fff;
    	border-style:none;
    	padding:8px 6px;
}

#single-teacher #commentform #submit:hover{
	background-color:#fff;
    	color:  var(--tao-green);
    	padding:7px 5px;
    	border:1px solid var(--tao-green);	
}


/* 404 PAGE  */

.error h2{
	font-size:2.7rem;
}

/* FOOTER */
footer{
	z-index:50;
}

footer h5, footer p, footer h6{
	color: #fff;
}
footer h5{
	text-transform: uppercase;
	font-size: 1.3rem;
	font-weight: 600;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--tao-light-grey);
}

footer .eu-grand p{
	font-family: 'Nunito', sans-serif;
	font-size: 1.1rem;
}

footer .img-partner{
	max-width:55%;
	filter:sepia() saturate(0.2);
}

footer .img-partner:hover{
	filter:none;
}

footer .copyrights p{
	font-size: 1.1rem;
}

#menu-footer-menu{
	padding-left: 0px;
}

footer a{
	color:#fff;
}

footer a:hover{
	color:var(--tao-red);
}