html, body {
margin: 0;
padding: 0;
font-family: 'Roboto';
/*font-size: 10px;*/
letter-spacing: 1.7px;
color: #2a2a2a;
}
html {
background: #e8f6f7;
}
div.vigtt_hm00 {
width:12.5%;float:left;margin-top:0;margin-left:0;z-index:1;opacity: 0;position:relative;
}
div.vigtt_hm01 {
animation: vigtt_hm 10.5s;
}
div.vigtt_hm02 {
animation: vigtt_hm 6s;
}
div.vigtt_hm03 {
animation: vigtt_hm 6.5s;
}
div.vigtt_hm04 {
animation: vigtt_hm 7s;
}
div.vigtt_hm05 {
animation: vigtt_hm 7.5s;
}
div.vigtt_hm06 {
animation: vigtt_hm 8s;
}
div.vigtt_hm07 {
animation: vigtt_hm 8.5s;
}
div.vigtt_hm08 {
animation: vigtt_hm 9s;
}
div.vigtt_hm09 {
animation: vigtt_hm 9.5s;
}
div.vigtt_hm10 {
animation: vigtt_hm 10s;
}
@keyframes vigtt_hm {
0% {
z-index:999;
opacity: 1;
}
50% {
z-index:999;
opacity: 1;
}
100% {
z-index:1;
opacity: 0;
}
}
div.titre_t {
position: absolute;
top: 0;
left: 0;
z-index: 400;
height:5rem;
width:100%;
margin:0;
margin-bottom:1rem;
padding:0;
background:#f5fafa;
}
h1.titre_t {
height:2rem;
width:75%;
margin:0.5rem;
margin-left:25%;
padding:0;
color: #000;
text-align: center;
font-size: 2rem;
}
h2.titre_t {
height: 1em;
margin:0.5rem;
width:75%;
margin:0.5rem;
margin-left:25%;
padding:0;
color: #222;
text-align: center;
font-size: 1em;
}
.menu {
position: absolute;
top: 0;
left: 0;
background-color: #262626;
height:3rem;
width:3rem;
cursor: pointer;
transition: 0.3s;
z-index: 800;
}
.menu span {
position: absolute;
height: 3px;
width: 25px;
background-color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: 0.3s;
}
.menu span:before {
content: '';
position: absolute;
top: -8px;
background-color: #fff;
height: 3px;
width: 25px;
transition: 0.3s;
}
.menu span:after {
content: '';
position: absolute;
top: 8px;
background-color: #fff;
height: 3px;
width: 25px;
transition: 0.3s;
}
.menu.active span {
background-color: transparent;z-index: 800;
}
.menu.active span:before {
transform: rotate(45deg);
top: 0;
}
.menu.active span:after {
transform: rotate(-45deg);top: 0;
}
.navbar-menu {
background-color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
transform: translateX(-100%);
transition: 0.5s;
z-index: 700;
}
.navbar-menu.active {
transform: translateX(0);
transition: 0.5s;
}
.navbar-menu .menu-listing {
padding: 0;margin: 0;
text-align: right;
}
.menu-listing li {
display: inline-block;
z-index: 700;
}
.menu-listing li a {
background-color: #fff;
color: #262626;
display: block;
font-size: 1rem;
height: 50px;
line-height: 50px;
padding: 0 20px;
letter-spacing: 1px;
text-decoration: none;
transition: 0.5s;
z-index: 700;
}
.menu-listing li a:hover {
background-color: #262626;
color: #fff;
transition: 0.5s;
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
div.cadre00{
position:absolute;top:0;left:0;width:100%;
}
#slider2 {
position: relative;
overflow: hidden;
margin: 6rem auto 0 auto;
height:42rem;
z-index: 300;
}
#slider3 {
position: relative;
overflow: hidden;
margin: 6rem auto 0 auto;
z-index: 300;
}
div.img_all22{
float:left;
width:31%;
margin:1%;
}
img.img_all{
position: relative;
width:100%;
margin:1rem auto 1rem auto;
z-index: 300;
}
#slider2 ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 300;
}
#slider2 ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 52rem;
background-color:#cdf5f6;
text-align: center;
line-height: 300px;
z-index: 300;
}
div.slider22 {
width:100%;
position:relative;
top:0;
}
img.slider22i {
margin:0;
padding:0;
width:100%;
}
div.slider222 {
z-index:50;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
#slider2 ul li img.img_pp {
position: relative;
height:95%;
margin:1rem auto 1rem auto;
z-index: 300;
}
div.txt2 p {
font-size: 1rem;
margin:1rem;
margin-right:2rem;
margin-left:2rem;
}
#slider2 ul li div.desc_pp0 {
width:1%;
opacity: 0;
}
#slider2 ul li div.desc_pp {
z-index:50;
background-color:white;
position:absolute;
top:70%;left:5%;
text-align: left;
line-height: 3rem;
padding:0.5rem;
padding-left:2rem;
padding-right:2rem;
/*animation: anim_desc_pp 5s linear;*/
}
#slider3 div.desc_pp {
z-index:50;
background-color:white;
position:absolute;
top:70%;left:5%;
text-align: left;
line-height: 3rem;
padding:0.5rem;
padding-left:2rem;
padding-right:2rem;
/*animation: anim_desc_pp 5s linear;*/
}
a.control_prev, a.control_next {
position: absolute;
top: 40%;
z-index: 500;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
.slider_pp_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}
.lightbox__container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0 50px;
}
p.pcontact {
width:60%;
margin-left:20%;
}
p.pcontact_err {
width:60%;
margin-left:20%;
}
legend.lcontact {
font-size: 1rem;
}
p.pcontact label {
display:block;
width:40%;
margin:0;
font-size: 2rem;
}
p.pcontact_err label {
display:block;
width:80%;
margin:0;
font-size: 2rem;
}
input.icontact {
width:100%;
margin:0;
height:3rem;
}
textarea.icontact {
width:100%;
margin:0;
height:8rem;
}
p.pcontact span {
font-size:2rem;
}
p.msg_err {
position:absolute;
z-index:900;
background:white;
color:red;
margin-top:3rem;
padding:0.5rem;
}
.form-contact-button {
position:relative;
background-color: #1255a2;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
font-size: 1.2rem;
cursor: pointer;
z-index:899;
}
.form-contact-button:hover {
background-color: #1872D9;
font-size: 1.2rem;
}
@media screen and (max-width: 1280px) {
html {
background: #e8f6f7;
}
}
@media screen and (max-width: 1024px) {
html {
background: #e8f6f7;
}
}
@media screen and (max-width: 1000px) {
html {
margin: 0;
padding: 0;
font-size:45%;
background: #e8f6f7;
}
.navbar-menu {
height: auto;
}
.menu-listing li {
display: block;
}
.navbar-menu .menu-listing {
text-align: center;
}
.menu {
position: absolute;
top: 0;stat
left: 0;
background-color: #262626;
height:9rem;
width:9rem;
cursor: pointer;
transition: 0.3s;
}
.menu-listing li a {
font-size: 2.5rem;
}
.navbar-menu {
height: auto;
z-index: 700;
}
.menu-listing li {
display: block;
}
.navbar-menu .menu-listing {
text-align: center;
}
.banner-info h1 {
font-size: 2rem;
}
div.vigtt_hm00 {
width:25%;
float:left;
margin-top:0;
margin-left:0;
z-index:1;
opacity: 0;
}
div.titre_t {
position: absolute;
top: 0;
left: 0;
z-index: 400;
height:5rem;
width:100%;
margin:0;
margin-bottom:1rem;
padding:0;
background:#f5fafa;
}
h1.titre_t {
height:3rem;
width:100%;
margin:0.5rem;
padding:0; color: #000;
text-align: center;
font-size: 3rem;
}
h2.titre_t {
height: 2rem;
margin:0.5rem;
width:100%;
padding:0;
color: #222;
text-align: center;
font-size: 2em;
}
#slider2 {
position: relative;
overflow: hidden;
margin: 0 auto 0 auto;
padding:0;
margin-top:15rem;
width:95%;
}
#slider3 {
position: relative;
overflow: hidden;
margin: 0 auto 0 auto;
padding:0;
margin-top:15rem;
width:95%;
}
div.img_all22{
float:left;
width:98%;
margin:1%;
}
img.img_all{
position: relative;
width:100%;
margin:1rem auto 1rem auto;
z-index: 300;
}
ul.slider2_ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
li.slider2_li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 60em;
background: #cdf5f6;
text-align: center;
line-height: 300px;
}
#slider2 ul li img.img_pp {
position: relative;
height:95%;
margin:1rem;
}
div.txt2 p {
font-size: 2rem;
margin:1rem;
margin-right:2rem;
margin-left:2rem;
}
p.pcontact {
width:100%;margin-left:0;
}
legend.lcontact {
font-size: 2rem;
}
p.pcontact label {
font-size:2rem;
}
p.pcontact span {
font-size:2rem;
}
p.msg_err {
background:white;
font-color:red;
margin-top:10rem;
}
.form-contact-button {
font-size: 2.5rem;
}
.form-contact-button:hover {
font-size: 2.5rem;
}
}
}
Pierre Rocheteau Art
Pierre Rocheteau Art
Avec le fusain ça fuse un max !!