/*
Theme Name: Sensation du temps theme
Theme URI: http://lab51.cl
Description: Sensation du temps wordpress theme
Author: Lab51
Author URI: http://lab51.cl
Version: 1.0
*/

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/


/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
body {font: 13px Helmet, Freesans, sans-serif;}

/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */

/* We like off-black for text. */
body, select, input, textarea {color: #333;}

a {color: #03f;}
a:hover {color: #69f;}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;}

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }


/* And here begins the WordPress fun.
-------------------------------------------------------------------------------*/

#wrapper {
	width: 100%;
	padding: 0 10px;
}


/* Print styles!
-------------------------------------------------------------------------------*/
@media print {

}


/* Media queries!
-------------------------------------------------------------------------------*/

/* Always do mobile-first, and consider using em units: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw

@media screen and (min-width: 480px) {

} */

/* Header */



header {
	width: 100%;
	display: block;
	padding: 30px 20px;
	margin: 0;
	position: sticky;
	z-index: 1;
	transition: .3s;
	top: 0;
	background: #fff;
	z-index: 9;
}

header .menu-menu-1-container,
header .menu-menu-2-container {
	display: flex;
	align-items: center;
}

header.fixed {
	padding: 20px 20px;
	left: 0;
	top: 0;
}

header.fixed .row ul.menu li a {
	color: var(--black);
}

header .header-row {
	width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 270px 1fr 1fr;
	gap: 30px;
}

header .header-row .menu {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

header .header-row .menu ul {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0;
	margin: 0;
}

header .header-row .menu-menu-2-container .menu ul {
	justify-content: flex-end;
	width: 100%;
}

header .header-row .menu li a {
	padding: 20px;
	text-align: center;
	display: inline-flex;
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	color: #000000;
	white-space: nowrap;
	justify-content: center;
	align-items: center;
	width: auto;
	transition: var(--linear);
	transition: .3s;
}

header .header-row .menu li a:hover {
	color: #707070;
}

header .header-row .menu li a.btn {
	padding: 10px 40px;
	font-weight: 700;
	margin: 0 0 0 50px;
	width: 180px;
}

header .header-row .menu li a.btn {
	color: var(--blanco);
}


header .header-row .menu-menu-2-container ul.menu li:last-child {
	position: relative;
}

header .header-row .menu-menu-2-container ul.menu li:last-child .sub-menu {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: 100%;
	right: 0;
	padding: 7px 0 0;
	transition: .3s;
}

header .header-row .menu-menu-2-container ul.menu li:last-child:hover .sub-menu {
	visibility: visible;
	opacity: 1;

}

header .header-row .menu-menu-2-container ul.menu li:last-child:hover .sub-menu li a {
	background: var(--white);
	color: var(--red);
	margin: 7px 0;
	width: 180px;
}

header .header-row .logo {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
	transition: .3s;
  position: relative;
  top: -7px;
}

header.fixed .row .logo {
	width: 80%;
}


header .header-row .show-menu {
	width: 22px;
	height: 16px;
} 

header .header-row .show-menu i {
	background-image: url(../css/burger-menu.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: 100%;
	height: 100%;
	display: block;
}

header.fixed .row .show-menu i {
	filter: invert(1);
}

#menu-wp ul li {
  position: relative;
}

#menu-wp ul li ul {
  display: none;
  position: absolute; 
  background-color: #fff; 
  box-shadow: 0 2px 3px rgba(0,0,0,0.2);
  top: 100%; 
  left: 0;
  z-index: 1000;
}

#menu-wp ul li:hover > ul {
  display: block;
}

#menu-wp ul li ul li {
  padding: 5px 10px; 
}




.nav-mobile {
	position: fixed;
	top: 0;
	left: -150%;
	z-index: 1000;
	padding: 30px;
	background: #fff;
	box-shadow: 0vw 0vw 0vw 300vw rgb(0 0 0 / 27%);
	max-width: 700px;
  height: 100vh;
  overflow: scroll;
	width: 60%;
	opacity: 0;
	visibility: hidden;
	transition: all 0.25s ease-out;
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	-ms-transition: all 0.25s ease-out;
}

