/* ---- RESPONSIVE CSS ---- */ /* ---- Résolution d'écran comprise entre 1025 et 1280px /* ---------------------------------------------------------------------------------------- */ @media screen and (min-width:1025px) and (max-width:1280px) { /* TITRES /* ---------------------------------------------------------------------------------- */ #main h1 {font-size:48px;} #main h2 {font-size:22px; color:#d8c292; padding-left:35px; line-height:30px;} .fleche {background:url(img/fleche.png) no-repeat; height:30px; width:auto; margin-top:0px;} /* PARAGRAPHES /* ---------------------------------------------------------------------------------- */ #main p {font-size:16px; line-height:21px; color:#a6612f;} /* MENU /* ---------------------------------------------------------------------------------- */ #menu_conteneur {width:268px; height:100%; padding:20px 0; position:fixed; left:0px; top:0px; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; z-index:999; background:url(img/bg_menu.png) repeat;} #menu {width:248px; margin:0 auto; text-align:center; color:#777;} #image_accueil {text-align:left; width:230x; height:230x;} #menu li {width:248px; height:auto; background:url(img/bg-rubriques.png) repeat; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; margin-bottom:15px; padding:12px 0 5px 0; line-height:20px; } #menu li a {color:#a6612f; text-transform:uppercase; font-size:20px; font-weight:bold; line-height:22px; font-family:"railwayregular";} #menu li a:hover {color:#ff9f00; } #menu li.active {font-size:20px; color:#fff; background:url(img/bg-rubriques-hover.png) repeat;} #menu li a.active {color:#01b9fd;} #reseaux {position:absolute; display:inline-block; top:580px; right:90px;} #jaime {position:absolute; display:inline-block; top:580px; right:120px;} .reseau {display:inline-block; width:24px; height:24px;} #fb {background:url(img/fb.png) no-repeat 0px 0px;} #copyright {position:relative; bottom:-40px; color:#000!important; font-size:11px; font-family:Helvetica; cursor:default;} #copyright p {text-align:center!important; line-height:1.4;} /* CONTENU /* ---------------------------------------------------------------------------------- */ #conteneur {position:relative; width:842px; left:308px; top:40px; z-index:20;} #main {position:relative; float:left; width:100%; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; padding:20px 20px 20px 20px; margin-bottom:40px; background:url(img/bg-contenu.png) repeat-x;} .ariane {color:#01b9fd; font-size:16px; margin-top:10px; font-family:"railwayregular";} .ariane a {color:#ff9f00; text-decoration:none;} .ariane a:hover {color:#a6612f;} /* filtre */ #filters {margin-top:5px; margin-bottom:10px; padding:5px; overflow:hidden; font-family:"railwayregular"; text-transform:uppercase; background:url(img/bg-filtres.png) repeat-y;} #filters li {float:right;padding-left:5px;} #filters li a {padding:2px 8px; font-size:16px; color:#a6612f !important; background-color:#fff; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;} #filters li a:hover {color:#fff !important; background-color:#ff9f00;} #filters li a.allcats {color:#fff !important; background-color:#01b9fd;} /* fiches */ ul#portfolio-list {padding:0; list-style:none;} ul#portfolio-list li {position:relative; list-style:none; width:auto; height:auto; display:block; float:left; margin-right:10px; margin-bottom:10px; overflow:hidden;} ul#portfolio-list li a {position:relative; display:block; width:270px; height:182px; overflow:hidden;-webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; background:url(img/bg-portfolio.png) repeat;} ul#portfolio-list li p {font-size:13px; color:#a6612f; text-align:center; background:url(img/bg-titre-fiche3.png) repeat-y; padding:2px 10px 2px 10px; margin-bottom:3px;} ul#portfolio-list li img {position:absolute; top:0; border:0px solid #ff9f00; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; width:270px; height:182px;} ul#portfolio-list li h4 {font-size:18px; text-align:center; text-transform:none; color:#fff; font-family:"railwayregular" !important; text-weight:regular!important; padding:30px 5px 5px 0;} /* fiches images only */ ul#portfolio-list2 {padding:0; list-style:none;} ul#portfolio-list2 li {position:relative; list-style:none; width:auto; height:auto; display:block; float:left; margin-right:10px; margin-bottom:10px; overflow:hidden;} ul#portfolio-list2 li a {position:relative; display:block; width:270px; height:182px; overflow:hidden;-webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; background:url(img/bg-portfolio.png) repeat;} ul#portfolio-list2 li img {position:absolute; top:0; border:0px solid #ff9f00; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; width:270px; height:182px;} /* zoom */ .zoom { width:1200px; } .zoom p { text-align:center; } .zoom img { width:842px; } .zoom img:hover { width:1200px; } /* FOOTER /* ---------------------------------------------------------------------------------- */ #retour-top {margin-left:20px; float:left; margin-top:-10px; font-family:"railwayregular"; font-size:18px;z-index:999; } #retour-top a {color:#0183fd; text-decoration:none;} #retour-top a:hover {text-decoration:underline;} #retour-top img {margin-left:5px;} /* DEFAUT ( #a6612f =brun / #ff9f00 =orange / #01b9fd =bleu / #d8c292 =beige / #b39071 =brun2 ) /* ---- CONTENT CONTACT---- */ #form {position:relative; width:30%!important; float:left; background:#ff9f00; color:#fff; padding:10px; border-top:3px solid #a6612f;} #form input[type="text"], #form input[type="email"], textarea {width:95%; border:none; -webkit-transition:0.3s; padding:5px;} #form input[type="text"]:focus, #form input[type="email"]:focus, textarea:focus {background:#d9eef8;} #form textarea {height:100px;} #submit {position:absolute; width:100%; bottom:-26px; left:0; border:none; background:#265b99; color:#fff; text-transform:uppercase; font-weight:bold; display:block; margin-top:20px; padding:5px; text-align:center; font-size:14px;} #submit:hover {color:#000} #googlemap {float:right; padding:5px; background-color:#083569; width:65%;} #googlemap iframe {width:100%; vertical-align:top;} .error {background:#d08191!important;} .error::-webkit-input-placeholder {color:#fff!important;} #loading {position:absolute; bottom:40px; right:40px; display:none;} #success {background:#01b9fd!important; color:#fff!important; font-weight:bold; text-align:center; padding:10px; text-transform:uppercase;} } /* ---- Résolution d'écran comprise entre 480 et 1024px (tablettes et autres...) /* ---------------------------------------------------------------------------------------- */ @media screen and (min-width:480px) and (max-width:1024px) { /* TITRES /* ---------------------------------------------------------------------------------- */ #main h1 {font-size:36px;} #main h2 {font-size:18px; color:#d8c292; padding-left:35px; line-height:30px;} .fleche {background:url(img/fleche.png) no-repeat; height:24px; width:auto; margin-top:0px;} /* PARAGRAPHES /* ---------------------------------------------------------------------------------- */ #main p {font-size:14px; line-height:17px; color:#a6612f;} /* MENU /* ---------------------------------------------------------------------------------- */ #menu_conteneur {width:200px; height:100%; padding:10px 0; position:fixed; left:0px; top:0px; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; z-index:999; background:url(img/bg_menu.png) repeat;} #menu {width:180px; margin:0 auto; text-align:center; color:#777;} #menu li {width:180px; height:auto; background:url(img/bg-rubriques.png) repeat; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; margin-bottom:15px; padding:8px 0 5px 0; line-height:15px; } #menu li a {color:#a6612f; text-transform:uppercase; font-size:18px; font-weight:bold; line-height:15px; font-family:"railwayregular";} #menu li a:hover {color:#ff9f00; } #menu li.active {font-size:18px; color:#fff; background:url(img/bg-rubriques-hover.png) repeat;} #menu li a.active {color:#01b9fd;} #reseaux {position:absolute; display:inline-block; top:500px; right:50px;} #jaime {position:absolute; display:inline-block; top:500px; right:85px;} .reseau {display:inline-block; width:24px; height:24px;} #fb {background:url(img/fb.png) no-repeat 0px 0px;} #copyright {position:relative; bottom:-50px; color:#000!important; font-size:11px; font-family:Helvetica; cursor:default;} #copyright p {text-align:center!important; line-height:1.4;} /* CONTENU /* ---------------------------------------------------------------------------------- */ #conteneur {position:relative; width:590px; left:210px; top:40px; z-index:20;} #main {position:relative; float:left; width:100%; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; padding:20px 20px 20px 20px; margin-bottom:40px; background:url(img/bg-contenu.png) repeat-x;} .ariane {color:#01b9fd; font-size:14px; margin-top:10px; font-family:"railwayregular";} .ariane a {color:#ff9f00; text-decoration:none;} .ariane a:hover {color:#a6612f;} /* filtre */ #filters {margin-top:5px; margin-bottom:10px; padding:5px; overflow:hidden; font-family:"railwayregular"; text-transform:uppercase; background:url(img/bg-filtres.png) repeat-y;} #filters li {float:right;padding-left:5px;} #filters li a {padding:2px 8px; font-size:16px; color:#a6612f !important; background-color:#fff; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;} #filters li a:hover {color:#fff !important; background-color:#ff9f00;} #filters li a.allcats {color:#fff !important; background-color:#01b9fd;} /* fiches */ ul#portfolio-list {padding:0; list-style:none;} ul#portfolio-list li {position:relative; list-style:none; width:auto; height:auto; display:block; float:left; margin-right:10px; margin-bottom:10px; overflow:hidden;} ul#portfolio-list li a {position:relative; display:block; width:185px; height:150px; overflow:hidden;-webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; background:url(img/bg-portfolio.png) repeat;} ul#portfolio-list li p {font-size:11px; color:#a6612f; text-align:center; background:url(img/bg-titre-fiche3.png) repeat-y; padding:2px 10px 2px 10px; margin-bottom:3px;} ul#portfolio-list li img {position:absolute; top:0; border:0px solid #ff9f00; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; width:185px; height:150px;} ul#portfolio-list li h4 {font-size:14px; text-align:center; text-transform:none; color:#fff; font-family:"railwayregular" !important; text-weight:regular!important; padding:10px 5px 5px 0;} /* fiches images only */ ul#portfolio-list2 {padding:0; list-style:none;} ul#portfolio-list2 li {position:relative; list-style:none; width:auto; height:auto; display:block; float:left; margin-right:10px; margin-bottom:10px; overflow:hidden;} ul#portfolio-list2 li a {position:relative; display:block; width:185px; height:150px; overflow:hidden;-webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; background:url(img/bg-portfolio.png) repeat;} ul#portfolio-list2 li img {position:absolute; top:0; border:0px solid #ff9f00; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; width:270px; height:182px;} /* zoom */ .zoom { width:1200px; } .zoom p { text-align:center; } .zoom img { width:592px; } .zoom img:hover { width:1200px; } /* FOOTER /* ---------------------------------------------------------------------------------- */ #retour-top {margin-left:10px; float:left; margin-top:15px; font-family:"railwayregular"; font-size:16px;z-index:999; } #retour-top a {color:#0183fd; text-decoration:none;} #retour-top a:hover {text-decoration:underline;} #retour-top img {margin-left:5px;} /* DEFAUT ( #a6612f =brun / #ff9f00 =orange / #01b9fd =bleu / #d8c292 =beige / #b39071 =brun2 ) /* ---- CONTENT CONTACT---- */ #form {position:relative; width:30%!important; float:left; background:#ff9f00; color:#fff; padding:10px; border-top:3px solid #a6612f;} #form input[type="text"], #form input[type="email"], textarea {width:95%; border:none; -webkit-transition:0.3s; padding:5px;} #form input[type="text"]:focus, #form input[type="email"]:focus, textarea:focus {background:#d9eef8;} #form textarea {height:100px;} #submit {position:absolute; width:100%; bottom:-26px; left:0; border:none; background:#265b99; color:#fff; text-transform:uppercase; font-weight:bold; display:block; margin-top:20px; padding:5px; text-align:center; font-size:14px;} #submit:hover {color:#000} #googlemap {float:right; padding:5px; background-color:#083569; width:60%;} #googlemap iframe {width:100%; vertical-align:top;} .error {background:#d08191!important;} .error::-webkit-input-placeholder {color:#fff!important;} #loading {position:absolute; bottom:40px; right:40px; display:none;} #success {background:#01b9fd!important; color:#fff!important; font-weight:bold; text-align:center; padding:10px; text-transform:uppercase;} } /* ---- Résolution comprise entre 0 et 480px (mobiles) @media screen and (min-width:0px) and (max-width:480px) /* ---------------------------------------------------------------------------------------- */ @media screen and (min-width:0px) and (max-width:480px) { /* TITRES /* ---------------------------------------------------------------------------------- */ #main h1 {font-size:22px;} #main h2 {font-size:14px; color:#d8c292; padding-left:15px; line-height:18px;} .fleche {background:url(img/flech_petite.png) no-repeat; height:10px; width:auto; margin-top:0px;} /* PARAGRAPHES /* ---------------------------------------------------------------------------------- */ #main p {font-size:14px; line-height:14px; color:#a6612f;} /* MENU /* ---------------------------------------------------------------------------------- */ #menu_conteneur {width:120px; height:100%; padding:10px; position:fixed; left:0px; top:0px; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; z-index:999; background:url(img/bg_menu.png) repeat;} #menu {width:120px; margin:0 auto; text-align:center; color:#777;} #menu li {width:120px; height:auto; background:url(img/bg-rubriques.png) repeat; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; margin-bottom:15px; padding:8px 0 5px 0; line-height:15px; } .image_accueil {float:left; max-width: 50%; height: auto; padding: 5px;} #menu li a {color:#a6612f; text-transform:uppercase; font-size:14px; font-weight:bold; line-height:15px; font-family:"railwayregular";} #menu li a:hover {color:#ff9f00; } #menu li.active {font-size:14px; color:#fff; background:url(img/bg-rubriques-hover.png) repeat;} #menu li a.active {color:#01b9fd;} #reseaux {position:absolute; display:inline-block; top:450px; right:30px;} #jaime {position:absolute; display:inline-block; top:450px; right:60px;} .reseau {display:inline-block; width:20px; height:20px;} #fb {background:url(img/fb.png) no-repeat 0px 0px;} #copyright {position:relative; bottom:-20px; color:#000!important; font-size:14px; font-family:Helvetica; cursor:default;} #copyright p {text-align:center!important; line-height:1.4;} /* CONTENU /* ---------------------------------------------------------------------------------- */ #conteneur {position:relative; width:270px; left:150px; top:20px; z-index:20;} #main {position:relative; float:left; width:90%; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; padding:10px 10px 10px 10px; margin-bottom:0px; background:url(img/bg-contenu.png) repeat-x;} .ariane {color:#01b9fd; font-size:14px; margin-top:7px; font-family:"railwayregular";} .ariane a {color:#ff9f00; text-decoration:none;} .ariane a:hover {color:#a6612f;} /* filtre */ #filters {margin-top:20px; margin-bottom:20px; padding:5px; overflow:hidden; font-family:"railwayregular"; text-transform:uppercase; background:url(img/bg-filtres.png) repeat-y;} #filters li {float:right;padding-left:20px;} #filters li a {padding:2px 8px; font-size:16px; color:#a6612f !important; background-color:#fff; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;} #filters li a:hover {color:#fff !important; background-color:#ff9f00;} #filters li a.allcats {color:#fff !important; background-color:#01b9fd;} /* fiches */ ul#portfolio-list {padding:0; list-style:none;} ul#portfolio-list li {position:relative; list-style:none; width:auto; height:auto; display:block; float:left; margin-right:10px; margin-bottom:10px; overflow:hidden;} ul#portfolio-list li a {position:relative; display:block; width:100%; overflow:hidden;-webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; background:url(img/bg-portfolio.png) repeat;} ul#portfolio-list li p {font-size:14px; color:#a6612f; text-align:center; background:url(img/bg-titre-fiche3.png) repeat-y; padding:10px 10px 10px 10px; margin-bottom:10px;} ul#portfolio-list li img {position:absolute; top:0; border:0px solid #ff9f00; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; width:100%;} ul#portfolio-list li h4 {font-size:14px; text-align:center; text-transform:none; color:#fff; font-family:"railwayregular" !important; text-weight:regular!important; padding:10px 10px 10px 10px;} /* fiches images only */ ul#portfolio-list2 {padding:0; list-style:none;} ul#portfolio-list2 li {position:relative; list-style:none; width:auto; height:auto; display:block; float:left; margin-right:10px; margin-bottom:10px; overflow:hidden;} ul#portfolio-list2 li a {position:relative; display:block; width:100%; overflow:hidden;-webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; background:url(img/bg-portfolio.png) repeat;} ul#portfolio-list2 li img {position:absolute; top:0; border:0px solid #ff9f00; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; width:100%;} /* zoom */ .zoom { width:800px; } .zoom p { text-align:center; } .zoom img { width:250px; } .zoom img:hover { width:800px; } /* FOOTER /* ---------------------------------------------------------------------------------- */ #retour-top {margin-left:8px; float:left; margin-top:15px; font-family:"railwayregular"; font-size:14px; z-index:999; } #retour-top a {color:#0183fd; text-decoration:none;} #retour-top a:hover {text-decoration:underline;} #retour-top img {margin-left:5px;} /* DEFAUT ( #a6612f =brun / #ff9f00 =orange / #01b9fd =bleu / #d8c292 =beige / #b39071 =brun2 ) /* ---- CONTENT CONTACT---- */ #form {position:relative; width:90%!important; float:left; background:#ff9f00; color:#fff; padding:10px; border-top:3px solid #a6612f;} #form input[type="text"], #form input[type="email"], textarea {width:95%; border:none; -webkit-transition:0.3s; padding:5px;} #form input[type="text"]:focus, #form input[type="email"]:focus, textarea:focus {background:#d9eef8;} #form textarea {height:100px;} #submit {position:absolute; width:100%; bottom:0px; left:0; border:none; background:#265b99; color:#fff; text-transform:uppercase; font-weight:bold; display:block; margin-top:20px; padding:5px; text-align:center; font-size:14px;} #submit:hover {color:#000} #googlemap {position:relative; width:90%!important; float:left; padding:10px; background-color:#083569; width:90%;} #googlemap iframe {width:100%; vertical-align:top;} .error {background:#d08191!important;} .error::-webkit-input-placeholder {color:#fff!important;} #loading {position:absolute; bottom:40px; right:40px; display:none;} #success {background:#01b9fd!important; color:#fff!important; font-weight:bold; text-align:center; padding:10px; text-transform:uppercase;} }