/* cuprum-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Cuprum';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/cuprum-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* cuprum-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Cuprum';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/cuprum-v25-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-sans-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/nunito-sans-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-sans-italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito Sans';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/nunito-sans-v15-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-sans-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/nunito-sans-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-sans-800 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/nunito-sans-v15-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
  --scw-orange: #ff8000;
  --scw-orange-light: #fde1c5;
  --scw-orange-alt: #ff8000;
  --scw-orange-alt-light: #e05f5d;
  --scw-orange-alt-dark: #d83533;
  --scw-blue: #2937f0;
    --scw-blue-dark: #194383;

  --scw-gray: #636363;
  --scw-gray-light: #707070;
  --scw-gray-dark: #565656;
  --scw-gray-alt: #dee2e6;
  --scw-gray-alt-light: #edeff1;
  --scw-gray-alt-dark: #cfd5db;
  --scw-green: #96ae23;
  --scw-green-light: #a8c327;
  --scw-green-dark: #84991f;
  --scw-orange-rgb: 255, 128,0;
  --scw-orange-light-rgb: 253,  225,  197;
  --scw-orange-dark-rgb: 159,  0,  6;
  --scw-orange-alt-rgb: 220,   74,  72;
  --scw-orange-alt-light-rgb: 224,  95,  93;
  --scw-orange-alt-dark-rgb: 216,  53,  51;
  --scw-blue-dark-rgb: 25,  67,  131;
  --scw-gray-rgb: 99,  99,  99;
  --scw-gray-light-rgb: 112,  112,  112;
  --scw-gray-dark-rgb: 86,  86,  86;
  --scw-gray-alt-rgb: 222,  226,  230;
  --scw-gray-alt-light-rgb: 237,  239,  241;
  --scw-gray-alt-dark-rgb: 207,  213,  219;
  --scw-green-rgb: 150,  174,  35;
  --scw-green-light-rgb: 168,  195,  39;
  --scw-green-dark-rgb: 132,  153,  31;

  --scw-body-font-family: "Nunito Sans", sans-serif;
  --scw-body-font-size: "18px";
  --scw-headline-font-family: "Cuprum", sans-serif;
}

* {
  scrollbar-color: #bbb #ddd;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: #ddd;
}

::-webkit-scrollbar-thumb {
  border: none;
  border-radius: 4px;
  background-color: #bbb;
}
/* STANDARD */
body {
    min-width: 320px;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--scw-headline-font-family);
    color: var(--scw-gray-dark);
}

h4,
.h4 {
    font-size: 22px;
}

a {
    color: var(--scw-orange);
}

a:hover {
    color: var(--scw-orange-dark);
}

ol {
    list-style-type: none;
    counter-reset: scw;
    padding: 0;
}

ol li {
    counter-increment: scw;
    position: relative;
    padding-left: 1rem;
    margin-top: 1rem;
}

ol li li {
    padding-left: 2rem;
}

ol li li li {
    padding-left: 3rem;
}

ol li::before {
    content: counters(scw, ".") ".";
    color: var(--scw-red);
    font-weight: 600;
    position: absolute;
    left: 0;
}

.text-primary {
    color: rgba(var(--scw-orange-rgb)) !important;
}

.bg-primary {
    background-color: rgba(var(--scw-orange-rgb)) !important;
    color: #ffffff;
}


.bg-primary h1 {
    color: white;
    font-weight: bold;
}

.bg-secondary {
    background-color: rgba(var(--scw-blue-dark-rgb)) !important;
    color: #ffffff;
}

.bg-gradient-primary-to-secondary {
    background: linear-gradient(45deg, var(--scw-orange), var(--scw-blue)) !important;
}

.z-index-1 {
    z-index: 1;
}

.z-index-2 {
    z-index: 2;
}

.z-index-3 {
    z-index: 3;
}

/* END STANDARD */

.avatar {
    border-radius: 100%;
    width: 100%;
}

