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


/* 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-weight: 300;
}


.boxlayout .box .text p {
    order: 0;
    position: relative;
    display: block;
    width: auto;
    padding: .7em;
    margin: 0 0 0 0;
    font-family:Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
    font-size: 11px;
    color: #fff;
    line-height: 1em;
    font-weight: 300;
    background: rgba(0,0,0, .8);
    text-transform: uppercase;
}



/* CHALLENGE PANEL */

.boxlayout .box.challenge_panel {
	background:#31835d url('../images/home/home_panel_30daychallenge_plain.jpg') 0 0 no-repeat;
	background-size:cover;
}

.boxlayout .box.challenge_panel .title_text {
	position:absolute;
	top:0; left:0;
	background:url('../images/home/home_panel_30daychallenge_text.png') 0 0 no-repeat;
	background-size:cover;
	width:100%;
	height:100%;
}

.boxlayout .box.challenge_panel .title_button {
	position:absolute;
	top:0; left:0;
	background: url('../images/home/home_panel_30daychallenge_button.png') center center no-repeat;
	background-size: contain;
	width:100%;
	height:100%;
	opacity:.7;
	-o-transition:         all .5s ease-out;
	-ms-transition:        all .5s ease-out;
	-moz-transition:       all .5s ease-out;
	-webkit-transition:    all .5s ease-out;
	transition:            all .5s ease-out;
}

.boxlayout .box.challenge_panel:hover .title_button {
	opacity:1;
}


@-webkit-keyframes challenge_raysrotate {
    0% { opacity:.7; }
    25% { opacity:.3; }
    50% { opacity:.7; }
    75% { opacity:.4; }
    100% { opacity:.7; }
		
    0% { transform:scale(.9) rotateZ(0deg) }
    50% { transform:scale(1.2) rotateZ(180deg) }
    100% { transform:scale(.9) rotateZ(360deg) }
}
@-moz-keyframes challenge_raysrotate {
    0% { opacity:.5; }
    25% { opacity:.2; }
    50% { opacity:.6; }
    75% { opacity:.3; }
    100% { opacity:.5; }
		
    0% { transform:scale(.9) rotateZ(0deg) }
    50% { transform:scale(1.2) rotateZ(180deg) }
    100% { transform:scale(.9) rotateZ(360deg) }
}

.boxlayout .box.challenge_panel .obj_rays {
	position:absolute;
	top:-10%; left:3%;
	background:url('../images/home/bokeh/rays_01.png') center center no-repeat;
	background-size:contain;
	width:100%;
	height:100%;
	
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-o-transition: all 1s linear;
	-ms-transition: all 1s linear;
	transition: all 1s linear;
	
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 60s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-name: challenge_raysrotate;
	-webkit-animation-timing-function: linear;
	
	-moz-animation-direction: normal;
	-moz-animation-duration: 60s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-name: challenge_raysrotate;
	-moz-animation-timing-function: linear; 
}


@-webkit-keyframes challenge_bokeh {
    0% { opacity:0; }
		50% { opacity:1; }
    100% { opacity:0; }
		
		0% { transform:scale(1) rotateZ(0deg) }
		100% { transform:scale(1.2) rotateZ(10deg) }
}
@-moz-keyframes challenge_bokeh {
    0% { opacity:0; }
		50% { opacity:1; }
    100% { opacity:0; }
		
		0% { transform:scale(1) rotateZ(0deg) }
		100% { transform:scale(1.2) rotateZ(10deg) }
}

.boxlayout .box.challenge_panel .obj_bokeh {
	position:absolute;
	top:0; left:0;
	background:url('../images/home/bokeh/bokeh_01.png') 0 0 no-repeat;
	background-size:cover;
	width:100%;
	height:100%;
	
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-o-transition: all 1s linear;
	-ms-transition: all 1s linear;
	transition: all 1s linear;
	
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-name: challenge_bokeh;
	-webkit-animation-timing-function: linear;
	
	-moz-animation-direction: normal;
	-moz-animation-duration: 5s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-name: challenge_bokeh;
	-moz-animation-timing-function: linear;    
}

.boxlayout .box.challenge_panel .obj_bokeh1 {
	background:url('../images/home/bokeh/bokeh_01.png') 0 0 no-repeat;
	background-size:cover;
	-webkit-animation-duration: 9s;
	-moz-animation-duration: 9s;
}
	
.boxlayout .box.challenge_panel .obj_bokeh2 {
	background:url('../images/home/bokeh/bokeh_02.png') 0 0 no-repeat;
	background-size:cover;
	-webkit-animation-duration: 7s;
	-moz-animation-duration: 7s;   
}

.boxlayout .box.challenge_panel .obj_bokeh3 {
	background:url('../images/home/bokeh/bokeh_03.png') 0 0 no-repeat;
	background-size:cover;
	-webkit-animation-duration: 8s;
	-moz-animation-duration: 8s;  
}

.boxlayout .box.challenge_panel .obj_bokeh4 {
	background:url('../images/home/bokeh/bokeh_04.png') 0 0 no-repeat;
	background-size:cover;
	-webkit-animation-duration: 6s;
	-moz-animation-duration: 6s;  
}




.boxlayout .box.challenge_panel .title_text {
	-o-transition:	 		transform 1.5s ease-out;
	-ms-transition: 		transform 1.5s ease-out;
	-moz-transition: 		transform 1.5s ease-out;
	-webkit-transition:     transform 1.5s ease-out;
	transition: 			transform 1.5s ease-out;
	transform: translate3d(0, 0, 0);
}

.boxlayout .box.challenge_panel:hover .title_text {
	transform: perspective(100px) translate3d(0, 0, 5px);
	
	-o-transition:	 		transform .5s ease;
	-ms-transition: 		transform .5s ease;
	-moz-transition: 		transform .5s ease;
	-webkit-transition:     transform .5s ease;
	transition: 			transform .5s ease;
}




@media screen and (max-width:500px){
	
	.boxlayout .box.challenge_panel .obj_bokeh,
    .boxlayout .box.challenge_panel .obj_rays {
        display: none;
    }
    
    .boxlayout .box.challenge_panel {
        background-image:url('../images/home/ve_panel_30daychallenge_mobile.jpg');
        background-size:cover;
    }
	
}



/* RECIPE PANELS */

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

.boxlayout .box.recipe_panel .tag {
	position:absolute;
	left:-4.5em;
	top:-4em;
	width:9em;
	height:8em;
	font-size:1em;
	line-height:1em;
	font-weight:normal;
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing:.08em;
	background:#f49530;
	background:rgba(244,149,48, 0.9);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	border:solid 2px rgba(255,255,255, .7);
}

.boxlayout .box.recipe_panel .tag:after {
	content:"Recipe";
	position:absolute;
	left:0;
	bottom:.5em;
	width:100%;
	color:#fff;
	text-align:center;
	text-transform:uppercase;
	opacity:0.8;
}