/* lvti_std.css */
body.lvti_std #logo {position: relative; top:20px !important; float: left; }
body.lvti_std #logo h1 {display: inline; font-size: 18px;}
body.lvti_std .header h1 a {width: 140px !important;}

body.lvti_std .header .header-nav {
	float: right;
	margin-right: 45%;
}



/* details video pages */

	.main-content {
		font-family: DinCondensedLight;
	}
	.intro > .content > h2, .outro > .content > h2,  {
		font-family: DinCondensedRegular;
    	font-size: 32px;
    	text-transform: uppercase;
	}
	.intro > .content > p, .outro > .content > p {
		font-family: DinCondensedLight;
    	font-size: 24px;
	}
	.main-content .question > .content > q, .main-content .question > .content > p, .main-content .question > .content > p {
		font-size: 18px;

	}

.question > .content h2 {
    font-size: 36px;
    text-transform: uppercase;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.question > .content > q, .question > .content > .links {
    padding-left: 50px;
    padding-right: 50px;
    margin-left: auto;
    margin-right: auto;
/*    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
    filter: alpha(opacity = 0);
*/
    -webkit-transform: translate(0px, 50px);
    -moz-transform: translate(0px, 50px);
    -ms-transform: translate(0px, 50px);
    transform: translate(0px, 50px);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-transition-delay: 0ms;
    -moz-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
}
.question > .content > q {
    margin-bottom: 2ex;
    margin-top: 3ex;
	vertical-align: top;
}

.question.active > .content {
    width: 290px;
    height: 290px;
    padding-top: 70px;
    -webkit-transition-delay: 0ms;
    -moz-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
}

	.question:hover h2, .question.active h2 {
	    padding: 0 20px;
	    -webkit-transition: all 300ms ease-in-out;
	    -moz-transition: all 300ms ease-in-out;
	    -o-transition: all 300ms ease-in-out;
	    transition: all 300ms ease-in-out;
	    -webkit-transition-delay: 0ms;
	    -moz-transition-delay: 0ms;
	    -o-transition-delay: 0ms;
	    transition-delay: 0ms;
	}
q {
}

.filtres {
    height: 50px;
    width: 250px;
    position: absolute;
    right: 0;
    /* margin: -65px 0 0 0; */
    /*margin-top: 0 !important;*/
}
body.lvti_std #logo {
    position: absolute;
    left: 200px;
}

body.lvti_std .filtres {
    margin-top: 0 !important;
}


/* login */
.wrapper-dropdown-5 {margin: 0; width: 90px; background: transparent;}
.wrapper-dropdown-5 img {border-radius: 50%;}
.wrapper-dropdown-5 span.usuario {color: white;}
.wrapper-dropdown-5.active span.usuario {color: black;}
.login-container .wrapper-demo {margin: 0; float: none; position: relative; left: 150px;}
.wrapper-dropdown-5 img {border-radius: 50%;}
.image-circle {border-radius: 50%;}
.flota-izq {float: left;}

/*.header .header {padding-top: 0; }*/
.vl_logado1 {margin-top: -21px;}
.vl_logado1 #login .wrapper-dropdown-5 {padding: 0;}
.vl_logado1 #login #dd div {
    text-align: left;
    padding: 2px 10px;
}
.vl_logado1 #login #dd div span {padding: 0px 6px;} /* alinea nombre de usuario con "profile" y "sign out" */
















body #area_comentarios {width: 100% !important; background: none;}
#area_comentarios .row {margin: 20px 0; display: block;}

#area_comentarios [type="radio"]:not(:checked)+label, [type="radio"]:checked+label {  padding-left: 35px !important; }


input[type=range] {
  position: relative;
  background-color: transparent;
  border: none;
  outline: none;
  width: 100%;
  margin: 15px 0px !important;
  padding: 0; }

input[type=range]+.thumb .value {
    display: block;
    width: 30px;
    text-align: center;
    color: #26a69a;
    font-size: 18px !important;
    /*margin-top: -20px;
    margin-left: 15px;*/
    }
    input[type=range] + .thumb.active {
    border-radius: 50% 50% 50% 0; }
    input[type=range] + .thumb.active .value {
      color: #fff;
      margin-left: -1px !important;
      margin-top: 8px !important;
      font-size: 14px !important; }


    #voice_style select option {
        color: black;
    }

    #area_comentarios h4 {font-size: 18px;}
    #area_comentarios .tabs {background-color: transparent !important;}
    /*#admin, #styles_tab {display: none;}*/
    #voice_tab {display: none;}

    #area_comentarios .comment-post-btn-wrapper {background-color: transparent; height: auto; position: relative;}

