@-webkit-keyframes appear-from-bottom {
            0% {
                transform: translateY(50px);
                opacity: 0;
            }
            100% {
                transform: translateY(0%);
                opacity: 1;
            }
        }
        @-moz-keyframes appear-from-bottom {
            0% {
                transform: translateY(50px);
                opacity: 0;
            }
            100% {
                transform: translateY(0%);
                opacity: 1;
            }
        }
        @-o-keyframes appear-from-bottom {
            0% {
                transform: translateY(50px);
                opacity: 0;
            }
            100% {
                transform: translateY(0%);
                opacity: 1;
            }
        }
        @keyframes appear-from-bottom {
            0% {
                transform: translateY(50px);
                opacity: 0;
            }
            100% {
                transform: translateY(0%);
                opacity: 1;
            }
        }
        html, body{
            margin:0px;
            background-color: #f4f4f4 !important;
            height: 100vh;
            width: 100vw;

        }
       ​

		#contenedor{
			width: 1024px;
            height: 800px;
            background-color: #f4f4f4;
            /* background-color: #34627D !important; */
            padding-left: 300px;
            
		}
		#video{
            width: 100vw;
            height: 100vh;
            max-height: 800px !important;
            max-width: 1024px !important;
            background-color: #f4f4f4;
            /* background-color: #d44545; */
		}

		.boton { 
			color: #FFFFFF; 
			background-color: #002BFF; 
			width: 300px;
			height: 45px;
			font-size: 15px;
			display: block;
			margin: 0 auto;
            border-radius: 8px;
            
		} 

    

        .centrar {
            margin: 0;
            position: absolute;
            top: 50%;
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
          }
		
		.boton:hover, 
		.boton:focus, 
		.boton:active, 
		.boton.active, 
		.open .dropdown-toggle.boton { 
			color: #FFFFFF; 
			background-color: #5265FF; 
			
		} 
		
		.boton:active, 
		.boton.active, 
		.open .dropdown-toggle.boton { 
			background-image: none; 
		} 
		
		.boton.disabled, 
		.boton[disabled], 
		fieldset[disabled] .boton, 
		.boton.disabled:hover, 
		.boton[disabled]:hover, 
		fieldset[disabled] .boton:hover, 
		.boton.disabled:focus, 
		.boton[disabled]:focus, 
		fieldset[disabled] .boton:focus, 
		.boton.disabled:active, 
		.boton[disabled]:active, 
		fieldset[disabled] .boton:active, 
		.boton.disabled.active, 
		.boton[disabled].active, 
		fieldset[disabled] .boton.active { 
			background-color: #5265FF; 
			
		} 
		
		.boton .badge { 
			color: #5265FF; 
			background-color: #FFFFFF; 
		}
        
        /* #mensajes {
         
            z-index: 100;
            pointer-events: none;
         
        } */
        #videoid-wrapper {
            overflow: visible !important;
        }
        

        .mensajeTitulo {
            /* font-size: 30px; */
            font-weight: 200;
            color: rgba(191, 74, 3, 0.49);
            font-family: 'Fira Sans Condensed', sans-serif;
            text-align: center;
            opacity: 0;
            padding-left: 40px;
            padding-right: 40px;
            animation-name: appear-from-bottom;
            -webkit-animation-name: appear-from-bottom;
            -moz-animation-name: appear-from-bottom;
            -o-animation-name: appear-from-bottom;
            animation-fill-mode: forwards;
            -webkit-animation-duration: 600ms;
            animation-duration: 600ms;
            transition-timing-function: ease-in-out;
            animation-delay: 200ms;   
        }

        .mensajeCuerpo {
            color: #888;
            font-size: 16px;
            margin-bottom: 10%;
            opacity: 0;
            padding-left: 40px;
            padding-right: 40px;
            font-family: 'Fira Sans Condensed', sans-serif;
            text-align: center;
            animation-name: appear-from-bottom;
            -webkit-animation-name: appear-from-bottom;
            -moz-animation-name: appear-from-bottom;
            -o-animation-name: appear-from-bottom;
            animation-fill-mode: forwards;
            -webkit-animation-duration: 600ms;
            animation-duration: 600ms;
            transition-timing-function: ease-in-out;
            animation-delay: 400ms;
        }

        /* .capaBoton{
            position: fixed;
            bottom: 5%;
            width: 100%;
            
        } */

        #video-error{
            background-color: #f4f4f4;
        }

        #video-error p {
            font-size: 16px !important;
            text-align: center;
        }






    /* resolución del ipad Pro */
    
    /* @media only screen and (width:1024px) and (height:1366px){
        
        .contenedor{
            position: relative;
            margin: auto;
            width: 700px;
            height: 700px;
            
            }
            .video{
                width: 700px;
                height: 700px;
            }
            #mensajes {
                position: fixed;
                z-index: 100;
                pointer-events: none;
                top: 15%;
                left: 50%;
                margin-left: -50%;
                width: 100%;
                height: 100%;
            }
            .mensajeTitulo {
                font-size: 40px;
                padding-left: 40px;
                padding-right: 40px;
                margin-top: -50px;
            }

            .mensajeCuerpo {
                font-size: 30px;
                padding-left: 40px;
                padding-right: 40px;
                padding-top: -40px;
            } */

            /* estos dos estilos de #video-error es para sobreescribir los de electronic ID para pantallas pequeñas*/
            /* #video-error h2{
                font-size: 40px;
            }
            #video-error p{
                font-size: 30px;
            }

            .boton { 
                color: #FFFFFF; 
                background-color: #44A2DA; 
                width: 530px;
                height: 80px;
                font-size: 25px;
                display: block;
                margin: 0 auto;
                border-radius: 8px;
                
            } 
            
        }

        @media only screen and (min-width:301px) and (max-width:980px){
			.contenedor{
			position: relative;
			margin: auto;
			width: 100%;
            height: 700px;
            
			}
			.video{
				width: 100%;
				height: 700px;
            }
            #mensajes {
                position: fixed;
                z-index: 100;
                pointer-events: none;
                top: 15%;
                left: 50%;
                margin-left: -50%;
                width: 100%;
                height: 100%;
                
            }
            .mensajeTitulo {
                font-size: 50px;
                padding-left: 40px;
                padding-right: 40px;
                margin-top: -50px;
                font-weight: 400;
                color: rgba(191, 74, 3, 0.49);
                
            }

            .mensajeCuerpo {
                font-size: 40px;
                padding-left: 40px;
                padding-right: 40px;
                padding-top: -40px;
            } */

            /* estos dos estilos de #video-error es para sobreescribir los de electronic ID para pantallas pequeñas*/
            /* #video-error h2{
                font-size: 50px;
                font-weight: 400;
                color: rgba(191, 74, 3, 0.49);
                
            }
            #video-error p{
                font-size: 40px;
            }

            .boton { 
                color: #FFFFFF; 
                
                width: 80%;
                height: 100px;
                font-size: 30px;
                display: block;
                margin: 0 auto;
                border-radius: 8px;
                margin-top: 80px;
            } 

            .capaBoton{
                position: fixed;
                bottom: 5%;
                
            }
        }
         */