:root{
    --grey: #4E5051;
    --white: #fff;
    --blue-dark: #003366;
    --grey-light: #F2F2F2;
    --black: #000;
    --blue: #336699;

    --hero-text-size: 26px;

    @media (max-width: 600px){
       --hero-text-size: 22px;
    }
    --hero-font-family: "Raleway", sans-serif;

    --h2-text-size: 36px;
    --h2-font-family: "Raleway", sans-serif;

    @media (max-width: 600px){
       --h2-text-size: 30px;
    }

    --h3-text-size: 26px;
    --h3-font-family: "Raleway", sans-serif;

    @media (max-width: 600px){
       --h3-text-size: 20px;
    }

    --text-size: 18px;
    --font-family: "segoe-ui", sans-serif;
}

html,body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;

    font-size: var(--text-size);
    font-family: var(--font-family);
    color: var(--grey);
    line-height: 1.7em;
}

body{
     display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: stretch;
    align-items: stretch;

    height: auto;
    min-height: 100%;
}
main{
    -webkit-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    align-self: auto;
}

.container-small {
  width: 100%;
  max-width: 900px; 
  margin: auto auto;
}

.container {
  width: 100%;
  max-width: 1200px;   /* common max width */
  margin: 0 auto;      /* center horizontally */
  padding: 0 2rem;     /* horizontal padding */
  
  @media (max-width: 800px){
       padding: 0 1rem;
}
  
  box-sizing: border-box;
} 

@media (min-width: 576px) {
  .container { max-width: 540px; }
}
@media (min-width: 768px) {
  .container { max-width: 720px; }
}
@media (min-width: 992px) {
  .container { max-width: 960px; }
}
@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}
@media (min-width: 1400px) {
  .container { max-width: 1320px; }
}

a{
    color: var(--blue-dark);
    text-decoration: none;
}

h2{
    color: var(--blue-dark);
    font-size: var(--h2-text-size);
    font-family: var(--h2-font-family);
        line-height: 1.2em;
}

h3{
    color: var(--blue-dark);
    font-size: var(--h3-text-size);
    font-family: var(--h3-font-family);
        line-height: 1.2em;
}

img{
    max-width: 100%;
    height: auto;
}

header, footer{
     -webkit-order: 0;
    order: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-align-self: auto;
    align-self: auto;
    padding-top:6px;
    padding-bottom:6px;
}

header{
    border-bottom: 1px solid #ddd;
    position: sticky;
    top:0px;

    z-index: 1000;

    background: var(--white);

    nav{

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-content: center;
        align-content: center;
        -webkit-align-items: center;
        align-items: center;


        ul{
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: row;
            flex-direction: row;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-justify-content: flex-start;
            justify-content: flex-start;
            -webkit-align-content: center;
            align-content: center;
            -webkit-align-items: center;
            align-items: center;

            list-style: none;
            padding:0px;
            margin:0px;

            li{
                padding:16px;
                margin:0px;
            }
        }

        a{
            color: var(--blue-dark);
            text-decoration: none;
        }
        a.active{
            font-weight: bold;
        }
    }
}

.logo{
    width:300px;
    display: block;

    @media (max-width: 1000px){
       width:260px;
    }
    @media (max-width: 800px){
       width:180px;
    }
    @media (max-width: 600px){
       width:180px;
    }
}

    @media (max-width: 1000px){
       .hideOnSmall{
         display:none !important;
        }
    }

    .showOnSmall{
         display:none !important;
    }
    @media (max-width: 1000px){
        .showOnSmall{
        display:block !important;
        }
    }



footer{
    background: var(--blue-dark);

     nav{

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-content: center;
        align-content: center;
        -webkit-align-items: center;
        align-items: center;


        ul{
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: row;
            flex-direction: row;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-justify-content: flex-start;
            justify-content: flex-start;
            -webkit-align-content: center;
            align-content: center;
            -webkit-align-items: center;
            align-items: center;

            list-style: none;
            padding:0px;
            margin:0px;

            li{
                padding:16px;
                margin:0px;
            }
        }

        a{
            color: var(--white);
            text-decoration: none;
        }

    }
}

.logo-footer{
    width:300px;
}


.hero{

    text-wrap: balance;

    font-size: var(--hero-text-size);
    font-family: var(--hero-font-family);
    color: var(--white);

    padding: 60px 0px;

    @media (max-width: 1000px){
        padding: 0px 0px !important;
    }

    overflow: hidden;
    position: relative;

    .background{
        position: absolute;
        left:0px;
        top:0px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
        z-index:-1;
    }

    .container{

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-content: center;
        align-content: center;
        -webkit-align-items: center;
        align-items: center;

        > div{
            width: 50%;
            position: relative;
            height: fit-content;
            padding:30px 120px;

            @media (max-width: 1000px){
                width: 100% !important;
                padding: 0px 20px !important;
                text-align: center !important;
            }

            color:#fff;
        }
        
        > div::before{
            opacity: 0.8;
            mix-blend-mode: multiply;
            content:"";
            background: var(--blue-dark);

            width: 100%;
            height: 300%;
         
            position: absolute;
            z-index:-1;

            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) skewX(-23deg);;
        }

        > div::after{
            opacity: 0.42;
            mix-blend-mode: multiply;
            content:"";
            background: var(--blue-dark);

            width: 100%;
            height: 300%;
         
            position: absolute;
            z-index:-1;

            left: calc(50% - 100px);
            top: 50%;
            transform: translate(-50%, -50%) skewX(-23deg);
        }

    }
}

.hero:not(.hero-big){
    .container{
        > div::after{
            display: none;
        }
    }
}

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

.grey{
    color: var(--grey);
}

.arrow{
    float: right;
    width: 30px;
    position: relative;
    top: 39px;
}

.btn{
    border-radius: 32px;
    border:1px solid var(--blue-dark);
    padding-left:18px;
    padding-right:18px;
}


main .container{

    padding-top:64px;
    padding-bottom:64px;
}


.equipoList{
    .col{
    
        margin-bottom:36px;

    }
    img:not(.arrow){
        width:100%;
    }
}

.equipoDetail{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;

    @media (max-width: 600px){
       display: block;
    }

    > div:first-child{
        width: 20%;
        margin-right:64px;
        -webkit-order: 0;
        order: 0;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        -webkit-align-self: auto;
        align-self: auto;

        @media (max-width: 1000px){
            margin-right:32px;
        }

        @media (max-width: 600px){
             width: 100%;
             margin-right: 0px;
             margin-bottom: 34px;

             img{
                width:100%;
             }
        }
    }

   
}

.servicesList{
    img{
        width:100%;

        @media (max-width: 600px){
            width:90% !important;
            float: none !important;
            margin: auto auto !important;
            display: block !important;
        }
    }
    .col:nth-child(odd){
        img{
            float: left;
        }
    }
    .col:nth-child(even){
        img{
            float: right;
        }
    }
    .col{
        
        margin-bottom:36px;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-content: flex-start;
        align-content: flex-start;
        -webkit-align-items: flex-start;
        align-items: flex-start;

        h3{
            margin-bottom:0px;
        }

    }
}



.mobile-menu{
    padding:0px;
    list-style: none;

    a{
        padding:8px 30px;
        font-size: var(--hero-text-size);
        display: inline-block;
    }
    li{
        margin-top:16px;
        margin-bottom:16px;
    }
}
body:has(.mobile-menu){
    .menu{
        display: none;
    }
    main{
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-content: center;
        align-content: center;
        -webkit-align-items: safe center;
        align-items: safe center;
    }
}

.greyish{
    background: var(--grey-light);
}


.card{
    padding:16px;
    background: var(--white);
    box-shadow: 8px 8px 20px rgba(0,0,0,0.16);
    text-align: left;
}


