@charset "utf-8";
/*@import url(http://fonts.googleapis.com/css?family=Droid+Sans);*/

/*---------------------
	 reset
----------------------- */
/*html{
    font-family:'Droid Sans',sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%,
}*/
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,dialog,figure,footer,header,hgroup,menuu,nav,section,time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    /*font-size:100%;*/
    vertical-align:baseline;
   /* background-color:transparent;*/
    
}

/*body
    {
    line-height:1;
}*/
/*article,aside,dialog,figure,footer,header,hgroup,nav,section
    {
    display:block;
    
}
nav ul
    {
    list-style:none;*/
/*}*/
/*blockquote,q
    {
    quotes:none;
}*/
/*blockquote:before,blockquote:after,q:before,q:after{
    content:'';
    content:none;
}*/
/*a{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;vertical-align:baseline;
    background-color:transparent;
}*/
/*ins{
    background-color:#ff9;
    color:#000;
    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 black;cursor:help;
}
table{
    border-collapse:collapse;
    border-spacing:0;
}*/
/*hr{
    display:block;
    height:1px;
    border:0;
    border-top:1px solid#cccccc;
    margin:1em 0;
    padding:0;
}*/
/*input,select{
    vertical-align:middle;
}
input[type="search"]{
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    -webkit-appearance:textfield,
}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
*/
/*---------------------
	 sample
----------------------- */
/*body {
  border-top: 10px solid #800000;
}*/

/*h1 {
  margin: 90px 0 50px;
  color: #666;
  text-align: center;
  font-size: 150px;
}*/

/*.content {
  margin: 0 auto 20px;
  max-width: 680px;
  padding: 0 3%;
}*/

/*.content img {
  width: 260px;
  height: auto;
  border: solid 10px #fff;
  box-shadow: 0 1px 2px #999;
  float: left;
  margin: 0 3% 3%;
}*/

/*p {
  font-size: 110%;
  text-align: center;
  line-height: 1.5;
  margin: 0 0 15px;
}*/

/*---------------------
    クリックで表示される
    メニュー
----------------------- */
.slide_container {
  width: 100%;
    
  /*以下3行アニメーションに必要La siguiente necesidad de líneas de animación en tres*/
  position: absolute;
  top: 0;
  z-index: 999;
  
}

#menuu {
  padding: 50px 0;
  border-bottom: solid 15px rgba(128, 0, 0,.9);
  background: rgba(245, 134, 26,.8);
    /*background-color: rgba(115, 115, 115,.7);*//*fondo de todo el elemento*/
  /*以下アニメーションに必要*/
  display: none;
    
}

#menuu ul {
  overflow: hidden;
  margin: 0 auto;
  padding: 0;

  max-width:800%;
  width: 100%;
/*background-color: aqua;*/
    
}

#menuu li {
  float: left;
  padding: 0;
  width: 25%;
  list-style: none;
 
}

#menuu li a {
  display: block;
  margin: 0 5%;
  padding: 20px 0;/*anchura de los botones*/
  border: solid 1px rgb(128, 0, 0);
  background: rgba(242, 242, 242,.9);
  color:  rgb(128, 0, 0);
  text-align: center;
  text-decoration: none;
  font-size: 12px;
}

#menuu li a:hover {
  border: solid 1px #800000;
  color: #fff;
  font-weight: bold;
  background: rgba(245, 134, 26,.8);  
}
#menuu li a:active {
  border: solid 1px #800000;
  color: #800000;
}

/*---------------------
    クリックボタン
----------------------- */
#btn {
  margin: 0 auto;
  width: 25em;
  height: 5em;
  border-radius: 0 0 5px 5px;
  /*background: #800000;*/
  cursor: pointer;
 background:  rgb(128, 0, 0);
 -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);   
}

#btn span {
  position: relative;
  top: 12px;
  left: 50%;
  display: block;
  margin-left: -20px;
  width: 50px;
  height: 5px;
  border-radius: 5px;
  color: #fff;
  font-size:1.8em; 
    letter-spacing: 0.3em;
  /*background: #fff;*/
 /*box-shadow: inset 1px 1px 2px #800000;*/
  /*font-size: 1em; 
    font-weight: bold;
    color:rgb(245, 134, 26);*/
   /*text-align: center;*/
    
}


/*---------------------
    ボタンクリック時の
    レイヤー
----------------------- */
/*cubrir toda la pagina al desplegar el menu*/
/*.layer {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: grey;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
  opacity: 0.5;
}*/

/*---------------------
    mobile
----------------------- */
@media screen and (max-width: 480px) {
  #menuu {
    padding: 5%;
  }
  #menuu li {
    width: 100%;
  }
  #menuu li a {
    border-top: none;
  }
  #menuu li a:hover {
    margin-top: -1px;
  }
  #menuu li:first-child a {
    border-top: solid 1px #333;
  }
  #menuu li:first-child a:hover {
    margin-top: 0;
    border-top: solid 1px rgb(245, 134, 26);
  }
}