/*

Theme Name: Generic child

Theme URI: https://generic.tools/

Author: Bryan Hadaway

Author URI: https://calmestghost.com/

Template: generic

Description: A fully responsive starter theme for designers and developers.

Version: 0.5

License: GNU General Public License v3 or Later

License URI: https://www.gnu.org/licenses/gpl.html

Tags: one-column, two-columns, right-sidebar, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready, blog, e-commerce, portfolio

Text Domain: generic-child

*/





body{

    background-color: #131313;

}



#sidebar{

    display: none;

}



#site-title h1{

    display: none;

}

#site-title{

    display: none;

}



#site-description{

    display: none;

}



.home #menu{

    margin-top:0px;

    text-align: center;

    position: fixed;

    width: 100%;

    opacity: 1;

    z-index: 9999;



}



#menu{

    margin-top:0px;

    text-align: center;

    position: static;

    width: 100%;

}



#header{

    padding: 0px;

}



li {

    list-style: none;

    content: "";

}



#menu ul li a{

    padding-left:5px;

    padding-right:5px;

    display: inline-block;

    font-size: 18px;

    color: #c3c1bc;

    font-family:Raleway;

    font-style: normal;

    font-weight: 500;

    text-decoration:none;

    line-height: 33px;

    padding-bottom: 5px;

    margin-top: 1px;

    margin-right: 15px;

}



#menu ul li a:hover{

   /* background:linear-gradient(rgb(23, 23, 23), rgba(0, 0, 0, 0.74) );

    color:#fff;*/

    color:#FFF;

}



#menu label.toggle{

    background: transparent;

    color: #df4646;

    font-family: Raleway;

    font-weight: 600;

    font-size: 20px;

    font-style:normal;



}



.home .menu-top-menu-container{

    background:rgba(31, 31, 31, 0.9);

    height: 100%;

}



.menu-top-menu-container{

    background: transparent;



}







#content{

    width:100%; 

    float:none;

    padding: 0px;

    overflow-x: hidden;

}





#container{

    padding:0px;

}



.start_wrapper{

    width:100%;

    position: relative;

}



.cat-sektion-1{

    background: transparent;

    position: relative;

    margin-top: 50px;

}



.start_sektion1{

    width:100%;

    text-align: center;

    float:none;

    background-image: url("http://dew.fbmarketing.se/wp-content/uploads/2019/09/bakgrund.smoke_.blue_-1024x487.png");

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    padding-top: 25px;



}



.logo_start_image,

.whatsup-mest-klick-row-container,

.whatsup-mest-klick-row,

.whatsup-heading-title,

.whatsup-display-post,

.logo_start_image,

.mest-klick-img,

.btn, .btn p {

    Z-index: 999;

}



.logo_start_image{

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    text-align: center;

    margin-top: 0px;

    margin-left: 0px;

    margin-right: 0px;

    margin-bottom: 0px;

    padding: 0px;

    border: 0px;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

    Padding: 0 20px;

    opacity: 0;

    animation: logostart 2s forwards .5s ease;

}



@keyframes logostart{

    0% {

        opacity: 0;

    }



    100% {

        opacity: 1;

    }

}



#hem{

    font-style: italic;

    font-size: 40px;

    font-weight: 600;

    opacity: 0;

    animation: logostart 4s forwards .5s ease;

}



.whatsup-heading-title{

    margin-top: 0px;

    font-family: raleway;

    font-weight: 500;

    margin-bottom: 10px;

    color: #fff;

    text-shadow: 4px 4px 8px #000;

    Padding: 0 10px;

}



a:hover{

    -moz-transition: all .5s ease-in-out;

    -webkit-transition: all .5s ease-in-out;

    transition: all .5s ease-in-out;

}



h1,h2,h3,h4,h5,h6{

    margin-top: 10px;

    font-family: raleway;

    font-weight: 500;

    margin-bottom: 10px;

    color: #fff;

}



h1{

    font-size:30px;

}



.start-sektion2-title{

    text-align: left;

    padding-left: 12%;

    color:#df4646;

    z-index: 999;

    position: relative;

    font-size:30px;

    font-weight: 600;

}



.whatsup-mest-klick-row-container{

    max-width:100%;

    width: 100%;

    margin-left: auto;

    margin-right: auto;

    padding: 0px;

}



.whatsup-mest-klick-row{

    justify-content: flex-start;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    margin: 0;

    padding: 0 0 3px 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

    position: relative;

    overflow-x: auto;

    overflow-y: hidden;

    -ms-overflow-style: none;  /** IE 10+ **/

    overflow: -moz-scrollbars-none;  /** Firefox **/

}



