/* ///////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////            IMPORTS            /////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////// */

@import url("reset.css");
@import url("support_classes.css");

/* ///////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////              VARS             /////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////// */

:root {
  --title-color: #fff;
  --base-color: #181818;
  --light-base-color: #eaeaea;
  --additional-color: #d93280;
  --additional-color-rgb: 217, 50, 128;
  --second-additional-color: #3f44a6;
  --second-additional-color-rgb: 63, 68, 166;
  --background-color: #f6f6f6;
  --diapositive-padding: 5vmin;
  --red-color: rgb(221, 51, 56);
  --green-color: rgb(29, 193, 81);
  --text-background: rgba(255, 255, 255, 0.9);
}

body{
  height: 100%;
  width: 100%;
  overflow: hidden auto;
  background-color: var(--background-color) !important;
}

body > .container-fluid > .row{
  height: 100vh;
  padding: var(--diapositive-padding);
}

body > .container-fluid > .row > div[class^="col"]{
  height: 100%;
}

html{
  height: 100%;
  width: 100%;
  overflow: hidden auto;
}

body h1, bold_h1 {
  color: var(--base-color);
  font-size: calc(20pt + 3vmin);
  line-height: calc(35pt + 2.6vw);
  font-family: title_font;
}

body h2 {
  color: var(--base-color);
  font-size: calc(9pt + 3.8vmin);
  font-family: title_font;
}

bold_h2{
  color: var(--base-color);
  font-size: calc(9pt + 1.8vw);
}

body h3 {
  color: var(--base-color);
  font-size: 18pt;
  line-height: 1.1;
  margin-bottom: 25px;
  font-family: title_font;
}

body h4 {
  /* titulos para los menu-layers */
  color: var(--base-color);
  font-size: calc(14pt + 1.4vw);
  text-transform: uppercase;
  font-family: title_font;
}

body p {
  color: var(--base-color);
  font-size: 14pt;
  font-size: calc(8.5pt + 0.5vw);
  line-height: calc(14pt + 0.9vw);
  font-family: base_font;
}

/* ///////////////////////////////////////////////////////////////////////////////////////////
 /////////////////////////////////////////////////////////////////////////////////////////////
 ///////////////////////////            CLASSES            /////////////////////////
 /////////////////////////////////////////////////////////////////////////////////////////////
 ///////////////////////////////////////////////////////////////////////////////////////////// */

.diapositive {
  position: relative;
  height: 100%;
  background-color: var(--background-color);
}

/* ///////////////////////////////////////////////////////////////////////////////////////////
 /////////////////////////////////////////////////////////////////////////////////////////////
 ///////////////////////////            FONTS            /////////////////////////
 /////////////////////////////////////////////////////////////////////////////////////////////
 ///////////////////////////////////////////////////////////////////////////////////////////// */

@font-face {
  font-family: base_paragraph_font;
  src: url('../assets/fonts/Roboto-Light.ttf') format('truetype');
}

@font-face {
  font-family: bold_paragraph_font;
  src: url('../assets/fonts/Roboto-Bold.ttf') format('truetype');
}

@font-face {
  font-family: italic_paragraph_font;
  src: url('../assets/fonts/Roboto-Italic.ttf') format('truetype');
}

@font-face {
  font-family: title_font;
  src: url('../assets/fonts/AmaticSC-Regular.ttf') format('truetype');
}

@font-face {
  font-family: bold_title_font;
  src: url('../assets/fonts/AmaticSC-Bold.ttf') format('truetype');
}

body p{
  font-family: base_paragraph_font;
}

body h1, body h2{
  font-family: title_font;
}

bold_p{
  font-family: bold_paragraph_font;
}

italic_p{
  font-family: italic_paragraph_font;
}

bold_italic_p{
  font-family: bold_italic_paragraph_font;
}

bold_h1{
  font-family: bold_title_font;
}

bold_h2{
  font-family: bold_title_font;
}

/* ///////////////////////////////////////////////////////////////////////////////////////////
 /////////////////////////////////////////////////////////////////////////////////////////////
 ///////////////////////////            SCROLL            ////////////////////////////////////
 /////////////////////////////////////////////////////////////////////////////////////////////
 ///////////////////////////////////////////////////////////////////////////////////////////// */

.scroll_warning {
  z-index: 2;
  color: #000;
  padding: 5px;
  -webkit-animation: pulse 3s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 3s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 3s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 3s infinite cubic-bezier(0.66, 0, 0, 1);
  cursor: default;
}

@-webkit-keyframes pulse {
  0% {
    transform: scale(.7);
  }

  50% {
    transform: scale(.9);
  }

  100% {
    transform: scale(.7);
    box-shadow: 0 0 5px 15px rgba(164, 164, 164, 0);
  }
}

@-moz-keyframes pulse {
  0% {
    transform: scale(.7);
  }

  50% {
    transform: scale(.9);
  }

  100% {
    transform: scale(.7);
    box-shadow: 0 0 5px 15px rgba(164, 164, 164, 0);
  }
}

@-ms-keyframes pulse {
  0% {
    transform: scale(.7);
  }

  50% {
    transform: scale(.9);
  }

  100% {
    transform: scale(.7);
    box-shadow: 0 0 5px 15px rgba(164, 164, 164, 0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(.7);
  }

  50% {
    transform: scale(.9);
  }

  100% {
    transform: scale(.7);
    box-shadow: 0 0 5px 15px rgba(164, 164, 164, 0);
  }
}