@font-face {
  font-family: "robotech";
  src: url("fonts/robotech.ttf");
}

* {
  margin: 0px;
  padding: 0px;
}

.clearfix {
  float: none;
  clear: both;
}

#global {
  width: 65%;
  margin: 0px auto;
  margin-top: 30px;
  padding: 25px;
  background: white;
  box-shadow: 0px 0px 2px gray;
}

#global h2 {
  font-family: "robotech";
  font-size: 35px;
  color: #1f87c4;
}
/* logo principal  */
#logo {
  font-family: "robotech", "verdana", "arial";
  font-size: 33px;
  letter-spacing: 4px;
  line-height: 75px;
  color: white;
  text-align: center;
  width:105.7%;
  height: 100px;
  margin-left: -25px;
  margin-top: -55px;
  margin-bottom: 0px;
  float: left;
  text-transform: uppercase;
}

h1{
    font-size: 38px;
    margin-top: 10px;
}

#menu {
  font-family: Helvetica, Arial;
  background: #333;
  width:105.7%;
  text-transform: uppercase;
  margin-left: -25px;
  margin-bottom: 20px;

}

#menu ul li {
  height: 56px;
  display: inline-block;
  transition: all 300ms;
 
}

#menu ul li:hover {
  background: #4e5e23;
}
/*Programamos el menu con sus atributos*/
#menu a {
  display: block;
  color: white;
  text-decoration: none;
  padding-top: 18px;
  padding-left: 30px;
  padding-right: 30px;

}

#posts {
  width: 60%;
  float: left;
  font-family: Helvetica, Arial;
}

.post {
  padding: 7px;
}

h2 {
  font-size: 30px;
  color: #333;
  font-family: Helvetica, Arial;
}

.post .date {
  display: block;
  color: gray;
  margin-top: 5px;
}

.post p {
  margin-top: 10px;
  margin-bottom: 20px;
  line-height: 22px;
  text-align: justify;
}

.button-more {
  font-size: 14px;
  text-align: center;
  display: block;
  padding: 15px;
  color: white;
  text-decoration: none;
  margin-top: 10px;
  width: 75px;
  margin-bottom: 20px;
}
/* Se captura el id de la etiqueta aside y se les aplica css*/
#sidebar {
  font-family: Helvetica, Arial;
  width: 31%;
  float: right;
  margin-top: 20px;
}

#sidebar h4 {
  font-size: 23px;
  margin-top: 50px;
  margin-bottom: 20px;
  text-align: center;
  line-height: 10px;
  color: #333;
  background: url("../img/line.png") repeat-x;
}

#sidebar h4 span {
  background: white;
  padding: 5px;
}

#sidebar img {
  margin-top: 20px;
  width: 100%;
}

#sidebar p {
  font-size: 15px;
  text-align: justify;
}
/*Estilos para campo de texto*/
form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="number"],
select {
  padding: 5px;
  border-radius: 2px;
  border: 1px solid #ccc;
  width: 80%;
  margin-bottom: 10px;
  margin-top: 5px;
}
/*Estilos para botón*/
form input[type="submit"] {
  background: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  color: 333;
  cursor: pointer;
}
/*Estilos para pié de página*/
footer {
  font-family: Helvetica, Arial;
  color: white;
  height: 47px;
  background: rgb(51, 51, 51, 0.7);
  margin: 0px auto;
  width: 65%;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 50px;
  line-height: 47px;
}

.bx-wrapper,
.bx-viewport {
  height: 250px !important;
}

#selector-theme {
  position: fixed;
  top: 40%;
  background: rgb(51, 51, 51, 0.7);
  width: 50px;
  height: 100px;
}

#to-green,
#to-red,
#to-blue {
  width: 25px;
  height: 25px;
  border: 1px solid white;
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
  cursor: pointer;
}
/*Color de los cuadritos izquierdos*/

#to-green {
  background: #235e3d;
}
#to-red {
  background: #ca3413;
}
#to-blue {
  background: #1f87c4;
}

.subir {
  color: white;
  text-decoration: none;
  display: block;
  float: right;
}

#box {
  width: 32%;
  float: left;
  margin-top: 40px;
}

#acordeon {
  margin-top: 20px;
}

#reloj {
  font-size: 20px;
  font-weight: bold;
  font-family: Helvetica, Arial;
  color: #333;
  border: 5px dashed #333;
  width: 30%;
  padding: 30px;
  margin: 0px auto;
}

#form_contact {
  width: 100%;
  margin-top: 15px;
  font-family: Helvetica, Arial;
}

#form_contact label {
  display: block;
  width: 100%;
  margin-top: 5px;
}
/* Cuadro de texto error*/
.form-error {
  /*float: right;*/
  font-size: 11px;
  background: red;
  color: white;
  padding: 10px;
  width: 100%;
}

.super_time {
  display: block;
  text-align: left;
  font-family: "robotech";
  font-size: 28px;
}


.mazinger{
  width: 300px;
  height: 200px;
}

/* responsivo */

@media  (max-width: 768px) {
  #logo {
   
    font-size: 33px;
    letter-spacing: 4px;
    line-height: 75px;
    color: white;
    text-align: center;
    width: 477px;
    height: 40px;
    margin-top: -25px;
    margin-bottom: 0px;
  }

  h1{
    font-size: 19px;
    margin-top: -20px;
}

#posts {
  width: 100%;
  
}
/* Go Nagai */
#sidebar {
  
  margin-right: 105px;
  width: 57%;
  /* margin-right: 43px;
  width: 65%; */
  
}

.mazinger{
  width: 220px;
  height: 151px;
}


}

@media (max-width: 650px){

/* Go Nagai tablet y celular */
#sidebar{

  margin-right: 29px;
  
  width: 76%; 

}
/* reloj */
#box {
  width: 102%;
 
}



  } 


@media (max-width: 450px){

#menu{
  width: 75%;
}  

#logo{
  width: 241px;
  height: 52px;
  line-height:82px;

}

h1 {
  font-size: 31px;
  margin-top: -18px;
}

}