.whatsup-mest-klick-row::-webkit-scrollbar { 

    display: none;  /** Safari and Chrome **/

}



/** När post elementen läggs till så behöver vi Ul & Li där :first child har padding 10px; **/



.wu-featured-item-in-list{

    flex: 1;

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    padding: 0px;

    display: block;

    /* border: 2px solid rgba(255, 255, 255, 0.7); */

    margin: 15px 4px;

    width: 100%;

    max-width: 450px;

    min-width: 200px;

    background-color: #df4646;

    border-radius: 5px;

    transition: all .4s ease-in-out;

}



.wu-featured-item-in-list:hover{

    margin: 20px 15px;

    transform: scale(1.10);

}



.wu-featured-item-in-list::before{

    content: '';

	position: absolute;

	top: -2px;

	left: -2px;

	right: -2px;

	bottom: -2px;

	background: #fff;

	transform: skew(2deg,2deg);

    z-index: -1;

    background: linear-gradient(315deg,#ff0057,#e64a19);

}





.slide-in{

    opacity: 0;

}



.slide-in:first-child {

    animation: wufeat .3s forwards 1s ease-in-out;

}



.slide-in:nth-child(2) {

    animation: wufeat .3s forwards 1.2s ease-in-out;

}



.slide-in:nth-child(3) {

    animation: wufeat .3s forwards 1.4s ease-in-out;

}



.slide-in:nth-child(4) {

    animation: wufeat .3s forwards 1.6s ease-in-out;

}



@keyframes wufeat {

    0% {

        opacity: 0;

    }



    100% {

        opacity: 1;

    }

}









.whatsup-mest-klick-row .wu-featured-item-in-list{

    margin: 10px 8px;

}



.wu-featured-item-in-list::before, .wu-featured-item-in-list::after{

    display:table;

    content:"";

}



.wu-featured-item-in-list::after{

    clear: both;

}



.home-cat-h{

    font-family: raleway;

    font-style: italic;

    font-weight: 600;

    font-size: 40px;

    position: absolute;

    top: 50%;

    text-align: center;

    color: #fff;

    text-shadow: 4px 4px 8px #000;

    padding-left: 20px;

}



.search-row-in-cat{

    background: transparent;

    position: relative;

    margin-top: -50px;

    text-align: center;

}



.search-field{

    width:400px;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);

    padding: 12px 60px;

    border-radius: 5px;

    border: 2px solid #a8a6a0;

    color: #fff;

    z-index: 9;

    position: relative;

}



input[type="placeholder"]{

    color: #fff;

}



textarea, input[type="text"], input[type="button"], input[type="submit"], input[type="reset"], input[type="search"], input[type="password"]{

    border-radius: 5px;

}



a.alla-i-kat-img{

    padding: 25px 0px 60px 0px;

}



a.wu-featured-item-in-list-a-cover{

    padding: 0px 0px 15px 0px;

    text-align: center;

    display: block;

    position: relative;

    overflow: hidden;

    text-decoration: none;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    z-index: 2;

    width:100%;

    height:100%;

    border-radius: 5px;

}



a{

    color: #FFF;

    font-family: Cambria, Georgia, serif;

    text-decoration: none;

    -webkit-transition: color 0.3s ease,background-color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease;

    transition: color 0.3s ease,background-color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease;

}



a:hover{

    color:#fff;

}



p {

    color: #fff;

    margin: 0px;



}



a.wu-featured-item-in-list-a-cover::before{

    background-color: rgba(0,0,0,0.2);

    color:#fff;

    opacity: 1;

    content:"";

    display: block;

    position: absolute;

    top: 0px;

    left: 0px;

    right: 0px;

    bottom: 0px;

    z-index: 1;

    -webkit-transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);

    transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);

}



a.wu-featured-item-in-list-a-cover:hover::before{

    background-color: rgba(0,0,0,0.75);

    opacity: 1;

}



a.wu-featured-item-in-list-a-cover:hover .featured-meta{

    visibility: visible;

}



a.wu-featured-item-in-list-a-cover p{

    visibility: hidden;

    font-family: raleway;

}



a.wu-featured-item-in-list-a-cover:hover p{

    visibility: visible;

}



.wu-title-cover{

    text-transform: uppercase;

    Z-index: 2;

    color: #fff;

    position: relative;

    margin-top: 50px;

    margin-bottom: 0px;

    text-shadow: 4px 4px 8px #000;



}



.mest-klick-img{

    border: 2px solid rgba(255, 255, 255, 0.5);

    margin: 2px;

}



