<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://rawgithub.com/FortAwesome/Font-Awesome/master/css/font-awesome.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<!--- Menu muy lindo de java con botones -->
<div id="menujav" class="container">
<div class="row">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-nav" onclick="Click_menu(1)">
<span class="glyphicon glyphicon-folder-close"></span>
<p>Operadores</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav" onclick="Click_menu(2)">
<span class="glyphicon glyphicon-globe"></span>
<p>Ranking</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav" onclick="Click_menu(3)">
<span class="glyphicon glyphicon-calendar"></span>
<p>Historial</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav" onclick="Click_menu(4)">
<span class="glyphicon glyphicon-bell"></span>
<p>Eventos</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav" onclick="Click_menu(5)">
<span class="glyphicon glyphicon-time"></span>
<p>Informes GTR</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav" onclick="Click_menu(6)">
<span><img class="pad-moneda" src="https://i.imgur.com/wqYvcla.png"></span>
<!--<img class="megacoin" src="https://i.imgur.com/wqYvcla.png">-->
<p>Megamonedas</p>
</button>
</div>
</div>
</div>
</div>
<!--- Fin menu java -->
<!--- Inicio Operadores -->
<div id="Pag_ope">
<header>
<div class="container">
<div class="row">
<div class="col-md-12 text-center ">
<div class="panel panel-default">
<div class="userprofile social ">
<div class="userpic" style="width:78px"> <img src="https://image.ibb.co/b6eUmd/Screenshot_1.jpg" alt="" class="userpicimg"> </div>
<h3 class="username">Guido D'agostino</h3>
<p>Lider Contact Center</p>
<span class="glyphicon fa fa-star"></span>
<span class="glyphicon fa fa-star"></span>
<span class="glyphicon fa fa-star"></span>
<span class="glyphicon fa fa-star"></span>
<span class="glyphicon fa fa-star"></span>
</div>
<div class="col-md-12 border-top border-bottom">
<ul class="nav nav-pills pull-left countlist" role="tablist">
<li role="presentation">
<h3>6841<br>
<small><img src="https://i.imgur.com/0qE5RDI.png"> MEGAMONEDAS</small> </h3>
</li>
</ul>
</div>
<div class=" col-sm-12 pull-left"></div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class=" col-sm-12 pull-left"></div>
<div class="clearfix"></div>
</header>
<!-- El temita de los logros. -->
<section class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="about">
<h3 class="accent">Logros</h3>
<div class="col-md-12">
<div class="memberblock">
<a href="" class="member"> <img src="http://drmega.net/logros/3%20meses%20sin%20faltar.png" alt="3 Meses sin faltar">
<div class="memmbername">3 Meses sin faltar</div>
</a>
<a href="" class="member"> <img src="http://drmega.net/logros/100%20logueos.png" alt="100 logueos correctos">
<div class="memmbername">100 logueos correctos</div>
</a>
<a href="" class="member"> <img src="http://drmega.net/logros/Top%201%20ranking%201%20mes.png" alt="Top 1 ranking del mes">
<div class="memmbername">Top 1 ranking del mes</div>
</a>
<a href="" class="member"> <img src="http://drmega.net/logros/300%20salientes.png" alt="300 salientes">
<div class="memmbername">300 salientes</div>
</a>
<a href="" class="member"> <img src="http://drmega.net/logros/Trabaja%20con%20todos%20los%20integrantes%20de%20tu%20equipo.png" alt="Compañerismo">
<div class="memmbername">Compañerismo</div>
</a>
<a href="" class="member"> <img src="http://drmega.net/logros/Aceptar%2015%20cambios%20de%20jornada.png" alt="Aceptar 20 cambios de jornada">
<div class="memmbername">Aceptar 20 cambios de jornada</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="skills">
<h2 class="white">Skills</h2>
<strong>Habilidades blandas</strong>
<span class="pull-right">70%</span>
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
</div>
<strong>Control de llamada</strong>
<span class="pull-right">85%</span>
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar"
aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;"></div>
</div>
<strong>Login</strong>
<span class="pull-right">40%</span>
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar"
aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
</div>
<strong>Otra metrica</strong>
<span class="pull-right">65%</span>
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar"
aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Cuartiles -->
<section class="container">
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="contact">
<h2>Cuartil mensual</h2>
</div>
</div>
<div class="col-md-8 col-sm-12">
<div class="experience">
<h2 class="white">Cuartil actual</h2>
<div class="experience-content">
<h4 class="experience-title accent">Lorem ipsum dolor sit amet</h4>
<h5>Lorem ipsum dolor sit amet</h5><span></span>
<h5>Lorem ipsum dolor sit amet</h5>
<p class="education-description"></p>
</div>
</div>
</div>
</div>
</section>
</div>
<!--- Fin operadores -->
<!--- Inicio Historial -->
<div id="Pag_his">
<section class="content">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-body">
<div class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-success btn-filter" data-target="pagado">Realizado</button>
<button type="button" class="btn btn-warning btn-filter" data-target="pendiente">Pendiente</button>
<button type="button" class="btn btn-danger btn-filter" data-target="cancelado">Cancelado</button>
<button type="button" class="btn btn-default btn-filter" data-target="all">Todos</button>
</div>
</div>
<div class="table-container">
<table class="table table-filter">
<tbody>
<tr data-status="pagado">
<td>
<div class="ckbox">
<input type="checkbox" id="checkbox1">
<label for="checkbox1"></label>
</div>
</td>
<td>
<a href="javascript:;" class="star">
<i class="glyphicon glyphicon-star"></i>
</a>
</td>
<td>
<div class="media">
<a href="#" class="pull-left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo">
</a>
<div class="media-body">
<span class="media-meta pull-right">Julio 16, 2018</span>
<h4 class="title">
Refrigerio
<span class="pull-right pagado">(Realizado)</span>
</h4>
<p class="summary">Tomaste tu refrigerio sin pasarte de tiempo: 00:24:00</p>
</div>
</div>
</td>
</tr>
<tr data-status="pendiente">
<td>
<div class="ckbox">
<input type="checkbox" id="checkbox3">
<label for="checkbox3"></label>
</div>
</td>
<td>
<a href="javascript:;" class="star">
<i class="glyphicon glyphicon-star"></i>
</a>
</td>
<td>
<div class="media">
<a href="#" class="pull-left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo">
</a>
<div class="media-body">
<span class="media-meta pull-right">Febrero 13, 2016</span>
<h4 class="title">
Dia de estudio
<span class="pull-right pendiente">(Pendiente)</span>
</h4>
<p class="summary">Tu dia de estudio para el Sabado 21/07 se encuentra en proceso.</p>
</div>
</div>
</td>
</tr>
<tr data-status="cancelado">
<td>
<div class="ckbox">
<input type="checkbox" id="checkbox2">
<label for="checkbox2"></label>
</div>
</td>
<td>
<a href="javascript:;" class="star">
<i class="glyphicon glyphicon-star"></i>
</a>
</td>
<td>
<div class="media">
<a href="#" class="pull-left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo">
</a>
<div class="media-body">
<span class="media-meta pull-right">Febrero 13, 2016</span>
<h4 class="title">
Dia de estudio
<span class="pull-right cancelado">(Cancelado)</span>
</h4>
<p class="summary">Dia solicitado no cumple con el plazo de 96hs habiles.</p>
</div>
</div>
</td>
</tr>
<tr data-status="pagado" class="selected">
<td>
<div class="ckbox">
<input type="checkbox" id="checkbox4" checked>
<label for="checkbox4"></label>
</div>
</td>
<td>
<a href="javascript:;" class="star star-checked">
<i class="glyphicon glyphicon-star"></i>
</a>
</td>
<td>
<div class="media">
<a href="#" class="pull-left">
<img src="https://image.ibb.co/gUnrJd/Traer_facturas.png" class="media-photo">
</a>
<div class="media-body">
<span class="media-meta pull-right">Viernes 13, 2018</span>
<h4 class="title">
Logro Desbloqueado
<span class="pull-right pagado">(Realizado)</span>
</h4>
<p class="summary">"El panadero" Logro por traer facturas.</p>
</div>
</div>
</td>
</tr>
<tr data-status="pendiente">
<td>
<div class="ckbox">
<input type="checkbox" id="checkbox5">
<label for="checkbox5"></label>
</div>
</td>
<td>
<a href="javascript:;" class="star">
<i class="glyphicon glyphicon-star"></i>
</a>
</td>
<td>
<div class="media">
<a href="#" class="pull-left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo">
</a>
<div class="media-body">
<span class="media-meta pull-right">Febrero 13, 2016</span>
<h4 class="title">
Cambio de jornada
<span class="pull-right pendiente">(Pendiente)</span>
</h4>
<p class="summary">Tu cambio de jornada para el Viernes ingresar de 13 a 18 se encuentra en proceso.</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!--- fin Historial -->
</div>
<!--- Inicio Ranking -->
<div id="Pag_ran">
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h4>
Ranking Megatech 2018
</h4>
</div>
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-2">#</th><th class="col-xs-8">Name</th><th class="col-xs-2">Points</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-2">1</td><td class="col-xs-8">Mike Adams</td><td class="col-xs-2">23</td>
</tr>
<tr>
<td class="col-xs-2">2</td><td class="col-xs-8">Holly Galivan</td><td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">3</td><td class="col-xs-8">Mary Shea</td><td class="col-xs-2">86</td>
</tr>
<tr>
<td class="col-xs-2">4</td><td class="col-xs-8">Jim Adams</td><td>23</td>
</tr>
<tr>
<td class="col-xs-2">5</td><td class="col-xs-8">Henry Galivan</td><td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">6</td><td class="col-xs-8">Bob Shea</td><td class="col-xs-2">26</td>
</tr>
<tr>
<td class="col-xs-2">7</td><td class="col-xs-8">Andy Parks</td><td class="col-xs-2">56</td>
</tr>
<tr>
<td class="col-xs-2">8</td><td class="col-xs-8">Bob Skelly</td><td class="col-xs-2">96</td>
</tr>
<tr>
<td class="col-xs-2">9</td><td class="col-xs-8">William Defoe</td><td class="col-xs-2">13</td>
</tr>
<tr>
<td class="col-xs-2">10</td><td class="col-xs-8">Will Tripp</td><td class="col-xs-2">16</td>
</tr>
<tr>
<td class="col-xs-2">11</td><td class="col-xs-8">Bill Champion</td><td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">12</td><td class="col-xs-8">Lastly Jane</td><td class="col-xs-2">6</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--- fin Ranking -->
<!--- Inicio Eventos -->
<div id="Pag_eve" class="container">
<div class="[ col-xs-12 col-sm-offset-2 col-sm-8 ]">
<ul class="event-list">
<li>
<time datetime="2014-07-20">
<span class="day">30</span>
<span class="month">Jul</span>
<span class="year">2018</span>
<span class="time">ALL DAY</span>
</time>
<img alt="Independence Day" src="https://farm4.staticflickr.com/3100/2693171833_3545fb852c_q.jpg" />
<div class="info">
<h2 class="title">Pancheada</h2>
<p class="desc">Preparacion de panchos en el piso a partir de las 12hs</p>
</div>
<div class="social">
<ul>
<li class="facebook" style="width:33%;"><a href="#facebook"><span class="fa fa-facebook"></span></a></li>
<li class="twitter" style="width:34%;"><a href="#twitter"><span class="fa fa-twitter"></span></a></li>
<li class="google-plus" style="width:33%;"><a href="#google-plus"><span class="fa fa-google-plus"></span></a></li>
</ul>
</div>
</li>
<li>
<time datetime="2014-07-20 0000">
<span class="day">28</span>
<span class="month">Jul</span>
<span class="year">2014</span>
<span class="time">12:00 AM</span>
</time>
<div class="info">
<h2 class="title">Entrega de premios</h2>
<p class="desc">Se entregaran los premios por el concurso llevado a cabo en Julio.</p>
<ul>
<li style="width:50%;"><a href="#website"><span class="fa fa-globe"></span></a></li>
<li style="width:50%;"><span class="fa fa-money"></span></li>
</ul>
</div>
<div class="social">
<ul>
<li class="facebook" style="width:33%;"><a href="#facebook"><span class="fa fa-facebook"></span></a></li>
<li class="twitter" style="width:34%;"><a href="#twitter"><span class="fa fa-twitter"></span></a></li>
<li class="google-plus" style="width:33%;"><a href="#google-plus"><span class="fa fa-google-plus"></span></a></li>
</ul>
</div>
</li>
<li>
<time datetime="2014-07-20 2000">
<span class="day">20</span>
<span class="month">Jun</span>
<span class="year">2014</span>
<span class="time">8:00 PM</span>
</time>
<img alt="My 24th Birthday!" src="https://farm5.staticflickr.com/4150/5045502202_1d867c8a41_q.jpg" />
<div class="info">
<h2 class="title">Megacumpleaños</h2>
<p class="desc">Sala de capacitacion 17hs</p>
<ul>
<li style="width:33%;">1 confirmado <span class="glyphicon glyphicon-ok"></span></li>
<li style="width:34%;">5 pendientes<span class="fa fa-question"></span></li>
<li style="width:33%;">6 invitados <span class="fa fa-envelope"></span></li>
</ul>
</div>
<div class="social">
<ul>
<li class="facebook" style="width:33%;"><a href="#facebook"><span class="fa fa-facebook"></span></a></li>
<li class="twitter" style="width:34%;"><a href="#twitter"><span class="fa fa-twitter"></span></a></li>
<li class="google-plus" style="width:33%;"><a href="#google-plus"><span class="fa fa-google-plus"></span></a></li>
</ul>
</div>
</li>
<li>
<time datetime="2018-07-29 1600">
<span class="day">5</span>
<span class="month">Jun</span>
<span class="year">2018</span>
<span class="time">4:00 PM</span>
</time>
<div class="info">
<h2 class="title">Estacion Saludable</h2>
<p class="desc"> Se llevara a cabo en el piso a partir de las 12hs</p>
<ul>
<li style="width:33%;"> <span class="fa fa-male"></span></li>
<li style="width:34%;"> <span class="fa fa-child"></span></li>
</ul>
</div>
<div class="social">
<ul>
<li class="facebook" style="width:33%;"><a href="#facebook"><span class="fa fa-facebook"></span></a></li>
<li class="twitter" style="width:34%;"><a href="#twitter"><span class="fa fa-twitter"></span></a></li>
<li class="google-plus" style="width:33%;"><a href="#google-plus"><span class="fa fa-google-plus"></span></a></li>
</ul>
</div>
</li>
</ul>
</div>
<!--- fin Eventos -->
</div>
<!--- Inicio GTR -->
<div id="Pag_gtr">
<div class="page-header">
<ul class="timeline">
<li>
<div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds</h4>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge info"><i class="glyphicon glyphicon-floppy-disk"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds</h4>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
<hr>
<div class="btn-group">
<button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-cog"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds</h4>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<!--- fin GTR -->
<!--- Inicio Megamoneda -->
<div id="Pag_meg">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="page-header">
<h3>Catalogo de compras</h3>
<p>Canjea tus Megamonedas.</p>
</div>
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="https://timebusinessblog.files.wordpress.com/2012/12/santa.jpg?w=360&h=240&crop=1" alt=""></a>
</div>
<div class="caption">
<h4>Dia Libre</h4>
<p>Solicita tu dia libre cuando quieras</p>
<a class="btn btn-mini" href="#">» 3400</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="https://i2.wp.com/autismodiario.org/wp-content/uploads/2014/02/descanso-pecs.jpg?resize=360%2C240&ssl=1" alt=""></a>
</div>
<div class="caption">
<h4>Mas tiempo de Refrigerio</h4>
<p>Solicita tus 5 minutos adicionales de Refrigerio</p>
<a class="btn btn-mini" href="#">» 500</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
</li>
</ul>
</div>
<!-- /Slide1 -->
<div class="item">
<ul class="thumbnails">
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>es este commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
</li>
</ul>
</div>
<!-- /Slide2 -->
<div class="item">
<ul class="thumbnails">
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>es este commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
</li>
</ul>
</div>
<!-- /Slide3 -->
</div>
<nav>
<ul class="control-box pager">
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
</ul>
</nav>
<!-- /.control-box -->
</div><!-- /#myCarousel -->
</div><!-- /.col-xs-12 -->
</div><!-- /.container -->
</div>
</div>
<!--- fin Megamoneda -->
<!-- La gilada del copyright -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<p>Copyright © 2018 Megatech</p>
<ul class="social-icons">
<li><a href="#" class="fa fa-globe"></a></li>
</ul>
</div>
</div>
</div>
</footer>
/*RANKING*/
.table-fixed thead {
width: 100%;
}
.table-fixed tbody {
height: 230px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
display: center;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
width: center;
border-bottom-width: 0;
}
.td-center { text-align: center; }
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 25px;
margin-right: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: calc( 100% - 75px );
float: right;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
left: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-right: 15px solid #ccc;
border-left: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
left: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-right: 14px solid #fff;
border-left: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 16px;
left: 0px;
margin-right: -25px;
background-color: #999999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: left;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-right-width: 0;
border-left-width: 15px;
right: -15px;
left: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-right-width: 0;
border-left-width: 14px;
right: -14px;
left: auto;
}
.timeline-badge.primary {
background-color: #2e6da4 !important;
}
.timeline-badge.success {
background-color: #3f903f !important;
}
.timeline-badge.warning {
background-color: #f0ad4e !important;
}
.timeline-badge.danger {
background-color: #d9534f !important;
}
.timeline-badge.info {
background-color: #5bc0de !important;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
.timeline-body {
display: none;
}
body {
padding: 60px 0px;
background-color: rgb(220, 220, 220);
}
.event-list {
list-style: none;
font-family: 'Lato', sans-serif;
margin: 0px;
padding: 0px;
}
.event-list > li {
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 5px rgb(51, 51, 51);
box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
padding: 0px;
margin: 0px 0px 20px;
}
.event-list > li > time {
display: inline-block;
width: 100%;
color: rgb(255, 255, 255);
background-color: rgb(197, 44, 102);
padding: 5px;
text-align: center;
text-transform: uppercase;
}
.event-list > li:nth-child(even) > time {
background-color: rgb(165, 82, 167);
}
.event-list > li > time > span {
display: none;
}
.event-list > li > time > .day {
display: block;
font-size: 56pt;
font-weight: 100;
line-height: 1;
}
.event-list > li time > .month {
display: block;
font-size: 24pt;
font-weight: 900;
line-height: 1;
}
.event-list > li > img {
width: 100%;
}
.event-list > li > .info {
padding-top: 5px;
text-align: center;
}
.event-list > li > .info > .title {
font-size: 17pt;
font-weight: 700;
margin: 0px;
}
.event-list > li > .info > .desc {
font-size: 13pt;
font-weight: 300;
margin: 0px;
}
.event-list > li > .info > ul,
.event-list > li > .social > ul {
display: table;
list-style: none;
margin: 10px 0px 0px;
padding: 0px;
width: 100%;
text-align: center;
}
.event-list > li > .social > ul {
margin: 0px;
}
.event-list > li > .info > ul > li,
.event-list > li > .social > ul > li {
display: table-cell;
cursor: pointer;
color: rgb(30, 30, 30);
font-size: 11pt;
font-weight: 300;
padding: 3px 0px;
}
.event-list > li > .info > ul > li > a {
display: block;
width: 100%;
color: rgb(30, 30, 30);
text-decoration: none;
}
.event-list > li > .social > ul > li {
padding: 0px;
}
.event-list > li > .social > ul > li > a {
padding: 3px 0px;
}
.event-list > li > .info > ul > li:hover,
.event-list > li > .social > ul > li:hover {
color: rgb(30, 30, 30);
background-color: rgb(200, 200, 200);
}
.facebook a,
.twitter a,
.google-plus a {
display: block;
width: 100%;
color: rgb(75, 110, 168) !important;
}
.twitter a {
color: rgb(79, 213, 248) !important;
}
.google-plus a {
color: rgb(221, 75, 57) !important;
}
.facebook:hover a {
color: rgb(255, 255, 255) !important;
background-color: rgb(75, 110, 168) !important;
}
.twitter:hover a {
color: rgb(255, 255, 255) !important;
background-color: rgb(79, 213, 248) !important;
}
.google-plus:hover a {
color: rgb(255, 255, 255) !important;
background-color: rgb(221, 75, 57) !important;
}
@media (min-width: 768px) {
.event-list > li {
position: relative;
display: block;
width: 100%;
height: 120px;
padding: 0px;
}
.event-list > li > time,
.event-list > li > img {
display: inline-block;
}
.event-list > li > time,
.event-list > li > img {
width: 120px;
float: left;
}
.event-list > li > .info {
background-color: rgb(245, 245, 245);
overflow: hidden;
}
.event-list > li > time,
.event-list > li > img {
width: 120px;
height: 120px;
padding: 0px;
margin: 0px;
}
.event-list > li > .info {
position: relative;
height: 120px;
text-align: left;
padding-right: 40px;
}
.event-list > li > .info > .title,
.event-list > li > .info > .desc {
padding: 0px 10px;
}
.event-list > li > .info > ul {
position: absolute;
left: 0px;
bottom: 0px;
}
.event-list > li > .social {
position: absolute;
top: 0px;
right: 0px;
display: block;
width: 40px;
}
.event-list > li > .social > ul {
border-left: 1px solid rgb(230, 230, 230);
}
.event-list > li > .social > ul > li {
display: block;
padding: 0px;
}
.event-list > li > .social > ul > li > a {
display: block;
width: 40px;
padding: 10px 0px 9px;
}
}
/* --------------------------------------------------
:: General
-------------------------------------------------- */
body {
font-family: 'Open Sans', sans-serif;
color: #353535;
}
.content h1 {
text-align: center;
}
.content .content-footer p {
color: #6d6d6d;
font-size: 12px;
text-align: center;
}
.content .content-footer p a {
color: inherit;
font-weight: bold;
}
/* --------------------------------------------------
:: Table Filter
-------------------------------------------------- */
.panel {
border: 1px solid #ddd;
background-color: #fcfcfc;
}
.panel .btn-group {
margin: 15px 0 30px;
}
.panel .btn-group .btn {
transition: background-color .3s ease;
}
.table-filter {
background-color: #fff;
border-bottom: 1px solid #eee;
}
.table-filter tbody tr:hover {
cursor: pointer;
background-color: #eee;
}
.table-filter tbody tr td {
padding: 10px;
vertical-align: middle;
border-top-color: #eee;
}
.table-filter tbody tr.selected td {
background-color: #eee;
}
.table-filter tr td:first-child {
width: 38px;
}
.table-filter tr td:nth-child(2) {
width: 35px;
}
.ckbox {
position: relative;
}
.ckbox input[type="checkbox"] {
opacity: 0;
}
.ckbox label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ckbox label:before {
content: '';
top: 1px;
left: 0;
width: 18px;
height: 18px;
display: block;
position: absolute;
border-radius: 2px;
border: 1px solid #bbb;
background-color: #fff;
}
.ckbox input[type="checkbox"]:checked + label:before {
border-color: #2BBCDE;
background-color: #2BBCDE;
}
.ckbox input[type="checkbox"]:checked + label:after {
top: 3px;
left: 3.5px;
content: '\e013';
color: #fff;
font-size: 11px;
font-family: 'Glyphicons Halflings';
position: absolute;
}
.table-filter .star {
color: #ccc;
text-align: center;
display: block;
}
.table-filter .star.star-checked {
color: #F0AD4E;
}
.table-filter .star:hover {
color: #ccc;
}
.table-filter .star.star-checked:hover {
color: #F0AD4E;
}
.table-filter .media-photo {
width: 35px;
}
.table-filter .media-body {
display: block;
/* Had to use this style to force the div to expand (wasn't necessary with my bootstrap version 3.3.6) */
}
.table-filter .media-meta {
font-size: 11px;
color: #999;
}
.table-filter .media .title {
color: #2BBCDE;
font-size: 14px;
font-weight: bold;
line-height: normal;
margin: 0;
}
.table-filter .media .title span {
font-size: .8em;
margin-right: 20px;
}
.table-filter .media .title span.pagado {
color: #5cb85c;
}
.table-filter .media .title span.pendiente {
color: #f0ad4e;
}
.table-filter .media .title span.cancelado {
color: #d9534f;
}
.table-filter .media .summary {
font-size: 14px;
}
/*SECCION DE MEGAMONEDA */
img { max-width:100%; }
a {
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;
}
a:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE7 */
opacity: 0.6;
text-decoration: none;
}
body{
border-top:0;
background:#c4e17f;
background-image:-webkit-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);background-image:-moz-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);background-image:-o-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);background-image:linear-gradient(to right,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4)
}
.thumbnails li> .fff .caption {
background:#fff !important;
padding:10px
}
/* Page Header */
.page-header {
background: #f9f9f9;
margin: -30px -40px 40px;
padding: 20px 40px;
border-top: 4px solid #ccc;
color: #999;
text-transform: uppercase;
}
.page-header h3 {
line-height: 0.88rem;
color: #000;
}
ul.thumbnails {
margin-bottom: 0px;
}
/* Thumbnail Box */
.caption h4 {
color: #444;
}
.caption p {
color: #999;
}
/* Carousel Control */
.control-box {
text-align: right;
width: 100%;
}
.carousel-control{
background: #666;
border: 0px;
border-radius: 0px;
display: inline-block;
font-size: 34px;
font-weight: 200;
line-height: 18px;
opacity: 0.5;
padding: 4px 10px 0px;
position: static;
height: 30px;
width: 15px;
}
/* Mobile Only */
@media (max-width: 767px) {
.page-header, .control-box {
text-align: center;
}
}
@media (max-width: 479px) {
.caption {
word-break: break-all;
}
}
li { list-style-type:none;}
::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; }
::-moz-selection { background: #ff5e99; color: #FFFFFF; }
/*
Easy Profile Template
http://www.templatemo.com/tm-467-easy-profile
*/
html, body {
margin:0;border:0;padding:0;
font-size:16px;
font-family:'Proxima';
overflow-x:hidden;
position: relative;
vertical-align: baseline;
background-color: grey;
}
html {
-webkit-font-smoothing: antialiased;
}
h1 {font-size:40px;}
h2 {font-size:36px;}
h3 {font-size:30px;}
h4 {font-size:24px;}
h5 {font-size:20px;}
h6 {font-size:18px;}
h2 {
padding-bottom: 14px;
}
.accent {
font-family: 'Proxima Bold';
line-height: 14px;
color: #FFA943;
}
.bold {
font-weight: bold;
}
.tm-border {
border: 5px solid #fff;
box-shadow: 2px 2px #000;
}
.shadow {
text-shadow: 1px 1px #000;
}
.tm-title {
color: #FF9933;
}
.white {
color: #fff;
}
.about,.skills,
.education,.languages,
.contact, .experience {
padding: 20px;
min-height: 330px;
}
.education, .languages,
.contact, .experience {
margin-top: 30px;
}
@font-face {
font-family: 'Proxima';
src: url(../fonts/ProximaNova-Regular.otf);
}
@font-face {
font-family: 'Proxima Bold';
src: url(../fonts/ProximaNova-Bold.otf);
}
/* preloader section */
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background: none repeat scroll 0 0 #fff;
background: none repeat scroll 0 0 #f9f9f9;
}
.sk-spinner-wordpress.sk-spinner {
background-color: #C60;
width: 30px;
height: 30px;
border-radius: 30px;
position: relative;
-webkit-animation: sk-innerCircle 1s linear infinite;
animation: sk-innerCircle 1s linear infinite; }
.sk-spinner-wordpress .sk-inner-circle {
display: block;
background-color: #fff;
width: 8px;
height: 8px;
position: absolute;
border-radius: 8px;
top: 5px;
left: 5px; }
@-webkit-keyframes sk-innerCircle {
0% {
-webkit-transform: rotate(0);
transform: rotate(0); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes sk-innerCircle {
0% {
-webkit-transform: rotate(0);
transform: rotate(0); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
/* header section */
header {
text-align: center;
min-height: 400px;
overflow: hidden;
position: relative;
padding-top: 20px;
padding-bottom: 20px;
}
header img {
display: inline-block !important;
}
header h2 {
padding-top: 40px;
}
header hr {
border-color: #C60;
width: 100px;
}
/* about section */
.about {
background: #fff;
box-shadow: 0px 1px 5px rgba(50,50,50,0.08);
}
/* skills section */
.skills {
background: #C60;
color: #f5f5f5;
position:relative;
}
.skills .progress {
border-radius: 0px;
height: 4px;
}
.skills .progress .progress-bar-primary {
background: #840;
}
.skills strong {
display: inline-block;
font-weight: normal;
padding-bottom: 10px;
}
/* education section */
.education {
background: #C60;
color: #f5f5f5;
}
.education .education-content {
padding-bottom: 14px;
}
.education h5 {
display: inline-block;
}
.education span {
padding-right: 10px;
padding-left: 20px;
}
/* languages section */
.languages {
background: #fff;
box-shadow: 0px 1px 5px rgba(50,50,50,0.08);
position: relative;
left: 180px;
}
.languages ul {
padding: 10px;
}
.languages ul li {
padding-bottom: 6px;
}
/* contact section */
.contact {
background: #fff;
box-shadow: 0px 1px 5px rgba(50,50,50,0.08);
}
.contact .fa {
padding-right: 6px;
}
/* experience section */
.experience {
background: #C60;
color: #f5f5f5;
}
.experience .experience-content {
padding-bottom: 14px;
}
.experience h5 {
display: inline-block;
}
.experience span {
padding-right: 10px;
padding-left: 20px;
}
/* footer section */
footer {
color: #f9f9f9;
text-align: center;
padding-top: 140px;
padding-bottom: 100px;
}
/* social icon section */
.social-icons {
padding: 0;
margin: 0;
}
.social-icons li {
display: inline-block;
list-style: none;
}
.social-icons li a {
background: #C60;
border-radius: 50%;
color: #fff;
text-decoration: none;
font-size: 18px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
transition: all 0.4s ease-in;
position: relative;
bottom: 10px;
top: 10px;
}
.social-icons li a:hover {
background: #202020;
color: #fff;
}
.pad-moneda {
padding-top: 13px;
}
@media ( max-width: 980px ) {
.skills {
margin-top: 30px;
}
}
@media ( max-width: 360px ) {
header h1 {
font-size: 30px;
}
.about h2 {
font-size: 24px;
}
.education h4,
.experience h4 {
font-size: 20px;
}
}
.userprofile {
width: 100%;
float: left;
clear: both;
margin: 40px auto
}
.userprofile .userpic {
height: 100px;
width: 100px;
clear: both;
margin: 0 auto;
display: block;
border-radius: 100%;
box-shadow: 0px 3px 10px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 3px 10px 0 rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0px 3px 10px 0 rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0px 3px 10px 0 rgba(0, 0, 0, 0.15);
position: relative;
}
.userprofile .userpic .userpicimg {
height: auto;
width: 100%;
border-radius: 100%;
}
.username {
font-weight: 400;
font-size: 20px;
line-height: 20px;
color: #000000;
margin-top: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.username+p {
color: #607d8b;
font-size: 13px;
line-height: 15px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.userprofile.social {
background: url(http://www.hdbilder.eu/pictures/2015/0702/1/abstract-minimalistic-placebo-gaussian-blur-blurred-pics-628682.jpg) no-repeat top center;
background-size: 100%;
padding: 50px 0;
margin: 0
}
.userprofile.social .username {
color: #ffffff
}
.userprofile.social .username+p {
color: #ffffff;
opacity: 0.8
}
.memberblock {
width: 100%;
float: left;
clear: both;
margin-bottom: 15px
}
.member {
width: 24%;
float: left;
margin: 2px 1% 2px 0;
background: #ffffff;
border: 1px solid #d8d0c3;
padding: 3px;
position: relative;
overflow: hidden
}
.memmbername {
position: absolute;
bottom: -30px;
background: rgba(0, 0, 0, 0.8);
color: #ffffff;
line-height: 30px;
padding: 0 5px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
font-size: 11px;
transition: 0.5s ease all;
}
.member:hover .memmbername {
bottom: 0
}
.member img {
width: 100%;
transition: 0.5s ease all;
}
.member:hover img {
opacity: 0.8;
transform: scale(1.2)
}
.panel-default>.panel-heading {
color: #607D8B;
background-color: #ffffff;
font-weight: 400;
font-size: 15px;
border-radius: 0;
border-color: #e1eaef;
}
/*
Inspired by http://dribbble.com/shots/890759-Ui-Kit-Metro/attachments/97174
*/
*, *:before, *:after {
/* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
-webkit-box-sizing: border-box;
/* Firefox (desktop or Android) 28- */
-moz-box-sizing: border-box;
/* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
box-sizing: border-box;
}
body {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23ffdd99'/%3E%3Cstop offset='1' stop-color='%234FE'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
text-align: center;
padding-top: 40px;
}
.btn-nav {
background-color: #fff;
border: 1px solid #e0e1db;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.btn-nav:hover {
color: #e92d00;
cursor: pointer;
-webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */
transition: color 1s;
}
.btn-nav.active {
color: #e92d00;
padding: 2px;
border-top: 6px solid #e92d00;
border-bottom: 6px solid #e92d00;
border-left: 0;
border-right: 0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-webkit-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
-moz-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
-ms-transition: border 0.3s ease-out, color 0.3s ease 0.5s; /* IE10 is actually unprefixed */
-o-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
transition: border 0.3s ease-out, color 0.3s ease 0.5s;
-webkit-animation: pulsate 1.2s linear infinite;
animation: pulsate 1.2s linear infinite;
}
.btn-nav.active:before {
content: '';
position: absolute;
border-style: solid;
border-width: 6px 6px 0;
border-color: #e92d00 transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -6px;
top: 0;
left: 50%;
}
.btn-nav .glyphicon {
padding-top: 16px;
font-size: 40px;
}
.btn-nav.active p {
margin-bottom: 2px;
}
@-webkit-keyframes pulsate {
50% { color: #000; }
}
@keyframes pulsate {
50% { color: #000; }
}
@media (max-width: 480px) {
.btn-group {
display: block !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
}
}
@media (max-width: 600px) {
.btn-nav .glyphicon {
padding-top: 12px;
font-size: 26px;
}
}
.moneda{
margin: 0;
display:inline-block;
height: 18px;
float:none;
}
#menujav {
display:block;
position:relative;
top:-50px;
}
}
// ----------- Inicio Script GTR
$('.timeline-panel').click(function() {
$('.timeline-body', this).toggle(); // p00f
});
// ----------- FIN script GTR
// ------------- Inicio Script tabla historial
$(document).ready(function () {
$('.star').on('click', function () {
$(this).toggleClass('star-checked');
});
$('.ckbox label').on('click', function () {
$(this).parents('tr').toggleClass('selected');
});
$('.btn-filter').on('click', function () {
var $target = $(this).data('target');
if ($target != 'all') {
$('.table tr').css('display', 'none');
$('.table tr[data-status="' + $target + '"]').fadeIn('slow');
} else {
$('.table tr').css('display', 'none').fadeIn('slow');
}
});
});
// ---------- FIN Script tabla historial
// templatemo 467 easy profile
// PRELOADER
$(window).load(function(){
$('.preloader').delay(1000).fadeOut("slow"); // set duration in brackets
});
// HOME BACKGROUND SLIDESHOW
$(function(){
jQuery(document).ready(function() {
$('body').backstretch([
"images/tm-bg-slide-1.jpg",
"images/tm-bg-slide-2.jpg",
"images/tm-bg-slide-3.jpg"
], {duration: 3200, fade: 1300});
});
})
var activeEl = 2;
$(function() {
var items = $('.btn-nav');
$( items[activeEl] ).addClass('active');
$( ".btn-nav" ).click(function() {
$( items[activeEl] ).removeClass('active');
$( this ).addClass('active');
activeEl = $( ".btn-nav" ).index( this );
});
});
function Click_menu(number) {
ocultartodo();
if (number == 1) {
document.getElementById("Pag_ope").style.display = "Block";
}
if (number == 2) {
document.getElementById("Pag_ran").style.display = "Block";
}
if (number == 3) {
document.getElementById("Pag_his").style.display = "Block";
}
if (number == 4) {
document.getElementById("Pag_eve").style.display = "Block";
}
if (number == 5) {
document.getElementById("Pag_gtr").style.display = "Block";
}
if (number == 6) {
document.getElementById("Pag_meg").style.display = "Block";
}
}
function ocultartodo() {
document.getElementById("Pag_ope").style.display = "none";
document.getElementById("Pag_his").style.display = "none";
document.getElementById("Pag_ran").style.display = "none";
document.getElementById("Pag_eve").style.display = "none";
document.getElementById("Pag_gtr").style.display = "none";
document.getElementById("Pag_meg").style.display = "none";
}
// seccion para megamoneda
// Carousel Auto-Cycle
$(document).ready(function() {
$('.carousel').carousel({
interval: 6000
})
});
