@charset "UTF-8";
 {
margin: 0;
padding: 0;
}
@font-face {
font-family: 'Bariol-Regular';
font-style: normal;
font-weight: normal;
font-display: auto;
src: local('Bariol-Regular'), url(https://www.coloursbyjennyhansson.se/wp-content/themes/coloursbyjennyhansson/font/bariol.woff) format('woff');
font-display: swap;
}
@font-face {
font-family: 'Bariol-Light';
font-style: normal;
font-weight: normal;
font-display: auto;
src: local('Bariol-Light'), url(https://www.coloursbyjennyhansson.se/wp-content/themes/coloursbyjennyhansson/font/bariollight.woff) format('woff');
font-display: swap;
}
@font-face {
font-family: 'Bariol-Bold';
font-style: normal;
font-weight: normal;
font-display: auto;
src: local('Bariol-Bold'), url(https://www.coloursbyjennyhansson.se/wp-content/themes/coloursbyjennyhansson/font/bariolbold.woff) format('woff');
font-display: swap;
} h1 {
font: 30px 'Bariol-Light';
color: #333;
}
h2 {
font: 20px 'Bariol-Regular';
color: #333;
}
h3 {
font: 18px 'Bariol-Regular';
color: #fff;
}
h4 {
font: 14px 'Bariol-Regular';
line-height: 1.5em;
color: #fff;
}
p {
font: 18px 'Bariol-Regular';
color: #333;
}
b {
font: 18px 'Bariol-Bold';
color: #333;
}
a:link, a:visited {
color: blue;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
} .fa-menu {
font-size: 50px;
color: #fff;
}
.fa-fb {
font-size: 50px;
color: #333;
}
.fa-2x {
color: #333;
}
.fa-3x {
color: #333;
padding-right: 10px;
}
.schema-faq-question {
font: 20px 'Bariol-Bold';
color: #333;
}
html, body {
margin: 0 auto;
height: 100%;
width: 100%;
color: #fff;
}
#header {
height: 100%;
background: url(//www.coloursbyjennyhansson.se/wp-content/themes/coloursbyjennyhansson/images/coloursbyjennyhansson.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#logo {
cursor: pointer;
height: 100%;
background: url(//www.coloursbyjennyhansson.se/wp-content/themes/coloursbyjennyhansson/images/coloursbyjennyhansson_logo.png) no-repeat center center;
}
#nav {
height: 50px;
}
#navaddress {
cursor: pointer;
float: left;
margin-right: 25px;
}
#menu {
height: 70%;
width: 0;
position: fixed;
z-index: 1000;
top: 15%;
left: 0;
padding: 20px 0 0 0;
overflow-x: hidden;
background: #f09433;
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}
#closenav {
cursor: pointer;
}
.menu-headline {
clear: both;
font: 30px 'Bariol-Light';
color: #fff;
padding: 20px 0 0 0;
}
.nav-left-col {
float: left;
}
.nav-right-col {
float: right;
}
.bar {
position: absolute;
bottom: 0;
width: 100%;
padding: 20px 0 20px 0;
z-index: 999;
background: #000;
background: rgb(0, 0, 0) transparent;
background: rgba(0, 0, 0, 0.5);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
.stickybar {
position: fixed;
top: 0;
}
.content {
margin: 0 auto;
width: 80%;
}
.left-col {
float: left;
width: 45%;
}
.right-col {
float: right;
width: 45%;
}
.left-col-details {
float: left;
width: 15%;
text-align: center;
position: relative;
top: 10px;
left: -10px;
}
.right-col-details {
float: left;
width: 85%;
}
.clear {
clear: both;
}
.button:link, .button:visited {
display: block;
float: right;
font: 20px 'Bariol-Light';
color: #000;
width: 85px;
border-radius: 10px;
padding: 12px;
background: #fff;
}
.button:hover {
color: #fff;
background: green;
}
.black_button:link, .black_button:visited {
display: block;
float: left;
font: 16px 'Bariol-Regular';
color: #fff;
border-radius: 10px;
padding: 15px;
margin: 25px 0 50px 0;
background: #000;
}
.black_button:hover {
color: #fff;
background: green;
}
#map {
width: 100%;
height: 300px;
}
#messenger {
display: none;
position: fixed;
right: 10px;
bottom: 10px;
}
.flash-messenger {
animation: flashmessenger 3s;
animation-delay: 1s;
}
@keyframes flashmessenger {
0% {color: #333;}
50% {color: #4267B2;}
100% {color: #333;}
}
.related:link, .related:visited {
float: left;
font: 18px 'Bariol-Regular';
color: #333;
border-radius: 10px;
padding: 10px;
margin: 10px 10px 0 0;
border: 1px solid #ccc;
background: #fff;
}
.related:hover {
background: green;
}
.breadcrum {
margin: 20px 0 0 0;
font: 14px 'Bariol-Regular';
color: #333;
}
footer {
clear: both;
text-align: center;
padding-top: 20px;
height: 100px;
background: #333;
}
.foot:link, .foot:visited {
color: #fff;
}
.img-divider {
clear: both;
margin: 25px 0 25px 0;
text-align: center;
}
.img-round {
border-radius: 50%;
}
.img-col {
margin-top: 35px;
} @media only screen and (min-width: 768px) and (max-width: 1000px) {
.button {
margin-top: 10px;
}
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
#logo {
background: url(//www.coloursbyjennyhansson.se/wp-content/themes/coloursbyjennyhansson/images/coloursbyjennyhansson_logo_small.png) no-repeat center center;
}
#menu {
height: 100%;
top: 0;
}
.bar {
padding: 0 0 20px 0;
}
.fa-menu {
margin-top: 25%;
}
.portrait {
margin-left: 25%;
width: 50%;
height: 50%;
}
.img-col {
margin-top: 0;
}
.mobile-center {
text-align: center;
}
.left-col {
width: 100%;
margin-left: 0;
}
.right-col {
width: 100%;
}
.button {
margin-top: 10px;
}
.black_button:link {
text-align: center;
}
p {
font: 16px 'Bariol-Regular';
}
#navaddress {
position: absolute;
left: 10%;
}
#address {
display: none;
}
}