@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

@font-face {
font-family: 'Helvetica Neue Bold';
font-style: normal;
font-weight: normal;
src: local('Helvetica Neue Bold'), url('/resources/helvetica-neue-webfont/HelveticaNeueBold.woff') format('woff');
}

@font-face {
font-family: 'HelveticaNeue-Medium';
font-style: normal;
font-weight: normal;
src: local('HelveticaNeue-Medium'), url('/resources/helvetica-neue-webfont/HelveticaNeue-Medium.woff') format('woff');
}

@font-face {
font-family: 'HelveticaNeueLight';
font-style: normal;
font-weight: normal;
src: local('HelveticaNeueLight'), url('/resources/helvetica-neue-webfont/HelveticaNeueLight.woff') format('woff');
}

@font-face {
font-family: 'HelveticaNeue-Condensed';
font-style: normal;
font-weight: normal;
src: local('HelveticaNeue-Condensed'), url('/resources/helvetica-neue-webfont/HelveticaNeue-Condensed.woff') format('woff');
}

html,
body {
    height: 100%;
}

/* 
-----------------------------------------------
TYPOGRAPHY
----------------------------------------------- 
*/

p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: #303030;
}

h1 {
    font-family:'Helvetica Neue Bold', "Helvetica", sans-serif;
    color: #252525;
    margin-top: 0px;
    padding-top: 0px;
}

h2 {
    font-family:'Helvetica Neue Bold', "Helvetica", sans-serif;
    color: #252525;
    padding-bottom: 0px;
    font-size: 2em;
    line-height: 1.3em;
    margin-top: 0.5em;
    margin-bottom: 0em;
}

h3 {
    font-family: "Helvetica Neue","Helvetica", sans-serif;
    font-weight: normal;
    color: #252525;
    margin-top: 10px;
}

/* Used for Tags */
h4 {
    font-family:'Helvetica Neue Bold', "Helvetica", sans-serif;
    color: #252525;
}

h5 {
    font-family:'Helvetica Neue Bold', "Helvetica", sans-serif;
    color: #252525;
}

.author {
    font-family:'Helvetica Neue Bold', "Helvetica", sans-serif;
    color:#454545;
    font-size: 10px;
}

/* 
-----------------------------------------------
ARTICLE
----------------------------------------------- 
*/

.article li {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: #303030;
}

.article h2 {
    font-family:'Helvetica Neue Bold', "Helvetica", sans-serif;
    color: #252525;
    padding-bottom: 0px;
    font-size: 2em;
    line-height: 1.3em;
    margin-top: 0.5em;
    margin-bottom: 0em;
}

.article h3 {
    font-family:'Helvetica Neue Bold', "Helvetica", sans-serif;
    color: #252525;
    padding-bottom: 0px;
    font-size: 1.3em;
    line-height: 1.3em;
    margin-bottom: 0em;
}

.article .bold {
    font-family:'Helvetica Neue Bold', "Helvetica", sans-serif;
    color: rgb(59, 89, 152);
    padding-bottom: 0px;
    font-size: 1em;
}

/* 
-----------------------------------------------
AUTHORBOX
----------------------------------------------- 
*/

.authorbox {
    width: 100%;
    height: 37px;
    padding-left:7px;
}

.authorbox-inner-img {
    display: inline-block;
    width: 25px;
    height: 28px;
}

.authorbox-inner-text {
    height: 25px;
    height: 28px;
    display: inline-block;
    padding-left:5px;
    padding-top: 0px;
    margin-top: 0px;
    font-family: 'Open Sans', sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica;
    font-weight: 600;
    font-size: 0.9em;
    color: #353535;
    font-kerning: normal;
}
.authorbox {
    position: relative;
    padding-left:6px;
    padding-right:6px;
    padding-top:6px;
    padding-bottom:6px;
    display: block;
    border-radius: 0.3em;
    background-color: transparent;
}

.authorbox:hover {
    background: rgba(216, 223, 234, 0.5);
    /* background: rgba(0,0,0,0.05); */
    -webkit-transition: 100ms ease-in 50ms;
    -moz-transition: 100ms ease-in 50ms;
    -o-transition: 100ms ease-in 50ms;
    transition: 100ms ease-in 50ms;
    cursor: pointer;
}

/* 
-----------------------------------------------
BLUEBOX
----------------------------------------------- 
*/

.bluebox {
    width: 100%;
    overflow: hidden;
    border-radius: 0.5em;
    background-color: rgba(216, 223, 234, 0.5);
    padding: 20px;
}

/* 
-----------------------------------------------
TABLE
----------------------------------------------- 
*/

table.table-hover tbody tr td:hover {
    background-color: #eaedf2; 
}


/* 
-----------------------------------------------
MEDIA OBJECTS
----------------------------------------------- 
*/

.media-heading {
    font-weight: bold;
    color: rgb(68, 68, 68);
}

/* 
-----------------------------------------------
BREADCRUMB
----------------------------------------------- 
*/

