/******************************************/
/** General                              **/
/******************************************/

:root {
   --primary:#FFAD00;
   --secondary: #0095FF;
   --dark: #323232;
   --textFooter: #9D6B00;
   --black: #000000;
   --gray: #707070;
   --light: #d2d2d2 ;
   --white: #ffffff;
}

*, *::before, *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html, body {
   min-height: 100vh;
   min-height: 100dvh;
   color: var(--gray);
   background-color: var(--white);
   font-family: "vag-rundschrift-d", sans-serif !important;
   font-weight: 300 !important;
   font-style: normal !important;
   letter-spacing: 0.02rem;
}


/* navbarNav
---------------*/
@media (max-width: 650px){
   .navbar-brand img {
      width: 200px !important;
   }
}
#mainNav.navbar-shrink{
   background-color: var(--dark) !important;
   transition:ease all 0.3s;
   padding: 0.8rem 0 !important;
}

#navbarNav .nav-link:hover, .nav-link.active{ color: var(--primary) !important;}

/* end ---*/



/* HOME
---------------*/
.heroBg{
   background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}
#hero {
   height: 60vh;
   height: 60dvh;
}
@media (min-width: 1024px){
   #hero {
      height:75vh;
      height: 75dvh;
   }
}

#hero .splide__arrows.splide__arrows--ltr {
   height: 100%;
   display: flex;
   align-items: center;
}
@media (max-width: 767px){
   #hero .splide__arrows.splide__arrows--ltr {
      align-items: end !important;
   }
}

#hero .splide__arrow {
   left: 0;
   right: 0;
   position: relative;
   margin: 0 1rem 5rem 0;
   width: 50px;
   height: 50px;
   border-radius: 50%;
}

#hero .content {
   left: -2px;
   bottom: -2px;
}

.splide__arrow:hover svg path {stroke: var(--secondary) !important;}
/* end ---*/



/* portfolio
---------------*/
.bgOverlay {
   position: absolute;
   width: 100%;
   height: 100%;
   bottom: 0; left: 0;
}

.bgGradient {
   position: absolute;
   width: 100%;
   height: 100%;
   transition: opacity 0.3s ease;
}


.bgGradient.initial {
   background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 100%);
   opacity: 1;
}

.bgGradient.hover {
   background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 40%);
   opacity: 0;
}

.portfolioContainer:hover .bgGradient.hover {
   opacity: 1;
}

.portfolioContainer:hover .bgGradient.initial {
   opacity: 0;
}



ul#image-gallery img{height:420px !important;}
@media (max-width: 650px){
   ul#image-gallery img{height:350px !important;}
}

.lSSlideOuter .lSPager.lSGallery li {
   height: 80px !important;
}
.lSSlideOuter .lSPager.lSGallery img {
   object-fit: cover !important;
}



/* end ---*/


/* Footer
---------------*/
.socialIcon{
   background: #ffffff;
   width: 40px; height: 40px;
   
}
/* end ---*/



/******************************************/
/** Helpers                              **/
/******************************************/
@media (max-width: 650px){
   .object-fit-cover{max-height: 450px !important;}
}
/* .object-fit-cover{max-height: 650px !important;} */


/* Colors */

.border-primary {
   --bs-border-opacity: 1;
   border-color: var(--primary) !important;
}


.text-primary {color: var(--primary) !important;}
.text-light {color: var(--light) !important;}
.text-footer {color: var(--textFooter) !important;}

.hover\:text-primary:hover {color: var(--primary) !important;}

.bg-primary {background-color: var(--primary) !important;}
.bg-dark {background-color: var(--dark) !important;}

.hover\:bg-primary:hover {background-color: var(--primary) !important;}

.bg-cover{background-size:cover !important; background-repeat:no-repea !important; background-position:center center !important;}

/* Fonts */
.h0{font-size:1.6rem !important;}
@media (min-width: 1024px){
   .h0{font-size:3rem !important; line-height: 4rem !important;}
   .fs-1{font-size:50px !important;}
}

.fs-7 {font-size: .95rem;}
.fs-8 {font-size: .8rem;}
.fs-9 {font-size: .7rem;}


/* Sizes */

.button {padding: 15px 25px;}

.w-fit {width: fit-content;}
.w-screen {width: 100vw; width: 100dvw;}
.h-screen {height: 100vh; height: 100dvh;}

/* Components */

.icon-md {
   width: 30px;
   height: 30px;
   min-width: 30px;
   min-height: 30px;
}

.icon-lg {
   width: 40px;
   height: 40px;
   min-width: 40px;
   min-height: 40px;
}

/* Animations */

.transition-03 {
   transition: all linear .3s;
   -o-transition: all linear .3s;
   -moz-transition: all linear .3s;
   -webkit-transition: all linear .3s;
}

/******************************************/
/** Forms                                **/
/******************************************/

.form-select,
.form-control,
.input-group {
   border-radius: 8px;
   border: 1px solid #D9D9D9;
}

.input-group:active,
.input-group:focus,
.input-group:focus-within,
.form-select:active,
.form-select:focus,
.form-control:active,
.form-control:focus {
   box-shadow: none;
   border-color: var(--primary);
   background-color: transparent;
}

.input-group.disabled,
.form-control:disabled,
.form-select:disabled {
   border-color: #D9D9D9 !important;
   background-color: #D9D9D9 !important;
}

.form-check-input {
   min-width: 1em !important;
   min-height: 1em !important;
}

.form-check-input:checked {
   border-color: var(--primary) !important;
   background-color: var(--primary) !important;
}

.form-check-input:focus {
   box-shadow: none;
   border-color: #D9D9D9 !important;
}

::placeholder {
   opacity: 1;
   color: var(--gray) !important;
}
::-ms-input-placeholder {color: var(--gray) !important;}