/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:6;border-style:solid;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}


/* =============================================================================
   My CSS
   ========================================================================== */

/* ---- base ---- */

html{ 
	background: yellow;
}
/*
html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*/
body{
  font:normal 75% Arial, Helvetica, sans-serif;
  background: darkblue;
}


canvas{
  display:block;
  vertical-align:bottom;
	height:50%;
}


/* ---- stats.js ---- 

.count-particles{
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles{
  font-size: 1.1em;
}

#stats,
.count-particles{
  -webkit-user-select: none;
  margin-top: 5px;
  margin-left: 5px;
  padding-left: 0px;

}

#stats{
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles{
  border-radius: 0 0 3px 3px;
}

*/
/* ---- particles.js container ---- */

#particles-js{
  width: 100%;
  height: 95%;
  background-image: url('/fondo.jpg?1783779901');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
/*  opacity: 0.99;*/
  position: absolute;
  top: 30px;
  left: 0px;

}

blockquote {
  font-size: 30px;
  font-weight: 600;
  color: #fdfdfe;
  text-shadow: 0px 0px 5px #b393d3, 0px 0px 10px #b393d3, 0px 0px 10px #b393d3, 0px 0px 20px #b393d3;
  position: absolute;
  top: 30px;
  right :0px;
/*  background: #f9f9f9;
  border-left: 10px solid #ccc; */
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #000;
  content: open-quote;
  font-size: 4.0em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

cite{
  font-size: 21px;
  font-weight: 600;
  color: #fdfdfe;
  text-shadow: 0px 0px 5px #b393d3, 0px 0px 10px #b393d3, 0px 0px 10px #b393d3, 0px 0px 20px #b393d3;
 position: absolute;
 bottom:0;
 right:0;
  margin: 1.5em 10px;
  padding: 0.5em 10px;

}
cite:before {
  color: #000;
  font-size: 4.0em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

#logoimg
{
position: absolute; 
display: grid;
width: 40%;
top:0;
right: 0;
bottom: 0;
opacity:0.3;
}
#subtitulos
{
top: 0px;
right: 40%;
position:absolute; 

}

#video_player
{ 
  height: 29px; 
  filter:opacity(100%);
  background-image: linear-gradient(to left, darkblue, yellow);
  float:right;
  text-align: right;
  right: 0;
bottom: 0;
  width: 70%;


/*  background-color: white; */
}
::cue {
  font-size: 8.0em;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
  text-align: right;
  left: 200px;
}

input[type="image"] { 
float:left; 
height:20px; 
margin-left:2px; 
margin-right:5px; 
margin-top:2px;
}
#vol_img
{ 
width:20px;
position: absolute;
top:0px;
left:120px;
}
#player_controls
{ 
top:0px; 
position:absolute; 
/* background-color:#fff; */
width:50%; 
padding:0px; 
/* box-sizing:border-box;
 display:block; */
padding-left: 10px;

}
#change_vol{
float: right;
height: 20px;
width: 400px;
}

* {
	box-sizing: border-box;
}
.caja {
	float: left;
	bottom: 0;
	width: 33.33%;
	padding: 2px;
	
	height: 500px;
        object-fit: contain;

}
.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

#c1 {
	color: #CEF0D4;
	font-family: 'Rouge Script', cursive;
	font-size: 14px;
	font-weight: normal;
	line-height: 48px;
	margin: 0 0 50px;
	text-align: center;
	text-shadow: 1px 1px 2px #082b34;
}

#c2 {
	color: #d54d7b;
	font-family: Arial, sans-serif;
	/* 'Brush Script MT', cursive;*/
	font-size:  14px;
	font-weight: normal;
	 margin-bottom: 0px;
 text-align: center;
 text-shadow: 0 1px 1px #fff;
}


#c3{
top:100;
height:30;
color: #ffffff;
font-family: 'Raleway',sans-serif;
 font-size: 14px;
 font-weight: 800;
 line-height: 36px;
 margin: 0 0 24px;
 text-align: center; }


      .blink {
	width: 220px;
	height:50px;
	padding: 10px;
	text-align: center;
	line-height: 50px;
      }
      span {
        font-size: 26px;
        font-family: cursive;
	color: #fff;
        animation: blink 7s linear infinite;
      }
      @keyframes blink {
	0% {
	opacity: 0;
        }
        50% {
	opacity: .5;
        }
        100% { opacity: 1;
        }
      }