/* @import url('http://example.com/example_style.css'); */
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap');

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/****************************************/
/* HubSpot Style Boilerplate            */
/****************************************/

/* These includes are optional, but helpful. */
{% include "hubspot/styles/responsive/modules.css" %}
{% include "hubspot/styles/patches/recommended.css" %}


/*****************************************/
/* Start your style declarations here    */
/*****************************************/


:root {
  --grey: rgb(85,85,85);
  --white: rgb(252,252,252);
  --ice: rgb(245,245,245);
  --blue: rgb(173, 216, 230);
  --darkblue: rgb(37, 62, 88);
  --yellow: rgb(240, 179, 30);
  --red: #d93858;
  --green: #32D94E;
  --primary: #2196F3;
  --black: #1d1d1b;
  font-family: 'Montserrat', sans-serif;
}

.backTop {
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  left: 16px !important;
  bottom: 16px !important;
  cursor: pointer;
  transition: opacity 0.5s, transform 0.5s;
  opacity: 0;
  z-index: 1000000;
  transform: scale(0);
}


/*--------------Footer Prado-------------*/

#footer{
  background: #010001;
}

#first-line{
  display: flex;
  align-items: center;
  padding: 30px 0!important;
  position: relative;
}

#animation-container{
  height: fit-content;
  width: 160px; 
}

.address p{
  padding: 0;
  color: var(--white);
  margin: 5px 0;
  font-size: 12px;
  font-weight: 100;
}

.social-media {
  display: flex;
  width: fit-content;
  height: fit-content;
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translate(0, -100%);
  color: transparent;
}

.social-item a{
  color: transparent;
}


#second-line {
  display: flex;
  justify-content: space-between;
  border-top: .15px solid var(--grey);
}
#second-line > .textContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  align-items: flex-start;
  justify-items: center;
  grid-gap: 4rem;
  padding: 5px 0 !important;
  margin: 0 auto !important;
}

#second-line > .textContainer > p {
  color: var(--white);
  font-size: 12px;
  padding: 0 !important;
}

#second-line > .textContainer > p a{
  color: var(--primary); 
}

#second-line > .textContainer > p a:hover{
  color: var(--yellow);  
  transition: all .6s ease;
}  

.social-item::before{
  display:none !important; 
  color: transparent;
}

.social-item {
  width: 30px;
  height: 30px;
  background-position: center !important;
  background-size: contain !important;
  margin: 0 5px;
  transform:scale(1);
  transform-origin: center;
  background-repeat: no-repeat !important;
  color: transparent;
}
.footer-container-wrapper{
  background: #000;
}

#facebook{  background: url('https://cdn2.hubspot.net/hubfs/5879415/Social%20Icons/social%20-%20facebook%20white.png');}
#instagram{  background: url('https://cdn2.hubspot.net/hubfs/5879415/Social%20Icons/social%20-%20instagram%20white.png');}
#twitter{  background: url('https://cdn2.hubspot.net/hubfs/5879415/Social%20Icons/social%20-%20twitter%20white.png');}
#linkedin{  background: url('https://cdn2.hubspot.net/hubfs/5879415/Social%20Icons/social%20-%20linkedin%20white.png');}


#facebook:hover{  background: url('https://cdn2.hubspot.net/hubfs/5879415/Social%20Icons/social%20-%20facebook%20blue.png');transform:scale(1.1);transition:all .6s ease-in-out;}
#instagram:hover{  background: url('https://cdn2.hubspot.net/hubfs/5879415/Social%20Icons/social%20-%20instagram%20blue.png');transform:scale(1.1);transition:all .6s ease-in-out;}
#twitter:hover{  background: url('https://cdn2.hubspot.net/hubfs/5879415/Social%20Icons/social%20-%20twitter%20blue.png');transform:scale(1.1);transition:all .6s ease-in-out;}
#linkedin:hover{  background: url('https://cdn2.hubspot.net/hubfs/5879415/Social%20Icons/social%20-%20linkedin%20blue.png');transform:scale(1.1);transition:all .6s ease-in-out;}

@media (max-width: 479px) {
  #second-line {
    display: flex;
    flex-flow: column;
    align-items: center;
    padding: 0 20%;
  } 
  #second-line p {
    text-align: center;
  }
  #second-line > .textContainer {
    display: revert;
  }
  #social-media{
    position: static;
    margin: 40px 0 0 0 !important;
  }
  #first-line {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    padding: 100px 0 0 !important;
  }
  #first-line > *{
    margin: 10px 0; 
    top: 82px;
  }
  .address p{
    text-align: center; 
  }
  .address{
    margin-top: 25px;
  }
}
.social-media {
  display: flex;
  width: fit-content;
  height: fit-content;
  position: absolute;
  right: 136px;
  top: 46%;
  transform: translate(10%, -100%);
}


.mec{
  display: flex;
  gap: 10px;
  margin-left: 150px;
}

.e-mec{
  max-width: 190px;
}
.text-mec{
  max-width: 200px; 
}
/*--------------Footer Prado-------------*/