html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } @font-face { font-family: Dimbo; font-style: normal; font-weight: normal; src: local("Dimbo"), url("fonts/Dimbo.eot"); src: url("fonts/Dimbo.eot?#iefix") format("embedded-opentype"), url("fonts/Dimbo.woff") format("woff"), url("fonts/Dimbo.ttf") format("truetype"), url("fonts/Dimbo.svgDimbo") format("svg"); } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-overflow-scrolling: touch; } html { height: 100%; } body { margin: 0; padding: 0; border: 0; height: 100%; background: #202730; font-family: Arial; font-size: 15px; color: #d4d5d7; } * { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } img { max-width: 100%; height: auto; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } .wrapper { display: block; margin: 0 auto; max-width: 980px; } @media (max-width: 1023px) { .wrapper { max-width: calc(100% - 30px); } } @media (max-width: 767px) { .wrapper { max-width: calc(100% - 30px); } } /* Force uppercase */ small { text-transform: lowercase !important; } big { text-transform: uppercase !important; } * { color: inherit; } .mainContainer { width: 100%; height: 100%; position: relative; overflow-x: hidden; } .mainContainer section { float: left; width: 75%; min-width: 700px; min-height: 100%; padding: 0 20px; position: relative; max-width: 1144px; } .mainContainer section #articleContainer { overflow-x: hidden; height: calc(100% - 250px); } @media (max-width: 1023px) { .mainContainer section { float: none; width: 100%; min-width: inherit !important; padding: 0 10px; } } .mainContainer section header { background: #272e36; font-size: 30px; } .mainContainer section header #headerContainer { height: 192px; } .mainContainer section article { background: #272e36; padding: 50px 0; z-index: 0; } .mainContainer section article a { transition: color .5s; } .mainContainer section article a:hover { color: #ec3843; text-decoration: none; } .mainContainer section article .articleContent { width: 100%; max-width: 1000px; margin: auto; line-height: 17px; /*padding:0 10px;*/ } .mainContainer section article .articleContent h1 { font-family: Dimbo; font-size: 47px; text-align: center; line-height: 40px; } @media (max-width: 767px) { .mainContainer section article .articleContent h1 { font-size: 37px; } } .mainContainer section article .articleContent h1 a { text-decoration: none; } .mainContainer section article .articleContent h1 a:hover { color: #acbb00; } .mainContainer section article .articleContent h2 { font-family: Dimbo; font-size: 19px; color: #ec3843; text-align: center; margin: 10px 0 20px 0; } .mainContainer section article .articleContent a.homeRestos { font-family: Dimbo; font-size: 34px; color: #ec3843; text-decoration: none; background-color: white; padding: 5px 10px; border-radius: 10px; } .mainContainer section article .articleContent a.homeRestos:hover { color: white; background-color: #ec3843; } .mainContainer section article .articleContent p { padding: 5px 0; } .mainContainer section article .articleContent #sharePost { text-align: center; line-height: 30px; margin-top: 30px; } .mainContainer section article .articleContent #sharePost a { transition: opacity .5s; } .mainContainer section article .articleContent #sharePost a:hover { opacity: .5; } .mainContainer section article #com { width: 100%; max-width: 700px; margin: auto; margin-top: 30px; } .mainContainer section article #com #comBtnBottom { font-family: Dimbo; font-size: 25px; width: 250px; height: 42px; margin: auto; background: url("../img/bgCommentaires.png"); background-size: 100% 100%; text-align: center; cursor: pointer; color: #fff; padding-top: 10px; transition: all .5s; } .mainContainer section article #com #comBtnBottom .comNum { color: #202730; } .mainContainer section article #com #comBtnBottom:hover { color: #202730; } .mainContainer section .options { width: 100%; max-width: 700px; padding: 40px; background: #202730; position: relative; display: none; left: 150%; border-radius: 20px; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } @media (max-width: 1023px) { .mainContainer section .options { margin-bottom: 100px; } } @media (max-width: 767px) { .mainContainer section .options { width: 90%; padding: 20px 10px; } } .mainContainer section .options .closeBtn { width: 50px; height: 50px; background: #444a51; position: absolute; right: -10px; top: -10px; border-radius: 50%; cursor: pointer; transition: 0.5s; } .mainContainer section .options .closeBtn .closeBar1, .mainContainer section .options .closeBtn .closeBar2 { width: 35px; height: 5px; background-color: #fff; margin: 6px auto; transition: 0.4s; border-radius: 4px; } .mainContainer section .options .closeBtn .closeBar1 { -webkit-transform: rotate(-45deg) translate(-11px, 12px); transform: rotate(-45deg) translate(-11px, 12px); } .mainContainer section .options .closeBtn .closeBar2 { -webkit-transform: rotate(45deg) translate(4px, 3px); transform: rotate(45deg) translate(4px, 3px); } .mainContainer section .options .closeBtn:hover { -webkit-transform: rotate(90deg); transform: rotate(90deg); background: #ec3843; } .mainContainer section .options #optionContainer { font-size: 15px; } @media (max-width: 767px) { .mainContainer section .options #optionContainer { padding-bottom: 12px; } } .mainContainer section .options #optionContainer .colLiens { line-height: 25px; font-size: 20px; } .mainContainer section .options #optionContainer .colArchives { line-height: 20px; } .mainContainer section .options #optionContainer .colArchives .optionDate { font-size: 13px; color: #444a51; } .mainContainer section .options #optionContainer .colArchives .optionCategorie { font-family: Dimbo; text-transform: uppercase; font-size: 17px; color: #ec3843; } .mainContainer section .options #optionContainer h1 { margin-bottom: 20px; } .mainContainer section .options #optionContainer a { text-decoration: none; transition: color .1s; } .mainContainer section .options #optionContainer a:hover { color: #ec3843; } .mainContainer section .options #optionContainer #menuArchives { margin-top: 20px; position: relative; font-family: Dimbo; font-size: 30px; height: 30px; } .mainContainer section .options #optionContainer #menuArchives a { color: #fff; } .mainContainer section .options #optionContainer #menuArchives a:hover { color: #ec3843; } .mainContainer section .options #optionContainer #menuArchives #archivePrec { position: absolute; left: 0; top: 0; } .mainContainer section .options #optionContainer #menuArchives #archiveSuiv { position: absolute; right: 0; top: 0; } .mainContainer section .mentions { text-align: center; padding-bottom: 50px; font-size: 12px; } @media (max-width: 1023px) { .mainContainer section .mentions { padding-bottom: 30px; } } .mainContainer footer { height: 60px; background: rgba(0, 0, 0, 0.7); display: none; } @media (max-width: 1023px) { .mainContainer footer { display: block; } } @media (max-width: 1023px) { .mainContainer footer { position: fixed; bottom: 0; left: 0; width: 100%; } } .mainContainer footer .pageBtnContainer { width: 100%; max-width: 500px; position: relative; margin: auto; } .mainContainer footer .pageBtnContainer .btnMenu { width: 50px; height: 50px; border-radius: 50%; text-align: center; background: #fff; margin: auto; padding-top: 3px; position: absolute; top: 4px; left: 63%; padding-top: 6px; } .mainContainer footer .pageBtnContainer .btnMenu .bar1, .mainContainer footer .pageBtnContainer .btnMenu .bar2, .mainContainer footer .pageBtnContainer .btnMenu .bar3 { width: 35px; height: 5px; background-color: #202730; margin: 6px auto; transition: 0.4s; border-radius: 4px; } .mainContainer footer .pageBtnContainer .btnMenu.change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-8px, 8px); } .mainContainer footer .pageBtnContainer .btnMenu.change .bar2 { opacity: 0; } .mainContainer footer .pageBtnContainer .btnMenu.change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-7px, -7px); } @media (max-width: 1023px) { .mainContainer footer .pageBtnContainer .btnMenu { cursor: pointer; } } .mainContainer footer .pageBtnContainer .footerHome { width: 50px; height: 50px; background-position: 0 0; background-size: 50px 100px; background-image: url("../img/btHome.png"); padding-top: 3px; position: absolute; top: 4px; left: 24%; padding-top: 6px; } .mainContainer footer .pageBtnContainer .footerHome:hover { background-position: 0px -50px; } .mainContainer footer .pageBtnContainer .navFleche { width: 58px; height: 50px; background-position: 0 0; background-size: 58px 100px; display: inline-block; position: absolute; top: 5px; } .mainContainer footer .pageBtnContainer .navFleche:hover { background-position: 0px -50px; } .mainContainer footer .pageBtnContainer .navFleche#footerRight { right: 10px; background-image: url("../img/btRight.png"); } .mainContainer footer .pageBtnContainer .navFleche#footerLeft { left: 10px; background-image: url("../img/btLeft.png"); } @media (max-width: 767px) { .mainContainer footer .pageBtnContainer { /*left:10px; top:80px;*/ } } .mainContainer footer #footerCommentaires { width: 50px; height: 56px; position: absolute; left: 46%; top: 3px; background-image: url("../img/bulle.png"); background-size: 50px 56px; cursor: pointer; } .mainContainer footer #footerCommentaires .nbCommentaires { font-family: Dimbo; color: #ec3843; font-size: 30px; width: 100%; text-align: center; padding-top: 5px; } .mainContainer footer #footerCommentaires .nbCommentaires:hover { color: #202730; } #comForm { display: none; position: fixed; width: 700px; height: 210px; background: rgba(0, 0, 0, 0.7); right: -700px; bottom: 10px; transition: 1s; padding: 20px; border-radius: 20px 0 0 20px; } #comForm .closeBtn { width: 50px; height: 50px; background: #444a51; position: absolute; left: -50px; top: -25px; border-radius: 50%; cursor: pointer; transition: 0.5s; } @media (max-width: 1023px) { #comForm .closeBtn { display: none; } } #comForm .closeBtn.opened .closeBar1 { -webkit-transform: rotate(-45deg) translate(-11px, 12px); transform: rotate(-45deg) translate(-11px, 12px); width: 35px; } #comForm .closeBtn.opened .closeBar2 { -webkit-transform: rotate(45deg) translate(4px, 3px); transform: rotate(45deg) translate(4px, 3px); width: 35px; } #comForm .closeBtn.opened:hover { background: #ec3843; } #comForm .closeBtn.opened:hover .closeBar1 { -webkit-transform: rotate(-45deg) translate(-12px, 19px); transform: rotate(-45deg) translate(-12px, 19px); width: 20px; } #comForm .closeBtn.opened:hover .closeBar2 { -webkit-transform: rotate(45deg) translate(2px, -4px); transform: rotate(45deg) translate(2px, -4px); width: 20px; } #comForm .closeBtn .closeBar1, #comForm .closeBtn .closeBar2 { width: 20px; height: 5px; background-color: #fff; margin: 6px auto; transition: 0.4s; border-radius: 4px; } #comForm .closeBtn .closeBar1 { -webkit-transform: rotate(-45deg) translate(-10px, 5px); transform: rotate(-45deg) translate(-10px, 5px); } #comForm .closeBtn .closeBar2 { -webkit-transform: rotate(45deg) translate(4px, 3px); transform: rotate(45deg) translate(5px, 10px); } #comForm.opened { right: 0; } #comForm.opened .closeBtn { left: -25px; } #comForm .formChamps { display: inline-block; vertical-align: top; } @media (max-width: 1023px) { #comForm .formChamps { width: 48%; vertical-align: top; margin: 0 .8%; } } @media (max-width: 767px) { #comForm .formChamps { width: 100%; display: block; } } #comForm .formChamps input, #comForm .formChamps textarea, #comForm .formChamps .button { color: #202730; font-size: 22px; font-family: Dimbo; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } #comForm .formChamps input, #comForm .formChamps textarea { padding: 5px; outline: none; border: none; } @media (max-width: 767px) { #comForm .formChamps input, #comForm .formChamps .button { height: 50px; } } #comForm .formChamps textarea { width: 430px; height: 171px; } @media (max-width: 1023px) { #comForm .formChamps textarea { width: 100%; height: 184px; } } @media (max-width: 767px) { #comForm .formChamps textarea { margin-bottom: 10px; } } #comForm .formChamps .formInput { width: 200px; height: 20px; display: block; margin-bottom: 24px; margin-left: 10px; } @media (max-width: 1023px) { #comForm .formChamps .formInput { width: 100%; margin-left: 0; margin-bottom: 25px; } } @media (max-width: 767px) { #comForm .formChamps .formInput { margin-left: 0; margin-bottom: 40px; } } #comForm .formChamps .formInput .button { width: 100%; height: 100%; background-color: #444a51; border: none; padding: 20px 32px; text-align: center; text-decoration: none; display: inline-block; cursor: pointer; line-height: 0; transition: all .5s; color: #ec3843; } @media (max-width: 1023px) { #comForm .formChamps .formInput .button { height: 50px; } } #comForm .formChamps .formInput .button:hover { background-color: #202730; color: white; } #comForm .formChamps .formInput input { width: 100%; } @media (max-width: 1023px) { #comForm { width: 100%; right: -100%; bottom: 0; position: static; border-radius: 0; padding: 10px; padding-bottom: 100px; height: auto; } } @media (max-width: 767px) { #comForm { width: 100%; right: -100%; bottom: 0; position: static; border-radius: 0; padding: 10px; padding-bottom: 100px; height: auto; } #comForm.opened { display: block; } } #comContent { padding: 10px; } @media (max-width: 1023px) { #comContent { padding-bottom: 50px; } } #comContent.opened { margin-bottom: 200px; } @media (max-width: 1023px) { #comContent.opened { padding-bottom: 50px; margin-bottom: 0px; } } #comContent .txtCommentaire { padding: 10px; text-align: justify; background-color: #444a51; color: white; font-size: 14px; margin: 30px auto 0 auto; white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP Printers */ word-wrap: break-word; /* IE 5+ */ -webkit-border-top-right-radius: 8px; -webkit-border-top-left-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-topleft: 8px; border-top-right-radius: 8px; border-top-left-radius: 8px; } #comContent .qui { font-size: 14px; font-weight: bold; margin-left: 10px; } #comContent .infosCommentaire { padding: 10px; margin: 0 auto; text-align: left; background-color: #202730; font-size: 13px; -webkit-border-bottom-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } #comContent .infosCommentaire .imgSite, #comContent .infosCommentaire .imgAvatar { height: 50px; width: 50px; } #comContent .infosCommentaire .imgAvatar { border-radius: 25px; } nav { width: 25%; min-width: 250px; max-width: 400px; height: 100%; position: fixed; left: 0; top: 0; overflow: auto; display: block; } nav .navBg { display: none; background: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; } nav .navContainer { width: 200px; position: absolute; right: 0; top: 0; margin: 0 10px; margin-top: 10px; } nav .navContainer #teteKek { width: 175px; height: 167px; background-image: url("../img/navTop.png"); background-position: 0 0; margin: auto; margin-bottom: 10px; cursor: pointer; } @media (max-width: 1023px) { nav .navContainer #teteKek { margin-bottom: 40px; } } nav .navContainer .bloc { font-family: Dimbo; color: #fff; width: 190px; margin: auto; padding: 5px; margin-bottom: 10px; text-align: center; font-size: 25px; } @media (max-height: 800px) and (orientation: landscape) { nav .navContainer .bloc { margin-bottom: 5px; } } nav .navContainer .bloc.blocTop { text-align: left; } nav .navContainer .bloc h1 { text-align: center; margin-bottom: 5px; color: #ec3843; font-size: 21px; } nav .navContainer .bloc #bulleCommentaires { width: 49px; height: 55px; margin: auto; background-image: url("../img/bulle.png"); background-size: 100% 100%; cursor: pointer; display: inline-block; position: relative; } nav .navContainer .bloc #bulleCommentaires .nbCommentaires { font-family: Dimbo; color: #ec3843; font-size: 30px; width: 100%; text-align: center; position: absolute; top: 7px; } nav .navContainer .bloc .txtCommentaires { display: inline-block; margin-left: 5px; margin-top: 10px; vertical-align: top; transition: color .5s ease-out; } nav .navContainer .bloc .commentaires { cursor: pointer; } @media (max-width: 1023px) { nav .navContainer .bloc .commentaires { display: none; } } nav .navContainer .bloc .commentaires:hover { color: #ec3843; } nav .navContainer .bloc .commentaires:hover #bulleCommentaires .nbCommentaires { color: #202730; animation: bounce 0.7s ease infinite; } @keyframes bounce { from { top: 10px; } 25% { top: 0px; transform: rotate(20deg); } 50% { top: 10px; } 75% { top: 0px; transform: rotate(-20deg); } to { top: 10px; } } nav .navContainer .bloc ul.appsMobile { text-align: center; } nav .navContainer .bloc ul li { display: inline-block; margin: 3px; margin-bottom: 5px; cursor: pointer; } nav .navContainer .bloc ul li:hover { color: #ec3843; } nav .navContainer .bloc ul li img { height: 50px; width: 50px; } nav .navContainer .bloc .liensArchives li { display: block; list-style: none; padding-left: 57px; width: 100%; height: 50px; transition: color .5s ease-out; line-height: 45px; } nav .navContainer .bloc .liensArchives li.liens { background: url("../img/puceLiens.png") left top no-repeat; background-size: 50px 100px; } nav .navContainer .bloc .liensArchives li.liens:hover { background-position: 0 -50px; } nav .navContainer .bloc .liensArchives li.archives { background: url("../img/puceArchives.png") left top no-repeat; background-size: 50px 100px; } nav .navContainer .bloc .liensArchives li.archives:hover { background-position: 0 -50px; } nav .navContainer .bloc .navSocial { width: 100%; text-align: center; } nav .navContainer .bloc .navSocial li { display: inline-block; list-style: none; height: 50px; width: 50px; } nav .navContainer .bloc .navSocial li.socialTwitter { background: url("../img/btTwitter.png") left top no-repeat; background-size: 50px 100px; } nav .navContainer .bloc .navSocial li.socialFacebook { background: url("../img/btFacebook.png") left top no-repeat; background-size: 50px 100px; } nav .navContainer .bloc .navSocial li.socialInstagram { background: url("../img/btInstagram.png") left top no-repeat; background-size: 50px 100px; } nav .navContainer .bloc .navSocial li:hover { background-position: 0px -50px; } nav .navContainer .navArrows { width: 100%; text-align: center; margin: 40px 0; } nav .navContainer .navArrows .navHome { width: 50px; height: 50px; background-position: 0 0; background-size: 50px 100px; display: inline-block; background-image: url("../img/btHome.png"); } nav .navContainer .navArrows .navHome:hover { background-position: 0px -50px; } nav .navContainer .navArrows .navFleche { width: 58px; height: 50px; background-position: 0 0; background-size: 58px 100px; display: inline-block; } nav .navContainer .navArrows .navFleche:hover { background-position: 0px -50px; } nav .navContainer .navArrows #navRight { background-image: url("../img/btRight.png"); } nav .navContainer .navArrows #navLeft { background-image: url("../img/btLeft.png"); } @media (max-width: 1023px) { nav { display: none; float: none; width: 100%; height: calc(100% - 70px); position: fixed; top: 0; left: 0; max-width: inherit !important; background: none; } nav.opened { display: block; } nav .navBg { display: block; } nav .navArrows { display: none; } nav .navContainer { width: 75%; height: 75%; left: 50%; transform: translateX(-50%); background: #272e36; border-radius: 30px; margin: 30px 0; } nav .navContainer .bloc { width: 70%; font-size: 30px; padding: 20px; margin-bottom: 0; } nav .navContainer .bloc.blocTop { text-align: center; } nav .navContainer .bloc .liensArchives { font-size: 25px; margin: 0; text-align: center; } nav .navContainer .bloc .liensArchives li { display: inline-block; width: auto; } nav .navContainer .bloc ul.appsMobile, nav .navContainer .bloc ul.bds { width: auto; } } @media (max-width: 767px) { nav .navContainer { width: 90%; height: auto; margin-top: 20px; } nav .navContainer #teteKek { margin-bottom: 15px; zoom: .7; } nav .navContainer .bloc { width: 93%; padding: 10px 6px; } nav .navContainer .bloc h1 { font-size: 22px; } nav .navContainer .bloc ul li { margin: 2px; } nav .navContainer .bloc ul li img { width: 45px; height: 45px; } nav .navContainer .bloc .liensArchives { display: inline-block; text-align: center; font-size: 22px; } nav .navContainer .bloc .liensArchives li { margin: 0; } nav .navContainer .bloc .navSocial { margin-top: 0; display: inline-block; width: auto; vertical-align: top; } nav .navContainer .bloc .navSocial li { margin: 0; } } .fakeNav { float: left; width: 25%; min-width: 250px; max-width: 400px; height: 100%; } @media (max-width: 1023px) { .fakeNav { display: none; } } /*# sourceMappingURL=styles.css.map */