/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  color: #eeeeee;
  background-color:#ffffff; /* #2255ff; no aplica si despues viene image*/
  /*background-image: url("../img/skywall.png");*/
  
      font-family: "Oswald" !important;
    
}


@font-face {
   font-family: "Oswald";
   src: url('../fonts/Oswald-Regular.ttf') format("opentype");
}

/* defaultIZE THE NAVBAR
-------------------------------------------------- */
.navbar {
    position: relative !important;
    min-height: 50px !important;
    margin-bottom: 0px !important;
    border: 0px solid transparent !important;
}



/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports 
class="navbar custom-navbar wow fadeIn" */


.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.navbar-wrapper .navbar {
  padding-right: 10px;
  padding-left: 10px;
}
.navbar-wrapper .navbar .container {
  width: auto;
}
.navbar-header .navbar-text {
  color: #ffffff;
}

.navbar-inverse {
	
    background-color:#ff1000; /*color de fondo del header 0070cc oscuro    #3594FC azul del header claro */
    color:#ffffff;  /* letras del header*/
    /*border-radius:0;
	border-bottom-color:transparent;
	background-image: url("../img/skyheader.png");
	height:120px; el alto de la franja azul header */
}
.navbar-header .navbar-text {
  color: #ffffff;
}
  .navbar-right {
	background-color:#80d4ff;
	opacity: 0.4;
}

.navbar-inverse .navbar-nav > li > a {
  color: #ffffff;
  /*top:45px;  distancia a la que a aprecerá el menuright*/
  font-size:13px;font-weight:bold;

    font-family: "Myriad Pro";
    src: url('../fonts/MYRIADPRO-SEMIBOLDIT.OTF') format("opentype");
}

.glyphicon .glyphicon-micuenta{
    width: 5%;
    src: url('../uploads/13458007155a394db9d653c16269000001.png') ;
}


.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #fff; /* color de fondo al pasar el mouse en el naver right*/
  background-color: #808080; /*#7F1119;*/
}

@media (min-width: 768px) {
  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 10px;
    padding-left: 10px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }
}



/* para los efectos transition VER EJEMPLO EN: https://codepen.io/wisnust10/pen/mPJwWv*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
} 
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
} 
  

 /* Icono instagram con TRANSICIÓN opción 1  idea medio tomada de https://kadumweb.com/crear-sprite-css-ejemplo-mejora-seo/*/
.instagram64{
  width: 44px;
  height: 44px;
  background: transparent url("../../imagenes/Instagram-44.png");
  background-position: 0px 0px;
  transition-property: background-position;
  transition-duration: .1s;
  transition-timing-function:ease-out;
  float:left;
}
/* Icono twitter CON TRANSICIÓN opción 2 */
.twitter{
  width: 44px;
  height: 44px;
  background: transparent url("../../imagenes/Twitter-44.png");
  background-position: -44px 0px;
  transition:background-position .1s ease-out;
  float:left;
}
 /* Icono youtube con TRANSICIÓN opción 1 */
.youtube{
  width: 44px;
  height: 44px;
  background: transparent url("../../imagenes/Youtube-44.png");
  background-position: -88px 0px;
  transition-property: background-position;
  transition-duration: .1s;
  transition-timing-function:ease-out;
  float:left;
}
/* Icono facebook CON TRANSICIÓN opción 2 */
.facebook{
  width: 44px;
  height: 44px;
  background: transparent url("../../imagenes/Facebook-44.png");
  background-position: -132px 0px;
  transition:background-position .1s ease-out;
  float:left;
}
.instagram64:hover{
  background-position: 0px -44px;
}
.twitter:hover{
  background-position: -44px -44px;
}
.youtube:hover{
  background-position: -88px -88px;
}
.facebook:hover{
  background-position: -132px -44px;
}
.contenedor a{
  margin: 10px;
}

.test {
 	 font-size:10px;
}

@font-face {
   font-family: "Myriad Pro";
  /*src:url(https://www.estampamilagrosa.com/font/fonts/myriadpro/myriadpro-bold.otf) format("opentype");
   src:url(https://localhost/estampaweb/font/fonts/myriadpro/myriadpro-bold.otf) format("opentype");  */
  
}

