/* esto es para el encabezado */


 * {

    margin: 0;

    padding: 0;

    }

    /*body {


    } */

.wrapper{
	width:977px;
	height:1100px;
	margin-right: auto;
	margin-left: auto;
    background-color: #E6E6FA;
	box-shadow: 0px 0px 100px #666;
	@import url(http://fonts.googleapis.com/css?family=Righteous);
}

	#contenedor{

		box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
        width: 980px;

		height:150px;

		background-color: #f7c800;

		margin: 7em, 1em, 1em, 5em;

	}




		#texto{

		float: left;

		position: relative;

		width: 180px;

		margin-top: 10px;

		padding: 15px;

		font-weight: bold;

		text-align: center;

		background-color: tomato;

		margin-left: -50px;

		font-size: 14px;

		box-shadow: text-shadow: 78px 1px white, -1px -1px #333;

	}

 

	#forma{

		position: absolute;

		width: 0px;

		height: 0px;

		line-height: 0px;

		border-left: 20px solid transparent;

		border-top: 5px solid black;

		top: 100%;

		left: 0px;

	}

 

	#texto2{

		float: right;

		position: relative;

		width: 250px;

		margin-top: 1%;

		padding: 5px;

		font-weight: bold;

		text-align: center;

		background-color: teal;

		margin-right: -35px;

		font-size: 11px;

		color: white;

		box-shadow: text-shadow: 0 0 0.9em #87F, 0 0 0.9em #87F,
        0 0 0.2em #87F;

	}

 

	#forma2{

		position: absolute;

		width: 0px;

		height: 0px;

		line-height: 0px;

		border-right: 20px solid transparent;

		border-top: 10px solid black;

		top: 100%;

		right: 0px;

	}




/* esto es para el menú */

			
            #nav



            {

                background-color: #990066 ;
                /*background: rgba(71, 86, 125, 0.9); */
				box-shadow: 17px 7px 7px grey;
				
				margin: 0 auto;
                
                /*margin: 1.5em; */
				padding: 1.5em 0 0 0; 
                position: relative;

                top: 1.5em; 

                font-family: 'Indie Flower', cursive;

                left: 0.1em;*/

                width: 100%; 

            }

 

            #nav  ul  li


            {


                display: inline-block;

                margin: 0 auto;
                padding: 0 auto;
                /*top: 0.5; */
                padding-left: 2em;

                padding-right: 1.5em; 
                padding-bottom: 1em

            }

 

            #nav ul  li  a

            {

                display: block;

                text-decoration: none;

                text-transform: uppercase;

                font-weight: 800;

                color: #5F9EA0;

                outline: 0;

                -moz-transition:all 0.7s ease;

                transition:all 0.7s ease;

                -webkit-transition:all 0.7s ease;

            }

 

            #nav  ul li.active  a ,

            #nav ul  li:hover  a

            {

                color:#EEE8AA;

                -moz-transform: rotate(360deg);

                -ms-transform: rotate(360deg);

                transform: rotate(360deg);

                -webkit-transform: rotate(360deg);

            }

 

                

            

/* slider */
#content
{
    
	padding: 4.5em 1em 1em 5em;


    
   
}


/* tabs */

#tabs {
  overflow: auto;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 2em 1em 1em 6em;

}

#tabs li {
    margin: 0;
    padding: 0;
    float: left;
}

#tabs a {
    box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    background: #ad1c1c;
    background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    color: #fff;
    float: left;
    font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
    height: 35px;
    padding: 0 30px;
    text-decoration: none;
}

#tabs a:hover {
    background: #c93434;
    background: linear-gradient(220deg, transparent 10px, #c93434 10px);     
}

#tabs a:focus {
    outline: 0;
}

#tabs #current a {
    background: #fff;
    background: linear-gradient(220deg, transparent 10px, #fff 10px);
    text-shadow: none;    
    color: #333;
}

#content2 {
    /*background-color: #D1D5F5; */
    background-image:         linear-gradient(top, #fff, #ddd);
    border-radius: 0 2px 2px 2px;
    box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    padding: 30px;
}

/* Remove the rule below if you want the content to be "organic" */
#content2 div {
    height: 220px; 
    padding: 2em 1em 1em 7em;
}



/*estilos de menu acordeon */


#menu3{
    margin: 0 auto;
    padding:0.5em;
    list-style:none; 
    width:800px;
    font-size:18px;
    background:#c1c1c1;
    /* position: relative; */ 
    /*border: 1px solid rgba(0,0,0,0.8); */
}
 
#menu3 li a{
    display: block;
    border-bottom: 1px solid rgba(0,0,0, 0.2);
    border-top: 1px solid rgba(255,255,255, 0.2);
    background:#3e3f44;
    text-decoration:none;
    color:#FFF;
    text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
    filter: dropshadow(color=#000, offx=1, offy=0);
    padding:10px, 10px, 10px, 50px;
    
    /*padding-left:20px;*/
}
 
#menu3 li ul li a{
    font-size:14px;
    color:#47689d;
    text-shadow: 1px 0px 1px rgba(255,255,255,0.5);
    
}
 
#menu3 li a:hover{
    background:#4a6ba2;
    -moz-transition: background 0.3s ease-in;
    -webkit-transition: background 0.3s ease-in;
    -o-transition: background 0.3s ease-in;
}
 
#menu3 ul{
    margin:0;
    padding:0;
    list-style:none;
    height:0;
    overflow: hidden;
    transition:1s;
    -moz-transition:1s;
    -webkit-transition:1s;
}
 
#menu3 li:hover ul{
    height:120px;
    overflow-y:auto;
    overflow-x:hidden;
}
 
#menu3 ul li a{
    background:#fafafa;
}
 
#menu3 ul li a:hover {
    background: none repeat scroll 0 0 #ccc;
    color: #fff;
    -moz-transition: color 0.4s ease;
    -webkit-transition: color 0.4s ease;
    -o-transition: color 0.4s ease;
}


/* fin estilos menu acordeon */




/*publicidad */

#publicidad
{
    margin-left: -200px;
    position: absolute;
}


/*responsive */



@media screen and (max-width: 600px){


 .wrapper   { 
   /* set the height of the element which contains what you want to center */ 
   height :   100 % ; 
   /* these styles are optional, to set width horizontally center the page */ 
   max-width :   500px ; 
   margin :   0   auto ; 
 } 

 .wrapper:before,   .container{ 
   /* these are the important styles for the centered element: */ 
   display :   inline - block ; 
   vertical-align :   middle ; 
 } 
 .wrapper:before{ 
   /* this is the important part */ 
   content :   '' ; 
   display :   inline - block ; 
   width :   0 ; 
   height :   100 % ; 
   vertical-align :   middle ; 
   /* this just takes care of whitespace added by having display:inline-block (there are other methods) */ 
   margin - left :   - 0.25em ; 
 } 


#contenedor{
    width: 100%;
}

#content {
    display: none;
}

/*
#contenedor{
    display: none;
}
*/

#menu3 {
    
    padding-top: 2.5em;
    margin: 0em 4em 0em 0em;
    width: 97%;
}

#tabs {
    padding: 1em 1em 1em 1em;
}

}