/*

 LAB REM
 1/5/2019

 Botonera


 */



/* LED's */


.margenes {

margin-left: 25px;
padding-left: 30px;
position: relative;
top: 40px;


}


.led-red {
    margin: 20px auto;
    width: 12px;
    height: 12px;
    background-color: #940;
    border-radius: 50%;
    box-shadow: #000 0 -1px 7px 1px, inset #600 0 -1px 9px, #F00 0 2px 12px;
}

.led-yellow {
    margin: 20px auto;
    width: 12px;
    height: 12px;
    background-color: #A90;
    border-radius: 50%;
    box-shadow: #000 0 -1px 7px 1px, inset #660 0 -1px 9px, #DD0 0 2px 12px;
}

.led-green {
    margin: 20px auto;
    width: 12px;
    height: 12px;
    background-color: #690;
    border-radius: 50%;
    box-shadow: #000 0 -1px 7px 1px, inset #460 0 -1px 9px, #7D0 0 2px 12px;
}

.led-blue {
    margin: 20px auto;
    width: 12px;
    height: 12px;
    background-color: #4AB;
    border-radius: 50%;
    box-shadow: #000 0 -1px 7px 1px, inset #006 0 -1px 9px, #06F 0 2px 14px;
}

/* Cajita Tooltip de sugerencias ( Tip's ) */

