@font-face {
    font-family: 'Escuedro';
    src: url("/public/fonts/esqadero_regular.ttf"); /* File to be stored at your site */
}

:root {
  --color-dark: #252728; 
  --color-gray: #515253; 
  --color-gray-2: #8e8e8e; 
  --color-gray-light :#F7F7F7; 
  
  --font-size-t1: 34pt; 
  --font-size-t2: 21pt; 
  --font-size-t3: 13pt; 
  --font-size-t4: 8pt; 
  
/*  --color-main-hover: #1273eb;0173d8
  --color-second: #B2D526;
  --color-gray-light: rgba(0,0,0,0.3);
  --color-gray-middle: rgba(0,0,0,0.6);
  --color-gray-dark: rgba(0,0,0,0.8);
  --color-confirm: darkgreen;
  --color-decline: darkred;
  --border-radius-button: 500px;
  --border-radius-bigest: 1.5em;
  --border-radius-big: .5em;
  --border-radius-small: .3em;*/
}

a:link, a:visited, a:hover, a:active
{
    text-decoration: none;
    color:#333;
}

body{
    margin:0px 0px 0px 0px;
    padding:0px;
    background-color: #f7f7f7;
    font-family: calibri;
}

div,p,nav,ul,li,a,h1,h2,h3,h4,h5{
    font-family: 'Escuedro','Calibri';
    font-family: 'Calibri';
    box-sizing: border-box;
}

/* --- Start header --- */


header#index {
    display: grid;
    position:fixed;
    z-index:2000;
    width:100%;
    top:0px;
    left:0px;
}

nav#location {
    display:grid;
    background-color: #262626;
    align-items:center;
    grid-template-columns: 100%;
}

nav#location .title {
    display:grid;
    justify-content:end;
    cursor:pointer;
    height:40px;
    padding:0px 1em;
}

nav#location .title .language-button{
    display:grid;
    grid-template-columns:auto auto;
    align-items:center;
    justify-content:end;
    color:#fff;
    font-weight:bold;
    height:40px;
    padding:0px 2em;
}

nav#location .title span{
    padding:0px .5em;
}

nav#location .title img {
    display:grid;
    width:20px;
    border-radius:20px;
}

nav#location .languages-list {
    display:none;
    grid-template-columns:33% 33% 33%;
    width:100%;
    background:#fff;
    top:40px;
    position:absolute;
    z-index:2001;
    margin:0px;
    padding:3em;
}

nav#location .languages-list li:hover,
nav#location .languages-list li.selected{
    font-weight:bold;
    color:var(--color-dark);
}

nav#location.selected .languages-list {
    display:grid;
}

nav#location .title .language-button:hover {
    background:#fff;
    color:#111;
}

nav#location .title .language-button:hover img {
    border:1px solid #ddd;
}


nav#location .title .language-button:hover .languages-list {
    display:grid;
    position: fixed;
    top:40px;
    left:0px;
    width:100%;
}


nav#location .languages-list li {
    list-style:none;
    text-align:center;
    padding: 1em 2em;
    font-weight:normal;
}

nav#location .languages-list li a {
    color:#666;
}

nav#main-menu {
    display: grid;
    position:fixed;
    z-index:1000;
    width:100%;
    height:70px;
    top:40px;
    left:0px;
    background:#437eeb;
    grid-template-columns:10% 80% 10%;
    align-items:center;
}

nav#main-menu.screen-top{
    top:0px;
    transition: all 0.4s ease-in-out;    
}

nav#main-menu #logo {
    display: grid;
}

nav#main-menu #logo img {
    height:20px;
    margin:auto;
}

nav#main-menu #menu {
    display: table;
    margin:0px;
    padding: 0px;
    box-sizing:border-box;
}

nav#main-menu #menu .menu-item{
    display: none;
    position: absolute;
    margin:auto;
    width:100%;
    top: 70px;
    left:0px;
    padding:4em 0px;
    background:#fff;
}

nav#main-menu #menu li:hover .menu-item{
    display: grid;
    display: none;
}

nav#main-menu #menu .menu-item a,
nav#main-menu #menu .menu-item h3{
    color:var(--color-dark);
    text-align: center;
    font-weight: normal;
}

nav#main-menu #menu .menu-item h3{
    font-weight: bold;
}

nav#main-menu #menu .menu-item a{
    font-size:10pt;
}

nav#main-menu #menu .menu-item a:hover{
    font-weight: bold;
    text-decoration: underline;
}

nav#main-menu #menu .menu-item ul{
    margin:auto;
    text-align:center;
}

nav#main-menu #menu .menu-item ul li{
    border: 1px solid transparent;
    padding:1em;
}

