html {
    height: 100%;
}

body {
    background: url('/media/ERET\ Bakground.jpg') no-repeat center center fixed;
    background-size: cover;
    height: calc(100vh - 164px);
    color: #555;
    font-family: 'Lato';
}

/* from Bulma */
.icon {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    height: 1.5rem;
    width: 1.5rem;
}

.logo-font {
    text-transform: uppercase;
    color: rgb(114, 77, 33);
}

.main-logo-link {
    width: fit-content;
}

.shop-now-button {
    background: rgb(199, 170, 92);
    color: white;
    min-width: 260px;
}

.btn-black {
    background: black;
    color: white;
}

.btn-gold {
    background: rgb(114, 77, 33);
    color: white;
}

.bg-gold {
    background: rgb(235, 215, 161);
}

.bg-black {
    background: rgb(0, 0, 0);
}

.shop-now-button:hover,
.shop-now-button:active,
.shop-now-button:focus,
.btn-black:hover,
.btn-black:active,
.btn-black:focus {
    background: #222;
    color: white;
}

.text-black {
    color: #000 !important;
}

.text-gold {
    color: rgb(114, 77, 33);
}

.border-black {
    border: 1px solid black !important;
}

.overlay {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: fixed;
	background: rgba(0, 0, 0, 0.911);
	z-index: -1;
}

.product-details-container {
    background: rgba(0, 0, 0, 0.911);
}

a.category-badge > span.badge:hover {
    background: #212529 !important;
    color: #fff !important;
}

.btt-button {
    height: 42px;
    width: 42px;
    position: fixed;
    bottom: 10px;
    right: 10px;
}
.btt-link {
    cursor: pointer;
}

.card {
  background: #222;
  border: 1px solid #dd2476;
  color: rgba(250, 250, 250, 0.8);
  margin-bottom: 2rem;
}

.btn {
  border: 5px solid;
  border-image-slice: 1;
  background: var(--gradient) !important;
  -webkit-text-fill-color: transparent !important;
  border-image-source:  var(--gradient) !important; 
  text-decoration: none;
  transition: all .4s ease;
}

.btn:hover, .btn:focus {
      background: var(--gradient) !important;
  -webkit-text-fill-color: #fff !important;
  border: 5px solid #fff !important; 
  box-shadow: #222 1px 0 10px;
  text-decoration: underline;
}

/* Buttons --*/

