@charset "UTF-8";
/* CSS Document */
@font-face {
	font-family: "Galette";
	src: local("Galette"), url("../assets/stylesheets/fonts/galette-med.otf") format("opentype");
	font-display: swap;
  }
  :root {
	--tipo-principal: Galette, sans-serif;
	--tipo-secundaria: Galette, serif;
	--color-general:#51aaea;
	letter-spacing: 0.13em;
  }

*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	list-style: none;
}

html{
	scroll-behavior: smooth;
}

body {
	font-family: var(--tipo-principal);
 }
#contenedor__contacto{
	background-image: url(../imaganes/about-contact.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	background-attachment: fixed;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
#menus{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	position: fixed;
}

#barras{
	width: 30%;
    text-align: center;
    padding: 30px 0px;
}

#logo{
	width: 40%;
}

#redes{
	width: 30%;
    display: flex;
    text-align: center;
    padding: 30px 8px;
}
.redes__col{
	flex: 1;
}
#menus a{
	padding: 11px;
}
#menus li ul{
	display: none;
	position: absolute;
	min-width: 140px;
}
#menus li:hover > ul{
	display: flex;
	width: 100%;
	
}
#menus li ul li{
	position: relative;
	display: inline-flex;
}

#menus li ul li lu{
	right: 10px;
	top: 0px;
}
#gallery-portfolio{
	padding: 0px;
	left: 220px;
}
#gallery-portfolio a{
	margin: 0px;
	font-size: 12px;
}

#abajo{
	margin: 10px;
	padding: 45px;
	position: fixed;
	bottom: -85px;
	right: 465px;
	cursor: pointer;
}

.bton-cerrar{
	z-index: 100;
}

.modal{
	z-index: 100;
}
li {
	display: inline;
}

a{
	color: #51aaea;
	font-size: 12px;
	text-decoration: none;
	text-decoration-color: white;
}

h1{
	font-family: "Galette";
	font-size: 20px;
	color: #78bbf3;
}
#UBICACION h1 a{
	font-size: 19px;
}

.datacontact{
    max-width: 800px;
    width: 100%;
    display: flex;
    gap: 50px;
    margin: 0px auto;
	padding-top: 100px;
	
}
.datacontact__message{
	color: var(--color-general);
    font-size: 18px;
    font-weight: 600;
}
.datacontact__col01 {
    display: flex;
    width: 50%;
    justify-content: center;
    align-items: center;
}
.datacontact__col02 {
    width: 50%;
}
.datacontact__ul {
	display: inline-grid;
    color: var(--color-general);
    font-size: 18px;
    font-weight: 600;
}
.datacontact__ul li {
    padding-bottom: 13px;
}
.responsive__content{
	display: none;
}
.responsive__menu{
	display: none;
}
/* xl */
@media (max-width: 1280px) {
	#contenedor__contacto{
		background-image: none;
	}
	#contenedor__contacto main{
		background-image: url(../imaganes/about-contact.jpg);
		height: 56vw;
		background-repeat: no-repeat;
		background-size: cover;
	}
	header {
		height: 138px;
		
	}
	.datacontact {
		margin: 0px auto;
		padding-top: 42px;
	}
	#contenedor{
		height: 56vw;
	}
	.header__poppup{
		display: none;
	}
	#menus{
		display: none;
	}
	.responsive__logo img {
        width: 100%;
    }
	.responsive__menu{
		width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        position: fixed;
        background-color: #fff;
		z-index: 1;
		
	}
	.responsive__content{
		display: block;
		position: relative;
	}
	#responsive__slider ul li img {
		width: 100%;
	}
	.responsive__menu input[type=checkbox]:checked + label + .responsive__barras {
		display: block ;
	  }
	.responsive__barras {
		display: none;
		width: 50%;
		text-align: center;
	}

	.responsive__barras li{
		display: block;
	}

	.responsive__menu .navicon {
		margin-top: 20px;
		padding: 10px 6px;
		width: 38px;
		height: 38px;
		float: right;
		cursor: pointer;
	  }
	  .responsive__menu .navicon .bar {
		height: 3px;
		display: block;
		background: var(--color-general);
		margin-bottom: 5px;
		border-radius: 5px;
	  }
	  .responsive__menu .navicon .bar:last-child {
		margin-bottom: 0px;
	  }
	.responsive__menu  input[type=checkbox] {
		display: none;
	  }
  }
  /* lg */
/* lg */
@media (max-width: 1024px) {
	.datacontact {
		width: 50%;
	}
	.datacontact__ul {
		font-size: 12px;
	}
  }
@media (max-width: 768px) {
	header {
        height: 115px;
    }
	.datacontact {
		width: 100%;
        padding: 50px;
        flex-direction: column;
        text-align: center;
        background-size: cover;
    }
	.datacontact__col01 {
		width: 100%;
	}
	.datacontact__col02 {
		width: 100%;
	}
	#contenedor__contacto main{
		height: auto;
	}
	.datacontact__message {
		font-size: 16px;
	}
	
  }
  @media (max-width: 475px) {

	
  }