/*----------------------------skip to content---------*/
a.skip-main {
    left:-999px;
    position:absolute;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    z-index:-999;
}
a.skip-main:focus, a.skip-main:active {
    background:white;
    color:blue;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow:auto;
    margin: 10px;
    padding:5px;
    font-size:1.4em;
    z-index:999;
}
/*----------------------------skip to content---------*/

#accessibility-links-2 button:focus{
	border: 1px dotted #fff!important;
	background:red;
}

#accessibility-links-2 div:hover{
	border: 1px dotted #fff!important;
	background:lightred;
}
/*---------------------modal--------*/

.flotante button{
	background:transparent;
	border:none;
	right:0;
	margin:0;
	padding:0;
	transform: translateX(30%);
	transition: all 0.5s;
	z-index:2;
	width:50px;
	opacity:0.8;
}
.flotante{
	 position: fixed;
    bottom: 320px;
    right: 0px;
    top: 47%;
    z-index: 4;
	border:none;
}

.flotante button:hover {
	transform: translateX(0%);
	transition: all 0.5s;
	outline:0px;
	z-index:4;
	opacity:1;
	cursor:pointer;
}
.back-ima{
	background:#fff;
	border-radius:10px 0 0 10px;
}/*
.dialog-overlay {
	z-index: 2;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:red;

}*/



.dialog {
	z-index: 30000;
	background-color: #115C92;
	padding: 20px;
	text-align: center;
	width: 100%;
	height:200px;
	max-width: 100%;
	  overflow-y: scroll;
	position: fixed;
	left: 50%;
	transform: translate(-50%);
	bottom:0;
	border-top:3px solid #fff;
	border-bottom:5px solid #fff;
	 opacity: 0.9;
}
.dialog h1{
	color:#fff;
}

.capa-dialog{
	border-radius:1px solid #000;	
font-family:Arial;
	width:default;
}

.dialog-overlay[aria-hidden="true"],
.dialog[aria-hidden="true"] {
	display: none;
}

.dialog-overlay:not([aria-hidden="true"]),
.dialog:not([aria-hidden="true"]) {
	display: block;
}

.sr-only {
	opacity: 0;
	position: absolute;
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px, 1px, 1px, 1px);
}

.btn-opc-acce{
	display:flex;
	justify-content:center;

margin:0 auto;
	flex-wrap:wrap;
	text-align:center;
}
.contenedor-diag{

	max-width:900px !important;
}

.btn-opc-acce div{
	display:flex;
	border-radius:10px;
	border:1px solid #fff;
	top:0;
	justify-content:center;
	flex-direction:column;
	margin:10px;
	text-align:center;
	padding:10px;
	width:120px;
}

#accessibility-links-2 button {
    margin: 0 auto !important;
	position:relative;
	left:2px;
	background:red;
}

.mod-text{
	font-size:12px;
}

.btn-opc-acce h2{
	font-size:13px;
}
.btn-opc-acce h3{
	font-size:13px;
	color:#fff;
	text-transform: uppercase;
   padding:0 0 5px 0;
    font-weight: bold;
	letter-spacing: -0.5px; 
}
.capa-dialog h2{
	
	color:#fff;
}

/*------------COMANDOS DEL TECLADO-------------*/

