html{
margin:0;
padding:0;
height:100%;
}
body {
margin:0;
padding:0;
height:100%;
background-color:#d1ceec;
background-image:url('./fond1.png');
color:#1b154f;
font-family:Tahoma;
min-width:500px;
}
.central {
margin:auto;
width:100%;
max-width:2000px;
height:100%;
}
.mixup {
position: relative;
margin:0;
padding:0;
/**min-height:300px;**/
z-index:2;
}
.logo{
position:fixed;
top:0px;
width:100%;
z-index:1;
}
.logo img{
display:block;
margin-right:auto;
margin-left:auto;
margin-top:20px;
width:300px;
}
.voidlogo{
height:200px;
}
.voidlogo2{
height:280px;
}
.bordclinch1 {
height:9px;
width:100%;
background-image: url("./clinch1.png");
}
.bordclinch2 {
height:9px;
width:100%;
background-image: url("./clinch2.png");
}
.bordclinch3 {
height:27px;
width:100%;
background-image: url("./clinch3.png");
background-position:0px 0px;
animation: bisbordclinch3 8s infinite;
}
.bordclinch4 {
height:27px;
width:100%;
background-image: url("./clinch4.png");
background-position:0px 0px;
animation: bisbordclinch3 8s infinite;
}
@keyframes bisbordclinch3 {
from {background-position:0px 0px;}
to {background-position:459px 0px;}
}
.exclinch {
background-color:#b0acd9;
margin:0px;
width:100%;
}
.mixup h1{
transition: all 1s ease;
font-size:1.3em;
margin:0px;
padding:4px;
}
.mixup h1:hover {
text-shadow: 0px 4px rgba(255, 255, 255, 0.4);
}
.mixup h1:hover .mininc{
transform: rotate(-8deg);
box-shadow: 0px 0px 5px 15px rgba(255, 255, 255, 0.7);
}
h1 .mininc{
width:80px;
border:1px solid #000;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.7);
transform: rotate(-17deg);
margin:4px;
transition: all 0.7s ease;
}
.panr {
font-size:1.1em;
padding:5px;
border: 3px solid #1b154f;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.6);
}
/** Menu de choix**/
.menusel{
padding-top:10px;
padding-bottom:10px;
margin-right:auto;
margin-left:auto;
width:100%;
text-align:center;
}
.menusel div{
display:inline-block;
padding:15px;
font-weight:bold;
font-size:1.3em;
cursor:pointer;
}
.menusel div:hover{
}
.menusel div img{
opacity:0.9;
border-radius: 5px;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.7);
transition: all 0.3s linear;
}
.menusel div:hover img{
opacity:1;
box-shadow: 0px 0px 5px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s linear;
}
.menusel div span{
display:block;
background-color: rgba(255, 255, 255, 0);
border-radius: 5px;
transition: all 0.3s linear;
padding:4px;
}
.menusel div:hover span{
color:#000000;
background-color: rgba(255, 255, 255, 0.7);
transition: all 0.3s linear;
}
/**PART2**/
.exclinch2 {
background-color:#d1ceec;
background-image:url('./fond1.png');
margin:0px;
margin-right:auto;
margin-left:auto;
width:100%;
text-align:center;
}
.exclinch3 {
background-color:#e7e5f4;
background-image:url('./fond3.png');
margin:0px;
margin-right:auto;
margin-left:auto;
width:100%;
text-align:center;
}
.corpsinfo{
margin-right:auto;
margin-left:auto;
width:700px;
text-align:left;
}
.corpsinfo p{
font-size:1.3em;
margin:0px;
padding:4px;
text-align: justify;
transition: all 0.7s linear;
background-color: rgba(255, 255, 255, 0);
border-radius: 10px;
}
.corpsinfo p:hover{
transition: all 0.7s linear;
background-color: rgba(255, 255, 255, 0.7);
}
/** CLIENTS **/
.soc1 {
height:980px;
}
.soc2 {
font-size:1.3em;
padding:20px;
position:absolute;
margin-left:60px;
margin-top:40px;
border: 3px solid #1b154f;
border-radius: 10px;
transition: all 1s ease;
background-color: rgba(255, 255, 255, 0.6);
}
.soc2:hover, .nco:hover{
background-color: rgba(255, 255, 255, 1);
transform: scale(1.2) rotate(4deg) translate(10px);
}
.soc3{
display:block;
position:absolute;
margin-top:20px;
margin-left:290px;
}
.soc4 {
display:block;
position:absolute;
margin-left:50px;
border: 1px solid #1b154f;
border-radius: 10px;
transition: all 1s ease;
}
.soc4:hover, .soc5:hover, .soc6:hover, .soc7:hover, .soc8:hover, .soc9:hover{
transform: scale(1.3) rotate(15deg) translate(20px);
}
.soc5 {
display:block;
position:absolute;
margin-left:0px;
margin-top:400px;
transition: all 1s ease;
}
.soc6 {
display:block;
position:absolute;
margin-left:100px;
margin-top:440px;
transition: all 1s ease;
border: 1px solid #1b154f;
border-radius: 10px;
}
.soc7 {
display:block;
position:absolute;
margin-left:40px;
margin-top:600px;
transition: all 1s ease;
border: 1px solid #1b154f;
border-radius: 10px;
}
.soc8 {
display:block;
position:absolute;
margin-left:60px;
margin-top:680px;
transition: all 1s ease;
border: 1px solid #1b154f;
border-radius: 10px;
}
.soc9 {
display:block;
position:absolute;
margin-left:-100px;
margin-top:840px;
transition: all 1s ease;
border: 1px solid #1b154f;
border-radius: 10px;
}
/** NOUS CONTACTER **/
.divb4{
height:350px;
}
.nco{
margin-top:20px;
display:block;
position:absolute;
padding:10px;
background-color: rgba(255, 255, 255, 0.6);
border: 3px solid #1b154f;
border-radius: 10px;
transition: all 1s ease;
z-index:4;
}
.framie{
z-index:3;
display:block;
position:absolute;
border-radius: 10px;
margin-left:230px;
width:400px;
height:300px;
}
/**MAT AND DISTR**/
.mad2{
display:block;
margin-left:auto;
margin-right:auto;
transition: all 1s ease;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.7);
}
.mad2:hover{
transform: scale(1.3);
box-shadow: 0px 0px 5px 10px rgba(0, 0, 0, 0.2);
}
/**DEV**/
.picdev{
display:block;
margin-left:auto;
margin-right:auto;
}
/**MINI-MENU**/
.minimenu{
position:fixed;
z-index:9;
top: calc(50% - 150px);
margin-left:12px;
}
.minimenufond{
position:absolute;
height:573px;
width:77px;
margin-left:-12px;
margin-top:-100px;
background: url(sousmenu.png) no-repeat;
}
.minimenu .mininc{
display:block;
position:relative;
width:80px;
border:1px solid #000;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.7);
transform: rotate(-17deg);
margin:10px;
margin-top:20px;
cursor:pointer;
transition: all 1s ease;
z-index:10;
}
.luciole{
display:block;
position:relative;
width:80px;
border:1px solid #000;
margin:10px;
margin-top:20px;
cursor:pointer;
transition: all 1s ease;
transform: rotate(0deg);
z-index:11;
box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.7);
transform: scale(1.5);
}
.minimenu .mininc:hover{
transform: rotate(0deg);
z-index:12;
box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.7);
transform: scale(1.5);
}
.m01{
position:fixed;
display:none;
bottom:0px;
opacity:0.2;
z-index:15;
width:100%;
height:400px;
background: url(01.png) bottom repeat-x;
background-size: 100px;
}
.m10{
position:fixed;
display:none;
top:0px;
opacity:0.2;
z-index:15;
width:100%;
height:400px;
background: url(10.png) top repeat-x;
background-size: 100px;
}
.footerpub{
position:fixed;
height:1.3em;
z-index:10;
background-color:#000;
color:#fff;
width:100%;
text-align:center;
opacity:0.8;
bottom:0px;
}
.footerpub a{
color:#fff;
}
/** Responsive **/
/** MEDIUM PLUS **/
@media only screen and (min-width: 701px) and (max-width: 1040px) {
.minimenufond{
margin-left:-15px;
background-size:50px;
margin-top:-60px;
}
.minimenu .mininc, .luciole{
width:40px;
}
h1 .mininc{
width:50px;
}
.menusel{
width:500px;
}
.corpsinfo{
width:540px;
}
.framie{
width:330px;
height:300px;
margin-left:230px;
}
}
/** MOBILE **/
@media only screen and (max-width: 700px) {
body {
min-width:300px;
}
.central {
font-size:0.9em;
margin:auto;
width:100%;
}
.voidlogo{
height:280px;
}
.logo{
position:absolute;
}
.logo img{
margin-top:100px;
}
h1 .mininc{
display:none;
}
#div1 .bordclinch1{
display: none;
}
#diva1{
display: none;
}
#div2 .voidlogo2, #div3 .voidlogo2, #div4 .voidlogo2{
height:80px;
background-image:url('./fond1.png');
}
.divb4{
display:none;
}
#diva4 .corpsinfo{
height:550px;
}
.divb4{
display:none;
}
.corpsinfo{
width:296px;
}
.footerpub{
display:none;
}
.minimenu{
position:fixed;
top:0px;
left:0px;
right:0px;
text-align:center;
}
.minimenufond{
position:absolute;
height:40px;
width:100%;
background: none;
background-color:#1b154f;
margin-top:10px;
margin-left:10px;
margin-right:10px;
}
.minimenu .mininc{
display:inline-block;
width:60px;
}
.luciole{
width:60px;
display:inline-block;
}
.menusel{
width:100%;
}
.soc1 {
height:1600px;
}
.soc2 {
position:relative;
margin-left:0px;
left:10px;
right:10px;
}
.soc2:hover, .nco:hover{
transform: scale(1) rotate(0deg) translate(0px);
}
.soc3{
position:relative;
margin:0px;
}
.soc4 {
display:block;
position:absolute;
margin-left:50px;
margin-top:10px;
border: 1px solid #1b154f;
border-radius: 10px;
transition: all 1s ease;
}
.soc4:hover, .soc5:hover, .soc6:hover, .soc7:hover, .soc8:hover, .soc9:hover{
transform: scale(1) rotate(0deg) translate(0px);
}
.soc5 {
display:block;
position:absolute;
margin-left:0px;
margin-top:150px;
transition: all 1s ease;
}
.soc6 {
display:block;
position:absolute;
margin-left:100px;
margin-top:180px;
transition: all 1s ease;
border: 1px solid #1b154f;
border-radius: 10px;
}
.soc7 {
display:block;
position:absolute;
margin-left:40px;
margin-top:330px;
transition: all 1s ease;
border: 1px solid #1b154f;
border-radius: 10px;
}
.soc8 {
display:block;
position:absolute;
margin-left:60px;
margin-top:400px;
transition: all 1s ease;
border: 1px solid #1b154f;
border-radius: 10px;
}
.soc9 {
display:block;
position:absolute;
margin-left:80px;
margin-top:600px;
transition: all 1s ease;
border: 1px solid #1b154f;
border-radius: 10px;
}
.framie{
display:block;
width:250px;
height:250px;
margin-top:200px;
margin-left:0px;
}
.picdev{
width:280px;
}
.bordclinch1, .bordclinch2{
display:none;
}
}