/* voices */
#voices h4 {
    margin-top: 15px; margin-bottom: 5px; 
    /* color: #0288d1;  light-blue darken-2 
    color: #4fc3f7;  light-blue lighten-2 
    color: #0d47a1;  darken-3 
    color: #64b5f6;  lighten-2 */
    color: #448aff; /* accent-2 */
}
#voices .sin_margen {margin: 0 !important;} /* nuevas filas sin margen adicional */
#voices #segunda_col {
    /*border-left: 1px dotted #448aff;*/
}

#voices #styles_tab #segunda_col {position: relative;}
    /*#styles_tab {position: relative;}*/
    #voice_style_img {
        position: relative;
        top: 30px;
    }
    #voice_style_img {
        /*position: absolute;
        bottom: 50px;*/
    }
    #voice_style_img.side_left {left: 5%;}
    #voice_style_img.side_right {left: 25%;}

    .private_with_user_select option, .private_with_user_select ul li {color: #448aff;}
    .dropdown-content li>span {padding-top: 0.3rem !important; padding-bottom: 0.3rem !important;}
    .select-wrapper input.select-dropdown {height: 1rem;}
    #voices .private_with_user_select ul {height: 200px; overflow: scroll;}
    #voices .private_with_user_select ul.active {height: 200px; overflow: scroll !important;}
    
    #voices .private_with_user_h4.disabled, #voices .private_with_user_input .disabled, #voices .private_with_user_label.disabled, #voices .private_with_user_dropdown.disabled > * {
        /*color: rgba(0,0,0,0.9);*/
        color: #111 !important;
    }   /* grey darken-1 */