.mest-klick-img img{

    display: block;

    width: 100%;

    min-width: 170px;

}



.featured-meta{

    display: inline-block;

    font-size: 16px;

    line-height: 1.4;

    color: #fff;

    width: 100%;

    position: absolute;

    left: 0;

    bottom: 0;

    font-family: raleway;

    z-index:9;

    visibility: hidden;

}



.page #content p, .single-post #content p{

    font-size: 14px;

}



.start-sektion2{

    display: block;

    margin: -40px 0px 0px 0px;

    background-color:#fff;

    width:100%;

    height: auto;

    padding-left: 30px;

    text-align: center;

}



.whatsup-display-post{

    max-width:100%;

    width: 100%;

    margin-left: auto;

    margin-right: auto;

    padding: 0px;

}



.start-sektion3{

    display: block;

    position: relative;

    margin: -50px 0px 50px 0px;

    background-color:#1e1e24;

    width:100%;

    height: auto;

    padding-left: 30px;

    padding-top: 20px;

    padding-bottom: 70px;

    text-align: center;

}



.start-sektion3:before{

    background: url(http://dew.fbmarketing.se/wp-content/uploads/2019/09/bakgrund.smoke_-1024x487.png);

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    opacity: 0.4;

}



.sektion-title-kategorier{

    margin-top: -40px;

    margin-bottom: 30px;

    font-size: 40px;

    transform: skewY(-2deg);

    text-align: right;

    padding-right: 14%;

    color: #df4646;

    position: relative;

    font-weight:600;

    z-index: 999;

}



.filter-sorting{

    margin-top: 0px;

    position: relative;

    z-index: 4;

    text-align: center;

    background: #131313;

    padding-bottom: 10px;

}



/** ----------- **/

.cirkel-visningar{

    height: 175px;

    width: 175px;

    float: right;

    background-color: rgba(223, 70, 70, 0.75);

    margin: auto;

    text-align: center;

    border-radius: 50%;

    position: absolute;

    z-index: 9;

    right: 350px;

    top: 50px;

    display: flex;

}



.cirkel-text{

    margin: auto;

    color: #fff;

}



.entry-content li{

    line-height: 125%;

    margin: 10px 3px;

}



.entry-content ul li:before{

    content: " ";

}



.entry-content ul{

    text-indent: 0;

    margin: -25px 0px 5px 30px;

}



.kategori-filter{

    position: relative;

    z-index: 4;

    color: #a8a6a0;

    border: 2px solid #a8a6a0;

    border-radius: 3px;

    padding: 5px 15px;

    margin: 5px;

    display: inline-block;

}



.kategori-filter:hover{

    background: #a8a6a0;

    color: #fff;

    cursor: pointer;

}



.filter-text{

    color: #fff;

    font-family: raleway;

}



.selected{

    background: green;

    border: none;

}



.selected:hover{

    background: green;

    border: none;

}



.selected .filter-text{

    color: #fff;

}



.btn{

    display: inline-block;

    background:rgba(0, 0, 0, 0.3);

    padding: 5px 100px;

    border-radius: 3px;

    margin-bottom:50px;

}



.btn p{

    font-family:Cambria, Georgia, serif;

    color:#fff;

    text-align: center;

    line-height: 100%;

    margin:0px;

}

.btn:hover{

    background: rgba(0, 0, 0, 0.5);

}



.visa-fler{

    position: relative;

    text-align: center;

    margin: auto;

    margin-left: 50%;

}



.whatsup-direction-red .reverse-left{

    transform: rotate(180deg);

    height: 50px;

    

}

.whatsup-direction-red .reverse-left::before{

border-bottom: 70px solid #df4646;

}



.whatsup-direction-white .reverse-right{

    transform: rotate(180deg);

    border-bottom: 70px solid #fff;

}



.whatsup-direction-white .reverse-right::before{

    border-bottom: 70px solid #fff;

    }



    .whatsup-direction-white-60{

        height:50px;

        width: 100%;

        position: relative;

        background: #fff;

        z-index: 2;

        margin-top: 40px;

    }

    .whatsup-direction-white-60:before {

        content: '';

        position: absolute;

        border-bottom: 60px solid #ffffff;

        border-right: 100vw solid transparent;

        top: -60px;

        left: 0px;

    }

    .whatsup-direction-white{

        height:50px;

        width: 100%;

        position: relative;

        background: #fff;

        z-index: 2;

        margin-top: 40px;

    }

    .whatsup-direction-white:before {

        content: '';

        position: absolute;

        border-bottom: 100px solid #ffffff;

        border-right: 100vw solid transparent;

        top: -100px;

        left: 0px;

    }



.whatsup-direction-red-60{

    height: 10px;

    width: 100%;

    position: relative;

    background: #df4646;

    z-index: 1;

    margin-top: -50px;

}



.whatsup-direction-red-60:before {

    content: '';

    position: absolute;

    border-bottom: 60px solid #df4646;

    border-left: 100vw solid transparent;

    top: -60px;



}.whatsup-direction-red{

    height: 10px;

    width: 100%;

    position: relative;

    background: #df4646;

    z-index: 1;

    margin-top: -50px;

}



.whatsup-direction-red:before {

    content: '';

    position: absolute;

    border-bottom: 100px solid #df4646;

    border-left: 100vw solid transparent;

    top: -100px;

}



.whatsup-direction-white-reverse{

    height: 10px;

    width: 100%;

    position: relative;

    background: #fff;

    z-index: 2;

    margin-top: -50px;

}



.whatsup-direction-white-reverse:before {

    content: '';

    position: absolute;

    border-bottom: 100px solid #fff;

    border-left: 100vw solid transparent;

    top: -100px;

}



.whatsup-direction-red-reverse{

    height:0px;

    width: 100%;

    position: relative;

    background: #df4646;

    z-index: 1;

    margin-top: 0px;

}

.whatsup-direction-red-reverse:before {

    content: '';

    position: absolute;

    border-bottom: 70px solid #df4646;

    border-right: 100vw solid transparent;

    top: -100px;

    left: 0px;

}



.whatsup-direction-blue-reverse{

    height: 0px;

    width: 100%;

    position: relative;

    background: #1e1e24;

    z-index: 2;

    margin-top: 50px;

}



.whatsup-direction-blue-reverse:before {

    content: '';

    position: absolute;

    border-bottom: 70px solid #1e1e24;

    border-left: 100vw solid transparent;

    top: -100px;

}



/*

dark

*/



.whatsup-direction-dark{

    height:50px;

    width: 100%;

    position: relative;

    background: #131313;

    z-index: 2;

    margin-top: 40px;

}

.whatsup-direction-dark:before {

    content: '';

    position: absolute;

    border-bottom: 100px solid #131313;

    border-right: 100vw solid transparent;

    top: -100px;

    left: 0px;

}



.whatsup-direction-dark-reverse{

    height: 10px;

    width: 100%;

    position: relative;

    background: #131313;

    z-index: 1;

    margin-top: -50px;

}



.whatsup-direction-dark-reverse:before {

    content: '';

    position: absolute;

    border-bottom: 100px solid #131313;

    border-left: 100vw solid transparent;

    top: -100px;

}



.kategori-bilder{

    display: flex;

    justify-content: center;

    position: relative;

    margin: -85px auto;

    overflow: hidden;

    max-width: 100%;

    padding: 10px;

    flex-wrap: wrap;

    z-index: 99;

}



.kategori-col{

    max-width: 350px;

    height: auto;

    flex: 1;

    position: relative;

    align-self: flex-start;

    min-width: 175px;

}



.kategori-img{

    display: inline-block;

    margin: 10px;

    box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, .3);

    transform: skew(-7deg, -3deg);

    position: relative;

}



