/* ............. Theme ............. */


/* ........... L O G O  ............ */


.Standalone ul.Core li.Logo a {
    background-image: url(https://assets.afy.ca/_skin/navbar/navbar_logo_mobile.svg);
}

@media (min-width: 1024px) {
    .Standalone ul.Core li.Logo a {
        background-image: url(https://assets.afy.ca/_skin/navbar/navbar_logo_full.svg);
        /*width: xx;*/
    }
}


/* LINKS */


a {
    color: #50722a;
}

    nav.Button a,
    a.Button,
    a.English {
        background-color: #78aa42;
        color: white;
    }

        nav.Button a:hover,
        a.English:hover,
        a:hover.Button {
            background-color: black;
        }


/* ............. Typography ............. */

h1,
h2,
h3,
h4,
p,
li {
    font-family: 'Light';
    letter-spacing: normal;
}

h1 {
    padding: 0;
    letter-spacing: -.05em;
    color: white;
}


.TemplateHead.Slim h1 {
    font-size: 3.54em;
}



/* ............. Nav ............. */


ul.Nav.Main .Normal {
    right: 0;
    margin-right: 8em;
    margin-right: 4em;
}

ul.Nav.Main li a {
    font-family: 'Book'
}

.Titre h3 {
    font-size: .9em;
}

/* ............. Geometry ............. */

/*.ContentWidth {
     max-width: 1600px;
     }
     @media (min-width:1000px) {
          .ContentWidth {     
               padding-left: 3em;
               padding-right: 3em;
               }
               }*/


/* ............. H E A D  B A N N E R ............. */


/* C O N T A I N E R */

.Head {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 0;
    background-color: #3b3d38;
    background: -webkit-linear-gradient(left,rgba(76,116,41,.85),rgba(111,150,42,.85),rgba(76,116,41,.85));
    background: -o-linear-gradient(left,rgba(76,116,41,.85),rgba(111,150,42,.85),rgba(76,116,41,.85));
    background: -moz-linear-gradient(left,rgba(76,116,41,.85),rgba(111,150,42,.85),rgba(76,116,41,.85));
    background: linear-gradient(left,rgba(76,116,41,.85),rgba(111,150,42,.85),rgba(76,116,41,.85));
    text-align: left;
    color: white;
}

    .Head .ContentWidth {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

@media (min-width: 1300px) {
    .Head .ContentWidth {
        flex-direction: row;
    }
}


/* Blocks */
.TitleBlock,
.DetailsBlock {
}

/* TitleBlock */
.TitleBlock {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

@media (min-width: 1300px) {
    .TitleBlock {
        flex-wrap: nowrap;
        width: 75%;
        max-height: 4em;
    }
}

/* DetailsBlock */

.DetailsBlock {
    margin-top: 1em;
    padding-left: 62px;
}

@media (min-width: 1300px) {
    .DetailsBlock {
        margin-top: -1em;
        width: 25%;
    }
}


/* T H U M B */


.Thumb {
    position: relative;
    width: 100%;
}

    .Thumb span {
        display: block;
        position: relative;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        border-radius: 50%;
        width: 10em;
        height: 10em;
        left: 50%;
        margin-top: -5em;
        margin-left: -5em;
        margin-bottom: -2.5em;
        border: 1em solid white;
        top: -3em;
    }

@media (min-width: 1300px) {
    .Thumb {
        top: auto;
        width: auto;
    }

        .Thumb span {
            top: 3em;
            width: 18em;
            height: 18em;
            margin-top: -9em;
            left: 1.5em;
            margin-left: -3.5em;
            margin-right: 3em;
        }
}


/* T I T L E */

.TitleBlock h1 {
    font-size: 3em;
    line-height: .9em;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: .15em;
    border-bottom: 1px solid white;
    text-align: center;
    width: 100%;
}

@media (min-width: 1300px) {
    .TitleBlock h1 {
        text-align: left;
        border-bottom: none;
    }
}


/* D E T A I L S */


/* extra room for icon */

.Cuisson + .Portions,
.Cuisson + .Portions + .Origin {
    padding-left: 85px;
}


.DetailsBlock p {
    color: white;
}


/* Postion */

p.Portions {
    font-size: 1.5em;
    font-family: "Bold";
    margin-top: 12px;
    margin-bottom: 0;
}


/* Origin */


p.Origin {
    margin-bottom: 0;
}


/* Timing */

p.Timing {
    position: absolute;
    width: 80px;
    font-size: 1.5em;
}

.Timing::before {
    content: "30";
    position: absolute;
    width: 80px;
    top: 0;
    left: -75px;
}

.Timing,
.Timing::before {
    display: flex;
    text-align: center;
    font-family: 'Black';
    font-size: 25px;
    height: 80px;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center left;
}

    .Timing.Less::before {
        background-image: url(../images/icons_timming_less.svg);
    }

    .Timing.PlusLess::before {
        background-image: url(../images/icons_timming_plusless.svg);
    }

    .Timing.Plus::before {
        background-image: url(../images/icons_timming_plus.svg);
    }

    .Timing.Cuisson {
        background-image: url(../images/icons_timming_cuisson.svg);
        background-position: center right;
    }



/* ............. H E A D .............*/



#Top {
    background-position: center center;
    background-image: url(../images/mat.jpg);
}

    #Top span {
        background-color: transparent;
    }


/* ............. X 3  W I D E ............. */


/* Grid */
.X3Wide {
    display: flex;
    flex-wrap: wrap;
}



    .X3Wide > div {
        width: 100%;
    }



@media (min-width:600px) {

    .X3Wide > div:nth-of-type(1) {
        width: 40%;
        padding-right: 2.5em;
    }

    .X3Wide > div:nth-of-type(2) {
        width: 60%;
    }

    .X3Wide > div:nth-of-type(3) {
        width: 100%;
    }
}


@media (min-width:1000px) {
    .X3Wide > div:nth-of-type(1) {
        width: 25%;
    }

    .X3Wide > div:nth-of-type(2) {
        width: 50%;
        padding-right: 2.5em;
    }

    .X3Wide > div:nth-of-type(3) {
        width: 25%;
    }
}


/* Divided 3rd columns in 3 coloms (mid res only) */
@media (min-width:600px) and (max-width:999px) {

    .X3Wide > div:nth-of-type(3) {
        padding: 2em;
        display: flex;
        flex-wrap: wrap;
    }

        .X3Wide > div:nth-of-type(3) > * {
            width: 33%;
        }
        /* gutter */
        .X3Wide > div:nth-of-type(3) p {
            padding-right: 1.52em;
        }
}



/* ........... R E C I P E .............*/


.Band.Recipe {
    background-color: white;
}


/* ...BOX... */

/* Color */
.Box {
    background-color: #e8efdf;
}
/* remove head */
.Box {
    padding-top: 2em;
}

    .Box:before {
        display: none;
    }

/* ... Chef	.... */

#Chef h3 {
    margin-bottom: 0;
}



/* .... U L ......... */


/* hover */
[class*='Template'] ul[class*='Link'] li a:hover {
    color: #50722a; /* green */
    text-decoration: none;
}



/* ....... M E N U  L I S T ........ */



/* More room for listings */
.MenuList h3 {
    margin-bottom: 1.5em;
}



/* .......... I C O N S .................... */


.MenuList h3,
.X3Wide > div:nth-of-type(1),
.X3Wide > div:nth-of-type(2),
.X3Wide > div:nth-of-type(3) p,
.X3Wide > div:nth-of-type(3) ul {
    margin-top: 1em;
    padding-top: 75px;
    background-repeat: no-repeat;
    background-position: top left;
    -webkit-background-size: 60px;
    -moz-background-size: 60px;
    -o-background-size: 60px;
    background-size: 60px;
}

/* Remove extra space over h3 */
@media (max-width: 639px) {
    .TemplateText > div:not(.Boxed):nth-of-type(n+2) > h3:nth-child(1) {
        margin-top: 0;
    }
}



/* Menu list */
#Entrees h3 {
    background-image: url(../images/icons_bouchees.svg);
}

