/*
--------------------------------------------------------------------------------------------------
  Butik: Bengans.se
  Detta CSS är en del av Askås Internetbutik.
  COPYRIGHT (c) ASKÅS INTERNET- & REKLAMBYRÅ AB 1997-2018. ALLA RÄTTIGHETER RESERVERADE.
--------------------------------------------------------------------------------------------------
*/

@media screen and (min-width : 960px) {
	.nav > ul > li > ul {
	    max-height: 80vh;
	    overflow-y: scroll;
	    overflow-x: visible;
	}
}

@media screen and (max-width : 1000px) {
	#topbar, #main, #breadcrumb, #footer-wrapper, .full-width.greySection, .full-width.blueWithWaves {padding-left:2%;padding-right:2%;}
	#main .no-padding {padding-left:0;padding-right:0;}
	.nav > ul > li > a {font-size: 12px !important; padding: 0 5px;}
	.topplista .PT_Wrapper {margin: 0.64% !important; width: 18.72%;}
}
/*
--------------------------------------------------------------------------------------------------
                               TABLET / maxbredd: 959px
--------------------------------------------------------------------------------------------------
*/
@media screen and (max-width : 959px) {
	#wrapper {overflow:hidden;padding: 70px 0 300px;}
	.blueWithWaves, .greySection { padding: 2em 0; }
	.logo img {max-height: 40px; width: auto;}

	#footer-wrapper {padding:20px;}
	#Bildkolumn, #Faktakolumn {width:100%;}
	#Faktakolumn {margin-left:0;}
	
	/* CUSTOM MOBILE DEVICES */
	html {-webkit-text-size-adjust:none; /* Prevent font scaling in landscape */}
	img {max-width:100%; max-height: 100%;  height:auto;}
	td, tr {text-overflow: ellipsis; white-space:normal;}
	/* table {width:100% !important;} */
	.Sokknapp, .Laggikorgen_Antalsfalt, #bestallningsknapp {-webkit-appearance:none;}
	
	/* NAV & TOPBAR */
.nav {
    transition: width 0.5s ease 0s;
    width: 0px; 
}

	.nav.active {
    display: block !important;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    width: 85%;
    z-index: 100;
    margin:0px;
    top: 0px;
}

#bodywrapper.active {
    left: 85%;
    min-height: 100%;
    position: fixed;
    width: 100%;
}
#bodywrapper.active #wrapper {padding: 0px; margin-top: -5px;}

