@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600&display=swap');


@font-face {
  font-family: futura;
  src: url(FuturaPT/FuturaPTMedium.otf);
}
@font-face {
  font-family: futuraLight;
  src: url(FuturaPT/FuturaPTBook.otf);
}

@font-face {
  font-family: didotItalic;
  src: url(didot/DidotItalic.otf);
}

@font-face {
  font-family: didot;
  src: url(didot/DidotRegular.ttf);
}

@font-face {
  font-family: bodoni;
  src: url(bodoni/BodoniFLF-Bold.ttf);
}
/*
@font-face {
  font-family: bodoniRoman;
  src: url(bodoni/BodoniFLF-Roman.ttf);
}
*/

@font-face {
  font-family: bodoniItalic;
  src: url(bodoni/BodoniFLF-Italic.ttf);
}


/*
GENERAL

color palette: https://coolors.co/393d3f-fdfdff-d3cdbc-89b0ae-546a7b
dark: #393d3f
white: #fdfdff
sand: #d3cdbc
lightsand: rgb(245, 245, 245)
lightblue: #89b0ae
darkblue: #546a7b

*/


body {
  color:#393d3f;
  background-color: #fdfdff;
  font-family: 'Nunito Sans', verdana, sans-serif;
  font-size:1.2em;
  height:100%;
}
h1, h2, h4 {
  color:#393d3f;
  font-weight:  500;
  font-family: 'Bodoni', serif;
}
h1{
    font-size: 3em;
    line-height: 0.8em;
    margin: 40px 0;
    letter-spacing: -1px
}
.welcomemessage h1{
  font-size: 3em;
}

h2{
  font-size: 2.5em;
  font-weight: 300;
  line-height: 1em;
  letter-spacing: -1px;
  font-family: 'Bodoni', serif;
}

h3{
  font-family: didotItalic, serif;
  font-weight: 300;
  font-size: 1.5em;
}

h4{
  font-size: 1.5em;
}

p{
  font-weight: 300;
  font-size:0.9em;
  line-height: 1.5em
}
.smaller{
  font-size: 0.8em;
}

.subtitle {
  color:#89b0ae;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size:0.9em;  
  font-family: futuraLight, sans-serif
}


.subtitlebigger {
  font-size: 1.4em
}


.bold {  
  font-weight: 600;
}


.button{  
  background-color: #d3cdbc;
  padding: 10px 20px;
  height: 20px;
  line-height: 4em;
  white-space:nowrap;
  text-decoration: none;
  color:#393d3f;
  text-transform: uppercase;
  font-family: futura;
  font-size:0.7em;
  letter-spacing: 1.5px;
}

.button:hover{  
  background-color:#89b0ae;
  cursor: pointer;
}

.bluebg{  
  background-color: #89b0ae
}
.blue{  
  color: #89b0ae
}

.bluebg:hover{  
  background-color: #d3cdbc
}

.center{  
  text-align: center
}
.right{  
  text-align: right
}

a{
  text-decoration: none;
  color:#546a7b;
}

a:hover{
  cursor: pointer;
}

.smallspace{
  height: 30px;
}
.bigspace{
  height: 60px;
}

.clearfix {
  overflow: auto;
}

/*
HEADER
*/

header{
  background-color:rgb(245, 245, 245);
  padding: 40px 50px;
}

.logo{ 
  font-family: 'Bodoni', serif;
  font-size: 42px;
  color:#393d3f;
}
header a{
  color:#393d3f;
}

.logoicon{ 
  display: none
}

.logoiconmobile{ 
  height: 60px;
 padding:0 50px
}

.logoItalic{ 
  font-family: 'BodoniItalic', serif;/* BodoniItalic*/
  font-size: 42px;
  color:#393d3f;
  vertical-align:top
}
.slogan{ 
  font-family: futura;
  text-transform: uppercase;
  font-size: 0.7em;
  letter-spacing: 1.5px;
  margin-left:1px
}

/*
NAVIGATION
*/

nav{
  margin: 0 ;
  text-transform: uppercase;
  font-family: futura;
  background-color: rgba(255,255,255,0.9);
  font-size:1em;
  letter-spacing: 1.5px;
  display:none;
  position: fixed;
  top:0;
  width: 100%;
  z-index: 300;
  height:100vh;
  lefT:0;
}