.kategori-img:hover{

    position: relative;

    /* top:50%;

    left:50%; */

    transition: all .4s ease-in-out;

    transform: skew(0deg, 0deg);

    z-index: 99;

    box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, .3);

}



.alla-poster{

    justify-content: center;

    flex-wrap: wrap;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    margin: 0;

    padding: 20px 10px;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

    position: relative;

    overflow-x: hidden;

    overflow-y: hidden;

    z-index: 999;

}



.alla-i-kat{

    flex: 34%;

    margin: 20px;

    max-width: 550px;

    height: auto;

    

}



.toggle-produkt-container{

    width: 100%;

    padding: 10px;

    margin: 0;

    margin-top: 20px;

    position: relative;

    background-color: transparent;

    display: flex;

    flex-wrap: wrap;

    z-index: 3;

    justify-content: center;

}



/*---test prod filer---*/



body .top4

{

	margin-bottom: 12px;

	padding: 0;

	display: flex;

	justify-content: center;

	align-items: center;

}

.container-top4

{

	position: relative;

	display: grid;

	grid-template-columns: 1fr 1fr 1fr 1fr;

	grid-template-rows: auto;

    grid-gap: 0 40px;

    z-index: 9;

}

.container-top4 .box-top4

{

	position: relative;

    height: 220px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

	display: flex;

	justify-content: center;

	align-items: center;

    z-index: auto;

    border-radius: 50%;

}

.container-top4 .box-top4:before