nav#main-menu #menu .menu-item ul li:hover{
    border: 1px solid #ddd;
    border-radius: .3em;
}

nav#main-menu #menu li {
    list-style:none;
    margin:0px;
    display: grid;
    float:left;
    color:white;
    font-weight:bold;
    padding:0px 1em;
    font-size:var(--font-size-t3);
    margin-top:3px;
}

nav#main-menu #menu li a{
    color:white;
    border-bottom:3px solid transparent;
}

nav#main-menu #menu li a:hover{
    border-bottom:3px solid white;
}

nav#main-menu #menu li span {

}

nav#main-menu #information {
    display: grid;
    font-weight:bold;
    color:white;
}

nav#main-menu #information p a{
    color:white;
}

nav#main-menu #information p a:hover{
    color:white;
    border-bottom:3px solid white;
}

/* -- Start buttons --- */

.page-button{
    display: table;
    color: var(--color-dark);
    margin: 3em 0px 0px 0px;
    padding: 1em 3em;
    border: 1px solid var(--color-dark);
    text-transform: uppercase;
    cursor: pointer;
    font-size:var(--font-size-t3);
}

.page-button.button-white{
    color: #fff;
    border: 1px solid #fff;
}

.page-button:hover{
    background:var(--color-dark);
    color:#fff;
}

.page-button.button-white:hover{
    background:white;
    color:#333;
}


/* --- Start slider --- */

section#slider {
    width:100%;
    height:60vh;
    display: table;
    background:gray;
    padding: 0px;
    box-sizing: border-box;
}

section#slider p.title {
    color:#fff;
    text-transform:uppercase;
    font-weight:bold;
    font-size:30pt;
    margin:0px;
    width: 50%;
}

section#slider p.description {
    color:#fff;
    font-size:18pt;
    margin:0px;
    width: 50%;
}

section#slider video{
    position: absolute;
    z-index:200;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 60vh;
    object-fit: cover;
}

section#slider #slider-information{
    position: absolute;
    z-index:500;
    top: 0px;
    background-color:rgba(0,0,0,0.2);
    width:100%;
    height:60vh;
    padding: 160px 1em 1em 5em;
}


/* --- Start products --- */

section#products{
    padding:0px;
    box-sizing: border-box;
}

section#products .products-title{
    font-weight: bold;
    padding: 0px;
    text-transform: uppercase;
    font-size:var(--font-size-t1);
    margin: 2% 2% 1% 2%;
}

section#products .products-container{
    display: table;
    width:100%;
}

section#products .products-container .product-wrapper{
    display: table;
    float:left;
    width:33.3%;
    margin:0px;
    padding:0px 0px 5em 0px;
    box-sizing: border-box;
}

section#products .products-container .product-wrapper .product{
    display: table;
    background:white;
    width:90%;
    margin:5% auto;
    padding:5%;
}

section#products .products-container .product .product-title{
    text-transform: uppercase;
    font-size:var(--font-size-t2);
    font-weight: bold;
    padding:0px;
    margin:0px;
    color: var(--color-dark);
}

section#products .products-container .product .product-description{
    color: var(--color-gray);
    padding:0px;
    margin:0px;
    font-size:var(--font-size-t3);
    font-weight: normal;
}

section#products .products-container .product img{
    margin:auto;
    width:50%;
    display: table;
}

section#products .products-container .product-wrapper:hover .product{
    width:95%;
    margin:2.5% auto;
    padding:5%;
    transition: all 0.3s ease-in-out;    
}

section#products .products-container .product-wrapper:hover .product img{
    width:55%;
    transition: all 0.3s ease-in-out;    
}

/* --- Start services --- */

section#services{
    padding:0em 0px 0px 0px;
    box-sizing: border-box;
}

section#services .services-title{
    font-weight: bold;
    padding: 0px;
    text-transform: uppercase;
    font-size:var(--font-size-t1);
    margin: 2% 2% 1% 2%;
}

/* --- Start Information --- */



.information{
    background:#fff;
    display: grid;
    grid-template-columns: 50% 50%;
    padding:7em 0px;
    grid-template-areas:
        'image-container information-container';

}

.information:nth-of-type(2n){
    grid-template-areas:
        'information-container image-container';

}

.information .image-container{
    grid-area:image-container;
    display: grid;
}

.information .image-container img{
    width:100%;
    object-fit: contain;
}

.information .information-container{
    grid-area:information-container;
    display: grid;
    padding:2em;
    box-sizing: border-box;
    grid-template-rows: min-content min-content min-content min-content;
    align-items: start;
    padding:100px;
}

.information .information-container p.title{
    font-size:var(--font-size-t1);
    color:var(--color-dark);
    font-weight: bold;
    margin:0px 0px 20px 0px;
    padding:0px;
}