nav ul {
  text-align: left; 
  height: 20px;
  list-style-type: none;
}

ul {
  list-style-type: none;
}

nav li {
  display: block;
  padding:15px 10px
}

nav li a{
  text-decoration: none;
  color: #393d3f
}

nav li a:hover{
  color: #89b0ae;
}


.current{
  color: #89b0ae
}

.onlyMobile{
  display:block
}

.menuicon{
  width: 40px;
  height: auto;
}

.menubtn {
position: fixed;
z-index: 301;
top:20px;
right:20px;
background-color: #f2f2f2;
padding:8px 12px 10px 12px;
border-radius:50%;
}
.menubtn:hover {
background-color: #89b0ae;
color:white;
cursor: pointer;
}

.closemenu {
display :none;
}

nav .logo{
  text-transform: capitalize;
  padding:40px 100px 50px 50px;
  letter-spacing: -0;

}

/*
HOME
*/
.home {  
  margin:40px;
}

.homepic {  
  /*height: 600px;*/
  width: 40%;
  float: left;
  padding-right: 30px;
  display: none;
}

.homepicbg {  
  width: 45%;
  height: 600px;
  float: left;
  padding:20px 0;
  display:none;
  background-color: grey;
  padding-right: 0px;
  background-image: url(../img/diary.jpg);
  background-position: center;
  background-size: cover

}

.welcomemessage{  
  background-color: rgb(245, 245, 245);
  height: auto;
  margin-bottom: 0;
  padding-right: 0;
  padding:20px
}

.blackbox{  
  background-color: #393d3f;/* d3cdbc, 546a7b*/
  margin: 0;
  text-align: center;
  padding:20px;
  width: auto;
}
.blackbox h3 {  
  color:#fdfdff;
  font-size:2em;
  font-family: BodoniItalic, serif;
  margin:30px 0
}

.homepicmobile{
  display: block;
  width: 100%;
}

.homesevices2{  
  background-color: rgb(245, 245, 245);
  border-collapse: collapse
}
.homesevices2 td{  
  border:5px solid #fdfdff;
  padding:30px 0px;
  width: 100%;
}

.homesevices2 td p, .homesevices2 td h3 {  
  max-width: 80%;
  margin:30px auto 0 auto
}


.number{  
  font-size: 1em;
  font-family: didotItalic, serif;
  font-weight: 300;
  border-bottom: 1px solid grey
}
.homesevices2 p{  
  font-size: 0.8em;
}

.comingsoon{
  background-color: #393d3f;
  background-image: url(../img/typewriter.jpg);
  padding:100px 20px;
  
}
.comingsoon h1,.comingsoon p{
  color: #fdfdff;
  max-width: 500px;
  margin: 50px auto
}

/*
SERVICES
*/

/*
.headerbanner{  
  background-color: #393d3f;
  color: #fdfdff;
  padding:20px
}

.headerbanner h1{  
  color: #fdfdff;
  font-size:2em
}
*/
.services{  
  margin: 50px 40px
}


.serviceoverlay{
  height: 100%;
  text-align: center; 
  font-size: 1em;
}

.serviceoverlay h2{
  margin-top:0;
  padding:20px;
  display: inline-block;
}

/*
.numbermini{  
  font-family: didotItalic, serif;
  font-weight: 300;
}

.collapsible {
  background-color: rgb(245, 245, 245);
  color:  #393d3f;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.2em;
  font-family: didotItalic, serif;
  font-weight: 300;
  border-top: 2px solid white

}


.collapsible:after {
  content: '\002B';
  color: #393d3f;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.active, .collapsible:hover {
  background-color: #89b0ae;

}

.active:after {
  content: "\2212";
}
*/
.content {
  padding: 0 10px 0 20px;
  max-height: 0;
  overflow: hidden;
  font-weight: 300;
  transition: max-height 0.4s ease-out;
  background-color:rgb(245, 245, 245);
}

.servicetext{  
  margin: 50px 50px 0 50px;
  text-align: justify;
}

.servicelist {
  list-style: none;
  padding: 20px;
  font-size: 0.8em;
  list-style:none;
  column-count: 1;
  text-indent: -25px; /* key property */
  margin:20px 0 10px 45px;
}

.servicelist li{ 
  padding: 10px; 
  margin-right: 30px;
  list-style-position: inside;
  font-weight: 300;
} 

