.lds-roller { display: inline-block; position: relative; width: 80px; height: 80px; } .lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 40px 40px; } .lds-roller div:after { content: ' '; display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #ff6406; margin: -4px 0 0 -4px; } .lds-roller div:nth-child(1) { animation-delay: -0.036s; } .lds-roller div:nth-child(1):after { top: 63px; left: 63px; } .lds-roller div:nth-child(2) { animation-delay: -0.072s; } .lds-roller div:nth-child(2):after { top: 68px; left: 56px; } .lds-roller div:nth-child(3) { animation-delay: -0.108s; } .lds-roller div:nth-child(3):after { top: 71px; left: 48px; } .lds-roller div:nth-child(4) { animation-delay: -0.144s; } .lds-roller div:nth-child(4):after { top: 72px; left: 40px; } .lds-roller div:nth-child(5) { animation-delay: -0.18s; } .lds-roller div:nth-child(5):after { top: 71px; left: 32px; } .lds-roller div:nth-child(6) { animation-delay: -0.216s; } .lds-roller div:nth-child(6):after { top: 68px; left: 24px; } .lds-roller div:nth-child(7) { animation-delay: -0.252s; } .lds-roller div:nth-child(7):after { top: 63px; left: 17px; } .lds-roller div:nth-child(8) { animation-delay: -0.288s; } .lds-roller div:nth-child(8):after { top: 56px; left: 12px; } @keyframes lds-roller { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } body, html { font-size: 23px; overflow: hidden; height: 100%; width: 100%; padding: 0; margin: 0; background-color: #fff; font-family: 'Muli'; line-height: 1.3; color: #333; } .wcontainer { position: absolute; top: 0; overflow: hidden; width: 1365px; height: 768px; } .wloader { display: -ms-flexbox; display: flex; background-color: rgba(0, 0, 0, 0.7); position: absolute; z-index: 99; height: 100%; width: 100%; } .wmenu { position: absolute; z-index: 90; height: 100%; width: 100%; left: -100%; background-color: #3a4d63; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; display: -ms-flexbox; display: flex; overflow: auto; overflow-x: hidden; } .wmenu.open { left: 0; } .container, .container-fluid { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .header { width: 100%; height: 65px; z-index: 999; } .soportemenu { background-color: #fff; height: 75px; right: 20px; top: 0px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; } .footer { width: 100%; height: 67px; bottom: 0; left: 0; background-color: #fffffd; z-index: 1001; } .instruccionsco { height: 67px; float: right; background-color: red; display: inline; font-size: 21px; } .footer .wnavs { height: 67px; top: 0; left: 0; right: 0; margin: 0 auto; width: 273px; background-size: cover; background-position: center center; position: absolute; } .footer .btn-sound-control-sco { background-color: #91a7bb; width: 67px; height: 67px; display: table-cell; vertical-align: middle; border-top-right-radius: 30px; } .btn__atras { position: absolute; top: 4px; left: 13px; } .__paginacion { position: absolute; top: 15px; left: 95px; color: #fff; font-weight: bold; font-size: 28px; } .btn__siguiente { position: absolute; top: 4px; left: 226px; } [class*='btn'] { cursor: pointer; } .wcontainer { font-size: 23px; } .curso-progress { width: 50%; position: relative; } .menu_nombrecurso { font-size: 34px; margin-bottom: 1em; font-weight: bold; color: #ff002d; } .itemsmenu { -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; font-size: 20px; } [class*='menu_wtema'], .btn_menu_tema { padding: 5px; padding-left: 1em; margin-bottom: 0.323em; } .menu_nombremodulo { color: #ff002d; } [class*='menu_wtema'] div:not(.btn_menu_padre) { padding-left: 2em; } [class*='menu_modulo'] { margin-bottom: 1em; } .btn_menu_tema { -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .btn_menu_tema.actual, .btn_menu_tema:hover { background-color: #000; } .btn_menu_padre:before { content: '\f146'; display: inline-block; font-family: 'Font Awesome 5 Pro'; padding-right: 1em; } .btn_menu_padre.close_menu_items::before { content: '\f0fe'; } .btn_menu_padre .btn_menu_tema { padding-left: 2em; } .instruccionsco { height: 67px; float: right; display: inline; position: absolute; top: 0; right: 0; padding-left: 1em; padding-right: 1em; background-color: #fff; color: #4f5159; border-top-left-radius: 30px; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; display: table; max-width: 480px; } .instruccionsco p { display: table-cell; vertical-align: middle; } .subtenma.abierto { left: 0 !important; } div.subtenma.abierto > div.btn-show-subs > i.far.fa-chevron-right { display: none; } div.subtenma > div.btn-show-subs > i.far.fa-chevron-right { display: inline; } div.subtenma.abierto > div.btn-show-subs > i.far.fa-chevron-left { display: inline; } div.subtenma > div.btn-show-subs > i.far.fa-chevron-left { display: none; } .subtenma { position: absolute; left: 0; top: 70px; padding: 0.285em; background-color: transparent; border-top-right-radius: 15px; border-bottom-right-radius: 15px; color: #fff; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; z-index: 35; } /*.scofullscreen { height: 100% !important; top:0; }*/ /**************************************************************/ /*.section_charge { height: 636px; }*/ .section_charge p, h1, h2, h3, h4, h5 { line-height: 1.2; } ul.bullet0 { list-style-image: url(../img/template/bullet_img0.png); } ul.bullet1 { list-style-image: url(../img/template/bullet_img1.png); } .wcontainer .swal2-container { height: 100% !important; } .wcontainer .swal2-content { font-size: 23px; } .wcontainer .swal2-title { font-size: 32px; } .title_ { color: #FF002D; } .sco .swal2-container { height: 635px !important; position: absolute; background-color: rgba(22, 40, 68, 0.8) !important; overflow: hidden !important; } .sco .swal2-popup.popup-class .swal2-content { color: #000; font-size: 24px; } .sco .swal2-popup.pop-nota { border-bottom-left-radius: 121px; border-bottom: 8px solid rgba(255, 255, 255, 0.4); border-left: 8px solid rgba(255, 255, 255, 0.4); } .sco .swal2-content { font-size: 24px; } .sco .swal2-close { position: absolute; width: 55px; height: 59px; font-size: inherit !important; top: 5px; right: 7px; } /********************** Rotate Cards *************************/ .blocknav { opacity: 0.5; cursor: not-allowed; } button { outline: none !important; border: 0 !important; }