body{
  margin: 0;
  padding: 0;
  background-color:#DFDFDF;
  font-family:arial;
  text-align: center;
  image-orientation: right;
}
header {
  background-color: white;
  background-color:rgb(247, 247, 247,0.7);
  max-width: 100%;
  color: black;
  text-align: center;
  line-height: 0.9em;
}

hr.purple{
  color: #000;
}

h1{
  font-size: 250%;
}

img.header{
  max-width: 315px;
}

img{
  max-width: 200px;
}
p.slogan{
  font-family:monospace;
  font-size:110%;
  color: gray;
}

a{
  text-decoration: none;
  color: blue;
  outline: 0 !important;
}

a.link{
  text-decoration: none;
  color: #1A0DB2;
  font-weight: bold;
  outline: 0 !important;
}

a.link2{
  text-decoration: none;
  font-size: 110%;
  background-color: #484546;
  border-radius:3px;
  padding: 5px;
  margin-top:5px;
  color: #14FF38;
  font-family: monospace;
    outline: 0 !important;
}

.dif {
  text-decoration: none;
  padding: 6px;
  color: #008F15;
  font-weight: bold;
  background-color: #62FF79;
  text-align: center;
  border: solid 0px #797979;
  border-radius: 13px;
}


.dif.active, .dif:hover{
  background-color:#62FFA7;
  border: solid 1px #008F15;
}

nav ul{
  background:;
  overflow: hidden;
  color: white;
  padding: 4px;
  text-align: center;
}


nav ul li {
  display: inline-block;
  outline: 0 !important;
  background:#62FF79;
  padding: 5px;
  font-family:arial;
  font-size: 135%;
  color: #008F15;
  border: solid 1px #62FF79;
  border-radius: 10px;

}
nav ul li:hover{
  background-color:#62FFA7;
  border: solid 1px #008F15;
}

nav ul li.active{
  border: solid 1px #008F15;
  font-weight: bold;
  background-color: #2EFF4D;
}
section{
  text-align: left;
  background-color: white;
  max-width:600px;
  border-radius: 9px;
  padding: 0.1px 10px;
  margin:0;
  margin-top: 10px;
}

input[type=submit] {
  text-decoration: none;
  font-size: 140%;
  font-family: monospace;
  padding: 5px;
  color: #000;
  background-color:#62FF79;
  text-align: center;
  border: none;
  border-radius: 5px;
  outline: 0px solid  #62FF79;
}


input[type=submit]:hover {
background-color: #00B6F0;
}

input[type=url], select {
    max-width: 300%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #000;
    border-radius: 4px;
    box-sizing: border-box;
}
input[type=text], select {
    max-width: 100%;
    text-align: center;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid  #62FF79;
    border-radius: 4px;
    color: #00B6F0;
    font-size: 100%;
    background-color: #000;
    box-sizing: border-box;
}

}
h2 {
  font-size: 110%
}

table{
  border-collapse: collapse;
  max-width:300px;
  font-size: 90%;
}

td, th{
      border: 1px solid #000;
      text-align: left;
      padding: 8px;
}

tr:nth-child(even) {
    background-color: ;
}