blockquote{
    padding:16px;
    background: var(--white);
    box-shadow: 8px 8px 20px rgba(0,0,0,0.16);
    text-align: left;
    margin: 0px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;

    color: var(--blue-dark);
    
    font-size: var(--h3-text-size);
    @media (max-width: 1000px){
        font-size: var(--hero-text-size);
    }

    font-family: var(--h3-font-family);

    font-weight: bold;

    margin-top:32px;
    margin-bottom:32px;

    > img:first-child{
        -webkit-order: 0;
        order: 0;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        -webkit-align-self: flex-start;
        align-self: flex-start;
        width: 60px;
        margin-right:32px;

        @media (max-width: 1000px){
            width: 30px;
        }
    }

    > img:last-child{
    -webkit-order: 0;
        order: 0;
        -webkit-flex: 0 1 auto;
        flex: 0 1 auto;
        -webkit-align-self: flex-end;
        align-self: flex-end;
        width: 60px;
        margin-left:32px;

        @media (max-width: 1000px){
            width: 30px;
        }

    }
}

.ramasListIcon{
    width:64px;
    height: 64px;
    object-fit: contain;
}


.contactList{

    > .col{
                display: -webkit-flex;
                display: flex;
                -webkit-flex-direction: row;
                flex-direction: row;
                -webkit-flex-wrap: nowrap;
                flex-wrap: nowrap;
                -webkit-justify-content: flex-start;
                justify-content: flex-start;
                -webkit-align-content: center;
                align-content: center;
                -webkit-align-items: center;
                align-items: center; 
    }

    .contactOptions{
        > div{
                display: -webkit-flex;
                display: flex;
                -webkit-flex-direction: row;
                flex-direction: row;
                -webkit-flex-wrap: nowrap;
                flex-wrap: nowrap;
                -webkit-justify-content: flex-start;
                justify-content: flex-start;
                -webkit-align-content: center;
                align-content: center;
                -webkit-align-items: flex-start;
                align-items: center;
                margin-top:16px;
                margin-bottom:16px;
                text-align: left;
        }
        img{
            width:64px;
                height: 64px;
                margin-right:16px;
                object-fit: contain;
        }
    }
    
}
.contactList.bigIcons{
     .contactOptions img{
        width:164px;
        height: 164px;
     }

     @media (max-width: 1000px){
        .contactOptions img{
            width:64px;
            height: 64px;
        }
        }
    }





/*========================================================
= MODERN MATERIALIZE GRID (FLEXBOX)
=========================================================*/

/* ROW */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.row > .col {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  box-sizing: border-box;
  margin-bottom:16px;
}

/* BASE COL */
.col {
  flex: 0 0 auto;
  width: 100%;
}

/*========================================================
= GRID WIDTHS (12 columns)
=========================================================*/

:root {
  --c1: calc(100% * 1 / 12);
  --c2: calc(100% * 2 / 12);
  --c3: calc(100% * 3 / 12);
  --c4: calc(100% * 4 / 12);
  --c5: calc(100% * 5 / 12);
  --c6: calc(100% * 6 / 12);
  --c7: calc(100% * 7 / 12);
  --c8: calc(100% * 8 / 12);
  --c9: calc(100% * 9 / 12);
  --c10: calc(100% * 10 / 12);
  --c11: calc(100% * 11 / 12);
  --c12: 100%;
}

/*========================================================
= SMALL (mobile) — .s#
=========================================================*/

.col.s1 { width: var(--c1); }
.col.s2 { width: var(--c2); }
.col.s3 { width: var(--c3); }
.col.s4 { width: var(--c4); }
.col.s5 { width: var(--c5); }
.col.s6 { width: var(--c6); }
.col.s7 { width: var(--c7); }
.col.s8 { width: var(--c8); }
.col.s9 { width: var(--c9); }
.col.s10 { width: var(--c10); }
.col.s11 { width: var(--c11); }
.col.s12 { width: var(--c12); }

