/*
CSS 
template: page_home
description: home page template CSS
*/

/* import Mulish font (similar to Century Gothic) - used for panel titles - now gets loaded in header!! */
/*@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@800&display=swap');*/



/* CHANGES TO DEFAULT BOX LAYOUT FOR HOME PAGE */

.boxlayout .box .text {
    position: absolute;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    align-content: flex-end;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.6em 1.6em 2em 1.6em;
    box-sizing: border-box;
    text-align: left;
    background: linear-gradient( to top,  rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 40% );
}


.boxlayout .box .text h3 {
    order: 1;
    position: relative;
    display: block;
    width:100%;
    margin: .5em 0 0.3em 0;
    font-size: 1.2em;
    line-height: 1.1em;
    
    font-family: 'Mulish', sans-serif;
    font-weight: 800;
}


.boxlayout .box .text p {
    order: 0;
    position: relative;
    display: block;
    width: auto;
    padding: .5em .7em;
    margin: 0 0 0 0;
	
    font-size: .7em;
    line-height: 1em;
    
    font-family: 'Mulish', sans-serif;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #222;
    
    background: #fff;
    border-radius: .3em;
}



/* CHALLENGE PANEL */

.boxlayout .box.challenge_panel {
	background: #12674b;
}

.boxlayout .box.challenge_panel .challenge_rays,
.boxlayout .box.challenge_panel .challenge_earth,
.boxlayout .box.challenge_panel .challenge_title,
.boxlayout .box.challenge_panel .challenge_button {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
    background-size: cover !important;
}

@keyframes challenge_raysrotate {
    0% { transform:scale(.9) rotateZ(0deg) }
    50% { transform:scale(1.2) rotateZ(180deg) }
    100% { transform:scale(.9) rotateZ(360deg) }
}

.boxlayout .box.challenge_panel .challenge_rays {
    top: -20%; right: -20%; bottom: -20%; left: -20%;
    background-size: contain !important;
	background: url('../images/home/challenge_rays.png') 0 0 no-repeat;
    animation-name: challenge_raysrotate;
    animation-direction: normal;
	animation-duration: 60s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
    opacity: .9;
}

.boxlayout .box.challenge_panel .challenge_title {
	background: url('../images/home/challenge_title.png?v001') 0 0 no-repeat;
}

.boxlayout .box.challenge_panel .challenge_button {
	background: url('../images/home/challenge_button.png') 0 0 no-repeat;
    opacity: .7;
    transition: opacity .5s ease-out;
}

.boxlayout .box.challenge_panel:hover .challenge_button {
	opacity: 1;
    transition: opacity .2s ease;
}

.boxlayout .box.challenge_panel .challenge_earth {
	background: url('../images/home/challenge_earth.png') 0 0 no-repeat;
    transition: transform 1.5s ease;
	transform: translate3d(0, 0, 0) rotate(0deg);
}

.boxlayout .box.challenge_panel:hover .challenge_earth {
	transform: perspective(100px) translate3d(0, 0, 5px) rotate(-5deg);
	transition: transform 1.5s ease;
}



/* NEWS PANELS */

.boxlayout .box.news_panel .text h3 {
    font-size: 1em;
}



/* RECIPE PANELS */

.boxlayout .box.recipe_panel .text h3 {
    font-size: 1em;
}

.boxlayout .box.recipe_panel .text p {
    color: #fff;
    background: #fb791a;
}