.servicelist li:before {
  content:"\2713";
  color: #89b0ae;
  font-weight: lighter;
  margin:0 10px 0 0 ;
  border-radius: 50%;
}
.fullimage{
  height: 500px;
  width: 100%;
  background-image: url(../img/window-sunset.jpg);
  background-color: #393d3f;
  background-position: center;
  background-size: cover;
}


.services h2{
  font-size: 2.5em;
  line-height: 1em;
}

.servicepic {
  width: 100%;
  background-image: url(../img/diary.jpg);
  background-color: #393d3f;
  background-position: center;
  background-size: cover;
  
}

.servicebox {
  min-height: 300px;
  width: 100%;
  background-color: #f2f2f2;
  display: table;
  margin-top:80px;
}

.floatr {
  float:none
}
.floatl {
  float:none;
  margin-right:0
}

.servicesShort{
  width: 100%
}

/*
ABOUT
*/

.about {
  margin: 40px;
  width:auto;
}

.valores p{
  padding-bottom:30px
}

.valores h3{
  margin-bottom:-10px;
  font-size:1.3em
}

.valores {
  max-width: 900px;
  margin: 0 auto
}

.equipo {
  max-width: 900px;
  margin:0 auto 0 auto
}


.backgroundAbout {
  background-image: url(../img/martillo2.jpg);
  background-color: #546a7b;
  background-position: center;
  background-size: cover;
}

.textBox{
  background-color: rgba(0, 0, 0, 0.3);
  color: #fdfdff;
  padding:40px;
  margin:0px;
  min-height:300px;
  width: auto;
  font-size:0.9em
}

.textBox h1{
  color: #fdfdff;
}

.objective{
  color: #fdfdff;
  background-color: #546a7b;
  padding:40px;
  margin: 0;
}

.objectiveTitle {
 float: none;
 border-right:none;
 height: auto;
 padding-right: 0;
 margin-right: 0;
 padding-top:0px;
 padding-left:0
 
}
.objectiveTitle h2{
  color: #fdfdff;
  line-height: 0.9em
}


.objective h3{
  color:#fdfdff;
}

.objectiveText {
  height: auto;
  color:#b0c4d3;
  padding-top:0px;
  padding-right:0px

}

.profilebig{
  float:none;
  width: 100%;
  margin-right:0;
}

.profiles{  
  border-collapse: collapse;
  clear: both;
  margin-left: 0;
}
.profiles td{  
  vertical-align: top;
  width: 100%;
  padding: 40px 0 0 0 
}
.profiles p{  
  font-size: 0.8em
}
.profiles h3{  
  font-size: 1.3em;
  color:#393d3f;
}

.titles{  
  color:#393d3f;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size:0.8em;  
  font-family: futura, sans-serif;
}

.profilepic{  
  background-color: #393d3f;
  width: 100%;
}
.bigger{  
  font-size:2em;  
  margin-top:40px;
}


/* Slideshow container */
.slideshow-container {
  margin:40px 0;
  position: relative;
 /* margin: 0 auto;*/
  background-color: rgb(245, 245, 245);
}

/* Hide the images by default */
.mySlides {
  display: none;
  text-align: center;
  padding:10px 40px;
  display: flex;
  width: auto;
  justify-content: center;
  align-items: center;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.prev img, .next img{
  height: 30px;
  opacity: 50%;
}

.prev img:hover, .next img:hover{
  opacity: 100%;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color:white;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


/* The dots/bullets/indicators */

.dotscontainer{
 margin:0 auto;
 width: 200px;
 text-align: center;
}

.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #d3cdbc;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.activeOpinion, .dot:hover {
  background-color: #393d3f;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.quote{
  font-size: 5em;
  font-family: "bodoni";
  color: #d3cdbc;
  display: inline-flex
}


/*
CONTACT
*/

.social_icon{
  width:25px;
  vertical-align: bottom
}

.contact th{
  padding:10px;
  margin:20px;
  vertical-align: top
}
.contact{
  margin:30px auto;
}
.contact a{
  color: #393d3f
}

.narrow{
  width: 100%;
  margin: 0 auto
}

.imagebg{
  background-image: url(../img/globe.jpg);
  background-color: #546a7b;
  background-position:top;
  background-size: cover;
  margin:0px
}
.overlay{
  background-color: #fdfdffa6;
  padding:50px 20px;
}

.whiteshadow{
  text-shadow: 1px 1px 10px #ffffff
}

input, textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  font-size:0.8em;
  display: inline-block;
  border: 1px solid rgb(231, 231, 231);
  border-radius: 0px;
  box-sizing: border-box;
}
input[type=checkbox]{
  width: auto;
  text-align:left;
}

