@font-face {
    font-family: 'Calibri';
    src: url('../../fonts/CalibriRegular.ttf') format('truetype');
    /*
    font-family: 'Cocogoose';
    src: url('cocogoose.eot'); /* IE9 Compat Modes */
    /* src: url('cocogoose.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    /*    url('cocogoose.woff2') format('woff2'), /* Super Modern Browsers */
    /*    url('cocogoose.woff') format('woff'), /* Pretty Modern Browsers */
    /*    url('cocogoose.ttf')  format('truetype'), /* Safari, Android, iOS */
    /*    url('cocogoose.svg#svgFontName') format('svg'); /* Legacy iOS */
}
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto;
} 
.modal-content {
    position: relative;
    margin: 10px auto;
    padding: 0;
    border: 0;
    width: 777px;
    height: 495px;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
} 
.modal-body {
    padding: 0;
}
#modal-info {
    color: #666666;
    font-family: Calibri;
    font-size: 20px;
    left: 17%;
    opacity: 1;
    padding: 15px;
    position: absolute;
    text-align: center;
    top: 38%;
    width: 60%;
}
#modal-info span {
	font-family: Calibri;
    font-weight: bold;
    font-size: 20px;
}
#modal-info strong {
	font-family: Calibri;
    font-size: 19px;
}
#modal-close {
    cursor: pointer;
    height: 40px;
    position: absolute;
    right: 22px;
    top: 8px;
    width: 40px;
}
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}
.modal-body video, .modal-body iframe {
    margin-top: -49px;
}
#btn-jugar {
    background: url(../../images/buttons/jugar.png);
    border: 0;
    cursor: pointer;
    height: 50px;
    width: 130px;
}
#btn-cerrar {
    background: url(../../images/buttons/cerrar.png);
    border: 0;
    cursor: pointer;
    height: 50px;
    width: 130px;
}
#btn-diploma {
    background: url(../../images/buttons/diploma.png);
    border: 0;
    cursor: pointer;
    height: 103px;
	text-decoration: none;
    width: 302px;
}