@charset "utf-8";
/* CSS Document */

/*
 *Styling
 */
#info li:hover {
	color: #e98b89;
	
}
#find li:hover {
	color: #86b8cd;
	
}
#sticker li:hover {
	color: #1c644d;
	
}
#contact li:hover {
	color: #E18824;
	
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Fira Sans', sans-serif;	
}
h2 {
	
	font-size: 1.5em;
	margin: 20px auto -10px auto;
	
	
	
}
h3 {
	font-size: .75em;
	font-weight: 300;
	color: white;
	background: black;
	max-width: 50%;
	margin: 15px auto 0 ;
}
h4 {
	font-size: 2em;
	margin: -40px 0 60px 30px;
}
html,body {
    width: 100%;
    height: 100%;
    position: relative;
	margin: 0px;
	padding: 0px;
	scroll-behavior: smooth;
}
body {
overflow-x: hidden;
min-height: 1600px;
	width: 100%;
}
#main {
	width: 100%;
	height: 100%;
	
}


.content p {
	margin: 20px 30px 50px 30px;
	font-size: 1.5em;
	line-height: 1.25em;
	text-align: justify;
	font-weight: 200;
}

header { 
position: fixed; 
left: 0;
top: 0; 
width:100%;
height: 3.5rem;
z-index: 2;
font-size: 1.25em;

}

iframe {
	width: 90%;
	min-height: 500px;
	max-height: 900px;
	margin:20px 5% 60px;
	border: black solid 5px;
	
}

.footer {
	height: 150px;
	width: 100%;
	
	position:absolute;
	margin: 0px;

	background: white;
	
	
	
	
}
.footer img {
	
	transition: transform .25s;
}
.footer img:hover {
	transform: scale(1.1);
	
	
}
.inner_foot {
	width: 80%;
	height: 100%;
	margin: 0 auto;
	
}
.foot_left {
	float: left;
	width: 50%;
	text-align: center;
	
	
}

.foot_right {
	float: right;
	border: 1px solid #8A8A8A;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-right-style: none;
	border-top-style: none;
	border-bottom-style: none;
	width: 50%;
	height: 80%;
	margin-top: 15px;
	text-align: left;
	text-align: center;

	
}
.foot_right h2 {animation: float 3s infinite;}
.foot_right li {
	padding: 0 0 0 0;
	 
line-height: 1.5;
font-family: 'Fira Sans', sans-serif;
font-weight: 500;
	letter-spacing: .1em;
	-webkit-transition: color .2s; /* Safari */
    transition: color .2s;
	list-style: none;
	margin-left: -40px;
	
	
}
.foot_left li {
	padding: 0 0 0 0;
	 
line-height: 0;
font-family: 'Fira Sans', sans-serif;
font-weight: 500;
	letter-spacing: .05em;
	list-style: none;
	margin-left: -40px;
	
	
}
.foot_right li:hover {
	color: #3E3E3E;
	cursor: pointer;
	text-decoration: underline;
	
}
nav {
width: ;
padding: 10px;
text-align: left;
margin: 65px 0 0 140px;
}

nav ul {
list-style: none;
width: inherit; 
margin: 0;
}

.nav ul li {
display: inline-block; 
margin: 0 8px;
margin: 0 0.5rem;
padding: 5px 8px;
padding: 0.3rem 0.5rem;
border-radius: 2px; 
line-height: 1.5;
font-family: 'Fira Sans', sans-serif;
font-weight: 500;
	letter-spacing: .1em;
	-webkit-transition: color .2s; /* Safari */
    transition: color .2s;
}

ul li a {
color:#000000;
text-decoration: none;
}

li:hover {

}

a:visited {
	color: #000000;
}
a:link {
	
	color: #000000;
}
a:active {
	
	color: red;
}

.panel {
width: 100%;
min-height: 100%;
z-index:0; 
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
font-family: 'Niramit', sans-serif;
		overflow-y: hidden;



}
.pan1 {
	background:url(background_1.jpg) hsla(0,97%,73%,.5);
	background-blend-mode: multiply;
	 background-repeat: no-repeat;
    background-size: cover;
	
	
	
	
}
.pan2 {
	left: 100%;
	background:url(background_2.jpg) hsla(190,55%,55%,.50);
	background-blend-mode: multiply;
	 background-repeat: no-repeat;
    background-size: cover;
	
	
}

.pan3 {
	left: 200%;
	background: url(background_4.jpg) hsla(161,56%,25%,0.50);
	background-blend-mode: multiply;
	 background-repeat: no-repeat;
    background-size: cover;
}

.pan4 {
	left: 300%;
	background: url(background_3.jpg) hsla(32,76%,51%,0.5);
	background-blend-mode: multiply;
	 background-repeat: no-repeat;
    background-size: cover;
}