*{
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

html{
    overflow-y: scroll;
}

body{
    background-color: transparent;
    background: url('/media/background.jpeg') fixed no-repeat;
    background-size: cover;
    max-height: 300rem;
    border: 0px solid transparent !important;
    -o-border-image: linear-gradient(to bottom right,rgba(255, 255, 255, 0.75) 0%,rgba(245, 245, 245, 0.75) 0%,rgba(245, 245, 245, 0.75) 16.6%,rgb(245, 245, 245) 37.8%,rgb(245, 245, 245) 48.8%,rgb(254, 254, 254) 53.1%,rgba(245, 245, 245, 0.75) 79.4%,rgba(245, 245, 245, 0.75) 84.3%) !important;
       border-image: -webkit-gradient(linear,left top, right bottom,from(rgba(255, 255, 255, 0.75)),color-stop(0%, rgba(245, 245, 245, 0.75)),color-stop(16.6%, rgba(245, 245, 245, 0.75)),color-stop(37.8%, rgb(245, 245, 245)),color-stop(48.8%, rgb(245, 245, 245)),color-stop(53.1%, rgb(254, 254, 254)),color-stop(79.4%, rgba(245, 245, 245, 0.75)),color-stop(84.3%, rgba(245, 245, 245, 0.75))) !important;
       border-image: linear-gradient(to bottom right,rgba(255, 255, 255, 0.75) 0%,rgba(245, 245, 245, 0.75) 0%,rgba(245, 245, 245, 0.75) 16.6%,rgb(245, 245, 245) 37.8%,rgb(245, 245, 245) 48.8%,rgb(254, 254, 254) 53.1%,rgba(245, 245, 245, 0.75) 79.4%,rgba(245, 245, 245, 0.75) 84.3%) !important;
    border-image-slice: 1 !important;
}

a{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.95;
}

a:hover{
  opacity: 1;
  color: black;
}
/*----------------
Push Bar
------------------*/
.bar-cont{
    position: relative;
    top: -215px;
}

.push-bar{
    position: relative;
    margin: auto;
    width: 500px;
    height: 200px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.creator{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.creator #codepen{
  text-align: center;
  font-size: 180px;
  margin-top: 30px;
  border: 2px solid white;
  border-radius: 50%;
  -webkit-box-shadow: 0px 8px 5px grey;
          box-shadow: 0px 8px 5px grey;
}


.arrow{
	margin: auto;
    padding: 0;
    margin-top: 50px;
    margin-bottom: 0;
    max-width: 80px;
    height: 80px;
    border: 3px solid black;
    border-radius: 50%;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 45%;
    background-color: black;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -webkit-animation: blockAppear .6s ease-in-out;
            animation: blockAppear .6s ease-in-out;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
}

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
	40% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
	60% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
	40% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
	60% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
}
/*-----------------
Cards
------------------*/
.main-cont{
    padding: 0;
    margin: 0;
    top: -215px;
}

.news-row {
	margin: 0;
    margin-top: 5px;
    margin-bottom: 5px;
}

.news-block{
    margin: auto;
    padding: 0;
    background-color: transparent;
    max-width: 1060px;
    min-width: 100px;
    border: 20px solid transparent;
    -o-border-image: linear-gradient(to bottom right,rgba(255, 255, 255, 0.75) 0%,rgba(245, 245, 245, 0.75) 0%,rgba(245, 245, 245, 0.75) 16.6%,rgb(245, 245, 245) 37.8%,rgb(245, 245, 245) 48.8%,rgb(254, 254, 254) 53.1%,rgba(245, 245, 245, 0.75) 79.4%,rgba(245, 245, 245, 0.75) 84.3%) !important;
       border-image: -webkit-gradient(linear,left top, right bottom,from(rgba(255, 255, 255, 0.75)),color-stop(0%, rgba(245, 245, 245, 0.75)),color-stop(16.6%, rgba(245, 245, 245, 0.75)),color-stop(37.8%, rgb(245, 245, 245)),color-stop(48.8%, rgb(245, 245, 245)),color-stop(53.1%, rgb(254, 254, 254)),color-stop(79.4%, rgba(245, 245, 245, 0.75)),color-stop(84.3%, rgba(245, 245, 245, 0.75))) !important;
       border-image: linear-gradient(to bottom right,rgba(255, 255, 255, 0.75) 0%,rgba(245, 245, 245, 0.75) 0%,rgba(245, 245, 245, 0.75) 16.6%,rgb(245, 245, 245) 37.8%,rgb(245, 245, 245) 48.8%,rgb(254, 254, 254) 53.1%,rgba(245, 245, 245, 0.75) 79.4%,rgba(245, 245, 245, 0.75) 84.3%) !important;
    border-image-slice: 1 !important;
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
    -webkit-animation: blockAppear .6s ease-in-out;
            animation: blockAppear .6s ease-in-out;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
}

.underlay{
  /*display: none;*/
  margin: 0;
  padding: 0;
  max-height: 350px;
  max-width: 340px;
}
/*
.card{
    margin: 0;
    width: 340px;
    max-height: 350px;
    max-width: 340px;
    background-color: black;
    border: 20px solid transparent !important;
    -o-border-image: linear-gradient(to bottom right,rgba(255, 255, 255, 0.75) 0%,rgba(245, 245, 245, 0.75) 0%,rgba(245, 245, 245, 0.75) 16.6%,rgba(245, 245, 245, 0.75) 79.4%,rgba(245, 245, 245, 0.75) 84.3%) !important;
       border-image: -webkit-gradient(linear,left top, right bottom,from(rgba(255, 255, 255, 0.75)),color-stop(0%, rgba(245, 245, 245, 0.75)),color-stop(16.6%, rgba(245, 245, 245, 0.75)),color-stop(79.4%, rgba(245, 245, 245, 0.75)),color-stop(84.3%, rgba(245, 245, 245, 0.75))) !important;
       border-image: linear-gradient(to bottom right,rgba(255, 255, 255, 0.75) 0%,rgba(245, 245, 245, 0.75) 0%,rgba(245, 245, 245, 0.75) 16.6%,rgba(245, 245, 245, 0.75) 79.4%,rgba(245, 245, 245, 0.75) 84.3%) !important;
    border-image-slice: 1 !important;
    -webkit-transition: -webkit-transform 0.6s ease;
    transition: -webkit-transform 0.6s ease;
    transition: transform 0.6s ease;
    transition: transform 0.6s ease, -webkit-transform 0.6s ease;
    -webkit-animation: blockAppear .6s ease-in-out;
            animation: blockAppear .6s ease-in-out;
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
}
*/
@-webkit-keyframes blockAppear {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px) ;
            transform: translateY(20px) ;
  }
  readycss1
  40% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    -webkit-box-shadow: 0 10px 35px rgba(0,0,0,.15), 0 1px 0 rgba(0,0,0,.15);
            box-shadow: 0 10px 35px rgba(0,0,0,.15), 0 1px 0 rgba(0,0,0,.15);
  }
  ready-css1
  80% {
    opacity: 1;
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  ready-css1
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}

