@import url(https://fonts.googleapis.com/css?family=Abel);
.sige_cont_1{height: auto !important;}
#lbOverlay{opacity: 0.9 !important;}
/* CSS Document */
@font-face {
    font-family: 'code-light';
    font-style: normal;
    font-weight: normal;
    src: local('code-light'), url('fonts/code-light/code_light-webfont.woff') format('woff');
}

@font-face {
    font-family: 'discoregular';
    src: url('fonts/disco_regular/DISCO___-webfont.eot');
    src: url('fonts/disco_regular/DISCO___-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/disco_regular/DISCO___-webfont.woff') format('woff'),
         url('fonts/disco_regular/DISCO___-webfont.ttf') format('truetype'),
         url('fonts/disco_regular/DISCO___-webfont.svg#discoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




/* ***************************************************************************************************** */
/*  HTML SPECIFIC CSS CODE */

body {
background:#fff;
font-family:Verdana;
font-size:14px;
margin: 0;
padding: 0;
color: #5b5959;
}

input {border-radius: 5px;
padding: 10px;
border: 1px solid #ccc;}

button {
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #224d56;
    padding: 15px 25px;
    cursor: pointer;
    color: #c7c7c7;
}

table, p{}
p {margin: 20px 0;}

tbody{}
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
iframe {border: none;}

/*------- listas menus -------- */
a:link, a:active, a:visited{}

a { color: #435D81; list-style: none; text-decoration: none; }

a:hover { color: #007DB2; text-decoration: none; }

ul {
text-decoration: none;
font-weight: normal;
font-family: Verdana, Geneva, sans-serif;
padding: 0px;
margin: 0px;
display: block;
}

ul li { list-style: none; text-decoration: none; font-weight: normal; height: auto; }

/*    */
.clearfix{clear: both;}

#center-wrapper {
background: #fff;
margin: 0 auto 5px auto; width: 1000px; display: block; padding: 0px; border-radius: 6px; -webkit-border-radius: 6px;
}

#center{float: left; padding: 15px; width: 100%; margin: 10px 0 0 0;}

#body-dos{}

/* ---------------- TOP --------- */
#top{background: #333; border-bottom: 1px solid #007DB2; color:#006691; height: 30px; font-size: 12px; text-transform: uppercase;}
#st-white #top{background: #766580;}
#top-wrapper {margin: 0 auto; width: 50%;}
#yns-user {float: right; display: block;}
.yns-user {
    display: block;
    height: auto;
    margin: 0 auto;
    padding: 7px;
    text-align: right;
}

.yns-topMenu:hover, .search-icon:hover {color: #96ff00;}

.yns_acceso { cursor: pointer; float: right; font-size: 12px; text-transform: uppercase;}

.yns-top-fecha {float: left; margin-top: 5px;}
.yns-top-redes > a { color: #ccc; }


.search-icon { float: right; padding: 6px 10px 0 20px; color: #fff; cursor: pointer;}
#yns-top-search-block {display: none; float: left; color: #d4d4d4; padding: 25px 0; background: #333; width: 100%;}
#yns-top-search {margin: 0 auto; width: 50%}
#yns-top-search label {padding: 0 5px;}
#yns-top-search input{background: #2f2e2e; color: #d4d4d4; border: 1px solid #3e3e3e; width: 100%; padding: 20px; font-size: 15px;border-radius: 5px;}
/*-------- SLIDE ------------------*/
#yns-slide-block {clear: both; position: relative; z-index: 1;}
/*-------- LOGIN JQUERY ----------*/
#yns-login { background: #1e2530; display: none; float: left; width: 100%;}
.yns-login {margin: 0 auto; padding: 20px 0; width: 1000px;}
.yns-login .cerrar_login { color: #006691; text-align: right; font-size: 20px;}
.yns-login .cerrar_sesion {color: #fff; padding: 7px;}
.yns-login .cerrar_sesion:hover {color:#007DB2;}
.yns-login .yns_acceso, .yns-login .cerrar_login {cursor: pointer;}
.yns-login .yns-login-form{color: #fff !important;}
.yns-login .form-inline { margin: 0 auto; width: 50%;}
.yns-login .add-on {float: left; width: 100%; margin: 5px 0 0;}
.yns-login .input-small {background: #2e394b; border:none; color: #fff; font-size: 15px; width: 100%;}
.yns-login .yns-forgot a {color: #007DB2;font-size: 12px;}
.yns-login .yns-login-button{border: 1px solid #fff; float: right;}
.yns-login #form-login-remember {margin: 10px 0 0;}

.yns-login-form{color: #fff;}
.form-inline { margin: 0 auto;}
.add-on {float: left; width: 100%; margin: 5px 0 0;}
.input-small {background: #2e394b; border:none; color: #fff; font-size: 15px; width: 100%;}
.yns-forgot a {color: #007DB2;font-size: 12px;}
.yns-login-button{border: 1px solid #fff; float: right;}
#form-login-remember {margin: 10px 0 0;}


/* -------------- HEADER ------------ */
/*------------ BREADCRUMS --------*/

#breadcrumbs {
    border-bottom: 1px solid #EEEEEE;
    display: block;
    float: left;
    font-size: 12px;
    margin: 5px 0;
    padding: 15px 0;
    width: 100%;
}
#breadcrumbs > div { display: block; margin: 0 auto; width: 1000px; }
.breadcrumb > li { float: left; padding: 0 2px;}



/* POSICION DE LOS MODULOS */

#logo{position: absolute;height: 60px;width:1000px;}
#logo > img {width: 100%;}



#header-wrapper { background: #323232; height: 160px; width: 100%; float: left; border-bottom: 1px solid #007db2; }
body#st-white #header-wrapper {background: #fff;}

#header{height: 50px;margin: 0 auto;width: 1000px;}

/*------ LEFT ------*/

#yns-left{float: left;margin: 0px 0 0 0px; display: block;}

.yns-left-sb {width: 210px;}
.yns-left-sb H3 { border-bottom: 1px solid; font-size: 15px; margin: 0 0 5px; padding: 0px; text-align: left; text-transform: uppercase; }


/* --------- POSICION CONTENT -------------  */


/*---------------- Tama�os ------------------------------*/


#body-center-both{float:left; width:540px;margin: 0 ;padding: 0 ;}
#main-lr{display:block;
float:left;
margin:0 0 0 2px;
overflow:hidden;
width:75%;
border-left:1px solid #ccc;
padding:0 0 0 7px;}

#yns-content-r{float:left; width:75%;;margin: 0 0 10px 0px ;}
#yns-content-lr{float:left; width:55%;;margin: 0 0 10px 10px ;}
#yns-content-l{float:left; width:77%;;margin: 0 0 10px 10px ;}

#main-wide{width: 953px; float: left; overflow: hidden;display: block;}

#body-center-left-only{float:left; width:100%;}
#body-center-wide{float:left; width:974px;}

#content {}

#content-wrapper {padding: 0 20px;}

/*------- Right ---------*/



.yns-right-sb { border-left:1px solid #ebebeb; padding:0 0 30px 7px; }
.yns-right-sb h3 {background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border-bottom: 1px solid #ebebeb; padding: 5px;}


#yns-right{float: left;margin:0 10px 0px 0px; display:block;width: 24%; }
.yns-right-sb .moduletable{border:1px solid black; }

/* --------- HTML -------------  */

#showcase{ display:block; float:left; margin:0 0 10px;}


/* MAIN */
#main{display: block; float: left; padding: 0; width: 100%;}

/* ---------------- user1 user2 --------------------- */

#user1 { width: auto; }
#user2 {background: #404040; padding: 15px; clear: both;}


/* ---------------- Bottom block ------------------------ */

#bottom {
clear:both;
float:left;
margin:20px 0;
padding-left:4px;
width: 100%;
}

#bottomMain{ float:left; height:100%; margin:0px; padding:5px; width: 100%; }

.bottomBlock{float: left; margin: 0 2% 0 0;}
.bottomBlock h3{border-bottom: 1px solid #e4e4e4; padding: 5px 0px; margin: 5px 0;}

.bottomBlockCont { float: left; margin: 0; padding: 0; }

.bottomBlock.one{width: 100%;}
.bottomBlock.two{width: 48%;}
.bottomBlock.three{width: 33.3%;}
.bottomBlock.four{width: 25%;}

.bt-123 {width: 48% !important;}

#bottom1, #bottom2, #bottom3 { float:left; height:100%; margin:0px; padding:5px; width:300px; }


/* --------------     Footer --------------------------*/

#footer-wrapper {width: 100%;  background: #1E2530; float:left; margin: 50px 0 0 0; }
#footer-wrapper #footer-grid {width: 50%; margin:0 auto; }
#footer { float: left; min-height: 100px; margin: 0 auto; padding: 40px 0; width: 1000px; border-radius:0px 0px 5px 5px;
    -webkit-border-radius:0px 0px 5px 5px;
    -ms-border-radius:0px 0px 5px 5px;
}

#footer-row { font-size: 12px; margin: 20px; width: 100%; float: left; }
#footer-row > div { display: block; }
#footer-row .moduletable{float: left;}
#footer-row h3 { border-bottom: 1px solid; font-size: 12px; margin: 0; padding: 5px 0; }
#footer-row ul.nav li {padding: 10px 0;}
#footer-row ul.nav li a{padding: 0;}

#footer-row.width-1 .moduletable{width: 100%;}
#footer-row.width-2 .moduletable{width: 50%;}
#footer-row.width-3 .moduletable{width: 25%;}
#footer-row.width-4 .moduletable{width: 15%;}

.yns-box .fm-box.width-1{float: left; width: 100%;}
.yns-box .fm-box.width-2{float: left; width: 50%}
.yns-box .fm-box.width-3{float: left; width: 33.333% }
.yns-box .fm-box.width-4{float: left; width: 25%}

.yns-box .fm-box {margin: 10px 0;}
.fm-box > div {padding: 0 10px;}


#yns__legal { float: left; width: 100%; font-size:12px;}
#yns__legal ul li {float: left; margin: 30px 0 0;}
#yns__legal > div {display: table; margin: 0 auto;}

#copyright { background: #0c1d22; clear:both; color: #fff; font-size: 11px; padding: 10px 0; text-align: center; width: 100%; }

/* ***************************************************************************************************** */

/*    SOCIAL    */
.yns-top-redes {float: right; margin: 4px 0 0;}
.yns-top-redes .fa {font-size: 21px;}

/* MOD STYLES */

.yns-mod{float: left; width: 100%}

div.naranja {background: #fbba00;}
div.gris {background: #b3b3b3;}

/* user */
.mod-blue{float: left; margin-bottom: 20px; width: 100%;}
.mod-blue h3{border-bottom: 1px solid #e4e4e4;}

.mod-userblue{}
.userblue456{}
.mod-normal{width: 100%;}


/* LATEST ARTICLES */
.latest-vert-posts .item-content {
    border-bottom: 1px solid #efefef;
    font-size: 13px;
    line-height: 16px;
    margin: 0 0 30px;
    padding: 0 0 15px;
    text-align: justify;
}

.print-icon, .email-icon, .edit-icon {float: left; padding: 5px; list-style: none;}
.icon-edit::before{font-family: FontAwesome; content: "\f044";margin: 0px 3px 0 0;}
.icon-print::before, .icon-printer::before {font-family: FontAwesome; content: "\f02f";}
.icon-envelope::before {font-family: FontAwesome; content: "\f0e0";}
.icon-envelope, .icon-print, .icon-edit{font-size: 16px;}
.email-icon > a, .print-icon > a {font-size: 0;}
.edit-icon{text-transform: uppercase;}

#yns__bottom_out{
    float: left;
    background: #ccc;
    width: 100%;
}
#yns__bottom_in{}



/* precios */

.precio-box {
    width: 25%;
    border: 1px solid #ccc;
    margin: 5px;
    padding: 10px;
    float: left;
}

.precio-box h2 {text-align: center; margin:10px 0 5px 0;}
.precio-box span {text-align: center; float: left; width: 100%}
.precio-box ul{margin: 10px 0 0 0; float: left; width: 100%;}
.precio-box li {list-style: none;}


.precio-buy {width: 100%;
padding: 10px;
margin: 15px 0 0;
background: #ccc;
border: 1px solid #d22727;
text-transform: uppercase;
color: #fff;
}
.precio-descripcion{margin: 10px}


/* ---- Ejercicios ----- */
#canvas {text-align: center; font-size: 100px; color: #4a4a4a;}
.ex-start {padding: 10px;}


.controls { width: 100%; float: left; margin: 0px 0 50px;}
.c-box {margin: 0 auto; text-align: center;}
.c-box button{text-align: center;
padding: 10px 20px;
border-radius: 5px;}

.field { margin: 10px 0; }
.field input {}

.descripcion {
    padding: 15px 0;
}
/* METRONOMO */
.tools-cont {
    width: 50%;
    margin: 0 auto;
}

#tools {
    float: left;
    width: 100%;
    border-bottom: 1px solid #121212;
    background: #2c2c2c;
    color: #fff;
    display: none;
}

#tools-menu {
    float: left;
    width: 100%;
    border-bottom: 1px solid #3c3c3c;
    padding: 0px 0;
    background: #2c2c2c;
}
.tools-menu-cont{ margin: 0 auto; width: 50%;}
.tools-menu-cont ul li{ float: left; width: 50%; list-style: none; padding: 20px 0; cursor: pointer; text-align: center;}
.tools-menu-cont ul li:hover{background: #292929;}

.tool-menu-grid { float: left; width: 100%; padding: 5px 0; }

.tools-cont-metro{display: block; width: 50%; margin: 0 auto;}
.tools-cont-pomo{display: none; width: 50%; margin: 0 auto;}

/**/
.tools-config{font-size: 18px;}

/* BAR CONTROLLER */
#control-bar {width: 100%; float: left;background: #2c2c2c;}
.ctrl-cont{width: 50%; margin: 0 auto;}
.ctrl-box {float: left; display: block; width: 100%; padding: 5px 0;}
.pomo__counter-ctrl {font-size: 15px;}
#control-bar .ctrl-metro-box{float: left; display: block; width: calc(50% - 5px); background: #262525;

padding: 5px 0; border-radius: 5px;}
#control-bar .ctrl-metro-box .bpmslider{float: left; width: 67%; height: 34px; background: #232323; border: 1px solid #353535; border-radius: 0;}
#control-bar .ctrl-metro-box .bpm{float: left; width: 65px; border-radius: 0; background: #363636; border: 1px solid #626262; color: #93ff5b;}
#control-bar .ctrl-metro-box .switch{float: left;}

#control-bar .ctrl-pomo-box{float: left; display: block; width: calc(50% - 5px);background: #262525;margin: 0 5px;padding: 5px 0;border: ;border-radius: 5px;}

#control-bar #pomo__counter-ctrl { font-size: 27px; text-align: center; color: #93ff5b; }


:root {
      --main-bg-color: brown;
    }