::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

* {
  box-sizing: border-box;  
}
html{
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.position {
  position: fixed;
  right: 0;
  bottom: 40%;
  left: 0;
}


.content {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;

}


.blackBackground {
  background: rgba(0,0,0, 0.5);
  color: white !important;
  text-decoration: none;

}

.whiteBackground {
  background: rgba(128,128,128, 0.5);
  
  color: white !important;
  text-decoration: none;


}


html {
  scroll-behavior: smooth;
}





span:hover {
  text-decoration: underline !important;


}

a 
  {
    color: #ccba78;
  }
body 
{
  position: relative;
 
}
.pageSectionTitle 
{
  margin-bottom: 3%;
}
.pageLinkWhite
{
  color:white;
  border-style: solid;
  padding:10px;
  border-right:1px ;
  border-left:1px ;
  border-top:1px ;
  height:0px;
}
.pageLinkBlack
{
  color:white;
  border-style: solid;
  padding:10px;
  border-right:1px white;
  border-left:1px white;
  border-top:1px white;
  height:0px;
  text-shadow: none;  
}
.pageLinkBlack:hover,.pageLinkWhite:hover{
 background-color: white;
 color:black;
 text-shadow: none;
 transition: 1s;
}

#c1 {
  margin-left: 1rem;
  margin-top: 0rem;
}

#c2 {
  margin-left: 1rem;
  margin-top: 2rem;
}

/*

#c1 {
  position: fixed;
  right: 10;
  top: calc(50% - 200px);
}

#c2 {
  position: fixed;
  right: 10;
  top: calc(50% + 200px);
}
*/

.sidebar {
  z-index: 0;
  height: 100vh;
  width: 400px;
  position: fixed;

}

.sidebar--left {
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 53%, rgba(0,0,0,0) 100%);
}

.sidebar--right {
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 53%, rgba(0,0,0,0.85) 100%);
  top: 0;
  right: 0;
}

.map-container {
  position: relative;
  -webkit-box-shadow: 10px 10px 43px -16px rgba(0,0,0,0.5);
  -moz-box-shadow: 10px 10px 43px -16px rgba(0,0,0,0.5);
  box-shadow: 10px 10px 43px -16px rgba(0,0,0,0.5);
  width: 350px;
  border-radius: 0.5rem;
  overflow: hidden;
  margin: auto;
  margin-top: 2rem;
}

.map{
  width:350px;
  height:300px;
}


.centertext {
  margin: 0;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 1px 1px black;
}

.centertextReferences{

  margin: 0;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 1px 1px black;
}

@media screen and (max-width: 1700px) {
  .centertextReferences{
    top: 51%;
  }
}

@media screen and (max-width: 1270px) {
  .titleText{
      font-size: 20px!important; 
  }
  .project-description{
    font-size:15px !important;
  }
  .textParagraph ,a{
  font-size: 15px!important;
  }
}

@media screen and (max-width: 979px) {
  h1 {
    font-size: 30;
  }
  p {
    font-size: 12;
  } 
  #c2 {
    display: none;
  }
  .map {
    display: none;
  }
  .sidebar {
    height:35vh;
    width: 100%;
    background: none;
  }
  .sidebar--left{
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 53%, rgba(0,0,0,0.85) 100%);
  }
  
  .sidebar--right{
   top:auto;
   bottom:0;
   background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 53%, rgba(0,0,0,0.85) 100%);
  }
  #c1{
  position: inherit;
  left:calc(50% - 193px);
  bottom: -50px;
  margin-left: 0;
  }
}

@media screen and (max-width: 1500px) and (min-width:1100px){
  .sidebar{
    width:300px
  }
  #c2 {
    position: relative;
    width: 350px;
    height:150px;
    left:-75px;
    
  }
  .map-container{
    position: relative;
    
  }
  .map {
    position: relative;
    width: 250px;
    height:250px;  
    left:40px;
  }
  #c1{
    position: relative;
    left: -80px;
  }
}

