/*slide in little pop - Labels go up*/

.fadeOut {
  -ms-transform: translateY(5px);
  -moz-transform: translateY(5px);
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  -ms-transition: ease-in 300ms transform, opacity ease-in 300ms, z-index ease-in 300ms;
  -moz-transition: ease-in 300ms transform, opacity ease-in 300ms, z-index ease-in 300ms;
  -webkit-transition: ease-in 300ms transform, opacity ease-in 300ms, z-index ease-in 300ms;
  transition: ease-in 300ms transform, opacity ease-in 300ms, z-index ease-in 300ms;
  opacity: 0;
  z-index: -1;
  position:absolute;
  visibility:hidden;
}

.fadeIn {
  -ms-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  -ms-transition: ease-in 300ms transform, opacity ease-in 300ms, ease-in 300ms;
  -moz-transition: ease-in 300ms transform, opacity ease-in 300ms, ease-in 300ms;
  -webkit-transition: ease-in 300ms transform, opacity ease-in 300ms, ease-in 300ms;
  transition: ease-in 300ms transform, opacity ease-in 300ms, ease-in 300ms;
  opacity: 1;
  z-index: 50;
  position:absolute;
}

/*end slide in pops*/




/*dynamic labels form*/

.labelUp label {

	font-size:1.7rem;
	-webkit-transform: translateY(20%) ;
    transform: translateY(20%) ; 
	-webkit-transition: transform ease 200ms, opacity ease 200ms, font-size ease 200ms;
    transition: transform ease 200ms, opacity ease 200ms, font-size ease 200ms;
	opacity:1;
}




.labelDown label {
			
	-webkit-transition: transform ease 200ms, opacity ease 200ms, font-size ease 200ms;
    transition: transform ease 200ms, opacity ease 200ms, font-size ease 200ms;
    will-change: transform;
	
}


/*end dynamic labels form*/



/*list fading*/

.listUp {

	-moz-transition: transform ease 200ms, opacity ease 200ms;
	-webkit-transition: transform ease 200ms, opacity ease 200ms;
	transition: transform ease 200ms, opacity ease 200ms;
	-moz-transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.listDown {
	-moz-transition: transform ease 200ms, opacity ease 500ms;
	-webkit-transition: transform ease 200ms, opacity ease 500ms;
	transition: transform ease 200ms, opacity ease 500ms;
	-moz-transform: translateY(0%);
	-webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
    z-index: 1;
    pointer-events:all;

}

/*end list fading*/



/*3d flip effect*/

section.d3Env {


	position:relative;
	-ms-perspective:800px;
	-moz-perspective:800px;
	-webkit-perspective:800px;
	perspective:800px;
}

section.d3Env .d3Obj {

	width:100%;
	height:100%;
	position: absolute;
	-ms-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-webit-transform-style: preserve-3d;
    transform-style: preserve-3d;
	-ms-transition: transform 500ms;
	-moz-transition: transform 500ms;
	-webkit-transition: transform 500ms;
    transition: transform 500ms;
	-ms-transform-origin: center center;
	-moz-transform-origin: center center;
	-webkit-transform-origin: center center;
	transform-origin: center center;

		/*-ms-transform-origin: left center;
	-moz-transform-origin: left center;
	-webkit-transform-origin: left center;
	transform-origin: left center;*/
}


section.d3Env .d3Obj  figure {

	margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
	-ms-backface-visibility: visible;
	-moz-backface-visibility: visible;
	-webkit-backface-visibility: visible;
    backface-visibility: visible;
	cursor:pointer;


}



section.d3Env .d3Obj figure.front {
    background: rgba(139, 195, 74, 0.85);
	color:#fff;
    text-align: center;
    box-sizing: border-box;
    font-size: 3rem;
    line-height: 7;
    width:50%;
}


section.d3Env .d3Obj figure.back {

	
	-ms-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-webkit-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}



section.d3Env:hover .d3Obj {

	-ms-transform:rotateY( 180deg );
	-moz-transform:rotateY( 180deg );
	-webkit-transform: rotateY( 180deg );
	transform:rotateY( 180deg );

	/*-ms-transform: translateX(100%)  rotateY( 180deg );
	-moz-transform: translateX(100%)  rotateY( 180deg );
	-webkit-transform: translateX(100%)  rotateY( 180deg );
	transform: translateX(100%)  rotateY( 180deg );*/
}


/*End 3d*/



/*Hacks for edge*/

@supports (-ms-ime-align:auto) {

    section.d3Env .d3Obj figure {
        margin: 0;
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        -ms-backface-visibility: visible;
        -moz-backface-visibility: visible;
        -webkit-backface-visibility: visible;
        backface-visibility: visible;
        cursor: pointer;
    }

        section.d3Env .d3Obj figure.front {

            z-index:5;
        }

           section.d3Env:hover .d3Obj figure.front {

            z-index:0;
        }
}





}

/*End Edge hacks*/




@media screen and (max-width:780px) {

    .labelUp label {
        -webkit-transform: translateY(10%);
        transform: translateY(10%);
    }



}