@charset "utf-8";
/* CSS Document */
/* @import url(//fonts.googleapis.com/css?family=Dosis) */

@font-face {
    font-family: open sans;
    src: url(../fonts/open-sans/OpenSans-Regular.ttf);
}

html {}
body{
    margin: 0;
    padding: 0;
    color: #2a2e33;text-shadow:none;    background-color:rgba(255,255,255,0) ;
    font-size: 16px;
}

*:focus {
    outline: none!important;
}

a{
    text-decoration: none;
    color: #2a2e33;
}
a:hover,a:active,a:focus{
  text-decoration: none;
  color: #2a2e33;
}

.navbar-nav>a:visited{
    color:#cecec6;
}
 
.card-push{
    background-color:transparent;
    border:none;
    text-align: left;
    width: 100%;
}
::-moz-selection {
    color: #fff;
    background:silver;/* rgb(127,210,217);/*255,156,38 = orange || 127,210,217 = blue || 174,223,227 = ciel*/
}
::selection {
    color: #fff;
    background:silver;/* rgb(127,210,217);*/
}
a.back-to-top {
    display: none;
    font-size: 23px;
    color: darkslateblue;
	padding: 3px 0 0 5px;
	width: 35px;
	height: 35px;
	position: fixed;
	z-index: 999;
	right: 7px;
	bottom: 20px;
	background: transparant;
}
.red{color: lightcoral;}
.neutral{color:lightseagreen;}
.green{color: forestgreen;}
.orange {color:coral;}
.obin_allControl{}
.obin_allControlTop{}.obin_allControlMainClient{}
.obin_allControlMainClient::after{
    content: "";
    display: block;
    clear: both;
}
.spacebottom{margin-bottom: 1em;}
.marginauto{margin: 0 auto;}
.margSM{margin: 2px 0;}
.clearfix::after{
    clear: both;
    display: block;
    content: "";
    visibility: hidden;
    height: 0;
}

@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .2;
    }
}

.saving span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

.saving span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

.saving span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}

#obin_Nav{
    padding-top:0;
   /* padding-right:; */
    padding-bottom:0;
    padding-left:0;
    /* Animation */
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
}
.navbar-nav>li>a,#obin_ulnav .dropdown-menu>li>a{
    color:#cecec6;
    font-weight: not set;
    font-size:not set; 
}
.dropdown-item{
    color:#cecec6;
}
#obin_Nav .navbar-nav>.mdisabled>a{
    color:#9e9e9e;
}
#obin_Nav .dropdown-menu{background-color:#221e1f;}
#obin_Nav .menuActive{
    font-weight: bold;
    color:rgb(196,185,39);
    font-size:not set;
}

.obin_brandLogo{
    padding:0;
}
.obin_brandLogo img{
    height:50px;
    /* Animation */
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
}

.navbar-brand{margin-right:2rem;}
.navbar-toggler{border:none;outline: 0 none;}
.obin_burger_icon{
width: 30px;
height:20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}



.obin_burger_icon span{
display: block;
position: absolute;
height: 1px;
width: 100%;
border-radius: 0px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
outline: none;
}

.obin_burger_icon span {background-color: white;}
.obin_burger_icon span:nth-child(1) {top: 0px;}
.obin_burger_icon span:nth-child(2), .obin_burger_icon span:nth-child(3) {top: 10px;}
.obin_burger_icon span:nth-child(4) {top: 20px;}
.obin_burger_icon.obin_burger_open span:nth-child(1) {top: 11px;width: 0%;left: 50%;}
.obin_burger_icon.obin_burger_open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.obin_burger_icon.obin_burger_open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.obin_burger_icon.obin_burger_open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}
.obin_navShrink{
    font-size:0.8rem;
    background-color:#cecec6;
}

.obin_fullBG {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
  z-index: -3000;
}

