/* @import url('https://fonts.googleapis.com/css?family=Anton|Oswald|Righteous|Roboto|Rubik+Mono+One&display=swap'); */
p { margin:0 !important}
body { overflow-x:hidden }
.oswald { font-family: Oswald }
.anton { font-family: Anton;  }
.roboto { font-family: Roboto }
.rubik { font-family:'Rubik Mono One' }
.righteous { font-family: Righteous }

.font10 { font-size:10pt }
.font12 { font-size:12pt }
.font14 { font-size:14pt }
.font16 { font-size:16pt }

.white { color:#fff }
.boxed { max-width:1280px !important }

.grey {
    background-image:url(/templates/koerrit.nl/images/b1.jpg);
    background-size:cover;
    background-position:center center;

}

.h2Text { position:relative;overflow:hidden;font-family:oswald; font-size:16pt;color:#444; font-weight:700;text-align:center;padding-bottom:10px;margin-bottom:10px }

#topElement1 {
    /* background:#A1CD3A; */
    background: #808285;
    padding:10px 0;
}
.xs#topElement1 {
    padding: 10px 0 !important;
}
#topElement2 {

    padding:15px 0;
    z-index:5000;
    height:120px;
    /* background:url(/templates/thegamedistrict.nl/upload/wallpapers/klein1.jpg) center center no-repeat; */
    background:#E6E7E8;
    background-size:cover;
}

.topElement2_1{
    position:absolute;top:-15px;bottom:0;
    left:-50%;right:50%;
    background:rgba(0,0,0,0.2);
    transform:translate(-100%);
    transition-duration: 1s;
}
.topElement2_2{
    position:absolute;top:-15px;bottom:0;
    left:50%;right:-50%;
    background:rgba(0,0,0,0.2);
    transform:translate(100%);
    transition-duration: 1s;
}
.topElement2_in {
    transform:translate(0);
}

.sm#topElement2,.xs#topElement2 { padding:15px 0 }


#topElement3 {

    /* box-shadow:0 0 15px rgba(0,0,0,0.7); */
    z-index:4000;
}
#topElement4 {

    /* box-shadow:0 0 15px rgba(0,0,0,0.7); */
    z-index:8000;
}
#topElement3  { background:#A1CD3A }
/*
.sm#topElement3 > .boxed { padding:0 }
.sm.flexMenuItem { font-size:12pt }
.xs.flexMenuItem { font-size:12pt }
*/
.flexMenuSub_01 {
    position:absolute;
    overflow:hidden;
    top:55px;
    left:0;right:0;
    background:#A1CD3A;
    height:40px;
    padding:0 ;

    border-radius:0 0 8px 8px;
    border-bottom:1px solid #aaa;
    z-index:2;
}
.flexMenuBig_01 {
    position:absolute;
    top:95px;
    left:0;right:0;
    background:rgba(255,255,255,0.95);
    height:100px;
    padding:15px;
    box-shadow:0 0 10px #000;
    z-index:1;
}
#topSlider {
    background:#555;
    padding: 0;
}
.md#topSlider {
    height:300px;
    padding: 0 !important;
}
.sm#topSlider {
    height:230px;
    padding: 0 !important;
}
.xs#topSlider {
    height:200px;
    padding:  0 !important;
}
.flexMenu_01 {
    position:relative;overflow:visible;;
    z-index:3;
    background:#A1CD3A;
}
#flexBig { position:relative;overflow:visible;}
.flexMenuItem {
    float:left;
    padding:15px 20px;
    color:#fff;
    border-left:1px dotted rgba(255,255,255,0.3);
    font-family:oswald;
    font-size:14pt;
    height:55px;
}
.flexMenuSubContainer {
    position:relative;overflow:hidden;height:40px;
}
.flexMenuSubItem {
    float:left;
    color:#222;
    border-left:1px dotted rgba(255,255,255,0.6);
    font-family:roboto;
    font-size:12pt;
    line-height:40px;
    padding:0 15px;
}
.flexMenuItem:hover { background:rgba(255,255,255,0.2) !important; }
.cart_01 { margin-top:20px; }
.searchbar_01 { position:relative;overflow:hidden;border:1px solid #ccc;margin-top:20px ;border-radius:3px }
.searchbarInput { margin:0;padding:0 10px;border:0;background:none;width:100%;font-family:arial;font-size:14pt;color:#555;outline:none;height:100%; }
.xs#flexShop { height:14px !important}
.sm#flexShop { height:22px !important}
.sm#menuCart { margin-right:15px }
.language,.currency { background:rgba(255,255,255,0.3); padding:5px 5px;border:1px solid rgba(255,255,255,0.5);width:65px;height:30px; float:right;border-radius:3px;margin-left:5px}
.selectBox { border:0; background:none;height:100%;width:100%;color:#444;font-family:arial;font-size:10pt;outline:none }


.xs#topSlider { height:200px }
.sm#topSlider { height:220px }
.md#topSlider { height:250px }
.lg#topSlider { height:300px }
.xl#topSlider { height:350px }
/*
new prodsucts
 */
#newProds { padding:40px 0; background:#f0f0f0 }

/*
sec prodsucts
 */
#secProds { padding:40px 0; background:#fafafa }

/*
dump prodsucts
 */
#dumpProds { padding:40px 0; background:#f0f0f0 }

/*
reviews
 */
#revs {
    background:#49A8DE;
    padding:30px 0;
}
/*
info
 */
#info {
    background:#737E99;
    padding:30px 0;
}

/*
footer
 */
#footer {
    background:#A1CD3A;

}