.nav-mobile.show {
	left: 0;
	opacity: 1;
	visibility: visible;
}

.nav-mobile .close {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 27px;
	font-weight: 400;
	transform: rotate(45deg);
	color: #000;
}

.nav-mobile h3 {
	margin: 0 0 15px;
}

.nav-mobile ul {
	padding: 0;
	margin: 0;
}

.nav-mobile ul li a {
	padding: 10px 0;
	font-size: var(--f15);
	font-weight: 500;
	color: var(--black);
	display: inline-block;
}

.nav-mobile .menu-menu-1-container,
.nav-mobile .menu-menu-2-container {
	display: block;
}

.btn-mobile-menu {
	display: none;
}

.nav-mov-custom {
	display: none;
}

.container-icons {
	position: relative;
  display: flex;
  align-items: center;
}

.container-icons ul {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 30px;
  margin: 0;
}

.container-icons ul li img {
	width: 140px;
	height: auto;
	display: block;
}

.nav-absolute {
	position: absolute;
	top: -5px;
	right: 170px;
} 

.nav-absolute a {
	text-decoration: none;
	color: #000;
	font-size: 10px;
}

@media only screen and (max-width: 830px) {
	header {
		padding: 10px 0;
	}
	header.fixed {
		padding: 5px 0;
	}
	header .header-row {
		display: flex;
		align-items: center;
		padding: 0 20px;
		gap: 10px;
		justify-content: space-between;
	}

	header .header-row .logo {
		width: 200px;
		height: auto;
	}
	header .header-row .menu {
		display: none;
	}

	header .header-row .container-icons ul {
		gap: 10px;
	}

	header .header-row .container-icons ul li.li-img {
		display: none;
	}

	.btn-mobile-menu {
		display: block;
		font-size: var(--f12);
		padding: 10px 20px;
	}

	header .menu-menu-1-container,
	header .menu-menu-2-container {
		display: none;
	}

	.nav-mobile .menu-menu-1-container,
	.nav-mobile .menu-menu-2-container {
		display: block;
	}

	header .nav-mobile ul.menu {
		display: block;
	}

	header .header-row ul.menu li a {
		color: var(--color);
		padding: 15px 0;
	}
	header .header-row ul.menu li a.btn {
		margin: 0;
	}

	header .header-row .menu-menu-2-container ul.menu li:last-child .sub-menu {
		position: relative;
		visibility: visible;
		opacity: 1;
	}

	header .header-row .menu-menu-2-container ul.menu li:last-child .sub-menu li {
		padding: 0 0 7px;
	}

	.nav-mov-custom {
		display: block;
	}

	.nav-mov-custom .menu-menu-2-container,
	header .header-row .nav-mov-custom ul.menu {
		display: inline-flex;
	}

	header .header-row .nav-mov-custom ul.menu li {
		display: none;
	}

	header .header-row .nav-mov-custom ul.menu .menu-item-has-children {
		display: block;
	}

	header .header-row .nav-mov-custom ul.menu .menu-item-has-children .btn {
		padding: 10px 20px;
		width: auto !important;
		font-size: 12px;
	}

	header .header-row .nav-mobile .menu-menu-2-container li:last-child .btn:nth-child(1) {
		display: none;
	}

	header .header-row .nav-mobile .menu-menu-2-container li:last-child .sub-menu li .btn {
		display: inline-flex;
	}

	.nav-mobile .menu {
		display:  block !important;
	}

	header .header-row .menu ul {
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
	}

	header .header-row .menu li a {
		padding: 10px 0;
		font-size: 12px;
	}

	.nav-absolute {
		position: relative;
		top: 0;
		right: 0;
		padding: 0 0 20px !important;
	} 

	.nav-absolute a {
		font-size: 10px !important;
	}

	.container-icons .nav-absolute {
		display: none;
	}
	
}

/* Footer */

footer {
	width: calc(100% + 10px);
	position: relative;
	left: -10px;
	background: #13295F;
	color: #fff;
	padding: 65px 10px 0;
}