#Plats h3 {
    background-image: url(../images/icons_plats.svg);
}

#Desserts h3 {
    background-image: url(../images/icons_desserts.svg);
}

#Autres h3 {
    background-image: url(../images/icons_pain.svg);
}

/* Recipe */
#Ingredients {
    background-image: url(../images/icons_ingredient.svg);
}

#Instruction {
    background-image: url(../images/icons_instruction.svg);
}

#Astuce {
    background-image: url(../images/icons_astuce.svg);
}

#Histoire {
    background-image: url(../images/icons_histoire.svg);
}

#Chef {
    background-image: url(../images/icons_chef.svg);
}



/* .......... S P O N S O R ........ */

#Semaine {
    background-color: #f2f6ec;
}

.FooterSponsor#Semaine ul li span {
    height: 18em;
    width: 18em;
}





/*.hero .ContentWidth{     
     /*padding-top: 0;     *!/
     }

.hero.Recette::before {
     content: "";
     position: absolute;
     width: 100%;
     bottom: 0;
     left: 0;
	height: 100%;
     }

.hero.Recette,
.hero.Recette::before {
     -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	padding-top: 5%;
	min-height: 700px;
     }


.hero.Recette {
	background-image: url(../images/mat.jpg);
	height: 70%;
     }
  

	@media (min-width: 40em) {
		.hero.Recette,
          .hero.Recette::before {
			min-height: 350px;
			}
		}
	@media (min-height: 40em) {
		.hero.Recette,
          .hero.Recette::before{
			max-height: 40em;
			}
		}

	@media (min-width: 50em) {
		.hero.Recette,
          .hero.Recette::before{
			min-height: 450px;
			}
		}
	@media (min-width: 70em) {
		.hero.Recette,
          .hero.Recette::before{
			min-height: 600px;
			}
		}	
	@media (min-width: 90em) {
		.hero.Recette,
          .hero.Recette::before{
			min-height: 800px;
			}
		}*/