{

	content: '';

	position: absolute;

	top: -2px;

	left: -2px;

	right: -2px;

	bottom: -2px;

	background: #fff;

	transform: skew(2deg,2deg);

    z-index: -1;

    border-radius: 50%;

}



.wuu4:nth-child(1) .add-top4, .wuu4:nth-child(4) .add-top4{

    margin-top: 0px;

}



.wuu4:nth-child(1) .add-top4:before

{

	background: linear-gradient(315deg,#ededeb,#df4646);

}

.wuu4:nth-child(2) .add-top4:before

{

	background: linear-gradient(315deg,#ededeb,#ededeb);	

}

.wuu4:nth-child(3) .add-top4:before

{

    background: linear-gradient(55deg,#ededeb,#ededeb);

    transform: skew(-2deg, -2deg);

}

.wuu4:nth-child(4) .add-top4:before

{

    background: linear-gradient(55deg,#df4646,#ededeb);

    transform: skew(-2deg, -2deg);

}

.container-top4 .box-top4:after

{

	content: '';

	position: absolute;

	top: 0;

	left: 0;

	width: 50%;

	height: 100%;

	background: rgba(255,255,255,0.1);

	pointer-events: none;

}

.content-top4

{

	position: relative;

	padding: 20px;

    transform: translateY(40px);

    z-index: 9;

}

.box-top4 .content-top4 h2

{

	position: absolute;

	top: -60px;

	right: 20px;

	margin: 0;

	padding: 0;

	font-size: 10em;

	color: rgba(255,255,255,.3);

    transition: 0.5s;

    z-index: 2;

}

.box-top4:hover .content-top4 h2

{

	top: -140px;

}

.box-top4 .content-top4 h3

{

    font-size: 3em;

    text-shadow: 4px 4px 8px #000;

	margin: 0 0 10px;

	padding: 0;

	font-weight: 500;

    color: #fff;

    z-index: 3;

}

.box-top4 .content-top4 p

{

	margin: 0;

	padding: 0;

	color: #fff;

    font-size: 16px;

    visibility: hidden;

    z-index: 3;

}

.box-top4 .content-top4 a

{

	position: relative;

	margin: 20px 0 0;

	padding: 10px 20px;

	text-decoration: none;

	border: 1px solid #fff;

	display: inline-block;

	color: #fff;

	transition: 0.5s;

	transform: translateY(-40px);

	opacity: 0;

	visibility: hidden;

}



.box-top4:hover .content-top4 a, .box-top4:hover .content-top4 p

{

	transform: translateY(0);

	opacity: 1;

	visibility: visible;

}

.box-top4 .content-top4 a:hover

{

	color: #000;

	background: #fff;

}



.add-top4.box-top4:hover:after

{

	content: '';

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: rgba(0,0,0,0.7);

    pointer-events: none;

    z-index: 1;

    border-radius: 50%;

}



/*---- Login screen---*/



body .login .button-primary {

    background-color: #df4646;

    border-color: #df4646;

    text-shadow: 0 -1px 1px rgb(212, 82, 56),1px 0 1px rgb(212, 82, 56),0 1px 1px rgb(212, 82, 56),-1px 0 1px rgb(212, 82, 56);

    box-shadow: 0 1px 0 rgb(199, 80, 56);

  }

  

  body .login .button-primary:hover,

  body .login .button-primary:active,

  body .login .button-primary:focus {

    background-color: #fff;

    border-color: #df4646;

    text-shadow: 0 -1px 1px rgb(199, 80, 56),1px 0 1px rgb(199, 80, 56),0 1px 1px rgb(199, 80, 56),-1px 0 1px rgb(199, 80, 56);

    box-shadow: 0 1px 0 rgb(186, 78, 56);

    color: #df4646;

  }

  

  body .login {

    background-color: #FAF0CA;

    background-image: linear-gradient(45deg, #302626, transparent);

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

  }

  

  .login h1 a {

    background-image: url(http://dew.fbmarketing.se/wp-content/uploads/2018/02/smoke.for_.web_.png);

    background-size: contain;

    height: 342px;

    margin: -90px auto 25px -110px;

    width: 575px;

  }



  .login form{

      background: transparent;

  }



  .login label{

      color: #fff;

  }

  

  .login form .input, .login form input[type=checkbox], .login input[type=text]{

    background: rgba(255, 255, 255, 0.4);

    border-radius: 20px;

  }



  .wp-core-ui p .button{

    background: rgba(255, 255, 255, 0.4);

    text-shadow: 0 0 0 rgba(0, 0, 0, 0);

    border: 1px solid #fff;

    box-shadow: 0 0 0 #000;

    border-radius: 15px;

  }



  input[type=checkbox]:checked:before{

      color: #131313;

  }



  .login #backtoblog a, .login #nav a{

      color: #fff;

  }



  .login #backtoblog a:hover, .login #nav a:hover, .login h1 a:hover{

      color:#df4646;

  }



  .sumbit #wp-submit{

    background: rgba(255, 255, 255, 0.4);

    text-shadow: 0 0 0 rgba(0, 0, 0, 0);

    border: 1px solid #fff;

    box-shadow: 0 0 0 #000;

    border-radius: 15px;

  }



  .btn {

    display: inline-block;

    cursor: pointer;

    border-radius: 4px;

    overflow: hidden;

    text-decoration: none;

    color: #FFF;

    font-size: 1.19rem;

    padding: 12px 24px;

    border: none;

    outline: none;

  }

  

  .btn--small {

    font-size: .88rem;

    padding: 7px 13px;

    font-weight: 300;

  }

  

  .btn--with-photo {

    padding-left: 40px;

    position: relative;

  }

  

  .btn--orange {

    background-color: #EE964B;

  }

  

  .btn--orange:hover {

    background: linear-gradient(#EE964B, rgb(235, 109, 0));

  }

  

  .btn--dark-orange {

    background-color: #F95738;

  }

  

  .btn--dark-orange:hover {

    background: linear-gradient(#F95738, rgb(204, 34, 0));

  }

  

  .btn--blue {

    background-color: #0D3B66;

  }

  

  .btn--blue:hover {

    background: linear-gradient(rgb(13, 80, 143), #0D3B66);

  }

  

  .btn--yellow {

    background-color: #F4D35E;

    text-shadow: 1px 1px 1px rgba(0, 0, 0, .22);

  }

  

  .btn--yellow:hover {

    background: linear-gradient(#F4D35E, rgb(240, 188, 0));

  }

  

  .btn--beige {

    background-color: #FAF0CA;

    color: #173f58;

  }

  

  .btn--beige:hover {

    background-color: #F4D35E;

  }

  

  .btn--gray {

    background-color: #222;

  }

  

  .btn--white {

    background-color: #FFF;

    color: #173f58;

  }

  

  .btn--white:hover {

    background-color: #DDD;

  }

  

  .btn--large {

    font-size: 1.3rem;

    padding: 16px 34px;

    border-radius: 7px;

  }

  

  @media (min-width: 530px) {

  

    .btn--large {

      font-size: 1.9rem;

    }

  }

  

  .btn--inactive {

    background-color: transparent;

    cursor: default;

    color: #333;

  }





  /*---- Start produktsida ----*/

    .sektion1-produkt {

    width:100%;

    text-align: center;

    float:none;

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    padding-top: 25px;

    position: relative;

    }



    .sektion1-produkt::before {

    background-color: rgba(0,0,0,0.15);

    color:#fff;

    opacity: 1;

    content:"";

    display: block;

    position: absolute;

    top: 0px;

    left: 0px;

    right: 0px;

    bottom: 0px;

    z-index: 1;

    -webkit-transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);

    transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);

    }



    .wu-post-title{

        padding-top: 10%;

        padding-bottom: 10%;

        position: relative;

        z-index:2;

        background: radial-gradient(rgba(0, 0, 0, 0.1),rgba(52, 52, 48, 0.1),rgba(0, 0, 0, 0));

    }

   



    .knapp{

    background-color: #df4646;

    padding: 10px 15px;

    color: #fff;

    margin: 5px;

    font-size: 14px;

    margin-top: 40px;

    margin-bottom: 45px;

    text-align: center;

    text-transform: uppercase;

    font-family:Cambria, Georgia, serif;

    position: relative;

    z-index:3;

    }



    a.knapp:hover{

        background-color: #df4646;

        color: #fff;

    }



    #knapp1,#knapp2{

        justify-content: flex-end;

    }

    

    .betyg{

    color:#fff;

    margin:auto;

    }



    .section-2-produkt{

        width: 100%;

        padding: 10px;

        margin: 0;

        margin-top: 20px;

        position: relative;

        background-color: transparent;

        display: flex;

        flex-wrap: wrap;

        z-index:3;

        justify-content: center;



    }



    .section-2-flexbox-1{

        flex: 1;

        margin: 3px;

        transform: skewY(4deg);

    }



    .section-2-flexbox-1:before{

        content: '';

        position: absolute;

        top: -2px;

        left: -2px;

        right: -2px;

        bottom: -2px;

        background: linear-gradient(315deg,#ededeb,#df4646);

        transform: skew(2deg,2deg);

        z-index: -1;

        max-height: 55px;

    }



    .section-2-flexbox-2{

        flex: 1;

        margin: 3px;

        transform: skewY(-4deg);

    }



    .section-2-flexbox-2:before{

        content: '';

        position: absolute;

        top: -2px;

        left: -2px;

        right: -2px;

        bottom: -2px;

        background: linear-gradient(65deg,#ededeb,#df4646);

        transform: skew(-2deg,-2deg);

        z-index: -1;

        max-height: 55px;

    }



    .opening-hours, .karta {

        background-color: #131313;

        text-align: center;

        padding:5px;

        margin-bottom:0px;



    }



    .opening-hours, .karta:hover{

        cursor: pointer;



    }



    #oppet {

        width: 100%;

        padding: 10px 0;

        text-align: center;

        background-color: #df4646;

        margin-top: 0px;

        font-family: raleway;

        border-top: 2px solid #fff;

        color: #fff;

        transform: skewY(-6deg);

        z-index: -1;

        position: relative;

    }



    .section-3-produkt{

        display: block;

        position: relative;

        margin: 0px;

        padding: 0px;

        background-color: #131313;



    }



    /* .galleri{

        

        display: grid;

        grid-template-columns: repeat(6,1fr);

        grid-auto-rows: minmax(150px, auto);

        grid-gap: 10px;

        margin: 0 auto;

        max-width: 960px;



    } */





    .galleri{

        width: 90%;

        box-sizing: border-box;

        margin: 0 5%;

        display: block;

        position: initial;

        z-index: 5;

        padding: 0;

        padding-bottom: 50px;

        -moz-column-gap: 0;

        -webkit-column-gap: 0;

        column-gap: 0;

        font-size: 0;

    }



    .mason-bild{

    display: inline-block;

    background: #131313;

    padding: 1px;

    margin: 0px!important;

    width: 100%;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    }



    .mason-bild ul{

        display: none;

    }



    .mason-bild img{

        width:100%;

    }



    .mason-bild:hover{

        opacity: 0.5;

    }



    .mason-bild-hide{

        display:none;

    }



    .besok-galleri{

        width: 90%;

        margin: 0;

        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        justify-content: center;

        position: relative;

        z-index: 5;

        padding: 0;

        -moz-column-gap: 0;

        -webkit-column-gap: 0;

        column-gap: 0;

        font-size: 0;

        box-sizing: border-box;

    }



    .besok-galleri img{

        flex:1;

        padding: 3px;

    }



    .besok-galleri img:hover{

        opacity: 0.8;

    }

    



    /* .upload-bild li{

        display: inline-flex;

        flex: 1;

        padding: 1px;

        margin: 0px!important;

        width: 100%;

        box-sizing: border-box;

        -moz-box-sizing: border-box;

        -webkit-box-sizing: border-box;

    }

    

    .upload-bild img{

        width:100%;

    }

    

    .upload-bild:hover{

        opacity: 0.5;

    } */



    .more, .less {

        margin: auto;

        background-color: #df4646;

        border-radius: 3px;

        clear: both;

        color: #fff;

        cursor: pointer;

        display: block;

        position: relative;

        z-index: 10;

        font-size: 14px;

        margin-top: 40px;

        margin-bottom: 45px;

        padding: 6px 0;

        text-align: center;

        text-transform: uppercase;

        width: 320px;

        font-family:Cambria, Georgia, serif;

      }





    /*Media för galleri*/



    @media only screen and (min-width: 350px) {

        .galleri {

            -moz-column-count: 2;

            -webkit-column-count: 2;

            column-count: 2;

        }

    }

    

    @media only screen and (min-width: 700px) {

        .galleri {

            -moz-column-count: 3;

            -webkit-column-count: 3;

            column-count: 3;

        }

    }

    

    @media only screen and (min-width: 900px) {

        .galleri {

            -moz-column-count: 4;

            -webkit-column-count: 4;

            column-count: 4;

        }

    }





/*---- Mobile ----*/

@media(max-width: 768px){

    #menu input.toggle:checked + div > ul li a{

        display: inline-block;

        width: 100%;

        color: #df4646;

        font-family: raleway;

        font-size: 20px;

        font-weight: 600;

        padding-left: 5%;

    }



    #menu{

        background: transparent;

    }





.rad-knappar-flex-mobile{

    background: radial-gradient(rgba(0, 0, 0, 0.8), rgba(52, 52, 48, 0.1), rgba(0, 0, 0, 0));

    list-style-type: none;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    align-items: center;

    padding: 35px 0px;

    width:100%;

    overflow: hidden;

    margin: 30px 0px;

    position: relative;

    z-index: 2;

}

.rad-knappar-flex{

    display: none;

}



.rad-knappar-mobile-conatainer{

    flex:1;

    padding: 50px 0px;

}



.skew-left{

    transform: skew(2deg, 5deg);

    margin-left: -15px;

}



.skew-right{

    transform: skew(-2deg, -5deg);

    margin-right: -15px;

}



.rad-betyg-mobile-conatainer{

    flex:2;

}



.knapp{

    display: inline-flex;

    min-width: 110px;

    font-size: 14px;

    margin: 5px auto;

}



.betyg{

    display:inline-flex;

}



.toggle-produkt-container{

padding: 0;

margin: 0;

}



.opening-hours h3, .karta h3{

    font-size: 16px;

}

.start-sektion2{

    padding-left: 0px;

}



.container-top4{

    display: flex;

    align-items: flex-start; 

    height: 250px;

    overflow-x: auto;

    overflow-y: hidden;

    padding: 5px 0px;

}



.container-top4 .box-top4{

    width:220px;



}



.galleri{

    margin-bottom: -440px;

}



.sektion-title-kategorier{

transform: skewY(-10deg);

text-align: center;

margin-bottom: 100px;

}



.start-sektion3, .kategori-bilder{

    padding-left: 0px;

    padding-right: 0px;

    margin-left: 0px;

    margin-right: 0px;

}



.kategori-col:nth-child(2){

    margin-top: 14%;

    margin-left: -70px;

}

.kategori-col:nth-child(3){

    margin-top: -10%;

    margin-left: 0px;

}

.kategori-col:nth-child(4){

    margin-top: 6%;

    margin-left: -100px;

}



.whatsup-direction-white:before {

    content: '';

    position: absolute;

    border-bottom: 40px solid #ffffff;

    border-right: 100vw solid transparent;

    top: -80px;

    left: 0px;

}



.whatsup-direction-red:before {

content: '';

position: absolute;

border-bottom: 40px solid #df4646;

border-left: 100vw solid transparent;

top: -80px;

}



.whatsup-direction-white-reverse:before {

content: '';

position: absolute;

border-bottom: 40px solid #fff;

border-left: 100vw solid transparent;

top: -80px;

}





.whatsup-direction-dark:before {

content: '';

position: absolute;

border-bottom: 40px solid #131313;

border-right: 100vw solid transparent;

top: -70px;

left: 0px;

}



.whatsup-direction-dark-reverse:before {

content: '';

position: absolute;

border-bottom: 40px solid #131313;

border-left: 100vw solid transparent;

top: -70px;

}

}







/*---- Desktop----*/

@media(min-width: 767px) {



    #menu input.toggle:checked + div > ul li a{

        display: inline-block;

        width: 100%;

        color: #df4646;

        padding-left: 5%;

    }



    .whatsup-heading-title{

        margin-top: -50px;

        margin-bottom: 25px;

    }

    



    .whatsup-mest-klick-row-container{

        width:80%;

        

    }



    .wu-featured-item-in-list:first-child { 

        margin-left:20px;

    }

    

    .wu-featured-item-in-list:last-child {

        margin-right:20px;

    }

    

    

    .wu-featured-item-in-list:first-child:hover { 

        margin-left:20px;

    }

    

    .wu-featured-item-in-list:last-child:hover {

        margin-right:20px;

    }



    a.alla-i-kat-img{

        padding: 75px 0px 120px 0px;

    }



    .start_sektion1 .whatsup-mest-klick-row{

        justify-content: center;

    

    }

    .rad-knappar-flex-mobile{

        display: none;

    }



    .rad-knappar-flex{

        min-height:230px;

        background: radial-gradient(rgba(0, 0, 0, 0.8), rgba(52, 52, 48, 0.1), rgba(0, 0, 0, 0));

        list-style-type: none;

        display: flex;

        flex-direction: row;

        justify-content: center;

        align-items: center;

        padding: 35px 10px 35px 10px;

        width:100%;

        overflow: hidden;

        margin-bottom: 2%;

        position: relative;

        z-index: 2;



    }



    .knapp{

        flex:1;

        font-size: 16px;

    }



    .betyg{

        flex:2;

    }

    .kategori-col:nth-child(2){

        margin-top: 2%;

        margin-left: -100px;

    }

    .kategori-col:nth-child(3){

        margin-top: 4%;

        margin-left: -100px;

    }

    .kategori-col:nth-child(4){

        margin-top: 6%;

        margin-left: -100px;

    }

    }



    /*---- end Desktop----*/