.hide{
    opacity: 0;
    -webkit-transform: opacity(0);
		 -moz-transform: opacity(0);
			-ms-transform: opacity(0);
			 -o-transform: opacity(0);
					transform: opacity(0);
            
	-webkit-transition: all 0.2s ease-out;
		 -moz-transition: all 0.2s ease-out;
			-ms-transition: all 0.2s ease-out;
			 -o-transition: all 0.2s ease-out;
					transition: all 0.2s ease-out;
}

.fade{
      opacity: 1;
    -webkit-transform: opacity(1);
		 -moz-transform: opacity(1);
			-ms-transform: opacity(1);
			 -o-transform: opacity(1);
					transform: opacity(1);
            
	-webkit-transition: all 0.6s ease-out;
		 -moz-transition: all 0.6s ease-out;
			-ms-transition: all 0.6s ease-out;
			 -o-transition: all 0.6s ease-out;
					transition: all 0.6s ease-out;
}

#scrollFixed {
			position: relative;
/*			background-color: #f3f3f3;
			padding: 1rem;*/
            height: auto ;
		}

		article {
			position: relative;
			padding: 0;
			max-width: 60rem;
			margin: 0 auto;
		}

		figure {
			position: -webkit-sticky;
			position: sticky;
			left: 0;
			width: 100%;
			margin: 0;
			-webkit-transform: translate3d(0, 0, 0);
			-moz-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
/*			background-color: #8a8a8a;*/
			z-index: 0;
            
		}

		figure img {
/*			padding: 1rem; */
            width:35%;
			position: absolute;
			top: 50%;
			 /* left: 65%; 
            right: -48%;
            */
            right: 0;
			-moz-transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
          /*  background-color: #e5e2e3;*/
		}



		.step {
			margin: 0 auto 2rem auto;
            height: 100vh;
           
           
		}
        
		.step:last-child {
			margin-bottom: 0;
		}

        .step p {
            opacity: 0;
        }

		.step.is-active p {
            
          opacity: 1;
            
    	-webkit-transform: opacity(1);
		 -moz-transform: opacity(1);
			-ms-transform: opacity(1);
			 -o-transform: opacity(1);
					transform: opacity(1);
            
	-webkit-transition: all 0.6s ease-out;
		 -moz-transition: all 0.6s ease-out;
			-ms-transition: all 0.6s ease-out;
			 -o-transition: all 0.6s ease-out;
					transition: all 0.6s ease-out;
		}

		.step p {
			text-align: left;
			padding: .2rem;
			/*	font-size: 1.5rem;
		    background-color: #3b3b3b;*/
		}

.ddb-position{
	font-size: 3em;

}

.ddb-position.charge{
    color:#ee3e40;
    font-size: 1em;
	font-family: 'brignell_squareregular';

}

#DDBPosition{
    opacity: 0;
	position: sticky;
    padding: 0;
    max-width: 48rem;
    height: 121px !important;
    margin: 0 auto;
    top: 48%;
/*	transform: translate(4%, -365%); */
	/*
		position: sticky;
		padding: 0;
		max-width: 48rem;
		height: 150px !important;
		margin: 0 auto;
		top: 75%;
		transform: translate(4%, -365%);
	*/
}

#DDBPosition.fade{
       opacity: 1;
    -webkit-transform: opacity(1);
		 -moz-transform: opacity(1);
			-ms-transform: opacity(1);
			 -o-transform: opacity(1);
					transform: opacity(1);
            
	-webkit-transition: all 0.6s ease-out;
		 -moz-transition: all 0.6s ease-out;
			-ms-transition: all 0.6s ease-out;
			 -o-transition: all 0.6s ease-out;
					transition: all 0.6s ease-out;
}

@media (min-width: 481px) and (max-width: 1280px) {

}

@media (min-width: 768px) and (max-width: 1024px) {
   
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}

@media (min-width: 481px) and (max-width: 767px) {
	#DDBPosition{
		top: 59%;
/*		transform: translate(6%, -270%);*/
        margin-left: 6%;
		height: 152px !important;
	}
    
     .DDBPosition-sticky{
         width: 90%;
    }
    
}

@media (min-width: 320px) and (max-width: 480px) {
    
	#DDBPosition{
        top: 77%;
/*        transform: translate(6%, 0%);*/
        margin-left: 6%;
	}

	.ddb-position {
		font-size: 2em;
	}

    figure {
        overflow: hidden;
    }
    
    figure img {
        width: 95%;
        right: -48%;
    }
    
    .DDBPosition-sticky{
         width: 90%;
    }

}


/* TYPE OF MOBILE */
@media (min-width: 414px) and (max-width: 480px) { 
	#DDBPosition{
		top: 53%;
		transform: translate(6%, -225%);
	}
}

@media (min-width: 375px) and (max-width: 413px) {
    
	#DDBPosition{
        top: 77%;
/*        transform: translate(6%, 0%);*/
        margin-left: 6%;
   
	}
}
@media (min-width: 310px) and (max-width: 374px) {
    
/*
	#DDBPosition{
		top: 62%;
		transform: translate(2%, -225%);
	}
*/


}