.breadcrumb {
    background: transparent;
    /* background:rgb(216, 223, 234); */
    border: 0px solid rgb(247, 247, 245); 
    border-radius: 4px; 
    padding-left: 0px;
}
.breadcrumb li {
    font-size: 14px;
}
.breadcrumb a {
    color: rgba(109, 132, 180, 1);
}
.breadcrumb a:hover {
    color: rgb(59, 89, 152);
}
.breadcrumb>.active {
    color: rgba(109, 132, 180, 1);
}
.breadcrumb>li+li:before {
    color: rgba(109, 132, 180, 1); 
    content: "\002F";
}

/* 
-----------------------------------------------
BADGE
----------------------------------------------- 
*/

.badge {
    color: #ffffff;
    background: rgb(59, 89, 152);
    border:none;
}

.badge:active,
.badge:focus,
.badge:hover {
    color: #ffffff;
    background-color: rgba(109, 132, 180, 1);
    border:none;
}

/* 
-----------------------------------------------
SHARE BUTTON
----------------------------------------------- 
*/

.share-btn {
    display: inline-block;
    color: #ffffff;
    border: none;
    padding: 0.5em;
    width: 3em;
    opacity: 0.9;
    outline: none;
    text-align: center;
    -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.share-btn:hover,
.share-btn:focus {
    color: #eeeeee;
}

.share-btn:active {
    position: relative;
    top: 2px;
    box-shadow: none;
    color: #e2e2e2;
    outline: none;
}

.share-btn.twitter { background: #55acee; }
.share-btn.google-plus { background: #dd4b39; }
.share-btn.facebook { background: #3B5998; }
.share-btn.stumbleupon { background: #EB4823; }
.share-btn.reddit { background: #ff5700; }
.share-btn.linkedin    { background: #4875B4; }
.share-btn.email { background: #444444; }


/* 
-----------------------------------------------
CARDS
----------------------------------------------- 
*/

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .card-columns {
        column-count: 1;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { 
    .card-columns {
        column-count: 2;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { 
    .card-columns {
        column-count: 3;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { 
    .card-columns {
        column-count: 4;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
    .card-columns {
        column-count: 6;
    }
}

.gutter-card-deck.card-columns {
  column-gap: 0;
}

.card {
    background: transparent;
    border-radius: 9px;
    padding-top:12px;
    padding-left:12px;
    padding-right:12px;
    padding-bottom:0px;
    border: 0px;
}

.card:hover {
    /* background: #f8f9f9; */
    background: rgba(216, 223, 234, 0.5);
    /* background: rgba(216, 223, 234, 0.25);*/
    /* background: rgb(255,255,255); */
    /* transition: transform .2s,-webkit-transform .2s; */
    -webkit-transition: 150ms ease-in-out;
    -moz-transition: 150ms ease-in-out;
    -o-transition: 150ms ease-in-out;
    transition: 150ms ease-in-out;
    cursor: pointer;
}

.card h2 {
    font-family: 'Open Sans', sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica;
    font-weight: 600;
    font-size: 1.2em;
    color: #353535;
}

/*
Privacy Policy typography
*/

.privacypolicy p {
    font-family:'HelveticaNeueLight', "Helvetica", sans-serif;
    color: #252525;
}

.privacypolicy h1 {
    font-family:'Helvetica Neue Bold', "Helvetica", sans-serif;
    color: #252525;
}

.privacypolicy h2 {
    font-family:'Helvetica Neue Bold', "Helvetica", sans-serif;
    color: #252525;
}

.privacypolicy h3 {
    font-family:'Helvetica Neue Bold', "Helvetica", sans-serif;
    color: #252525;
}

.privacypolicy h4 {
    font-family:'Helvetica Neue Bold', "Helvetica", sans-serif;
    color: #252525;
}

.privacypolicy li {
    font-family:'HelveticaNeue-Medium', "Helvetica", sans-serif;
    color: #252525;
}

/* 
-----------------------------------------------
EXTRACONTENT Rensa ut längre fram
----------------------------------------------- 
*/

.extracontent {
    padding-top:20px;
    padding-bottom:20px;
    padding-left:0px;
    padding-right:0px;
}

.extracontent .extracontent-bg {
    width: 100%;
    overflow: hidden;
    border-radius: 0.5em;
    background-color: rgba(216, 223, 234, 0.5);
    padding: 20px;
}

.extracontent h2 {
    font-size: 2.5em;
    font-weight: bold;
    padding-bottom: 10px;
    color: rgb(59, 89, 152);
    text-align: left;
}

.extracontent h3 {
    font-size: 1.8em;
    font-weight: bold;
    padding-bottom: 0px;
    color: rgb(59, 89, 152);
    text-align: left;
}

.extracontent i {
    color: rgb(59, 89, 152);
}

/* 
-----------------------------------------------
RECEPIE
----------------------------------------------- 
*/

.recepie {
    padding-top:20px;
    padding-bottom:0px;
    padding-left:0px;
    padding-right:20px;
}

.recepie h1 {
    font-size: 2.5em;
    font-weight: bold;
    padding-bottom: 10px;
    color: rgb(59, 89, 152);
    text-align: left;
}

.recepie h2 {
    font-size: 1.5em;
    padding-bottom: 10px;
    color: rgb(68, 68, 68);
    font-weight: bold;
    text-align: left;
}

.recepie li {
    font-family: "Helvetica Neue","Helvetica", sans-serif;
    font-weight: 300;
    font-kerning: normal;
    color:#252525;
    line-height: 22px;
    font-size: 17px;
}