html * {
  font-family: "Work Sans", sans-serif;
}

@font-face {
  font-family: "Work Sans", sans-serif;
  src: url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet') format('woff2-variations');
  font-display: swap;
  font-weight: 100 600;
}

html {
    scroll-behavior: smooth;
}

/* Lottie Background*/

.lottie_textsection_container {
	margin-top: -50px;
	z-index: -2;
	position: absolute;
	padding: 0;
	width: 100%;
	height: 100%;
  overflow: hidden;
}

#lottie_textsection {
  position: absolute;
  width: 95vw;
  right: -0.5vw;
  left: 0vw;
  
}

@media only screen and (max-width: 1024px) {
  #lottie_textsection {width: 100vw;}
  .lottie_textsection_container {margin-top: 50px;}
}

@media only screen and (max-width: 768px) {
  #lottie_textsection {width:180vh;margin-top: -100px;}
  .lottie_textsection_container {margin-top: 0px;}
}

@media only screen and (max-width: 500px) {
  #lottie_textsection {transform: rotate(90deg);margin-bottom: 50px;left:-57vh;height: 75%;}
  .lottie_textsection_container {margin-bottom: 300px;}
}

/* Contact container*/


.container.container-contact {
  position: relative;
}

.container-contact {
  position: relative;
  width: 90%;
  padding: 2rem 2rem 1rem 2rem;
  display: grid;
  align-items: center;
  grid-template-columns: 40% 60%;
  gap: 4rem;
  height: auto;
  margin: 4rem auto;
  z-index: 0; 
}

/* Contact aside*/

#lottie-contact-envelope {
  margin-bottom: -60px;
  margin-top: -7rem;
  margin-left: -67px;
  width: 20rem;
}

@media only screen and (max-width: 768px) {
  #lottie-contact-envelope {width: 12rem;margin-left: -45px;margin-top: -4rem;}
}

.contact-aside {
  background-color: #000000bb;
  box-shadow: 0px 0px 60px #000000bb;
  padding: 2rem;
  border-radius: 0.2rem;
  position: relative;
  bottom: 1rem;
  /* z-index: 1; */
}

.logo-contact {
  width: 9.375rem;
  margin-bottom: 2rem;
}
  

