body{
    margin: 0 ;
    padding: 0 ;
    font-family: sans-serif;



text-align:center;
font-weight:300;
font-family: sans-serif;
font-style:oblique;




}
main {
  text-align:left;

}

 h2,h1{
  text-align:center;
}


/*
slideshow*/
.slideshow{
    max-width: 930px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
  top:32px;
  left:0;


    }
    .slideshow img{
        vertical-align: middle;
        border-style:none;
    }
    .paginacion{
        color:#fff!important;
        margin-top: 16px!important;
        margin-bottom: 16px!important;
        text-align: center!important;

        font-size: 38px!important;
        padding: 0.01em 16px;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%,0%);


    }
    .izquierda{
        float: left!important;
        box-sizing: inherit;


    }
    .derecha{
        float: right!important;
        box-sizing: inherit;

    }
    .pestaña{
        border: 1px solid #ccc!important;
        border-radius: 50%;
        color: #fff;
        display: inline-block;
        text-align: center;

    }
    .izquierda:hover, .derecha:hover, .pestaña:hover{
        background-color: rgba(0, 0, 0, 0.5)!important;
    }
    .paginacion::selection, .izquierda::selection, .derecha::selection, .pestaña::selection{
        display: none;
    }
    .pestaña-resalte,.pestaña-resalte:hover{color:#000!important;background-color:#fff!important}


main {
background-color: rgba(74, 208, 212, 0.5);
  border-radius: 15px;
position: relative;
margin: 50% auto 0;
width:80%;
  padding: 30px;


}

/*imagenes*/
.estilofoto{
width:75%;
display: block;
margin:auto;
}


.estilofoto:hover{
    border: 2px solid green;
    border-radius: 10px;
}

.descripcion{
text-align:center;
font-weight:600;
font-family: sans-serif;
font-style:oblique;
}


.insta{
  display: flex;
    justify-content: space-between;
        align-items:center;
    flex-direction: column;
}


/*contacto*/
form {
    width: 70%;
    margin: 0 auto;
    background-color: rgba(0, 148, 255, 0.5);
    padding: 10px 20px;
    box-sizing: border-box;

    border-radius: 20px;
     display: flex;
    justify-content: space-between;
        align-items:center;
    flex-direction: column;
    position: relative;
    margin-top: 25px;

}

input, textarea{
    width:100%;
    margin-bottom:20px;
    padding:5px;
    box-sizing:border-box;
}
textarea{
    min-height:100px;
    max-height:200px;
    max-width:100%;
}
#boton{
    background-color:#31384A;
    color:#fff;
    padding:10px;
    border:none;
}
#boton:hover{
    cursor:pointer;
}
@media (min-width:930px){
   body{
    background-image:url(planos.jpg);
    background-attachment: fixed;
    background-size:100vw 100vh;
    overflow-x: hidden;

   }


   /*
slideshow*/
  .slideshow{
position:absolute;
    top:0;
    left:0;
  }
/*etiqueta de barra lateral apagada*/
   label[for="abrir-cerrar"], .sidebar, #abrir-cerrar, #sidebar{
    visibility: hidden;
}
/*barra lateral apagada*/
#barra{
    visibility: hidden;
}
/*cabecera*/
#main-header {
	background-color: rgba(51,51,51,0.8);
	color: white;
    height: 80px;
    z-index: 1;

}
	#main-header a {
		color: white;
	}

/*
 * Logo
 */
#logo-header {
	float: left;
	padding: 15px 0 0 20px;
	text-decoration: none;
}
	#logo-header:hover {
		color: #0b76a6;
	}

	#logo-header .site-name {
		display: block;
		font-weight: 700;
		font-size: 1.2em;
	}

	#logo-header .site-desc {
		display: block;
		font-weight: 300;
		font-size: 0.8em;
		color: #999;
	}


/*
 * Navegación
 */
