body {
    font-family: 'Open Sans', sans-serif;
    color:#272727;
    position: relative;
    /*
    image-rendering: -moz-crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    */
}

.site-wrap {
    width: 100%;
}

h1 {
    font-weight: 300; letter-spacing: 0.06em;
    font-size: 24px; line-height: 35px;
}

h2 {
    padding-left: 0px; padding-right: 0px;
    font-weight: 300; letter-spacing: 0.06em;
    font-size: 30px;
    line-height: 35px;
}

h3 {
    margin: 20px 0px;
    font-weight: 300;
    font-size: 17px;
    line-height: 28px;
    color: #181818;
}

p, .multitexte li {
    font-weight: 300; letter-spacing: 0.008em;
    font-size: 15px;
    margin-bottom: 0px;
    color: #404040;
    line-height: 30px;
}

.multitexte {
    max-width: 400px;
}

.multitexte p {
    color: #5c5c5c;
}

.multitexte.multiwhite h2, .multitexte.multiwhite h3 {
    color: white;
}

.multitexte.multiwhite p, .multitexte.multiwhite li {
    color: #ebebeb;
}


nav {
    /*    height: 57px;*/
}

.ar-button {
    display: inline-block;
    /*    background-color: #2d649c;*/
    border-radius: 50px;
    /*    color: #384da5;*/
    color: white;
    padding: 9px 24px;
    transition: 0.1s;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    text-decoration: inherit;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.20);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4256a3+1,2c449e+100 */
    background: rgb(66,86,163); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(66,86,163,1) 1%, rgba(44,68,158,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(66,86,163,1) 1%,rgba(44,68,158,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(66,86,163,1) 1%,rgba(44,68,158,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4256a3', endColorstr='#2c449e',GradientType=0 ); /* IE6-9 */
}

.ar-button:first-letter {
    /*text-transform: capitalize !important;*/
}

.ar-button:hover {
    color: white;
    text-decoration: none;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5162a0+1,3f539b+100 */
    background: rgb(81,98,160); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(81,98,160,1) 1%, rgba(63,83,155,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(81,98,160,1) 1%,rgba(63,83,155,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(81,98,160,1) 1%,rgba(63,83,155,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5162a0', endColorstr='#3f539b',GradientType=0 ); /* IE6-9 */


}
.ar-button:active, .ar-button:focus {
    color: #8ba0fc;
    text-decoration: none;
    box-shadow: inherit;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#32499e+1,203c99+100 */
    background: rgb(50,73,158); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(50,73,158,1) 1%, rgba(32,60,153,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(50,73,158,1) 1%,rgba(32,60,153,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(50,73,158,1) 1%,rgba(32,60,153,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32499e', endColorstr='#203c99',GradientType=0 ); /* IE6-9 */

}


.ar-button-white {
    color: #1631a6;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#f7f7f7 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 );
}

.ar-button-white:hover {
    color: #1631a6;
    text-decoration: none;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,eaeaea+100 */
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(234,234,234,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */

}
.ar-button-white:active, .ar-button-white:focus {
    color: #8ba0fc;
    text-decoration: none;
    box-shadow: inherit;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#f7f7f7 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 );
}

a:focus {
    outline: none;
}

.ar-link {
    color: #2d649c;
    font-size: 16px;
    letter-spacing: 0.03em; 
    line-height: 26px;
    font-weight: 300;
}

.ar-link img{
    margin-left: 10px !important;
    width: 6px !important;
    vertical-align: middle;
}

.ar-link:hover {
    transition-duration: 0.3s;
    opacity: 0.7;
    color: #2d649c; 
}
.ar-link:active {
    transition-duration: 0.3s;
    opacity: 1;
    color: #1d3f62; 
}

.noselect {
    -webkit-user-select: none;
    -moz-user-select: none;   
    -ms-user-select: none;      
    user-select: none;  
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* Colors */

/* main blue : #2d649c */

/* Remove margins and padding from the list, and add a black background color */
.nav-block-top {
    margin-top: 55px;
}

ul.topnav {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: 0.3s;
}
ul.topnav.nav-white {
    background-color: rgba(255, 255, 255, 0.975);
    border-bottom: inherit;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);
}


/* Float the list items side by side */
ul.topnav li {float: left; list-style: none;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 19px 16px 19px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 10px;
    border-bottom: 2px solid rgba(45, 100, 156, 0);
    text-transform: uppercase; font-weight: 400; color: #484848;
    letter-spacing: 1px;
}
ul.topnav li a.nav-different {
    text-transform: none;
}

/* Change background color of links on hover */
ul.topnav li a:hover {border-bottom: 2px solid #2d649c;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */

ul.topnav li a:active {background-color: rgba(45, 100, 156, 0.12);}
ul.topnav li .nav-different:active { background-color: transparent !important; }

ul.topnav li .active {
    border-bottom: 2px solid rgb(45, 100, 156);
    font-weight: 600;
}

.topnav .nav-ar-logo a{
    padding: 17px 16px 16px 16px;
    display: block;
    float: left;
    border-bottom: none !important;
}

.topnav .nav-ar-logo a img{
    width: 145px;
}

.topnav .login-btn a{
    padding: 17px 16px 17px 16px;
    border-bottom: inherit;
}

.topnav .login-btn a:hover {
    border-bottom: 0px;
}

.topnav .nav-ar-button {
    display: inline;
}

.topnav.responsive .nav-links {
    float: none;
}

.topnav.responsive .nav-links .nav-right-links ul {
    margin-left: 0;
}

.topnav .icon img{
    width: 16px; margin-left: 10px;
}

.transparent-layout {
    display: none;
    position: fixed;
    z-index: 90;
    width: 100%; height: 100%;
    cursor: pointer;
}

.nav-dropbtn {
    color: black;
    padding: 20px 16px 19px 16px;
    font-size: 13px;
    font-weight: 300;
    border: none;
    cursor: pointer;
    background-color: inherit;
}
.nav-dropbtn:hover {
    background-color: inherit;
}
.nav-dropbtn:focus {
    background-color: inherit;
}

/* The container <div> - needed to position the dropdown content */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.nav-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 150px;
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.1);
}

/* Links inside the dropdown */
.nav-dropdown-content a {
    color: black;
    width: 100%;
    padding: 9px 16px;
    text-decoration: none;
    display: block;
    text-align: left !important;
}

/* Change color of dropdown links on hover */
.nav-dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.nav-dropdown:hover .nav-dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.nav-dropdown:hover .nav-dropbtn {
    background-color: inherit;
}
.nav-dropdown:focus .nav-dropbtn {
    background-color: inherit;
}
.nav-dropdown:active .nav-dropbtn {
    background-color: inherit;
}



.header-menu {
    position: absolute;
    display: none;
    z-index: 10;
}

.content-menu {
    position: relative;
    width: 340px;
    background-color: #f8f8f8;
    height: 190px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
}

.content-menu:before {
    position: absolute;
    content: '';
    top: calc(50% - 42px);
    left: calc(50%);
    width: 1px;
    height: 84px;
    background: #d3d3d3;
}

.content-menu a {
    display: inline-block;
    width: 50%;
    float: left;
    height: 190px;
}
.content-menu a:hover {
    border-bottom: inherit;
}

.content-menu a img{
    width: 90px; height: 90px;
    border-radius: 150px;
    margin-top: 10px;
    margin-bottom: 20px;
}

#li-pricing:hover .header-menu {
    display: block;
}
ul.topnav li#li-pricing {
    width: 340px;
}



/* contact */

.page-template-contact .main-header h1 {
    max-width: 750px;
}

.page-template-contact h2 {
    font-size: 16px;
    text-transform: uppercase;
    color: rgba(12, 12, 12, 0.85);
    font-weight: 400;
}

.contact-coord {
    background: rgb(253,250,249);
    background: -moz-linear-gradient(left,  rgba(253,250,249,1) 0%, rgba(245,248,250,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(253,250,249,1) 0%,rgba(245,248,250,1) 100%);
    background: linear-gradient(to right,  rgba(253,250,249,1) 0%,rgba(245,248,250,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfaf9', endColorstr='#f5f8fa',GradientType=1 );
    text-align: center;
    padding: 32px 10px;
    margin-top: 10px;
}

.contact-coord-title {
    margin: 0px;
    padding-bottom: 2px;
    font-size: 17px;
    font-weight: 400;
}

.contact-coord p {
    font-size: 18px;
    line-height: 35px;
}

.contact-form {
    padding: 0px 3%;
}

.contact-office {
    margin-top: 20px;
    margin-bottom: 30px;
}

.contact-form .ar-button {
    margin-top: 40px;
    margin-bottom: 30px;
    font-size: 13px;
    letter-spacing: 0.06em;
    float: right;
    text-transform: inherit;
    padding: 11px 26px;
    height: inherit;
}

.wpcf7-tel {
    width: 100% !important;
}

.contact-form input, .contact-form textarea {
    margin-top: 20px;
    height: 50px;
    background-color: inherit;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: black;
    text-indent: 10px;
}

.contact-form input.ar-input-captcha {
    margin-top: 5px;
    height: 55px;
    background-color: inherit;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: black;
    text-indent: 10px;
}

.contact-form textarea {
    height: 200px;
}

form p input[type=submit] {
    color: white !important;;
    font-size: 13px !important;;
    font-weight: 400 !important;
    text-indent: 0px !important;
}

/* 404 */
#error-404 {
    box-shadow: inherit;
    margin-bottom: inherit;
    margin-left: inherit;
    margin-right: inherit;
    margin-top: 100px;
}

@media screen and (max-width:1100px) {
    ul.topnav li#li-pricing {
        width: 200px;
    }
}

@media screen and (max-width:990px) {
    .multitexte {
        float: inherit;
        margin: 0 auto;
        text-align: center;
        padding: 50px 20px 50px 20px;
    }
    ul.topnav li#li-pricing {
        width: 100px;
    }
    .contact-coord {
        padding: 20px 0px;
        margin: 20px 20px;
    }
    .page-template-contact .contact-form {
        padding: 20px 20px;
    }
}


@media screen and (max-width:880px) {
    ul.topnav li a {
        letter-spacing: 0px;
    }
    ul.topnav li#li-pricing {
        width: auto;
    }
}

@media screen and (min-width:768px) {
    .nav-dropdown-li {
        position: absolute;
        display: inline-block;
        top: 50px; left: 0;
    }
    .topnav .nav-links {
        float: inherit !important;
    }
    .topnav .nav-right-links {
        float: right;
    }
}

@media screen and (max-width:768px) {
    ul.topnav li a {
        letter-spacing: 1px;
    }
    ul.topnav li {display: none;}
    ul.topnav .nav-ar-logo, ul.topnav .nav-dropdown-li {display: inline-block;}
    ul.topnav.responsive .nav-different {
        display: inline-block;
    }
    ul.topnav.responsive .nav-ar-logo a{
        margin-right: -4px;
    }
    ul.topnav.responsive .nav-ar-logo a img{
        margin-top: -8px;
    }
    ul.topnav li.icon {
        float: right;
        display: inline-block;
    }
    .ar-link {
        color: #2d649c;
        font-size: 14px;
        letter-spacing: 0.00em; 
        line-height: 22px;
        max-width: 130px;
    }
    .ar-link img{
        margin-left: 8px;
        width: 5px;
        vertical-align: middle;
    }
    .topnav .nav-links ul {
        margin-left: 0px !important;
    }
    .topnav .nav-links, .topnav .nav-links a {
        text-align: center !important;
    }

    ul.topnav li .active {border-bottom: 2px solid rgba(45, 100, 156, 0); }
    ul.topnav li a:hover {border-bottom: 2px solid rgba(45, 100, 156, 0);}
    #li-pricing:hover .header-menu {display: none;}
}

@media screen and (max-width:400px) {
    h1 {
        font-size: 18px !important;
        line-height: 28px !important;
    }
    h2 {
        font-size: 18px !important;
        line-height: 32px !important;
        font-weight: 400;
        padding-right: 0px; padding-left: 0px;
    }
    h3 {
        font-weight: 400; letter-spacing: 0.01em;
        font-size: 13px;
        line-height: 20px;
    }
    p {
        font-weight: 300; letter-spacing: 0.008em;
        font-size: 13px !important;
        margin-bottom: inherit;
        color: #404040;
        line-height: 25px;
    }
    .multitexte {
        display: block;
        float: inherit;
        margin: 0 auto;
        text-align: left !important
    }
}

@media screen and (max-width:768px) {
    ul.topnav.responsive {position: fixed; top: 0; background-color: white; padding-bottom: 15px;}
    ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    ul.topnav.responsive li {
        float: none;
        display: inline;
    }
    ul.topnav.responsive li a {
        display: block;
        text-align: left;
    }
    .topnav .nav-ar-logo a{
        float: inherit;
    }
    .transparent-layout.opened-menu {
        display: block;
    }
}

.topnav .nav-links {
    display: inline;
    float: right;
}

.topnav .nav-links {
    display: inline;
    float: right;
}

@media screen and (max-width:550px) {
    h1 {
        font-size: 22px !important;
        line-height: 34px !important;
    }
}

@media screen and (max-width:400px) {
    .topnav .nav-ar-logo a img {
        width: 120px;
    }
}