/* Contact form*/

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-right: 4rem; 
  background: radial-gradient(circle, rgba(79, 13, 15, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
}
@media only screen and (max-width: 768px) {
  .contact-form {background: radial-gradient(circle, rgba(79, 13, 15, 0.3) 0%, rgba(0, 0, 0, 0) 50%);}
}

.contact-form .form-field {
border: 1px solid #fff;
}

.form-name {
  display: flex;
  gap: 1.2rem;
}

.contact-form input [type="text"] {
  width: 50%;
}

input, textarea {
  width: 100%;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.contact-form #services-selector {
  color: white;
  padding: 1.2rem;
  background-color: #00000046;
}

.form-field .dropdown-options {
  padding: 1rem;
  background-color: #000000;
  margin-top: 10px;
}

.form-field option {
  color: rgba(255, 255, 255, 0.60);
}

option:hover {
  color: rgb(255, 255, 255);
  background-color: #000000;
}

.form-field .select-placeholder {
  color: rgba(255, 255, 255, 0.60);
}

.tacbox {
  display:block;
  color:white;
  background-color: #eeeeee00;
  max-width: 800px;
}

#checkbox {color:white; font-size: 0.8em; margin: 0px 5px 5px 0px;}


.tacbox input {
  height: 1.5em;
  width: 1.5em;
  vertical-align: middle;
}

.politici-link-form {color: white; text-decoration: underline; letter-spacing: 0.8px;}
.politici-link-form:hover {text-decoration: none;}

#message-container {color:white; font-size: 1em;}

/*
label {
  outline: 2px dotted #f00;
}

/*
label:after {
  content: attr(for);
}*/

/* Contact form - Media Query ===== Tablet */

@media only screen and (max-width: 1024px) {
  .container-contact {
    padding: 1rem;
    margin-top: 10rem;
    gap: 1rem;
    height: auto;}

  .contact-form{
    margin-right: 0rem;
    gap: 1rem; }

  .contact-aside {
    padding: 0.5rem;}

  .contact-aside h3 {
    color: #fff;
    font-size: 1rem;
    line-height: 1.4rem;
    padding-top: 1.2rem;
    font-weight: 500;}

  .contact-aside h2 {
    color: #fff;
    font-size: 1rem;
    line-height: 1.2em;
    padding-top: 1.2rem;
    font-weight: 400;}

  .logo-contact {
    margin-bottom: 1rem;
  }

}

/* Contact form - Media Query ====== Phones */


@media only screen and (max-width: 600px) {

 .container-contact {
  margin-bottom: 40px;
  margin-top: 5rem;
  grid-template-columns:1fr;
  gap: 1rem;
  
  padding: 1rem;
}
.contact-aside h2 {
  font-size: 1rem;
}

.contact-aside .logo-contact {
  width: 10rem;
}

.contact-aside .h3 {
  font-size: 1rem;
}

.soc-media-contact li {
  margin-top: 0.7rem;
}

}

/* Hero Lottie END */

/* Styling footer*/

.contact-aside h3 {
  margin-left: 0px;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.3rem;
  padding-top: 1.5rem;
  font-weight: 500;
}

.contact-aside h2 {
  font-size: 1.2rem;
  line-height: 1.3rem;
  color: #fff;
  padding-bottom: 1.5rem;
  font-weight: 500;
}


.delimiter-contact {
  width: 60%;
  margin-left: -6px;
  padding-top: 5px;
}





/*** Styling menu footer*/


.soc_media_contact {
  line-height: 1.7em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.soc_media_contact a {
  font-size: 1.1rem;
  color: rgba(255,255,255,.65);
  transition: color .25s ease-in;
}

.soc_media_contact a:hover {
  color: #fff;
}

.soc_media_contact li a span {
	padding-right: 8px;
}

.fa.fa-facebook {
  padding-right: 14px;
}

.fa.fa-linkedin {
  padding-right: 11px;
}

.fa.fa-instagram {
  padding-right: 11px;
}

/*Footer*/

.lottie_footer_container {

	z-index: -1;
	position: absolute;
	width: 100%;
  height: 450px;
  overflow: hidden;
	bottom: 0;
  left: 0;
	right: 0;

}

#lottie_footer {
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.footer-home {
  /* Sizing */
position: relative;
padding: 0;
margin-top: 60px;
width: 100%;
  
padding-left: 2%;
padding-right: 2%;
/* Flexbox stuff */
display: flex;
justify-content: center;
align-items: center;
/* Text styles */
text-align: center;
}

.footer-home .redline-footer{
padding-top: 20px;
}

.footer-home h2 {
padding-top: 20px;
color: #fff;
}

.footer-home h3 {
  padding: 20px 20px 20px 20px;
  font-size: 1.3em;
  font-weight: 400;
  color: #fff;
}

#button-footer {
  width: 320px;
  background-color: rgba(0, 0, 0, 0.705);
}

.hero-inner2 {
  padding-left: 5%;
  padding-right: 5%;
  margin-bottom: 200px;
}

@media only screen and (max-width: 1024px) {
  .lottie_footer_container {bottom: 0px;margin-bottom: -10px;}
  .hero-inner2 {margin: 2% 5% 250px 5%;}
  #lottie_footer {width: 100%; bottom: 0px;margin-bottom: -10px;}
  .footer-home {margin-top: 30px;}
}

@media only screen and (max-width: 768px) {
  #lottie_footer {width: 100%;bottom: 0px;left: -0px;margin-bottom: -10px;}
  .hero-inner2 {margin-bottom: 30vw;}
}

@media only screen and (max-width: 600px) {
  .lottie_footer_container {margin-top: -150px;}
  #lottie_footer {width: 100%;bottom: 0px;left:0; right;margin-bottom: -10px;}
  .hero-inner2 {margin-bottom: 30vw;}
}
/*Footer END*/


/* All Font Styles */

h1 {
  line-height: 1.25em;
  font-size: 3.4em;
  letter-spacing: 0.03em;
}

h2 {
  line-height: 1.25em;
  font-size: 2.8em;
  font-weight: 600;
  letter-spacing: 0.015em;
}

h3 {
  font-size: 1.6em;
  /* letter-spacing: 0.04em; */
  line-height: 1.25em;
}

h4 {font-size: 1.3em; line-height: 1.25em;}

p {line-height: 1.45em!important;letter-spacing: 0.05em;}


@media only screen and (max-width: 767px) {
  .hero h2 { font-size: 2em;}
  h1 {font-size: 3em;}
  h2 {font-size: 1.8em;}
  h3 {font-size: 1.2em;line-height: 1.2em;}
  p {font-size: 0.8em!important;}
}

#hidden-input {
  display: none;
}

h1 {font-weight: 700!important; letter-spacing: 1px!important;}
h2 h3 {font-weight: 600!important; letter-spacing: 0.5px!important;}

/* END All Font Styles */