/* Navigation */
.navbar-brand {
    padding: 0;
}
.navbar-toggler {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: box-shadow .15s ease-in-out;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    color: white;
}

.navbar .nav-item .nav-link {
  font-size: 1rem;
}
.navbar {
    padding: 0;
}
.nav-link {
  font-family: var(--scw-headline-font-family);
}
a.nav-link.text-white:hover {
    color: var(--scw-orange) !important;
}
#navigation {
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
#navigation .navbar-brand > img {
   width:165px;
}
#navigation.is-visible {
    height: 60px;
    background-color: var(--scw-blue-dark) !important;
    transform: translateY(0);
}
#navigation.is-hidden {
    transform: translateY(-100%);
}
#navigation.is-visible .navbar-brand > img,
#navigation.is-hidden .navbar-brand > img {
    width:170px;
}
#navigation.is-visible .btn-primary {
    /*background: var(--scw-blue-dark);
    border-color: var(--scw-blue-dark);*/
}
#navigation.is-visible .btn-primary:hover {
    background: linear-gradient(45deg, var(--scw-orange), var(--scw-blue)) !important;
    border-color: #2937f0;
}
/* END Navigation */

/* Buttons */
.btn {
  border-radius: 999px;
    text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0.9375rem 2.5rem;
}

.btn:hover {
    color: white;
    background-color: var(--scw-blue-dark) ;
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
}

.btn-primary {
  background-color: var(--scw-orange);
  border-color: var(--scw-orange);
}

.btn-primary:hover {
  background-color: var(--scw-orange-dark);
  border-color: var(--scw-orange-dark);
}

.btn-primary:active:focus,
.btn-primary:active,
.btn-primary:focus {
  color: #fff;
  background-color: var(--scw-orange-dark);
  border-color: var(--scw-orange-dark);
  box-shadow: 0 0 0 0.25rem rgba(var(--scw-orange-dark-rgb), 0.25);
}
/* END Buttons */

/* FORMS */
.form-check-input:checked {
  background-color: var(--scw-red);
  border-color: var(--scw-red);
}

.form-check-input:focus {
  border-color: var(--scw-orange-light);
  box-shadow: 0 0 0 0.25rem rgba(var(--scw-orange-rgb), 0.25);
}

.form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-floating > .form-control:autofill {
  background: var(--scw-light);
}

.form-floating > .form-control.bg-white:autofill {
  background: var(--scw-white);
}

.form-floating > .form-control,
.form-floating > .form-select {
  color: var(--scw-gray);
  background-color: var(--scw-light);
  font-size: 1.55rem;
  font-weight: 500;
  height: 3.5rem;
  padding: 1.55rem 1rem 0.45rem;
  line-height: 1.5rem;
  border: none;
  border-radius: 0.375rem;
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
  padding: 1.55rem 1rem 0.45rem;
}

.form-floating > .form-control:focus,
.form-floating > .form-control.is-invalid:focus {
  box-shadow: 0 0 3px 0.25rem rgba(var(--scw-orange-light-rgb), 0.15), 0 0 0 1px rgba(var(--scw-orange-light-rgb), 1);
}

.form-floating > .form-select,
.form-floating > .form-select:focus,
.form-floating > .form-select:not(:placeholder-shown) {
  text-overflow: ellipsis;
  padding: 1.55rem 0.75rem 0.45rem;
}

.form-floating > .form-select:focus {
  box-shadow: 0 0 3px 0.25rem rgba(var(--scw-orange-light-rgb), 0.15), 0 0 0 1px rgba(var(--scw-orange-light-rgb), 1);
}

.form-floating > .form-select > option {
  font-family: "Roboto", sans-serif;
}

.form-floating > .form-control.is-invalid {
  background-image: none;
  box-shadow: 0 0 0 1px rgba(var(--scw-orange-light-rgb), 1);
}

