@font-face {
    font-family: 'Castellar';
    src: url('../fonts/castellar.ttf');
}

body{
    min-height: 100vh;
    margin: 0;
    padding: 0;

    font-family: 'Open Sans', sans-serif;
    font-size: 1.2rem;

    display: flex;
    flex-direction: column;
    align-items: center;

    overflow-x: hidden;
}

.scrollFixed{
    overflow-y: hidden;
}

/*---------------------Font style------------------------*/
.castellar{
    font-family: 'Castellar', sans-serif;
}
.titleL{
    font-size: 6rem;
}
.title{
    font-size: 2.5rem !important;
    font-weight: bold;
    color: #005B7F;
}
.title1{
    font-size: 1.9rem !important;
    font-weight: bold;
    color: #005B7F;
}
.title2{
    font-size: 1.6rem !important;
    font-weight: bold;
    color: #005B7F;
}
.title3{
    font-size: 1.4rem !important;
    font-weight: bold;
    color: #005B7F;
}
.title4{
    font-size: 1.2rem !important;
    font-weight: bold;
    color: #005B7F;
}

.text1{
    font-size: 1.9rem;
    font-weight: bold;
}
.text2{
    font-size: 1.4rem;
}
/*--End font style--*/

/*---------------------Colors------------------------*/
.color1{
    color:#f0f8ff;
}
.color2{
    color:#3688a8;
}
.color3{
    color:#005B7F;
}
.color4{
    color:#4e4e4e;
}
.color5{
    color:black;
}

.background-color1{
    background-color: white;
}
.background-color2{
    background-color: #f0f8ff;
}
.background-color3{
    background-color: #daeeff;
}
.background-color4{
    background-color:#3688a8;
}
.background-color5{
    background-color: #005B7F;
}
/*--End colors--*/

/*-------------------Header-------------------*/
header{
    width: 100%;
}
.fixed_header{
    width: 100%;
}

/*-------------Language-------------*/
.language{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#language_size{
    width: 96%;
    max-width: 1130px;

    display: flex;
    justify-content: end;
}

/*--------SVG size---------*/
.w-6{
    width: 1.7rem;
}
.h-6{
    height: 1.7rem;
}
/*--End SVG size--*/

.lang_item{
    margin: 0.5% 0.5% 0.5% 2%;
}
.lang_item a{
    text-decoration: none;
}
/*--End language--*/


/*----------------Nav----------------*/
.navbar{
    width: 100%;
    height: 80px;

    display: flex;
    justify-content: center;
    align-items: center;
}
#navbar_size{
    width: 96%;
    max-width: 1130px;
    height: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav_logo a{  
    font-weight: bold;
    text-decoration: none;
}
.nav_items {
    list-style:none;
    position: absolute;
    top: 90px;
    left: 0;

    padding-top: 3%;

    width: 94.5%;
    height: 100vh;

    display: flex;
    flex-direction: column;
    
    
    transform: translateX(-100%);
    transition: 0.3s ease all;
    z-index: 100;
}
.nav_items li{
    margin-top: 3%;
    margin-left: -8%;
    padding: 2%;
    width: 100%;
    
}
.nav_items li a{
    text-align: center;
    margin: 15px;
    position: relative;
    text-decoration: none;
}
.nav_items li div{
    text-align: start;
    margin: 15px;
    position: relative;
    text-decoration: none;
    width: 23%;
}

/*-------Underline effect-------*/
.nav_items li a::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background:#005B7F;;
    transition: all 0.5s;
}

.nav_items li a:hover::before{
    width: 100% !important;
}
/*--End underline effect--*/

/*-------Underline effect-------*/
.nav_items li div::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background:#005B7F;;
    transition: all 0.5s;
}

.nav_items li div:hover::before{
    width: 100% !important;
}
/*--End underline effect--*/

/*-----------Sub menu-----------*/
.nav_items li ul{
    display: none;
    list-style:none;
    min-width:140px;
    margin-top: 1%;
}