@keyframes blockAppear {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px) ;
            transform: translateY(20px) ;
  }
  ready-css1
  40% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    -webkit-box-shadow: 0 10px 35px rgba(0,0,0,.15), 0 1px 0 rgba(0,0,0,.15);
            box-shadow: 0 10px 35px rgba(0,0,0,.15), 0 1px 0 rgba(0,0,0,.15);
  }
  ready-css1
  80% {
    opacity: 1;
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  ready-css1
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}

.card:hover{
    z-index: 999;
    max-height: 800px;
    width: 400px;
    max-width: 400px;
    border: none !important;
    border-right: 15px solid transparent !important;
    border-bottom: 5px solid transparent !important;
    margin-right: -5px;
	  -webkit-transform:  translate(-10px, -20px);
	          transform:  translate(-10px, -20px);
}

.card:before{
  -webkit-box-shadow: none;
          box-shadow: none;
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  max-width: 400px;
  height: 100%;
  -webkit-transition: -webkit-box-shadow 0.6s ease;
  transition: -webkit-box-shadow 0.6s ease;
  transition: box-shadow 0.6s ease;
  transition: box-shadow 0.6s ease, -webkit-box-shadow 0.6s ease;
}

.card:hover:before
{
  max-width: 300px;
  -webkit-box-shadow: 60px 60px 20px RGBA(142, 142, 142, .6);
          box-shadow: 60px 60px 20px RGBA(142, 142, 142, .6);
}

.card:hover .card-img-top{
	height: 300px;
}

.card:hover .card-block {
  width: 300px;
	background-image: -webkit-gradient(linear,right bottom, left top,from(rgb(72, 85, 108)),color-stop(50%, rgb(27, 33, 43)),color-stop(51%, rgb(20, 25, 34)),to(rgb(53, 59, 69)));
	background-image: linear-gradient(to top left,rgb(72, 85, 108) 0%,rgb(27, 33, 43) 50%,rgb(20, 25, 34) 51%,rgb(53, 59, 69) 100%);
}

.card:hover .card-title{
    color: black;
}

.card:hover .card-text{
	  /*display: block !important;*/
    color: black;
}

.card-block{
    background-color: black;
    background-image: -webkit-gradient(linear,left top, right bottom,from(rgba(255, 255, 255, 0.75)),color-stop(0%, rgba(245, 245, 245, 0.75)),color-stop(16.6%, rgba(245, 245, 245, 0.75)),color-stop(37.8%, rgb(245, 245, 245)),color-stop(48.8%, rgb(245, 245, 245)),color-stop(53.1%, rgb(254, 254, 254)),color-stop(79.4%, rgba(245, 245, 245, 0.75)),color-stop(84.3%, rgba(245, 245, 245, 0.75)));
    background-image: linear-gradient(to bottom right,rgba(255, 255, 255, 0.75) 0%,rgba(245, 245, 245, 0.75) 0%,rgba(245, 245, 245, 0.75) 16.6%,rgb(245, 245, 245) 37.8%,rgb(245, 245, 245) 48.8%,rgb(254, 254, 254) 53.1%,rgba(245, 245, 245, 0.75) 79.4%,rgba(245, 245, 245, 0.75) 84.3%);
    background-repeat: no-repeat;
}