.buttonGrey { margin:10px 10px 0 0 ; padding:7px 10px; border:1px solid #aaa;border-radius:5px; box-shadow:0 0 10px #aaa;font-size:10pt;color:#555;font-weight:700;font-family:roboto }
.inputDefault { margin:10px 10px 0 0 ; padding:7px 10px; background:#fff;border:1px solid #aaa;border-radius:5px; box-shadow:0 0 10px #aaa;font-size:10pt;font-weight:700;font-family:roboto }

.gradGreyLight {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f5f5f5+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(245,245,245,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(245,245,245,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(245,245,245,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 ); /* IE6-9 */
}

.categoryMenu {
    position:relative;overflow:hidden;
    text-align:center;
    background:#4bf;
    margin-bottom:15px;
}
.categoryMenuItem {
    display:inline-block;
    margin:0;vertical-align: middle;
    position:relative;overflow:hidden;padding:10px 20px;
    font-family:roboto;
    font-size:11pt;
    font-weight:700;
    color:#111;
}
.flexMenuSubItem:hover { background:rgba(0,0,0,0.3); color:#fff }
.activeCategory { background:rgba(255,255,255,0.7);  }

.sticky {
    position:sticky !important;
    position: -webkit-sticky !important;
    top:0;
}

.xm.prodList { width:calc(100%) }
.sm.prodList { width:calc(100%) }
.md.prodList { width:calc(100% - 265px ) }
.lg.prodList { width:calc(100% - 265px) }
.xl.prodList { width:calc(100% - 265px) }
.prodListBlock.forceLine > .productItem > .prodListItem > .prodImage > img {
    object-position:0 0 !important;
}
#basketElement {
    background:#f0f0f0;
    padding:40px 0;
}
#userElement {
    background:#f0f0f0;
    padding:40px 0;
}
.miniMenuHide { transform:translateX(-110%) }
.miniMenu {
    position:fixed;
    overflow:hidden;
    overflow-y:auto;
    top:0;
    left:0;
    bottom:0;
    z-index:9000;
    background:rgba(30,30,30,0.95);
    width:80%;
    max-width:300px;
    box-shadow:0 0 20px rgba(0,0,0,0.6);

    transition-duration: 0.3s;
}
.miniMenuItem {
    position:relative;
    overflow:hidden;
    padding:10px;
    border-top:1px solid #333;
    border-bottom:1px solid #000;
    font-family:oswald;
    font-size:14pt;
    color:#fff;
    background:rgba(0,0,0,0.3);
}

.miniMenuSub {
    position:relative;
    overflow:hidden;
    padding:10px 10px 10px 20px;
    border-top:1px solid #777;
    border-bottom:1px solid #000;
    font-family:roboto;
    font-size:10pt;
    background:rgba(255,255,255,0.1);
    color:#ddd;
}
.miniMenuCont {
    display:none;
    transition-duration: 0.3s;
}

.miniFilter {
    position:fixed;
    top:0;right:0;bottom:0;
    overflow:hidden;
    overflow-y:auto;
    background:#f0f0f0;
    width:80%;
    max-width:350px;
    z-index:9000;
    box-shadow: 0 0 15px #444;
    padding:15px;
    transition-duration: 0.3s;
}

.miniFilterHide { transform:translateX(110%) }

.basketRow {
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    font-family:roboto;
    font-size:12pt;
    background:#fff;
    padding: 10px;
}
.basketRowLow {
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    font-family:roboto;
    font-size:12pt;
    background:#fff;
    padding: 5px 10px;
}


#loaderBack {
    position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);
}
#loader {
	display:none;
	position:absolute;
	z-index:9999;
	top:50%;
	left:50%;
	margin-top:-24px;
	margin-left:-24px;
	overflow:hidden;
	width:32px;height:32px;
	border: 12px solid #C1E0F4; /* Light grey */
    border-top: 12px solid #fa0; /* Blue */
    border-radius: 50%;
    animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

#loginBlock {
    position:fixed;
    top:50%;
    left:50%;
    width:80%;
    max-width:400px;
    background:#fafafa;
    border-radius:8px;
    transform:translate(-50%,-50%);
    box-shadow:0 0 15px #333;
    border:1px solid #222;
    padding:15px;
    z-index:9999;
}
#loginBlockMain {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:-50px;
    background:rgba(0,0,0,0.7);
    z-index:9998;
    display:none;
}
#overlaymentLeft {
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:50%;
    background:rgba(0,0,0,0.8);
    transform:translate(-100%,-50%); /* Standard syntax */
    transition-duration: 0.7s;
    z-index:9999;
    border-radius:512px;
}
#overlaymentRight {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:50%;
    background:rgba(0,0,0,0.8);

    transform:translate(100%,50%); /* Standard syntax */
    transition-duration:0.7s;
    border-radius:512px;
    z-index:9999;
}
.curtain { transform:translate(0,0) !important; transition-delay:0.3s;border-radius:0 !important; transition: border-radius:1.5s !important; transition-duration: 0.7s }
#loader {
	display:none;
	position:absolute;
	z-index:9999;
	top:50%;
	left:50%;
	margin-top:-24px;
	margin-left:-24px;
	overflow:hidden;
	width:64px;height:64px;
	border: 12px solid #444; /* Light grey */
    border-top: 12px solid #0af; /* Blue */
    border-radius: 50%;
    animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

.bgad {
    background-image: linear-gradient(135deg, #111111 25%, #333333 25%, #333333 50%, #111111 50%, #111111 75%, #333333 75%, #333333 100%);  background-size: 28.28px 28.28px;
}