:root {
--primary: #a69a85;
--primary-light: #c7bba6;
--dark: #191718;
--padding-container: 3rem;
--height-img-ipad: 450px;
--height-img-laptop: 500px;
--section-margin-bottom-laptop: 10rem;
--padding-left-right-ipad: 0 5rem;
--padding-left-right-laptop: 0 10rem;
--padding-section_content-container: 5rem;
--padding-section_content-container-laptop: 5 10rem;
}  @media only screen and (min-width: 37.5em) {
.hero .inner .hero__logo {
width: 40%;
margin: auto;
padding-top: 8rem;
}
.hero .inner .hero__logo .hero__logo__link .hero__logo__label {
color: var(--dark);
letter-spacing: 6px;
font-size: 2rem;
margin-top: -10px;
font-weight: 400;
}
.hero .inner .hero__actions {
position: absolute;
right: 2.5rem;
top: 2.5rem;
}
.hero .inner .hero__social {
position: absolute;
top: 2.5rem;
right: 5.5rem;
}
.site-header>.inner {
padding: 2rem 3rem;
}
.section__heading {
font-family: "Playfair Display", serif;
color: white;
margin-bottom: 20px;
font-size: 2.3rem;
letter-spacing: 2px;
font-weight: 100;
line-height: 2.5rem;
}
.imgWrapper {
position: relative;
height: var(--height-img-ipad);
}
.section__content.intro__pic {
width: 100%;
background-image: url(//www.peluqueriashock.com/wp-content/themes/shock/assets/img/peluqueriaIntro.jpg);
height: var(--height-img-ipad);
background-position: center;
background-repeat: no-repeat;
transition: all 1s ease-out;
position: relative;
}
.value {
height: var(--height-img-ipad);
}
.section_content-container {
padding: var(--padding-section_content-container);
}
.media {
max-height: 300px;
}
.contact {
padding: 5rem;
}
.contact__header p{
font-size: 1.5rem;
;
}
} @media only screen and (min-width: 56.25em) {
.bodyNavIsOpen {
overflow: auto;
}
.site-footer .inner .site-footer__top .site-footer__nav {
display: flex;
}
.site-footer .inner .site-footer__top .site-footer__nav>li {
margin-right: 14px;
}
.site-footer .inner .site-footer__top .site-footer__contact {
flex-direction: row;
align-items: center;
}
.site-footer .inner .site-footer__top .site-footer__contact li {
height: 29px;
margin-right: 3px;
}
.site-footer .inner .site-footer__bottom .site-footer__list {
display: flex;
font-size: 11px;
margin-top: 60px;
}
.site-footer .inner .site-footer__bottom .site-footer__list a {
margin-right: 5px;
}
.site-footer .inner .site-footer__bottom .site-footer__list .copyright {
margin-top: 0px;
margin-left: 10px;
margin-right: 90px;
}
.site-footer .site-footer__button {
right: 100px;
}
.media {
max-height: 400px;
}
} @media only screen and (min-width : 68.75em) {
.hero {
background-image: url(//www.peluqueriashock.com/wp-content/themes/shock/assets/img/hero.jpg);
background-size: cover;
height: 100vh;
background-position-x: right;
background-position-y: 0px;
}
.hero.site-header {
background-image: url(//www.peluqueriashock.com/wp-content/themes/shock/assets/img/hoja-header.jpg);
background-size: cover;
position: relative;
z-index: 1;
height: 150px;
min-height: 150px;
overflow: visible;
}
.imgWrapper {
position: relative;
height: var(--height-img-laptop);
}
.cortar .imgWrapper img,
.wash .imgWrapper img {
height: var(--height-img-laptop);
width: auto;
}
.section_content-container {
padding: 5rem 3rem;
}
.value .section_content-container {
padding: var(--padding-container);
height: var(--height-img-laptop);
}
.intro .section_content-container {
padding: 10rem;
height: var(--height-img-laptop);
display: flex;
flex-direction: column;
align-content: center;
}
.section__heading {
font-size: 2.3rem;
letter-spacing: 2px;
line-height: 2.5rem;
}
.section__content p {
font-size: 1.2rem;
line-height: 2.5rem;
}
.section__content.intro p {
font-weight: 100;
font-size: 1.5rem;
line-height: 2.5rem;
}
.half-right-small {
max-width: 100%;
}
.half-left,
.half-right {
max-width: 100%;
height: var(--height-img-laptop);
margin: var(--padding-left-right-laptop);
}
.half-left.makeup,
.half-right.makeup {
display: flex;
align-content: center;
}
.half-left.pedicura,
.half-left.manicura,
.half-right.pedicura,
.half-right.manicura {
min-height: var(--height-img-laptop);
}
.half-left.pedicura .section_content-container,
.half-left.manicura .section_content-container,
.half-right.pedicura .section_content-container,
.half-right.manicura .section_content-container {
height: var(--height-img-laptop);
width: 50%;
}
.half-left.pedicura .section__image,
.half-left.manicura .section__image,
.half-right.pedicura .section__image,
.half-right.manicura .section__image {
transform: none;
}
.half-right-small {
padding: var(--padding-left-right-laptop);
flex-direction: row-reverse;
}
.half-right-small .section_content-container {
width: 50%;
}
.half-left.makeup .section_content-container,
.half-right.makeup .section_content-container {
position: relative;
flex: 1;
width: 50%;
}
.value {
height: var(--height-img-laptop);
}
.value-left,
.value-right,
.value-right-small {
min-height: 400px;
position: relative;
max-width: 900px;
}
.value-left .section_content-container,
.value-right .section_content-container,
.value-right-small .section_content-container {
width: 50%;
left: 0;
transform: none;
}
.value-right .section_content-container,
.value-right-small .section_content-container {
right: 0;
left: auto;
transform: none; }
.section.wash {
height: 600px;
display: flex;
}
.intro__pic {
background-size: 100%;
}
.intro__pic:hover {
background-size: 120%;
}
.section.natural-color {
background-size: 100%;
}
.section.natural-color:hover {
background-size: 120%;
}
.section.vip {
background-size: 100%;
}
.section.vip:hover {
background-size: 120%;
}
.section.tratamientos {
background-size: 100%;
padding: 60px;
}
.section.tratamientos:hover {
background-size: 115%;
}
.hero .inner .hero__logo {
margin: 0;
padding-top: 16rem;
}
.hero .inner .hero__logo .hero__logo__link .hero__logo__src {
width: 350px;
}
.hero .inner .hero__social li .hero__social__link:not(.telephone) {
display: flex;
}
.hero .inner .hero__social {
position: absolute;
bottom: 3rem;
top: auto;
right: 3rem;
display: flex;
flex-direction: column;
align-items: center;
}
.hero .inner .hero__social:not(.hero .site-header ) {
position: absolute;
bottom: 3rem;
top: auto;
right: 3rem;
display: flex;
flex-direction: column;
align-items: center;
}
.hero.site-header .inner .hero__social {
position: relative;
top: auto;
right: auto;
bottom: auto;
}
.site-header>.inner {
padding: 2rem 5rem;
}
.wrap-header {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
.site-header .inner .hero__actions__button {
display: none;
}
.telNumber {
display: block;
margin-right: 0.5rem;
font-size: 1.3rem;
}
.site-header .inner li .hero__social__link {
margin-bottom: 0px;
}
.site-header .inner .hero__social {
display: flex;
flex-direction: row;
align-items: center;
align-content: flex-end;
}
.site-header .hero__nav-wrapper {
display: none;
}
.nav-site-header {
display: block;
}
.nav-site-header ul {
margin-top: 1rem;
display: flex;
flex-direction: row;
}
.nav-site-header .nav__link {
text-align: right;
width: 100%;
margin-left: 1rem;
border: 0;
font-family: "Playfair Display", serif;
text-transform: uppercase;
font-size: 1.2rem;
letter-spacing: 2px;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
background-color: transparent;
-webkit-transition: color 200ms cubic-bezier(0, 0, 0.24, 0.9);
transition: color 200ms cubic-bezier(0, 0, 0.24, 0.9);
cursor: pointer;
}
.nav-site-header .nav__link:hover {
color: #191718;
}
.wrapper-blog {
padding: 15px 3%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: stretch;
align-items: stretch;
background-repeat: no-repeat;
margin: 0 auto;
}
.post {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
margin-bottom: 20px;
}
.primary {
padding: 30px;
width: 70%;
}
.sidebar {
width: 20%;
}
.media {
display: flex;
align-content: flex-start;
align-items: flex-start;
width: 40%;
max-height: 800px;
height: 100%;
}
.media img{
height:300px;
width: auto;
object-position: center;
text-align: center;
}
.media-body {
padding: 25px 15px 15px 15px;
width: 55%;
}
.mediaSingle {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
margin-bottom: 20px;
}
.mediaSingle img {
width: 40%;
}
.mediaSingle h3 {
width: 60%;
font-size: 2.3rem;
}
.single .media-body {
padding: 1rem 3rem;
width: 100%;
}
} @media only screen and (min-width : 81.25em) {
.section:not(:last-child) {
margin-bottom: var(--section-margin-bottom-laptop);
}
.hero .hero__nav-wrapper {
max-width: 500px;
}
.hero .hero__nav-wrapper .nav__list li a.nav__link {
font-size: 2rem;
}
.hero .inner .hero__actions {
position: absolute;
right: 3rem;
top: 3rem;
}
.hero .fa-2x {
font-size: 2.5rem;
}
.contact {
padding: 10rem;
}
.contact input[type="submit"]{
width: 60%;
margin: 0 auto;
margin-top: 3rem;
margin-bottom: 3rem;
}
}