.card-text {
	display: none;
}

.card-img-top{
    width: 200px;
    height: 250px;
    background-color: black;
    -webkit-transition: height 0.8s ease;
    transition: height 0.8s ease;
}

.card-img-top2{
    width: 350px;
    height: 250px;
    background-color: black;
    -webkit-transition: height 0.8s ease;
    transition: height 0.8s ease;
}

@media (max-width: 1120px){
    .bar-cont{
        width: 100%;
    }
    .news-block{
       max-width: 720px;
    }
    .card:hover{
      margin-right: -20px;
    }
    .card:hover .card-block{
      width: 300px;
    }
}

@media (max-width: 800px){
    .news-block{
       min-width: 380px;
    }
    .card:hover{
      border-left: 20px solid transparent !important;
      margin-right: -40px;
      -webkit-transform:  translate(0, -50px);
              transform:  translate(0, -50px);
    }
    .card:hover:before{
      -webkit-box-shadow: 0px 60px 40px RGBA(142, 142, 142, .5);
              box-shadow: 0px 60px 40px RGBA(142, 142, 142, .5);
    }
    .card:hover .card-block{
      width: 300px;
    }
}

@media (max-width: 580px){
  .news-block{
     max-width: 380px;
  }
}
/*-----------------
Pixel Grid
------------------*/
.pixel-grid{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  z-index: 15;
  opacity: .2;
  display: none;
}

#toggle-grid{
  position: fixed;
  top: 150px;
  right: 2px;
  z-index: 16;
  color: white;
  display: inline-block;
  /*border: 2px ridge white;*/
  font-size: 1.8em;
  width: 1.8em;
  text-align: center;
  line-height: 1.85em;
  background: #666;
  border-radius: 50%; /* or 50% width & line-height */
  opacity: .3;
  -webkit-transition: background 1s ease-out;
  transition: background 1s ease-out;
  display: none;
}

#toggle-grid:hover{
  cursor: pointer;
  background: repeating-linear-gradient(to bottom right,rgb(0, 0, 0) 0%,rgb(226, 226, 226) 61.4%,rgb(226, 226, 226) 66.9%,rgb(226, 226, 226) 76.6%,rgb(226, 226, 226) 88.7%,rgb(255, 255, 255) 100%);
}

.orange{
  color: orange !important;
  -webkit-box-shadow: 2px 2px 3px #888;
          box-shadow: 2px 2px 3px #888;
  opacity: 1 !important;
}
/*------------------ Team Cards*/

.fa {
  padding: 10px;
  margin : 10px;
  width:38px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;

  
}
.fa:hover {
    opacity: 0.7;
}
.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-whatsapp {
  background: #005e17;
  color: white;
  size: 200px;
  }


.fa-linkedin {
  background: #007bb5;
  color: white;
}


h1{
  font-family: 'Yrsa', serif;
  font-size: 50px;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 260px;
  height: 400px;
  
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {

  width: 260px;
  height: 300px;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  transform: rotateY(180deg);
  width: 260px;
  height: 300px;
  background-color: #f2f2f2;
}

.card-title{
  color: #007b5e;
  padding: 20px;
}

header{
  background-color: #4269605e;
}

.person{
  color: #007b5e;
  font-family: 'Yrsa', serif;
  font-size: 30px;
  padding: 15px;
}

 
.card-body{
  background-color: #f2f2f2;
}

.about{
  margin: 20px;
  font-size: 50px;
}

p {
  font-size: 20px;
}

/* -------------------------------- Media Queries */

/* Slightly larger container on xl screens */
@media (min-width: 1200px) {
  .container {
    max-width: 80%;
  }
}

/* fixed top navbar only on medium and up */
@media (min-width: 992px) {
    .fixed-top-desktop-only {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
    }

    .header-container {
        padding-top: 164px;
    }

}

/* pad the top a bit when navbar is collapsed on mobile */
@media (max-width: 991px) {
    .header-container {
        padding-top: 116px;
    }
    body {
        height: calc(100vh - 116px);
    }
    p {
      font-size: 12px;
    }
}