:root {
  --inputBoxBlue: RGB(170,170,255);
}



/*Class mobile-show. Shows on mobile, hides on the rest*/
@media screen and (max-width: 767px){
  .mobile-show{
    display: block;
  }
  .mobile-show.inline{
    display: inline-block;
  }
  .others-show{
    display: none!important;
  } 
}
@media screen and (min-width: 768px){
  .mobile-show{
    display: none!important;
  }
  .others-show{
    display: block;
  }
  .others-show.inline{
    display: inline-block;
  }
}



.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.mw-25 {
  max-width: 25% !important;
}

.mw-50 {
  max-width: 50% !important;
}

.mw-75 {
  max-width: 75% !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mw-auto {
  max-width: auto !important;
}



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

  .w-md-25 {
    width: 25% !important;
  }

  .w-md-50 {
    width: 50% !important;
  }

  .w-md-75 {
    width: 75% !important;
  }

  .w-md-100 {
    width: 100% !important;
  }

  .w-md-auto {
    width: auto !important;
  }

  .mw-md-25 {
    max-width: 25% !important;
  }

  .mw-md-50 {
    max-width: 50% !important;
  }

  .mw-md-75 {
    max-width: 75% !important;
  }

  .mw-md-100 {
    max-width: 100% !important;
  }

  .mw-md-auto {
    max-width: auto !important;
  }
  
}


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

  .w-lg-25 {
    width: 25% !important;
  }

  .w-lg-50 {
    width: 50% !important;
  }

  .w-lg-75 {
    width: 75% !important;
  }

  .w-lg-100 {
    width: 100% !important;
  }

  .w-lg-auto {
    width: auto !important;
  }

  .mw-lg-25 {
    max-width: 25% !important;
  }

  .mw-lg-50 {
    max-width: 50% !important;
  }

  .mw-lg-75 {
    max-width: 75% !important;
  }

  .mw-lg-100 {
    max-width: 100% !important;
  }

  .mw-lg-auto {
    max-width: auto !important;
  }
  
}


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

  .w-xl-25 {
    width: 25% !important;
  }

  .w-xl-50 {
    width: 50% !important;
  }

  .w-xl-75 {
    width: 75% !important;
  }

  .w-xl-100 {
    width: 100% !important;
  }

  .w-xl-auto {
    width: auto !important;
  }

  .mw-xl-25 {
    max-width: 25% !important;
  }

  .mw-xl-50 {
    max-width: 50% !important;
  }

  .mw-xl-75 {
    max-width: 75% !important;
  }

  .mw-xl-100 {
    max-width: 100% !important;
  }

  .mw-xl-auto {
    max-width: auto !important;
  }
  
}




.lh-inherit {
  line-height: inherit;
}

.lh-initital {
  line-height: initial;
}

.lh-0 {
  line-height: 0;
}

.lh-1 {
  line-height: 1;
}

.lh-15 {
  line-height: 1.5;
}

.lh-17 {
  line-height: 1.7;
}

.lh-18 {
  line-height: 1.8;
}

.lh-20 {
  line-height: 2.0;
}




.overflow-hidden {
  overflow: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-hidden {
  overflow-y: hidden;
}





.petite-caps {
  font-variant: all-petite-caps;
}


.block-links a {
  display: block;
  padding: 7px 0;
  border-bottom: 1px solid #ccc;
}



.button {
  padding: 5px 18px;
  border: 1px outset;
  border-radius: 12px;
  cursor: pointer;
}

.button:active {
  border-style: inset;
}


.disabled, a.disabled, button.disabled {
  pointer-events: none;
}



.circle, .square {
  width: 40px;
  height: 40px;
  display: inline-block;
  position: relative;
}

.circle { border-radius: 50%; }

.circle>*, .square>* {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}


.heart {
  position: relative;
  width: 40px;
  height: 40px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: red;
}
.heart:before, .heart:after {
  position: absolute;
  width: 40px;
  height: 40px;
  content: '';
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-color: red;
}
.heart:before {
  bottom: 0px;
  left: -20px;
}
.heart:after {
  top: -20px;
  right: 0px;
}


.diamond {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)
}






.spins {
  animation: spin-d 2s infinite linear;
}

@keyframes spin-d {
  
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform:rotate(359deg);
  }

}



.infinite-fade {
  animation: anim-fade-s 3.5s infinite;
}
.infinite-fade:hover {
  animation: none;
}
  
@keyframes anim-fade-s {
  30% {
    opacity: 0;
  }
}