.obin_fullBG img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}
.btn{
    background-color:rgba(0,0,0,0);
    font-weight: not set;
    color:#5a5750;
    font-size:not set;
    border:1px solid #b0aca5;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}

/*overwrite back colour bg color of btn for the bootstrap colors*/
.btn-default{background-color:rgba(255,255,255,0);}
.btn-primary{background-color:#72acdf;}
.btn-secondary{background-color:#c7d9e0;}
.btn-success{background-color:#82df83;}
.btn-ok{background-color:#82df83;}
.btn-warning{background-color:#ecaa45;}
.btn-danger{background-color:#d3391c;}
.btn-info{background-color:#d1ead8;}


.carousel-item{
  height: 100vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.announcePlace{
 position: absolute;
 top: 53%; 
 left: 0; 
 min-width: 100%;   
}
.announcement{
   font-size: 2rem;
   font-style: italic;
   color: #f0f7f8;
   background-color:rgba(228,221,237,0);
   border-radius:10px;
   border:0.5px none aliceblue;
   padding:3em 0;
   margin:-3em 0 0 0; 
 }
#announcement{
    color: #f0f7f8;   
}

/*joostSpiessensTriangle*/
.trianSP{
width: 0;
height: 0;
border-style: solid;
border-width: 0 100vw 155px 150px;
border-color: transparent transparent  #ffee3b transparent;
}


/* ********************
OVERLAY search with outside close
*/ 

.obin_searchcurtain{
    height: 0%;
    width: 100%;
    position: fixed;
    top: 37px;
    left: 0;
    overflow-x: hidden;
    transition: 0.5s;
    display: none;
   z-index: 1100;
   background-color: rgba(251,251,253, 0.97);
}

.obin_searchCurtainUnder{
    height: 0%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow-x: hidden;
    transition: 0.5s;
    display: none;
    z-index: 1099;
    background-color: rgba(211,151,53, 0);  
}

.obin_searchcurtain-content {
    position: relative;
    top: 27%;
    width: 100%;
    text-align: center;
  /*  margin-top: 30px; */
}

.obin_searchcurtain .closebtn {
    position: absolute;
    top: 20px;
    right: 35px;
  /*  font-size: 60px; */
}

@media screen and (max-height: 450px) {
  .obin_searchcurtain a {font-size: 20px}
  .obin_searchcurtain .closebtn {
    top: 15px;
    right: 25px;
  }
}

/* ********************
.OVERLAY search with outside close
*/

.sizeUnAvailable{
    color: grey;
    font-style: italic;
}

.sizeAvailable{
   font-weight: bold; 
}

.sizebackstroke{
    position: absolute; 
    bottom: 0; 
    width: 100%; 
 /*   height: 23px; */
    background-color: rgba(245,243,247,0.87);
}

.obin_teaser_frame{
    max-width: 100%;
    max-height: 100%;
    height: 100%; 
    width: 100%;    
}

.obin_teaser_overlay{
    max-width: 100%;
    max-height: 100%;
    height: 100%; 
    width: 100%;
    padding: 1px;
}

.obin_teaser_frame img{
    object-fit: cover;
    object-position: top;
    height: 100%;
    width: 100%;
}

.obin_teaser::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.obin_teaser_content {
  position: absolute;
  width: 100%;
  height: 100%;
}


/*
/////////////////////////////////////////
WEBSHOP IMAGES LAYOUT
/////////////////////////////////////////
*/


.obin_web_base{
}

.obin_web_base::after {
  content: "";
  display: block;
  padding-bottom: 147%; /*makes the proportions: 4/3*/
}
.obin_web_content {
  position: absolute;
  width: 100%;
  height: 100%;
}

.obin_web_frame{
    max-width: 100%;
    max-height: 100%;
    height: 100%; 
    width: 100%;    
}

.obin_web_overlay{
    padding: 1px;
    padding-bottom: 3.6rem;
}

/* enkel voor de static afbeeldingen, niet voor de carousel */

.obin_web_frame img{
    object-fit: cover;
    object-position: top;
    height: 100%;
    width: 100%;
}


.heighthundred{height: 100%;}


.uptodateNfo{
    position: absolute;
    top: -7px;
    left: 0;
    display: inline-block;
}

#NfoMessage{
    padding-left: 0.7em;
 /*   font-weight: bold; */
}

.NfoMessage{
    font-size: 1.7rem;
}

.uNew::after{
    content: '';
    display: block;
    position: absolute;
    left: 1px;
    right: 6px;
    height: 2px;
    bottom: 8px;
    background: #c484ea;
}

.uNew{color: #c484ea;}


.uLast::after{
    content: '';
    display: block;
    position: absolute;
    left: 1px;
    right: 6px;
    height: 2px;
    bottom: 8px;
    background: #8699a1;
}

.uLast{color: #8699a1;}

.uOut::after{
    content: '';
    display: block;
    position: absolute;
    left: 1px;
    right: 6px;
    height: 2px;
    bottom: 8px;
    background:  #dadfdf;
}

.uOut{color: #dadfdf;}

.uSoon::after{
    content: '';
    display: block;
    position: absolute;
    left: 1px;
    right: 2px;
    height: 2px;
    bottom: 8px;
    background: #8c4178;
}

.uSoon{color: #8c4178;}

.uSale::after{
    content: '';
    display: block;
    position: absolute;
    left: 1px;
    right: 1px;
    height: 2px;
    bottom: 8px;
    background: #f9eaf8;
}

.uSale{color: #f9eaf8;}

.itemSaleprice{
   color:crimson;
   font-weight: bold;
   padding-left: 1em;
}

.itemBaseprice{
   font-size:0.8em;
   text-decoration: line-through;
   color: gray; 
}

.itemprice{
    
}

.saleprocent{
   position: absolute;
   bottom: 3.7em;
   right: 5px;
   color: #ffffff;
   font-size: 1.3rem; 
}

.procentSale{
    font-size: 3.1rem;
}

.procentSign{
    font-size: 1.9rem;
}

.procentOff{
    text-transform: uppercase;
}

.clickregion{
    position: absolute; 
    top: 0;
    width: 70%; 
    height: 100%; 
    margin-left: 15%; 
    background-color: transparent; 
  /*  background-color: rgba(234,134,24,0.34); */
}

.clickregionStill{
    position: absolute; 
    top: 0;
    width: 97%; 
    height: 97%; 
    margin-left: 1%;
    margin-top: 1%; 
    background-color: transparent; 
 /*   background-color: rgba(234,134,24,0.34); */
}

.sizebackstroke{
    margin-bottom: 4.1em;
}


/*
/////////////////////////////////////////
.WEBSHOP IMAGES LAYOUT
/////////////////////////////////////////
*/



/*
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////        MEDIA SCREENS         ////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    .navbar-collapse{
    background-color: #221e1f;
    text-shadow: ;
    }
}

/* Medium devices (tablets, less than 768px)*/
@media (max-width: 767.98px) {
    .obin_brandLogo img{
    height:25px;
    } 
}

/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
    #navbarNavDropdown{
        max-height: 513px;
        overflow-y: auto;
        padding-left: 1rem;
    }
    .obin_navShrink{
        font-size:1rem;
        background-color:#cecec6;
    }
    #obin_Nav{
        padding-right:0;
    }
}


/* @media screen and (max-width: 768px){
Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .navbar-collapse{
    background-color: #221e1f;
    text-shadow: ;
    }    
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .navbar-collapse{
        background-color:#221e1f;
        text-shadow: none;
    }    
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    
}