.tooltip {
  /* position: relative; */
  /* display: inline-block; */
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

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





/* Mi cajita */

/*  top , right , bottom ,  left */





.video_ancho {

/* width: 300px; */
width: 310px;
transform: scale(0.95,0.95);
border-radius: 8px; 
background: radial-gradient( #c1c3c4, #444646);

}

.ondas_ajuste {
	font-family: "arial", Verdana;
	font-size: 12px;
	font-weight: bolder;
	color: #333399;
        top: 15px;
	text-decoration: none;
	text-align: center;
	padding-left: 2px;
        padding-right: 2px;
        margin-top: 10px;
        margin-left: -225px;
        display: inline;
}
.ondas_ajuste:hover {
	font-family: "arial", Verdana;
	font-size: 12px;
	font-weight: bolder;
	color: #823c9f;
	text-decoration: underline;
	text-align: center;
        padding-left: 2px;
        padding-right: 2px;
        margin-left: -125px;
}


.ondas_cambiar {
	font-family: "arial", Verdana;
	font-size: 12px;
	font-weight: bolder;
	color: #3333ff;
	text-decoration: none;
	text-align: center;
	padding-left: 2px;
        padding-right: 2px;
        margin-left: 70px;
        display: inline;
}
.ondas_cambiar:hover {
	font-family: "arial", Verdana;
	font-size: 12px;
	font-weight: bolder;
	color: #823c9f;
	text-decoration: underline;
	text-align: center;
        padding-left: 2px;
        padding-right: 2px;
        margin-left: 70px;
}


.redes_ajuste {
	font-family: "arial", Verdana;
	font-size: 12px;
	font-weight: bolder;
	color: #333399;
	text-decoration: none;
	text-align: center;
	padding-left: 2px;
        padding-right: 2px;
        margin-left: 100px;
        display: inline;
}
.redes_ajuste:hover {
	font-family: "arial", Verdana;
	font-size: 12px;
	font-weight: bolder;
	color: #823c9f;
	text-decoration: underline;
	text-align: center;
        padding-left: 2px;
        padding-right: 2px;
        margin-left: 100px;
}


.redes_cambiar {
	font-family: "arial", Verdana;
	font-size: 12px;
	font-weight: bolder;
	color: #3333ff;
	text-decoration: none;
	text-align: center;
	padding-left: 2px;
        padding-right: 2px;
        margin-left: 125px;
        display: inline;
}
.redes_cambiar:hover {
	font-family: "arial", Verdana;
	font-size: 12px;
	font-weight: bolder;
	color: #823c9f;
	text-decoration: underline;
	text-align: center;
        padding-left: 2px;
        padding-right: 2px;
        margin-left: 125px;
}


.cajita_botonera {

border-style: solid;
border-width: 2px 2px 2px 2px;
/* border-color: gray green blue yellow; */
border-left: 6px solid gray;
background-color: lightgrey;
border-radius: 5px;
/* border-color: #aaaaaa #00ff00 #0000ff rgb(250,0,255); */
border-color: #cdccd2;
width: 170px;
height: 50%;
display: inline-block;
 margin: -20px; 
}

.cuadro_boton {

width: 60px;
height: 60px;
display: inline-block;
overflow: hidden;

padding: 5px;
border­radius: 100%;
­webkit­shape­inside: rectangle(0,0,100%,100%,100%,100%);
background­color: #cfc;
font­size: 0.8em;
text­align: justify;



}



/* Primer boton */

.botones {
  border: 0;
  position: relative;
  background: transparent;
  box-sizing: border-box;
  width: 0;
  height: 74px;
  border-color: transparent transparent transparent #202020;
  transition: 100ms all ease;
  cursor: pointer;
  border-style: solid;
  border-width: 37px 0 37px 60px;
}
.botones.pausado {
  border-style: double;
  border-width: 0px 0 0px 60px;
}
.botones:hover {
  border-color: transparent transparent transparent #404040;
}


/* Segundo boton */


.backgroundplaceholder{
	  /* background-color: black;  */
    background-color: white; 
    /* padding: 10em; */

padding: 0px;
		margin-left: 1%;
    width:100%;
    height:100%;
}
 /* the button's base size, shape, appearance */
.playPauseButton{
  position: relative;
  /* the button's background color */
  background: #fff; 
  border: none;
  outline:none;
/*
  height: 5em;
  width: 5em;
*/

  height: 120px;
  width:  120px;
  font-size: 2em; 
  box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
  cursor:pointer;
   /* the button's a circle */ 
	-moz-border-radius: 5em;
	-webkit-border-radius: 5em;
	border-radius: 5em;
  
}

.playPauseButton:focus{
  outline:none;
}

 /* the button's top layer: size, shape, appearance */
.playPauseButton:before {
  content: "";
  position: absolute;
  top: -0.4em;
   /* for visual centering */
  left: -0.38em;
  height: 0;
  border-style: solid;
  border-width: 1em 0 1em 2em;
  /* create shape with color */
  border-color: transparent transparent transparent #e52d27; 
  transition: .218s ease;
  transform: scale(0.4, 0.4);
  
}

.playPauseButton:hover:before {
  height: 2em;
  border-width: 0 0 0 2em;
}

 /* the button's mouseover/click/hover layer: size, shape, appearance */
.playPauseButton:after {
  content: "";
  position: absolute;
  background: inherit;
  width: 0;
  /*height: 2em;*/
   height: 0.8em;
  top: 0.2em;
   /* for visual centering */
  left: 0.37em;
  transition: .218s ease;
  transform: scale(0.4, 1.1);
}

.playPauseButton:hover:after {
  width: .5em;
}




/* 2 botón BIS al revés */



.pausePlayButton{
  position: relative;
  
  /* the button's background color */
  background: #fff; 
  border: none;
  outline:none;
/*
  height: 5em;
  width: 5em;
*/

  height: 120px;
  width:  120px;
  font-size: 2em; 
  box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
  cursor:pointer;
   /* the button's a circle */ 
	-moz-border-radius: 5em;
	-webkit-border-radius: 5em;
	border-radius: 5em;
  
}

.pausePlayButton:focus{
  outline:none;
}

 /* the button's top layer: size, shape, appearance */
.pausePlayButton:before {
  
content: "";
  position: absolute;
  top: -0.4em;
   /* for visual centering */
  left: -0.38em;
  height: 0;
  border-style: solid;
  border-width: 1em 0 1em 2em;
  /* create shape with color */
  border-color: transparent transparent transparent #e52d27; 
  transition: .218s ease;
  transform: scale(0.4, 0.4);
  
}

.pausePlayButton:hover:after {
  height: 2em;
  border-width: 0 0 0 2em;
}

 /* the button's mouseover/click/hover layer: size, shape, appearance */
.pausePlayButton:after {
  


  content: "";
  position: absolute;
  background: inherit;
  width: 0;
  /*height: 2em;*/
   height: 0.8em;
  top: 0.2em;
   /* for visual centering */
  left: 0.37em;
  transition: .218s ease;
  transform: scale(0.4, 1.1);



}

.pausePlayButton:hover:before {
  width: .5em;
}









/* Tercer Botón */

/*
 body {
  background: #636862;
  padding: 50px;
}

h1, p {
  text-align: center;
  font-weight: normal;
  letter-spacing: 0.04em;
}

h1 {
  color: tint(#ff6862, 60%);
  margin: 0 0 15px 0;
  font-size: 20px;
}

p {
  color: tint(#ff6862, 20%);
  margin: 0 0 50px 0;
  font-size: 16px;
}

   */

.c-pp {
  position: relative;
  width: 100px;
  height: 100px;
  display: block;
  border: 3.3333333333px solid #fff;
  border-radius: 50%;
  padding: 0;
  margin: 0 auto;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.c-pp__icon {
  box-sizing: border-box;
  display: block;
  position: relative;
  transition: all 0.2s ease;
  width: 25px;
  height: 50px;
  -webkit-transform: translateX(38.4615384615px);
          transform: translateX(38.4615384615px);
  top: 25px;
  border-top: 0 solid transparent;
  border-right: 8.3333333333px solid #fff;
  border-bottom: 0 solid transparent;
  border-left: 8.3333333333px solid #fff;
}
.c-pp.is-play .c-pp__icon {
  -webkit-transform: translateX(43.4782608696px);
          transform: translateX(43.4782608696px);
  border-top: 25px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid #fff;
}


/* Cuarto Boton */


 button::-moz-focus-inner { border: 0; } /* Para Firefox */

 .boton3d{
        border:0;
      /* color: #668428; */
      color: #505366;
        font-size: 48px;
        font-family:sans-serif;
        padding: 30px 30px;
#cdccd2
      /*background: -moz-linear-gradient(center top , #CDEB8E 0%, #A5C956 100%) repeat scroll 0 0 transparent;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));*/
 background: -moz-linear-gradient(center top , #cdccd2 0%, #8a807a 100%) repeat scroll 0 0 transparent;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdccd2), color-stop(100%,#8a807a));

      -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
      text-shadow: 1px 1px 1px #dfe6f3;
      -moz-box-shadow: 0px 6px 0 #948589;
        -webkit-box-shadow: 0px 6px 0 #948589;

    }

 .boton3d:active{
    position:relative;
     top:3px;
    -moz-box-shadow:0px 3px 0 #819F45;
    -webkit-box-shadow:0px 3px 0 #819F45
    background: -moz-linear-gradient(center top , #8a807a 0%, #cdccd2 100%) repeat scroll 0 0 transparent;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a807a), color-stop(100%,#cdccd2));
    }



/* Pie de pagina Footer */

.site-footer
{
  background-color:#26272b;
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:#737373;
  /*height: 20vh;*/
}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links
{
  padding-left:0;
  list-style:none
}
.footer-links li
{
  display:block
}
.footer-links a
{
  color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links.inline li
{
  display:inline-block
}
.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center
  }
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.twitter:hover
{
  background-color:#00aced
}
.social-icons a.linkedin:hover
{
  background-color:#007bb6
}
.social-icons a.dribbble:hover
{
  background-color:#ea4c89
}
@media (max-width:767px)
{
  .social-icons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}