.column1 {
    float: left;
    padding: 10px;
    height:400px;
    width:70%;
    box-sizing:border-box;
}
.column2 {
    float: left;
    padding: 10px;
    width:30%;
    height:400px;
    box-sizing:border-box;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
button {
    outline: 0 !important;
}


button.accordion {
    background-color: rgb(223, 223, 223, 0.8);
    color: #000;
    cursor: pointer;
    outline: 0 !important;
    padding: 5px;
    width: 100%;
    border: none;
    border-radius: 0px;
    text-align: center;
    outline: 1px solid #797979;
    font-size: 16px;
    font-family: sans-serif;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: rgb(98, 255, 121);
    color: #000;
    font-style: oblique;
}

button.accordion2 {
    background-color: rgb(223, 223, 223, 0.8);
    color: #000;
    cursor: pointer;
    padding: 5px;
    width: 100%;
    outline: 0 !important;
    border: none;
    text-align: left;
    outline: 1px solid #797979;
    font-size: 16px;
    font-family: sans-serif;
    transition: 0.4s;
}

button.accordion2.active, button.accordion2:hover {
    background-color: rgb(98, 255, 121);
    color: #000;
    font-style: oblique;
}

button.accordion3 {
  display: block;
  align-self: center;
  background:#62FF79;
  padding: 5px;
  width:auto;
  font-family:arial;
  font-weight: bold;
  font-size: 110%;
  right:15px;
  color: #008F15;
  margin-bottom: 10px;
  border: solid 1px #62FF79;
  border-radius: 10px;
  transition: 0.4s;
  outline: 0;
}

button.accordion3.active, button.accordion3:hover {
  background-color:#00B6F0;
  border: solid 1px #004257;
  color: #004257;
}

button.caos{
  display: inline-block;
  background:#62FF79;
  padding-bottom: 0px;
  padding-top: 3px;
  padding-left: 2px;
  outline: 0 !important;
  padding-right: 2px;
  border: solid 0px #62FF79;
  border-radius: 40px;
}
button.caos:hover{
  background-color:#EA69F2;
  border: solid 0px #000;
  transition: 1s;
}

div.Bbubble{
  background-color: #171717;
  color:#62FF79;
  font-family: monospace;
  font-size: 12  0%;
  border-radius: 21px;
  padding: 7px;
  margin:10px;
  max-width: 315px;
  text-align: center;
}

div.center {
  text-align: center;
}

div.redes{
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 15px;
}
div.panel {
    padding: 0px;
    padding-top: 7px;
    margin: 0px;
    display: none;
    background-color:white;
}

div.portal{
  display: inline-block;
}
div.portal2{
  background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
border-radius: 10px;
margin-top: 15px;
}

div.comblu{
  background-color:#A7D4FB;
  border-radius: 7px;
  text-align: center;

}
div.comyel{
  background-color:#F8E763;
  border-radius: 7px;
  text-align: center;
}
div.compur{
  background-color:#FF80EC;
  border-radius: 7px;
  text-align: center}

div.comred{
  background-color:#FF616C;
  border-radius: 7px;
  text-align: center;
}
div.comgris{
  background-color:#282828;
  color: #00FF76;
  font-family: monospace;
  border-radius: 7px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  padding:0px;
  text-align: left;
  font-size: 120%;
}
div.back{
  position: fixed;
  right:26%;
  left:auto;
  top:20px;
}

img.back{
  max-width: 65px;
  text-shadow: 0 0 3px #7E93B4,0 0 3px #7E93B4
}

img.redes{
  max-width: 50px;
}

img.logo{
  max-width: 300px;
  float:right;
  margin-bottom:10px;
}

iframe.logo{
  max-width: 300px;
  float:right;
  margin-bottom:10px;
}

.container{
  max-width:1000px;
}

.container2{
  max-width:500px;
  height: 100%;
  overflow: hidden;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; width:100%; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.footer {
   position:static;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #CCCCCC;
   color: #000;
   text-align: center;
}
img.pablo{
  float:right;
  padding:5px;
  width: 130px;
  height:130px;
}

audio{
  width: 100%;
  display:block;
  border-radius: 4px;
}
@media screen and (max-width: 620px){
  div.back{
    right:10px;
    top:10px;
    position:fixed;
    }

  section {
    margin-top: 0px  ;
  }
}

@media screen and (max-width: 499px){
  .container{
    width: auto;
  }

  .container2{
    width: auto;
  }


  img.geo{
    width:100px;
  }

  img.logo{
    float:none;
    max-width: 80%;
  }

  iframe.logo{
    float:none;
    max-width: 95%;
  }

  img.pablo{
    float:left;
  }
.column1 {
    float: left;
    width: 100%;
    padding: 10px;
    height:auto;
    box-sizing:content-box;
}
.column2 {
    float: left;
    width: 100%;
    padding: 10px;
    height:auto;
    box-sizing: content-box;
}
}

@media screen and (max-width: 315px){
  img.header{
    max-width: 280px;
  }
  nav ul li{
    font-size: 115%;
  }
  nav ul li.active{
    ;
  }
  p.slogan{
    font-size:90%;
  }
}


@media screen and (min-width: 1100px){
  .container2{
    max-width: 45%;
  }