@color_1: #15486a; @color_2: #262626; @color_3: #ffffff; @color_4: #555555; @color_5: #FFFFFF; @color_6: #959595; @color_7: rgba(255, 255, 255, 0.4); @color_8: #d1d1d1; @font_family_1: 'Montserrat', sans-serif; @font_family_2: 'Raleway', sans-serif; @background_color_1: #FFFFFF; @background_color_2: #F5F5F5; @background_color_3: #15486a; @background_color_4: transparent; @background_color_5: #219acf; @background_color_6: #066694; @background_color_7: #0f87c1; @background_color_8: #339bcd; @background_color_9: #55aed9; @background_color_10: #ffffff; @background_color_11: #f1eee9; @background_color_12: #fbfaf8; @background_color_13: #329bcd; @background_color_14: #111111; @border_color_1: #15486a transparent; @border_left_color_1: #000; /**************************************************** 1. BASICS 3. HEADER 4. PRODUCTS 5. FEATURES 6. HOW 7. STEPS 8. FOOTER 9. FORM.HTML 10. BASIC.HTML *****************************************************/ /* 1. BASICS */ /* 3. HEADER */ /*! * Dropdownhover v1.0.0 (http://bs-dropdownhover.kybarg.com) */ /* 4. PRODUCTS */ /*.owl-centered .owl-wrapper { display: table !important; } .owl-centered .owl-item { display: table-cell; float: none; vertical-align: middle; } .owl-centered .owl-item > div { text-align: center; }*/ /* 5. FEATURES */ /* 6. HOW */ /* 7. STEPS */ /* 8. FOOTER */ /*9. FORM.HTML */ /*10. BASIC.HTML */ #confrontare { background-image: url("/img/sites_v4/background.png"); width: 100%; height: 632px; z-index: 281; } #page_not_found { background-image: url("/img/sites_v4/il-comparatore.com/bg-404-IT.png"); height: 90vh; color: #15486a; background-size: cover; } #result-sms { background-image: url('/img/sites_v4/il-comparatore.com/formulaires/cessione_del_quinto.png'); background-size: cover; min-height: 85vh; height: auto; background-position-x: 15%; } @media screen and (min-width: 1025px) and (max-width: 1199px) { #page_not_found { background-position-x: 30%; background-repeat: no-repeat; background-image: url(/img/sites_v4/il-comparatore.com/page404-mobile.jpg); background-position-y: 75%; } } @media screen and (max-width: 1024px) and (min-height: 1300px) { #page_not_found { background-image: url("/img/sites_v4/il-comparatore.com/page404-mobile.jpg"); background-position-y: 70%; } } @media screen and (max-width: 1023px) { #page_not_found { background-position-x: 30%; background-repeat: no-repeat; background-image: url("/img/sites_v4/il-comparatore.com/page404-ipad-IT.jpg"); background-position-y: 75%; } } @media screen and (max-width: 767px) { #page_not_found { background-image: url("/img/sites_v4/il-comparatore.com/page404-mobile.jpg"); background-size: cover; background-position-x: 30%; background-position-y: 17%; } } .bg-avis { background-image: url("/img/sites_v4/bg-avis.png"); height: 70%; background-repeat: no-repeat; width: 100%; top: 0; } .mark-star, .mark-star-empty { display: inline-block; width: 23px; height: 22px; background-image: url(/img/sites_v4/star_jaune.png) } @import url("new_common_sites.less"); // -------------------- // New // -------------------- body { background-color: #fff; font-size: 16px; } h1, h2, h3, h4 { font-family: 'Raleway', sans-serif; } p { line-height: 1.5; } // Menu .navbar > .container { position: relative; } .navbar-nav li a { color: #333333; font-weight: 600; } .navbar-header { min-height: 59px; } .dropdown-menu > li > a { color: #e81123; } .navbar-nav > li > .dropdown-menu { border-color: #e81123; } .navbar-nav > .open:before { border-color: #e81123 transparent; } .dropdown-menu > li > a:hover { background-color: #e81123; } .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: none; } .navbar.navbar-scroll { background-color: rgba(255, 255, 255, 1); transition: all .5s ease; box-shadow: 0px 5px 9px 3px rgba(0, 0, 0, 0.05); } .nav-compare { opacity: 0; list-style-type: none; } .navbar .navbar-nav, .navbar .nav-compare { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .navbar.navbar-scroll .nav-compare { animation-name: fadeInRight; z-index: 1; } @media (min-width: 1025px) { .header-btn { .navbar.navbar-scroll .nav { -webkit-animation-name: fadeOutLeftCustom; animation-name: fadeOutLeftCustom; } } .nav-compare { display: block; position: absolute; top: 27px; right: 0; opacity: 0; z-index: -1; } } @-webkit-keyframes fadeOutLeftCustom { from { opacity: 1; } to { opacity: 0; transform: translate3d(-70%, 0, 0); } } @keyframes fadeOutLeftCustom { from { opacity: 1; } to { opacity: 0; transform: translate3d(-70%, 0, 0); } } // Util .row.is-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .row.is-flex > [class*='col-'] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .btn { transition: all .5s ease; .fas { margin-right: 10px; } } .btn-red { font-family: "Raleway", sans-serif; font-weight: bold !important; padding: 15px 30px !important; line-height: 1 !important; background-color: #e81123; color: #fff !important; text-transform: uppercase; } .btn-secondary { width: 170px; border: 1px solid #fff; color: #fff; border-radius: 24.5px; padding: 15px 20px; text-transform: uppercase; &:hover { color: #333; background-color: #fff; } } .btn-je-compare { border-radius: 40px; background-color: #fff; border: 1px solid #fff; color: #e81123; font-size: 30px; font-family: 'Raleway', sans-serif; font-weight: bold; padding: 20px 60px; text-transform: uppercase; &:hover { color: #fff; background-color: transparent; border-color: #fff; } } .overlay-black { background-color: #333333; opacity: 0.8; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } // Util * Select .select-hidden { display: none; visibility: hidden; padding-right: 10px; } .select { cursor: pointer; display: inline-block; position: relative; font-size: 16px; color: #fff; width: 364px; height: 80px; vertical-align: top; margin-right: 30px; } .select-styled { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: transparent; border: 1px solid #fff; transition: all 0.2s ease-in; vertical-align: top; text-transform: uppercase; margin: 0; font-size: 18px; border-radius: 40px; padding: 28px 0 28px 30px; text-align: left; &:after { content:""; width: 0; height: 0; border: 7px solid transparent; border-color: #fff transparent transparent transparent; position: absolute; top: 35px; right: 25px; } &:hover { text-decoration: underline; } &:active, &.active { background-color: #e81123; color: #fff; &:after { top: 25px; border-color: transparent transparent #fff transparent; } } } .select-options { display: none; position: absolute; top: 100%; right: 0; left: 0; z-index: 999; margin: 0; padding: 0; list-style: none; color: #e81123; background-color: #fff; margin-top: 20px; li { margin: 0; padding: 12px 0 12px 15px; text-indent: 15px; transition: all 0.15s ease-in; text-align: left; text-transform: uppercase; border-bottom: 1px solid #e81123; &:hover { text-decoration: underline; } &[rel="hide"] { display: none; } } } // Home * Header #homepage .header-title { color: #333; margin-bottom: 40px; font-size: 60px; } #homepage .header-title-small { color: #e81123;; font-weight: 900; line-height: 1; } .header-text { padding: 0; list-style: none; color: #333333; } .header-text li { margin-bottom: 20px; font-weight: 500; position: relative; margin-left: 30px; } .header-text li .icon-home { position: absolute; left: -30px; } .icon-home { display: inline-flex; align-items: center; justify-content: center; background-color: #8bc34a; border-radius: 50%; font-size: 12px; height: 20px; width: 20px; margin-right: 5px; .fas { color: #fff; } } .blue-product { background-color: #a90f03; } .blue-product.light { background-color: #d81d0f; } .blue-product.light-1 { background-color: #f44436; } .blue-product.light-2 { background-color: #ff685c; } #homepage { height: 869px; background-image: url("https://www.devisprox.com/img/sites_v4/ma-solution-comptable/header_img.jpg"); background-repeat: no-repeat; position: relative; background-size: cover; background-position: center; } #products { background-color: #e81123; position: absolute; bottom: 0; left: 0; width: 100%; height: auto; } .product { margin-top: -120px; position: static; } .header-content { position: static !important; display: flex; height: 85% !important; align-items: center; transform: none !important; width: auto; } .navbar-toggle .icon-bar { background-color: #333; } .home-block { padding: 100px 0; h2 { font-family: Raleway, sans-serif; margin-bottom: 45px; font-size: 32px; font-weight: bold; span.reverse { color: #333333; } span { display: block; color: #e81123; margin-bottom: 10px; font-size: 24px; font-weight: 700; } } } // Home * Role #home-role { background-color: #f8f8f8; color: #333; h2 { margin-top: 40px; } p { font-weight: 500; } .home-role-block-img { text-align: right; } img { max-width: 504px; width: 100%; display: inline-block; } } .header-form { color: #333; } // Home * Lists { #home-lists { h2 { color: #f44436; margin-bottom: 90px ; } .home-lists-block { margin-bottom: 70px; &:nth-last-child(1) { margin-bottom: 0; } } h3 { font-family: Raleway, sans-serif; font-size: 16px; font-weight: bold; } p { font-size: 16px; font-weight: 400; } .home-lists-block-img { justify-content: center; img { width: 100%; } } .icon-home { background-color: #e81123; .fas { color: #fff; } } } #home-comparer { position: relative; text-align: center; background-image: url("/img/sites_v4/ma-solution-comptable/fond_CCM.jpg"); background-attachment: fixed; color: #fff; .container { position: relative; } h2 { text-transform: uppercase; margin-bottom: 30px; &:after { content: ''; height: 5px; width: 124px; background-color: red; display: block; margin: 20px auto 0; } } p { margin-bottom: 60px; } .btn { margin-right: 15px; } } #home-engagements { text-align: center; h2 { color: #f44436; margin-bottom: 90px ; } .home-engagement-item { padding-bottom: 50px; } .home-engagement-item:after { content: ""; position: absolute; left: 50%; bottom: 0; width: 70px; height: 3px; background-color: #f1eee9; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .icon-home { font-size: 1.5em; width: 80px; height: 80px; background-color: #e81123; box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .2); margin-bottom: 30px; .fas { color: #fff; } } h3 { font-size: 20px; font-family: 'Montserrat', sans-serif; } p { line-height: 1.875; font-size: 16px; font-weight: 400; color: #626262; } } #home-projet { background-color: #e81123; text-align: center; h2 { margin-top: 0; color: #fff; text-transform: uppercase; } .btn { height: 80px; width: 364px; } } #page_not_found { background-image: url(/img/sites_v4/ma-solution-comptable/bg-404.jpg); .header-title { font-size: 48px; line-height: 1; color: #333333; .header-title-small { display: inline-block; font-weight: 800; color: #e81122; line-height: 1; } } } // home transit { #homepage-transit { height: 820px; background-size: initial; .transit-title-small{ display: inline-block; font-weight: 800; color: #e81122; line-height: 1; } .transit-title { color: #333333; } #accroche_transit li { font-size: 18px; font-weight: 500; } .header-text li { margin-bottom: 10px; } .confrontare_button { background-color: #e81123; width: 90%; color: #fff; } .transit-button { padding: 15px; margin: 15px auto; float: none; display: block; } .div_home_cta { margin-top: 70px; display: inline-block; margin-left: auto; margin-right: auto; box-shadow: 0px 20px 40px 0 rgba(0, 0, 0, 0.15); background-color: white; } } .comment-title, .comment-content { z-index: 200; } .section-article-page article { margin-bottom: 50px; } #transit-partenaire { background-color: #e81123; .single-product-logo { padding-bottom: 60px; padding-top: 60px; } } #chiffre_cle { background-color: #e81123; min-height: 240px; position: relative; } .content { position: absolute; bottom:0; text-align: center; left: 50%; transform: translate(-50%, -50%); overflow: hidden; width: 100%; font-size: 35px; line-height: 40px; color: #ecf0f1; } .content__container { display: inline-block; font-weight: 700; overflow: hidden; height: 38px; padding-left: 8px; } .content__container__text { display: inline; margin: 0; line-height: 40px; font-size: 36px; font-weight: 700; color: #fff; } .content__container__list { margin-top: 0; padding-left: 0px; text-align: center; list-style: none; color: #fff; -webkit-animation-name: change; -webkit-animation-duration: 7s; -webkit-animation-iteration-count: infinite; animation-name: change; animation-duration: 7s; animation-iteration-count: infinite; } .content__container__list__item { line-height: 50px; margin: 0; } @-webkit-keyframes change { 0%, 21%, 100% {transform:translate3d(0,0,0);} 25%, 46% {transform:translate3d(0,-25%,0);} 50%,71% {transform:translate3d(0,-50%,0);} 75%,96% {transform:translate3d(0,-25%,0);} } @-o-keyframes change { 0%, 21%, 100% {transform:translate3d(0,0,0);} 25%, 46% {transform:translate3d(0,-25%,0);} 50%,71% {transform:translate3d(0,-50%,0);} 75%,96% {transform:translate3d(0,-25%,0);} } @-moz-keyframes change { 0%, 21%, 100% {transform:translate3d(0,0,0);} 25%, 46% {transform:translate3d(0,-25%,0);} 50%,71% {transform:translate3d(0,-50%,0);} 75%,96% {transform:translate3d(0,-25%,0);} } @keyframes change { 0%, 21%, 100% {transform:translate3d(0,0,0);} 25%, 46% {transform:translate3d(0,-25%,0);} 50%,71% {transform:translate3d(0,-50%,0);} 75%,96% {transform:translate3d(0,-25%,0);} } #transit-bloc-text { padding: 100px 0; .news_last:first-child { margin-bottom: 50px; margin-top: 0; } .news_last:last-child { margin-bottom: 0; margin-top: 0; } .comment-title { font-size: 30px; font-weight: 600; color: #333333; } .comment_title_underline { border-bottom: 5px solid #333333; } } #transit-avantages-produit { padding: 100px 0; .news_last:first-child { margin-bottom: 50px; margin-top: 0; } .news_last:last-child { margin-bottom: 0; margin-top: 0; } h2 { font-size: 28px; font-weight: 600; color: #333333; } h3 { font-size: 24px; font-weight: 600; color: #e3002a; margin-bottom: 30px; } p { font-weight: 500; } .comment_title_underline { border-bottom: 5px solid #333333; } .notre-conseil { margin-top: 50px; } } #transit-news { padding: 100px 0 ; background-color: #f8f8f8; h2 { font-size: 30px; font-weight: 600; color: #333333; } .comment_title_underline { border-bottom: 5px solid #333333; } } .footer-infos { background-color: #333333; padding-bottom: 100px; p{ margin-bottom: 10px; color: #fff; } .footer-list > li { padding-top: 0; padding-bottom: 20px; } } #copyright { padding: 42px; background-color: #111111; color: #959595; font-size: 14px; text-align: center; span { color:#fff; } a{ color: #329bcd; } } .no-padding { padding: 0; } .btn-expert-comptable { background-color: #a90f03; color: #fff; } .btn-cession-transmission-entreprise{ background-color:#333333; color: #fff; &:hover { color: #fff; } } .btn-gestion-paie{ background-color: #d81d0f; color: #fff; &:hover { color: #fff; } } .btn-creation-entreprise{ background-color: #ff685c; color: #fff; &:hover { color: #fff; } } // Page articles #basicpage { background-color: #e81123; font-family: "Montserrat", Sans-Serif; .overlay-full-grey { height:758px; background-image: url('/img/sites_v4/ma-solution-comptable/fond_article.jpg') } .article_accroche { margin-top: 30px; margin-bottom: 20px; font-size: 32px; text-align: left; font-family: Montserrat; font-weight: bold; line-height: 1; letter-spacing: normal; color: #2d261c; } .link_articles_par_theme { font-family: "Montserrat"; font-weight: 600; font-size: 14px; color: #000; padding-left: 10px; display: inline-block; line-height: 1.33; } .bloc_a_ne_pas_manquer { margin-top: 0; } .box_article_par_theme { padding: 30px 0; } .margin-top-40 { margin-top: 40px; line-height: 2.22; } .compteur-article { font-family: Quicksand; font-size: 16px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1.5; width: 50px; letter-spacing: normal; text-align: center; color: #fff; } .first-img-text-article { position: absolute; top: 60%; z-index: 1; left: 5%; } .div_img_first_article:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, transparent 0%, #3c3b3c 100%); } .article_les_plus_lus { margin-top: 50px; font-size: 24px; margin-bottom: 50px; font-weight: bold; line-height: 1; } .titre_article { display: block; } .bg-article-width { min-height: 100vh; } .title-first-article{ font-size: 30px; color: #fff; } .float-left { float: left; } .btn-article { border-radius: 40px; background-color: #e81123; border: 1px solid #fff; color: #FFF; font-size: 30px; font-family: 'Raleway', sans-serif; font-weight: bold; padding: 20px 60px; text-transform: uppercase; height: 80px; width: 364px; margin-top: 100px; margin-bottom: 100px; &:hover { color: #e81123; background-color: transparent; border-color: #e81123; } } } .edito_resultat { font-weight: 500; text-align: center; h2 { font-weight: 800; line-height: 1; font-size: 30px; color: #333333; margin-bottom: 20px; margin-top: 20px; } p { margin-bottom: 0; } a { color: #e81123; } } #basic-content { padding: 80px 0 !important; } #news { background-color: #f8f8f8; .actus-bloc-img{ width: 100%!important; } .news-img { margin-bottom: 15px; } .news_last:nth-last-child(2) { margin-left: 0; } .text-summary-guide { font-weight: 500; } h2 { font-size: 30px; font-weight: 600; color: #333333; } .comment_title_underline { border-bottom: 5px solid #333; } .news-a { line-height: 1; font-size: 18px; color: #e81123; font-weight: 700; } p { font-size: 14px; } .news-button{ border-color: #e81123; color: #fff; background-color: #e81123; } .news-button:hover{ background-color: #fff; color: #e81123!important; } } .overlay-grey { background-color: rgba(255, 255, 255, 0.7); } // Media @media screen and (max-height: 800px) and (min-width: 1024px) { .title-text { position: static; } .nav > li > a:hover { text-decoration: none; background-color: transparent; } #collapse-menu .collapse ul .dropdown-menu li { border-bottom: 1px solid #fff; a:before { background-color: initial; } } // //#collapse-menu .collapse ul li.open .dropdown-toggle { // background-color: #d81d0f; // border-bottom: 1px solid #d81d0f; //} #menu-close { background-color: #a90f03; } } @media (max-width: 1024px) { .nav-compare { position: fixed; bottom: 0; left: 0; padding: 0; width: 100%; .btn-red { width: 100%; border: 5px solid #fff; font-size: 18px; } } .row.is-flex { -ms-flex-wrap: wrap; flex-wrap: wrap; } .page_404_header_bloc { text-align: center; position: static; } #page_not_found { background-image: url(/img/sites_v4/ma-solution-comptable/bg-404-mobile.jpg); h1 { margin-bottom: 10px; } } #homepage-transit .transit-header-content .header-title { margin-top: 180px; margin-bottom: 30px; } #menu-close { background-color: #a90f03; } } .box-shadow-bloc { margin: 100px 0; } @media (max-width: 767px) { .mobile-hidden { display: none; } .box-shadow-bloc { margin: 50px 0; } .section-article-page article { margin-bottom: 0; } #basicpage .overlay-full-grey { background-image: url('/img/sites_v4/ma-solution-comptable/fond_article_mobile.jpg') } #basicpage .btn-article { width: auto; } #homepage { background-image: none; height: auto; .header-content { background-image: url("/img/sites_v4/ma-solution-comptable/visuel_home_mobile.jpg"); background-position: top; } .header-title { margin-top: 30px; font-size: 35px; margin-left: 25px; } } #transit-news { h2 { font-size: 28px; } } #products { position: relative; } #collapse-menu .collapse { background-color: #f44436; } #collapse-menu .collapse ul .dropdown-menu li { border-bottom: 1px solid #fff; a:before { background-color: initial; } } #collapse-menu .collapse ul li.open .dropdown-toggle { background-color: #d81d0f; border-bottom: 1px solid #d81d0f; } #menu-close { background-color: #a90f03; } #transit-avantages-produit { padding: 50px 0; } .home-block { padding: 40px 0; h2 { margin-top: 0; } } .header-content { padding-top: 80px; height: auto !important; } #home-lists .home-lists-block { text-align: center; margin-bottom: 20px; } #home-projet .btn { width: 100%; } #home-lists h2 { margin-bottom: 40px; } .select { width: 100%; margin-bottom: 10px; } .select-styled { margin: 0; } #home-lists .home-lists-block-img img { margin: 50px 0; } #home-comparer { .btn { margin-bottom: 10px; } p { margin-bottom: 40px; } } #home-engagements h2 { margin-bottom: 40px; } #homepage-transit { height: auto; } #basicpage { .first-img-text-article{ top: 45%; } .title-first-article { font-size: 16px; } } #homepage-transit { background-color: #fff; .transit-title { font-size: 30px; } .div_home_cta { margin-bottom: 30px; margin-top: 0; } } .logo-menu { position: absolute; left: 50%; top: 50%; text-align: center; margin: auto; transform: translate(-50%, -50%); width: auto; max-height: 40px } #news { padding-top: 50px; .news_last:nth-last-child(2){ margin-left: 8.33333333%; } } .footer-infos { padding-bottom: 50px; } .div_img_foot { text-align: center; padding-top: 75px; padding-bottom: 50px; } .toggle-foot { color: #fff; } a:hover, a:focus { color: #e81122; } #chiffre_cle { span { font-size: 45px; } .item-1, .item-2, .item-3 { position: absolute; padding: 0; line-height: 1.4; animation-duration: 10s; font-size: 24px; } } #basic-content { padding: 0 0 20px !important; } .edito_resultat { h2 { margin-bottom: 20px; font-size: 20px; } } } @import url(https://fonts.googleapis.com/css?family=Open+Sans:600); .item-1, .item-2, .item-3 { position: absolute; top: 50%; display: block; margin: 0; transform: translate(-25%, -50%); font-family: "Monserrat", Sans-Serif; font-weight: 600; width: 100%; text-align: center; color: #fff; font-size: 2em; animation-duration: 10s; text-transform: uppercase; animation-timing-function: ease-in-out; animation-iteration-count: infinite; span { display: block; } } #waitingpage .overlay-full-grey { background: none; } .item-1{ animation-name: anim-1; } .item-2{ animation-name: anim-2; } .item-3{ animation-name: anim-3; } @keyframes anim-1 { 0%, 8.3% { left: -100%; opacity: 0; } 8.3%,25% { left: 25%; opacity: 1; } 33.33%, 100% { left: 110%; opacity: 0; } } @keyframes anim-2 { 0%, 33.33% { left: -100%; opacity: 0; } 41.63%, 58.29% { left: 25%; opacity: 1; } 66.66%, 100% { left: 110%; opacity: 0; } } @keyframes anim-3 { 0%, 66.66% { left: -100%; opacity: 0; } 74.96%, 91.62% { left: 25%; opacity: 1; } 100% { left: 110%; opacity: 0; } } @media (min-width: 768px) { .navbar-nav > li > a { padding: 25px 15px; } } @media (max-width: 1024px) { #collapse-menu .collapse { background-color: #f44436; overflow: visible; } #collapse-menu .collapse ul li.open .dropdown-toggle { background-color: #d81d0f; border-bottom: 1px solid #d81d0f; } #collapse-menu .collapse ul .dropdown-menu li { border-bottom: 1px solid #fff; a:before { background-color: initial; } } }