﻿@font-face {
  font-family: Museo-100;
  src: url("/StatoPratiche/fonts/museo/Museo-100.otf");
  font-weight: var(--font-weight-light);
  font-style: normal;
}
@font-face {
  font-family: Museo-100-italic;
  src: url("/StatoPratiche/fonts/museo/Museo-100italic.otf");
  font-weight: var(--font-weight-light);
  font-style: italic;
}
@font-face {
  font-family: Museo-300;
  src: url("/StatoPratiche/fonts/museo/Museo-300.otf");
  font-weight: var(--font-weight-regular);
  font-style: normal;
}
@font-face {
  font-family: Museo-300-italic;
  src: url("/StatoPratiche/fonts/museo/Museo-300italic.otf");
  font-weight: var(--font-weight-regular);
  font-style: italic;
}
@font-face {
  font-family: Museo-500;
  src: url("/StatoPratiche/fonts/museo/Museo-500.otf");
  font-weight: var(--font-weight-medium);
  font-style: normal;
}
@font-face {
  font-family: Museo-500-italic;
  src: url("/StatoPratiche/fonts/museo/Museo-500italic.otf");
  font-weight: var(--font-weight-medium);
  font-style: italic;
}
@font-face {
  font-family: Museo-700;
  src: url("/StatoPratiche/fonts/museo/Museo-700.otf");
  font-weight: var(--font-weight-bold);
  font-style: normal;
}
@font-face {
  font-family: Museo-700-italic;
  src: url("/StatoPratiche/fonts/museo/Museo-700italic.otf");
  font-weight: var(--font-weight-bold);
  font-style: italic;
}
@font-face {
  font-family: Museo-900;
  src: url("/StatoPratiche/fonts/museo/Museo-900.otf");
  font-weight: var(--font-weight-extrabold);
  font-style: normal;
}
@font-face {
  font-family: Museo-900-italic;
  src: url("/StatoPratiche/fonts/museo/Museo-900italic.otf");
  font-weight: var(--font-weight-extrabold);
  font-style: italic;
}
:root {
  --font-family-100: "Museo-100";
  --font-family-100-italic: "Museo-100-italic";
  --font-family-300: "Museo-300";
  --font-family-300-italic: "Museo-300-italic";
  --font-family-500: "Museo-500";
  --font-family-500-italic: "Museo-500-italic";
  --font-family-700: "Museo-700";
  --font-family-700-italic: "Museo-700-italic";
  --font-family-900: "Museo-900";
  --font-family-900-italic: "Museo-900-italic";
  --font-size: 1.2rem;
  --font-size-sm: .95rem;
  --font-size-md: 1.8rem;
  --font-size-lg: 2.3rem;
  --font-weight-light: 100;
  --font-weight-regular: 300;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 900;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-grey: #EEEEF0;
  --color-orange: #D54215;
  --color-green: #00C992;
  --color-yellow: #D8CA04;
  --color-yellow-2: #7E5900;
  --color-violet: #F67BE6;
  --color-blue: #0052A3;
  --color-transparent: transparent;
  --box-shadow: 0 -10px 20px rgba(0, 0, 0, .3);
  --clip-path: polygon(0 0, calc(100% - 80px) 0, 100% 50px, 100% 100%, 80px 100%, 0 calc(100% - 50px));
  --clip-path-2: polygon(0 0, calc(100% - 50px) 0, 100% 40px, 100% 100%, 50px 100%, 0 calc(100% - 40px));
  --cubic-bezier: cubic-bezier(.6,.03,.44,.89);
}