.form-floating > label {
  color: rgba(var(--scw-gray-rgb), 1);
  background-color: var(--scw-light);
  font-size: 0.9rem;
  font-weight: 500;
  height: 3.5rem;
  padding: 1rem;
  border: none;
  line-height: 1.5rem;
  transition: all 0.1s ease-in-out;
  z-index: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  border-radius: 0.375rem !important;
}

.form-floating > .form-control.bg-white ~ label,
.form-floating > .form-select.bg-white ~ label {
  background-color: var(--scw-white);
}

.form-floating > textarea + label {
  width: calc(100% - 8px);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  color: rgba(var(--scw-orange-rgb), 1);
  transform: none;
  padding: 0.45rem 1rem 0;
  opacity: 1;
  height: 1.75rem;
}

.form-floating:hover > .form-control:not(:focus):placeholder-shown ~ label {
  color: rgba(var(--scw-orange-rgb), 0.75);
}

.form-floating > .form-select.is-invalid:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-floating > .form-icon {
  padding: 0 1rem;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  z-index: 4;
  width: 3rem;
  justify-content: center;
}

.form-floating > .form-icon > i {
  font-size: 1rem;
}

.form-floating > .form-icon-start {
  color: rgba(var(--scw-orange-rgb), 1);
  right: unset;
  left: 0;
}

.form-floating > .form-icon + .form-control,
.form-floating > .form-icon + .form-select,
.form-floating > .form-icon ~ label {
  padding-right: 3rem !important;
}

.form-floating > .form-icon-start ~ .form-control,
.form-floating > .form-icon-start ~ .form-select,
.form-floating > .form-icon-start ~ label {
  padding-left: 3rem !important;
}

.input-group-text {
  background-color: var(--scw-light);
  border: 0;
  border-radius: 0.5rem;
  padding: 0 1rem;
  margin-left: -1rem !important;
  z-index: 3;
}

.input-group > .form-control.bg-white ~ .input-group-text {
  background-color: var(--scw-white);
}
/* END FORMS */

/* Partner Logos */
.single-partner {
    text-align: center;
    margin-bottom: 40px;
}
a.single-partner {
    box-sizing: border-box;
}
.single-partner img {
    max-width: 100%;
    vertical-align: middle;
    transition: all .5s ease;
}
/* END Partner Logos*/

/* Accordion */
.accordion-header,
.accordion-body {
    color: var(--scw-body-color);
}
.accordion-button {
    background-color: var(--scw-orange-light);
}
.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: var(--scw-orange);
}
.accordion-item {
    background-color: #fff;
    border: 1px solid var(--scw-orange);
}
.accordion-button:focus {
    z-index: 3;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: none;
}
/* END Accordion */

/* Homepage */
#header {
    background-color: var(--scw-blue-dark);
    background-image: url("/img/scadawire.webp");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
}

