API tools faq
paste
Advertisement
Guest User

style.css //Kean's

a guest
Jun 25th, 2018
92
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.95 KB | None | 0 0
raw download clone embed print report
  1. .main-header {
  2. padding: 15px 0;
  3. border-bottom: 1px solid #eee;
  4. }
  5.  
  6. .main-header .main-nav {
  7. }
  8.  
  9. .main-header .main-nav ul {
  10. list-style-type: none;
  11. padding: 0;
  12. margin: 0;
  13. }
  14.  
  15. .main-header .main-nav ul:after {
  16. clear: both;
  17. content: ' ';
  18. overflow: hidden;
  19. display: block;
  20. }
  21.  
  22. .main-header .main-nav ul li {
  23. float: left;
  24.  
  25.  
  26. }
  27.  
  28. .main-header .main-nav ul li a {
  29. display: block;
  30. padding: 0;
  31. margin: 0 15px;
  32. color: #52575d;
  33. font-weight: bold;
  34. font-family: 'Muli',sans-serif;
  35. text-decoration: none;
  36. font-size: 14px;
  37. }
  38.  
  39. .main-header .main-nav ul li a:hover {
  40. color: #f72464;
  41. }
  42.  
  43.  
  44.  
  45.  
  46. /*Bootstrap Carousel Control Overrides*/
  47. .carousel-control span {
  48. position: absolute;
  49. top: 45%;
  50. left: 20px;
  51. font-size: 40px;
  52. }
  53.  
  54. .carousel-control.right span {
  55. right: 20px;
  56. }
  57.  
  58.  
  59.  
  60. /* Custom CSS */
  61.  
  62. /* Kean's css */
  63. * {
  64. padding: 0;
  65. margin: 0;
  66. box-sizing: border-box;
  67. font-family: 'Roboto', sans-serif;
  68. }
  69.  
  70.  
  71. body {
  72. }
  73.  
  74. #clear {
  75. clear: both;
  76. }
  77.  
  78.  
  79.  
  80. /*CLASSES INTRO*/
  81. #classesIntro {
  82. height: 300px;
  83. /*background-image: url(../img/classesheader.png);
  84. background-size: cover;
  85. background-position: 40%;
  86. background-repeat: no-repeat;*/
  87. margin-bottom: 0;
  88. background-color: #181818;
  89. }
  90.  
  91.  
  92.  
  93.  
  94.  
  95. #classesHeadline {
  96. text-align: center;
  97. margin-top: 50px;
  98. margin-bottom: 0;
  99. font-family: 'Roboto', sans-serif;
  100. font-weight: 300;
  101. line-height: 0.4;
  102. font-size: 3rem;
  103. z-index: 100;
  104. }
  105.  
  106. #classesIntro p {
  107. text-align: center;
  108. font-family: 'Roboto', sans-serif;
  109. font-size: 2rem;
  110. font-weight: 900;
  111. margin-top: 0;
  112. }
  113.  
  114. #ClassContainer {
  115. position: relative;
  116. width: 100%;
  117. background-color: black;
  118. overflow-y: hidden;
  119. overflow-x: hidden;
  120. }
  121.  
  122.  
  123.  
  124. #ClassContainerLEFT {
  125. width: 100%;
  126. background-color: #181818;
  127. overflow-y: hidden;
  128. overflow-x: hidden;
  129. }
  130.  
  131. /*CSS RIGHT SIDE CLASSES*/
  132. #ClassesImgRIGHT {
  133. width: 40%;
  134. background-color: black;
  135. float: left;
  136. }
  137.  
  138. #ClassesImgRIGHT img {
  139. width: 100%;
  140. min-height: 465px;
  141. min-width: 465px;
  142. }
  143.  
  144. #ClassesTextRIGHT {
  145. width: 60%;
  146. max-height: 465px;
  147. float: right;
  148. padding: 40px 50px 50px 0px;
  149. }
  150.  
  151. #ClassesTextRIGHT h2 {
  152. text-align: right;
  153. font-size: 3rem;
  154. white-space: nowrap;
  155. }
  156.  
  157. #ClassesTextRIGHT h2 span {
  158. font-weight: 500;
  159. }
  160.  
  161. #ClassesTextRIGHT p {
  162. font-size: 1rem;
  163. text-align: right;
  164. }
  165.  
  166. #ClassesContainer::after {
  167. clear: both;
  168. }
  169.  
  170. /*CSS LEFT SIDE CLASSES*/
  171. #ClassesImgLEFT {
  172. width: 40%;
  173. background-color: #181818;
  174. background-size: cover;
  175. float: right;
  176. }
  177.  
  178. #ClassesImgLEFT img {
  179. width: 100%;
  180. min-height: 465px;
  181. min-width: 465px;
  182. }
  183.  
  184. #ClassesTextLEFT {
  185. width: 60%;
  186. max-height: 465px;
  187. float: left;
  188. padding: 50px 50px 50px 90px;
  189. }
  190.  
  191. #ClassesTextLEFT h2 {
  192. text-align: left;
  193. font-size: 3rem;
  194. white-space: nowrap;
  195. }
  196.  
  197. #ClassesTextLEFT h2 span {
  198. font-weight: 500;
  199. }
  200.  
  201. #ClassesTextLEFT p {
  202. font-size: 1rem;
  203. text-align: left;
  204. }
  205.  
  206. #ClassesTextLEFT::after {
  207. clear: both;
  208. }
  209.  
  210.  
  211. .firstIMG {
  212. background-image: none;
  213. }
  214.  
  215.  
  216.  
  217. /*SIGN UP BUTTON*/
  218.  
  219. #signupButtonLEFT {
  220. display: inline-block;
  221. float: left;
  222. }
  223.  
  224. #signupButtonRIGHT {
  225. display: inline-block;
  226. float: right;
  227. }
  228.  
  229. a.btn, .btn {
  230. display: inline-block;
  231. text-align: center;
  232. text-decoration: none;
  233. font-family: inherit;
  234. font-weight: 300;
  235. letter-spacing: 1px;
  236. vertical-align: middle;
  237. transition: all 0.2s ease;
  238. box-sizing: border-box;
  239. text-shadow: 0 1px 0 rgba(0,0,0,0.01);
  240. }
  241.  
  242. .btn-large {
  243. font-size: 1.6em;
  244. padding: 0.1625em 0.3em;
  245. }
  246.  
  247. #signupButtonLEFT:hover .btn-blue {
  248. background: black;
  249. color: white;
  250. }
  251.  
  252. #signupButtonLEFT:hover .btn-hidden {
  253. background: white;
  254. color: black;
  255. border: 1px white solid;
  256. }
  257.  
  258. #signupButtonRIGHT:hover .btn-blue {
  259. background: black;
  260. color: white;
  261. }
  262.  
  263. #signupButtonRIGHT:hover .btn-hidden {
  264. background: white;
  265. color: black;
  266. border: 1px white solid;
  267. }
  268.  
  269. .btn-blue {
  270. color: black;
  271. background-color: white;
  272. border-color: white;
  273. }
  274.  
  275. .btn-hidden {
  276. color: white;
  277. background-color: none;
  278. border: none;
  279. }
  280.  
  281. .btn.btn-large.btn-hidden:hover {
  282. color: white;
  283. border: none;
  284. }
  285.  
  286.  
  287. /*Burlesque Class page*/
  288. #BurlesqueClassHeader {
  289. background-color: black;
  290. background-image: url(/content/img/strong-3386583_1920.png);
  291. background-size: cover;
  292. background-position: center 10%;
  293. margin-bottom: 0px;
  294. }
  295.  
  296.  
  297.  
  298. #BurlesqueClassHeader h1 {
  299. text-align: center;
  300. margin-top: 50px;
  301. margin-bottom: 0;
  302. font-family: 'Roboto', sans-serif;
  303. font-weight: 300;
  304. line-height: 0.4;
  305. font-size: 3rem;
  306. }
  307.  
  308. #BurlesqueClassHeader p {
  309. text-align: center;
  310. font-family: 'Roboto', sans-serif;
  311. font-size: 2rem;
  312. font-weight: 900;
  313. margin-top: 0;
  314. }
  315.  
  316. #burlesquePageContainer {
  317. background-color: #181818
  318. }
  319.  
  320. #burlesquePageLeft {
  321. width: 50%;
  322. height: 1000px;
  323. background-color: blue;
  324. float: left;
  325. position: relative;
  326. }
  327.  
  328. #burlesquePageLeft:before {
  329. content: '';
  330. position: absolute;
  331. top: 0;
  332. right: 0;
  333. bottom: 0;
  334. left: 0;
  335. background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
  336. opacity: .6;
  337. }
  338.  
  339. #burlesquePageLeft img {
  340. }
  341.  
  342. #burlesquePageRight {
  343. width: 50%;
  344. position: relative;
  345. background-color: #181818;
  346. float: left;
  347. padding: 25px 70px 25px 70px;
  348. }
  349.  
  350. #burlesquePageRight h1 {
  351. text-align: center;
  352. margin-top: 50px;
  353. margin-bottom: 0;
  354. font-family: 'Roboto', sans-serif;
  355. font-weight: 300;
  356. line-height: 0.4;
  357. font-size: 2.6rem;
  358. white-space: nowrap;
  359. }
  360.  
  361.  
  362. #burlesquePageRight p.headerClassText {
  363. text-align: center;
  364. font-family: 'Roboto', sans-serif;
  365. font-size: 2rem;
  366. font-weight: 900;
  367. margin-top: 0;
  368. }
  369.  
  370.  
  371.  
  372. #burlesquePageContainer::after {
  373. clear: both;
  374. }
  375.  
  376. /*backArrow*/
  377. .backArrow {
  378. position: absolute;
  379. transform: scaleX(-1);
  380. width: 50px;
  381. top: 60px;
  382. left: 65px;
  383. }
  384.  
  385. .backArrowSound {
  386. position: absolute;
  387. transform: scaleX(-1);
  388. width: 50px;
  389. top: 60px;
  390. left: 5px;
  391. }
  392.  
  393.  
  394. /*classes images*/
  395. .burlesqueImage {
  396. background-image: url(/content/img/BurlesqueLanding.jpg);
  397. background-size: cover;
  398. background-position: center;
  399. }
  400.  
  401. .makeupImage {
  402. background-image: url(/content/img/eyeshadow-make-up-makeup-6161.jpg);
  403. background-size: cover;
  404. background-position: center;
  405. }
  406.  
  407. .performanceImage {
  408. background-image: url(/content/img/dance-artist-performance-art-stage-sports-performance-830557-pxhere.com.jpg);
  409. background-size: cover;
  410. background-position: center 0px;
  411. background-repeat: no-repeat
  412. }
  413.  
  414. .soundImage {
  415. background-image: url('/content/img/music-technology-studio-button-electronics-audio-55267-pxhere.com (1).jpg');
  416. background-size: cover;
  417. background-position: top center;
  418. background-repeat: no-repeat
  419. }
  420.  
  421.  
  422. /*About Page*/
  423.  
  424. #aboutContainer {
  425. /*background-image:url(/content/img/Helsinki_Burlesque_Festival_2016_group_pose_picture_1.jpg);*/
  426. background-size: cover;
  427. width: 100%;
  428. padding: 100px 20% 100px 20%;
  429. }
  430.  
  431.  
  432.  
  433.  
  434.  
  435. #aboutContainer::after {
  436. clear: both;
  437. }
  438.  
  439. #aboutLEFT {
  440. width: 0%;
  441. /*background-image: url(/content/img/1b79a64c97fb8bc22952f2f0e63ff3e5.jpg);
  442. background-size: cover;
  443. background-position: center;*/
  444. background-color: firebrick;
  445. }
  446.  
  447. #aboutRIGHT img {
  448. width: 20%;
  449. display: inline;
  450. }
  451.  
  452.  
  453. #aboutRIGHT {
  454. width: 100%;
  455. background-color: black;
  456. padding: 50px 200px 50px 200px;
  457. }
  458.  
  459.  
  460.  
  461. #aboutContainer h2 {
  462. font-weight: 800;
  463. font-size: 4rem;
  464. }
  465.  
  466. #aboutContainer h2 span {
  467. font-weight: 400;
  468. }
  469.  
  470. #aboutBurlesqueIMG {
  471. width: 100%;
  472. height: 300px;
  473. background-color: fuchsia;
  474. background-image: url(/content/img/aboutburlesqueIMG.jpg);
  475. background-size: cover;
  476. background-position: center;
  477. margin-bottom: 30px;
  478. margin-top: 30px;
  479. position: relative;
  480. border-bottom: 10px #262626 solid;
  481. }
  482.  
  483. #aboutBurlesqueIMG::before {
  484. content: '';
  485. position: absolute;
  486. top: 0;
  487. right: 0;
  488. bottom: 0;
  489. left: 0;
  490. background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
  491. opacity: .8;
  492. }
  493.  
  494. #aboutBurlesqueHEADLINE {
  495. position: absolute;
  496. width: 100%;
  497. height: 300px;
  498. text-align: center;
  499. padding-top: 110px;
  500. }
  501.  
  502. #aboutAcademyIMG {
  503. width: 100%;
  504. height: 300px;
  505. background-color: fuchsia;
  506. background-image: url(/content/img/AboutburlesqueAcademyIMG.jpg);
  507. background-size: cover;
  508. background-position: center;
  509. margin-bottom: 30px;
  510. }
  511.  
  512. #aboutContainer p {
  513. margin-bottom: 100px;
  514. font-size: 1rem;
  515. float: left;
  516. }
  517.  
  518. h2#academyHEADLINE {
  519. font-size: 3rem;
  520. text-align: center;
  521. }
  522.  
  523.  
  524. /*EVENTS PAGE*/
  525.  
  526. #EventContent {
  527. padding: 20px;
  528. }
  529.  
  530. #EventsIntro {
  531. height: 300px;
  532. background-image: url(../img/eventsLANDING.jpg);
  533. background-size: cover;
  534. background-repeat: no-repeat;
  535. margin-bottom: 0;
  536. padding: 0px;
  537. padding-top: 55px;
  538. }
  539.  
  540. #EventsIntro p {
  541. text-align: center;
  542. font-family: 'Roboto', sans-serif;
  543. font-size: 2rem;
  544. font-weight: 900;
  545. margin-top: 40px;
  546. margin-bottom: 0px;
  547. }
  548.  
  549. #EventsIntro h1 {
  550. margin-top: 0px;
  551. }
  552.  
  553. /*#EventsContent{
  554. width: 100%;
  555. background-color:black;
  556. padding: 30px 30px 30px 30px;
  557. display:flex;
  558. flex-direction:row;
  559. justify-content:space-around;
  560. }*/
  561.  
  562.  
  563.  
  564. .EventBox {
  565. width: 25%;
  566. height: 600px;
  567. background-color: #2b2b2b;
  568. }
  569.  
  570.  
  571.  
  572. .EventBoxIMG {
  573. width: 100%;
  574. height: 50%;
  575. margin-bottom: 10px;
  576. }
  577.  
  578. #EventTXT {
  579. width: 100%;
  580. padding: 0px 25px 25px 25px;
  581. }
  582.  
  583. .EventBox h3 {
  584. font-weight: normal;
  585. margin-bottom: 0px;
  586. margin-top: 0px;
  587. font-weight: 700;
  588. }
  589.  
  590. #EventDate {
  591. margin-bottom: 10px;
  592. color: #7b7a7a;
  593. }
  594.  
  595. .EventBox #EventDisc {
  596. color: #E3E3E3;
  597. font-weight: 100;
  598. font-size: 1rem;
  599. }
  600.  
  601.  
  602. #EVENT1 {
  603. background-image: url(/content/img/Helsinki_Burlesque_Festival_2016_group_pose_picture_1.jpg);
  604. background-size: cover;
  605. background-position: center;
  606. }
  607.  
  608. .EventBox.btn {
  609. }
  610.  
  611. .card {
  612. float: left;
  613. margin: 20px;
  614. min-width: 300px;
  615. }
  616.  
  617. .card-img-top {
  618. margin-top: 15px;
  619. }
  620.  
  621. .btn-gray {
  622. color: #808080;
  623. border-color: #808080;
  624. }
  625.  
  626. .btn-gray:hover {
  627. background: #808080;
  628. color: #fff;
  629. border-color: #808080;
  630. }
  631.  
  632. a#readmorebutton {
  633. color: white;
  634. margin-left: auto;
  635. margin-right: auto;
  636. display: block;
  637. }
  638.  
  639. #EventsContent > div > div > div > div > a:hover {
  640. color: black;
  641. }
  642.  
  643. /*LOGIN STYLES*/
  644. form {
  645. display: table;
  646. margin: 40px auto;
  647. background-color: #393939;
  648. padding: 30px;
  649. border-radius: 5px;
  650. border-bottom: 2px #808080 solid;
  651. }
  652.  
  653. form h2 {
  654. text-align: center;
  655. font-weight: 100;
  656. border-bottom: 2px #808080 solid;
  657. padding-bottom: 10px;
  658. }
  659.  
  660. form label {
  661. position: relative;
  662. display: block;
  663. }
  664.  
  665. form label input {
  666. font: 18px Helvetica, Arial, sans-serif;
  667. box-sizing: border-box;
  668. display: block;
  669. border: none;
  670. padding: 20px;
  671. width: 300px;
  672. margin-bottom: 20px;
  673. font-size: 18px;
  674. outline: none;
  675. transition: all 0.2s ease-in-out;
  676. border-radius: 5px;
  677. }
  678.  
  679. form label input:focus {
  680. background-color: white;
  681. }
  682.  
  683. form label input:focus, form label input.populated {
  684. padding-top: 28px;
  685. padding-bottom: 12px;
  686. }
  687.  
  688. form label input:focus::placeholder, form label input.populated::placeholder {
  689. color: transparent;
  690. }
  691.  
  692. form label input:focus + span, form label input.populated + span {
  693. opacity: 1;
  694. top: 10px;
  695. }
  696.  
  697. form label span {
  698. color: #35dc9b;
  699. font: 13px Helvetica, Arial, sans-serif;
  700. position: absolute;
  701. top: 0px;
  702. left: 20px;
  703. opacity: 0;
  704. transition: all 0.2s ease-in-out;
  705. }
  706.  
  707. form input[type=submit] {
  708. width: 100%;
  709. transition: all 0.2s ease-in-out;
  710. font: 18px Helvetica, Arial, sans-serif;
  711. border: none;
  712. background: #1aaf75;
  713. color: #fff;
  714. padding: 16px 40px;
  715. border-radius: 5px;
  716. margin-left: auto;
  717. margin-right: auto;
  718. display: block;
  719. cursor: pointer;
  720. }
  721.  
  722. form input[type=submit]:hover {
  723. background: #109f67;
  724. }
  725.  
  726. #ErrMsg {
  727. display: block;
  728. margin-left: auto;
  729. margin-right: auto;
  730. text-align: center;
  731. color: red;
  732. font-weight: 900;
  733. margin-bottom: 10px;
  734. }
  735.  
  736.  
  737.  
  738.  
  739. /*QUERY 1125px*/
  740. @media screen and (max-width: 1125px) {
  741. #classesIntro {
  742. height: 200px;
  743. /*background-image: url(../img/classesheader.png);
  744. background-size: cover;
  745. background-position: 40%;
  746. background-repeat: no-repeat;*/
  747. margin-bottom: 0;
  748. background-color: #181818;
  749. }
  750.  
  751. #classesHeadline {
  752. text-align: center;
  753. margin-top: 20px;
  754. margin-bottom: 0;
  755. font-family: 'Roboto', sans-serif;
  756. font-weight: 300;
  757. line-height: 0.4;
  758. font-size: 3rem;
  759. }
  760.  
  761. #ClassContainer.firstIMG {
  762. background-image: url(/content/img/strong-3386583_1920.png);
  763. background-size: cover;
  764. }
  765.  
  766. #ClassContainer.firstIMG:before {
  767. content: '';
  768. position: absolute;
  769. top: 0;
  770. right: 0;
  771. bottom: 0;
  772. left: 0;
  773. background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
  774. opacity: .3;
  775. pointer-events: none;
  776. }
  777.  
  778. #ClassContainerLEFT.secondIMG {
  779. background-image: url(/content/img/assorted-beauty-blur-457702.png);
  780. background-size: cover;
  781. overflow: hidden;
  782. }
  783.  
  784. #ClassContainer.secondIMG:before {
  785. content: '';
  786. position: absolute;
  787. top: 0;
  788. right: 0;
  789. bottom: 0;
  790. left: 0;
  791. background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
  792. opacity: .3;
  793. }
  794.  
  795. #ClassContainer.thirdIMG {
  796. background-image: url(/content/img/circus-1873241.png);
  797. background-size: cover;
  798. }
  799.  
  800. #ClassContainer.thirdIMG:before {
  801. content: '';
  802. position: absolute;
  803. top: 0;
  804. right: 0;
  805. bottom: 0;
  806. left: 0;
  807. background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
  808. opacity: .3;
  809. pointer-events: none;
  810. }
  811.  
  812. #ClassContainerLEFT.fourthIMG {
  813. background-image: url(/content/img/soundboard-1209885.png);
  814. background-size: cover;
  815. }
  816.  
  817. #ClassContainer.fourthIMG:before {
  818. content: '';
  819. position: absolute;
  820. top: 0;
  821. right: 0;
  822. bottom: 0;
  823. left: 0;
  824. background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
  825. opacity: .3;
  826. }
  827.  
  828. #ClassesImgLEFT {
  829. display: none;
  830. }
  831.  
  832. #ClassesImgRIGHT {
  833. display: none;
  834. }
  835.  
  836. #ClassesTextLEFT {
  837. width: 100%;
  838. padding: 50px;
  839. max-height: none;
  840. }
  841.  
  842. #ClassesTextRIGHT {
  843. width: 100%;
  844. padding: 50px;
  845. max-height: none;
  846. }
  847.  
  848. #ClassesTextLEFT h2 {
  849. width: 100%;
  850. max-height: none;
  851. white-space: normal;
  852. }
  853.  
  854. #ClassesTextRIGHT h2 {
  855. width: 100%;
  856. max-height: none;
  857. white-space: normal;
  858. }
  859.  
  860. #ClassesTextLEFT p {
  861. text-align: left;
  862. }
  863.  
  864. #ClassesTextRIGHT p {
  865. font-size: 1rem;
  866. text-align: left;
  867. }
  868.  
  869. #ClassesTextRIGHT h2 {
  870. text-align: left;
  871. }
  872.  
  873. #signupButtonRIGHT {
  874. display: inline-block;
  875. float: left;
  876. }
  877.  
  878. #burlesquePageLeft {
  879. width: 100%;
  880. height: 200px;
  881. float: none;
  882. background-position: top center;
  883. }
  884.  
  885. #burlesquePageRight {
  886. width: 100%;
  887. float: none;
  888. }
  889.  
  890. #burlesquePageLeft.makeupImage {
  891. width: 100%;
  892. height: 200px;
  893. float: none;
  894. background-position: center center;
  895. }
  896.  
  897. #burlesquePageLeft.performanceImage {
  898. width: 100%;
  899. height: 200px;
  900. float: none;
  901. background-position: center center;
  902. }
  903.  
  904. #aboutContainer {
  905. /*background-image:url(/content/img/Helsinki_Burlesque_Festival_2016_group_pose_picture_1.jpg);*/
  906. background-size: cover;
  907. overflow: auto;
  908. width: 100%;
  909. padding: 100px 15% 100px 15%;
  910. }
  911.  
  912. #aboutContainer h2 {
  913. }
  914. }
  915.  
  916. @media screen and (max-width: 1023px) {
  917. #aboutBurlesqueHEADLINE {
  918. position: absolute;
  919. width: 100%;
  920. height: 300px;
  921. text-align: center;
  922. padding-top: 60px;
  923. }
  924. }
  925. /*QUERY 650px*/
  926. @media screen and (max-width: 650px) {
  927.  
  928. #classesIntro {
  929. height: 200px;
  930. /*background-image: url(../img/classesheader.png);
  931. background-size: cover;
  932. background-position: 40%;
  933. background-repeat: no-repeat;*/
  934. margin-bottom: 0;
  935. background-color: #181818;
  936. }
  937.  
  938. #classesHeadline {
  939. text-align: center;
  940. margin-top: 50px;
  941. margin-bottom: 0;
  942. font-family: 'Roboto', sans-serif;
  943. font-weight: 300;
  944. line-height: 0.4;
  945. font-size: 3rem;
  946. }
  947.  
  948. #ClassesTextLEFT p {
  949. display: none;
  950. }
  951.  
  952. #ClassesTextRIGHT p {
  953. display: none;
  954. }
  955.  
  956. #aboutContainer {
  957. /*background-image:url(/content/img/Helsinki_Burlesque_Festival_2016_group_pose_picture_1.jpg);*/
  958. background-size: cover;
  959. overflow: auto;
  960. width: 100%;
  961. padding: 100px 10% 100px 10%;
  962. }
  963. }
  964.  
  965. /*QUERY 499px*/
  966. @media screen and (max-width: 499px) {
  967.  
  968. #classesIntro {
  969. height: 200px;
  970. /*background-image: url(../img/classesheader.png);
  971. background-size: cover;
  972. background-position: 40%;
  973. background-repeat: no-repeat;*/
  974. margin-bottom: 0;
  975. background-color: #181818;
  976. }
  977.  
  978. #classesHeadline {
  979. text-align: center;
  980. margin-top: 50px;
  981. margin-bottom: 0;
  982. font-family: 'Roboto', sans-serif;
  983. font-weight: 300;
  984. line-height: 0.4;
  985. font-size: 3rem;
  986. }
  987.  
  988. #ClassesTextLEFT h2 {
  989. font-size: 2rem;
  990. }
  991.  
  992. #ClassesTextRIGHT h2 {
  993. font-size: 2rem;
  994. }
  995.  
  996. #burlesquePageRight {
  997. padding: 5px 10px 5px 10px;
  998. }
  999.  
  1000. .backArrow {
  1001. position: absolute;
  1002. transform: scaleX(-1);
  1003. width: 50px;
  1004. top: 40px;
  1005. left: 5px;
  1006. }
  1007.  
  1008. a.btn, .btn {
  1009. display: inline-block;
  1010. text-align: center;
  1011. text-decoration: none;
  1012. font-family: inherit;
  1013. font-weight: 300;
  1014. letter-spacing: 1px;
  1015. vertical-align: middle;
  1016. transition: all 0.2s ease;
  1017. box-sizing: border-box;
  1018. text-shadow: 0 1px 0 rgba(0,0,0,0.01);
  1019. margin-left: 0%;
  1020. }
  1021.  
  1022.  
  1023.  
  1024. #aboutContainer {
  1025. /*background-image:url(/content/img/Helsinki_Burlesque_Festival_2016_group_pose_picture_1.jpg);*/
  1026. background-size: cover;
  1027. overflow: auto;
  1028. width: 100%;
  1029. padding: 100px 4% 100px 4%;
  1030. }
  1031.  
  1032. #aboutContainer h2 {
  1033. font-weight: 800;
  1034. font-size: 3rem;
  1035. }
  1036. }
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!