.nav_items li:hover > ul {
    display:block;
}
/*--End sub menu--*/


/*------------Toggle------------*/
.nav_toggle{
    display: flex !important;
    flex-direction: column;                
    margin: 15px;
    width: 31px;
}
.nav_toggle:hover{
    cursor: pointer;
}

.nav_toggle span{
    width: 30px;
    height: 4px;
    background: #005B7F;
    margin-bottom: 5px;
    border-radius: 2px;             
    transform-origin: 5px 0px;
    transition: all 0.2s linear;
}

.close span{
    transform: rotate(45deg) translate(0px, 0px);
}

.close span:nth-child(2){
    display: none;
}

.close span:nth-child(3){
    transform: rotate(-45deg) translate(-5px, 1px);
}
.open{ transform: translateX(0) !important}
/*--End toggle--*/
/*--End nav--*/

/*----------------Graphic header---------------*/
.graphic_header{
    height: 300px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../images/company/img_prin.webp);
    background-size: cover;

}
.graphic_header_sizeBox{
    width: 97%;
    max-width: 1120px;
    display: flex;
    align-items: center;
    justify-content: end;
}
.itemText {
    text-align: end;
    width: 99%;
    max-width: 450px;
    transform: translateX(+160%);
    transition: 0.3s linear;
    opacity: 0;
    padding-right: 2%;
}
.itemText p{
    margin: 0;
    padding: 0;
}
.itemText .left{
    text-align: left;
}
.load { 
    opacity: 1;
    transform: translateX(0)
}
/*--End graphic header--*/
/*--End header--*/

/*--------------------Main-------------------*/
main{
    max-width: 1120px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 98%;
}

/*-------------Breadcrumb nav------------*/
.breadcrumb_section{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.breadcrumb_sizeBox{
    width: 96%;
    max-width: 1130px;
}
.breadcrumb{
    display: flex;
    align-items: center;
    padding: 0.5rem;
    margin: 0;
}
.breadcrumb li{
    display: flex;
    align-items: center;
    padding: 0;
    font-size: 0.9rem;
    margin-right: 0.5em;
}
.breadcrumb li a{
    text-decoration: none;
    padding: 0;
}
.breadcrumb p{
    margin:0% 1% 0% 1%;
}
/*--End breadcrumb nav--*/

/*-------------404 error------------*/
#error{
    margin-top: 60px;
    width: 90%;
}
#error_section{
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#error_section h1{
    font-size: 8.5rem;
    margin: 0;
}
#error_section p{
    font-size: 1.4rem;
    margin: 0 0 2.4rem 0;
}
#homeButton{
    padding: 1em;
    text-decoration: none;
    border: #3688a8;
    font-weight: bold;
    border-radius: 20px;
}
/*--End main--*/

/*--------------------Footer-------------------*/
footer{
    width: 100%;
    height: 6%;
    margin-top: 2em;
    padding-top: 3%;
    display: flex;
    flex-direction: column;
}

/*----------------------Contact------------------*/
footer-component{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer_section{
    max-width: 1120px;
    width: 96%;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.w-5{
    width: 1.25rem;
}
.h-5{
    height: 1.25rem;
}
.w-4{
    width: 1rem;
}
.h-4{
    height: 1rem;
}
.footer_item{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2%;
}
.footer_item_title{
    text-align: center;
    width: 90%;
    border-bottom: 1px solid #005B7F;
}
.footer_item_content{
    width: 90%;
}

.footer_item_contactData{
    display: flex;
    align-items: start;
    margin-bottom: 4%;
}

.footer_item_contactData div{
    margin-right: 3%;
}
.footer_item_contactData p{
    margin:0;
}
.social_link{
    text-decoration: none;
    width: 65%;
}

/*------------------Certificates--------------------*/
#footer_certificates{
    margin-top: 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#footer_certificates p{
    width: 20%;
}

#footer_certificates img{
    width: 100%;
}
/*--End certificates--*/