.animate-opacity{animation:opac 1.5s}@keyframes opac{from{opacity:0} to{opacity:1}}
.animate-top{position:relative;animation:animatetop 1.5s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.animate-left{position:relative;animation:animateleft 1.5s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.animate-right{position:relative;animation:animateright 1.5s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.animate-bottom{position:relative;animation:animatebottom 1.5s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.animate-zoom{animation:animatezoom 1.5s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.animate-slit{animation: animateslit 1.8s;}@keyframes animateslit{0%{transform: scale(0, .025)} 50%{transform:scale(1, .025)}}


.animate-slower {
  animation-duration: 2s;
}


.greyscale, .hover-greyscale:hover {
  filter: grayscale(100%);
}

.sepia, .hover-sepia:hover {
  filter: sepia(100%);
}





.img-grid {
  padding: 1em;
  background: #eee;
  margin: 10px;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
}

.img-grid:hover {
  -webkit-box-shadow: 0 20px 40px 10px rgba(0, 0, 0, .3), 0 -20px 40px -10px rgba(0, 0, 0, .3);
  -moz-box-shadow: 0 20px 40px 10px rgba(0, 0, 0, .3), 0 -20px 40px -10px rgba(0, 0, 0, .3);
  box-shadow: 0 20px 40px 10px rgba(0, 0, 0, .3), 0 -20px 40px -10px rgba(0, 0, 0, .3);
  transition: 0.2s all;
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -o-transition: 0.2s all;
  -ms-transition: 0.2s all;
}



.hover-shadow:hover {
  box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19);
}



.full-bg {
  background-size: contain;
  background-position: center;
}


.complete-bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}





.misc-img-default{
  object-fit: cover;
  width: 100%;
  height: 280px;
}


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

  .misc-img-default{
    height: 300px;
  }

}



.text-wh {
  color: white!important;
}

.text-bl {
  color: black!important;
}

.bg-wh {
  background: white;
  color: black;
}

.bg-bl {
  background: black;
  color: white;
}



.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}



.wrap-pretty {
  text-wrap-style: pretty;
}



.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}


.well {
  background: #eee;
  padding: 10px;
  border: 1px solid #fff;
  border-style: inset;
}

.well span {
  font-variant: all-petite-caps;
  color: #000;
}



.rotated-right { transform: rotate(90deg); }
.rotated-left { transform: rotate(-90deg); }
.rotated-180 { transform: rotate(180deg); }
.rotated-270 { transform: rotate(270deg); }



.remover {
  color: red;
  cursor: pointer;
  padding: 3px;
}

.remover:hover {
  color: darkred;
}



.misc-l-close, .misc-r-close {
  font-size: large;
  cursor: pointer;
  position: absolute;
  top: auto;
  color: darkred;
}

.misc-l-close:hover, .misc-r-close:hover {
  opacity: .8;
}

.misc-r-close { /*align to right*/
  right: 4px;
  padding: 0px 7px;
}

.misc-l-close { /*align to left*/
  left: 4px;
  padding: 0px 7px;
}



.misc-card, .ntf-card {
  /*box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);*/
  box-shadow: 0 4px 5px 0 rgba(0,0,0,0.03), 0 0 10px 0 rgba(0,0,0,0.08);
}


.ntf-card {
  position: fixed;
  top: 0;
  /*Display at exact middle*/
  left: 50%;
  transform: translate(-50%,0%);
  z-index: 99999;
}




.soft-shadow {
  box-shadow: 6px 10px 30px 0 rgb(0 0 0 / 15%);
}



.bulge{
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3), 0 7px 21px 0 rgba(0, 0, 0, 0.20);
}



.big-bulge{
  box-shadow: 0 15px 30px rgb(0 0 0 / 30%), 0 11px 8px rgb(0 0 0 / 22%), 0 -15px 30px rgb(0 0 0 / 30%), 0 -11px 8px rgb(0 0 0 / 22%);
}




.z-1, .z-2, .z-3, .z-4, .z-9, .z-99, .z-999, .z-9999, .z-99999, .z-999999 {
  position: relative;
}

.z-1 {z-index: 1;}
.z-2 {z-index: 2;}
.z-3 {z-index: 3;}
.z-4 {z-index: 4;}

.z-9 {z-index: 9;}
.z-99 {z-index: 99;}
.z-999 {z-index: 999;}
.z-9999 {z-index: 9999;}
.z-99999 {z-index: 99999;}
.z-999999 {z-index: 999999;}



.relative {position:relative;}
.absolute {position:absolute;}
.sticky {position:sticky;}
.static {position:static;}
.fixed {position: fixed;}



.misc-top {
  position: absolute; left: 50%; top: 0; transform: translate(-50%,0%); -ms-transform:translate(-50%,0%);
}

.misc-bottom {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0%); -ms-transform: translate(-50%,0%);
}

.misc-left {
  position: absolute; top: 50%; left: 0%; transform: translate(0%,-50%); -ms-transform: translate(-0%,-50%);
}

.misc-right {
  position: absolute; top: 50%; right:0%; transform: translate(0%,-50%); -ms-transform: translate(0%,-50%);
}

.misc-topleft {
  position: absolute; left: 0; top: 0;
}

.misc-topright {
  position: absolute; right: 0; top: 0;
}

.misc-middle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform:translate(-50%,-50%);
}

.misc-bottomleft {
  position: absolute; left: 0; bottom: 0;
}

.misc-bottomright {
  position: absolute; right: 0; bottom: 0;
}



.misc-overlay-container {
  position: relative;
  overflow: hidden;
}

.misc-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.5);
  z-index:2;
}



.misc-marquee {transform: translateX(100%);animation: miscmarquee 10s linear infinite;}@keyframes miscmarquee{from{transform: translateX(100%);}to{ transform: translateX(-100%);}}