@font-face {
    font-family: 'LemonMilk-Bold';
    src: url('fonts/LemonMilk/LEMONMILK-Medium.otf') format('opentype');
    font-style: normal;
    font-weight: 700;     
  }
  @font-face{
    font-family: 'LemonMilk';
    src: url('fonts/LemonMilk/LEMONMILK-Light.otf') format('opentype');
    font-style: normal;
    font-weight: 500;
  }
  @font-face {
    font-family: 'Futura-PT';
    src: url('fonts/FuturaPTBook/futura-pt-book.otf') format('opentype');
    font-style: normal;
    font-weight: 500;
  }
  @font-face{
    font-family: 'Futura-PT-Light';
    src: url('fonts/FuturaPTBook/FuturaPTLight.otf');
    font-style: normal;
    font-weight: 400;
  }
  body{
      --themeColor:#031e3a;
      --goldenColor: #ffd700;
      --colorWhite: white;
  }
  li{
    list-style: georgian outside url(Icons/Jet.svg);
    margin-bottom: 20px;
    color: white;
    font-family: 'Futura-PT';
  }
  p .serviciosText {
    font-family: 'Futura-PT';

  }
  .serviciosText-Bold{
    font-family: 'LemonMilk-Bold';
  }
  .RedesSocialesContenedor{
    width: 40px!;
    height: 40px!;

  }
  .cinta {
      height: 10px;
      background-color: var(--goldenColor);
  }
  .primerPalabra{
      color: white;
      font-size: 3em;
      font-family: 'LemonMilk';
  }
  .segundaPalabra{
      color: var(--goldenColor);
      font-size: 3em;
      font-family: 'LemonMilk-Bold';
  }
  .textContainer{
      width: 90%;
      margin: 40px auto;
      border: 1px solid transparent;
      background-image: linear-gradient(var(--goldenColor), var(--goldenColor)),
                        linear-gradient(var(--goldenColor), var(--goldenColor)),
                        linear-gradient(var(--goldenColor), var(--goldenColor)),
                        linear-gradient(var(--goldenColor), var(--goldenColor));           
      background-repeat: no-repeat;
      background-size: 10px 38%, 15% 10px, 10px 38%, 15% 10px, calc(100% - 8px) calc(100% - 8px);
      background-position: left bottom, left bottom, right top, right top, 4px 4px;
      height: auto;
      padding: 1.5em;
      text-align: center;
  }
  .colorTema{
      background-color: var(--themeColor);
  }
  .colorTextWhite{
      color: var(--colorWhite);
  }
  .colorTextOro{
      color: var(--goldenColor);
  }
  .imagenCarga{
      border-left: 10px solid var(--goldenColor);
      margin-top: 4em;
  }
  .centerImage{
      width: 80%;
      text-align: center;
  }
  .bannerBlue{
    background-color: var(--themeColor);
    color: var(--goldenColor);
    height: 100px;
  }
  .imagenPortafolio{
    display: flex;
    align-items: center;
  }
  .circle{
    background: transparent;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    text-align: center;  
    align-items: center;  
    border-color: var(--colorWhite);
    border-width: 3px;
    border-style: solid;
    }
  .facebook-circle{
    padding-left: 8px;
    padding-top: 7px;
  }
  .linkedin-circle{
    padding-left: 4px;
    padding-top: 4px;
  }
  .instagram-circle{
    padding-left: 5px;
    padding-top: 5px;
  }
  .twitter-circle{
    padding-left: 5.5px;
    padding-top: 3px;
  }
  .textoFuturaPTLightalorAgregado{
    font-family: 'Futura-PT-Light';
  }
  #Contacto{
    background-image: url(images/AdobeStock_295781709.jpeg);
    background-repeat: no-repeat;
    background-size: 100vh;
    background-size: 100vw;
  }
  .altura{
    height: 100vh;
    width: 100vw;
  }
  #Servicios{
    background-image: url(images/Recurso\ 2-100.jpg);
    background-size: 100vh;
    background-size: 100vw;
    background-repeat: no-repeat;
  }
  .patronVertical{
    height: 200px;
    background-image: url(images/PATRONES.png);
    background-size: 400px;
    background-repeat: repeat-y;
    clip-path: polygon();
  }
  .centradoVertical{
    display: flex;
    align-items: center;
  }
  .scroll{
    background-color: aqua;
    color: black;
  }

  @media only screen and (min-width: 576) {
    .pictureLogo{
      padding-left: 40%;
    }
    .paddingBanner{
      padding: 7em;
    }
    #home{
    background-size: 100vh;
    background-size: 100vw;
    background-repeat: no-repeat;
  }
  }
  @media only screen and (max-width: 575){
    .pictureLogo{
      padding: 0px;
    }
    .paddingBanner{
      padding: 0px;
    }
    #home{
    background-size: 200vh;
    background-size: 100vw;
    background-repeat: no-repeat;
    }
  }