Advertisement
Guest User

default

a guest
Oct 23rd, 2014
147
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 15.28 KB | None | 0 0
  1. a, .top i, .carousel li h2 {
  2.     -webkit-transition: all 300ms ease;
  3.     -moz-transition: all 300ms ease;
  4.     transition: all 300ms ease;
  5. }
  6.  
  7. .row {
  8.     margin-left: 0;
  9.     margin-right: 0;
  10. }
  11.  
  12. .navbar { background: #ffffff; }
  13.  
  14. .navbar-brand {
  15.     height: 55px;
  16.     line-height: 55px;
  17.     padding: 0 15px 0 15px;
  18. }
  19.  
  20. .nav {
  21.     padding-top: 11px;
  22.     padding-bottom: 11px;
  23. }
  24.  
  25. .nav > li {
  26.     padding-left: 35px;
  27.     padding-right: 35px;
  28.     line-height: 33px;
  29.     height: 33px;
  30.     border-right: 1px solid #e34427;
  31. }
  32.  
  33. .nav > li:nth-child(3), .nav > .order { border: 0; }
  34.  
  35. .nav > li > a {
  36.     font-family: 'Lato', sans-serif;
  37.     font-weight: 400;
  38.     font-size: 17px;
  39.     color: #343434;
  40.     padding: 0;
  41.     display: inline;
  42. }
  43.  
  44. .nav > li > a:hover, .nav > li.active > a {
  45.     color: #cf1c11;
  46.     background: transparent;
  47. }
  48.  
  49. .nav > .order {
  50.     padding: 0;
  51.     margin-top: -11px;
  52. }
  53.  
  54. .nav > .order > a {
  55.     background: #ff8a00;
  56.     height: 73px;
  57.     display: block;
  58.     line-height: 73px;
  59.     padding-left: 22px;
  60.     padding-right: 22px;
  61.     color: #ffffff;
  62.     font-size: 19px;
  63.     border: 1px solid #ffffff;
  64. }
  65.  
  66. .nav > .order > a:hover {
  67. /*    background: #34a8f1;*/
  68.     color: #ffffff;
  69.     background: #ff8a00;
  70. }
  71.  
  72. .section {
  73.     background-size: cover;
  74.     background-position: center center;
  75.     position: relative;
  76.     overflow: hidden;
  77. }
  78.  
  79. #first-section {
  80.     height: 500px;
  81.     background-image: url('../images/first_section_bckg.jpg');
  82.     margin-top: 55px;
  83. }
  84.  
  85. #first-section .container {
  86.     height: 100%;
  87.     position: relative;
  88. }
  89.  
  90. #first-section h1 {
  91.     display: inline-block;
  92.     font-family: 'Lato', sans-serif;
  93.     font-size: 57px;
  94.     font-weight: 900;
  95.     margin-top: 200px;
  96.     margin-left: 190px;
  97.     position: relative;
  98.     z-index: 1;
  99. }
  100.  
  101. #first-section h1 img {
  102.     position: absolute;
  103.     left: -15px;
  104.     top: -60px;
  105. }
  106.  
  107. #first-section h1 span {
  108.     display: block;
  109.     line-height: 68px;
  110.     background: #343434;
  111.     color: #ffffff;
  112.     text-transform: uppercase;
  113.     padding-left: 23px;
  114.     padding-right: 23px;
  115.     margin-top: 10px;
  116. }
  117.  
  118. #first-section h1 span span {
  119.     display: inline;
  120.     padding: 0;
  121.     margin: 0;
  122. }
  123.  
  124. #first-section .profesor, #first-section .profesor-shadow {
  125.     position: absolute;
  126.     bottom: 0;
  127.     margin-left: -10px;
  128.     z-index: 1;
  129. }
  130.  
  131. #first-section .profesor-shadow {
  132.     margin-left: -90px;
  133.     z-index: 0;
  134. }
  135.  
  136.  
  137. .stripe {
  138.     height: 24px;
  139.     background: url('../images/stripe.jpg') repeat-x left top;
  140.     position: relative;
  141.     z-index: 2;
  142. }
  143.  
  144. .stripe a {
  145.     display: block;
  146.     position: absolute;
  147.     left: 50%;
  148.     margin-left: -30px;
  149.     top: -14px;
  150.     height: 60px;
  151.     width: 60px;
  152.     border: 4px solid #ffffff;
  153.     border-radius: 30px;
  154.     text-align: center;
  155.     line-height: 60px;
  156.     color: #ffffff;
  157.     font-size: 36px;
  158.     box-shadow: 0 5px 20px 5px rgba(0,0,0,0.35);
  159. }
  160.  
  161. .stripe a:hover {
  162.     -webkit-transform: translateY(-5px);
  163.     -moz-transform: translateY(-5px);
  164.     transform: translateY(-5px);
  165.     color: #34a8f1;
  166.     border-color: #34a8f1;
  167. }
  168.  
  169. #second-section {
  170.     background-image: url('../images/second_section_bckg.jpg');
  171.     padding-top: 115px;
  172.     padding-bottom: 50px;
  173. }
  174.  
  175. #third-section {
  176.     background-image: url('../images/third_section_bckg.jpg');
  177.     padding-bottom: 50px;
  178.     height: 880px;
  179.     text-align: center;
  180. }
  181.  
  182. #fourth-section {
  183.     background-image: url('../images/fourth_section_bckg.jpg');
  184.     text-align: center;
  185. }
  186.  
  187. #fifth-section {
  188.     background-image: url('../images/fifth_section_bckg.jpg');
  189.     text-align: center;
  190. }
  191.  
  192. #fifth-section h1, #fourth-section h1, #second-section h1, #third-section h1 {
  193.     display: inline-block;
  194.     margin: 0 auto;
  195.     padding-top: 70px;
  196.     color: #ffffff;
  197.     font-family: 'Flama ExtraBold', sans-serif;
  198.     font-size: 121px;
  199.     font-weight: 900;
  200.     text-transform: uppercase;
  201.     letter-spacing: -14px;
  202.     text-shadow: 15px 0 10px rgba(0,0,0,0.5);
  203.     position: relative;
  204. }
  205.  
  206. #fifth-section h1 span, #fourth-section h1 span, #second-section h1 span,
  207. #third-section h1 span {
  208.     display: block;
  209.     color: #f3cf28;
  210.     font-size: 47px;
  211.     line-height: 47px;
  212.     letter-spacing: -5px;
  213.     background: #202020;
  214.     height: 40px;
  215.     padding-left: 30px;
  216.     padding-right: 10px;
  217.     -webkit-transform: rotate(-5deg);
  218.     -moz-transform: rotate(-5deg);
  219.     transform: rotate(-5deg);
  220.     text-shadow: 0 15px 10px rgba(0,0,0,0.5);
  221.     margin-top: -20px;
  222. }
  223.  
  224. #fifth-section h1 img {
  225.     position: absolute;
  226.     right: -40px;
  227.     margin-top: 10px;
  228. }
  229.  
  230. #fifth-section .opinions {
  231.     padding-top: 50px;
  232.     padding-bottom: 15px;
  233.     text-align: left;
  234. }
  235.  
  236. #fifth-section .opinion { padding-bottom: 35px; }
  237.  
  238. #fifth-section .opinion img {
  239.     width: 131px;
  240.     border-radius: 50%;
  241.     border: 9px solid #202020;
  242. }
  243.  
  244. #fifth-section .opinion div {
  245.     width: calc(100% - 131px);
  246.     padding-left: 30px;
  247. }
  248.  
  249. #fifth-section .opinion h2 {
  250.     margin: 0;
  251.     color: #f3cf28;
  252.     font-size: 18px;
  253.     font-family: 'Lato', sans-serif;
  254.     font-weight: 700;
  255. }
  256.  
  257. #fifth-section .opinion p {
  258.     color: #f7f7f7;
  259.     font-family: 'Lato', sans-serif;
  260.     font-size: 16px;
  261.     line-height: 22px;
  262.     margin: 10px 0 0 0;
  263. }
  264.  
  265. .footer {
  266.     border-top: 4px solid #000000;
  267.     background: #ffffff;
  268.     height: 54px;
  269.     line-height: 54px;
  270. }
  271.  
  272. .footer img {
  273.     max-height: 20px;
  274.     margin-top: 17px;
  275.     margin-right: 14px;
  276. }
  277.  
  278. .footer p {
  279.     color: #a1a1a1;
  280.     font-family: 'Lato', sans-serif;
  281.     font-size: 12px;
  282.     margin: 0;
  283. }
  284.  
  285. .footer p a, .footer li a { color: #1d5a76; }
  286.  
  287. .footer ul { margin: 0; }
  288.  
  289. .footer li {
  290.     float: left;
  291.     list-style: none;
  292.     font-family: 'Lato', sans-serif;
  293.     font-size: 12px;
  294.     margin-left: 10px;
  295. }
  296.  
  297. .footer .top {
  298.     padding-left: 17px;
  299.     padding-right: 17px;
  300.     border-left: 1px solid #e6e6e6;
  301.     border-right: 1px solid #e6e6e6;
  302.     margin-left: 20px;
  303.     color: #979797;
  304. }
  305.  
  306. .footer .top:hover i {
  307.     -webkit-transform: translateY(-3px);
  308.     -moz-transform: translateY(-3px);
  309.     transform: translateY(-3px);
  310.     color: #b6b6b6;
  311. }
  312.  
  313. #fourth-section h1 { word-spacing: 9999px; }
  314.  
  315. #fourth-section h1 span {
  316.     display: inline-block;
  317.     position: relative;
  318.     top: -90px;
  319.     padding-right: 30px;
  320. }
  321.  
  322. #fourth-section h1 img {
  323.     position: absolute;
  324.     margin-left: 380px;
  325.     margin-top: 70px;
  326. }
  327.  
  328. #fourth-section .meet-profesor { text-align: left; }
  329.  
  330. #fourth-section .meet-profesor .image-container img {
  331.     margin-top: -80px;
  332.     margin-left: -50px;
  333. }
  334.  
  335. #fourth-section .meet-profesor .image-container {
  336.     padding-left: 0;
  337.     padding-right: 0;
  338. }
  339.  
  340. #fourth-section .meet-profesor p {
  341.     font-family: 'Lato', sans-serif;
  342.     font-size: 22px;
  343.     line-height: 28px;
  344.     color: #ffffff;
  345.     text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  346. }
  347.  
  348. #fourth-section .meet-profesor blockquote {
  349.     background: rgba(52,52,52,0.56);
  350.     border: 0;
  351.     padding: 30px;
  352.     font-family: 'Lato', sans-serif;
  353.     font-weight: 700;
  354.     font-style: italic;
  355.     font-size: 16px;
  356.     color: #f3cf28;
  357.     line-height: 18px;
  358.     margin-top: 60px;
  359.     position: relative;
  360. }
  361.  
  362. #fourth-section .meet-profesor .col-sm-6 { margin-top: -50px; }
  363.  
  364. #fourth-section .meet-profesor blockquote img {
  365.     position: absolute;
  366.     left: 10px;
  367.     top: -20px;
  368. }
  369.  
  370. #second-section .video-container {
  371.     padding-right: 0;
  372.     text-align: right;
  373. }
  374.  
  375. #second-section .video-container iframe {
  376.     width: 90%;
  377.     margin-top: 20px;
  378. }
  379.  
  380. #second-section .video-container img {
  381.     max-width: 100%;
  382.     height: auto;
  383.     margin-top: 20px;
  384. }
  385.  
  386. #second-section h1 {
  387.     text-align: right;
  388.     line-height: 96px;
  389.     padding-top: 0;
  390.     position: relative;
  391.     max-width: 90%;
  392. }
  393.  
  394. #second-section h1 span {
  395.     position: relative;
  396.     z-index: 1;
  397.     background: none;
  398.     left:  30px;
  399. }
  400.  
  401. #second-section h1:after {
  402.     position: absolute;
  403.     content: '';
  404.     width: 100%;
  405.     height: 30px;
  406.     background: #343434;
  407.     z-index: 0;
  408.     left: 40px;
  409.     -webkit-transform: rotate(-6deg);
  410.     bottom: 0;
  411. }
  412.  
  413. #second-section h1 img {
  414.     position: absolute;
  415.     top: 0;
  416.     left: 30px;
  417. }
  418.  
  419. #second-section p {
  420.     font-family: 'Lato', sans-serif;
  421.     font-size: 15px;
  422.     color: #ffffff;
  423.     margin-top: 30px;
  424.     margin-bottom: 0;
  425.     padding-left: 40px;
  426. }
  427.  
  428. #third-section h1 span {
  429.     padding-left: 40px;
  430.     padding-right: 40px;
  431.     background: #343434;
  432. }
  433.  
  434. #third-section h1 img {
  435.     position: absolute;
  436.     right: -60px;
  437.     margin-top: 25px;
  438. }
  439.  
  440. .carousel {
  441.     padding: 50px 0 0 0;
  442.     margin: 0;
  443. }
  444.  
  445. .carousel li {
  446.     width: 60%;
  447.     padding-bottom: 50px;
  448. }
  449.  
  450. .carousel li img {
  451.     max-width: 120%;
  452.     margin-left: -5%;
  453.     margin-top: -20px;
  454. }
  455.  
  456. .carousel li h2 {
  457.     font-family: 'Lato', sans-serif;
  458.     font-size: 24px;
  459.     color: #ffffff;
  460.     margin: 0;
  461.     -webkit-transform: scale(0);
  462.     -moz-transform: scale(0);
  463.     transform: scale(0);
  464.     opacity: 0;
  465. }
  466.  
  467. .carousel li h2 span { color: #f3cf28; }
  468. .carousel li.active img { margin-top: 0; }
  469.  
  470. .carousel li.active h2 {
  471.     -webkit-transform: scale(1);
  472.     -moz-transform: scale(1);
  473.     transform: scale(1);
  474.     opacity: 1;
  475. }
  476.  
  477. .carousel li iframe { width: 100%; }
  478. #third-section .container { position: relative; }
  479.  
  480. .controls {
  481.     position: absolute;
  482.     top: 120px;
  483.     width: 100%;
  484. }
  485.  
  486. .controls a:hover {
  487.     -webkit-transform: translateY(-5px);
  488.     -moz-transform: translateY(-5px);
  489.     transform: translateY(-5px);
  490.     opacity: 0.7;
  491. }
  492.  
  493. .controls .previous {
  494.     float: left;
  495.     margin-left: 50px;
  496. }
  497.  
  498. .controls .next {
  499.     float: right;
  500.     margin-right: 50px;
  501. }
  502.  
  503. .item-overlay {
  504.     width: 100%;
  505.     height: 100%;
  506.     position: absolute;
  507.     top: 0;
  508.     left: 0;
  509.     z-index: 999;
  510. }
  511.  
  512. .active .item-overlay { display: none; }
  513.  
  514. @media (max-width: 1200px) {
  515.     .nav > li {
  516.         padding-left: 20px;
  517.         padding-right: 20px;
  518.     }
  519.    
  520.     .footer img { display: none; }
  521.     #second-section h1 img, #second-section h1:after { left: 0; }
  522.     #second-section h1 span { left: -30px; }
  523.     #second-section p { padding-left: 0; }
  524.     #second-section .col-sm-4 iframe { margin-left: 0 !important; /* text-align: left; */}
  525. }
  526.  
  527. @media (max-width: 992px) {
  528.     .nav > li > a { font-size: 13px; }
  529.     .nav > .order > a { font-size: 15px; }
  530.    
  531.     .nav > li, .nav > .order > a {
  532.         padding-left: 10px;
  533.         padding-right: 10px;
  534.     }
  535.    
  536.     #first-section h1 { margin-left: 0; }
  537.    
  538.     #second-section h1 {
  539.         font-size: 80px;
  540.         line-height: 65px;
  541.     }
  542.    
  543.     #second-section h1 span { font-size: 33px; }
  544.    
  545.     #fourth-section .meet-profesor .image-container img {
  546.         width: 100%;
  547.         margin-top: 0;
  548.     }
  549.    
  550.     #fourth-section { padding-bottom: 50px; }
  551. }
  552.  
  553. @media (max-width: 767px) {
  554.     #first-section iframe { margin-left: 0 !important; }
  555.    
  556.     #second-section {
  557.         text-align: center;
  558.         padding-top: 50px;
  559.     }
  560.    
  561.     #second-section h1 img { left: -100px; }
  562.     #second-section p { text-align: left; }
  563.     #second-section .col-sm-4 iframe { display: none; }
  564.     #second-section .video-container iframe { width: 100%; }
  565.    
  566.     #fourth-section .meet-profesor .image-container img {
  567.         display: block;
  568.         max-width: 100%;
  569.         width: auto;
  570.         margin: 0 auto;
  571.     }
  572.    
  573.     #fourth-section .meet-profesor .col-sm-6:last-child { margin-top: 50px; }
  574.     .footer ul {
  575.         float: left !important;
  576.         padding-left: 5px;
  577.         border-top: 1px solid #ebebeb;
  578.         width: calc(100% + 30px);
  579.         margin-left: -15px;
  580.     }
  581.    
  582.     .navbar-toggle .icon-bar { background: navy; }
  583.    
  584.     .nav {
  585.         float: none !important;
  586.         padding: 20px;
  587.     }
  588.    
  589.     .navbar-fixed-top .navbar-collapse { height: 200px; }
  590.     .nav > li { border: 0; }
  591.    
  592.     .nav > .order > a {
  593.         height: 33px;
  594.         line-height: 33px;
  595.     }
  596.    
  597.     .nav > .order { margin-top: 0; }
  598. }
  599.  
  600. @media (max-width: 700px) {
  601.     #first-section .profesor {
  602.         z-index: 0;
  603.         right: 50px;
  604.     }
  605.    
  606.     #first-section .profesor-shadow { right: 240px; }
  607. }
  608.  
  609. @media (max-width: 575px) {
  610.     #first-section h1 { font-size: 40px; }
  611.     .controls a {
  612.         margin-left: 0 !important;
  613.         margin-right: 0 !important;
  614.     }
  615. }
  616.  
  617. @media (max-width: 475px) {
  618.     .top { display: none; }
  619.    
  620.     .footer {
  621.         line-height: 18px;
  622.         height: auto;
  623.     }
  624.    
  625.     .footer p, .footer ul {
  626.         padding-top: 10px;
  627.         padding-bottom: 10px;
  628.     }
  629.    
  630.     #fifth-section .opinion img, #fifth-section .opinion div { float: none !important; }
  631.    
  632.     #fifth-section .opinion img {
  633.         display: block;
  634.         margin: 0 auto;
  635.     }
  636.    
  637.     #fifth-section .opinion div {
  638.         width: 100%;
  639.         padding-top: 30px;
  640.     }
  641.    
  642.     #first-section h1 { font-size: 30px; }
  643.    
  644.     #fifth-section h1, #fourth-section h1, #second-section h1, #third-section h1 {
  645.         font-size: 80px;
  646.         letter-spacing: 0;
  647.     }
  648.    
  649.     #fifth-section h1 span, #fourth-section h1 span, #second-section h1 span, #third-section h1 span {
  650.         font-size: 27px;
  651.         letter-spacing: 0;
  652.     }
  653.    
  654.     #fourth-section h1 span { top: -60px; }
  655.     .carousel li h2 { font-size: 18px; }
  656.     #second-section h1 img { left: -10px; }
  657. }
  658.  
  659. @media ( max-height: 750px ) {
  660.     #first-section h1 { margin-top: 10%; }
  661.     #first-section { height: auto; }
  662.     #first-section .profesor, #first-section .profesor-shadow { height: 95%; }
  663.     #first-section iframe { margin-bottom: 5%; }
  664.    
  665.     #second-section {
  666.         padding-top: 5%;
  667.         padding-bottom: 3%;
  668.     }
  669.    
  670.     #second-section h1 {
  671.         font-size: 90px;
  672.         word-spacing: 999px;
  673.         line-height: 70px;
  674.     }
  675.    
  676.     #second-section h1 span { font-size: 40px; }
  677.     #second-section p { font-size: 13px; }
  678.     #second-section iframe { height: 300px; }
  679.    
  680. /*    #third-section {
  681.         padding-bottom: 0;
  682.         height: 590px;
  683.     }
  684.    
  685.     #third-section h1 {
  686.         padding-top: 3%;
  687.         font-size: 90px;
  688.     }
  689.    
  690.     #third-section h1 span {
  691.         font-size: 40px;
  692.         width: 90%;
  693.         padding-left: 10px;
  694.         padding-right: 40px;
  695.     }
  696.    
  697.     .carousel li { width: 35%; }
  698.     .carousel li iframe { height: 250px !important; }
  699.     #third-section .rotator > iframe { margin-top: 320px !important; }
  700.     .carousel li h2 { font-size: 18px; }
  701.     .controls { top: 70px; }*/
  702. }
  703.  
  704. @media (max-width: 767px) {
  705.     .controls, .item-overlay { display: none !important; }
  706.    
  707.     .carousel .item {
  708.         position: static;
  709.         width: 90%;
  710.         margin: 0 auto !important;
  711.         -webkit-transform: scale(1);
  712.     -moz-transform: scale(1);
  713.     -o-transform: scale(1);
  714.     transform: scale(1);
  715.     }
  716.    
  717.     #third-section { height: auto !important; }
  718.    
  719.     .carousel li img {
  720.         max-width: 110%;
  721.         margin-top: 0;
  722.     }
  723.    
  724.     .carousel li h2 {
  725.         -webkit-transform: scale(1);
  726.         -moz-transform: scale(1);
  727.         transform: scale(1);
  728.         opacity: 1;
  729.     }
  730.    
  731.     #third-section .rotator > iframe { margin-top: 0px !important; }
  732. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement