@font-face {
	font-family: 'MTCORSVA';
	src: url('./MTCORSVA.eot');
	src: local('MTCORSVA'), url('./MTCORSVA.woff') format('woff'), url('./MTCORSVA.ttf') format('truetype');
}
     
    .boton {
        width: 200px;
        height: 50px;
        margin: 70px auto;
        display: block;
        position: relative;
		 box-shadow: 10px 10px 5px grey;
    }
	
	 .boton1 {
        width: 200px;
        height: 50px;
        margin: 70px auto;
        display: block;
        position: relative;
		 box-shadow: 10px 10px 5px grey;
		 
    }
	
	 .boton2 {
        width: 200px;
        height: 50px;
        margin: 70px auto;
        display: block;
        position: relative;
		  box-shadow: 10px 10px 5px grey;
    }
	
	
	
	
    
    .botontext {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 1;
        text-align: center;
        line-height: 50px;
       
        font-size: 20px;
        text-transform: uppercase;
    }
	
	
	.boton1text {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 1;
        text-align: center;
        line-height: 50px;
       
        font-size: 20px;
        text-transform: uppercase;
    }
	
	.boton2text {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 1;
        text-align: center;
        line-height: 50px;
		color:#ffffff;
       
        font-size: 20px;
        text-transform: uppercase;
    }
	
	
    
    .twist {
        display: block;
        height: 100%;
        width: 25%;
        position: relative;
        float: left;
        margin-left: -4px;
    }
    
    .twist:before {
        content: "";
        width: 100%;
        height: 100%;
        background: #F2635F;
        bottom: 100%;
        position: absolute;
        transform-origin: center bottom 0px; 
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, -0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .twist:after {
        content: "";
        position: absolute;
        width: 100%;
        top: 100%;
        height: 100%;
        background: #a92585;
        transform-origin: center top 0px;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, -0.003, 
                            0, -50, 0, 1);
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .boton:hover .twist:before {
        background: #999999;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, 0.003, 
                            0, 50, 0, 1);
    }
    
    .boton:hover .twist:after {
        background: #f80000;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, 0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
    }

    .boton .twist:nth-of-type(1) {
        margin-left: 0;
    }
    
    .boton .twist:nth-of-type(1):before,
    .boton .twist:nth-of-type(1):after {
        transition-delay: 0s;
    }
    
    .boton .twist:nth-of-type(2):before,
    .boton .twist:nth-of-type(2):after {
        transition-delay: 0.1s;
    }
    
    .boton .twist:nth-of-type(3):before,
    .boton .twist:nth-of-type(3):after {
        transition-delay: 0.2s;
    }
    
    .boton .twist:nth-of-type(4):before,
    .boton .twist:nth-of-type(4):after {
        transition-delay: 0.3s;
    }
    
    .boton .botontext:nth-of-type(1) {
        color: #fff;
        bottom: 100%;
        transform-origin: center bottom 0px; 
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, -0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .boton:hover .botontext:nth-of-type(1) {
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, 0.003, 
                            0, 50, 0, 1);
    }
    
    .boton .botontext:nth-of-type(2) {
        color: #fff;
        top: 100%;
        transform-origin: center top 0px;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, -0.003, 
                            0, -50, 0, 1);
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .boton:hover .botontext:nth-of-type(2) {
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, 0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
    }

    /*MENU*/
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	.boton1:hover .twist:before {
        background: #999999;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, 0.003, 
                            0, 50, 0, 1);
    }
    
    .boton1:hover .twist:after {
        background: #999999;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, 0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
    }

    .boton1 .twist:nth-of-type(1) {
        margin-left: 0;
    }
    
    .boton1 .twist:nth-of-type(1):before,
    .boton1 .twist:nth-of-type(1):after {
        transition-delay: 0s;
    }
    
    .boton1 .twist:nth-of-type(2):before,
    .boton1 .twist:nth-of-type(2):after {
        transition-delay: 0.1s;
    }
    
    .boton1 .twist:nth-of-type(3):before,
    .boton1 .twist:nth-of-type(3):after {
        transition-delay: 0.2s;
    }
    
    .boton1 .twist:nth-of-type(4):before,
    .boton1 .twist:nth-of-type(4):after {
        transition-delay: 0.3s;
    }
    
    .boton1 .boton1text:nth-of-type(1) {
        color: #ffffff;
        bottom: 100%;
        transform-origin: center bottom 0px; 
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, -0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .boton1:hover .boton1text:nth-of-type(1) {
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, 0.003, 
                            0, 50, 0, 1);
    }
    
    .boton1 .boton1text:nth-of-type(2) {
        color: #fff;
        top: 100%;
        transform-origin: center top 0px;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, -0.003, 
                            0, -50, 0, 1);
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .boton1:hover .boton1text:nth-of-type(2) {
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, 0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
    }

	
	
	
	
	
	
	
	.boton2:hover .twist:before {
        background: #999999;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, 0.003, 
                            0, 50, 0, 1);
    }
    
    .boton2:hover .twist:after {
        background: #999999;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, 0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
    }

    .boton2 .twist:nth-of-type(1) {
        margin-left: 0;
    }
    
    .boton2 .twist:nth-of-type(1):before,
    .boton2 .twist:nth-of-type(1):after {
        transition-delay: 0s;
    }
    
    .boton1 .twist:nth-of-type(2):before,
    .boton1 .twist:nth-of-type(2):after {
        transition-delay: 0.1s;
    }
    
    .boton2 .twist:nth-of-type(3):before,
    .boton2 .twist:nth-of-type(3):after {
        transition-delay: 0.2s;
    }
    
    .boton2 .twist:nth-of-type(4):before,
    .boton2 .twist:nth-of-type(4):after {
        transition-delay: 0.3s;
    }
    
    .boton2 .boton2text:nth-of-type(1) {
        color: #ffffff;
        bottom: 100%;
        transform-origin: center bottom 0px; 
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, -0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .boton2:hover .boton2text:nth-of-type(1) {
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, 0.003, 
                            0, 50, 0, 1);
    }
    
    .boton2 .boton1text:nth-of-type(2) {
        color: #fff;
        top: 100%;
        transform-origin: center top 0px;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, -0.003, 
                            0, -50, 0, 1);
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .boton2:hover .boton1text:nth-of-type(2) {
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, 0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
    }

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
    
    .square {
        border: 1px solid #9f7f5e;
        height: 26px;
        width: 26px;
        display: block;
        margin: 40px auto;
        transform: rotate(45deg);
        overflow: hidden;
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    

    .square .burgerwrap {
        height: 18px;
        width: 21px;
        transform: rotate(-45deg);
        padding-left: 5px;
        padding-top: 8px;

        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .square:hover {
        transform: rotate(135deg);
        border: 1px solid #fff;
    }
    
    .square:hover .burgerwrap {
        transform: rotate(-135deg)
    }
    
    .square span {
        height: 2px;
        width: 14px;
        background: #9f7f5e;
        display: block;
        margin-bottom: 2px;
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .square span:after {
        content: "";
        height: 2px;
        width: 14px;
        position: absolute;
        background: #fff;
        left: -19px;
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .square:hover span {
        margin-left: 26px;
    }
    
    .square:hover span:after {
        left: 5px;
    }
    
    .square span:nth-of-type(1),
    .square span:nth-of-type(1):after {
        transition-delay: 0.1s;
    }
    
    .square span:nth-of-type(2),
    .square span:nth-of-type(2):after {
        transition-delay: 0.2s;
    }
    
    .square span:nth-of-type(3),
    .square span:nth-of-type(3):after {
        transition-delay: 0.3s;
    }