.information .information-container p.description{
    display: grid;
    font-size:var(--font-size-t3);
    color:var(--color-gray);
    margin:0px 0px 20px 0px;
    padding:0px;
}

.information .information-container div.button-container{
    margin:0px 0px 20px 0px;
}

/* --- Contact form --- */

section#contacts {
    display: grid;
    width: 100%;
    background: #fff;
    padding: 5em 100px;
    box-sizing: border-box;
}

section#contacts #contacts-form-wrapper{
    display: grid;
    width:100%;
    grid-template-columns: 50% 50%;
    background-color:var(--color-gray-light);
    padding:2em;
    box-sizing: border-box;
    
}

section#contacts #title-bar{
}

section#contacts #title-bar .title{
    font-size:var(--font-size-t2);
    font-weight: bold;
}

section#contacts #contact-form{
    display:table;
    width:100%
}

section#contacts #contact-form input{
    width:46%;
    margin:1%;
    float:left;
    padding:1em;
    box-sizing: border-box;
    border:0px;
}

section#contacts #contact-form textarea{
    width:94%;
    margin:1%;
    float:left;
    padding:1em;
    box-sizing: border-box;
    border:0px;
}

section#contacts #contact-form input.submit{
    width:46%;
    margin:1%;
    float:left;
    color: #fff;
    background:#000;
    padding: 1em 3em;
    border: 1px solid var(--color-dark);
    text-transform: uppercase;
    cursor: pointer;
    font-size:var(--font-size-t3);
}

section#contacts #contact-form input.submit:hover{
    color: #000;
    background:#fff;
    border: 1px solid #000;
}






/* --- Start products --- */

footer#main{
    background-color: #262626;
    color: #fff;
    display: grid;
    padding:3em 0px;
    font-size:var(--font-size-t3);
}

footer#main section{
    width:60%;
    margin:auto;
}

footer#main section#footer-languages{
    display:table;
    padding:1em 0px;
}

footer#main section#footer-languages nav{
    margin:0px;
}

footer#main section#footer-languages ul{
    margin:0px;
    display: table;
    padding: 0px;
}

footer#main section#footer-languages ul li{
    display:table;
    float:left;
    list-style:none;
    margin:0px;
}

footer#main section#footer-languages ul li a{
    color:var(--color-gray-2);
    padding:1em 1em 1em 0px;
}

footer#main section#footer-languages ul li a:hover{
    color:#fff;
}

footer#main section#footer-languages ul li.selected a{
    color:#fff;
}

footer#main section#quick-links{
    display:grid;
    grid-template-columns:21% 21% 21% 21%;
    grid-gap:4%;
}

footer#main section#quick-links nav{
    margin:0px;
}

footer#main section#quick-links ul{
    margin:0px;
    padding: 0px;
}

footer#main section#quick-links ul li{
    list-style:none;
    margin:0px;
    padding:.3em 0px;
    color:var(--color-gray-2);
}

footer#main section#quick-links ul li a{
    color:var(--color-gray-2);
}

footer#main section#quick-links ul li a:hover{
    color:#fff;
}

footer#main section#quick-links nav p{
    border-bottom:1px solid var(--color-gray-2);
    padding:1em 0px;
}

footer#main section#all-rights{
    border-top:1px solid var(--color-gray-2);
    margin: 2em auto auto auto;
    text-align:center;
    font-size:var(--font-size-t3);
}


/* --- Start custom scrollbar */
::-webkit-scrollbar {
    width: 20px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3);
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,0.7);
    cursor:pointer;
}

:target::before {
    content: "";
    display: block;
    height: 110px;
    margin-top: -110px; 
}


/* --- Start page design */

article#page-content{
    margin:auto;
    width:100%;
    display: grid;
    background:#fff;
    margin-top: 110px;
    padding:0px;
    box-sizing:border-box;
}

article#page-content header#page{
    width:100%;
    height:30vh;
    background-size:100% auto;
}

article#page-content header#page section#title-bar-wrapper{
    width:100%;
    height:30vh;
    padding:3em 5em;
    box-sizing:border-box;
    background: rgba(0,0,0,.5);
}

article#page-content header#page section#title-bar-wrapper p{
    color:white;
    font-size:var(--font-size-t1);
    font-weight: bold;
    width:50%;
    box-sizing:border-box;
}

section.page-element{
    max-width: 1218px;
    width:100%;
    margin:auto;
    padding:1em;
    color:var(--color-gray);
    font-size:var(--font-size-t3);
    box-sizing: border-box;
}

section#page-description{
    
}

section#page-content{
}

