|
@@ -1,7 +1,11 @@
|
|
|
+body{
|
|
|
+ position:relative;
|
|
|
+}
|
|
|
+
|
|
|
.arrow{
|
|
|
width: 0!important;
|
|
|
height: 0;
|
|
|
- top: 40px;
|
|
|
+ top: 35px;
|
|
|
left: 50%;
|
|
|
right: 50%;
|
|
|
border: 50px solid white;
|
|
@@ -19,224 +23,230 @@
|
|
|
background-color: $bkg-d!important;
|
|
|
}
|
|
|
|
|
|
-body{
|
|
|
- position:relative;
|
|
|
- padding-bottom: 20px;
|
|
|
-}
|
|
|
-
|
|
|
#start{
|
|
|
- &>section:last-child{
|
|
|
- margin-bottom: 0!important;
|
|
|
+ .section{
|
|
|
+ margin-bottom: 150px;
|
|
|
+ }
|
|
|
+ .sous-section{
|
|
|
+ section{
|
|
|
+ margin-bottom: 100px;
|
|
|
+ }
|
|
|
}
|
|
|
section{
|
|
|
position: relative;
|
|
|
- margin-top: -10px;
|
|
|
- margin-bottom: 100px;
|
|
|
- padding-top: 5px;
|
|
|
- & > h2, & > h3{
|
|
|
+ h2{
|
|
|
text-align: center;
|
|
|
+ z-index: 1;
|
|
|
+ margin-top: -35px;
|
|
|
+ display: inline-flex;
|
|
|
+ width: 100%;
|
|
|
+ align-items: center;
|
|
|
+ &::after{
|
|
|
+ right: 0;
|
|
|
+ content: " ";
|
|
|
+ width: 50%;
|
|
|
+ height: 0px;
|
|
|
+ border: 1px solid $blue;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ &::before{
|
|
|
+ left: 0;
|
|
|
+ content: " ";
|
|
|
+ width: 50%;
|
|
|
+ height: 0px;
|
|
|
+ border: 1px solid $blue;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
h3{
|
|
|
width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-flex;
|
|
|
+ width: 100%;
|
|
|
+ align-items: center;
|
|
|
+ white-space:nowrap;
|
|
|
+ &::after{
|
|
|
+ right: 0;
|
|
|
+ content: " ";
|
|
|
+ width: 50%;
|
|
|
+ height: 0px;
|
|
|
+ border: 2px dashed #8d2815;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ &::before{
|
|
|
+ left: 0;
|
|
|
+ content: " ";
|
|
|
+ width: 50%;
|
|
|
+ height: 0px;
|
|
|
+ border: 2px dashed #8d2815;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- h2{
|
|
|
- z-index: 1;
|
|
|
- margin-top: -35px;
|
|
|
- display: inline-flex;
|
|
|
- width: 100%;
|
|
|
- align-items: center;
|
|
|
- &::after{
|
|
|
- right: 0;
|
|
|
- content: " ";
|
|
|
- width: 50%;
|
|
|
- height: 0px;
|
|
|
- border: 1px solid $blue;
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
- &::before{
|
|
|
- left: 0;
|
|
|
- content: " ";
|
|
|
- width: 50%;
|
|
|
- height: 0px;
|
|
|
- border: 1px solid $blue;
|
|
|
- margin-right: 20px;
|
|
|
+ .section-content{
|
|
|
+ & > h3{
|
|
|
+ margin: 50px auto;
|
|
|
+ &::before{
|
|
|
+ border: 0px!important;
|
|
|
+ }
|
|
|
+ &::after{
|
|
|
+ border: 0px!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & > p{
|
|
|
+ margin: 20px;
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ min-width: 600px;
|
|
|
+ margin: 50px auto 100px auto;
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
#home{
|
|
|
width: 40%;
|
|
|
min-width: 700px;
|
|
|
- margin: 0 auto 100px auto;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
}
|
|
|
- #m-tier{
|
|
|
- & > div{
|
|
|
+ .section:not(#home){
|
|
|
background:$section;
|
|
|
+ & > .sous-section{
|
|
|
display: inline-flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: center;
|
|
|
- h3{
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- & > section:nth-of-type(odd){
|
|
|
+ width: 100%;
|
|
|
+ & > .no-gal:nth-of-type(odd){
|
|
|
margin-right: 50px;
|
|
|
}
|
|
|
- & > section:nth-of-type(even){
|
|
|
+ & > .no-gal:nth-of-type(even){
|
|
|
margin-left: 50px;
|
|
|
}
|
|
|
- section{
|
|
|
- width: 35%;
|
|
|
- min-width: 350px;
|
|
|
- &:nth-of-type(n+3){
|
|
|
- position: relative;
|
|
|
- .title{
|
|
|
- position: absolute;
|
|
|
- z-index: 1;
|
|
|
- transform: rotate(-135deg);
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- top: -65px;
|
|
|
- left: -70px;
|
|
|
- border: 70px solid #0f265c;
|
|
|
- border-top-color: transparent;
|
|
|
- border-right-color: transparent;
|
|
|
- border-bottom-color: transparent;
|
|
|
- h3{
|
|
|
- transform: rotate(90deg);
|
|
|
+ .no-gal:not(#clients){
|
|
|
+ width: 35%;
|
|
|
+ min-width: 350px;
|
|
|
+ &:nth-of-type(n+3){
|
|
|
+ position: relative;
|
|
|
+ .title{
|
|
|
position: absolute;
|
|
|
- top: -75px;
|
|
|
- left: -50px;
|
|
|
+ z-index: 1;
|
|
|
+ transform: rotate(-135deg);
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ top: -70px;
|
|
|
+ left: -120px;
|
|
|
+ border: 70px solid #0f265c;
|
|
|
+ border-top-color: transparent;
|
|
|
+ border-right-color: transparent;
|
|
|
+ border-bottom-color: transparent;
|
|
|
+ h3{
|
|
|
+ transform: rotate(90deg);
|
|
|
+ position: absolute;
|
|
|
+ top: -75px;
|
|
|
+ left: -50px;
|
|
|
+ &:before{
|
|
|
+ margin-right: 7px;
|
|
|
+ }
|
|
|
+ &:after{
|
|
|
+ margin-left: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- & > .content{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .images{
|
|
|
- height: auto;
|
|
|
- position: relative;
|
|
|
- .content{
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- display: none;
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- background: #0f265c;
|
|
|
- p,ul,li{
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translateY(-55%) translateX(-50%);
|
|
|
- color: white;
|
|
|
+ & > .content{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .images{
|
|
|
+ height: auto;
|
|
|
+ position: relative;
|
|
|
+ .content{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ display: none;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background: #0f265c;
|
|
|
+ p,ul,li{
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateY(-55%) translateX(-50%);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ .content{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- &:hover{
|
|
|
- .content{
|
|
|
- display: block;
|
|
|
+ .content{
|
|
|
+ p{
|
|
|
+ text-align: justify;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .content{
|
|
|
- p{
|
|
|
- text-align: justify;
|
|
|
+ section{
|
|
|
+ width: 100%;
|
|
|
+ .title{
|
|
|
+ margin: 0 50px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .filet{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
- #r-f-rences{
|
|
|
+
|
|
|
+ #m-tier{
|
|
|
h3{
|
|
|
- display: inline-flex;
|
|
|
- width: 100%;
|
|
|
- align-items: center;
|
|
|
- white-space:nowrap;
|
|
|
- &::after{
|
|
|
- right: 0;
|
|
|
- content: " ";
|
|
|
- width: 50%;
|
|
|
- height: 0px;
|
|
|
- border: 2px dashed #8d2815;
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
&::before{
|
|
|
- left: 0;
|
|
|
- content: " ";
|
|
|
- width: 50%;
|
|
|
- height: 0px;
|
|
|
- border: 2px dashed #8d2815;
|
|
|
- margin-right: 20px;
|
|
|
+ border: 0px!important;
|
|
|
}
|
|
|
- }
|
|
|
- & > div{
|
|
|
- background: $section;
|
|
|
- & > p{
|
|
|
- width: 50%;
|
|
|
- text-align: center;
|
|
|
- min-width: 600px;
|
|
|
- margin: 0px auto 0px auto;
|
|
|
- }
|
|
|
- .title{
|
|
|
- margin-bottom: 50px;
|
|
|
- }
|
|
|
- section{
|
|
|
- &:last-child{
|
|
|
- p{
|
|
|
- display: inline-flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- img{
|
|
|
- margin: 0 20px;
|
|
|
- width: 15%;
|
|
|
- min-width: 150px;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
+ &::after{
|
|
|
+ border: 0px!important;
|
|
|
}
|
|
|
}
|
|
|
- #recommandations{
|
|
|
+ }
|
|
|
+ #r-f-rences{
|
|
|
+ h3{
|
|
|
+ margin-bottom: 100px;
|
|
|
}
|
|
|
#clients{
|
|
|
.images{
|
|
|
- margin: 0 50px;
|
|
|
display: inline-flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- margin-bottom: 50px;
|
|
|
- flex-wrap: wrap;
|
|
|
img{
|
|
|
- width: 10%;
|
|
|
- min-width: 200px;
|
|
|
- margin-bottom: 20px;
|
|
|
- &:not(:first-child){
|
|
|
- margin-left: 20px;
|
|
|
+ margin: 0 20px;
|
|
|
+ width: 15%;
|
|
|
+ min-width: 150px;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-}
|
|
|
#contact{
|
|
|
+ background: transparent!important;
|
|
|
+ margin-bottom: 0!important;
|
|
|
+ h2{
|
|
|
+ background: transparent!important;
|
|
|
+ }
|
|
|
& > div {
|
|
|
display: inline-flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
width: 100%;
|
|
|
- p{
|
|
|
- width: 40%;
|
|
|
- &:nth-of-type(1){
|
|
|
- text-align: right;
|
|
|
- margin-right: 50px;
|
|
|
- }
|
|
|
- // &:nth-of-type(2){
|
|
|
- // text-align: left;
|
|
|
- // margin-left: 20px;
|
|
|
- // }
|
|
|
+ p{
|
|
|
+ width: 40%;
|
|
|
+ &:nth-of-type(1){
|
|
|
+ text-align: right;
|
|
|
+ margin-right: 50px;
|
|
|
+ }
|
|
|
+ &:nth-of-type(2){
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
img{
|
|
|
margin-bottom: 20px;
|
|
|
border-radius: 150px;
|