label{
  width: auto;
  padding: 20px 0;
  text-align:left;
  font-size:0.8em;
  display: inline-block;
}

input[type=submit] {
  background-color: #89b0ae;
  border: 1px solid #89b0ae;
  border-radius: 0px;
}
input[type=submit]:hover {
  background-color: #546a7b;
  border: 1px solid #546a7b;
  cursor: pointer;
  color:white
  
}

.formmessage{
  background-color: #89b0ae;
  padding:25px;
  font-size:0.8em;
  text-align: center
}

/*
FOOTER
*/

footer {  
  background-color: rgb(245, 245, 245);
  text-align: center;
  font-size:0.8em;
  margin:40px;
  padding:80px
}

.footernav {
  padding-left:0
}

.footernav ul {
  text-align: right; 
  height: 20px;
  list-style-type: none;
}

.footernav li {
  display: block;
  padding:10px
}

.footernav li a{
  text-decoration: none;
  color: #393d3f
}

.footernav li a:hover{
  color: #89b0ae;
}

.footernav{  
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: futura, sans-serif
}

.black {  
  background-color: #393d3f;
  color:rgb(245, 245, 245);
}
.black .footernav li a{
  text-decoration: none;
  color:rgb(245, 245, 245);
}

.black .footernav li a:hover{
  color: #89b0ae;
}

.consentbox{  
  background-color:rgba(57, 61, 63, 0.9);
  right: 0;
  left: 0;
  color:rgb(245, 245, 245);
  bottom:0;
  padding:30px 50px 40px 50px;
  z-index: 400;
  position:fixed;
  font-size: 0.9em;
}

.consentbox p a{  
  color:#89b0ae;
}

/*
EFFECTS
*/

.fade-in {
  animation: fadeIn ease 2s;
  -webkit-animation: fadeIn ease 2s;
  -moz-animation: fadeIn ease 2s;
  -o-animation: fadeIn ease 2s;
  -ms-animation: fadeIn ease 2s;
}

.come-in {
  transform: translateY(100px);
  animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 0.6s; /* So they look staggered */
}

.left-in {
  transform: translateX(-100px);
  animation: back-in 0.8s ease forwards;
}
.left-in:nth-child(odd) {
  animation-duration: 0.6s; /* So they look staggered */
}

.right-in {
  transform: translateX(100px);
  animation: back-in 0.8s ease forwards;
}
.right-in:nth-child(odd) {
  animation-duration: 0.6s; /* So they look staggered */
}

@keyframes come-in {
  to { transform: translateY(0); }
}

@keyframes back-in {
  to { transform: translateX(0); }
}


@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}


@media (min-width:600px){ /* SCREEENS BIGGER THAN */
  .homepicbg{
    display: block;
  }
  .about {
    width: 70%;
    margin:0 auto
  }
  .profilepic{  
    background-color: #393d3f;
    width: 30%;
  }
  .homepic {  
    display: block;
    height: 400px;
    float: left;
    padding-right: 30px
  }
  .homepicmobile{
    display: none;
  }

  .welcomemessage {
    margin-left: 45%;
padding-left: 20px;
height: 600px;

  }
  .imagebg{
    margin:40px
  }
  .homesevices2 td p, .homesevices2 td h3 {  
    max-width: auto;
  }

}