/* conttrola el formato, colore, textos de inner del calendarios de los deportes */
.tg  {border-collapse:collapse;border-spacing:0;border-color:#999;border:none;table-layout: fixed; width: 250px; margin-left:0px; margin-right:0px;padding:0px;align:center;}
.tg th{font-family:Arial, sans-serif;font-size:11px;font-weight:normal;padding:2px 4px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#999;color:#fff;background-color:#26ADE4;}
.tg td{font-family:Arial, sans-serif;font-size:10px;padding:3px 4px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#999;color:#444;background-color:#F7FDFA;}
.tg .tg-s6z2{text-align:left;height:37px;background-color: #ff1000;color: #ffffff;font-family: "Myriad Pro";font-size:15px;font-weight:bold;}
.tg .tg-1w82{text-align:center;background-color:#bbdaff;font-family: "Myriad Pro";font-size:16px;font-weight:bold;}
.tg .tg-5hgy{text-align:left;font-family: "Myriad Pro";font-size:14px;font-weight:bold;height:60px;}
.tg .tg-439q{text-align:center;background-color:#D2E4FC;font-family: "Myriad Pro";font-size:16px;font-weight:bold;color:#000000;height:60px}
.tg .tg-ltqa{text-align:left;font-family: "Myriad Pro";font-size:14px;font-weight:bold;}
@media screen and (max-width: 767px) {
	.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;}}


/* esto es la ruedita del loader gif se llama como <div class="loader"></div> */
.loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.header{
	    background-color:#ff1000; /*color de fondo del header 0070cc oscuro    #3594FC azul del header claro */
    color:#ffffff;  /* letras del header*/
	 border: 2px solid #ff1000;
}

.trheader> td{
	/* font-family:'Oswald', sans-serif; */
	font-weight:400;
	line-height:17px;
	text-align:center;
	 border: 1px solid white;
	 padding:2px;
	 height:30px;
}

.trheader2> td{
	/* font-family:'Oswald', sans-serif; */
	font-weight:400;
	line-height:17px;
	text-align:center;
	 padding:3px;
}

.trheader> td >a {
	color:white;
	background:transparent;
	font-size:17px;
}
tr:hover td {
    background: #002b80 !important;
	color:#0099ff !important;
p{
		font-size:14px; line-height:24px; color:#333;}
}
tr:hover td p {
		color:#eeeeee;
}
/*  ESTE ES EL SITIO DE LOS EFECTOS  https://designshack.net/articles/css/joshuajohnson-2/ */

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

.pic {
  border: 0px solid #fff;  
  float: left;
  overflow: hidden;
  
  -webkit-box-shadow: 3px 3px 3px #fff;
          box-shadow: 3px 3px 3px #fff;  
}

/*MORPH*/
.morph {
	  border-radius: 100%;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
	       margin-top:0px;
		   height:100px;
		   width:100px;"
}
 
.morph:hover {
  border-radius: 100%;
  -webkit-transform: rotate(-55deg);
     -moz-transform: rotate(-55deg);
       -o-transform: rotate(-55deg);
      -ms-transform: rotate(-55deg);
          transform: rotate(-55deg);
}


.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px;
  opacity: 0.9 !important;
  line-height:2.5;
  font-family: "Oswald" !important;
  padding:2px;
  height: 30px !important;

}

.tooltiptext {
    border: solid #24acee;
	position:relative !important;
	}

.tooltip .tooltiptext { line-height:70%;
  visibility: hidden;
  width: 160px;
  background-color: #021452;
  color: #fff;
  text-align: center !important;
  border-radius: 20px;
  padding: 5px;
  position: absolute;
 z-index: 99999 !important;
  opacity: 1 !important;
  font-family: "Oswald" !important;
}

.tooltip .tooltiptext::before {
/*   content: "";
  position: absolute;
  top: -21px;
  margin-left: 50%;
  border-width: 11px;
  border-style: solid;
  border-color:  transparent transparent #021452 transparent; */
}




.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}




p {vertical-align: middle;
text-align:left !important;
	margin:0px;
	font-size:13px;
    line-height: 35px;
    color: #333;

}

.checkbox-xl .form-check-input {
 top: 1.2rem;
 scale: 2;
 margin-right: -2.2rem;
 }

.checkbox-xl .form-check-label {
 padding-top: 19px;
 }
 
 
 

.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 45vh;
    overflow-y: auto;
}


.modal-dialog {
    width: 600px;
    margin: -10px auto auto 5px;
}