footer .container-footer .grid-item {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5%;
	padding: 0 55px;
}

footer .container-footer .grid-item h5 {
	color: #fff;
	font-size: 15px;
	text-transform: uppercase;
	margin: 0 0 10px;
}

footer .container-footer .grid-item li {
	margin: 0 0 15px;
}

footer .container-footer .grid-item p,
footer .container-footer .grid-item a {
	font-size: 15px;
	color: #fff;
	text-decoration: none;
}

footer .container-footer .grid-item .list-rrss {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 5px 0;
}

footer .footer-bottom {
	width: 100%;
	border-top: solid 1px #fff;
	margin: 50px 0 0;
	padding: 20px 85px 30px;
}

footer .footer-bottom a {
	color: #fff;
	text-decoration: none;
}

.solo-desktop {
	display: block;
}

.solo-mobile {
	display: none;
}

@media screen and (max-width: 750px) {
	.solo-desktop {
		display: none;
	}
	
	.solo-mobile {
		display: block;
	}

	footer .container-footer .grid-item {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		padding: 0 20px;
	}
	footer .container-footer .grid-item li {
		margin: 0 0 5px;
	}
	footer .container-footer .grid-item p, 
	footer .container-footer .grid-item a {
		font-size: 10px;
	}
	footer .footer-bottom {
		margin: 80px 0 0;
		padding: 20px 15px 30px;
	}
	footer .footer-bottom p {
		font-size: 12px;
	}
}

.code-iframe {
	width: 100%;
}

html {
	margin: 0;
	padding: 0;
}

#wpadminbar {
	display: none !important;
}

#whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 1em;
  z-index: 100;
}

#whatsapp .form {
  display: block;
  position: absolute;
  bottom: -270px;
  right: 0;
  width: 300px;
  background: #fff;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.125s ease-out;
  -webkit-transition: all 0.125s ease-out;
  -moz-transition: all 0.125s ease-out;
  -ms-transition: all 0.125s ease-out;
}

#whatsapp .form.show {
  opacity: 1;
  visibility: visible;
  bottom: 70px;
}

#whatsapp .form .cerrar {
  font-family: 'Gilroy', sans-serif;
  color: #fff;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  cursor: pointer;
}

#whatsapp .form .cerrar span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
}

#whatsapp .form .cerrar span:after {
  content: '';
  display: block;
  width: 8px;
  height: 1px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

#whatsapp .form .cerrar span:before {
  content: '';
  display: block;
  width: 8px;
  height: 1px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

#whatsapp .form p {
  font-size: 12px;
  font-family: 'Gilroy', sans-serif;
  padding-bottom: 15px;
  line-height: 1.5em;
}

#whatsapp .form input {
  width: 100%;
  float: left;
  margin-bottom: 10px;
  padding: 0 10px;
  border: 1px solid rgba(0,0,0,0.4);
  background-color: transparent;
  font-family: 'Gilroy', sans-serif;
  color: #333;
  font-size: 14px;
  line-height: 13px;
  font-weight: 500;
  display: block;
  height: 38px;
  padding: 8px 12px;
  outline: none;
}


#whatsapp .form textarea {
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
  padding: 0 10px;
  border: 1px solid rgba(0,0,0,0.4);
  background-color: transparent;
  font-family: 'Gilroy', sans-serif;
  color: #333;
  font-size: 14px;
  line-height: 13px;
  font-weight: 500;
  display: block;
  padding: 12px 12px;
  outline: none;
}

#whatsapp .form input[type="submit"] {
  width: 100%;
  margin: 0 !important;
  border: 1px solid #000;
  background-color: #000;
  color: #f2eee6;
}

#whatsapp .form input[type="submit"]:hover {

}

#whatsapp .icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #13295f;
  background-size: 50%;
  border-radius: 50%;

}

#whatsapp .icon svg {
  display: block;
  width: 26px;
  height: 26px;
}

#whatsapp .icon svg path {
  fill: #fff;
}

@media screen and (max-width: 749px) {
  #whatsapp .icon {
    zoom: 0.7;
  }
}