h1{
  font-size: 20px;
}
p{
  color: #818181;
}
section{
  background: url(../img/BANER.png) no-repeat;
  background-size: cover;
  height: 300px;
  width: 100%;
}
option{
  color: #818181; 
}
.Linea_hr{
  background: #00696b;
  height: 1px; 
  width: 60%;
  margin-left: 1px;
}
.Loader_M{
  display: none;
}
.Loader_C{
  display: none;
  left: -15px;
  position: fixed;
}
.Caja_M{
 
}
#TituloPractica, #TituloPractica1,
#TituloPractica2,#TituloPractica3,#TituloPractica4,
#TituloPractica5,#TituloPractica6,#TituloPractica7,#TituloPractica8{
  font-size: 24px;
}
.Alertas{
  color: #ff3300;
  display: none;
  text-align: center;
  top: 98%;
  width: auto;
}
.AreaSubirArchivo{
  width: 100%;
  height: 80px;
}
.Area_ErrorOs{
  background: rgba(0,0,0,0.2);
  display: none;
  height: 100%;
  width: 100%;
  top: 0px;
  z-index: 1000;
  position: absolute;
  z-index: 1000;
  left: 0px;
}
.Area_ErrorBl{
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 5px 15px 5px #818181;
  height: auto;
  margin-top: 20%;
  margin-left: 2.5%;
  padding: 2%;
  width: 90%;
}
.Area_Ganar_Puntos1{
  background: rgba(255,255,255,0.1);
  display: none;
  height: 100%;
  width: 100%;
  top: 0px;
  z-index: 1000;
  position: absolute;olute;
  z-index: 1000;
}
.Area_Ganar_Puntos2 h3{
  color: #ff3300;
  border-radius: none;
  box-shadow: none;
  font:bold 150px Arial;
  height: auto;
  margin-top: 38%;
  margin-left: 19%;
  padding-left: 1%;
  text-shadow: 0px 0px 25px #FFAE00;
  width: 60%;
}

.Ayuda{
  color: red;
  font: bold  16px Arial;
  text-align: center;
}
.Btn_Atras{
  bottom: -25px;
  right: 25px;
  top: 80%;
}
.caja{
  background:cover;
  width: 250px;
  height: 250px
}
.CentrarBtnArchivo{
  height: 150px; 
  width: 100%; 
}
.Center{
  text-align: center;
}
.ContenedorContrincante{
  display: none;
  height: 58px;
  margin-top: 2px;
}
.DivLudica1{
  color: #818181;
}
#Envio_Ref{
  display: none;
}
.Imagenes{
  background-size: auto 100%;
  height: auto;
  width: 100%;
}
.ImgContrincante{
  background-size:54px 54px; 
  border-radius: 30px; 
  height:54px; 
  margin-left:60px; 
  width:54px;
}
.Img_Perfil>.ImgPerfil{
  background: #fff;
    width: 150px;
    height: 150px;
    max-width: 150px;
    max-height: 150px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid rgba(137,137,137,0.2);
}
.ImgPerfil{
  background-repeat: no-repeat;
  background-size: 170px 170px;
  border: solid 5px #eaeaea;
  border-radius: 5px;
  box-shadow: 0px 3px 10px #FFF; 
  height: 170px;
  margin-left: 30px;
  width: 170px;
}
.ImgMedallaPerfil{
  background-size: 50px 50px;
  height: 50px; 
  margin-left: 180px;
  margin-top: -27px;
  position: absolute;
  width: 50px;
}
.ImgMedallaPerfil2{
  background-size: 50px 50px;
  height: 50px; 
  width: 50px;
}
.fileinput-button {<!--  w  w w .  j ava2  s.  co  m-->
  position: relative;
  overflow: hidden;
  float: left;
  margin-right: 4px;
}
.fileinput-button input {
  height: 150px;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  font-size: 23px;
  cursor: pointer;
}
.flecha{
  background:;
  margin-top: -110px;
  position: fixed;
  width: 100%;
  z-index: 998;
}
.Header{
  background: #00796b;
  text-align: center;
}
.Justify{
  text-align: justify;
}
.Loader{
  background: rgba(0,0,0,0.53);
  display: none;
  height: 100%;
  width: 100%;
  z-index: 1000;
  position: absolute;
  top: 0px;
  left: 0px;
}
.linea{
  background:url(../img/flecha.svg);
  background-repeat:no-repeat;
  height: 350px;
  left:-2%;
  position: relative;
}
#Linea_Ref_Ex{
  display: none;
}
.Menu_P{
  width: 100%;
  position: absolute;
  top: 25%;
}
#NoUsuario{
  color: red;
  text-align: center;
}
#Nombre_Ref_Ex{
  display: none;
}
.Ocultar{
  display: none;
}
.PanelJuego{
  display: none;
  box-shadow:1px 1px 9px #818181; 
  border-top: solid 1px #fff;
  height: 40px;
  position: relative;
  top: -1px;
  width: 100%;
}
.Paneles{
  color: #fff;
  float: left;
  font: bold 25px Arial;
  padding-top: 10px;
  text-align: center;
  width: 35%;
}
.Popup_Validar{
  background: rgba(0,0,0,0.5);
  display: none;
  height: 100%;
  width: 100%;
  z-index: 1000;
  position: fixed;
  top: 0px;
  left: 0px;
}
.showImage{
  border:dashed 3px #00aee7; 
  background: #fff; 
  box-shadow: 0px 3px 10px #FFF;
  padding-left: 15%;
  height: auto;
  width: 85%;
}
.Area_Cambiar_Imagen{
  width: 100%;
}
.Textos{
  color: #fff;
  font: bold 20px Arial;
  left: 130px;
  position: relative;
  top:-55px;
  width: 600px;
}
.Textos2{
  color:#99bf00; 
  font: bold 17px Arial; 
  left: 130px; 
  top: -55px;
  position: relative;
}
.Texto_Acerca{
  height: auto;
  width: 100%;
  text-align: left;
}
.ui-icon-estadistica:after {
  background-image: url("icons-svg/estadistica.svg");
  background-size: 10px 18px;
}
.Visualizar{
  padding-top: 30px;
}
/*-------------------Login---------------------*/