#bodywrapper.active  #topbar {position: relative;}
	.nav {background:#000; position: absolute; width: 100%; left: 0px; top:70px; margin: 0px;}
	.mobile-only {display:inline-block;}
	.mobile-only i.fa-search {display:none;}
	.topbar i.fa-bars, .topbar i.fa-search {font-size:35px;margin:0 20px;line-height:70px;}
	.inloggning {margin: 20px 20px 20px 0px;}
	
	.nav {display:none; overflow:scroll; overflow-y:scroll; overflow-x:none; height:400px;}
	.nav ul {width:100%;}
	.nav ul li, .nav ul > li > ul {list-style: none; width: 100%; height:auto;}
	.nav ul li a {display: inline-block; width: 100%; padding:0px;}
	.nav ul.nav-menu > li > ul, .nav ul > li > ul {top:0px;}
	.nav ul li ul li ul {width: 100%; left: 0;}
	
	.nav ul li:hover ul {display:none;}
	.nav ul li.active > a, .nav ul li.active-parent > a {font-weight:bold; background:#D8EAEF;}
	.nav > ul > li > a {padding:0 0 0 10px;}
	 #topbar .nav ul li.active > a, #topbar .nav ul li.active-parent > a  {background:#333 !important; color:#fff !important;}

	.nav ul li ul li:hover {background:#333;}
	.nav ul li:hover > ul, .nav ul li ul li:hover ul, .nav ul li:hover ul li ul {display:none;}
	
	.nav ul li.active > ul, .nav ul li.active-parent > ul, .nav ul li ul li.active > ul, .nav ul li ul li.active-parent > ul {display:block !important; position:relative; background:transparent;}
	.nav ul li ul li {width:100%; display:inline-block;}
	.nav > ul > li > a,  .nav ul.nav-menu > lih {height: 55px; line-height: 55px;}
	
	/*.nav ul li ul li ul {display:block; position:relative;}*/
	
	 #AIRvarukorg-Wrap .RowWrap {margin-top: 20px;}
	 #AIRvarukorg-Wrap .BWrap {margin: 5px auto 0;}
	 

	
}
/*
--------------------------------------------------------------------------------------------------
                              MOBIL / maxbredd : 700px
--------------------------------------------------------------------------------------------------
*/
@media screen and (max-width : 850px) {
	/*GRID*/
	.col {margin:1% 0 1% 0%;}
	
	.span_1_of_1{width:100%}.span_2_of_2{width:100%}.span_1_of_2{width:100%}.span_3_of_3{width:100%}
	.span_2_of_3{width:100%}.span_1_of_3{width:100%}.span_4_of_4{width:100%}.span_3_of_4{width:100%}
	.span_2_of_4{width:100%}.span_1_of_4{width:100%}.span_5_of_5{width:100%}.span_4_of_5{width:100%}
	.span_3_of_5{width:100%}.span_2_of_5{width:100%}.span_1_of_5{width:100%}.span_6_of_6{width:100%}
	.span_5_of_6{width:100%}.span_4_of_6{width:100%}.span_3_of_6{width:100%}.span_2_of_6{width:100%}
	.span_1_of_6{width:100%}.span_7_of_7{width:100%}.span_6_of_7{width:100%}.span_5_of_7{width:100%}
	.span_4_of_7{width:100%}.span_3_of_7{width:100%}.span_2_of_7{width:100%}.span_1_of_7{width:100%}
	.span_8_of_8{width:100%}.span_7_of_8{width:100%}.span_6_of_8{width:100%}.span_5_of_8{width:100%}
	.span_4_of_8{width:100%}.span_3_of_8{width:100%}.span_2_of_8{width:100%}.span_1_of_8{width:100%}
	.span_9_of_9{width:100%}.span_8_of_9{width:100%}.span_7_of_9{width:100%}.span_6_of_9{width:100%}
	.span_5_of_9{width:100%}.span_4_of_9{width:100%}.span_3_of_9{width:100%}.span_2_of_9{width:100%}
	.span_1_of_9{width:100%}.span_10_of_10{width:100%}.span_9_of_10{width:100%}.span_8_of_10{width:100%}
	.span_7_of_10{width:100%}.span_6_of_10{width:100}.span_5_of_10{width:100%}.span_4_of_10{width:100%}
	.span_3_of_10{width:100%}.span_2_of_10{width:100%}.span_1_of_10{width:100%}.span_11_of_11{width:100%}
	.span_10_of_11{width:100%}.span_9_of_11{width:100%}.span_8_of_11{width:100%}.span_7_of_11{width:100%}
	.span_6_of_11{width:100%}.span_5_of_11{width:100%}.span_4_of_11{width:100%}.span_3_of_11{width:100%}
	.span_2_of_11{width:100%}.span_1_of_11{width:100%}.span_12_of_12{width:100%}.span_11_of_12{width:100%}
	.span_10_of_12{width:100%}.span_9_of_12{width:100%}.span_8_of_12{width:100%}.span_7_of_12{width:100%}
	.span_6_of_12{width:100%}.span_5_of_12{width:100%}.span_4_of_12{width:100%}.span_3_of_12{width:100%}
	.span_2_of_12{width:100%}.span_1_of_12{width:100%}

	.startpage-block .span_3_of_12 {width: 50%; }
	.desktop-only {display:none;}

	/* ARBETSYTA */
	#main, #breadcrumb, #footer-wrapper, .full-width.greySection, .full-width.blueWithWaves, .AndraKopteAven {padding-left:2%;padding-right:2%;}
	.PT_Wrapper {    margin: 2% !important;
    width: 46%;}
    .PT_Wrapper_All .PT_Pris, .PT_Wrapper_All .category, .PT_Wrapper_All .PT_Knappar {width: auto;}
	.category span {margin: 5px 0 5px 0;}
	.PT_wrapper.Lista .PT_Beskr {text-align: center; height: auto;}
	.PT_wrapper.Lista  .category {float: none;}
	.PT_wrapper.Lista  .category span {float: none;}
	.PT_wrapper.Lista .PT_Pris, .PT_wrapper.Lista  .PT_Knappar {width: auto;}
    .PT_Wrapper_All .PT_Knappar {    float: left; width: 50% !important;}
    .PT_wrapper.Lista .PT_Beskr, .PT_wrapper.Lista .PT_Pris, .PT_wrapper.Lista .PT_Knappar  {line-height: normal;}
    .PT_wrapper.Lista .PT_Knappar {margin:0 0 10px 0;}
	#main .no-padding, #topbar {padding-left:0;padding-right:0;}
	#topbar {min-height: 46px;}
	.Varukorg, .AIRvarukorg-Text i.fa-caret-down, .AIRvarukorg-Text i.fa-shopping-cart{line-height: 60px;}
	#kundvagn {height: 60px;margin-right:20px;}
	.header {padding:0;}
	#wrapper {padding: 60px 0 0;}
	.topbar.content {padding:0 10px 0 0; width:100%;}
	#AIRvarukorg-Wrap {width:100%; top: 50px;  }
	.inloggningsruta {width:100%; z-index:999; top:60px; padding: 5%; margin:0px;}
	.LSS_Container {display:none;}
	.logo img {height:30px;}
	.logo {margin:0 auto !important; position: absolute; left: 0px; right: 0px;}
	.logo {
    height: 60px;
    line-height: 66px;
    margin: 0 0 0 10px;
    width: 80px;
	}
	.logo a img {height: auto;}
	#footer-wrapper {position: relative;}
	.topbar i.fa-bars, .topbar i.fa-search, .login i {font-size:25px;margin:0 10px;line-height:60px;}
	.inloggning {height: auto; line-height: normal; margin: 0px;}
	.mobile-only i.fa-search {display:inline-block;}
	.sokrutan.col {margin:0; min-width: 1% !important;}
	
	.Flags {margin:0; padding:0; width:100%;}
	.Flags ul ul {display:block!important; position:relative!important;}
	.Flags ul:hover ul {width:100%; padding-top:0; left:0;}
	.Flags ul > li {margin: 0px; float: left; line-height: 45px; width: 100%; background:#000;}
	.Flags span {display:block; padding:0 10px; border-bottom: 1px solid #222; opacity:0.6;}
	.Flags span:before {margin-top:11px;}
	.Flags a {padding: 0 20px!important; border-bottom: 0px!important;}
	.inloggning a.login {}
	.blanket {display:none; position:absolute; background-color:#000; left:0; top:60px; width:100%; height:135px; z-index:-1; -moz-box-shadow:0 5px 8px -5px #333333; -webkit-box-shadow: 0 5px 8px -5px #333333; box-shadow:0 5px 8px -5px #333333;}
	
	/* NAV TOPMENU */
	.facebook-dropdown {width: 100%; padding:15px 10px 10px !important;}
	.facebook-dropdown .FB-dropdown-wrapper {position: relative!important; background: none !important; top: 0px;}
	.facebook-dropdown .close {top: 0px;}
	.facebook-dropdown ul {display: block; text-align: left;}
	.facebook-dropdown {margin-left:0;}
	.nav > ul > li > a {font-size: 18px !important}
	.facebook-dropdown, .Flags {display: none;}
	.nav .facebook-dropdown, .nav .Flags {display: block;}
	.nav ul li ul li:hover, .nav ul li ul li a:hover, .nav ul li ul li:hover {background:none !important;}

	/* STARTSIDA */ 
	.seo img { padding: 0 1em 0 0; max-width:150px;}
	.big-search-wrapper {text-align: center;}
	.startpage-block.big-search-wrapper .span_3_of_12 {width: 100%;}
	
	/* FOOTER */ 
	.footer-content {padding:10px 0px; margin:0px; border-top:1px solid #ddd; border-right:0px; min-height:50px;}
	#footer-wrapper strong {margin-bottom:5px !important;}
	#footer-wrapper .span_3_of_12 {margin-bottom:20px;}
	.socialfooter i {margin-right:15px;}
	
	/* LSS / SEARCH */
	.LSS_Container.active {display:block;position:absolute;top:60px;width:100%;right:0; padding: 5%;}
	#LSS_Result {top:110px;   overflow: scroll; padding: 5%;}
	#LSS_Result .section {max-height: 400px; overflow-x:scroll;}
	.LSS_Input:before {left: 5%;}
	#LSS_Result .close {top: 10px;}

	.LSS_Artiklar li {width: 49%;}
	/* ARTIKELGRUPP */ 
	.Artgrupp_header b {width:30%; float:left; height:20px; line-height:20px; margin:0 0 5px }
	.Artgrupp_header span select {width:100%;}
	.Artgrp_VisaFler a, .Artgrp_VisaFler span {min-width: 15px; font-size: 14px;}
	#ListaOmArtiklarSaknas li a {font-size:20px; padding:0px; text-align:center; line-height:40px; height:40px;}
.Artgrp_Sorteringsordning, .StilValjVisning {
    margin: 10px 0;
    width: 100%;
}

	.PT_Wrapper .PT_Pris div {float: left; margin:0 10px 0 0;}
	#ListaOmArtiklarSaknas ul li {width: 100%; }
	.Artgrupp_header div {margin: 0px;}
	.Artgrp_VisaFler {text-align: center; margin:20px 0 !important;}
	.Knapp_Kop a, .Knapp_Kop_Tabell, .PT_Knappar table, .PT_Wrapper_All .PT_Knappar, .PT_Knappar .Knapp_Kop { width: 100%;}
	.Knapp_Kop a {line-height: 35px; height: 35px; }
	.category {float: right;}

	/* PRODUKTBESKRIVNING */ 
	#ArtikelnamnFalt {margin:10px 0px; text-align:center;}
	#PrisFalt, #PrisFaltStafflade {text-align:center;}
	#FaltRader .span_6_of_12 {width: 49.16%;}
		
	/* CHECKOUT / KASSA / VARUKORG */ 
	#AIRvarukorg-Wrap .TxtWrap {width: 85%; }
	 #AIRvarukorg-Wrap {right:0px;}
	 #AIRvarukorg-Wrap .BWrap .RowWrap .Row .TxtWrap .DescrWrap {float:right; width:95%;}
	 #AIRvarukorg-Wrap .BWrap span.Close, .close {right:0px;}
	 ..Descr {font-size: 14px;}
	.Snabbkassa_Varukorg_Tabell { -moz-box-sizing: border-box; max-width: 100%; }
	.Snabbkassa_Varukorg_Tabell td { white-space: normal;}
	#dialogruta {top:0px;}
	#dialogruta div {width:100%;}
	#AdressblockLoggain table tbody tr td input {width:100px;}
	#AdressblockPaminnare table tbody tr td {width:100%; float:left; text-align:left !important; margin:1px 0px;}
	
	.Snabbkassa_Presentkort, .Kunddata, .Betalning, .Fraktmetoder, .GodkannaVillkorochBestallningsknappRam, .Kundtjanst {width:100%; min-height:10px;}
	.AIRvarukorg-Sum {display: none !important;}
	.Snabbkassa_Varukorg_Tabell_Rad.Snabbkassa_Varukorg_Tabell_Rad_Sum {width:100%;}
	.Snabbkassa_Varukorg_Tabell_Rad td.Antal, .Snabbkassa_Varukorg_Tabell_Rad_medskick td#antal1 {font-size:9px; width: 40% }
	#Klarna_InvoiceContainer, #overDiv {display:none !important;}
		.Snabbkassa_Varukorg_Tabell_Rad .Antal a {width:100%;}
	.Snabbkassa_Varukorg_Tabell_Rad_st {display:none;}
 .Snabbkassa_Varukorg_Tabell_Rad td.Pris
{width: 19%;}
	.Kassan {width: 100%}
	.Snabbkassa_Varukorg_Tabell_Rad_Beskr {float: left; line-height: 20px; margin: 5px 0 20px;}
	.Snabbkassa_Varukorg_Tabell_Rad.Snabbkassa_Varukorg_Tabell_Rad_Sum, #wrapper, .footer, 
	.topline, #kundvagn, #wrapper, .footer {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
	#SKM_Erbjud::after, #SKM_Erbjud_Riktat::after {content:""; display:block; clear:both; visibility:hidden;}
	#SKM_Erbjud, #SKM_Erbjud_Riktat {display:block; padding-left:17%;}
	#SKM_Erbjud input, #SKM_Erbjud_Riktat input {width:5%;}
	#SKM_Erbjud i, #SKM_Erbjud_Riktat i {width:78%;}
	
	#SKM_Erbjud .Snabbkassa_Kunduppgift_Etiketter {display:none !important;}
	
	/* MAGIC ZOOM */
	.MagicThumb-background {position:relative !important;}
	
	/* OWL-KNAPPAR */
	.owl-theme .owl-controls .owl-page span {
		width: 33px !important;
		height: 33px !important;
  		background-size: 33px auto !important;
		margin: 5px 5px !important;
	}
	.owl-theme .owl-controls {
    margin-top: -20px !important;
	}
	
	/* NYHETSBREV */
	#nyhetsbrev_footer .mceVisualAid .span_6_of_7 {width:85.48%}
	#nyhetsbrev_footer .mceVisualAid .span_1_of_7 {width:12.91%}
}
@media screen and (max-width : 740px) {
.topplista .PT_Wrapper {margin: 0.6% !important; width:23.8%;}
}


@media screen and (max-width : 600px) {
	/* Anpassning - MaS 24 maj - 18, göra nyhetsbrev responsiva */
	.nyhetsbrev td {
		display: inline-block;
		width:-moz-calc(100vw - 4%) !important; width:-webkit-calc(100vw - 4%) !important; width:-o-calc(100vw - 4%) !important; width:calc(100vw - 4%) !important;
		padding: 5px;
	}
	#BetalningsmetoderRam span, #FraktmetoderRam span {width:49%;}
	.Snabbkassa_Flik_Normal {margin:20px 0 5px;}
	#AIR_Klarna_Checkout br {display:none;}
}


@media screen and (max-width : 540px) {
.topplista .PT_Wrapper {margin: 0.56% !important; width:32.2%;}
}
@media screen and (max-width : 400px) {
.PT_Bildruta a {line-height: 180px; height: 180px; overflow: hidden;}
.topplista .PT_Wrapper {margin: 2% !important; width:46%;}
}
@media screen and (max-width : 310px) {
	.nyhetsbrev tr {display: inline-grid; width: 100% !important;}

}