/*--------------------------------------*\

	Base

\*--------------------------------------*/



* {

    box-sizing: border-box;

}



a, a:hover {

    color: inherit;

}



input:focus, textarea:focus, select:focus{

    outline: none;

}



body {

    font-family: 'Open Sans', sans-serif;

    color: #231f20;

    font-size: 16px;

}



p:last-child{

    margin-bottom: 0;

}



.flex {

    display: flex;

    flex-wrap: wrap;

}



.cols {

    margin-right: -10px;

    margin-left: -10px;

}



.cols > * {

    padding-right: 10px;

    padding-left: 10px;

}



.col-10 {

    width: 10%;

}



.col-25 {

    width: 25%;

}



.col-50 {

    width: 50%;

}



.col-90 {

    width: 90%;

}



.container {

    max-width: 1140px;

    width: 100%;

    margin-left: auto;

    margin-right: auto;

    padding-left: 10px;

    padding-right: 10px;

}



.remove-style-list{

    padding: 0;

    margin: 0;

    list-style: none;

}



.txt-center {

    text-align: center;

}



.txt-right {

    text-align: right;

}



.mt {

    margin-top: 60px;

}



.mb {

    margin-bottom: 60px;

}



/*--------------------------------------*\

	Header

\*--------------------------------------*/

.header-page {

    background-color: #f3f3f4;

}



.navigation-desktop-content {

    font-family: 'Titillium Web', sans-serif;

    font-size: 20px;

}



.navigation-desktop-content .flex {

    justify-content: space-evenly;

}



.navigation-desktop-content > nav > ul > li > a {

    padding: 28px 0;

    display: block;

    border-bottom: 1px solid transparent;

    transition: all .2s;

}





.navigation-desktop-content > nav > ul > li > a:hover, .active-navigation {

    border-bottom: 1px solid #162874 !important;

    text-decoration: none;

}



.navigation-mobile-content > nav > ul > li > a:hover, .navigation-mobile-content .active-navigation {

   color:#162874 ;

   border: none !important;

    text-decoration: none;

}





.logo {

    display: block;

    width: 80px;

}



.logo img{

    margin-top: 5px;

}



.btn-mobile {

    display: none;

}





.menu_mobile {

    background: #fff;

    opacity: 0;

    position: fixed;

    top: 0;

    z-index: 900;

    overflow: auto;

    width: 100%;

    height: 100%;

}



.menu_mobile[element="true"] {

    animation: menuMobileVisible  0.2s both;

}



.menu_mobile[element="false"] {

    animation: menuMobileInvisible  0.2s both;

}



@keyframes menuMobileVisible {

    from {opacity: 0}

    to {opacity: 1}

}



@keyframes menuMobileInvisible {

    from {opacity: 1}

    to {opacity: 0}

}



.close_menu {

    display: block;

    border: none;

    padding: 0;

    margin-top: 15px;

    margin-bottom: 15px;

    margin-left: auto;

    margin-right: auto;

    width: 25px;

    height: 25px;

    background: url(../images/close.svg) center center no-repeat;

    background-size: cover;

}





.navigation-mobile-content a {

    display: block;

    padding: 15px;

    font-weight: bold;

    border-top: 1px solid #DBDBDB;

    color: #231f20;

}



/*--------------------------------------*\

	Front page

\*--------------------------------------*/

.info {

    height: 250px;

    width: 100%;

    background-color: #f3f3f4;

    margin-top: 60px;

    margin-bottom: 60px;

    font-family: 'Titillium Web', sans-serif;

    align-items: center;

    justify-content: center;

    text-align: center;

}



.info h1{

    font-size: 30px;

    font-weight: 100;

    margin: 0;

}



.title {

    color: #162874;

    font-family: 'Titillium Web', sans-serif;

}



.img-presentation {

    position: relative;

    width: 100%;

    transform: scale(0.9);

    left: -5%;

}



.presentation {

    position: relative;

}



.presentation::after {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    background: #f3f3f4;

    height: 100%;

    width: 79%;

    z-index: -1;

}



.txt-presentation {

    align-items: center;

    justify-content: center;

    padding-right: 55px;

    text-align: justify;

}



.img-res {

    width: 100%;

    height: auto;

    display: block;

}



.swiper-pagination {

    position: relative;

    margin-top: 30px;

}



.swiper .swiper-wrapper h3 {

    margin: 0;

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    background: rgb(0,0,0);

    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);

    padding: 10px 20px;

    color: #fff;

    transition: all .2s;

}