#logo {
      width: 150px;
      height: 150px;
      background-color: #e98b89;
      border-radius: 50%;
	position: absolute;
	left: 2%;
	top: 5px;
	border: 8px solid white;
	transition: background-color 0.6s ease-in-out;
	
	
}
#float {
	width: 50px;
	height: 50px;
	background: hsla(287,60%,50%,1.00);
	
	
}


.content h1 {
font-size: 64px;
position:relative;
text-align: center;
	margin: 40px 20px;
	line-height: 1em;
	font-weight: 900;
}
.content {
	width: 80%;
	margin: 0 10% 20px;
	z-index: 3;
	background: hsla(0,0%,100%,1);

	overflow-x: hidden;
	
	
	
}
.first {
	margin-top: 200px;
	margin-bottom: 20px;
}
.nav {
	background:#FFFFFF;
	height: 130px;
}
.baby_nav {
	position: absolute;
	left: 50%;
	margin-left: -40%;
	width: 80%;
	
	
	
	
	
}
.content_img {
  width: 45.5%;
  object-fit: cover;
}

.cover {
    object-fit: cover;
}

#info {
}
/*
 *Scrolling
 */

a[ id= "servicios" ]:target ~ #main article.panel {
-webkit-transform: translateX( 0px);
transform: translateX( 0px );
}

a[ id= "galeria" ]:target ~ #main article.panel {
-webkit-transform: translateX( -100% );
transform: translateX( -100% );
}
a[ id= "contacto" ]:target ~ #main article.panel {
-webkit-transform: translateX( -200% );
transform: translateX( -200% );
}

a[ id= "page" ]:target ~ #main article.panel {
-webkit-transform: translateX( -300%);
transform: translateX(-300% );
}

@media only screen and (min-width: 1500px) {
    .baby_nav {
	position: absolute;
	left: 50%;
	margin-left: -600px;
	width: 1200px;
    }
	
	.content {
	width: 1200px;
	background:white;
	margin: 0 auto 20px ;
	z-index: 3;
	}
	.first {
		margin-top: 200px;
	}
	.inner_foot {
	width: 1200px;
	
	position:relative;
	margin: 0 auto 0;
	
	
	
	
}
}

@keyframes float {
	0%, 100% {
		transform:translateY(5px);
		animation-timing-function: ease-in-out;
		
		
	}
	
	
	50% {
		
		transform:translateY(-10px);
		animation-timing-function: ease-in-out;
	}
	
	
	
}


::-webkit-scrollbar {
  width: 10px;
	z-index: 0;
	background: black;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
	z-index: 0;
}
::-webkit-scrollbar-thumb {
  background: black;
  border: 0px none ;
  border-radius: 0px;
	width: 10px;
	z-index: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: black;
}
::-webkit-scrollbar-thumb:active {
  background: ;
}
::-webkit-scrollbar-track {
  background: white;
  border: 0px none ;
  border-radius: 0px;
	z-index: 0;
}
::-webkit-scrollbar-track:hover {
  background: ;
}
::-webkit-scrollbar-track:active {
  background: ;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

.gallery {
	margin: 20px auto; padding: 0; border: 0; font: inherit; box-sizing: border-box;
	
	
}

#gallery_body { ; background:hsla(0,0%,0%,0.00);  }

label[for] { cursor: pointer; }
input[type='checkbox'] { display: none; }

.lightbox, .grid { width: 100%; top: 0; left: 0; }

.lightbox {
	position: fixed;
z-index: 4;
min-height: 100%;
overflow: auto;
transform: scale(0);
transition: transform .5s ease-out;
}

.lightbox img {
position: fixed;
top: 50%;
left: 50%;
max-width: 80%;
max-height: 80%;
transform: translate(-50%, -50%);

}

input[type='checkbox']:checked + .lightbox { transform: scale(1); }
input[type='checkbox']:checked ~ .grid { opacity: 1; }

.grid { 
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
height: 100%;
padding: 0px;
overflow: auto;
z-index: 0;
background: none;
text-align: center;
transition: opacity 0.75s;
}
.grid .grid-item {
display: block;
width: 25%;
padding: 0px;
opacity: 0.75;
transition: opacity 0.5s;
	overflow: hidden;
}

.grid .grid-item:hover { opacity: 1; }

@media screen and (max-width: 1280px) { .grid .grid-item { width: 33.3333%; } }
@media screen and (max-width: 960px)  { .grid .grid-item { width: 50%; height: 200px; } }
@media screen and (max-width: 480px)  { .grid .grid-item { width: 100%; height: 100px; } }

.grid img { max-width: 100%; max-height: 100%; }