html {
  scroll-behavior: smooth;
}

.bgimage {
  width: 100%;
  background-image: url(../images/hero.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-attachment: fixed;
}
.bgimage h5 {
  color:white;
  text-shadow:2px 2px #333;
}

#footer {
  min-height: 75px;
  padding-top: 15px;
}

#footer .socials a{
  padding: 5px;
}

@media only screen and (min-width: 990px){
  .navbar:not(.solid){
  background-color: rgba(0,0,0,0.7)!important;
  }
  .typeWriter{
    white-space: nowrap; /* Keeps the content on a single line */
  }
  .bgimage{
    background-size: 105% 500px;
    min-height: 450px;
  }
}

@media only screen and (max-width: 989px){
  .navbar{
  background-color: rgba(0,0,0,0.7)!important;
  }
  .card-title{
    font-size: 1rem;
  }
  .bgimage{background-size: contain;}
}

.navbar .navbar-brand{
  color : #FFF;
  font-weight: bolder;
  font-size: 1.3em;
}

.navbar .nav-item a{
  color: #FFF !important;
}

.navbar .dropdown-menu{
  background-color: rgba(0,0,0,0.3);
}
.dropdown-item:hover{
  background-color: rgba(0,0,0,0.3);
}
.navbar form button{
  background-color: #ea00b1;
  color:#FFF;
  border:0;
}
.navbar form button:hover{
  background-color: #000;
}

.cookiealert {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0 !important;
  z-index: 999;
  opacity: 0;
  border-radius: 0;
  background: #212327;
  transform: translateY(100%);
  transition: all 500ms ease-out;
  color: #ecf0f1;
}

.cookiealert.show {
  opacity: 1;
  transform: translateY(0%);
  transition-delay: 1000ms;
}

.cookiealert a {
  text-decoration: underline
}

.cookiealert .acceptcookies {
  margin-left: 10px;
  vertical-align: baseline;
}

.dropdown .active {
  pointer-events: none;
}

@media (min-width: 1440px) {
  .container{
    max-width: 1390px;
  }
}

@media (min-width: 1680px) {
  .container{
    max-width: 1630px;
  }
}

@media (min-width: 1920px) {
  .container{
    max-width: 1880px;
  }
}

.wow{
  visibility: hidden;
}

.input-line,
select.input-line {
  background: transparent;
  border: none;
  border-bottom: 1px solid #000000;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
}

.input-line,
select.input-line:focus {
  -webkit-box-shadow: none!important;
  box-shadow: none!important;
  background-color: transparent!important;
  outline:none!important;
}

.form-rounded{
  border-radius: 1.25rem;
}

.img-holder img{
  max-height: 275px;
  max-width: 275px;
}

#products img {
  min-height: 300px;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#about{
  min-height: 200px;
  width: 100%;
  background-repeat: no-repeat;
  background-position: right;
  background-size: auto 200px;
  background-image: url('../images/create-with-prismacolor-lips_bp1d.jpg'); 
}

#about-2{
  background: linear-gradient(to right, rgb(142, 45, 226), rgb(74, 0, 224));
}

#about .container{
  min-height: 200px;
}

.bg-granat{background-color: #021325;}

.btn-outline-white{
  color: #e6e6e6;
  background-color: transparent;
  background-image: none;
  border-color: #f5f5f5;
}

.btn-outline-white:focus {
  box-shadow: 0 0 0 0.2rem rgba(241, 241, 241, 0.5);
}

.btn-outline-white:hover{
  color: #333232;
  background-color: #f5f5f5;
  border-color: #f5f5f5; 
}

#footer .socials a i:hover {
  color: #3075b3!important;
}

#footer .socials a i {
  padding: 2px;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.linkEffect {
  color: #fff;
  display: inline-block;
  text-decoration: none;
  overflow: hidden;
  vertical-align: top;
   background: #1C3044;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  -ms-perspective: 600px;
  perspective: 600px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}
 .linkEffect:hover span {
  backgroud: #314559;
  -webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  -moz-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  -ms-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}
  .linkEffect span {
  display: block;
  position: relative;
  padding: 10px 20px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
 
 .linkEffect span:after {
  content: attr(data-text);
  -webkit-font-smoothing: antialiased;
  padding: 10px 20px;
  color: #fff;
  background: #0e6957;
  display: block;
  position: absolute;
 
  left: 0;
  top: 0;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  -moz-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  -ms-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
}

#navbar-logo {
  position: absolute;
  top: 10px;
}

#navbar-logo img {
  max-height: 50px;
  max-width: 265px;
}

.circle-big{
   position: relative;
   width: 350px;
   height: 350px;
  }

.circle-inside{
  height: 254px;
  width: 254px;
}
html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}