section#key-information{
    background:#f4f4f4;
    margin:0px;
    padding:2em;
}

section#key-information .page-element-title{
    font-size:var(--font-size-t1);
    font-weight: bold;
    padding:0px;
    margin:0px 0px .5em 0px;
}

section#page-content blockquote{
    background:#f4f4f4;
    margin:1em 0px;
    padding:2em;
}

section#similar-pages{
}

section#similar-pages .container-title{
    font-size:var(--font-size-t1);
    margin:0px;
    color:#000;
}

section#similar-pages .pages-container{
    display: grid;
    grid-template-columns: 50% 50%;
    padding:2em 0px;
    grid-template-areas:
        'description-holder image-holder';
}

section#similar-pages .pages-container:nth-child(2n){
    grid-template-areas:
        'image-holder description-holder';
}

section#similar-pages .pages-container .image-holder{
    display: grid;
    grid-area:image-holder;
}

section#similar-pages .pages-container .image-holder img{
    width:100%;
    object-fit:contain;
}

section#similar-pages .pages-container .description-holder{
    display: grid;
    grid-area:description-holder;
    width:100%;
    object-fit:contain;
    padding:2em;
    box-sizing: border-box;
}

section#similar-pages .pages-container .description-holder .page-title{
    font-size:var(--font-size-t2);
    color:#000;
    margin: 0px;
}

section#similar-pages .pages-container .description-holder .page-description{
    font-size:var(--font-size-t3);
    color:var(--color-gray-2);
    margin: 0px;
}

@media only screen and (max-width: 1000px) {
    
    nav#main-menu #information{
        display: none;
    }
    
    nav#main-menu #menu{
        display: none;
    }
    
    nav#main-menu #logo{
        margin:0px 2em;
    }
    
    nav#main-menu{
        top:0px;
    }
    
    nav#location{
        display: none;
    }
    
    section#slider{
        height:100vh;
        padding: 0px;
    }
    
    section#slider video{
        height:100vh;
    }
    
    section#slider p.title{
        width: 80%;
        margin:auto;
    }
    
    section#slider p.description{
        width: 80%;
        margin:auto;
    }
    
    section#slider #slider-information{
        padding:120px 1em 1em 1em;
        background-color: rgba(0, 0, 0, 0.5);
        height: 100vh;
    }
    
    #slider-information .page-button{
        margin:2em auto;
    }
    
    section#products .products-container .product-wrapper{
        width:100%;
        padding: 0px 0px 1em 0px;
    }
    
    section#products .products-title{
        text-align: center;
        padding: 1em 0px 0px 0px;
    }
    
    section#products .products-container .product-wrapper .product{
    }
    
    section#products .products-container .product .product-title{
        text-align: center;
    }
    
    section#products .products-container .product .product-description{
        text-align: justify;
        padding:1em 0px 0px 0px;
    }   
    
    .page-button{
        margin:auto;
    }
    
    section#services .services-title{
        padding:1em 0px 0px 0px;
        text-align: center;
    }

    #services .information {
        grid-template-columns:100%;
        grid-template-areas:initial;
        padding:0px;
        display: table;
    }
    
    
    .information .information-container{
        padding:1em;
    }

    .information .information-container p.description{
        text-align: justify;
    }
    
    section#contacts #contacts-form-wrapper{
        grid-template-columns:100%;
    }
    
    section#contacts{
        padding: 1em;
    }
    
    section#contacts #contact-form input.submit{
        width:80%;
        margin: 0px 10%;
    }
    
    footer#main section#quick-links{
        grid-template-columns:100%;
        grid-gap:0px;
    }
    
    footer#main section{
        width:90%;
    }
    
    footer#main section#footer-languages ul{
        display: grid;
        grid-template-columns: 33% 33% 33%;
    }
    
    footer#main section#footer-languages ul li{
        text-align: center;
    }
    
    section#similar-pages {
        padding:0px;
    }
    
    section#similar-pages .pages-container{
        display: table;
    }
    
    section#similar-pages .container-title{
        text-align: center;
    }
    
    section#similar-pages .pages-container .description-holder .page-title{
        text-align: center;
    }
    
    section#similar-pages .pages-container .description-holder .page-description{
        text-align: justify;
        padding:1em 0px;
    }
    
    section#similar-pages .pages-container .image-holder img{
        width:50%;
        margin:auto;
        display: table;
    }
    
    section#contacts #contact-form input,
    section#contacts #contact-form textarea{
        width:100%;
    }
    
    article#page-content header#page section#title-bar-wrapper{
        padding:1em;
    }
    
    article#page-content header#page section#title-bar-wrapper p{
        width:100%;
        font-size: var(--font-size-t2);
    }
}