/* CSS Reset and Base Styles */

* {
    box-sizing: border-box;
    background-repeat: no-repeat;

    --color-theme-primary: #ED7B2E;
    --color-body: #201E1D;
    --border-radius: 1.2em;
}

html {
    font-size: 18px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body, html {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: #fff;
    background-color: var(--color-body);

    display: flex;
    flex-direction: column;
    padding-top: 8em;

    background-image: url(img/theme-body.svg);
    background-size: auto 50%;
    background-size: auto 45vh;
    background-position: bottom 7vh right 2em;
    background-attachment: fixed;
}

body, input, button, textarea, select {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

}

body.slideshow-open {
    background-image: none;
}

body.slideshow-open section {
    opacity: 0;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
}

h1 {
    font-weight: 900;
    letter-spacing: 1px;
    margin: 1em 0;
    line-height: 1.3;
}

h2 {
    font-weight: 900;
    margin: 2em 0;
    border: 1px solid var(--color-theme-primary);
    border-radius: var(--border-radius);
    padding: .4em;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.3;
    border-color: rgb(255, 255, 255, 0.3);
}

section.active h2 {

    border-color: var(--color-theme-primary);
}

h3 {
    margin-bottom: .8em;
    font-size: 1em;
}

hr {
    border: none;
    height: 1.8em;
}

a {
    text-decoration: none;
    color: inherit;
}

ul,
ol {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

p {
    margin: .2em 0;
}

p em {
    color: var(--color-theme-primary);
    font-weight: 900;
    font-style: normal;
}

li {
    position: relative;
    padding-left: 2em;
}

h3,
strong {
    font-weight: 800;
}

li::before {
    position: absolute;
    content: "";
    background-color: var(--color-theme-primary);
    height: 4px;
    width: 1em;
    top: .8em;
    left: 0%;
    border-radius: 2px;
}

/** **/

.width {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.grid {
    display: grid;
    gap: 1rem;
}

.flex {
    display: flex;
    gap: .4em 2em;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.center {
    text-align: center;
}

.center img {
    margin: 0 auto;
}

.selected {
    color: var(--color-theme-primary);
}

#mnuNavMain .selected {
    font-weight: 900;
}

.block-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.off {
    display: none;
}

/** **/

header {
    border-bottom: 2px solid var(--color-theme-primary);
    padding: 1em 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #201E1D;
    z-index: 1000;
}

header .grid {
    align-items: center;
    grid-template-columns: 1fr 5fr 1fr;
    justify-items: center;
}

header p {
    text-align: right;
}

header h1 {
    text-indent: -6667px;
    background-image: url(img/kmsro.svg);
    background-size: 100% auto;
    background-position: center;
}

header a:hover {
    text-decoration: underline;
}

/** **/

body {
    padding-bottom: 6vh;
}

footer {

    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* background-color: #201E1D; */
    z-index: 1000;

    border-bottom: 2px solid var(--color-theme-primary);
    background-image: url(img/theme-foot.svg);
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: auto 100%;
    padding: 1em;
    text-align: center;
    font-size: 0.875rem;
    color: transparent;
    height: 5vw;
    margin-top: auto;
}

footer p {
    margin: 0;
}

/** **/

section {
    padding-bottom: 0;
    min-height: 60vh;
}

/** **/

button {
    border: none;
    background-color: var(--color-theme-primary);
    color: #000;
    border-radius: var(--border-radius);
    padding: .4em 2em;
    width: 100%;
    font-weight: 500;
}

textarea,
input {
    border: none;
    background-color: transparent;
    color: #fff;
    padding: .4em;
    width: 100%;
}

/** **/

.credits {
    margin-bottom: 2em;
    opacity: .5;
    text-align: center;
    font-size: .9em;
}

.credits:hover {
    opacity: 1;
}

.credits p {
    border: 1px solid #fff;
    padding: .4em 2em;
    border-radius: var(--border-radius);
    display: inline-block;
}

.credits a {
    color: var(--color-theme-primary);
}

.credits a:hover {
    text-decoration: underline;
}

/** **/

header .icon {
    display: inline-block;
    background-size: auto 1.2em;
}

.icon-phone {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5562 12.9062L16.1007 13.359C16.1007 13.359 15.0181 14.4355 12.0631 11.4972C9.10812 8.55901 10.1907 7.48257 10.1907 7.48257L10.4775 7.19738C11.1841 6.49484 11.2507 5.36691 10.6342 4.54348L9.37326 2.85908C8.61028 1.83992 7.13596 1.70529 6.26145 2.57483L4.69185 4.13552C4.25823 4.56668 3.96765 5.12559 4.00289 5.74561C4.09304 7.33182 4.81071 10.7447 8.81536 14.7266C13.0621 18.9492 17.0468 19.117 18.6763 18.9651C19.1917 18.9171 19.6399 18.6546 20.0011 18.2954L21.4217 16.883C22.3806 15.9295 22.1102 14.2949 20.8833 13.628L18.9728 12.5894C18.1672 12.1515 17.1858 12.2801 16.5562 12.9062Z' fill='%23ed7b2e'/%3E%3C/svg%3E");
    background-position: left top .5em;
    padding-left: 1.2em;
}

.icon-mail {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8L10.8906 13.2604C11.5624 13.7083 12.4376 13.7083 13.1094 13.2604L21 8M5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19Z' stroke='%23ED7B2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: left center;
    padding-left: 1.6em;
}

/** 
 *  contact form styles
 **/

form {
    border: 3px solid var(--color-theme-primary);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin: 0 0 2em 0;
}

/** **/

.contact-form-fields {
    position: relative;
    padding: 1em;
}

.contact-form-confirm {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #201E1D;
    z-index: 10;
}

.contact-form-confirm .flex {
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 1.4em;
    padding: 0 15%;
    text-align: center;
}

.contact-form-button {
    padding: 0 1em 1em 1em;
}



/** **/

.loading-1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' data-inject-url='https://www.svgbackgrounds.com/svg/preloaders/bouncing-squares.svg' loading='lazy'%3E%3Crect class='svg__fill svg__stroke svg_strokeWidth' fill='%23fff' stroke='%23fff' stroke-width='15' width='30' height='30' x='25' y='50'%3E%3Canimate attributeName='y' calcMode='spline' dur='2' values='50;120;50;' keySplines='.5 0 .5 1;.5 0 .5 1' repeatCount='indefinite' begin='-.4'%3E%3C/animate%3E%3C/rect%3E%3Crect class='svg__fill svg__stroke svg_strokeWidth' fill='%23fff' stroke='%23fff' stroke-width='15' width='30' height='30' x='85' y='50'%3E%3Canimate attributeName='y' calcMode='spline' dur='2' values='50;120;50;' keySplines='.5 0 .5 1;.5 0 .5 1' repeatCount='indefinite' begin='-.2'%3E%3C/animate%3E%3C/rect%3E%3Crect class='svg__fill svg__stroke svg_strokeWidth' fill='%23fff' stroke='%23fff' stroke-width='15' width='30' height='30' x='145' y='50'%3E%3Canimate attributeName='y' calcMode='spline' dur='2' values='50;120;50;' keySplines='.5 0 .5 1;.5 0 .5 1' repeatCount='indefinite' begin='0'%3E%3C/animate%3E%3C/rect%3E%3C/svg%3E");
}

.loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' data-inject-url='https://www.svgbackgrounds.com/svg/preloaders/bouncing-squares.svg' loading='lazy'%3E%3Crect class='svg__fill svg__stroke svg_strokeWidth' fill='%23fff' stroke='%23fff' stroke-width='15' width='30' height='30' x='25' y='50'%3E%3Canimate attributeName='y' calcMode='spline' dur='2' values='50;120;50;' keySplines='.5 0 .5 1;.5 0 .5 1' repeatCount='indefinite' begin='-.4'%3E%3C/animate%3E%3C/rect%3E%3Crect class='svg__fill svg__stroke svg_strokeWidth' fill='%23fff' stroke='%23fff' stroke-width='15' width='30' height='30' x='85' y='50'%3E%3Canimate attributeName='y' calcMode='spline' dur='2' values='50;120;50;' keySplines='.5 0 .5 1;.5 0 .5 1' repeatCount='indefinite' begin='-.2'%3E%3C/animate%3E%3C/rect%3E%3Crect class='svg__fill svg__stroke svg_strokeWidth' fill='%23fff' stroke='%23fff' stroke-width='15' width='30' height='30' x='145' y='50'%3E%3Canimate attributeName='y' calcMode='spline' dur='2' values='50;120;50;' keySplines='.5 0 .5 1;.5 0 .5 1' repeatCount='indefinite' begin='0'%3E%3C/animate%3E%3C/rect%3E%3C/svg%3E");
    background-size: 2em 2em;
    background-position: center;
    background-repeat: no-repeat;
    color: rgb(255, 255, 255, 0.1);
}

/** **/

.fadeIn {
    position: relative;
    overflow: hidden;
}

.fadeIn img {
    opacity: 0;
}