.animated-text {
    animation: move 36s linear infinite;
    /* background-image: linear-gradient(to right,#E0146A, #7A00B4, #5CA3EF, #7A00B4, #E0146A); */
    background-image: linear-gradient(to right,var(--scw-orange),var(--scw-blue), #E0146A, var(--scw-blue),var(--scw-orange));
    background-size: 400% auto;
    letter-spacing: 1px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes move { to { background-position: 400% center; } }
body {
    font-family: var(--scw-body-font-family);
    font-size: var(--scw-body-font-size);
    color: var(--scw-gray);
}

.container-hero-title {
    width: 100%;
    max-width: 900px;
    flex: 1;
    margin-left: auto;
    margin-right: auto;

}
.container-hero-title h1 {
    color: white;
    font-size: 4rem;
    font-weight: 700;
}
.handwritten-text-wrapper {
    width: 540px;
    height: 130px;
    /*float: left;*/
    display: inline-block;
    text-shadow: #FC0 1px 0 10px;
}
.card {
    border-width: 0;
    box-shadow: 24px 24px 44px 0 rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* END Homepage */

/* Scadawire Animation */
.handwritten-text-wrapper .squad-w,
.handwritten-text-wrapper .squad-i,
.handwritten-text-wrapper .squad-ip,
.handwritten-text-wrapper .squad-r,
.handwritten-text-wrapper .squad-e {
    stroke: var(--scw-orange);
}

.squad-s {
    stroke-dasharray: 1;
    stroke-dashoffset: 2;
    animation: s-animation 0.7s cubic-bezier(0.4, 0, 0.2, 1) alternate;
}
.squad-c {
    stroke-dasharray: 1;
    stroke-dashoffset: 2;
    animation: c-animation 1.4s cubic-bezier(0.4, 0, 0.2, 1) alternate;
}
.squad-ad {
    stroke-dasharray: 1;
    stroke-dashoffset: 2;
    animation: ad-animation 2.9s cubic-bezier(0.4, 0, 0.2, 1) alternate;
}
.squad-d-top {
    stroke-dasharray: 1;
    stroke-dashoffset: 2;
    animation: d-animation 4.0s cubic-bezier(0.4, 0, 0.2, 1) alternate;
}
.squad-a {
    stroke-dasharray: 1;
    stroke-dashoffset: 2;
    animation: a-animation 5.8s cubic-bezier(0.4, 0, 0.2, 1) alternate;
}
.squad-w {
    stroke-dasharray: 1;
    stroke-dashoffset: 2;
    animation: w-animation 6.5s cubic-bezier(0.4, 0, 0.2, 1) alternate;
}
.squad-i {
    stroke-dasharray: 1;
    stroke-dashoffset: 2;
    animation: i-animation 7.7s cubic-bezier(0.4, 0, 0.2, 1) alternate;
}
.squad-ip {
    stroke-dasharray: 1;
    stroke-dashoffset: 2;
    animation: ip-animation 8.3s cubic-bezier(0.4, 0, 0.2, 1) alternate;
}
.squad-r {
    stroke-dasharray: 1;
    stroke-dashoffset: 2;
    animation: r-animation 9.0s cubic-bezier(0.4, 0, 0.2, 1) alternate;
}
.squad-e {
    stroke-dasharray: 1;
    stroke-dashoffset: 2;
    animation: e-animation 10.3s cubic-bezier(0.4, 0, 0.2, 1) alternate;
}

@keyframes s-animation {
    0% {
        stroke-dashoffset: 1;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes c-animation {
    0% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    50% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    55% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes ad-animation {
    0% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    50% {
        stroke-dashoffset: 1;
        opacity: 1;
    }
    69% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes d-animation {
    0% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    70% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    90% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}
@keyframes a-animation {
    0% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    60% {
        stroke-dashoffset: 1;
        opacity: 1;
    }
    87% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}
@keyframes w-animation {
    0% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    83% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    87% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}
@keyframes i-animation {
    0% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    83% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    87% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}
@keyframes ip-animation {
    0% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    83% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    87% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}
@keyframes r-animation {
    0% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    83% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    87% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}
@keyframes e-animation {
    0% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    83% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    90% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}
/* END Scadawire Animation*/

@media (min-width: 1200px) {
    .h2, h2 {
        font-size: 32px;
    }
    .h3, h3 {
        font-size: 24px;
    }
}

/*LG*/
@media (min-width: 1200px) {
    .h2, h2 {
        font-size: 32px;
    }
    .h3, h3 {
        font-size: 24px;
    }
}
/*SM*/
@media (max-width: 768px) {
    h1.animated-text {
        font-size: 3rem;
    }
}
/*XS*/
@media (max-width: 576px) {
    h1.animated-text {
        font-size: 2.5rem;
    }
    .handwritten-text-wrapper {
        width: 320px;
    }
    .btn {
        font-size: 1rem;

    }
    .navbar-brand {
        padding-top: 0;
        padding-bottom: 0;
    }
    #navigation.is-visible .navbar-brand > img {
        height: 60px;
    }
}