@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Playfair+Display:wght@400;500;600;700&display=swap");
@import 'variables' ;
* {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 16px;
}
body {
background-color: var(--dark);
font-family: "Lato", sans-serif;
line-height: 36px;
font-size: 16px;
color: var(--dark);
}
.bodyInside{
background-color: var(--primary-light);
font-family: "Lato", sans-serif;
line-height: 36px;
font-size: 16px;
color: var(--dark);
}
a {
text-decoration: none;
transition: color 0.2s ease-in;
color: var(--dark);
}
a:hover {
color: var(--primary) !important;
}
ul {
list-style: none;
}
.bodyNavIsOpen {
height: 100%;
overflow: hidden;
}
button:active,
button:focus {
outline: none;
border: 0;
}
img {
display: block;
width: 100%;
height: auto;
} .hero {
background-image: url(//www.peluqueriashock.com/wp-content/themes/shock/assets/img/heroMob.jpg);
background-size: cover;
position: relative;
z-index: 1;
height: 100vh;
min-height: 550px;
}
.hero::before {
background-color: var(--primary);
content: " ";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.6;
}
.hero__logo{
transition: all 0.2s ease-in;
}
.hero .inner {
position: relative;
height: 100%;
overflow: hidden;
}
.hero .inner .hero__logo {
width: 60%;
margin: auto;
padding-top: 6rem;
}
.hero .inner .hero__logo .hero__logo__link {
display: flex;
flex-direction: column;
align-items: center;
}
.hero .inner .hero__logo .hero__logo__link .hero__logo__src {
width: 100%;
}
.hero .inner .hero__logo .hero__logo__link .hero__logo__label {
color: var(--dark);
letter-spacing: 2px;
font-size: 20px;
margin-top: -10px;
}
.hero .fa-2x{
font-size: 2.3rem;
}
.telNumber{
display:none;
}
.nav-site-header{
display: none;
}
.hero .inner .hero__social {
position: absolute;
top: 1.5rem;
right: 65px;
}
.hero .inner .hero__social:not(.hero .site-header ) {
position: absolute;
top: 1.5rem;
right: 4.5rem;
}
.hero .inner .hero__social li .hero__social__link:not(.telephone) {
display: none;
}
.hero .inner li a {
color: var(--dark);
}
.hero.site-header .inner li a {
color: white;
}
.hero .inner li a:hover {
color: white ;
}
.hero.site-header .inner li a:hover {
color:var(--primary);
border-bottom: 1px solid (var(--primary-light));
}
.hero .inner li .hero__social__link {
margin-bottom: 9px;
}
.hero .inner li .hero__social__link.telephone,
.hero .inner li .hero__social__link.facebook {
border: 2px solid var(--dark);
border-radius: 50%;
padding: 1rem;
width: 2rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in;
}
.hero .inner li .hero__social__link.telephone:hover,
.hero .inner li .hero__social__link.facebook:hover {
border-color: white;
}
.hero .inner li .hero__social__link.instagram {
font-size: 2rem;
}
.hero .inner .hero__actions__button {
border: 0;
background-color: transparent;
color: var(--dark);
opacity: 1;
transition: all 0.6s ease-in;
cursor: pointer;
}
.hero .inner .hero__actions__button.opened {
opacity: 0;
}
.hero .inner .hero__actions__button:hover {
color: white;
}
.hero .inner .hero__actions {
position: absolute;
right: 1.5rem;
top: 1.5rem; 
z-index: 1;
}
.hero .hero__nav-wrapper {
position: absolute;
width: 100%;
height: 100%;
max-width: 500px;
top: 0;
background-image: url(//www.peluqueriashock.com/wp-content/themes/shock/assets/img/Flormenu.jpg);
background-position: -70px 0px;
background-size: cover;
z-index: 2;
display: block;
transform: translateX(600px);
right: 0;
transition: transform 1s ease-in-out;
}
.hero .hero__nav-wrapper.opened {
transform: none;
}
.hero .hero__nav-wrapper::before {
background-color: var(--primary);
content: " ";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.9;
}
.hero .hero__nav-wrapper .nav {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.hero .hero__nav-wrapper .nav__list {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.hero .hero__nav-wrapper .nav__list .nav__button-wrapper {
position: absolute;
right: 1.5rem;
top: 1.5rem;
}
.hero .hero__nav-wrapper .nav__list .nav__button-wrapper .nav__button {
color: white;
background-color: transparent;
border: 0;
transition: all 1s ease-out;
cursor: pointer;
}
.hero .hero__nav-wrapper .nav__list .nav__button-wrapper .nav__button:hover {
color: var(--dark);
}
.hero .hero__nav-wrapper .nav__list li {
display: inline-block;
margin-bottom: 20px;
}
.hero .hero__nav-wrapper .nav__list li a.nav__link {
font-family: "Playfair Display", serif;
color: white;
text-transform: uppercase;
font-size: 1.8rem;
position: relative;
padding-bottom: 7px;
letter-spacing: 1px;
}
.hero .hero__nav-wrapper .nav__list li a.nav__link:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background-color: white;
transition: width 0.7s ease 0s, left 0.7s ease 0s;
width: 0;
}
.hero .hero__nav-wrapper .nav__list li a.nav__link:hover {
color: var(--dark) !important;
}
.hero .hero__nav-wrapper .nav__list li a.nav__link:hover:after {
width: 100%;
left: 0;
}
.arrow-down {
margin-top: 5px;
opacity: 0.4;
font-size: 30px;
}
.site-header{
background-color: var(--dark);
min-height: 150px;
} .section {
width: 100%;
}
.section:not(:last-child){
margin-bottom: var(--section-margin-bottom);
}
.section__content {
margin: auto;
}
.section_content-container{
display: flex;
flex-direction: column;
align-content: center;
padding: var( --padding-container);
height: 100%;
}
.section .section__content.intro {
color: var(--primary);
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
}
.section__content.intro__pic:hover {
background-size: 120%;
}
.section__content.intro__pic::before {
background-color: var(--dark);
content: " ";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 1s ease-out;
}
.section__heading {
font-family: "Playfair Display", serif;
color: white;
margin-bottom: 20px;
font-size: 1.8rem;
letter-spacing: 2px;
font-weight: 100;
}
.section__content p {
font-family: "Lato", sans-serif;
color: var(--dark);
font-size: 1.2rem;
line-height: 2rem;
}
.section__content.intro p {
color: var(--primary-light);
}
.half-left,
.half-right {
max-width: 600px;
position: relative;
position: relative;
overflow: hidden;
}
.half-left .section_content-container,
.half-right .section_content-container {
position: absolute;
width: 100%;
height: auto;
z-index: 1;
}
.imgWrapper{
height: var(--height-img);
overflow: hidden;
}
.imgWrapper img{
width: 100%;
height: auto;
}
.half-left.makeup .section_content-container,
.half-right.makeup .section_content-container {
position: relative;
}
.half-left.makeup .section_content-container::before,
.half-right.makeup .section_content-container::before {
background-image: url(//www.peluqueriashock.com/wp-content/themes/shock/assets/img/hoja.jpg);
content: " ";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.2;
background-size: cover;
}
.half-left.makeup .section_content-container .section__text,
.half-right.makeup .section_content-container .section__text {
color: var(--primary-light);
}
.half-left.pedicura,
.half-left.manicura,
.half-right.pedicura,
.half-right.manicura {
min-height: 700px;
height: 100%;
}
.half-left.pedicura .section_content-container,
.half-left.manicura .section_content-container,
.half-right.pedicura .section_content-container,
.half-right.manicura .section_content-container {
background-color: rgba(166, 154, 133, 0.7);
}
.half-left.pedicura .section__image,
.half-left.manicura .section__image,
.half-right.pedicura .section__image,
.half-right.manicura .section__image {
position: absolute;
transform: rotate(90deg) translateY(-100%);
transform-origin: left top;
height: 600px;
filter: brightness(70%);
width:auto;
}
.half-right.manicura .section__image {
position: absolute;
transform: rotate(90deg) translateY(-100%);
transform-origin: left top;
height: 600px;
width:auto;
filter: brightness(70%);
}
.half-left.manicura .section_content-container,
.half-right.manicura .section_content-container {
right: 0;
}
.half-right-small {
width: 100%;
max-width: 600px; 
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.half-right-small .section_content-container {
display: flex;
flex-direction: column;
align-content: center;
width: 100%;
height: auto;
z-index: 1;
background-color: rgba(166, 154, 133, 0.7);
}
.value{
height: auto;
position: relative;
height: var(--height-img);
min-height: 400px;
}
.value-left .section_content-container,
.value-right .section_content-container,
.value-right-small .section_content-container {
background-color: rgba(166, 154, 133, 0.7);
z-index: 1;
position: absolute;
height: 100%;
width: 100%;
max-width: 600px;
transform: translate(-50%, 0);
left: 50%;
}
.section.wash {
position: relative;
}
.section.wash::before {
background-image: url(//www.peluqueriashock.com/wp-content/themes/shock/assets/img/hoja.jpg);
content: " ";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.2;
background-size: contain;
}
.section.wash .section_content-container {
background-color: rgba(166, 154, 133, 0.8);
}
.section.wash .section__content {
z-index: 1;
}
.section__content.intro__pic {
width: 100%;
background-image: url(//www.peluqueriashock.com/wp-content/themes/shock/assets/img/peluqueriaIntroMob.jpg);
height: var(--height-img);
background-position: center;
background-repeat: no-repeat;
transition: all 1s ease-out;
position: relative;
}
.section.natural-color {
background-size: cover;
background-image: url(//www.peluqueriashock.com/wp-content/themes/shock/assets/img/servicios/colorNatural.jpg);
background-repeat: no-repeat;
background-position: center;
transition: all 1s ease-out;
}
.section.vip {
background-image: url(//www.peluqueriashock.com/wp-content/themes/shock/assets/img/servicios/salonVip.jpg); background-repeat: no-repeat;
background-position: center;
transition: all 1s ease-out;
background-size: cover;
}
.section.tratamientos {
background-image: url(//www.peluqueriashock.com/wp-content/themes/shock/assets/img/servicios/tratamientos.jpg);
background-repeat: no-repeat;
background-position: center;
padding: 60px 0;
transition: all 1s ease-out;
} footer{
background-color: var(--dark);
}
.site-footer {
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 0;
position: relative;
}
.site-footer a {
color: white;
}
.site-footer .inner {
width: 100%;
}
.site-footer .inner .site-footer__top {
display: flex;
justify-content: space-between;
width: 75%;
margin: 0 auto;
}
.site-footer .inner .site-footer__top .site-footer__nav {
text-transform: uppercase;
font-size: 18px;
}
.site-footer .inner .site-footer__top .site-footer__contact {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.site-footer .inner .site-footer__top .site-footer__contact li {
margin-bottom: 6px;
}
.site-footer
.inner
.site-footer__top
.site-footer__contact
.site-footer__contact__phones {
color: white;
display: flex;
}
.site-footer
.inner
.site-footer__top
.site-footer__contact
.site-footer__contact__phones
.phone-circle {
border: 2px solid white;
border-radius: 50px;
padding: 5px;
margin-left: 8px;
width: 30px;
height: 30px;
}
.site-footer .inner .site-footer__top .site-footer__contact .fa-instagram {
font-size: 31px;
margin-right: 2px;
}
.site-footer .inner .site-footer__top .site-footer__contact .fa-facebook-f {
font-size: 18px;
border: 2px solid white;
border-radius: 50px;
padding: 5px;
width: 30px;
position: relative;
height: 30px;
transition: all 0.2s ease-in;
}
.site-footer
.inner
.site-footer__top
.site-footer__contact
.fa-facebook-f::before {
left: 7px;
position: absolute;
}
.site-footer
.inner
.site-footer__top
.site-footer__contact
.fa-facebook-f:hover {
border-color: var(--primary);
}
.site-footer .inner .site-footer__bottom {
width: 75%;
margin: 0 auto;
color: white;
}
.site-footer .inner .site-footer__bottom .site-footer__list a {
text-transform: uppercase;
}
.site-footer .inner .site-footer__bottom .site-footer__list .copyright {
margin-top: 10px;
}
.site-footer .site-footer__button {
position: absolute;
right: 20px;
background: transparent;
border: 0;
top: 63px;
color: white;
cursor: pointer;
transition: all 0.3s ease-out;
}
.site-footer .site-footer__button:hover {
color: var(--primary);
} .site-container.blog{
padding-top: 3rem;
}
.blog .profiles__header{
margin-bottom: 0rem;
}
.wrapper-blog{
padding: 50px 10%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-content: stretch;
align-items: stretch;
background-repeat: no-repeat;
}
.primary{
width: 100%;
}
.sidebar {
width: 100%;
padding-top: 30px;
} .post{
display: flex;
flex-direction: column;
margin-bottom: 2rem;
border-radius: 2px;
border: solid 1px #ffffff;
}
.post.single{
display: flex;
flex-direction: column;
margin-bottom: 15px;
border-radius: 2px;
}
.media{
width: 100%;
max-height: 200px;
overflow: hidden;
z-index: 100;
}
.media img{
object-position: center;
display: block;
width: 100%;
height: auto;
filter: grayscale(80%);
}
.mediaSingle{
overflow: hidden;
}
.mediaSingle img, .media-body img{
object-position: center;
display: block;
width: 100%;
height: auto;
filter: grayscale(80%);
}
.media-body{
padding: 25px 15px 15px 15px;
width:100%;
}
.media-body h3, .mediaSingle h3{
font-family: "Playfair Display", serif;
font-size:1.8rem;
text-decoration: none;
color: #ffffff;
}
.media-body h3 > a{
text-decoration: none;
color: #ffffff;
}
.postcopy{
padding: 15px 0px;
}
.more-link{
color: var(--c-primary-dark);
} .sidebar section{
margin-bottom: 15px;
}
.widget-title{
font-family: "Playfair Display", serif;
text-transform: capitalize;
}
.widget a{
font-family: "Playfair Display", serif;
text-transform: capitalize;
font-size: 1.3rem;
}
.widget a:hover{
color:#ffffff;
}
.sidebar section li{
text-decoration: none;
padding: 10px;
border-bottom: 1px solid #000;
}
.sidebar section ul{
margin-bottom: 20px;
}
.sidebar section li a, .navPost a{
text-decoration: none;
color: var(--c-primary-dark);
}
.navPost{
width: 100%;
} .section.search{
padding-top: 5rem;
} .primary {
width: 100%;
}
.single h3{
padding: 10px 15px;
font-size: 1.8rem;
padding-top: 30px;
line-height: 2.5rem;
}
.single .media-body {
padding: 0px;
}
.single .postcopy{
padding: 0px;
margin: 0px;
}
.single .postcopy p{
padding: 0 15px;
margin: 0px;
margin-bottom: 15px;
} .error{
padding: 3%;
} .contact {
padding: 3rem;
position: relative;
}
.contact__header{
text-align: center;
padding-bottom: 2rem;
}
.contact__header p{
font-size: 1.2rem;
color: #ffffff;
}
.contact label{
text-align: left;
text-transform: uppercase;
margin-bottom: 3px;
}
.map {
padding: 0.5rem 1rem;
border: 1px solid;
overflow: hidden;
}
.map__heading {
margin-bottom: 1rem;
font: 300 1rem/1.5 "lato", sans-serif;
color: var(--dark);
text-transform: uppercase;
}
iframe {
width: 100%;
}
img, iframe, video {
vertical-align: middle;
}
input, textarea{
display: block;
width: 100%;
padding: 0.625rem 1rem;
border: 1px solid var(--dark);
font-size: 1rem;
font-weight: normal;
color: var(--dark);
text-transform: uppercase;
background-color: var(--primary-light);
background-clip: padding-box;
-webkit-box-shadow: 1px 1px 2px 0 rgba(var(--dark), 0.2) inset;
box-shadow: 1px 1px 2px 0 rgba(var(--dark), 0.2) inset;
-webkit-transition: all 250ms;
transition: all 250ms; 
}
.contact input[type="submit"]{
background-color: var(--dark);
color: #fff; 
margin: 3rem 0; 
}
.contact input[type="submit"]:hover{
background-color: var(--primary-light);
color: #000000; 
margin-top: 2rem; 
}
.form-input::-webkit-input-placeholder, .form-checkbox::-webkit-input-placeholder {
color: }
.form-input:-ms-input-placeholder, .form-checkbox:-ms-input-placeholder {
color: var(--primary-light); }
.form-input::placeholder, .form-checkbox::placeholder {
color: var(--primary-light); }
.form-input:focus:required, .form-checkbox:focus:required {
border-color: var(--primary);
outline: 0 none; }
.form-input:required:placeholder-shown, .form-checkbox:required:placeholder-shown {
border: 1px solid var(--dark); }
.form-input:required:not(:placeholder-shown):invalid, .form-checkbox:required:not(:placeholder-shown):invalid {
border: 1px solid var(--c-error);
color: var(--c-error);
-webkit-box-shadow: 0 0 0 1px;
box-shadow: 0 0 0 1px; }
.form-input:required:not(:placeholder-shown):valid, .form-checkbox:required:not(:placeholder-shown):valid {
border: 1px solid var(--c-success);
color: var(--c-success);
-webkit-box-shadow: 0 0 0 1px;
box-shadow: 0 0 0 1px; }
.form-input:required:focus:invalid, .form-checkbox:required:focus:invalid {
border: 1px solid var(--c-error);
color: var(--c-error);
-webkit-box-shadow: 0 0 0 1px;
box-shadow: 0 0 0 1px; }
.form-group:not(:last-child) {
margin-bottom: 2rem; }
.form-group--checkbox {
text-align: left;
position: relative; }
.form-input:disabled {
opacity: 0.7;
cursor: not-allowed; }
.form-checkbox {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 2.25rem;
height: 2.25rem;
position: absolute;
border-radius: 50%;
top: 1px;
left: 21px;
z-index: 1;
background-color: transparent; }
.form-checkbox:required:not(:placeholder-shown):invalid {
color: var(--c-checkbox);
border: 1px solid var(--c-checkbox);
-webkit-box-shadow: none;
box-shadow: none; }
.form-checkbox + label {
margin-left: 1.25rem;
color: var(--c-checkbox);
position: relative; }
.form-checkbox + label::before, .form-checkbox + label::after {
content: '';
display: inline-block;
vertical-align: middle;
border-radius: 50%;
-webkit-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
margin-right: 1.25rem; }
.form-checkbox + label::before {
width: 2.25rem;
height: 2.25rem;
background-color: var(--c-white); }
.form-checkbox + label::after {
width: 1.75rem;
height: 1.75rem;
background-color: var(--c-primary);
position: absolute;
top: -2px;
left: 5px;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); }
.form-checkbox:checked + label::after {
-webkit-transform: none;
-ms-transform: none;
transform: none; }
.button, .form-submit, .form-submit--ghost, .profiles-details__link {
font-size: 1.25rem;
font-family: inherit;
color: transparent;
display: inline-block;
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
padding: 1rem 4rem;
line-height: 1.4;
text-decoration: none;
text-transform: uppercase;
position: relative;
overflow: hidden; }
.button + .button, .form-submit + .button, .form-submit--ghost + .button, .profiles-details__link + .button, .button + .form-submit, .form-submit + .form-submit, .form-submit--ghost + .form-submit, .profiles-details__link + .form-submit, .button + .form-submit--ghost, .form-submit + .form-submit--ghost, .form-submit--ghost + .form-submit--ghost, .profiles-details__link + .form-submit--ghost, .button + .profiles-details__link, .form-submit + .profiles-details__link, .form-submit--ghost + .profiles-details__link, .profiles-details__link + .profiles-details__link {
margin-left: 1rem; }
.button--primary, .form-submit, .profiles-details__link {
color: var(--c-white);
border: 1px solid;
background-color: var(--c-primary);
-webkit-transition: all 250ms cubic-bezier(0, 0, 0.24, 0.9);
transition: all 250ms cubic-bezier(0, 0, 0.24, 0.9); }
.button--primary:focus, .form-submit:focus, .profiles-details__link:focus, .button--primary:hover, .form-submit:hover, .profiles-details__link:hover {
background-color: var(--c-white);
border: 1px solid var(--c-primary);
color: var(--c-primary); }
.button--secondary {
color: var(--c-white);
border: 1px solid;
background-color: var(--c-secondary);
-webkit-transition: all 250ms cubic-bezier(0, 0, 0.24, 0.9);
transition: all 250ms cubic-bezier(0, 0, 0.24, 0.9); }
.button--secondary:focus, .button--secondary:hover {
background-color: var(--c-white);
border: 1px solid var(--c-secondary);
color: var(--c-secondary); }
.button--ghost, .form-submit--ghost {
color: var(--c-primary);
border: 1px solid;
background-color: var(--c-white);
-webkit-transition: all 250ms cubic-bezier(0, 0, 0.24, 0.9);
transition: all 250ms cubic-bezier(0, 0, 0.24, 0.9); }
.button--ghost:focus, .form-submit--ghost:focus, .button--ghost:hover, .form-submit--ghost:hover {
background-color: var(--c-primary);
border: 1px solid var(--c-white);
color: var(--c-white); }
.button--transparent {
color: var(--c-primary);
border: 1px solid;
background-color: var(transparent);
-webkit-transition: all 250ms cubic-bezier(0, 0, 0.24, 0.9);
transition: all 250ms cubic-bezier(0, 0, 0.24, 0.9); }
.button--transparent:focus, .button--transparent:hover {
background-color: var(--c-primary);
border: 1px solid var(transparent);
color: var(transparent); }
.button--link {
padding-right: 0;
padding-left: 0;
font-size: 0.75rem;
color: var(--c-primary); } .spinner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
background-color: var(--c-primary); }
.spinner__icon {
width: 4rem;
height: 4rem;
color: var(--c-primary-light);
-webkit-animation: pulse 1000ms ease-in infinite forwards, pulsecolor 1000ms ease-in infinite forwards;
animation: pulse 1000ms ease-in infinite forwards, pulsecolor 1000ms ease-in infinite forwards; }