.blogPan {overflow:visible !important;}


/************************************************************************************************************************/
/************************************************************************************************************************/
/********************************************* MAIN CONTAINER - MOBILE **************************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/

.supervox-process-container{overflow:hidden;}
.supervox-process-container .process-image .label-container {display:none;}
.supervox-process-container .process-image .intro-copy{display:none;}
.supervox-process-container .images {white-space:nowrap; overflow:hidden;}
.supervox-process-container .images .scroller{
    position:relative;
    left:0;
    height:100%;
    -webkit-transition: left .5s linear;
    -moz-transition: left .5s linear;
    -ms-transition: left .5s linear;
    -o-transition: left .5s linear;
    transition: left .5s linear;
}
.supervox-process-container .images .process-image {
    width:100%;
    height:100%;
    display:inline-block;
    z-index: -1;
    position: relative;
}

.supervox-process-container .images .process-image img{
    width:100%;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%); /* IE 9 */
    -webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */
    transform: translateY(-50%);
    pointer-events:none;
}
.supervox-process-container .images .process-image-0 {background-color:#46c4ef;}
.supervox-process-container.active-0 .process-image-0 img{
	width: 140%;
}

.supervox-process-container.active-0 .scroller{left:-0%;}
.supervox-process-container.active-1 .scroller{left:-100%;}
.supervox-process-container.active-2 .scroller{left:-200%;}
.supervox-process-container.active-3 .scroller{left:-300%;}
.supervox-process-container.active-4 .scroller{left:-400%;}

.supervox-process-container .mobile-nav{
    margin:0;
    padding:0;
    display:table;
    table-layout:fixed;
    width:100%;
}
.supervox-process-container .mobile-nav .process-icon{
	list-style:none;
	width:20%;
	text-align:center;
	background-color:#eeeeee;
	position:relative;
	display:table-cell;
	vertical-align:middle;
	padding: 2%;
}
.supervox-process-container .mobile-nav .process-icon-0{
	padding-bottom: 0;	
}
.supervox-process-container .mobile-nav .process-icon-0 img.icon{
	height:100%;	
}

.supervox-process-container .mobile-nav .process-icon:hover{
    background-color:#FFFFFF;
}
.supervox-process-container .mobile-nav .process-icon.active,
.supervox-process-container .mobile-nav .process-icon.active:hover{
    background-color:#f15c22;
}
.supervox-process-container .mobile-nav .process-icon img{
	position: relative;
	max-width:100%;
}



.supervox-process-container .copy{
    z-index: 9999;
    position: relative;
    bottom:0;left:0;right:0;
    width:100%;
}

.supervox-process-container .process-copy{
	line-height:1.4;	
}
.supervox-process-container .process-copy .label{color:#2f2d2f;font-size:20px;text-transform:uppercase;padding-bottom: 10px;}
.supervox-process-container .process-copy .content{color:#2f2d2f;font-size:0.875em;}




/* CALL TO ACTION BUTTON. */
.supervox-process-container .cta-container{ 
	display:block;
	width:100%;
	font-size:0.71428571em;
	margin-top:2em;
}
.supervox-process-container .cta-container a{
	font-size:1em;
	background-color:#ef5b2f;
	color:#FFFFFF;
	cursor:pointer;
	padding:0.7em 1.8em 0.7em 1.7em;
	text-transform:uppercase;
	letter-spacing: 0.12em;
}
.supervox-process-container .cta-container a svg{
	width: 1.2em;
    height: 1em;
	margin-left: 0.6em;
	fill:#FFFFFF;
	display:inline-block;
}
/* END - CALL TO ACTION BUTTON. */



.supervox-process-container .copy .process-copy{
    opacity:1;
    position:absolute;
    padding-top:0.8em;
    padding-bottom:0.8em;
}

.supervox-process-container .copy h1 {
	padding-bottom: 0.1em;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #000000;
    font-size: 1.5em;
}
	

.supervox-process-container .mobile-nav img.arrow{
	position: absolute;
	top: 50%;
	right: -8%;
	z-index: 2;
	width: 16%;
	margin-top: -16%;
}
.supervox-process-container .mobile-nav li.process-icon-4 img.arrow{display:none;} /* hide the last arrow */


.menuIcon{background-size:100% 100% !important;}

/* if less than X wide AND greater than X-tall, then make things a little taller */
@media  (min-width: 450px) {
    .supervox-process-container .process-copy{ font-size: 1em; /* 16px */}	
    .supervox-process-container .process-copy .content{ 
		font-size:1em; /* font-size: 18px; */  
		margin-top: 0.5em;
        line-height:1.3;
	}
    .supervox-process-container .process-copy .label{font-size:37px;}
}






/************************************************************************************************************************/
/************************************************************************************************************************/
/********************************************* MAIN CONTAINER - DESKTOP *************************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
@media (min-width: 600px) {
    .supervox-process-container{
        height:100%;
        top:0;
        position:relative;
    }

    .supervox-process-container .images{padding-top:106px;}/* equal to the header space that we removed */

	.supervox-process-container.active-0 .process-image-0 img{
		top: 8.8em;
		-ms-transform: none; /* IE 9 */
		-webkit-transform: none; /* Chrome, Safari, Opera */
		transform: none;
	}
    .supervox-process-container .copy{
        background-color: #FFFFFF;
    }
    .supervox-process-container .copy .process-copy{
        padding-top:0.9090909091em; /* 20px at full size */
        padding-bottom:2.272727em; /* 50px at full size */
    }

    .supervox-process-container .mobile-nav{display:none;}



    .supervox-process-container .images { overflow:visible;}
    .supervox-process-container .images .scroller{    }
    .supervox-process-container .images .process-image{
        width:16%;
        height:100%;
        vertical-align:top;
        background-color:#f7f7f7;
        border-right:1px solid #d4d4d4;
        z-index:999;
        position:relative;
        cursor:pointer;
        -webkit-transition: width .5s linear, background-color .5s ease-out;
        -moz-transition: width .5s linear, background-color .5s ease-out;
        -ms-transition: width .5s linear, background-color .5s ease-out;
        -o-transition: width .5s linear, background-color .5s ease-out;
        transition: width .5s linear, background-color .5s ease-out;
    }

    .supervox-process-container .images .process-image .process-image-inner{
      /*
      top:0;bottom:0;position:absolute;width:100%;
      font-size:1em;
      */
      height:100%;
    }



    .supervox-process-container .images .process-image img{
        right:0;
        -webkit-transition: width .5s linear, left .5s linear;
        -moz-transition: width .5s linear, left .5s linear;
        -ms-transition: width .5s linear, left .5s linear;
        -o-transition: width .5s linear, left .5s linear;
        transition: width .5s linear, left .5s linear;
    }
	
	/* The label overlapping the images */
    .supervox-process-container .process-image .label-container{
        position:absolute;
        display:block;
        width:100%;
        text-align:center;
        bottom:4em;
        opacity:1;
        -webkit-transition: opacity .5s ease-out, bottom .5s ease-out, font-size .5s ease-out;
        -moz-transition: 	opacity .5s ease-out, bottom .5s ease-out, font-size .5s ease-out;
        -ms-transition: 	opacity .5s ease-out, bottom .5s ease-out, font-size .5s ease-out;
        -o-transition: 		opacity .5s ease-out, bottom .5s ease-out, font-size .5s ease-out;
        transition: 		opacity .5s ease-out, bottom .5s ease-out, font-size .5s ease-out;
    }


    .supervox-process-container .process-image .label {
        font-size:0.5em;
        padding:0.8em ;
        margin:auto;
   }
	/* END - The label overlapping the images */

    .supervox-process-container.active-0 .process-image-0,
    .supervox-process-container.active-1 .process-image-1,
    .supervox-process-container.active-2 .process-image-2,
    .supervox-process-container.active-3 .process-image-3,
    .supervox-process-container.active-4 .process-image-4{width:36%;left:0;cursor:initial;}


    .supervox-process-container.active-0 .scroller,
    .supervox-process-container.active-1 .scroller,
    .supervox-process-container.active-2 .scroller,
    .supervox-process-container.active-3 .scroller,
    .supervox-process-container.active-4 .scroller{left:0;}


    .supervox-process-container.active-0 .process-image-0 .label-container,
    .supervox-process-container.active-1 .process-image-1 .label-container,
    .supervox-process-container.active-2 .process-image-2 .label-container,
    .supervox-process-container.active-3 .process-image-3 .label-container,
    .supervox-process-container.active-4 .process-image-4 .label-container{font-size:2em;bottom:1.1em;}

	.supervox-process-container.active-0 .process-image-0 .label-container{
		opacity:1;
		position:inherit;		
	}
	.supervox-process-container .process-image-0 .label-container{font-size:16px;}
	.supervox-process-container.active-0 .process-image-0 .label-container{font-size:0.9em;}
	
    .supervox-process-container .copy .content{
       /*
	    margin-top: 0.5em;
        line-height:1.3;
		*/
    }
    /*.supervox-process-container .copy .content .cta-container{ font-size:1.125em;}*/

    .supervox-process-container .copy h1 {
        padding: 0.625em 1.875em;
        background: none repeat scroll 0 0 #2f2d2f;
        display: table;
        letter-spacing: 3px;
        text-align: center;
        width: auto;
        text-transform: uppercase;
        position: relative;
        z-index: 6;
        color:#FFFFFF;
        font-size:0.68181818em;
    }

    /* special styles for the intro screen */
    /*
    .supervox-process-container.active-0 .process-image-0,
    .supervox-process-container.active-0 .process-image-0 .process-image-inner{padding-bottom:66%;}
    */
    .supervox-process-container.active-0 .process-image-0 .process-image-inner{ /* this is a copy of the .wrapper class */
        /*
		padding-left:50px;
        padding-right:50px;
        */
		max-width: 1288px;
        margin-left: auto;
        margin-right: auto;
        position:relative;
    }
    .supervox-process-container.active-0 .process-image-0 .process-image-inner .process-image-inner-padding{
		margin-left:50px;
		margin-right:50px;
		position:relative;
		height:100%;
	}
    .supervox-process-container.active-0 .copy{display:none;}
	
    .supervox-process-container          .images  .process-image-0 img{width: 129%;left: 0; margin-top: 2%;}
    .supervox-process-container.active-0 .images  .process-image-0 img{width: 63%;left: 50%; margin-top: 0;}
	
	.supervox-process-container          .images  .process-image-0 img{
		
	}
	
    .supervox-process-container .process-image-0 .intro-copy{display:block}
	
    .supervox-process-container.active-0 .process-image-0 .label-container .label{margin:inherit;font-size:0.79365079em;margin-top:40px;line-height:1;}
    .supervox-process-container.active-0 .process-image-0 .intro-copy{
        opacity:1;
        white-space:normal;
		display:none;
		font-size: 1.0em;
        line-height: 1.3;
        display:block;
    	width:50%;
	}
    .supervox-process-container			 .process-image-0 .intro-copy .intro-copy-minus-label{display:none;}
    .supervox-process-container.active-0 .process-image-0 .intro-copy .intro-copy-minus-label{display:block;}
	
    .supervox-process-container.active-0 .process-image-0 .intro-copy h1{
        white-space: initial;
        color: #FFFFFF;
		margin-top: 0.37em;
		margin-bottom: 0.35em;
		font-size: 2.5em;
		line-height: 1.0;
    }
    .supervox-process-container.active-0 .process-image-0 .intro-copy p{
        white-space:normal;
        line-height:1.4;
    }

}


/* RESPONSIVE SIZING OF ELEMENTS */

@media  (min-width: 600px) {
    .supervox-process-container.active-0 .process-image-0 .intro-copy{font-size:0.8em;}
}
@media  (min-width: 675px) {
    .supervox-process-container.active-0 .process-image-0 .intro-copy{font-size:0.9em;}
    .supervox-process-container.active-0 .process-image-0 .intro-copy h1{font-size:3.0em;}
    .supervox-process-container .process-image .label {font-size:0.7em;}
}
@media  (min-width: 775px) {
    .supervox-process-container.active-0 .process-image-0  .intro-copy{font-size:0.9em;}
    .supervox-process-container .cta-container-inner{font-size:1em;}
    .supervox-process-container .process-copy{font-size:1.375em; /* 22px */}
    .supervox-process-container .process-copy .content{/*font-size:22px;*/}
    .supervox-process-container .images .process-image{width:12.5%;}
    .supervox-process-container.active-0 .process-image-0,
    .supervox-process-container.active-1 .process-image-1,
    .supervox-process-container.active-2 .process-image-2,
    .supervox-process-container.active-3 .process-image-3,
    .supervox-process-container.active-4 .process-image-4{width:50%;}
    .supervox-process-container .process-image .label {font-size:0.5em;}

}
@media  (min-width: 850px) {
    .supervox-process-container.active-0 .process-image-0 .intro-copy{font-size:1.0em;}
}
@media  (min-width: 940px) {
    .supervox-process-container.active-0 .process-image-0 .intro-copy{font-size:1.1em;}
    .supervox-process-container.active-0 .process-image-0 .intro-copy h1{font-size:2.67em;}
    .supervox-process-container.active-0 .process-image-0 .label{font-size:0.9em;}
    .supervox-process-container .process-image .label {font-size:0.7em;}
}
@media  (min-width: 1020px) {
    .supervox-process-container.active-0 .process-image-0 .intro-copy{font-size:1.2em;}
    .supervox-process-container .process-image .label {padding:0.625em 1.25em;}
}
@media  (min-width: 1100px) {.supervox-process-container.active-0 .process-image-0 .intro-copy{font-size:1.3em;}}
@media  (min-width: 1200px) {
    .supervox-process-container.active-0 .process-image-0 .intro-copy{font-size:1.4em;}
}

/* short screens. Make the animation area less tall */
@media screen and (min-width: 600px) and (max-width: 1388px) and (max-height: 750px) {
    .supervox-process-container .images .process-image img{top:35%;} /* the images move up so that they are just above the vertical center, giving a little more botto space for the lable */
    .supervox-process-container.active-0 .images .process-image-0 img{top: 4em;}
	.supervox-process-container .process-image .label-container{bottom:1em;} /* the label moves close to the bottom */
	
	.supervox-process-container.active-0 .process-image-0 .label-container,
    .supervox-process-container.active-1 .process-image-1 .label-container,
    .supervox-process-container.active-2 .process-image-2 .label-container,
    .supervox-process-container.active-3 .process-image-3 .label-container,
    .supervox-process-container.active-4 .process-image-4 .label-container{bottom:0.2em;font-size:0.75em;}
}



/* make the intro screen background blue when it is active */
.supervox-process-container.active-0 .process-image-0{width:100%;background-color:#4ec5ed;}
.supervox-process-container.active-0 .process-image-1{width:1%;}
.supervox-process-container.active-0 .process-image-2{width:1%;}
.supervox-process-container.active-0 .process-image-3{width:1%;}
.supervox-process-container.active-0 .process-image-4{width:1%;}