You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

487 line
5.7 KiB

  1. @charset "utf-8";
  2. /* CSS Document */
  3. /******************************
  4. [Table of Contents]
  5. 1. 1600px
  6. 2. 1440px
  7. 3. 1280px
  8. 4. 1199px
  9. 5. 1024px
  10. 6. 991px
  11. 7. 959px
  12. 8. 880px
  13. 9. 768px
  14. 10. 767px
  15. 11. 539px
  16. 12. 479px
  17. 13. 400px
  18. ******************************/
  19. @media only screen and (max-width: 1600px)
  20. {
  21. }
  22. /************
  23. 2. 1440px
  24. ************/
  25. @media only screen and (max-width: 1440px)
  26. {
  27. .main_slider_nav_left
  28. {
  29. top: auto;
  30. left: auto;
  31. right: 79px;
  32. bottom: 14px;
  33. -webkit-transform: transform: none;
  34. -moz-transform: transform: none;
  35. -ms-transform: transform: none;
  36. -o-transform: transform: none;
  37. transform: none;
  38. }
  39. .main_slider_nav_right
  40. {
  41. top: auto;
  42. left: auto;
  43. right: 39px;
  44. bottom: 14px;
  45. -webkit-transform: transform: none;
  46. -moz-transform: transform: none;
  47. -ms-transform: transform: none;
  48. -o-transform: transform: none;
  49. transform: none;
  50. }
  51. .main_slider_shapes
  52. {
  53. right: 10%;
  54. }
  55. }
  56. /************
  57. 3. 1380px
  58. ************/
  59. @media only screen and (max-width: 1380px)
  60. {
  61. }
  62. /************
  63. 3. 1280px
  64. ************/
  65. @media only screen and (max-width: 1280px)
  66. {
  67. .super_container
  68. {
  69. padding-left: 0px;
  70. padding-right: 0px;
  71. }
  72. .main_slider_shapes
  73. {
  74. right: 5%;
  75. }
  76. }
  77. /************
  78. 4. 1199px
  79. ************/
  80. @media only screen and (max-width: 1199px)
  81. {
  82. }
  83. /************
  84. 4. 1100px
  85. ************/
  86. @media only screen and (max-width: 1100px)
  87. {
  88. .test_slider_nav_left
  89. {
  90. left: 15px;
  91. }
  92. .test_slider_nav_right
  93. {
  94. right: 15px;
  95. }
  96. }
  97. /************
  98. 5. 1024px
  99. ************/
  100. @media only screen and (max-width: 1024px)
  101. {
  102. }
  103. /************
  104. 6. 991px
  105. ************/
  106. @media only screen and (max-width: 991px)
  107. {
  108. h1{font-size: 48px;}
  109. .main_nav
  110. {
  111. display: none;
  112. }
  113. .main_slider_shapes
  114. {
  115. display: none;
  116. }
  117. .hamburger_container
  118. {
  119. display: block;
  120. }
  121. .discover_button
  122. {
  123. margin-top: 37px;
  124. }
  125. .home_social_container
  126. {
  127. right: 0;
  128. }
  129. .hero_slider_container
  130. {
  131. height: calc(100vh - 110px);
  132. }
  133. .features_col
  134. {
  135. padding-bottom: 0px;
  136. }
  137. .features_col:last-child
  138. {
  139. padding-bottom: 120px;
  140. }
  141. .about_text
  142. {
  143. padding-right: 0px;
  144. }
  145. .skills_container
  146. {
  147. margin-top: 50px;
  148. }
  149. .test_slider_nav_left
  150. {
  151. left: -48px;
  152. }
  153. .test_slider_nav_right
  154. {
  155. right: -48px;
  156. }
  157. .service_item
  158. {
  159. margin-bottom: 50px;
  160. }
  161. .service_item h3
  162. {
  163. margin-bottom: 15px;
  164. }
  165. .icon_container
  166. {
  167. margin-bottom: 30px;
  168. }
  169. .services_button
  170. {
  171. margin-top: 40px;
  172. margin-left: 0px;
  173. margin-right: 0px;
  174. }
  175. }
  176. /************
  177. 7. 959px
  178. ************/
  179. @media only screen and (max-width: 959px)
  180. {
  181. }
  182. /************
  183. 8. 880px
  184. ************/
  185. @media only screen and (max-width: 880px)
  186. {
  187. }
  188. /************
  189. 9. 768px
  190. ************/
  191. @media only screen and (max-width: 768px)
  192. {
  193. }
  194. /************
  195. 10. 767px
  196. ************/
  197. @media only screen and (max-width: 767px)
  198. {
  199. .main_slider_content
  200. {
  201. width: 100%;
  202. }
  203. .main_slider_nav
  204. {
  205. display: none;
  206. }
  207. .test_slider_nav
  208. {
  209. display: none !important;
  210. }
  211. .testimonials_content
  212. {
  213. padding-left: 15px;
  214. padding-right: 15px;
  215. }
  216. .footer_social li
  217. {
  218. margin-left: 4px;
  219. }
  220. .footer_social li i
  221. {
  222. font-size: 13px;
  223. }
  224. }
  225. /************
  226. 11. 575px
  227. ************/
  228. @media only screen and (max-width: 575px)
  229. {
  230. h2{font-size:24px;}
  231. p{font-size:14px;}
  232. .header
  233. {
  234. padding-left: 15px;
  235. padding-right: 15px;
  236. }
  237. .logo
  238. {
  239. margin-left: 4px;
  240. }
  241. .fs_menu_shapes
  242. {
  243. width: 30%;
  244. bottom: 35px;
  245. left: -30px;
  246. }
  247. .fs_menu_list li a
  248. {
  249. font-size: 48px;
  250. }
  251. .fs_menu_container
  252. {
  253. padding-right: 30px;
  254. }
  255. .fs_social_container
  256. {
  257. right: 20px;
  258. }
  259. .home_social_container
  260. {
  261. display: none !important;
  262. }
  263. .footer
  264. {
  265. padding-top: 30px;
  266. padding-bottom: 30px;
  267. }
  268. .footer_content
  269. {
  270. height: auto;
  271. }
  272. .cr p
  273. {
  274. font-size: 13px;
  275. margin-bottom: 15px;
  276. }
  277. }
  278. /************
  279. 11. 539px
  280. ************/
  281. @media only screen and (max-width: 539px)
  282. {
  283. }
  284. /************
  285. 12. 480px
  286. ************/
  287. @media only screen and (max-width: 480px)
  288. {
  289. }
  290. /************
  291. 13. 479px
  292. ************/
  293. @media only screen and (max-width: 479px)
  294. {
  295. h1{font-size: 24px;}
  296. h2{font-size: 16px;}
  297. h3{font-size: 16px;}
  298. p{font-size: 13px;}
  299. .fs_menu_container.active
  300. {
  301. padding-top: 100px;
  302. }
  303. .fs_menu_list li a
  304. {
  305. font-size: 24px;
  306. }
  307. .fs_menu_list li a > span::after
  308. {
  309. bottom: 0px;
  310. height: 2px;
  311. }
  312. .fs_menu_list li a span span
  313. {
  314. top: 0;
  315. left: -2px;
  316. }
  317. .fs_social li
  318. {
  319. margin-left: 5px;
  320. }
  321. .main_slider_content p
  322. {
  323. font-size: 13px;
  324. }
  325. .button
  326. {
  327. width: 170px;
  328. height: 50px;
  329. }
  330. .button a
  331. {
  332. font-size: 9px;
  333. line-height: 50px;
  334. }
  335. .discover_button
  336. {
  337. margin-top: 28px;
  338. }
  339. .header
  340. {
  341. height: 90px;
  342. }
  343. .hero_slider_container
  344. {
  345. margin-top: 90px;
  346. height: calc(100vh - 90px);
  347. }
  348. .main_slider_dots
  349. {
  350. display: none;
  351. }
  352. .main_slider_content
  353. {
  354. position: absolute;
  355. top: 50%;
  356. left: 15px;
  357. height: auto;
  358. -webkit-transform: translateY(-50%);
  359. -moz-transform: translateY(-50%);
  360. -ms-transform: translateY(-50%);
  361. -o-transform: translateY(-50%);
  362. transform: translateY(-50%);
  363. margin-top: 0px;
  364. }
  365. .slider_content_col
  366. {
  367. height: calc(100vh - 90px);
  368. }
  369. .features
  370. {
  371. padding-top: 120px;
  372. padding-bottom: 120px;
  373. }
  374. .features_col
  375. {
  376. padding-top: 0px;
  377. padding-bottom: 0px;
  378. margin-bottom: 60px;
  379. }
  380. .features_col:last-child
  381. {
  382. padding-bottom: 0px;
  383. margin-bottom: 0px;
  384. }
  385. .features_item p
  386. {
  387. margin-top: 18px;
  388. }
  389. .features_item img
  390. {
  391. margin-bottom: 30px;
  392. }
  393. .about
  394. {
  395. padding-top: 165px;
  396. }
  397. .about_shapes img
  398. {
  399. width: 70%;
  400. }
  401. .section_title h2::before
  402. {
  403. bottom: 51px;
  404. }
  405. .service_item
  406. {
  407. margin-bottom: 40px;
  408. }
  409. .icon_container
  410. {
  411. margin-bottom: 25px;
  412. }
  413. .service_item h3
  414. {
  415. margin-bottom: 10px;
  416. }
  417. .services_button
  418. {
  419. margin-top: 30px;
  420. }
  421. .services_shapes
  422. {
  423. top: 0;
  424. text-align: right;
  425. }
  426. .services_shapes img
  427. {
  428. width: 70%;
  429. }
  430. .contact_button
  431. {
  432. margin-top: 45px;
  433. }
  434. }
  435. /************
  436. 14. 400px
  437. ************/
  438. @media only screen and (max-width: 400px)
  439. {
  440. }