/*========================================================
= MEDIUM ≥ 600px — .m#
=========================================================*/

@media (min-width: 600px) {
  .col.m1 { width: var(--c1); }
  .col.m2 { width: var(--c2); }
  .col.m3 { width: var(--c3); }
  .col.m4 { width: var(--c4); }
  .col.m5 { width: var(--c5); }
  .col.m6 { width: var(--c6); }
  .col.m7 { width: var(--c7); }
  .col.m8 { width: var(--c8); }
  .col.m9 { width: var(--c9); }
  .col.m10 { width: var(--c10); }
  .col.m11 { width: var(--c11); }
  .col.m12 { width: var(--c12); }
}

/*========================================================
= LARGE ≥ 992px — .l#
=========================================================*/

@media (min-width: 992px) {
  .col.l1 { width: var(--c1); }
  .col.l2 { width: var(--c2); }
  .col.l3 { width: var(--c3); }
  .col.l4 { width: var(--c4); }
  .col.l5 { width: var(--c5); }
  .col.l6 { width: var(--c6); }
  .col.l7 { width: var(--c7); }
  .col.l8 { width: var(--c8); }
  .col.l9 { width: var(--c9); }
  .col.l10 { width: var(--c10); }
  .col.l11 { width: var(--c11); }
  .col.l12 { width: var(--c12); }
}

/*========================================================
= EXTRA LARGE ≥ 1200px — .xl#
=========================================================*/

@media (min-width: 1200px) {
  .col.xl1 { width: var(--c1); }
  .col.xl2 { width: var(--c2); }
  .col.xl3 { width: var(--c3); }
  .col.xl4 { width: var(--c4); }
  .col.xl5 { width: var(--c5); }
  .col.xl6 { width: var(--c6); }
  .col.xl7 { width: var(--c7); }
  .col.xl8 { width: var(--c8); }
  .col.xl9 { width: var(--c9); }
  .col.xl10 { width: var(--c10); }
  .col.xl11 { width: var(--c11); }
  .col.xl12 { width: var(--c12); }
}

/*========================================================
= OFFSETS (flex version — works like margin-left)
=========================================================*/

[class*="offset-"] {
  margin-left: 0;
}

.offset-s1 { margin-left: var(--c1); }
.offset-s2 { margin-left: var(--c2); }
.offset-s3 { margin-left: var(--c3); }
.offset-s4 { margin-left: var(--c4); }
.offset-s5 { margin-left: var(--c5); }
.offset-s6 { margin-left: var(--c6); }
.offset-s7 { margin-left: var(--c7); }
.offset-s8 { margin-left: var(--c8); }
.offset-s9 { margin-left: var(--c9); }
.offset-s10 { margin-left: var(--c10); }
.offset-s11 { margin-left: var(--c11); }

/* Medium */
@media (min-width: 600px) {
  .offset-m1 { margin-left: var(--c1); }
  .offset-m2 { margin-left: var(--c2); }
  .offset-m3 { margin-left: var(--c3); }
  .offset-m4 { margin-left: var(--c4); }
  .offset-m5 { margin-left: var(--c5); }
  .offset-m6 { margin-left: var(--c6); }
}

/* Large */
@media (min-width: 992px) {
  .offset-l1 { margin-left: var(--c1); }
  .offset-l2 { margin-left: var(--c2); }
  .offset-l3 { margin-left: var(--c3); }
  .offset-l4 { margin-left: var(--c4); }
  .offset-l5 { margin-left: var(--c5); }
}

/* XL */
@media (min-width: 1200px) {
  .offset-xl1 { margin-left: var(--c1); }
  .offset-xl2 { margin-left: var(--c2); }
  .offset-xl3 { margin-left: var(--c3); }
  .offset-xl4 { margin-left: var(--c4); }
}