/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
			
		}
		table {
			border:none !important;
			border-collapse: collapse;
			margin:0 auto;
			
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		
		}

    tr {
      margin: 10px;
	  box-sizing:border-box;
	
    }
      
    tr:nth-child(odd) {
      background: #00375e;
    }
    
		td {
			/* Behave  like a "row" */
			
			border: 1px solid #eee;
			position: relative;
			
		
		
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			
			left: 6px;
			width: 10%;
			white-space: nowrap;
		}
		
		table caption{
		
			display:block;
		}
		table, td, th {
			
			border-collapse: collapse;
			
		}
		td {
    
   
			padding: 10px 10px;
		   
		}
		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		td:nth-of-type(1):before { content: "ACCESO"; }
		td:nth-of-type(2):before { content: "TECLA"; }
		td:nth-of-type(3):before { content: "DESTINO"; }
		td:nth-of-type(4):before { content: "Favorite Color"; }
		td:nth-of-type(5):before { content: "Wars of Trek?"; }
		td:nth-of-type(6):before { content: "Secret Alias"; }
		td:nth-of-type(7):before { content: "Date of Birth"; }
		td:nth-of-type(8):before { content: "Dream Vacation City"; }
		td:nth-of-type(9):before { content: "GPA"; }
		td:nth-of-type(10):before { content: "Arbitrary Data"; }
	}
	
	
	table {
	margin:0 auto;
	color:#fff;
	margin-top:15px;
}

table caption h2{
	font-size:19px;
	width:100%;
}
table, td, th {
	border:  0px;
	border-collapse: collapse;
	border: 1px solid #fff;
}
td {
    padding: 10px;
	color:#fff;
	
}
th {
    
   
	padding: 10px 10px;
   
}
 table>tbody>tr:nth-child(odd)>td, 
      table>tbody>tr:nth-child(odd)>th {
       background-color: #013459;
      }

      
/*------------COMANDOS DEL TECLADO-----------*/

/*-------------AYUDA DEL SITIO WEB----------*/
.cap-hel-site{
	position:relative;
	margin-top:20px;
	
}

/*-------------AYUDA DEL SITIO WEB------*/



/*------------COMANDOS DEL TECLADO-----------*/
/*_-----------------------modal-----------*/


/*=================STAR BOTONES OPCIONES DE ACCESIBILIDAD==========*/


div#accessibility-links-2 {
    cursor: auto;
    border: 0;
	display:flex!important;
    z-index: 99999;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
	
    box-sizing: content-box
}
div#accessibility-links-2.bottomleft,
div#accessibility-links-2.topleft {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px
}
div#accessibility-links-2.bottomright,
div#accessibility-links-2.topright {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px
}
div#accessibility-links-2 * {
    box-sizing: content-box
}
body.scr_highcontrast,
html.scr_highcontrast {
    filter: invert(100%)
}
div#accessibility-links-2 span {
    color: #111;
    font-size: 11px;
    font-weight: bold;
    line-height: 12px;
    height: 20px;
    float: left;
    cursor: auto;
    padding-left: 32px;
    margin-top: 6px
}
div#accessibility-links-2 span.fr_label.startapp {
    background: transparent!important
}

