// vim: set syntax=css: // vim: set foldmethod=marker: @imgUrl: '/site/nexion_fr_webprofessional_it/skins/501/skin_files/images/'; @mainColor: #006462; @bodyColor:#121213; @titlesColor:#7c7c7c; @font-face { font-family: OpenSansRegular; src: url(../fonts/OpenSans-Regular.ttf); } @font-face { font-family: OpenSansMedium; src: url(../fonts/OpenSans-Bold.ttf); } @font-face { font-family: OpenSansBold; src: url(../fonts/OpenSans-Bold.ttf); } @font-face { font-family: MyriadProRegular; src: url(../fonts/MyriadPro-Regular.otf); } @font-face { font-family: MyriadProSemibold; src: url(../fonts/MyriadPro-Semibold.otf); } @font-face { font-family: MyriadProBold; src: url(../fonts/MyriadPro-Bold.otf); } @font-face { font-family: MyriadProItalic; src: url(../fonts/MyriadPro-It.otf); } @font-face { font-family: Montserrat-Regular; src: url(../fonts/Montserrat-Regular.ttf); } label{ font-family: OpenSansRegular; } .transparency(@opacity:50) { zoom: 1; filter: alpha(opacity=@opacity); opacity: @opacity/100; -moz-opacity: @opacity/100; } b,strong{ font-family: OpenSansBold; } body{ color:@bodyColor; font-family:OpenSansRegular; font-size:18px; } .centerContent{ font-size:18px; padding:0!important; color:#777; } .centerContent b{ color:@mainColor; } #pageType_CMS, #pageType_ECOMM{ padding-left:194px; overflow:hidden; } /*{{{ SIDE MENU */ .sideMenu{ padding:20px 10px 20px 0; } .sideMenu ul li{ font-size:15px; } /*}}}*/ /*{{{ TOP MENU MOBILE*/ #mobileMenuContainer h3{visibility:hidden;} ul.slimmenu li { background-color:#F0F0F8; } ul.slimmenu > li > ul > li { background-color:#ccc; } ul.slimmenu > li > ul > li > ul > li{ background-color:#bbb; } .sideMenu ul li a.active, .sideMenu ul li a:hover{ color:#E62113; } ul.slimmenu li a, ul.slimmenu li ul li a { color:#mainColor; } ul.slimmenu span.sub-collapser i { color:#fff; } ul.slimmenu li a:hover,ul.slimmenu > li.active > a { color:#fff; background-color: #abaaaa; } div.menu-collapser{ background-color:#E53517; } div.collapse-button { background-color: #520e0d !important; right:16px!important; } /*}}}*/ /*{{{ TOP MENU */ #myslidemenu{ position:absolute; left:624px; bottom:10px; } #myslidemenu > ul {font-family:MyriadProSemibold;font-size:14px;} #myslidemenu > ul a, #myslidemenu > ul a:hover, #myslidemenu > ul a:focus{color: @bodyColor;} #myslidemenu > ul > li > a span {color: #fff;font-weight: bold;text-transform:uppercase; } #myslidemenu > ul > li:hover {} #myslidemenu > ul > li.inPath a > b {color:@bodyColor;} #myslidemenu > ul > li:hover a > b {color:@bodyColor;} #myslidemenu > ul > li.inPath > a span {border-bottom:4px solid #e9c46a;color:#e9c46a;} #myslidemenu > ul > li:hover > a span {border-bottom:4px solid #e9c46a;color:#e9c46a;} /*}}}*/ /*{{{ HEADER */ .bgContent { /* remove the statement below to make header relative instead of fixed */ margin-top:95px; background-color:#fff; } .bgHeader{ background-color:#fff; padding:0; /* remove the statement below to make header relative instead of fixed */ position:fixed;width:100%;margin-top:-95px;z-index:50; } #siteHeader{ height:95px; background-color:@mainColor; position:relative; } .topLinksContainer,.mobileTopLinksContainer{ position:absolute; left:404px; bottom:12px; width:116px; height:31px; background:transparent url("@{imgUrl}top-links.png") no-repeat top left; } .mobileTopLinksContainer{ top:-63px; } #topPhone, #topMail, #topVideochat{ text-indent:-2000px; overflow:hidden; position:absolute; display:block; top:0px; width:34px; height:31px; } #topPhone{ left:2px; } #topMail{ left:39px; } #topVideochat{ left:76px; } .topSocialContainer{ position:absolute; right:0; top:0; width:316px; height:38px; background-color:#fff; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); } .topSocialContainer .topSocial{ position:absolute; left:85px; top:8px; width:94px; height:19px; background:transparent url("@{imgUrl}social-links-green.png") no-repeat top left; } .mobileTopSocialContainer{ position:absolute; top:-58px; left:550px; } .mobileTopSocialContainer .topSocial{ position:relative; width:94px; height:19px; background:transparent url("@{imgUrl}social-links.png") no-repeat top left; } #socialFacebook,#socialLinkedin,#socialYoutube{ position:absolute; display:block; text-indent:-2000px; overflow:hidden; width:35px; height:24px; } .topSocialContainer #socialFacebook, .topSocialContainer #socialLinkedin, .topSocialContainer #socialYoutube{ top:5px; } .mobileTopSocialContainer #socialFacebook, .mobileTopSocialContainer #socialLinkedin, .mobileTopSocialContainer #socialYoutube{ top:0px; } .topSocialContainer #socialFacebook{ left:76px; } .topSocialContainer #socialLinkedin{ left:114px; } .topSocialContainer #socialYoutube{ left:151px; } .mobileTopSocialContainer #socialFacebook{ left:-11px; } .mobileTopSocialContainer #socialLinkedin{ left:27px; } .mobileTopSocialContainer #socialYoutube{ left:66px; } .mobileLangContainer{ top:-82px!important; right:50px!important; } .langContainer ul { list-style: none; margin: 0; padding: 0; } .langContainer ul li { list-style: none; display:inline; margin-right:10px; } .langContainer ul li a{ display:inline-block; width:26px; height:26px; border-radius:3em; overflow:hidden; text-indent:-200px; } #menuMobile{ positio:absolute; width:100; top:-85px; } #menuMobile #navigation { position:relative; top:29px; } #logo, #mobileLogo{ width:398px; height:95px; background-color:#fff; position:relative; clip-path: polygon(0 0, 100% 0%, 378px 100%, 0% 100%); } #mobileLogo { display:none; } #logo h1, #mobileLogo h1{ position:absolute; right:46px; bottom:18px; margin:0; padding:0; display:inline-block; width:182px; height:47px; } #logo a { display:inline-block; width:182px; height:47px; background:transparent url("@{imgUrl}logo.png") no-repeat top left; } /*}}}*/ #detailsContainer{ max-height:500px; overflow:auto; } .bgBreadCrumb{ background-color:#fff; padding: 13px; } .topBreadCrumb{ margin-top:40px; font-size:16px; color:#858786; } .wpContent{ padding-top:16px; padding-left:0; } .wpContent.notExpand{ padding-left:238px; } .topBreadCrumb span, .topBreadCrumb a, .topBreadCrumb a:hover, .topBreadCrumb a:focus{ color:#858786; } #sfContent { position:relative; } #leftSf{ position:relative; z-index:2; } #leftSf > div{ position:absolute; height:854px; width:194px; background-color:#006462; clip-path: polygon(0 0, 100% 0%, 0 100%, 0% 100%); .transparency(35); } .pageTitleClipper{ position:absolute; left:-126px; top:0; height:600px; width:150%; clip-path: polygon(126px 0, 100% 0%, 100% 100%, 0% 100%); background-color:rgba(0,100,98,0.1); } .pageTitleContainer{ line-height:60px; font-size:18px; color:@mainColor; padding: 40px 40px 40px 45px; overflow:hidden; } .pageTitleContainer p{ margin:16px 0 0 0; line-height:18px; } h2.pageTitle{ margin:0; font-size:24px; font-family:MyriadProSemibold; line-height:30px; } .standardContent.content_HOME{ padding:0!important; } .standardContent.content_CMS, .standardContent.content_ECOMM{ border-top:20px solid #fff; background-color:#f7f7f7; margin-left:-194px; padding:40px 40px 40px 240px; } h2#servicesTitle{ color:@mainColor; font-size:20px; font-family:MyriadProRegular; } h2#servicesTitle span{ font-size:30px; } .topContainer{ width:100%; display: flex; align-items:flex-start; justify-content:space-between; } .contactsContent{ width:40%; height:100%; border-radius: 0px 0px 0px 80px; padding:60px; background-color:#d6d6d6; z-index:3; } .contactsContent input[type="text"], .contactsContent textarea{ border-color:#d6d6d6!important; border-radius:0 0 0 10px!important; } .contactsContent input[type="submit"]{ background-color:#bcbcbc; border-color:#d6d6d6!important; border-radius:0 0 0 10px!important; font-family:MyriadProSemibold; font-size:18px; text-transform:uppercase; } .contactsContent label{ float:left!important; padding:0!important; color:@mainColor!important; text-align:left!important; font-family:MyriadProSemibold; font-size:14px; } .contactsContent label a { display:inline!important; text-decoration:underline; font-family:OpenSansBold; font-size:16px; } .imageContent{ overflow-x:hidden; flex-grow: 0; flex-shrink:3; z-index:3; border-radius: 0px 0px 0px 80px; position:relative; } .imageContent .editContent{ position:absolute; bottom:50%; left:50%; background-color:#fff; padding:10px; border-radius:15px; } .imageContent br { display:none; } .imageContent div[type="img"]{ float:left; width:801px; height:581px; padding:0!important; } .imageContent img{ height:100%!important; max-width:none; } #sfContent div { position:absolute; width:100%; height:518px; background-color:@mainColor; } /*{{{ HOME CONTENT */ #homeCompanyContainer{ padding:80px; color:#fff; background-color:#444444; border-radius:0 0 0 15px; position:relative; overflow:hidden; } #homeCompanyrightOverlay{ position:absolute; top:0; right:0; height:100%; width:200px; background-color:rgba(0,100,98,0.5); clip-path: polygon(90px 0, 100% 0%, 100% 100%, 0% 100%); } #homeCompany{ font-family:MyriadProRegular; } #homeCompanyRightImage{ position:absolute; background:transparent url("@{imgUrl}home-company.png") no-repeat top right; height:100%; width:52%; top:0; right:-12%; } h2#homeCompanyTitle{ color:#fff; font-size:20px; font-family:MyriadProRegular; } h2#homeCompanyTitle span{ font-size:30px; } #homeCompanyDesc{ display:inline-block; padding:4px 10px 4px 0; position:relative; z-index:3; font-size:24px; background-color:#444444; } .roundNumber{ font-family:MyriadProRegular; display:inline-block; height:30px; width:30px; border-radius: 50%; background-color:#fff; color:#444; line-height:30px; text-align:center; font-size:20px; float:left; margin-right:20px; } #homeCompanyContent{ width:56%; font-size:16px; } #homeCompanyContent > div{ font-family:MyriadProItalic; font-size:18px; margin-bottom:16px; } #homeCompanyContent > div span.numberedText{ float:left; display:inline-block; width:90%; } #homebanner{ height:534px; background:transparent url("@{imgUrl}home-banner.png") no-repeat top left; background-size:cover; position:relative; font-family:Montserrat-Regular; } #bannerRow1{ display:inline-block; position:absolute; right:0; top:60px; font-size:56px; color:@mainColor; padding:40px 40px 40px 100px; background-color:rgba(255,255,255,0.7); clip-path: polygon(30px 0, 100% 0%, 100% 100%, 0% 100%); } #bannerRow2{ display:inline-block; position:absolute; right:0; top:230px; font-size:56px; color:@mainColor; padding:40px 40px 40px 100px; background-color:rgba(255,255,255,0.7); clip-path: polygon(30px 0, 100% 0%, 100% 100%, 0% 100%); } #bannerRow3{ display:inline-block; position:absolute; right:0; top:400px; font-size:20px; color:@mainColor; padding:10px 10px 10px 50px; background-color:rgba(255,255,255,0.7); clip-path: polygon(15px 0, 100% 0%, 100% 100%, 0% 100%); } #homePartners { position:relative; z-index:3; padding:0 10px; top:-40px; } #homePartners a, #homePartners a:hover, #homePartners a:focus{ color:#fff; font-size:14px; text-decoration:none; } #homePartners >div{ padding:0 5px 10px 5px; } #homePartners >div >div { border-radius:15px; text-align:center; font-weight:bold; font-size:20px; overflow:hidden; background-size:cover; } #homePartners >div >div >div { background-color: rgba(0,0,0,0.7); padding:40px; height:483px; .transparency(130); color:#fff; position:relative; text-align:center; } #homePartners >div >div >div:hover { background-color: rgba(0,100,98,0.9); } #homePartners >div >div >div >div.logoPartner{ height:80px; } #homePartners >div >div >div >div.linksPartner{ height:80px; margin:20px; border-top:1px solid rgba(255,255,255,0.4); text-align:right; position:absolute; width:80%; bottom:20px; right:0; margin:0 10%; } #homePartners > div >div > div > div.linksPartner span{ display:inline-block; position:relative; top:2px; } #corghiPartner >div { background:transparent url("@{imgUrl}corghi-home.png") no-repeat top left; } #corghiPartner >div > div > div.logoPartner{ background:transparent url("@{imgUrl}corghi-logo-color.png") no-repeat center center; background-size:contain; max-width:180px; margin:20px auto; } #tecnomotorPartner >div { background:transparent url("@{imgUrl}tecnomotor-home.png") no-repeat top left; } #tecnomotorPartner >div > div > div.logoPartner{ background:transparent url("@{imgUrl}tecnomotor-logo-color.png") no-repeat center center; background-size:contain; max-width:240px; margin:20px auto; } #hpaPartner >div { background:transparent url("@{imgUrl}hpa-home.png") no-repeat top left; } #hpaPartner >div > div > div.logoPartner{ background:transparent url("@{imgUrl}hpa-logo-color.png") no-repeat center center; background-size:50%; max-width:200px; margin:20px auto; } #autopstenhojPartner >div { background:transparent url("@{imgUrl}autopstenhoj-home.png") no-repeat top left; } #autopstenhojPartner >div > div > div.logoPartner{ background:transparent url("@{imgUrl}autopstenhoj-logo-color.jpg") no-repeat center center; background-size:contain; max-width:240px; margin:20px auto; } #servicesContainer{ padding:80px 80px 20px 80px; } #services > div { margin-top:40px; margin-bottom:40px; text-align:center; } #services div.serv2{ border:1px solid #eaeaea; border-top:none; border-bottom:none; } #services > div >div{ width:70%; margin:0 auto; min-height:200px; background:transparent url("@{imgUrl}wrench.png") no-repeat top center; padding:60px 0 60px 0; color:@mainColor; font-size:16px; } #services h3{ font-size:20px; } /*{{{ HOME PRODUCTS */ #prodsTitle{ text-align:center; margin-top:60px; } #prodsTitle > b{ display:inline-block; margin-left:auto; margin-right:auto; font-family:MyriadProSemibold; text-transform:uppercase; font-size:20px; color:@titlesColor; margin-bottom:20px; } #prodsContainer,#newsContainer{ text-align:center; } #prods{ padding:0 40px; margin-bottom:40px; } #prods a , #prods a:focus, #prods a:hover{ outline:0; text-decoration:none; } #prods div.prodItem{ backgrond-color:#fff; padding:0; border-right:10px solid #fff; border-left:10px solid #fff; } #prods div.prodItem >div{ text-align:center; height:370px; background-color:#e4e4e4; } #prods div.prodItem div.prodImage { text-align:center; height:280px; padding-left:20px; padding-right:20px; } #prods div.prodItem div.prodImage img{ max-height:280px!important; margin:0 auto; } #prods div.prodItem div.prodText { padding:10px; background-color:#fff; color:@mainColor; overflow:hidden; height:90px; font-size:16px; font-family:MyriadProRegular; } #prods div.prodItem div.prodText h4{ color:@mainColor; font-family:MyriadProSemibold; line-height:24px; font-size:23px; margin:0; padding:0; } /*}}}*/ /*{{{ HOME NEWS */ #homeNewsContainer{ background-color:#dbe5e4; padding:40px 20px; border-radius: 15px 15px 0 0; text-align:center; } #homeNewsContainer h2{ margin-bottom:40px; } #homeNews{ padding:0 40px; margin-bottom:40px; } #homeNews div.homeNewsItem{ position:relative; background-color:#444444; height:286px; padding:0; border-right:10px solid #dbe5e4; border-left:10px solid #dbe5e4; } .homeNewsRightOverlay { position:relative; z-index:3; } .homeNewsRightOverlay div{ position:absolute; top:0; right:0; height:286px; width:80px; background-color:rgba(0,100,98,0.5); clip-path: polygon(40px 0, 100% 0%, 100% 100%, 0% 100%); } .homeNewsTitle{ position:relative; z-index:2; text-align:left; background-color:#444444; z-index:2; color:#fff; min-height:46px; font-size:18px; font-family:OpenSansBold; padding:10px; } .homeNewsTitle div{ position:absolute; height:40px; white-space:wrap; } .homeNewsLink{ position:relative; bottom:0px; left:0; height:40px; width:100%; padding:0px 56px 10px 10px; z-index:6; text-align:right; } .homeNewsLink span{ display: inline-block; position: relative; top: 2px; } .homeNewsLink a, .homeNewsLink a:focus, .homeNewsLink a:hover{ font-size:16px; color:#fff; font-family:OpenSansRegular; text-decoration:none; } .homeNewsImage{ position:relative; width:100%; height:200px; overflow:hidden; } .homeNewsImage img{ width:100%; } /*}}}/ /*{{{ CATEGORIE */ #catsContainer{ text-align:center; } #cats{ padding:0 100px; margin-bottom:40px; } #cats div.catItem{ text-align:center; height:300px; padding-left:20px; padding-right:20px; } #cats div.catItem > div{ display:flex; align-items:center; height:90%; position:relative; padding:40px 0; text-align:center; } #catsContainer #cats{ display:flex; justify-content:space-between; padding:40px 40px 0 0; flex-wrap:wrap; } #catsContainer #cats div.catItem{ min-width:200px; } #cats div.catItem > div >img { z-index:2; margin:0 auto; max-height:100%; } #cats div.catItem > div >b{ display:inline-block; width:60%; position:absolute; height:100%; left:20%; } #cats div.catItem:hover h4{ text-decoration:underline; } #cats div.catItem > div > h4{ position:absolute; bottom:0; text-align:center; width:100%; color:@bodyColor; } /*}}}*/ a#homeContact, a#homeContact:hover ,a#homeContact:focus{ margin-right:64px; margin-bottom:50px; display:inline-block; padding:0px 16px; background-color:@mainColor; color:#fff; text-align:left; padding:2px 20px 8px 20px; text-decoration:none; } a#homeContact span{ display:inline-block; padding:0; margin:0; line-height:24px; position:relative; top:4px; } .slick-next { right:20px; top:130px!important; z-index:3; } .slick-prev { left:20px; top:130px!important; z-index:3; } .slick-next::before { content: '>'; color:#444; background-color:transparent; } .slick-prev::before { content: '<'; color:#444; background-color:transparent; } .homeVideoItem{ padding:40px; } #homeVideoContainer >div { padding:20px; } /*}}}*/ /*{{{ FOOTER */ .bgFooter{ background-color:#fff; } #lastFooterRow{ text-align:center; padding:20px; background-color:#02322f; color:#fff; font-size:12px; } #footerBbrands{ background-color:#474747; min-height:152px; text-align:center; padding-top:40px; position:relative; z-index:10; } #footerBrandsTitle{ display:inline-block; position:absolute; left:50%; top:-54px; } #footerBrandsTitle h3{ width:140px; text-align:center; font-size:14px; position:absolute; display:inline-block; left:-60px; margin:0; padding:6px 0; border:3px solid @mainColor; color:@mainColor; background-color:#fff; font-weight:bold; border-radius:5px; } #brandsContainer > div { display:inline-block; margin:0 auto; min-height:120px; } #brandsContainer >div > a { display:inline-block; height:46px; text-indent:-2000px; overflow:hidden; } .corghiProducts, .corghiProducts:hover{ background-color:#fff; color:@mainColor; display:inline-block; margin:20px auto 0 auto; padding:0 4px; } a.corghiBrand{ width:132px; background:transparent url("@{imgUrl}corghi-logo-color.png") no-repeat top left; background-size:contain; } a.tecnoBrand{ width:197px; background:transparent url("@{imgUrl}tecnomotor-logo-color.png") no-repeat top left; background-size:contain; } a.hpaFaipBrand{ width:82px; background:transparent url("@{imgUrl}hpa-logo-color.png") no-repeat top left; background-size:contain; } a.autopstenhojBrand{ width:195px; background:transparent url("@{imgUrl}autopstenhoj-logo-color.png") no-repeat top left; background-size:contain; } .linkProd,.linkOmologazioni{ display:inline-block; width:25px; height:25px; text-indent:2000px; overflow:hidden; } .linkProd{ background:transparent url("@{imgUrl}products_logo.png") no-repeat top left; } .linkOmologazioni{ background:transparent url("@{imgUrl}omologazione_logo.png") no-repeat top left; margin-left:10px; } #companyContainer{ position:relative; z-index:5; background-color:#004c48; padding:76px 20px; color:#fff; font-weight:bold; font-size:14px; } #companyContainer > div { display:flex; justify-content:center; } #companyData{ display:inline-block; white-space:nowrap; margin:0 auto; } #footerContacts{ display:inline-block; white-space:nowrap; height:100px; background:transparent url("@{imgUrl}contacts-footer.png") no-repeat top left; margin:0 auto; } #footerLinks{ display:inline-block; white-space:nowrap; margin:0 auto; } #footerContacts a, #footerContacts a:focus, #footerContacts a:hover{ display:inline-block; padding-left:40px; color:#fff; position:absolute; } #footerPhone{ left:0; } #footerMail{ left:0; top:40px; } #footerCGV{ left:0; top:78px; } #footerLinks a, #footerLinks a:focus, #footerLinks a:hover{ color:#fff; } /*}}}*/ /* You can use 2 media queries types: width --> css width (use properties like min-width and max-width) device-width --> device width (use properties like min-device-width and max-device-width) */ @media (min-width: 350px){/*{{{*/ /* stop jumping steps, so below the max 1600px fixed with (statement below), containers will be fluid to 100% width */ .container { width: 100%; } .bgContent { padding:0; } .bgFooter{ padding:0; } }/*}}}*/ @media (min-width: 1406px) {/*{{{*/ .container { width: 1366px; } }/*}}}*/ @media (max-width: 1340px) {/*{{{*/ #homePartners > div > div { font-size:18px!important; } }/*}}}*/ @media (max-width: 1280px) {/*{{{*/ #homePartners > div > div { font-size:16px!important; } #showcaseText div#showCaseLinkContainer{ text-align:left; } #showcase { min-height:0; } .wpContent.notExpand{ padding-left:0; } h2.pageTitle{ padding-left:0; } .topBreadCrumb{ left:0; } #mobileLogo { display:block; } ul.slimmenu { border:1px solid grey; border-bottom-width:2px; } ul.slimmenu, ul.slimmenu ul{ background-color:#dddddd; color:#797979; } ul.slimmenu li { background-color:#eee; } ul.slimmenu > li:first-child { border-left: 1px solid grey; } div.collapse-button{ background-color: #eaeaea !important; border: 1px solid @mainColor; } ul.slimmenu li > b { color: #fff; font-family: "Open Sans",sans-serif; font-size: 16px; font-weight: 400; border-bottom: 1px solid rgba(0, 0, 0, 0.075); background-color: #2c2c2c; background-image: -moz-linear-gradient(center top , #333333, #222222); background-repeat: repeat-x; } }/*}}}*/ @media (max-width: 1200px) {/*{{{*/ #homeCompanyContainer{ background-color:transparent; padding:0; } #homeCompanyExtraBg{ background-color:rgba(68,68,68,0.8); position:relative; z-index:40; width:100%; height:100%; padding:80px; } #homeCompanyContent{ width:100%; } #homeCompanyDesc{ background-color:transparent; } #homeCompanyRightImage{ height:100%; width:100%; background-size:cover; right:0; } .topContainer.contactsTopContent{ width:100%; display: block; position:relative; text-align:left; background-color:#fff; } .topContainer.topContactsContent{ } .redContent.redContactsContent{ position:static; background-color:#fff; padding-bottom:40px; color:@bodyColor; text-align:center; min-width:0; max-width:none; display:block; line-height:18px; height:auto; font-family:OpenSansRegular; margin-top:60px; text-align:left; } .redContent.redContactsContent > div{ padding:0; font-size:18px; } .contactsContent{ border:none; width:100%; border-radius:0; margin:0; margin-bottom:40px; } #prods div.prodItem > div >b{ width:90%; left:5%; } #rightFooter,#leftFooter{ display:none!important;; } #sfContent.sfContacts{ display:none; } #mobileFooter{ display:block!important;; } #footerPhoneEmail{ color:#fff; background-color:@mainColor; padding:0 20px; height:30px; line-height:30px; font-size:16px; font-weight:bold; } #footerPhoneEmail a, #footerPhoneEmail a:hover, #footerPhoneEmail a:focus{ color:#fff; } #footerMobileLinks{ background-color:#eeeeee; color:@bodyColor; padding:20px 20px 20px 40px; text-transform:uppercase; font-size:16px; } #footerMobileLinks ul{ display:flex; justify-content:space-evenly; } #footerMobileLinks ul li{ padding:0 20px 0 0; } #footerMobileLinks ul li a,#footerMobileLinks ul li a:hover, #footerMobileLinks ul li a:focus { color:@bodyColor; } #footerMobileCompany{ background-color:#c6c6c6; color:@bodyColor; padding:20px; font-size:16px; } }/*}}}*/ @media (max-width: 1199px) {/*{{{*/ #homePartners > div > div { font-size:18px!important; } }/*}}}*/ @media (max-width: 991px) {/*{{{*/ #companyContainer{ padding-bottom:0; padding-left:0; padding-right:0; } .footerLinksContainer{ margin-top:60px; background-color:#003f3c; display:block; padding:40px 0 20px 0; } .footerLinksContainer ul{ margin:0; display:block; padding:0 60px; } .footerLinksContainer li{ float:left; } .footerLinksContainer li a { display:inline-block; white-space:nowrap; padding-right:40px; padding-bottom:20px; } }/*}}}*/ @media (max-width: 810px) {/*{{{*/ .topBreadCrumb{ position:static; left:0; font-size:16px; color:#858786; } .bgContent{ padding-top:0; } #sfContent div { display:none; } .imageContent { display:block; border-radius:0; } .imageContent div[type="img"]{ height:auto; } .imageContent img{ height:80%; } }/*}}}*/ @media (max-width: 768px) {/*{{{*/ #homePartners > div > div { font-size:16px!important; } #services>div{ width:100%; margin:40px auto; } #services>div.serv2,#services>div.serv1{ border-bottom:1px solid #eaeaea; } #bannerRow2, #bannerRow1{ font-size:40px; padding:40px; } #bannerRow3{ padding:10px; } #bannerRow3,#bannerRow2, #bannerRow1{ clip-path:none; display:block; width:80%; text-align:center; margin:0 10% 0 10%; z-index:4; } .mobileTopSocialContainer{ position:absolute; top:-96px; left:416px; } #homeCompanyContent > div span.numberedText{ width:80%; } .pageTitleClipper{ display:noe; } #pageType_CMS, #pageType_ECOMM{ padding:0; } .topBreadCrumb{ margin:0; padding-left:26px; } #leftSf.leftSf_CMS, #leftSf.leftSf_ECOMM{ display:none; } .pageTitleContainer{ background-color:#e5efef; padding:40px; } .standardContent.content_CMS, .standardContent.content_ECOMM { background-color: #f7f7f7; padding:40px; margin-left:0; } }/*}}}*/ @media (max-width: 610px) {/*{{{*/ #bannerRow2, #bannerRow1{ font-size:30px; padding:40px; } #bannerRow3{ font-size:16px; padding:10px; } .companyDataContainer, .footerContactsContainer{ width:100%; float:none; clear:both; } #companyData{ display:block!important; width:100%; margin:0 0 40px 40px; } #footerContacts{ display:block!important; width:100%; margin:0 0 0 40px; } #mobileLogo { width:248px; clip-path: polygon(0 0, 100% 0%, 238px 100%, 0% 100%); } .mobileTopSocialContainer{ left:270px; } .mobileTopLinksContainer{ left:258px; } }/*}}}*/ @media (max-width: 550px) {/*{{{*/ #homePartners > div > div { font-size:20px!important; } #homePartners > div{ width:100%!important; } #homePartners >div >div >div >div{ height:100px; margin:20px; } } @media (max-width: 510px) {/*{{{*/ #mobileLogo h1{ width: 150px; left:70px; } .menu-collapser .collapse-button{ left:16px!important; background-color:@mainColor!important; } #updnlDiv{ width:30px; } }/*}}}*/ @media (max-width: 380px) {/*{{{*/ .mobileTopSocialContainer{ left:210px; } .mobileTopLinksContainer{ left:200px; } #mobileLogo{ width:182px; clip-path: polygon(0 0, 100% 0%, 170px 100%, 0% 100%); } #mobileLogo h1{ width: 120px; left:50px; } .menu-collapser .collapse-button{ left:6px!important; background-color:@mainColor!important; } }/*}}}*/ @media (max-width: 310px) {/*{{{*/ }/*}}}*/