html {
--svgDivider1: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
}
.bg-blacksteel {
background-color: #0C0C0C;
}
.bg-charcoal {
background-color: #262626;
}
.bg-orange {
background-color: #E74E00;
}
html {
height: 100%;
}
body {
background: #262626;
background: linear-gradient(0deg, #262626 0%, #0C0C0C 100%) no-repeat;
/*backdrop-filter: blur(30px);*/
background-attachment: fixed;
}
h1, h2, h3, h4, h5 {
font-family: "Atkinson Hyperlegible Next", serif;
font-style: normal;
}
h1 {
font-size: 4rem;
font-weight: 800;
}
h2 {
font-size: 3rem;
font-weight: 600;
}
h3 {
font-size: 2rem;
font-weight: 400;
}
h4 {
font-size: 1.5rem;
font-weight: 400;
}
h5 {
font-size: 1.2rem;
font-weight: 400;
}
.atkinson-extralight {
font-family: "Atkinson Hyperlegible Next", serif;
font-optical-sizing: auto;
font-weight: "200";
font-style: normal;
}
.atkinson-light {
font-family: "Atkinson Hyperlegible Next", serif;
font-optical-sizing: auto;
font-weight: "300";
font-style: normal;
}
.atkinson-regular {
font-family: "Atkinson Hyperlegible Next", serif;
font-optical-sizing: auto;
font-weight: "400";
font-style: normal;
}
.atkinson-medium {
font-family: "Atkinson Hyperlegible Next", serif;
font-optical-sizing: auto;
font-weight: "500";
font-style: normal;
}
.atkinson-semibold {
font-family: "Atkinson Hyperlegible Next", serif;
font-optical-sizing: auto;
font-weight: "600";
font-style: normal;
}
.atkinson-bold {
font-family: "Atkinson Hyperlegible Next", serif;
font-optical-sizing: auto;
font-weight: "700";
font-style: normal;
}
.atkinson-extrabold {
font-family: "Atkinson Hyperlegible Next", serif;
font-optical-sizing: auto;
font-weight: "800";
font-style: normal;
}
p {
font-family: "Atkinson Hyperlegible Next", serif;
font-weight: 400;
font-style: normal;
}
.zoom-hover {
transition: 0.5s transform cubic-bezier(0.155, 1.105, 0.295, 1.12), 0.3s box-shadow;
}
.zoom-hover:hover {
transform: scale(1.05);
}
#overlay-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 3px, rgba(0, 0, 0, 0.2) 3px, rgba(0, 0, 0, 0.2) 8px);
pointer-events: none;
z-index: -1000;
}
#logo-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
background-image: url("../img/kovovyroba-matus-frano-symbol-tile-black.svg");
background-position: center;
background-repeat: repeat;
background-size: 1000px;
background-blend-mode: overlay;
opacity: 0.1;
z-index: -1005;
pointer-events: none;
}
#about {
position: relative;
}
#about::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../img/kovofrano-about-01.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.3;
z-index: -1;
}
#strojarstvo {
position: relative;
min-height: 40vh !important;
}
#strojarstvo::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../img/kovofrano-strojarska-dielna-hero-01.webp");
background-size: cover;
background-position: center 20%;
background-repeat: no-repeat;
opacity: 0.3;
z-index: -1;
}
#zamocnictvo {
position: relative;
min-height: 40vh !important;
}
#zamocnictvo::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../img/kovofrano-zamocnicka-dielna-hero-01.webp");
background-size: cover;
background-position: center 65%;
background-repeat: no-repeat;
opacity: 0.3;
z-index: -1;
}
#kaliaren {
position: relative;
min-height: 40vh !important;
}
#kaliaren::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../img/kovofrano-kaliaren-hero-01.webp");
background-size: cover;
background-position: center 30%;
background-repeat: no-repeat;
opacity: 0.3;
z-index: -1;
}
#projekcia {
position: relative;
min-height: 40vh !important;
}
#projekcia::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../img/kovofrano-projekcia-hero-01.webp");
background-size: cover;
background-position: center 30%;
background-repeat: no-repeat;
opacity: 0.3;
z-index: -1;
}
.form-check-input:checked {
background-color: #5e0005 !important;
border-color: #ffffff !important;
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
}
.form-check-input:focus {
border-color: #D60610 !important;
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
}
.form-check-input:checked:focus {
border-color: #5e0005 !important;
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
}
.form-check-input:focus:not(:checked) {
border-color: #D60610 !important;
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
}
#form-top-divider {
padding-top: 33px;
background-repeat: no-repeat;
background-size: cover;
color: #E74E00;
background-image: var(--svgDivider1);
}
#form-bottom-divider {
padding-top: 33px;
background-repeat: no-repeat;
background-size: cover;
color: #E74E00;
background-image: var(--svgDivider1);
transform: scaleY(-1);
}
/* VIDEO START */
#video-bg video {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
opacity: 70%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
@media (max-width: 576px) {
#video-bg {
height: 60vh;
}
}
@media (min-width: 576px) {
#video-bg {
height: 80vh;
}
}
@media (min-width: 1200px) {
#video-bg {
height: 70vh !important;
}
}
/* Style the video: 100% width and height to cover the entire window */
#myVideo {
position: relative;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -1001; /* Lower z-index than the overlay */
}
/* VIDEO END */
.card {
transition: 0.3s transform cubic-bezier(0.155, 1.105, 0.295, 1.12), 0.3s box-shadow;
}
.card:hover {
transform: scale(1.02);
}
/*image mask*/
.mask-this-image {
-webkit-mask-image: url("../img/kovofrano-image-mask.svg") !important;
mask-image: url("../img/kovofrano-image-mask.svg") !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
mask-position: center !important;
max-width: 100%;
display: block;
aspect-ratio: 1;
-o-object-fit: cover;
object-fit: cover;
}
@supports not (aspect-ratio: 1) {
.mask-this-image {
width: 100%;
padding-top: 100%;
position: relative;
}
}
/*MAP*/
/*map resposive*/
.map-responsive {
overflow: hidden;
padding-bottom: 100%; /*56.25%*/
position: relative;
height: 0;
}
.map-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
/** BACK TO TOP **/
#toTopBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 9999;
padding: 15px;
cursor: pointer;
}
.grecaptcha-badge {
visibility: hidden;
}
/*hide logo but adding a notice that the site is protected by reCAPTCHA.*//*# sourceMappingURL=styles.css.map */