div#accessibility-links-2 button,
span.screenreader_embed_play_button,
span.screenreader_embed_stop_button {
    border: none!important;
    height: 32px;
    width: 32px;
    cursor: pointer;
    display: inline-block;
    margin: 5px 0 0 0;
    padding: 0;
    box-sizing: border-box!important;
    vertical-align: middle;
    outline: none!important
}
div#accessibility-links-2 button#fr_screenreader_play {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_play.png') no-repeat;
    border: none!important;
    margin-left: 2px;
    color: transparent;
    font-size: 0!important;
    line-height: 0
}
span.screenreader_embed_play_button {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_play.png') no-repeat;
    border: none!important;
    margin-left: 2px;
    color: transparent;
    line-height: 0
}
div#accessibility-links-2 button#fr_screenreader_pause {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_pause.png') no-repeat;
    border: none!important;
    color: transparent;
    font-size: 0!important;
    line-height: 0
}
div#accessibility-links-2 button#fr_screenreader_pause.active {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_pause_active.png') no-repeat
}
div#accessibility-links-2 button#fr_screenreader_stop,
span.screenreader_embed_stop_button {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_stop.png') no-repeat;
    border: none!important;
    color: transparent;
    font-size: 0!important;
    line-height: 0
}
span[class*=screenreader_embed_] {
    margin-left: 2px
}
div#accessibility-links-2 button#fr_screenreader_font_increase {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_increase.png') no-repeat;
    border: none!important;
    padding: 2px;
    color: transparent;
    font-size: 0!important;
    line-height: 0
}
div#accessibility-links-2 button#fr_screenreader_font_decrease {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_decrease.png') no-repeat;
    border: none!important;
    padding: 2px;
    color: transparent;
    font-size: 0!important;
    line-height: 0
}
div#accessibility-links-2 button#fr_screenreader_font_reset {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_reset.png') no-repeat;
    border: none!important;
    padding: 2px;
    color: transparent;
    font-size: 0!important;
    line-height: 0
}
div#accessibility-links-2 button#fr_screenreader_font_family {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_dyslexic.png') no-repeat;
    border: none!important;
    margin-left: 4px;
    padding: 2px;
    color: transparent;
    font-size: 0!important;
    line-height: 0
}
div#accessibility-links-2 button#fr_screenreader_font_cr {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_cr.png') no-repeat;
    border: none!important;
    margin-left: 2px;
    padding: 2px;
    color: transparent;
    font-size: 0!important;
    line-height: 0
}
div#accessibility-links-2 button#fr_screenreader_convertic {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_convertic.png') no-repeat;
    border: none!important;
    margin-left: 0px;
    padding: 2px;
    color: transparent;
    font-size: 0!important;
    line-height: 0
}
div#accessibility-links-2 button#fr_screenreader_gray_hues {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_grayhues.png') no-repeat;
    border: none!important;
    margin-left: 4px;
    padding: 2px;
    color: transparent;
    font-size: 0!important;
    line-height: 0
}
div#accessibility-links-2 button#fr_screenreader_spacing_increase {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_spacing_increase.png') no-repeat;
    border: none!important;
    margin-left: 4px;
    padding: 2px;
    color: transparent;
    font-size: 0!important;
    line-height: 0
}
div#accessibility-links-2 button#fr_screenreader_spacing_decrease {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_spacing_decrease.png') no-repeat;
    border: none!important;
    margin-left: 4px;
    padding: 2px;
    color: transparent;
    font-size: 0!important;
    line-height: 0
}
div#accessibility-links-2 button#fr_screenreader_bigcursor {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_bigcursor.png') no-repeat;
    border: none!important;
    padding: 2px;
    color: transparent;
    font-size: 0!important;
    line-height: 0
}
div#accessibility-links-2 button#fr_screenreader_skiptocontents {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_skipto.png') no-repeat;
    border: none!important;
    padding: 2px;
    color: transparent;
    font-size: 0!important;
    line-height: 0
}
div#accessibility-links-2 button#fr_screenreader_highcontrast {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_highcontrast1.png') no-repeat;
    border: none!important;
    color: transparent;
    font-size: 0!important;
    line-height: 0
}
div#accessibility-links-2 button#fr_screenreader_highcontrast2 {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_highcontrast2.png') no-repeat;
    border: none!important;
    color: transparent;
    font-size: 0!important;
    line-height: 0
}
div#accessibility-links-2 button#fr_screenreader_highcontrast3 {
    background: url('../../../plugins/system/screenreader/screenreader/libraries/controller/css/images/fa_highcontrast3.png') no-repeat;
    border: none!important;
    color: transparent;
    font-size: 0!important;
    line-height: 0
}
div#tts_message {
    cursor: auto;
    float: left;
    z-index: 99999;
    background-color: #EEE; 
    top: 0;
    left: 0;
    background: url('../../plugins/system/screenreader/screenreader/libraries/controller/css/images/screen-reader-symbols_sound-off.png') no-repeat 5px 5px;
    width: 35px;
    height: 35px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px
}
div#accessibility-links-2.topleft div#tts_message,
div#accessibility-links-2.bottomleft div#tts_message {
    float: right
}

/*==end new stayle==================*/

/*===================END BOTONES OPCIONES DE ACCESIBILIDAD=================*/