.bodyInside {
background-color: var(--primary);
font-family: "Lato", sans-serif;
line-height: 36px;
font-size: 16px;
color: var(--dark);
}
.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;
}
.site-header > .inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
max-width: var(--wrapper-max-width);
padding: 1.5rem 2rem;
margin-left: auto;
margin-right: auto;
will-change: padding-top, padding-bottom;
-webkit-transition: all 200ms;
transition: all 200ms
}
.site-header::before {
background-color: var(--dark);
content: " ";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.1;
}
.hero .inner .hero__logo {
width: 60%;
margin: auto;
padding-top: 6rem;
}
.site-logo {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
max-width: 10rem;
margin-right: 1rem;
}
.site-logo:hover {
opacity:0.5;
}
.site-logo > a {
height: 100%;
width: 100%;
}
.site-logo>a:hover,
.site-logo>a:focus {
color: var(--c-secondary);
}
.site-header .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: center;
background-size: cover;
z-index: 2;
display: block;
transform: translateX(600px);
right: 0;
transition: transform 1s ease-in-out;
}
.site-header.hero__nav-wrapper.opened {
height: 100%;
min-height: 600px;
overflow: visible;
}
.site-header.siteheaderOpen{
height: 100vh;
min-height: 600px;
overflow: visible;
z-index: 5;
}
.hero.site-header .inner .hero__actions i,.hero.site-header .telephone i{
color:#fff;
}
.hero.site-header .inner li .hero__social__link.telephone{
border: 2px solid #fff;
}
.hero.site-header .inner li a ,.site-header li{
color: #fff;
}
.hero.site-header .inner li a:hover,.site-header li:hover, .site-header.telephone:hover{
color:var(--primary);
}
.active{
color: var(--primary);
text-decoration: #fff;
}
.media-body h3 > a:hover{
color: var(--dark)!important;
}
.sidebar a:hover{
color: #fff!important;
}