@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700');

input, select, textarea {font-size: 14px !important}

body {border-top: solid 3px #67696e; font-family: Noto Sans, Source Sans Pro, Arial; font-size: 14px;}
h1, h2, h3, h4, h5, h6 {font-weight: 400 !important}
a {color: #333333; font-weight: 400;}
a:hover {color: #444444;}
i.notif-count {position: relative !important; display: block;}
i.notif-count span {position: absolute; top: 0px; right: 0px; z-index: 99; padding: 2px 3px; border-radius: 5px; font-size: 12px;}

div.pagination {margin: 25px 0px; height: 40px; text-align: center;}
div.pagination strong {margin: 3px; background-color: #6C757D; border: solid 1px #CCCCCC; padding: 5px 13px; color: #FFFFFF; border-radius: 6px;}
div.pagination a {margin: 3px; display: inline-block; background-color: #FFFFFF; border: solid 1px #CCCCCC; padding: 5px 13px; border-radius: 6px;}
div.pagination a:hover {background-color: #6C757D; color: #FFFFFF;}

div.overlay {position: absolute; z-index: 2; width: 100%; background-image: url(../images/shadow-bg.png); background-position: center bottom; background-repeat: repeat-x; height: 100%; cursor: pointer; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s;}
div.overlay:hover {background-color: rgba(0,0,0,0.5); height: 100%; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s;}

/* ACCOUNT */
div.address {background-image: url(../images/adress-card-icon.png); background-repeat: no-repeat; background-position: right top;}

/* BASKET */
div.stepper ul {text-align: center;}
div.stepper ul li {background-color: #DDDDDD; display: inline-block; padding: 7px 12px; width: 180px; margin: 5px 10px; border-radius: 3px; text-align: left;}
div.stepper ul li span.circle {font-size: 20px; color: #777777; font-weight: 600;}
div.stepper ul li span.label {font-size: 16px; color: #777777;}

div.stepper ul li.active {background-color: #28a745 !important;}
div.stepper ul li.active span.circle {color: #FFFFFF;}
div.stepper ul li.active span.label {color: #FFFFFF;}

input.card-input:focus {border: solid 1px #ccc; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; transition: none; -moz-transition: none; -webkit-transition: none;}
footer {font-size: 12px;}

.fixed-phone {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 100%;
    bottom: 155px;
    right: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 25px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: fixed;
    z-index: 3;
}

.fixed-whatsapp {
    width: 50px;
    height: 50px;
    line-height: 45px;
    border-radius: 100%;
    bottom: 95px;
    right: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 45px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: fixed;
    z-index: 3;
}

.fixed-whatsapp svg, .fixed-phone svg {
	vertical-align: middle;
}

.fixed-phone:hover i, .fixed-whatsapp:hover i, .fixed-phone:hover svg, .fixed-whatsapp:hover svg {
	animation: shake 1s cubic-bezier(.36,.07,.19,.97) both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
  }
  
  @keyframes shake {
	10%, 90% {
	  transform: translate3d(-1px, 0, 0);
	}
  
	20%, 80% {
	  transform: translate3d(2px, 0, 0);
	}
  
	30%, 50%, 70% {
	  transform: translate3d(-4px, 0, 0);
	}
  
	40%, 60% {
	  transform: translate3d(4px, 0, 0);
	}
  }

  /* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}
/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .storiesSticky {
  padding-top: 118px;
}

.storiesSticky{
  z-index: 3;
}