@font-face {
  font-family: Museo-100;
  src: url("/StatoPratiche/fonts/museo/Museo-100.otf");
  font-weight: var(--font-weight-light);
  font-style: normal;
}
@font-face {
  font-family: Museo-100-italic;
  src: url("/StatoPratiche/fonts/museo/Museo-100italic.otf");
  font-weight: var(--font-weight-light);
  font-style: italic;
}
@font-face {
  font-family: Museo-300;
  src: url("/StatoPratiche/fonts/museo/Museo-300.otf");
  font-weight: var(--font-weight-regular);
  font-style: normal;
}
@font-face {
  font-family: Museo-300-italic;
  src: url("/StatoPratiche/fonts/museo/Museo-300italic.otf");
  font-weight: var(--font-weight-regular);
  font-style: italic;
}
@font-face {
  font-family: Museo-500;
  src: url("/StatoPratiche/fonts/museo/Museo-500.otf");
  font-weight: var(--font-weight-medium);
  font-style: normal;
}
@font-face {
  font-family: Museo-500-italic;
  src: url("/StatoPratiche/fonts/museo/Museo-500italic.otf");
  font-weight: var(--font-weight-medium);
  font-style: italic;
}
@font-face {
  font-family: Museo-700;
  src: url("/StatoPratiche/fonts/museo/Museo-700.otf");
  font-weight: var(--font-weight-bold);
  font-style: normal;
}
@font-face {
  font-family: Museo-700-italic;
  src: url("/StatoPratiche/fonts/museo/Museo-700italic.otf");
  font-weight: var(--font-weight-bold);
  font-style: italic;
}
@font-face {
  font-family: Museo-900;
  src: url("/StatoPratiche/fonts/museo/Museo-900.otf");
  font-weight: var(--font-weight-extrabold);
  font-style: normal;
}
@font-face {
  font-family: Museo-900-italic;
  src: url("/StatoPratiche/fonts/museo/Museo-900italic.otf");
  font-weight: var(--font-weight-extrabold);
  font-style: italic;
}
:root {
  --font-family-100: "Museo-100";
  --font-family-100-italic: "Museo-100-italic";
  --font-family-300: "Museo-300";
  --font-family-300-italic: "Museo-300-italic";
  --font-family-500: "Museo-500";
  --font-family-500-italic: "Museo-500-italic";
  --font-family-700: "Museo-700";
  --font-family-700-italic: "Museo-700-italic";
  --font-family-900: "Museo-900";
  --font-family-900-italic: "Museo-900-italic";
  --font-size: 1.2rem;
  --font-size-sm: .95rem;
  --font-size-md: 1.8rem;
  --font-size-lg: 2.3rem;
  --font-weight-light: 100;
  --font-weight-regular: 300;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 900;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-grey: #EEEEF0;
  --color-orange: #D54215;
  --color-green: #00C992;
  --color-yellow: #D8CA04;
  --color-yellow-2: #7E5900;
  --color-violet: #F67BE6;
  --color-blue: #0052A3;
  --color-transparent: transparent;
  --box-shadow: 0 -10px 20px rgba(0, 0, 0, .3);
  --clip-path: polygon(0 0, calc(100% - 80px) 0, 100% 50px, 100% 100%, 80px 100%, 0 calc(100% - 50px));
  --clip-path-2: polygon(0 0, calc(100% - 50px) 0, 100% 40px, 100% 100%, 50px 100%, 0 calc(100% - 40px));
  --cubic-bezier: cubic-bezier(.6,.03,.44,.89);
}

.color-black {
  color: var(--color-black) !important;
}

.color-white {
  color: var(--color-white) !important;
}

.color-grey {
  color: var(--color-grey) !important;
}

.color-orange {
  color: var(--color-orange) !important;
}

.color-green {
  color: var(--color-green) !important;
}

.color-yellow {
  color: var(--color-yellow) !important;
}

.color-violet {
  color: var(--color-violet) !important;
}

.color-blue {
  color: var(--color-blue) !important;
}

.color-transparent {
  color: var(--color-transparent) !important;
}

.background-black {
  background-color: var(--color-black) !important;
}

.background-white {
  background-color: var(--color-white) !important;
}

.background-grey {
  background-color: var(--color-grey) !important;
}

.background-orange {
  background-color: var(--color-orange) !important;
}

.background-green {
  background-color: var(--color-green) !important;
}

.background-yellow {
  background-color: var(--color-yellow) !important;
}

.background-violet {
  background-color: var(--color-violet) !important;
}

.background-blue {
  background-color: var(--color-blue) !important;
}

.background-transparent {
  background-color: var(--color-transparent) !important;
}

@media (max-width: 992px) {
  body {
    margin: 15px;
  }
  .default {
    overflow: unset;
    overflow-x: hidden;
  }
  .default .page-title {
    top: 50px;
    left: 50px;
  }
  .default .default-content {
    height: unset;
  }
  .default .default-content .block {
    position: relative;
    width: calc(100vw + 100px);
    height: unset;
    min-height: 100vh;
    left: calc(-100vw - 100px);
    clip-path: unset;
  }
  .default .default-content .block.r {
    right: calc(-100vw - 100px);
    transform: translateX(-100px);
    clip-path: unset;
  }
  #faq-modal .modal-dialog .modal-content {
    max-width: 80vw;
  }
}
@media (max-width: 768px) {
  .page-title {
    display: block;
  }
  .page-title h1 {
    margin: 10px 0 0 0;
    padding: 0;
  }
  .page-title h1::before {
    content: none;
  }
  .default .page-title {
    top: 40px;
    left: 20px;
  }
  .default .default-content .block {
    display: block;
    padding: 160px 65px 30px 65px;
  }
  .default .default-content .block .content {
    width: 100%;
  }
  .default .default-content .block.mymodal {
    display: block;
    padding: 70px 15px 30px 15px;
  }
  .default .default-content .block.mymodal .content {
    width: 100%;
  }
  .modal .modal-dialog .modal-content {
    max-width: unset !important;
    width: 100vw;
    height: 100vh;
  }
  .modal .modal-dialog .modal-content .modal-header {
    padding: 20px 20px 0 20px;
  }
  .modal .modal-dialog .modal-content .modal-body {
    height: calc(100vh - 70px);
    padding: 20px;
    overflow-y: auto;
  }
}