@media (max-width:1000px){ /* SCREEENS SMALLER THAN */
  table, thead, tbody, th, td, tr { 
    display: block; 
  }



}
@media (min-width:1000px){ /* SCREEENS BIGGER THAN */

  header{
    padding: 40px 50px 40px 130px;
  }

  .homepicbg{
    display: block;
    padding: 0
  }
  .homesevices2 td{  
    width: 25%;
    padding:30px;
  }
  h1{
      font-size: 4em;
  }
  .welcomemessage h1{
    font-size: 5em;
  }

  h2{
    font-size: 3em;
    line-height: 0.7em;
  }

  .narrow{
    width: 600px;
  }
  .overlay{
    padding:150px 100px 150px 100px;
  }
  .contact th{
    padding:30px;
    margin:40px;
  }
  /*.services{  
    margin: 100px auto 40px auto;
    max-width: 900px;
    
  }*/
  .floatr {
    float:right
  }
  .floatl {
    float:left;
    margin-right:50px
  }

  .servicepic {
    width: 50%;
    background-image: url(../img/diary.jpg);
    background-color: #393d3f;
    background-position: center;
    background-size: cover;
    display: table-cell;
  }

  .servicepicLeft {
    margin-left:50px
  }

  .servicepicRight {
    margin-right:50px
  }

  .services{  
    margin: 100px auto 40px auto;
    max-width: 1200px;
    padding:0 50px
  }
 
  .servicelist {
    list-style: none;
    padding:50px;
    font-size: 0.8em;
    list-style:none;
    text-indent: -26px; /* key property */
    margin:0 0 0 20px;
  }
  .padding20{
    padding:20px;
  }
  .textBox{
    padding:150px 15% 150px 50%;
    margin:0;
    min-height:300px;
    text-align: justify;
    width: auto;
  }
  .backgroundAbout {
    padding:0;
  }

  .objective{
    padding:50px 0;
    margin-bottom:400px;
    position: absolute;
    left:0
  }


  .objectiveTitle {
    float: left;
    border-right:1px solid #889baa;
    height: 250px;
    padding-right: 50px;
    margin-right: 50px;
    padding-top:0px;
    padding-left:150px
   }
   .objectiveText {
    height: 250px;
    padding-top:0px;
    padding-right:150px
  
  }
  
  .profilebig{
    float:left;
    width: 47.5%;
    margin-right:5%;
  }
  .smallspace{
    height: 40px;
  }
  .profilepic{  
    background-color: #393d3f;
    width: 100%;
  }
  .bigspace{
    height: 80px;
  }
  .profiles{  
    margin-left: -15px;
  }
  .profiles td{  
    vertical-align: top;
    width: 25%;
    padding: 0 15px
  }
  .profiles h3{  
    font-size: 1em;
  }

  .mySlides {
    padding:10px 25%;
    width: 50%;
  }
  .home {  
    margin:100px 100px 00px 100px;
  }
  .welcomemessage{  
    height: 600px;
    margin-bottom: 100px;
    padding:0 0 0 40px ;
    margin-left: 45%;
    padding-right: 30px
  }
  
  .blackbox{  
    margin: 0 0 0 -500px;
    padding:50px 500px 50px 500px;
    width: 100%;
  }
  .homepic {  
    display: block;
    height: 600px;
    float: left;
    padding-right: 30px
  }
  .blackbox h3 {  
    font-size:3em;
  }

  .footernav li {
    display: inline;
    padding:10px
  }

  .menubtn {
    display: none
    }

  nav{
    display:block;
    margin: -60px 0 0 0 ;
    text-transform: uppercase;
    font-family: futura;
    font-size:0.7em;
    letter-spacing: 1.5px;
    float:right;
    background-color: transparent;
    position:static;
    height:auto;
    top:auto;
    width: auto;
    lefT:auto
  }
 
  nav ul {
    text-align: right; 
    height: 20px;
  }
  nav li {
    display: inline;
    padding:10px
  }
  .onlyMobile{
    display:none
  }
  .content {
    padding: 0 40px;
    max-height: 0;
    overflow: hidden;
    font-weight: 300;
    transition: max-height 0.4s ease-out;
    background-color:rgb(245, 245, 245);
  }
  .logoicon{ 
    height: 60px;
    position: absolute;
    left:50px;
    top:46px;
    display: block
  }
  .logoiconmobile{ 
    display: none
  }
  .serviceoverlay{
    font-size: 1.2em;
  }
  input, textarea {
    width: 50%;
    
  }
  .equipo {
    max-width: 1000px;
    margin:380px auto 0 auto
  }
  .bigger{  
    font-size:2em;  
    margin-top:0;
  }
  .servicesShort{
    width: 70%
  }
  
}

@media (min-width:1200px){ /* SCREEENS BIGGER THAN */
  .home {  
    margin:100px auto;
    max-width: 900px;

  }
}