@media screen and (max-width: 1100px) and (min-width:981px){
  .sidebar{
    width:250px
  }
  #c2 {
    position: relative;
    width: 200px;
    height:125px;
    left:25px;
    
  }
  .map-container{
    position: relative;
    
  }
  .map {
    position: relative;
    width: 200px;
    height:200px;  
    left:40px;
  }
  #c1{
    position: relative;
    left: -120px;
  }
}



@media screen and (min-width:1100px) {
  .centertext {
  max-width: 80%;
}
.centertextReferences{
  max-width: 60%;
}
}


@media screen and (max-width: 980px) {
  
  .centertextReferences{
    width: 80%!important;
    top: 50%;
    left: 50%;
  
  }
  .centertext {
    width: 80%!important;
    top: 40%;
    left: 50%;
  }
  .textParagraphOffices{
    text-align: center!important;
  }

}

@media screen and (max-width: 420px) {
  
  .centertextReferences{
    padding-left: 1%;
    width: 98%!important;

   
  
  }
 
}

@media screen and (max-width:600px) {
.titleText{
  font-size: 15px!important; 
}
.project-description{
font-size:12px !important;
}
.textParagraph , a{
font-size: 12px!important;
}
  
}

@media screen and (max-width:1080px ) and (min-width:980px){
  .centertext {
    left: 52%;
  }
    
  }



.titleText{
  font-size: 30px;
  margin-bottom: 0px!important;
}
.textParagraph, a{
  text-align: justify;
  text-justify: inter-word;
  font-size: 20px;
}


ul {
  position: relative;
  list-style: none;
}

li::before {
  content: '';
  position: relative;  
  left:-5px;
  border: solid #ccba78;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.navbar-subtitle{
  display: block;
  position: relative;
  color:white;
  font-size: 20px;
  top: -22px !important;
  left:2px
}

.textParagraphContact{
  text-align: center!important;
  text-justify: inter-word;
  padding-bottom: 20px;
  padding-top: 20px;
}


@media screen and (max-height: 815px) and (min-width:980px){
  .sidebar{
    width:300px
  }
  #c2 {
    position: relative;
    width: 300px;
    height:100px;
    left:-5px;
    
  }
  .map {
    position: relative;
    width: 280px;
    height:250px;  
    left:6px;
  }
  #c1{
    position: relative;
    left: -80px;
  }
}


@media screen and (max-height: 715px)and (min-width:980px){
 .map-container{
  margin-top: 3px;
 }
  .map {
    position: relative;
    width: 280px;
    height:200px;  
    left:6px;
  }
  h1{
    font-size: 15px!important;
  }
  .titleText{
    font-size: 15px!important; 
  }
  .project-description{
  font-size:13px !important;
} 
.textParagraph ,a{
  font-size: 13px!important;
} 


}

@media screen and (max-height: 620px)and (min-width:980px){
  .map-container{
    padding-top: 5%;
   }   
   .map {
     display:none
   }
   .titleText{
      font-size: 13px!important; 
  }
  .project-description{
    font-size:10px !important;
  }
  .textParagraph ,a{
    font-size: 10px!important;
  } 
   
 }

 @media screen and (max-height: 475px)and (min-width:980px){
  .map-container{
    padding-top: 0%!important;
   }   
   #c2{
    display: none;
   }
   
 }
@media screen and (max-height: 315px)and (min-width:980px){
 
   .map {
     display:none
   }
   .titleText{
      font-size: 10px!important; 
  }
  .project-description{
    font-size:8px !important;
  }
}


 @media screen and (max-height: 620px)and (min-width:600px)and (max-width:980px){
  .map-container{
    padding-top: 5%;
   }
   
   .map {
     display:none
   }
   h1{
    font-size: 14px!important; 
   }
   .titleText{
      font-size: 13px!important; 
  }
  .project-description,a{
    font-size:10px !important;
  }
  .textParagraph {
    font-size: 10px!important;
 }
}

 @media screen and (max-height: 620px) and  (min-width:300px) and (max-width:600px){
   .titleText{
      font-size: 12px!important; 
  }
  .project-description,a{
    font-size:8px !important;
  }
  .textParagraph {
    font-size: 8px!important;
  } 
}