*{
    font-family: 'Raleway', sans-serif;  
}

div h3 span{
     color : #FFF;
     font-size:14px;
}

div span {
     font-weight: 200;
}

.login_box{
      background: #ff5722;
    background: -o-linear-gradient(45deg,  #ff5722 5%,#ff5722 99%);
        background: -ms-linear-gradient(45deg,  #ff5722 5%,#ff5722 99%);
        background: linear-gradient(45deg,  #ff5722 5%,#ff5722 99%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5722', endColorstr='#ff6b45',GradientType=1 );
        
        width:100%;
        height:65%;
        position:absolute;
        
        -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.54);
-moz-box-shadow:    0px 0px 8px 0px rgba(50, 50, 50, 0.54);
box-shadow:         0px 0px 8px 0px rgba(50, 50, 50, 0.54);
}

.image-circle{
    border-radius: 50%;
    width: 175px;
    height: 175px;
    margin: 10px;
}

.follow{
    background-color:#FC563B;
    height: 80px;
    cursor:pointer;
}

.follow:hover {
    background-color:#F22F26;
    height: 80px;
    cursor:pointer;
}

.login_control{
    background-color:#f9f9f9;
    padding:10px;
    height: 80%;
}

.control {
    color:#000;
    margin:10px;
}

.label {
    color: #EB4F26;
    font-size: 18px;
    font-weight: 500;
}

.form-control{
    color: black !important;
    font-size: 25px;
    border: none;
    padding: 25px;
    padding-left: 10px;
    border-bottom: 1px solid #CCC;
    margin-bottom: 10px;
    outline: none;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.form-control:focus{
    border-radius: 0px;
    border-bottom: 1px solid #FC563B;
    margin-bottom: 10px;
    outline: none;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
.btn-orange{
    background-color: #FC563B;
    border-radius: 0px;
    margin: 5px;
    padding: 5px;
    width: 150px;
    font-size: 20px;
    font-weight: inherit;
}

.btn-orange:hover {
    background-color: #F22F26;
    border-radius: 0px;
    margin: 5px;
    padding: 5px;
    width: 150px;
    font-size: 20px;
    font-weight: inherit;
    color:#FFF !important;
}

.line{
    border-bottom : 2px solid #fff;
}


.outter{
    padding: 0px;
    border-radius: 50%;
    width: 200px;
    height: 300px;
}

/******************************Perfil************************/


.card {
    padding-top: 20px;
    margin: 10px 0 20px 0;
    background-color: rgba(214, 224, 226, 0.2);
    border-top-width: 0;
    border-bottom-width: 2px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.card .card-heading {
    padding: 0 20px;
    margin: 0;
}

.card .card-heading.simple {
    font-size: 20px;
    font-weight: 300;
    color: #777;
    border-bottom: 1px solid #e5e5e5;
}

.card .card-heading.image img {
    display: inline-block;
    width: 46px;
    height: 46px;
    margin-right: 15px;
    vertical-align: top;
    border: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.card .card-heading.image .card-heading-header {
    display: inline-block;
    vertical-align: top;
}

.card .card-heading.image .card-heading-header h3 {
    margin: 0;
    font-size: 14px;
    line-height: 16px;
    color: #262626;
}

.card .card-heading.image .card-heading-header span {
    font-size: 12px;
    color: #999999;
}

.card .card-body {
    padding: 0 20px;
    margin-top: 20px;
}

.card .card-media {
    padding: 0 20px;
    margin: 0 -14px;
}

.card .card-media img {
    max-width: 100%;
    max-height: 100%;
}

.card .card-actions {
    min-height: 30px;
    padding: 0 20px 20px 20px;
    margin: 20px 0 0 0;
}

.card .card-comments {
    padding: 20px;
    margin: 0;
    background-color: #f8f8f8;
}

.card .card-comments .comments-collapse-toggle {
    padding: 0;
    margin: 0 20px 12px 20px;
}

.card .card-comments .comments-collapse-toggle a,
.card .card-comments .comments-collapse-toggle span {
    padding-right: 5px;
    overflow: hidden;
    font-size: 12px;
    color: #999;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-comments .media-heading {
    font-size: 13px;
    font-weight: bold;
}

.card.people {
    position: relative;
    display: inline-block;
    width: 170px;
    height: 300px;
    padding-top: 0;
    margin-left: 20px;
    overflow: hidden;
    vertical-align: top;
}

.card.people:first-child {
    margin-left: 0;
}

.card.people .card-top {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 170px;
    height: 150px;
    background-color: #ffffff;
}

.card.people .card-top.green {
    background-color: #53a93f;
}

.card.people .card-top.blue {
    background-color: #427fed;
}

.card.people .card-info {
    position: absolute;
    top: 150px;
    display: inline-block;
    width: 100%;
    height: 101px;
    overflow: hidden;
    background: #ffffff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.card.people .card-info .title {
    display: block;
    margin: 8px 14px 0 14px;
    overflow: hidden;
    font-size: 16px;
    font-weight: bold;
    line-height: 18px;
    color: #404040;
}

.card.people .card-info .desc {
    display: block;
    margin: 8px 14px 0 14px;
    overflow: hidden;
    font-size: 12px;
    line-height: 16px;
    color: #737373;
    text-overflow: ellipsis;
}

.card.people .card-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    padding: 10px 20px;
    line-height: 29px;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.card.hovercard {
    position: relative;
    padding-top: 0;
    overflow: hidden;
    text-align: center;
    background-color: rgba(214, 224, 226, 0.2);
}

.card.hovercard .cardheader {
    height: 135px;
}

.card.hovercard .avatar {
    position: relative;
    top: -50px;
    margin-bottom: -50px;
}

.card.hovercard .avatar img {
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid rgba(255,255,255,0.5);
}

.card.hovercard .info {
    padding: 4px 8px 10px;
}

.card.hovercard .info .title {
    margin-bottom: 4px;
    font-size: 24px;
    line-height: 1;
    color: #262626;
    vertical-align: middle;
}

.card.hovercard .info .desc {
    overflow: hidden;
    font-size: 12px;
    line-height: 20px;
    color: #737373;
    text-overflow: ellipsis;
}

.card.hovercard .bottom {
    padding: 0 20px;
    margin-bottom: 17px;
}

.btn{ border-radius: 50%; width:32px; height:32px; line-height:18px;  }


/****************Loader*******************************************************/

.spinner {
  -webkit-animation: rotator 1.4s linear infinite;
          animation: rotator 1.4s linear infinite;
}

@-webkit-keyframes rotator {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
}

@keyframes rotator {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
}
.path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
          animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@-webkit-keyframes colors {
  0% {
    stroke: #4285F4;
  }
  25% {
    stroke: #DE3E35;
  }
  50% {
    stroke: #F7C223;
  }
  75% {
    stroke: #1B9A59;
  }
  100% {
    stroke: #4285F4;
  }
}

@keyframes colors {
  0% {
    stroke: #4285F4;
  }
  25% {
    stroke: #DE3E35;
  }
  50% {
    stroke: #F7C223;
  }
  75% {
    stroke: #1B9A59;
  }
  100% {
    stroke: #4285F4;
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
  }
}
/*****************************************AYUDA**************************/
.alert{
  display: none;
}
form .message {
      margin: 15px 0 0;
      color: #b3b3b3;
      font-size: 12px;
    }
    .form .message a {
      color: #4CAF50;
      text-decoration: none;
    }
    .form .register-form {
      display: none;
    }
    .container:before, .container:after {
      content: "";
      display: block;
      clear: both;
    }
    .container .info {
      margin: 50px auto;
      text-align: center;
    }
    .container .info h1 {
      margin: 0 0 15px;
      padding: 0;
      font-size: 36px;
      font-weight: 300;
      color: #1a1a1a;
    }
    .container .info span {
      color: #4d4d4d;
      font-size: 12px;
    }
    .container .info span a {
      color: #000000;
      text-decoration: none;
    }
    .container .info span .fa {
      color: #EF3B3A;
    }