/* edit y delete*/
.hotspot .voce_edit .fa:before, .hotspot .voce_delete .fa:before, .hotspot .voce_reply .fa:before, .hotspot .voce_social .fa:before {color: #555; /*border: 1px solid transparent;*/}
.hotspot:hover .voce_edit .fa:before, .hotspot:hover .voce_delete .fa:before {cursor: pointer; color: #ccc; /*border: 1px solid #555;*/}
.hotspot:hover .voce_edit.error .fa:before, .hotspot:hover .voce_delete.error .fa:before, .hotspot:hover .voce_reply.error .fa:before {color: #c00; /*border: 1px solid #555;*/}

.hotspot .voce_edit, .hotspot .voce_delete, .hotspot .voce_reply, .hotspot .voce_reply_prev, .hotspot .voce_social {
        -webkit-transition: top 300ms, left 300ms, color 300ms ease-in-out;
        -moz-transition: top 300ms, left 300ms, color 300ms ease-in-out;
        -o-transition: top 300ms, left 300ms, color 300ms ease-in-out;
        transition: top 300ms, left 300ms, color 300ms ease-in-out;
        -webkit-transition-delay: 300ms;
        -moz-transition-delay: 300ms;
        -o-transition-delay: 300ms;
        transition-delay: 300ms;
}
.hotspot .voce_edit, .hotspot .reply_edit {position: absolute; top: 95px; left: 22px;}
.hotspot.active .voce_edit, .hotspot:hover .voce_edit, .hotspot.active .reply_edit, .hotspot:hover .reply_edit {position: absolute; top: 70px; left: 50px;}
.hotspot .voce_delete, .hotspot .reply_delete {position: absolute; top: 95px; left: 5px;}
.hotspot.active .voce_delete, .hotspot:hover .voce_delete, .hotspot.active .reply_delete, .hotspot:hover .reply_delete {position: absolute; top: 70px; left: 30px;}
.hotspot .voce_reply {position: absolute; top: 175px; left: 90px;}
.hotspot.active .voce_reply, .hotspot:hover .voce_reply {position: absolute; top: 240px; left: 120px;}
.hotspot .voce_reply:hover .fa:before {cursor: pointer; color: #06a; /*border: 1px solid #555;*/}


/* REPLIES */

.hotspot .content.reply, .hotspot .content.has_replies {display: none;}
.hotspot .content.reply.active, .hotspot .content.has_replies.active {display: block;}
.hotspot .prevnext_replies {position: absolute; top: 150px; left: 85px; color: #555;}
.hotspot.active .prevnext_replies,.hotspot:hover .prevnext_replies {position: absolute; top: 220px; left: 115px; color: #ccc; }
.hotspot .voce_reply_prev:hover .fa:before, .hotspot .voce_reply_next:hover .fa:before {cursor: pointer; color: #06a; /*border: 1px solid #555;*/}
/* end replies */

.hotspot .content .links li {/*height: 100px;*/ max-height: 100px !important; overflow-y: auto;}
.hotspot .content .links li span {word-break: break-all;}
    
/*.idioma div {position: relative;}*/
.hotspot .content .links {position: relative;}  /* para posicionar user_social fav_user */

.idioma .user_social {position: absolute; top: 54px;left:70px;}

.hotspot .voce_social, .hotspot .reply_social {position: absolute; top: 175px; left: 110px;}
.hotspot.active .voce_social, .hotspot:hover .voce_social, .hotspot.active .reply_social, .hotspot:hover .reply_social {position: absolute; top: 240px; left: 140px;}
.hotspot .voce_social:hover .fa:before, .hotspot .reply_social:hover .fa:before {cursor: pointer; color: #06a; /*border: 1px solid #555;*/}

.fav_profile:hover, .voce_social:hover, .reply_social:hover {cursor: pointer;}








/* Hawaii */
.vl_logado1 {
    margin-top: 0;
}
/* re-estilos burbujas */
.hotspot .content .links li {
    /* height: 100px; */
    overflow-y: auto;
    overflow-wrap: break-word;
    max-height: 130px !important;
    /* overflow-y: visible; */
    line-height: 1.2em; /* overflow auto */
}
.hotspot > .content {

    width: 90px;
    height: 90px;
}
.hotspot:hover > .content, .hotspot.active > .content {

    width: 290px;
    height: 290px;
}
/* pendiente para ganar más espacio. Contador + clase especial 'big'
.hotspot > .content > .description, .hotspot > .content > .links {
    padding-left: 30px;
    padding-right: 30px;
}*/

/* guide-tour */

.popover {
    /**/
    /*background-color: none;*/
    background: rgba(255, 255, 255, 0.75);
    border: none;
}
.popover[class*=tour-] {    
    border-radius: 280px;
    min-height: 280px;
    min-width: 280px;
}
.popover.bottom {
    line-height: 12px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.75);
    text-transform: none;
    bottom: auto;
}
.popover .btn {padding: 0 1.1em;font-size: 14px;background-color: #1565C0 !important; /* blue darken-3 */}
.popover.bottom .arrow {
    background-color: transparent;
}
.popover .popover-title {
    margin-top: 35px;
    text-align: center;
    /* margin-left: 30px; */
    background-color: transparent;
    border-bottom: 0px solid transparent;
    font-size: 24px;
    color: #1565C0 !important; /* blue darken-3 */
    font-weight: bolder;
}
.popover .popover-content {
    color: #000;
    font-size: 18px;
    line-height: 18px;
    height: 100px;
    padding: 15px 14px 9px 14px;
}
.popover.right {
    text-align: left;
}
.popover[class*=tour-] .popover-navigation {
    padding: 10px 0 10px 30px !important;
    width: 250px;
    position: relative;
}
.popover .popover-navigation .btn-group .btn, .btn-group > .popover .popover-navigation .btn:first-child:not(:last-child):not(.dropdown-toggle), .popover .popover-navigation button {
    border-radius: 20px !important;
}


/* ---------------------------------------------- /*
 * Mouse animate icon
 *  https://gist.github.com/agragregra/d628a19e823d5a10ae56
 *  <div class="mouse-icon"><div class="wheel"></div></div>
/* ---------------------------------------------- */
.mouse-icon {
  border: 2px solid #000;
  border-radius: 16px;
  height: 40px;
  width: 24px;
  display: block;
  z-index: 10;
  opacity: 0.7;
  position: absolute;
    margin-bottom: -20px;
    
}
.mouse-icon .wheel {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: 50;
  -webkit-animation-play-state: running;
  -webkit-animation-name: drop;
          animation-name: drop;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: 50;
          animation-iteration-count: 50;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.mouse-icon .wheel {
  position: relative;
  border-radius: 10px;
  background: #000;
  width: 2px;
  height: 6px;
  top: 4px;
  margin-left: auto;
  margin-right: auto;
}
@-webkit-keyframes drop {
  0% {
    top: 5px;
    opacity: 0;
  }
  30% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 25px;
    opacity: 0;
  }
}
@keyframes drop {
  0% {
    top: 5px;
    opacity: 0;
  }
  30% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 25px;
    opacity: 0;
  }
}

/* ---------------------------------------------- /*
 * Mouse animate icon F-I
 *  http://fantasy.co/work/bahamar
 *  <i class="work__next__mouse mouse"> <i class="mouse__wheel"></i> </i>
/* ---------------------------------------------- */
.mouse {
    position: absolute;
    box-sizing: border-box;
    left: 50%;
    bottom: 35px;
    width: 30px;
    margin-left: -15px;
    height: 48px;
    border-radius: 15px;
    border: 2px solid #000;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    cursor: pointer;
}
.work__next__mouse {
    /*bottom: 100%;*/
    margin-bottom: -25px;
    opacity: 0;
}
.work__next__mouse {
    opacity: 1;
    -webkit-transition: opacity .4375s cubic-bezier(.215,.61,.355,1);
    transition: opacity .4375s cubic-bezier(.215,.61,.355,1);
}
.work__next__mouse{
    -webkit-transition: -webkit-transform .325s cubic-bezier(.215,.61,.355,1),opacity .325s cubic-bezier(.215,.61,.355,1);
    transition: transform .325s cubic-bezier(.215,.61,.355,1),opacity .325s cubic-bezier(.215,.61,.355,1);
}
.mouse__wheel {
    position: absolute;
    left: 50%;
    top: 8px;
    margin-left: -2px;
    width: 4px;
    height: 9px;
    background: #000;
    border-radius: 2px;
    -webkit-animation: mouse-wheel 1.25s 20 linear;         /* 20 instead of infinite */
    animation: mouse-wheel 1.25s 20 linear;
    -webkit-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;    
}
@-webkit-keyframes mouse-wheel{
    0%{
        -webkit-transform:scaleY(.4)translateY(0);
        transform:scaleY(.4)translateY(0)
    }
    20%{
        -webkit-transform:scaleY(1)translateY(0);
        transform:scaleY(1)translateY(0)
    }
    60%{
        -webkit-transform:scaleY(.4)translateY(12px);
        transform:scaleY(.4)translateY(12px)
    }
    100%{
        -webkit-transform:scaleY(.4)translateY(0);
        transform:scaleY(.4)translateY(0)
    }
}

@keyframes mouse-wheel{
    0%{
        -webkit-transform:scaleY(.4)translateY(0);
        transform:scaleY(.4)translateY(0)
    }
    20%{
        -webkit-transform:scaleY(1)translateY(0);
        transform:scaleY(1)translateY(0)
    }
    60%{
        -webkit-transform:scaleY(.4)translateY(12px);
        transform:scaleY(.4)translateY(12px)
    }
    100%{
        -webkit-transform:scaleY(.4)translateY(0);
        transform:scaleY(.4)translateY(0)
    }
}




/* voices range (anula .thumb, y requiere añadir <div><spans>12345 para input .range min=1 max=5) */
#voice_speed:hover {cursor: move;}
.thumb {display: none;}
.thumbs-range {      
    font-size: 12px;
    font-family: sans-serif;
    font-style: italic;    
    text-align: center;
    width: 100%;
    margin: 1px 0 0 0;
}
.thumbs-range span {
    padding-right: 69px;
    color: #26a69a;
}
.thumbs-range span:last-child {
    padding-right: 0;
}


/* ajuste login buttons en paginas voc */
.login-container .wrapper-demo {top: 17px;}
.vl_logado1 .login-container .wrapper-demo, .vl_logado2 .login-container .wrapper-demo {top: 0;}
.vl_logado1 .login-container .wrapper-dropdown-5 img, .vl_logado2 .login-container .wrapper-dropdown-5 img {height: 37px !important; width: 37px !important;}
/* ajuste header login altura */
.wrapper-dropdown-5 {padding: 0;}
.vl_no_logado .wrapper-dropdown-5 {padding: 4px 15px; width: 100%;}
.vl_no_logado .login-container .wrapper-demo {top: 5px; width: 150px;}