nav {
    float: right;

}
	nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
		padding-right: 20px;
	}

		nav ul li {
			display: inline-block;
			line-height: 80px;
		}

			nav ul li a {
				display: block;
				padding: 0 10px;
				text-decoration: none;
			}

				nav ul li a:hover {
					background: #0b76a6;

                }

#main-header {
width: 100%; /* hacemos que la cabecera ocupe el ancho completo de la página */
left: 0; /* Posicionamos la cabecera al lado izquierdo */
top: 0; /* Posicionamos la cabecera pegada arriba */
position: fixed; /* Hacemos que la cabecera tenga una posición fija */

}
/*pie de pagina pantalla grande*/

  .piegrande{
    margin-top:5%;
    color: LightBlue;

 font-size: 20px;
background-color: rgb(56,98,122);
position:absolute;
  width:100%;
  height:10%;
    text-decoration:none;


 padding: 1%  0  0 1%;
display: block;





  }





  .piepequeña{
visibility:hidden;




  }




}

@media (max-width:930px){
    body{
        background-color: rgb(82,76,64);

    }
    /*slideshow*/

    /*cabecera apagada*/
    #main-header  {
          visibility: hidden;
      }
      input#abrir-cerrar {
        visibility: hidden;
        position: absolute;
        top: -9999px;
    }

    /*barra lateral*/
    #barra{
        width:100%;
        display: flex;
    justify-content:center;
    align-content: center;
    flex-direction: row;
        position: fixed;
        top:0%;
        left:0%;
        z-index: 1;


    }
    label[for="abrir-cerrar"] {
        cursor: pointer;
        padding: 1.25rem;
        background-color: #333;
        color: #fff;
        display: inline-block;
        width: 100%;

    }

    .cerrar {
        display: none;
    }

    #sidebar {
        width:0;

    }

    #contenido {
        margin-left: 0;
    }

    input#abrir-cerrar:checked ~ #sidebar {
        width: 60%;
        padding: 1rem;
    }

   input#abrir-cerrar:checked + #barra,input#abrir-cerrar:checked + label[for="abrir-cerrar"], input#abrir-cerrar:checked ~ #contenido {
        margin-left: 60%;
        transition: margin-left .4s;
    }


        input#abrir-cerrar:checked + label[for="abrir-cerrar"] .cerrar {
            display: inline;
        }

        input#abrir-cerrar:checked + label[for="abrir-cerrar"] .abrir {
            display: none;
        }

    .sidebar {

        position: fixed;
        height: 100%;
        width: 0;
        top: 0;
        left:0;
        z-index: 1;
        background-color: rgba(25,116,169,0.8);
        overflow-x:hidden;
        transition: 0.4s;
        padding: 1rem auto;
        box-sizing: border-box;
    }

        .sidebar .boton-cerrar {
            position: absolute;
            top: 0.5rem;
            right: 1rem;
            font-size: 2rem;
            display: block;
            padding: 0;
            line-height: 1.5rem;
            margin: 0;
            height: 32px;
            width: 32px;
            text-align: center;

        }

        .sidebar ul, .sidebar li {
            margin: 0;
            padding: 0;
            list-style: none inside;

        }


        .sidebar li {
            border-bottom: outset;
            border-bottom-color:darkcyan;
            width:100%;

        }

            .sidebar li:last-child {
                border-bottom: none;
            }

        .sidebar ul {
            margin: 4rem auto;
            display: block;


             display: flex;
            flex-wrap: wrap;
        }

        .sidebar a {
            display: block;
            font-size: 100%;
            color: #eee;
            text-decoration: none;

        }

            .sidebar a:hover {
                color: #fff;
                background-color: #2A584B;
            }

    .navm li span{
        padding-right: 5px;
    }


  /*pie de pagina pantalla pequeña*/
 .piepequeña{

   margin-top:5%;
    color: LightBlue;

 font-size: 20px;
background-color: rgb(56,98,122);
position:absolute;
  width:100%;
  height:10%;
    text-decoration:none;


 padding: 1%  0  0 1%;
display: block;








}





  .piegrande{
visibility:hidden;




  }












  }