_start.scss 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. body{
  2. position:relative;
  3. }
  4. .arrow{
  5. width: 0!important;
  6. height: 0;
  7. top: 35px;
  8. left: 50%;
  9. right: 50%;
  10. border: 50px solid white;
  11. border-left-color: transparent;
  12. border-right-color: transparent;
  13. border-bottom-color: transparent;
  14. position: absolute;
  15. transform: translateX(-50%);
  16. }
  17. .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  18. background-color: #964587!important;
  19. }
  20. .mCSB_scrollTools .mCSB_draggerRail{
  21. background-color: $bkg-d!important;
  22. }
  23. #start{
  24. .section{
  25. margin-bottom: 150px;
  26. }
  27. .sous-section{
  28. section{
  29. margin-bottom: 100px;
  30. }
  31. }
  32. section{
  33. position: relative;
  34. h2{
  35. text-align: center;
  36. z-index: 1;
  37. margin-top: -35px;
  38. display: inline-flex;
  39. width: 100%;
  40. align-items: center;
  41. &::after{
  42. right: 0;
  43. content: " ";
  44. width: 50%;
  45. height: 0px;
  46. border: 1px solid $blue;
  47. margin-left: 20px;
  48. }
  49. &::before{
  50. left: 0;
  51. content: " ";
  52. width: 50%;
  53. height: 0px;
  54. border: 1px solid $blue;
  55. margin-right: 20px;
  56. }
  57. }
  58. h3{
  59. width: 100%;
  60. text-align: center;
  61. display: inline-flex;
  62. width: 100%;
  63. align-items: center;
  64. white-space:nowrap;
  65. &::after{
  66. right: 0;
  67. content: " ";
  68. width: 50%;
  69. height: 0px;
  70. border: 2px dashed #8d2815;
  71. margin-left: 20px;
  72. }
  73. &::before{
  74. left: 0;
  75. content: " ";
  76. width: 50%;
  77. height: 0px;
  78. border: 2px dashed #8d2815;
  79. margin-right: 20px;
  80. }
  81. }
  82. .section-content{
  83. & > h3{
  84. margin: 50px auto;
  85. &::before{
  86. border: 0px!important;
  87. }
  88. &::after{
  89. border: 0px!important;
  90. }
  91. }
  92. & > p{
  93. margin: 20px;
  94. width: 50%;
  95. text-align: center;
  96. min-width: 600px;
  97. margin: 50px auto 100px auto;
  98. }
  99. }
  100. }
  101. #home{
  102. width: 40%;
  103. min-width: 700px;
  104. margin-left: auto;
  105. margin-right: auto;
  106. }
  107. .section:not(#home){
  108. background:$section;
  109. & > .sous-section{
  110. display: inline-flex;
  111. flex-wrap: wrap;
  112. justify-content: center;
  113. width: 100%;
  114. & > .no-gal:nth-of-type(odd){
  115. margin-right: 50px;
  116. }
  117. & > .no-gal:nth-of-type(even){
  118. margin-left: 50px;
  119. }
  120. .no-gal:not(#clients){
  121. width: 35%;
  122. min-width: 350px;
  123. &:nth-of-type(n+3){
  124. position: relative;
  125. .title{
  126. position: absolute;
  127. z-index: 1;
  128. transform: rotate(-135deg);
  129. width: 0;
  130. height: 0;
  131. top: -70px;
  132. left: -120px;
  133. border: 70px solid #0f265c;
  134. border-top-color: transparent;
  135. border-right-color: transparent;
  136. border-bottom-color: transparent;
  137. h3{
  138. transform: rotate(90deg);
  139. position: absolute;
  140. top: -75px;
  141. left: -50px;
  142. &:before{
  143. margin-right: 7px;
  144. }
  145. &:after{
  146. margin-left: 0px;
  147. }
  148. }
  149. }
  150. & > .content{
  151. display: none;
  152. }
  153. .images{
  154. height: auto;
  155. position: relative;
  156. .content{
  157. position: absolute;
  158. top: 0;
  159. left: 0;
  160. display: none;
  161. height: 100%;
  162. width: 100%;
  163. background: #0f265c;
  164. p,ul,li{
  165. position: absolute;
  166. top: 50%;
  167. left: 50%;
  168. transform: translateY(-55%) translateX(-50%);
  169. color: white;
  170. }
  171. }
  172. &:hover{
  173. .content{
  174. display: block;
  175. }
  176. }
  177. }
  178. }
  179. .content{
  180. p{
  181. text-align: justify;
  182. }
  183. }
  184. }
  185. section{
  186. width: 100%;
  187. .title{
  188. margin: 0 50px;
  189. }
  190. }
  191. }
  192. }
  193. #m-tier{
  194. h3{
  195. &::before{
  196. border: 0px!important;
  197. }
  198. &::after{
  199. border: 0px!important;
  200. }
  201. }
  202. }
  203. #r-f-rences{
  204. h3{
  205. margin-bottom: 100px;
  206. }
  207. #clients{
  208. .images{
  209. display: inline-flex;
  210. flex-wrap: wrap;
  211. align-items: center;
  212. justify-content: center;
  213. img{
  214. margin: 0 20px;
  215. width: 15%;
  216. min-width: 150px;
  217. height: 100%;
  218. }
  219. }
  220. }
  221. }
  222. #contact{
  223. background: transparent!important;
  224. margin-bottom: 0!important;
  225. h2{
  226. background: transparent!important;
  227. }
  228. & > div {
  229. display: inline-flex;
  230. flex-wrap: wrap;
  231. justify-content: center;
  232. align-items: center;
  233. width: 100%;
  234. p{
  235. width: 40%;
  236. &:nth-of-type(1){
  237. text-align: right;
  238. margin-right: 50px;
  239. }
  240. &:nth-of-type(2){
  241. text-align: left;
  242. }
  243. img{
  244. margin-bottom: 20px;
  245. border-radius: 150px;
  246. width: 10%;
  247. min-width: 180px;
  248. height: auto;
  249. }
  250. }
  251. section{
  252. width: 50%
  253. }
  254. }
  255. }
  256. }