.swiper .swiper-wrapper a:hover h3 {

    padding: 25px 20px;

}



.swiper-slide {

    position: relative;

}



.swiper-slide::after {

    content: "";

    background: url(../images/slider.svg) center center no-repeat ;

    width: 50px;

    height: 50px;

    display: block;

    position: absolute;

    right: 0;

    bottom: 0;

}



.swiper-slide {

    display: block;

    cursor: pointer;

}



.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {

    border: 1px solid #162874;

    opacity: 1;

    background-color: #fff;

}



.swiper-pagination-bullet-active {

    background-color: #162874 !important;

}



.logos .img-res{

    width: 100px;

    margin: auto;

    margin-bottom: 30px;

}



.all-logo {

    background: #f3f3f4;

    position: relative;

    padding-bottom: 30px;

}



.all-logo::before {

    position: absolute;

    content: "";

    background: #f3f3f4;

    top: -171px;

    left: 0;

    height: 177px;

    display: block;

    width: 100%;

}





/*--------------------------------------*\

	Footer

\*--------------------------------------*/

.footer-page {

    background-color: #231f20;

    padding-top: 60px;

    padding-bottom: 30px;

    color: #fff;

}



.footer-page hr {

    margin: 30px 0;

}



.newsletter {

    position: relative;

    width: 400px;

    margin-left: auto;

    margin-right: auto;

}



.newsletter input {

    display: block;

    background-color: #fff;

    border: 1px solid #fff;

    width: 100%;

    padding: 10px 20px;

    border-radius: 50px;

    transition: all .2s;

}



.newsletter input:focus {

    border: 1px solid #162874;

    box-shadow: 0 0 0 0.25rem rgb(22 40 116 / 25%);

}



.newsletter button {

    position: absolute;

    top: 2px;

    right: 2px;

    display: block;

    background: #162874 url(../images/newsletter.svg) center center no-repeat;

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 40px;

    background-size: 80%;

}



.social-info a {

    width: 40px;

    height: 40px;

    background-color: rgba(255, 255, 255, 0);

    display: block;

    border: 1px solid #fff;

    border-radius: 40px;

    margin: 0 10px;

    background-size: 50%;

    background-repeat: no-repeat;

    background-position: center;

    transition: all .2s;

}



.social-info a:hover {

    background-color: rgba(255, 255, 255, .2);

}



.social-info {

    justify-content: center;

}





/*--------------------------------------*\

	Responsive

\*--------------------------------------*/

@media only screen and (max-width : 750px) {

    .navigation-desktop-content {

        display: none;

    }



    .btn-mobile {

        text-align: center;

        line-height: 28px;

        width: 43px;

        height: 30px;

        background: transparent;

        border: solid 1px #231f20;

        position: relative;

        float: right;

        display: block;

    }



    .btn-mobile span {

        position: absolute;

        top: 50%;

        left: 50%;

        display: block;

        width: 22px;

        height: 2px;

        background-color: #231f20;

        transform: translateX(-50%) translateY(-50%);

        z-index: 2;

    }



    .btn-mobile span::before, .btn-mobile span::after {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        display: block;

        width: 22px;

        height: 2px;

        background-color: #231f20;

        transform: translateY(-6px);

        transition: transform 0.5s;

        transform-origin: 50% 50%;

    }



    .btn-mobile span::after {

        transform: translateY(6px);

    }



    .header-page .col-10, .header-page .col-90 {

        width: 50%;

    }



    .header-page .col-90 {

        display: flex;

        align-items: center;

        justify-content: flex-end;

        height: 88px;

    }



    .header-page .col-10 {

        display: flex;

        align-items: center;



    }



    .logo img {

        margin: 0;

    }



}



@media only screen and (max-width : 700px) {

    .presentation .col-50{

        width: 100%;

        padding-right: 0;

    }



    .presentation::after {

        display: none;

    }



    .img-presentation {

        transform: scale(1);

        position: static;

    }



    .txt-presentation {

        padding: 30px !important;

        background-color: #f3f3f4;

    }



    .presentation {

        flex-direction: column;

    }

}



@media only screen and (max-width : 600px) {

    .logos .col-25 {

        width: 50%

    }

}



@media only screen and (max-width : 450px) {

    .newsletter {

        width: 90%;

    }



    .footer-page hr + .flex.cols {

        flex-direction: column;

        align-items: center;

    }



    .footer-page .txt-right {

        margin-top: 10px;

    }



    .footer-page hr + .flex.cols .col-50 {

        text-align: center;

        width: 100%;

    }

}