API tools faq
paste
Advertisement
lester22

Untitled

lester22
May 3rd, 2016
75
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.87 KB | None | 0 0
raw download clone embed print report
  1. //Fonts
  2. @font-face {
  3. font-family: Panton Regular;
  4. src: url(../fonts/Panton-Regular.otf);
  5. }
  6. @font-face {
  7. font-family: Panton Bold;
  8. src: url(../fonts/Panton-Bold.otf);
  9. }
  10. @font-face {
  11. font-family: Panton Black Italic;
  12. src: url(../fonts/Panton-BlackItalic.otf);
  13. }
  14. @font-face {
  15. font-family: Panton Black;
  16. src: url(../fonts/Panton-Black.otf);
  17. }
  18. @font-face {
  19. font-family: Panton Italic;
  20. src: url(../fonts/Panton-Italic.otf);
  21. }
  22. @font-face {
  23. font-family: Panton Bold Italic;
  24. src: url(../fonts/Panton-BoldItalic.otf);
  25. }
  26.  
  27.  
  28. @color_red:rgb(239,30,39);
  29. @color_red2:rgb(206,29,36);
  30. @color_purple:rgb(52,46,60);
  31. @color_blue:rgb(14,78,152);
  32. @color_header:rgb(244,244,244);
  33.  
  34. //home arrow color
  35. @color_arrow_off:rgb(235,235,235);
  36. @color_arrow_on:@color_red;
  37.  
  38. //join us
  39. @form_color_red:rgb(223,30,39);
  40.  
  41.  
  42. //home slide width
  43. @width_more_650:240px;
  44. @width_no_more_650:150px;
  45.  
  46.  
  47. .container-fluid {
  48. min-width:480px;
  49. padding:0;
  50. }
  51. .row {
  52. margin:0;
  53. }
  54.  
  55. //header
  56. header {
  57. position:relative;
  58. height:140px;
  59. background:@color_header;
  60. -webkit-box-shadow: 0px 2.5px 5px 0px rgba(0,0,0,0.15);
  61. -moz-box-shadow: 0px 2.5px 5px 0px rgba(0,0,0,0.15);
  62. box-shadow: 0px 2.5px 5px 0px rgba(0,0,0,0.15);
  63. }
  64. .in_wrapper {
  65. width:73.125%;
  66. max-width:1100px;
  67. height:100%;
  68. margin:auto;
  69. }
  70. .header_container {
  71. display:flex;
  72. justify-content:space-between;
  73. align-items:flex-end;
  74. }
  75. .header_logo {
  76. margin-left:7.5%;
  77. margin-bottom:28px;
  78. }
  79. .header_right {
  80. margin-bottom:20px;
  81. }
  82. .header_phone, .header_soc {
  83. float:left;
  84. }
  85. .header_soc {
  86. margin-top:7px;
  87. }
  88. .header_soc {
  89. margin-left:58px;
  90. }
  91. .header_phone_img, .header_phone_p {
  92. float:left;
  93. }
  94. .header_phone_img {
  95. border-radius:50%;
  96. padding:7px;
  97. background:@color_red;
  98. }
  99. .p_phone span {
  100. border-bottom:1px solid @color_purple;
  101. -webkit-box-shadow: 0px 1px 0px 0px rgb(201,200,202);
  102. -moz-box-shadow: 0px 1px 0px 0px rgb(201,200,202);
  103. box-shadow: 0px 1px 0px 0px rgb(201,200,202);
  104. }
  105. .header_soc img {
  106. margin:0 11.5px;
  107. }
  108.  
  109.  
  110. //menu
  111. main {
  112. min-height:300px;
  113. }
  114. .home_main {
  115. background:url(../images/home_fon.png) no-repeat;
  116. background-size:100% auto;
  117. }
  118. .main_menu {
  119. width:98.29%;
  120. height:96px;
  121. border-bottom:1px solid lighten(@color_red, 10%);
  122. margin:auto;
  123. margin-top:-11px;
  124. background:@color_red;
  125. -ms-transform: skewX(-7.5deg);
  126. -webkit-transform: skewX(-7.5deg);
  127. transform: skewX(-7.5deg);
  128. }
  129. .main_menu:after {
  130. content:'';
  131. position:absolute;
  132. bottom:0;
  133. left:0;
  134. width:100%;
  135. height:9px;
  136. border-top:1px solid lighten(@color_red2, 10%);
  137. margin-bottom:-13px;
  138. margin-left:-0.22em;
  139. background:@color_red2;
  140. -ms-transform: skewX(-35deg);
  141. -webkit-transform: skewX(-35deg);
  142. transform: skewX(-35deg);
  143.  
  144. }
  145. .menu_link {
  146. padding-top:40px;
  147. -ms-transform: skewX(7.5deg);
  148. -webkit-transform: skewX(7.5deg);
  149. transform: skewX(7.5deg);
  150. text-align:center;
  151. margin-left:-3%;
  152. }
  153. .menu_link ul {
  154. margin:0;
  155. padding:0;
  156. }
  157. .menu_link ul li {
  158. display:inline;
  159. }
  160. .menu_link a {
  161. color:#fff;
  162. font-family:'Panton Bold';
  163. font-weight:900;
  164. text-transform:uppercase;
  165. margin-left:40px;
  166. }
  167. .current-menu-item {
  168. text-decoration:underline;
  169. }
  170.  
  171. //section1
  172. .section1 {
  173. display:flex;
  174. padding-top:20px;
  175. padding-bottom:30px;
  176.  
  177. }
  178. .section1_form {
  179. text-align:center;
  180. }
  181. .home_form {
  182. width:270px;
  183. margin-top:15px;
  184. background:@color_blue;
  185. }
  186. .home_form p {
  187. color:#fff;
  188. font-family:'Panton Bold';
  189. font-weight:900;
  190. text-transform:uppercase;
  191. padding:20px 0;
  192. }
  193. .home_form input, .home_form button {
  194. width:205px;
  195. height:33px;
  196. margin-bottom:9px;
  197. border:0;
  198. }
  199. .home_form input {
  200. padding-left:14px;
  201. }
  202. .home_form input::-moz-placeholder {
  203. color: rgb(210,209,211);
  204. font-family:'Panton Bold';
  205. }
  206. .home_form input:-ms-input-placeholder {
  207. color: rgb(210,209,211);
  208. font-family:'Panton Bold';
  209. }
  210. .home_form input::-webkit-input-placeholder {
  211. color: rgb(210,209,211);
  212. font-family:'Panton Bold';
  213. }
  214. .home_form button {
  215. color:#fff;
  216. text-transform:uppercase;
  217. font-family:'Panton Bold';
  218. margin-top:35px;
  219. margin-bottom:20px;
  220. background:@color_purple;
  221. -webkit-box-shadow: 0px 4px 0px 0px rgb(31,28,36);
  222. -moz-box-shadow: 0px 4px 0px 0px rgb(31,28,36);
  223. box-shadow: 0px 4px 0px 0px rgb(31,28,36);
  224. outline:0;
  225. }
  226. .section1_title {
  227. height:185px;
  228. text-align:center;
  229. }
  230. .section1_text .section1_body_text {
  231. padding-left:30px;
  232. }
  233.  
  234. //section2
  235. .section2 {
  236. background:url(../images/home_fon2.png);
  237. background-size:100% 100%;
  238. }
  239. .section2_title {
  240. padding-top:24px;
  241. }
  242. .section2_title, .section2_icons {
  243. margin-left:70px;
  244. }
  245. .section2_icons {
  246. padding-top:55px;
  247. }
  248. .section2_icons_collom {
  249. padding:0;
  250. padding-left:30px;
  251. }
  252. .section2_icons_collom:nth-child(2) {
  253. padding-bottom:80px;
  254. }
  255. .icons_block {
  256. display:table;
  257. padding-bottom:5px;
  258. }
  259. .icons_img, .icons_text {
  260. display:table-cell;
  261. vertical-align:middle;
  262. }
  263. .icons_img {
  264. width:60px;
  265. height:60px;
  266. border-radius:50%;
  267. background:@color_blue;
  268. text-align:center;
  269. }
  270. .icons_text {
  271. padding-left:30px;
  272. }
  273.  
  274.  
  275. //section3
  276. .section3 {
  277. min-height:490px;
  278. padding-bottom:20px;
  279. }
  280. .home_slider_wrapper {
  281. display:flex;
  282. justify-content: space-between;
  283. align-items: center;
  284. padding:50px;
  285. }
  286. .home_arrow {
  287. width:60px !important;
  288. height:60px;
  289. background:@color_arrow_off;
  290. border-radius:50%;
  291. }
  292. .home_arrow:hover {
  293. background:@color_arrow_on;
  294. }
  295. .home_arrow:nth-child(1) {
  296. -webkit-box-shadow: -3px 3px 0px 0px darken(@color_arrow_off,10%);
  297. -moz-box-shadow: -3px 3px 0px 0px darken(@color_arrow_off,10%);
  298. box-shadow: -3px 3px 0px 0px darken(@color_arrow_off,10%);
  299. }
  300. .home_arrow:hover:nth-child(1) {
  301. -webkit-box-shadow: -3px 3px 0px 0px darken(@color_arrow_on,10%);
  302. -moz-box-shadow: -3px 3px 0px 0px darken(@color_arrow_on,10%);
  303. box-shadow: -3px 3px 0px 0px darken(@color_arrow_on,10%);
  304. }
  305. .home_arrow:nth-child(3) {
  306. -webkit-box-shadow: 3px 3px 0px 0px darken(@color_arrow_off,10%);
  307. -moz-box-shadow: 3px 3px 0px 0px darken(@color_arrow_off,10%);
  308. box-shadow: 3px 3px 0px 0px darken(@color_arrow_off,10%);
  309. }
  310. .home_arrow:hover:nth-child(3) {
  311. -webkit-box-shadow: 3px 3px 0px 0px darken(@color_arrow_on,10%);
  312. -moz-box-shadow: 3px 3px 0px 0px darken(@color_arrow_on,10%);
  313. box-shadow: 3px 3px 0px 0px darken(@color_arrow_on,10%);
  314. }
  315. .home_arrow div {
  316. padding:50%;
  317. stroke:@color_purple;
  318. fill:@color_purple;
  319. }
  320. .home_arrow:hover div {
  321. stroke:#fff;
  322. fill:#fff;
  323. }
  324. .home_arrow:nth-child(1) div {
  325. margin-left:-16px;
  326. margin-top:-14.5px;
  327. }
  328. .home_arrow:nth-child(3) div {
  329. margin-left:-11px;
  330. margin-top:-12px;
  331. }
  332. .home_slider_container1 {
  333. position:relative;
  334. width:630px;
  335. height:@width_more_650;
  336. overflow:hidden;
  337. }
  338. .slide {
  339. position:absolute;
  340. top:0;
  341. overflow:hidden;
  342. border-radius:50%;
  343. }
  344. .slide1 {
  345. left:0;
  346. }
  347. .slide2 {
  348. left:50%;
  349. width:@width_more_650;
  350. height:@width_more_650;
  351. margin-left:-@width_more_650*0.5;
  352. }
  353. .slide3 {
  354. left:100%;
  355. margin-left:-@width_more_650*0.5;
  356. }
  357. .slide1, .slide3, .slide_off {
  358. width:@width_more_650*0.5;
  359. height:@width_more_650*0.5;
  360. margin-top:@width_more_650*0.25;
  361.  
  362. }
  363. .slide_off {
  364. display:none;
  365. }
  366. .slide img {
  367. width:100%;
  368. height:auto;
  369. }
  370. .home_slider_container2 p {
  371. color:@color_purple;
  372. font-family:'Panton Italic';
  373. font-weight:900;
  374. text-align:center;
  375. padding-top:30px;
  376.  
  377. }
  378. .home_slider_container2 span {
  379. font-family:'Panton Bold Italic';
  380. font-size:20px;
  381. text-decoration:underline;
  382. }
  383.  
  384.  
  385.  
  386. //footer
  387. footer {
  388. height:200px;
  389. background:@color_purple;
  390. }
  391. .foo_wrapper {
  392. position:relative;
  393. }
  394. .site_map {
  395. float:left;
  396. min-width:230px;
  397. max-width:19.66%;
  398. white-space: nowrap;
  399. margin-left:6%;
  400. }
  401. .site_map, .foo_center_block {
  402. padding-top:60px;
  403. }
  404. .foo_collom_wrapper {
  405. display:flex;
  406. justify-content:space-between;
  407. }
  408. .site_map ul {
  409. margin:0;
  410. padding:0;
  411. }
  412. .site_map li {
  413. display:inline;
  414. float:left;
  415. width:100%;
  416. }
  417. .site_map a {
  418. color:#fff;
  419. font-family: 'Panton Regular';
  420. }
  421. .foo_center_block {
  422. float:left;
  423. margin-left:10%;
  424. }
  425. .foo_soc {
  426. margin-left:30px;
  427. }
  428. .foo_soc img {
  429. margin-right:23px;
  430. }
  431. .foo_last_p {
  432. margin-top:24px;
  433. }
  434. .foo_logo {
  435. float:left;
  436. margin-top:80px;
  437. margin-left:5%;
  438. }
  439. .foo_man {
  440. position:absolute;
  441. right:0;
  442. bottom:0;
  443. margin-right:-50px;
  444. }
  445.  
  446.  
  447.  
  448.  
  449. //popUp-form
  450. .popUp_form {
  451. display:none;
  452. position:fixed;
  453. top:0;
  454. left:0;
  455. width: 100%;
  456. height: 100%;
  457. background:rgba(255,255,255,0.5);
  458. text-align: center;
  459. }
  460.  
  461.  
  462.  
  463.  
  464.  
  465. //параграфы
  466. a {
  467. cursor:pointer;
  468. }
  469. p {
  470. cursor:default;
  471. }
  472. .p_phone {
  473. color:@color_purple;
  474. font-family: 'Panton Regular';
  475. font-size: 18px;
  476. font-weight:600;
  477. line-height:40px;
  478. padding-left:11px;
  479. margin:0;
  480. }
  481. .section1_title p {
  482. color:@color_purple;
  483. font-family:'Panton Black Italic';
  484. font-size:40px;
  485. text-transform:uppercase;
  486. padding-top:75px;
  487. }
  488. .section1_body_text {
  489. color:@color_purple;
  490. font-family: 'Panton Regular';
  491. font-size: 15px;
  492. margin-bottom:30px;
  493. }
  494. .section2_title p {
  495. color:@color_purple;
  496. font-family:'Panton Black';
  497. font-size:16px;
  498. text-transform:uppercase;
  499. margin-bottom:0;
  500. }
  501. .icons_text p {
  502. color:@color_purple;
  503. font-family: 'Panton Regular';
  504. font-size:16px;
  505. text-transform:uppercase;
  506. margin-bottom:0;
  507. }
  508. .foo_p {
  509. color:#fff;
  510. font-family: 'Panton Regular';
  511. }
  512. .foo_p span {
  513. text-decoration:underline;
  514. }
  515.  
  516.  
  517.  
  518. //learn_to_drive
  519. .ltd_title p {
  520. color:@color_purple;
  521. font-family:'Panton Black Italic';
  522. font-size:40px;
  523. text-transform:uppercase;
  524. margin-left:300px;
  525. padding-top:50px;
  526. }
  527. .ltd_title span {
  528. display:inline-block;
  529. color:red;
  530. font-family:'Panton Black';
  531. font-size:60px;
  532. padding:0 25px;
  533. margin-bottom:0;
  534. -webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.5);
  535. -moz-box-shadow: 0 0 5px 1px rgba(0,0,0,0.5);
  536. box-shadow: 0 0 5px 1px rgba(0,0,0,0.5);
  537. -ms-transform: rotate(-4deg);
  538. -webkit-transform: rotate(-4deg);
  539. transform: rotate(-4deg);
  540. }
  541. .ltd_section1_text {
  542. padding-top:20px;
  543. }
  544. .ltd_section1_text img {
  545. float:left;
  546. width:270px;
  547. height:200px;
  548. margin: 0 30px 30px 0;
  549. -webkit-box-shadow: 5px 5px 0px 0px rgb(229,229,229);
  550. -moz-box-shadow: 5px 5px 0px 0px rgb(229,229,229);
  551. box-shadow: 5px 5px 0px 0px rgb(229,229,229);
  552. }
  553. .ltd_section2 {
  554. background:@color_header;
  555. padding-bottom:40px;
  556. }
  557. .ltd_section2_part{
  558. display:flex;
  559. width:100%;
  560. }
  561. .ltd_section2_part:nth-of-type(1) {
  562. padding-top:50px;
  563.  
  564. }
  565. .ltd_left {
  566. flex-shrink:0;
  567. width:270px;
  568. margin-right:30px;
  569. }
  570. .ltd_left p {
  571. text-align:right;
  572. color:@color_purple;
  573. font-family:'Panton Black';
  574. font-size:16px;
  575. text-transform:uppercase;
  576. }
  577. .ltd_li {
  578. margin-bottom:20px;
  579. }
  580. .ltd_li:before {
  581. content:'';
  582. position: absolute;
  583. width:13px;
  584. height:13px;
  585. background:@color_red;
  586. border-radius:50%;
  587. margin-top:4px;
  588. margin-left:-25px;
  589. }
  590. .ltd_span_bold {
  591. font-size:1.1em;
  592. font-family: Panton Bold;
  593. font-weight:900;
  594. }
  595. .ltd_underline {
  596. text-decoration:underline;
  597. }
  598.  
  599.  
  600.  
  601.  
  602. //Driving Courses
  603. .dc_section1 {
  604. padding-top:45px;
  605. }
  606. .dc_section1 img {
  607. height:200px;
  608. }
  609. .dc_section1 .ltd_title p {
  610. padding:0;
  611. margin-top:-12px;
  612. text-align:left;
  613. }
  614. .dc_section1_text .section1_body_text {
  615. padding-top:35px;
  616. }
  617. .dc_section1_1 {
  618. width:100%;
  619. }
  620. .dc_section1_1:nth-of-type(1) {
  621. padding:0;
  622. }
  623. .dc_second_flex div:nth-child(1) {
  624. flex-shrink: 0;
  625. }
  626. .dc_border_block p {
  627. padding:20px 15px;
  628. margin-left:20px;
  629. border:1px solid rgb(118,118,118);
  630. }
  631. .dc_shadow_block {
  632. display:none;
  633. }
  634. .dc_second_flex {
  635. display:flex;
  636. }
  637. .dc_section1_1 .ltd_li, .dc_section2 .ltd_li {
  638. margin-bottom:15px;
  639. }
  640. .dc_section1_1 .ltd_li:before, .dc_section2 .ltd_li:before {
  641. margin-left:-21px;
  642. }
  643. .dc_section1_2:nth-of-type(1) {
  644. padding-top:30px;
  645. }
  646. .dc_section1_2 .ltd_li:nth-last-of-type(1) {
  647. margin-bottom:0;
  648. }
  649.  
  650.  
  651.  
  652.  
  653.  
  654. //the_driving_test
  655. .tdt_in {
  656. display:flex;
  657. }
  658. .tdt_in div:nth-child(1) {
  659. width:280px;
  660. flex-shrink: 0;
  661. }
  662. .tdt_in div:nth-child(2) {
  663. margin-left:30px;
  664. }
  665. .tdt_subtitle {
  666. color:@color_purple;
  667. font-family:'Panton Black';
  668. font-size:18px;
  669. text-transform:uppercase;
  670. margin-top:-5px;
  671. margin-bottom:20px;
  672. }
  673. .tdt_in .section1_body_text:nth-last-of-type(1) {
  674. padding-bottom:40px;
  675. margin-bottom:0;
  676. }
  677. .tdt_section2 {
  678. padding-bottom:0;
  679. }
  680.  
  681.  
  682.  
  683.  
  684. //contact
  685. .contact_body {
  686. display:flex;
  687. margin-top:35px;
  688. padding-bottom:75px;
  689. }
  690. .contact_form {
  691. width:270px;
  692. text-align:center;
  693. flex-shrink: 0;
  694. }
  695. .contact_form img {
  696. width:170px;
  697. }
  698. .contact_form .home_form {
  699. margin-top:0;
  700. }
  701. .contact_body .section1_text {
  702. width:200px;
  703. margin:0 30px;
  704. flex-shrink: 0;
  705. }
  706. .contact_body .ltd_title p {
  707. padding-top:30px;
  708. margin-bottom:45px;
  709. }
  710. .contact_block {
  711. display:flex;
  712. margin-bottom:14px;
  713. }
  714. .contact_block div:nth-child(1){
  715. width:28px;
  716. height:28px;
  717. border-radius:50%;
  718. background:@color_red;
  719. text-align:center;
  720. }
  721. .contact_block img {
  722. display:inline-block;
  723. width:70%;
  724. line-height:28px;
  725. margin-top:2px;
  726. }
  727. .contact_block div:nth-child(2) {
  728. margin-left:18px;
  729. }
  730. .contact_block p {
  731. color:@color_purple;
  732. font-family:'Panton Bold';
  733. font-size:16px;
  734. margin-bottom:0;
  735. line-height:28px;
  736. }
  737. .car_block img{
  738. width:100%;
  739. height:auto;
  740. }
  741. .contant_2_flex {
  742. display:flex;
  743. }
  744. .contant_2_flex .ltd_title p {
  745. margin-left:0;
  746. }
  747.  
  748.  
  749.  
  750.  
  751. //join us
  752. .ju_in_section {
  753. padding-top:10px;
  754. }
  755. .ju_in_section img{
  756. height:auto;
  757. }
  758. .ju_in_section .section1_body_text {
  759. margin-bottom:25px;
  760. }
  761. .ju_form {
  762. margin-bottom:20px;
  763. }
  764. .ju_form label {
  765. color:@color_purple;
  766. font-family: 'Panton Regular';
  767. font-size:20px;
  768. font-weight:normal;
  769. }
  770. .ju_form label span {
  771. color:@form_color_red;
  772. }
  773. .ju_form input, .ju_form textarea{
  774. padding-left:10px;
  775. border:1px solid @color_purple;
  776. border-radius:7px;
  777. -webkit-box-shadow: 0px 1px 0px 0px rgb(214,213,216);
  778. -moz-box-shadow: 0px 1px 0px 0px rgb(214,213,216);
  779. box-shadow: 0px 1px 0px 0px rgb(214,213,216);
  780. outline:0;
  781. resize: none;
  782. }
  783. .ju_form input{
  784. height:36px;
  785. }
  786. .ju_form .size1 {
  787. width:230px;
  788. }
  789. .ju_form .size2 {
  790. width:370px;
  791. }
  792. .ju_form input[type=radio], .ju_form input[type=checkbox] {
  793. display:none;
  794. }
  795. .box_for_check {
  796. display:inline-block;
  797. float:left;
  798. width:30px;
  799. height:30px;
  800. border:1px solid @color_purple;
  801. border-radius:7px;
  802. fill:@color_purple;
  803. stroke:@color_purple;
  804. }
  805. .box_for_check span {
  806. display:none;
  807. }
  808. .radio_p_yes, .radio_p_no{
  809. float:left;
  810. margin-left:5px;
  811. }
  812. .radio_p_yes {
  813. color:rgb(55,212,0);
  814. margin-right:30px;
  815. }
  816. .radio_p_no {
  817. color:@form_color_red;
  818. }
  819. .ju_form input[type=radio]:checked + .box_for_check span, .ju_form input[type=checkbox]:checked + .box_for_check span {
  820. display:block;
  821. }
  822. #ju_form {
  823. padding-bottom:50px;
  824. }
  825. #ju_form button {
  826. width:270px;
  827. height:45px;
  828. color:#fff;
  829. text-transform:uppercase;
  830. font-family:'Panton Bold';
  831. margin-top:35px;
  832. background:@color_purple;
  833. border:0;
  834. -webkit-box-shadow: 0px 4px 0px 0px rgb(31,28,36);
  835. -moz-box-shadow: 0px 4px 0px 0px rgb(31,28,36);
  836. box-shadow: 0px 4px 0px 0px rgb(31,28,36);
  837. outline:0;
  838. }
  839. #ju_form button:hover {
  840. background:@color_red;
  841. -webkit-box-shadow: 0px 4px 0px 0px @color_red2;
  842. -moz-box-shadow: 0px 4px 0px 0px @color_red2;
  843. box-shadow: 0px 4px 0px 0px @color_red2;
  844. }
  845. .ju_foto2 {
  846. width:100%;
  847. height:auto;
  848. }
  849.  
  850.  
  851.  
  852.  
  853.  
  854. //madia
  855.  
  856. .check1350, .check850 { //home-media
  857. display:none;
  858. }
  859. .check1275 {
  860. display:none;
  861. }
  862.  
  863.  
  864. @media (min-width: 1500px) {
  865. .foo_logo {
  866. margin-left:8%;
  867. }
  868. }
  869. @media (max-width: 1350px) {
  870. .check1350 { //home-media
  871. display:inline;
  872. }
  873. .section1_title p { //home-media
  874. padding-top:30px;
  875. }
  876. }
  877. @media (max-width: 1300px) {
  878. .site_map {
  879. min-width:200px;
  880. margin-left:0;
  881. }
  882. .foo_center_block {
  883. margin-left:5%;
  884. }
  885. }
  886. @media (max-width: 1275px) {
  887. .check1275 {
  888. display:inline;
  889. }
  890. .menu_link {
  891. padding-top:20px;
  892. }
  893. .menu_link a {
  894. line-height:35px;
  895. }
  896. .section1 { //home-media
  897. padding-bottom:0;
  898. }
  899. .section2 { //home-media
  900. padding: 0 10px;
  901. }
  902. }
  903. @media (max-width: 1150px) {
  904. .foo_logo {
  905. margin-left:2%;
  906. }
  907. }
  908. @media (max-width: 1050px) {
  909. .foo_logo {
  910. display:none;
  911. }
  912. .header_soc {
  913. margin-left:20px;
  914. }
  915. .in_wrapper { //home-media
  916. width:80%;
  917. }
  918. .section1_body_text { //home-media
  919. margin-bottom:15px;
  920. }
  921. .section2_title, .section2_icons { //home-media
  922. margin-left: 5%;
  923. }
  924. }
  925. @media (max-width: 1000px) {
  926. .dc_second_flex { //driving_courses-media
  927. flex-direction: column;
  928. }
  929. .dc_border_block { //driving_courses-media
  930. margin-left:-21px;
  931. }
  932. .dc_border_block p { //driving_courses-media
  933. margin-left:0;
  934. }
  935. .contant_2_flex { //contact-media
  936. flex-direction: column;
  937. }
  938. .car_block { //contact-media
  939. max-width:325px;
  940. margin:0 10px;
  941. }
  942. }
  943. @media (max-width: 905px) {
  944. .in_wrapper {
  945. width:85%;
  946. }
  947. }
  948. @media (max-width: 850px) {
  949. .home_slider_wrapper { //home-media
  950. padding:50px 0;
  951. }
  952. .section1 { //home-media
  953. flex-direction: column-reverse;
  954. padding-bottom:30px;
  955. }
  956. .section1_form img {
  957. display:none;
  958. }
  959.  
  960. .section1_form .home_form { //home-media
  961. margin: 0 auto;
  962. }
  963. .check850 {
  964. display:block;
  965. float:left;
  966. width:150px;
  967. height:auto;
  968. margin-right:15px;
  969. }
  970. .dc_section1_text .section1_body_text { //driving_courses-media
  971. padding-top:0;
  972. }
  973. .ltd_title p {
  974. text-align:center;
  975. margin-left:0;
  976. }
  977. }
  978. @media (max-width: 767px) {
  979. .in_wrapper {
  980. width:95%;
  981. }
  982. .foo_center_block {
  983. float:right;
  984. }
  985. .foo_man {
  986. display:none;
  987. }
  988. }
  989. @media (max-width: 700px) {
  990. .header_right {
  991. width:230px;
  992. }
  993. .header_soc {
  994. margin-left:0;
  995. margin-top:20px;
  996. }
  997. .header_soc {
  998. margin-left:0;
  999. margin-top:20px;
  1000. }
  1001. .header_soc img:nth-of-type(1) {
  1002. margin-left:0;
  1003. }
  1004. .foo_soc img {
  1005. margin-right:10px;
  1006. }
  1007. .foo_soc img:nth-of-type(4) {
  1008. margin-right:0;
  1009. }
  1010. .ltd_section1_text img, .ltd_left { //learn_to_drive-media
  1011. width:35%;
  1012. height:auto;
  1013. }
  1014. .dc_border_block { //driving_courses-media
  1015. display:none;
  1016. }
  1017. .dc_shadow_block { //driving_courses-media
  1018. display:block;
  1019. margin-left:0;
  1020. }
  1021. .tdt_in div:nth-child(1) { //the_driving_test
  1022. width:35%;
  1023. }
  1024. .tdt_in img { //the_driving_test
  1025. width:96%;
  1026. }
  1027. }
  1028. @media (max-width: 650px) {
  1029. .home_slider_container1 { //home-media
  1030. height:@width_no_more_650;
  1031. }
  1032. .slide1, .slide3, .slide_off { //home-media
  1033. width:@width_no_more_650*0.5;
  1034. height: @width_no_more_650*0.5;
  1035. margin-top:@width_no_more_650*0.25;
  1036. }
  1037. .slide2 { //home-media
  1038. width: @width_no_more_650;
  1039. height: @width_no_more_650;
  1040. margin-left: -@width_no_more_650*0.5;
  1041. }
  1042. .slide3 { //home-media
  1043. margin-left:-@width_no_more_650*0.5;
  1044. }
  1045. .dc_section1 .ltd_title p { //driving_courses-media
  1046. text-align:center;
  1047. }
  1048. .ju_form .size2 { //join_us
  1049. width:270px;
  1050. }
  1051. }
  1052. @media (max-width: 600px) {
  1053. .menu_link a {
  1054. margin-left:10px;
  1055. }
  1056. .contact_form, .contact_form .home_form { //contact-media
  1057. width:210px;
  1058. }
  1059. .contact_form .home_form input, .contact_form .home_form button { //contact-media
  1060. width:175px;
  1061. }
  1062. }
  1063. @media (max-width: 570px) {
  1064. .foo_center_block, .site_map {
  1065. padding-top:30px;
  1066. }
  1067. .site_map {
  1068. margin-left:30px;
  1069. }
  1070. .foo_center_block {
  1071. margin-right:30px;
  1072. }
  1073. .foo_center_block .foo_collom_wrapper{
  1074. display:block;
  1075. text-align:center;
  1076. }
  1077. .foo_soc {
  1078. margin-left:0;
  1079. }
  1080. .foo_last_p {
  1081. position:absolute;
  1082. bottom:0;
  1083. left:0;
  1084. right:0;
  1085. text-align:center;
  1086. }
  1087. }
  1088.  
  1089.  
  1090.  
  1091.  
  1092.  
  1093. img.ajax-loader { display: none; }
  1094. .home_form_wrap { text-align: center;}
  1095. .home_form_wrap p:first-child{ padding: 20px 0 0 0; }
  1096. .home_form_wrap p { padding: 10px 0; }
  1097. span.wpcf7-not-valid-tip { display: none; }
  1098. .section2_icons_collom:nth-child(2) { padding-bottom: 30px; }
  1099.  
  1100.  
  1101.  
  1102.  
  1103.  
  1104.  
  1105.  
  1106.  
  1107.  
  1108.  
  1109. .nltd_header {
  1110. color: #342e3c;
  1111. font-family: 'Panton Black Italic';
  1112. font-size: 40px;
  1113. text-transform: uppercase;
  1114. margin: 0;
  1115. padding-bottom: 1em;
  1116. }
  1117.  
  1118. .ntld_h3
  1119. {
  1120. color: #342e3c;
  1121. font-family: 'Panton Black';
  1122. font-size: 16px;
  1123. text-transform: uppercase;
  1124. text-align: right;
  1125. margin: 0;
  1126. }
  1127.  
  1128. .img_with_shadow
  1129. {
  1130. -webkit-box-shadow: 5px 5px 0px 0px #e5e5e5;
  1131. -moz-box-shadow: 5px 5px 0px 0px #e5e5e5;
  1132. box-shadow: 5px 5px 0px 0px #e5e5e5;
  1133. }
  1134.  
  1135.  
  1136. .nltd_li
  1137. {
  1138.  
  1139. color: #342e3c;
  1140. font-family: 'Panton Regular';
  1141. font-size: 15px;
  1142.  
  1143. p
  1144. {
  1145. margin-bottom:1em;
  1146.  
  1147. &:before
  1148. {
  1149. content:'';
  1150. position: absolute;
  1151. width:13px;
  1152. height:13px;
  1153. background:@color_red;
  1154. border-radius:50%;
  1155. margin-top:4px;
  1156. margin-left:-20px;
  1157. }
  1158. }
  1159.  
  1160. } /* ntld_li */
  1161.  
  1162. .nltd_borderblock p
  1163. {
  1164. padding: 20px 15px;
  1165. margin-left: 20px;
  1166. border: 1px solid #767676;
  1167. }
  1168.  
  1169.  
  1170. .ntld_subtitle
  1171. {
  1172. color: #342e3c;
  1173. font-family: 'Panton Black';
  1174. font-size: 18px;
  1175. text-transform: uppercase;
  1176. margin: 0;
  1177. }
  1178.  
  1179.  
  1180. .home_form input[type="submit"] {
  1181. color:#fff;
  1182. text-transform:uppercase;
  1183. font-family:'Panton Bold';
  1184. margin-top:35px;
  1185. margin-bottom:20px;
  1186. background:@color_purple;
  1187. -webkit-box-shadow: 0px 4px 0px 0px rgb(31,28,36);
  1188. -moz-box-shadow: 0px 4px 0px 0px rgb(31,28,36);
  1189. box-shadow: 0px 4px 0px 0px rgb(31,28,36);
  1190. outline:0;
  1191. }
  1192.  
  1193. .home_form input {
  1194. padding-left:14px;
  1195. color:@color_purple;
  1196. }
  1197.  
  1198. .home_form input[aria-invalid="true"] {
  1199. border:1px solid red;
  1200. }
  1201.  
  1202.  
  1203. .ju_in_section {
  1204. padding-top:10px;
  1205. }
  1206. .ju_in_section img{
  1207. height:auto;
  1208. }
  1209. .ju_in_section .section1_body_text {
  1210. margin-bottom:25px;
  1211. }
  1212. .ju_form {
  1213. margin-bottom:20px;
  1214. }
  1215. .ju_form label {
  1216. color:@color_purple;
  1217. font-family: 'Panton Regular';
  1218. font-size:20px;
  1219. font-weight:normal;
  1220. }
  1221. .ju_form label span {
  1222. color:@form_color_red;
  1223. }
  1224. .ju_form input, .ju_form textarea{
  1225. padding-left:10px;
  1226. border:1px solid @color_purple;
  1227. border-radius:7px;
  1228. -webkit-box-shadow: 0px 1px 0px 0px rgb(214,213,216);
  1229. -moz-box-shadow: 0px 1px 0px 0px rgb(214,213,216);
  1230. box-shadow: 0px 1px 0px 0px rgb(214,213,216);
  1231. outline:0;
  1232. resize: none;
  1233. }
  1234. .ju_form input{
  1235. height:36px;
  1236. }
  1237. .ju_form .size1 {
  1238. width:230px;
  1239. }
  1240. .ju_form .size2 {
  1241. width:370px;
  1242. }
  1243. .ju_form input[type=radio], .ju_form input[type=checkbox] {
  1244. display:none;
  1245. }
  1246. .box_for_check {
  1247. display:inline-block;
  1248. float:left;
  1249. width:30px;
  1250. height:30px;
  1251. border:1px solid @color_purple;
  1252. border-radius:7px;
  1253. fill:@color_purple;
  1254. stroke:@color_purple;
  1255. }
  1256. .box_for_check span {
  1257. display:none;
  1258. }
  1259. .radio_p_yes, .radio_p_no{
  1260. float:left;
  1261. margin-left:5px;
  1262. }
  1263. .radio_p_yes {
  1264. color:rgb(55,212,0);
  1265. margin-right:30px;
  1266. }
  1267. .radio_p_no {
  1268. color:@form_color_red;
  1269. }
  1270. .ju_form input[type=radio]:checked + .box_for_check span, .ju_form input[type=checkbox]:checked + .box_for_check span {
  1271. display:block;
  1272. }
  1273. #ju_form {
  1274. padding-bottom:50px;
  1275. }
  1276. #ju_form button {
  1277. width:270px;
  1278. height:45px;
  1279. color:#fff;
  1280. text-transform:uppercase;
  1281. font-family:'Panton Bold';
  1282. margin-top:35px;
  1283. background:@color_purple;
  1284. border:0;
  1285. -webkit-box-shadow: 0px 4px 0px 0px rgb(31,28,36);
  1286. -moz-box-shadow: 0px 4px 0px 0px rgb(31,28,36);
  1287. box-shadow: 0px 4px 0px 0px rgb(31,28,36);
  1288. outline:0;
  1289. }
  1290. #ju_form button:hover {
  1291. background:@color_red;
  1292. -webkit-box-shadow: 0px 4px 0px 0px @color_red2;
  1293. -moz-box-shadow: 0px 4px 0px 0px @color_red2;
  1294. box-shadow: 0px 4px 0px 0px @color_red2;
  1295. }
  1296. #ju_foto2 {
  1297. width:100%;
  1298. height:auto;
  1299. }
  1300.  
  1301.  
  1302.  
  1303.  
  1304. .contact_col2 {
  1305. .contact_li {
  1306. p {
  1307. color: #342e3c;
  1308. font-family: 'Panton Bold';
  1309. font-size: 16px;
  1310. margin-bottom: 0;
  1311. line-height: 28px;
  1312.  
  1313. img
  1314. {
  1315. width: 28px;
  1316. height: 28px;
  1317. border-radius: 50%;
  1318. background: #ef1e27;
  1319. text-align: center;
  1320. margin-right: 10px;
  1321. }
  1322.  
  1323.  
  1324.  
  1325. }
  1326. }
  1327. }
  1328.  
  1329. //join us 2.0
  1330. .join_us input, .join_us textarea{
  1331. padding-left:10px;
  1332. border:1px solid @color_purple;
  1333. border-radius:7px;
  1334. -webkit-box-shadow: 0px 1px 0px 0px rgb(214,213,216);
  1335. -moz-box-shadow: 0px 1px 0px 0px rgb(214,213,216);
  1336. box-shadow: 0px 1px 0px 0px rgb(214,213,216);
  1337. resize: none;
  1338. }
  1339. .join_us input:focus , .join_us textarea:focus {
  1340. -webkit-box-shadow:0 0 3px #00BFFF;
  1341. -moz-box-shadow:0 0 3px #00BFFF;
  1342. box-shadow: 0 0 3px #1E90FF;
  1343. }
  1344. .join_us input[aria-invalid="true"] {
  1345. -webkit-box-shadow:0 0 5px #d45252;
  1346. -moz-box-shadow:0 0 5px #d45252;
  1347. box-shadow: 0 0 5px #d45252;
  1348. border: 1px solid #d45252;
  1349. background: lighten(#d45252, 40%);
  1350. }
  1351. .join_us input[aria-invalid="true"]:focus {
  1352. background:none;
  1353. }
  1354. .join_us label {
  1355. color:@color_purple;
  1356. font-family: 'Panton Regular';
  1357. font-size:20px;
  1358. font-weight:normal;
  1359. }
  1360. .control-label span{
  1361. color:@color_red2;
  1362. }
  1363. .join_us input[type="submit"]{
  1364. width:270px;
  1365. height:45px;
  1366. color:#fff;
  1367. text-transform:uppercase;
  1368. font-family:'Panton Bold';
  1369. margin-top:35px;
  1370. background:@color_purple;
  1371. border:0;
  1372. -webkit-box-shadow: 0px 4px 0px 0px rgb(31,28,36);
  1373. -moz-box-shadow: 0px 4px 0px 0px rgb(31,28,36);
  1374. box-shadow: 0px 4px 0px 0px rgb(31,28,36);
  1375. outline:0;
  1376. }
  1377. .join_us input[type="submit"]:hover {
  1378. background:@color_red;
  1379. -webkit-box-shadow: 0px 4px 0px 0px @color_red2;
  1380. -moz-box-shadow: 0px 4px 0px 0px @color_red2;
  1381. box-shadow: 0px 4px 0px 0px @color_red2;
  1382. }
  1383. .join_us input[type="radio"], .join_us input[type="checkbox"] {
  1384. display:none;
  1385. }
  1386. .wpcf7-radio .first span, .wpcf7-checkbox .first span {
  1387. color:rgb(55,212,0);
  1388. margin-right:30px;
  1389. }
  1390. .wpcf7-radio .last span {
  1391. color:@form_color_red;
  1392. }
  1393. //checkbox
  1394. .wpcf7-radio .first span, .wpcf7-radio .last span, .wpcf7-checkbox .first span{
  1395. position:relative;
  1396. margin-left:40px;
  1397. }
  1398. .wpcf7-radio .first span:before, .wpcf7-radio .last span:before, .wpcf7-checkbox .first span:before
  1399. {
  1400. content: '';
  1401. position:absolute;
  1402. left:0;
  1403. width:30px;
  1404. height:30px;
  1405. border:1px solid @color_purple;
  1406. border-radius:7px;
  1407. margin-left:-40px;
  1408. }
  1409. .join_us input[type="radio"]:checked + .wpcf7-radio .first span:before,
  1410. .join_us input[type="radio"]:checked + .wpcf7-radio .last span:before,
  1411. .join_us input[type="checkbox"]:checked + .wpcf7-checkbox .first span:before
  1412. {
  1413. background: url('/wp-content/themes/DT-UK/images/check.png') no-repeat;
  1414. background-position: center;background:red;
  1415. }
  1416. .join_us input[type="radio"]:checked + .join_us {
  1417. border: 3px solid green;
  1418. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!