/* main layout variables*/
:root {
   --accent-color: #62badc;
   --hover-color: #3f3f3f;
   --nav-bg: #708b96;
   --popup-menu-bg: #FFFFFFF2;
}

/*used by menu and big buttons */
@font-face {
   font-family: 'Open Sans Condensed Light';
   src: url('fonts/OpenSansCondensed-Light.ttf');
}
/*used for bold spans in menu*/
@font-face {
   font-family: 'Open Sans Condensed Bold';
   src: url('fonts/OpenSansCondensed-Bold.ttf');
}
/*main font*/
@font-face {
   font-family: 'Raleway';
   src: url('fonts/Raleway-Regular.ttf');
}

html {
   font-family: 'Raleway', sans-serif;
   font-size: 16px;
}
body {
   margin: 0;
   padding: 0;
   background-color: #ddd;
}

#content {
   max-width: 1300px;
   margin: 0px auto;
   background-color: #fff;
}

ul {
   list-style-type: none;
   margin: 0;
   padding:0;
}

a {
   color: unset;
   text-decoration: none;
   font-weight: bold;
}

/*page banner*/
header {
   background: #5b5b5b;
   background-size: 50%;
   color: #74adc3;
   font-size: 20px;
   text-align: center;
   padding: 20px;
}

img#header {
   max-width: 1300px;
   width: 100%;
   margin: 50px auto;
}


/*menu bar */
#nav-corset {
   background-color: var(--nav-bg);
   position: sticky;
   top: 0;
   /* background-color: var(--accent-color); */
   height: 100px;
}

nav {
   max-width: 1300px;
   display: flex;
   align-items: center;
   justify-content: right;
   color: white;
   margin: 0px auto 0px auto;
}

img.flag {
   width: 30px;
   height: 18px;
}


.button.big {
   font-size: 1.5em;
}

.button {
   font-family: 'Open Sans Condensed Light', sans-serif;
   background-color: var(--nav-bg);
   border-radius: 15px;
   border: 0;
   padding: 10px 40px;
   font-weight: bold;
   color: white;
   cursor: pointer;
}

.button>i {
   margin-right: 10px;
}

.button:hover {
   background-color: var(--hover-color);
   color: var(--accent-color);
}

.top-shadow {
   box-shadow: inset 0 10px 10px 0px #d4d4d4;
}

h2 {
   font-size: 2rem;
   text-transform: uppercase;
   margin: 30px 0px;
   text-align: center;
   color: var(--accent-color);
   font-weight: normal;
}

a.detail {
   height: 29px;
}

#details-wrapper {
   --details-icon-size: 100px;
   display: flex;
   padding: 50px;
   justify-content: center;
   flex-wrap: wrap;
}

.detail {
   margin: 10px 100px;
   text-align: center;
   width: 400px;
}

.detail>.icon {
   display: block;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}

.detail>.icon>i {
   font-size: 2em;
   color: white;
   line-height: var(--details-icon-size);
}

.detail>p {
   line-height: 1.8em;
   font-size: 1.3em;
}

strong {
   font-weight: bold;
}

.text-content {
   padding: 50px;
}


.hablamos {
   text-align: center;
   margin: 30px 0px;
}

#examples {
   max-width: 1300px;
   margin: 50px auto 0px auto;
   padding-top: 50px;
}

#examples>h2 {
   font-size: 2em;
}

#examples>.wrapper {
   display: flex;
   flex-wrap: wrap;
   margin: 50px;
}

.image {
   width: 50%;
   /*3 per rows*/
   text-align: center;
   margin: 20px 0px;
}

.image>img {
   border: 5px solid #ffd503;
   width: 80%;
}

.image>img:hover {
   border-color: var(--hover-color);
}

div#contacta {
   font-size: 1.5em;
   padding: 50px;
   text-align: center;
}

div#address {
   max-width: 400px;
   margin: 0px auto 30px auto;
}

div#contacta>a.button {
   display: inline-block;
   margin: 10px;
}


footer {
   background: var(--hover-color);
   color: white;
   display: flex;
   justify-content: space-between;
   padding: 50px 50px;
}

footer a {
   margin-left: 15px;
}







   /*hide the nav page title*/
   #nav-title {
      display: none;
   }
   /*nav menu is shown horizontally*/
   label>ul {
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
   }

   label>ul>li {
      margin: 0px 50px;
   }
   label>ul a {
      display: block;
      margin: 0px 15px;
      cursor: pointer;
      border-bottom: 2px solid var(--nav-bg);
      height: 95%;
      line-height: 90px;
      margin-left: 150px;
   }

   label>ul a:last-child {
      margin-left: 10px;
   }

   label>ul a:hover {
      border-bottom: 2px solid var(--accent-color);
   }

   label>ul a>i {
      font-size: 1.3em;
   }

   label>ul a>span {
      font-family: 'Open Sans Condensed Light', sans-serif;
      font-size: 1.5em;
      text-transform: uppercase;
   }

   label>ul a>span.emphasis {
      font-family: 'Open Sans Condensed Bold', sans-serif;
      font-weight: bold;
   }

   @media (max-width : 1400px) {
       .detail {
           margin: 10px 50px;
       }
   }



/* -------------- for screens with a width < 600px---------------- */
@media only screen and (max-width : 600px) {
   /*vertical spacing between the items*/
   .detail {
      margin: 10px 0;
      width: unset;
   }
   /*banner increases to full width*/
   header {
      background-size: contain;
   }
   /*1 per rows*/
   .image {
      width: 100%;
   }

   .button {
      padding: 20px 60px;
   }
   .hablamos {
      margin-bottom: 100px;
   }

   div#contacta>a.button {
      width: 80%;
   }
   div#contacta {
       font-size: 1.5em;
       padding: 50px;
       text-align: center;
       padding: 0;
   }
   div#contacta img {
       width: 80%;
       margin-top: 50px;
   }
   div#contacta > a.button {
       width: 90%;
       padding: 20px 0px;
   }
}