/*---------------------Copy--------------------*/
.copy {
    width: 100%;
    margin-top: 3%;
    padding-bottom: 1%;
    text-align: center;
    font-size: 0.8rem;

    display: flex;
    align-items: center;
    justify-content: center;
}
.copy_size{
    width: 96%;
    max-width: 1130px;
}
.copy_nav{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 70%;
}

/*----------------Footer nav---------------*/
.nav_footer{
    width: 100%;
}
.nav_footer ul{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0;
}
.nav_footer ul li{
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 0;
}
.nav_footer_linkItem{
    text-decoration: none;
    padding: 0;
}
/*--End footer nav--*/

/*----------------Logo---------------*/
.nav_footer_logo{
    height: 15%;
}
.nav_footer_logo a{
    text-decoration: none;
    padding: 2%;
}
/*--End logo--*/
/*--End copy--*/
/*--End footer--*/


/*--------------------------Media queris----------------------------*/
/*Medium screens (tablets larger than 768px)*/
@media screen and (min-width:768px) {
    /*-------------------Header-------------------*/

    .fixed_header{
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
    }
    /*----------------Nav----------------*/
    .nav_logo{
        width: 20%;
    }
    .nav_items{
        display: flex;
        flex-direction: row;
        position: relative;
        top: 0;
        padding-top: 0;

        width: 70%;
        max-width: 700px;
        height: 100%;

        transform: translateX(0%);
        background: none;
    }
    .nav_items li{
        display: flex;
        justify-content: end;
        align-items: center;
        
        margin-left: 0%;
        margin-top: 0;
    }
    .nav_items li a{
        margin: 0;
    }
    .nav_items li div{
        margin: 0;
        text-align: end;
        position: relative;
        text-decoration: none;
        width: 6.6rem;
    }
        
    /*------------Sub menu------------*/
    #subNav{
        position:relative;
    }
    .nav_items li ul{
        display:none;

        width:210px;
        margin-top: 0;
        padding: 1%;
        background:aliceblue;

        position: absolute;
        top: 100%;
        left: 7%;
    }
    .nav_items li ul li{
        display: flex;
        flex-direction: column;
        align-items: baseline;
        width: 95%;
    }
    .nav_items li ul li a{
        padding: 1%;
    }
    /*--End sub menu--*/

    .nav_toggle{
        display: none !important;
    }
    /*--End nav--*/

    /*-----------Graphic header----------*/
    .graphic_header{
        margin-top: 112px;
    }
    /*--End graphic header--*/

    .breadcrumb_section{
        margin-top: 115px;
    }
    /*--End header--*/
    /*-------------404 error------------*/
    #error{
        margin-top: 200px;
    }
    /*--End 404 error--*/
    /*-----------Footer----------*/
    .footer_section{
        flex-direction: row;
        align-items: start;
    }
    .footer_item{
        width: 45%;
        display: flex;
        flex-direction: column;
        padding: 0%;;
    }
    .footer_item_title{
        text-align: start;
        width: 100%;
        padding-left: 1%;
    }
    .footer_item_content{
        width: 100%;
        padding-left: 2%;
    }

    .copy{
        padding-bottom: 0;
    }
    .copy_size{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .copy_nav{
        justify-content: space-between;
        align-items: start;
        height: 70%;
    }
    /*--End footer--*/
}

/*Large screens (desktops larger than 992px)*/
@media screen and (min-width:992px) {
    /*------------Sub menu------------*/
    .nav_items li ul{
        left: 20%;
    }
    /*----------------Social links---------------*/
    .w-5{
        width: 1.50rem;
    }
    .h-5{
        height: 1.50rem;
    }
    .copy {
        margin-top: 2%;
    }
}

/*Very large screens (desktops larger than 1200px)*/
@media (min-width: 1200px) {
    /*------------Sub menu------------*/
    footer{
        padding-top: 2%;
    }
    .copy {
        margin-top: 1%;
    }
}