API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 19th, 2018
150
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 24.33 KB | None | 0 0
raw download clone embed print report
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   -webkit-box-sizing: border-box;
  5.           box-sizing: border-box; }
  6.  
  7. body {
  8.   font: 13px 'Lato', sans-serif;
  9.   color: #898989;
  10.   min-height: 100vh;
  11.   display: -webkit-box;
  12.   display: -ms-flexbox;
  13.   display: flex;
  14.   -webkit-box-orient: vertical;
  15.   -webkit-box-direction: normal;
  16.       -ms-flex-direction: column;
  17.           flex-direction: column; }
  18.  
  19. ol, ul, li {
  20.   list-style-type: none; }
  21.  
  22. a {
  23.   color: inherit;
  24.   text-decoration: none; }
  25.  
  26. img {
  27.   max-width: 100%;
  28.   height: auto; }
  29.  
  30. a, button {
  31.   cursor: pointer;
  32.   -webkit-transition: .3s;
  33.   transition: .3s; }
  34.  
  35. .text-center {
  36.   text-align: center; }
  37.  
  38. .text-right {
  39.   text-align: right; }
  40.  
  41. .action-link {
  42.   color: #245588;
  43.   text-decoration: underline; }
  44.   .action-link:hover {
  45.     text-decoration: none; }
  46.  
  47. .container {
  48.   max-width: 1170px;
  49.   padding: 0 15px;
  50.   margin: 0 auto; }
  51.   .container--no-paddings {
  52.     padding: 0; }
  53.  
  54. /* ******* header ******* */
  55. .header__wrapper {
  56.   padding-top: 12px;
  57.   display: -webkit-box;
  58.   display: -ms-flexbox;
  59.   display: flex;
  60.   -ms-flex-wrap: wrap;
  61.       flex-wrap: wrap;
  62.   -webkit-box-pack: justify;
  63.       -ms-flex-pack: justify;
  64.           justify-content: space-between;
  65.   -webkit-box-align: center;
  66.       -ms-flex-align: center;
  67.           align-items: center; }
  68.  
  69. .header__slogan {
  70.   margin-left: auto;
  71.   margin-right: 22px;
  72.   display: -webkit-box;
  73.   display: -ms-flexbox;
  74.   display: flex;
  75.   -webkit-box-align: center;
  76.       -ms-flex-align: center;
  77.           align-items: center; }
  78.   .header__slogan-info {
  79.     padding-left: 10px;
  80.     line-height: 1; }
  81.     .header__slogan-info-header {
  82.       color: #245588;
  83.       font-size: 22px; }
  84.     .header__slogan-info-desc {
  85.       /*font-size: 13px;*/ }
  86.  
  87. .header__website-desc {
  88.   font-size: 11px;
  89.   color: #245588;
  90.   text-transform: uppercase;
  91.   border-left: 2px solid #245588;
  92.   font-weight: bold;
  93.   padding-left: 30px; }
  94.  
  95. .header__menu {
  96.   width: 100%;
  97.   padding: 20px 0;
  98.   border-bottom: 2px solid #245588; }
  99.   .header__menu-container {
  100.     display: -webkit-box;
  101.     display: -ms-flexbox;
  102.     display: flex;
  103.     -webkit-box-pack: start;
  104.         -ms-flex-pack: start;
  105.             justify-content: flex-start; }
  106.   .header__menu-element {
  107.     margin: 0 10px; }
  108.     .header__menu-element:first-child {
  109.       margin-left: 0; }
  110.     .header__menu-element:last-child {
  111.       margin-right: 0; }
  112.   .header__menu-link {
  113.     display: block; }
  114.     .header__menu-link:hover {
  115.       color: #245588; }
  116.     .active > .header__menu-link {
  117.       color: #245588;
  118.       font-weight: bold; }
  119.  
  120. /**
  121. * menu toggle begins
  122. **/
  123. .menu-toggle {
  124.   margin-left: auto;
  125.   cursor: pointer;
  126.   display: none;
  127.   -webkit-box-orient: vertical;
  128.   -webkit-box-direction: normal;
  129.       -ms-flex-direction: column;
  130.           flex-direction: column;
  131.   -webkit-box-pack: justify;
  132.       -ms-flex-pack: justify;
  133.           justify-content: space-between;
  134.   width: 45px;
  135.   height: 30px;
  136.   -webkit-transition: .3s;
  137.   transition: .3s; }
  138.   .menu-toggle.opened {
  139.     -webkit-box-pack: center;
  140.         -ms-flex-pack: center;
  141.             justify-content: center;
  142.     -webkit-transform: rotate(45deg);
  143.             transform: rotate(45deg); }
  144.   .menu-toggle__element {
  145.     background-color: #000;
  146.     width: 100%;
  147.     height: 20%;
  148.     -webkit-transition: .3s;
  149.     transition: .3s; }
  150.   .menu-toggle.opened .menu-toggle__element {
  151.     background-color: #f60; }
  152.     .menu-toggle.opened .menu-toggle__element:nth-of-type(1) {
  153.       -webkit-transform: translateY(100%);
  154.               transform: translateY(100%); }
  155.     .menu-toggle.opened .menu-toggle__element:nth-of-type(3) {
  156.       -webkit-transform-origin: center center;
  157.               transform-origin: center center;
  158.       -webkit-transform: translateY(-100%) rotate(90deg);
  159.               transform: translateY(-100%) rotate(90deg); }
  160.     .menu-toggle.opened .menu-toggle__element:nth-of-type(2) {
  161.       opacity: 0; }
  162.  
  163. /** ^^^^^^^^^^^^^^
  164. * menu toggle ends
  165. **/
  166. @media only screen and (max-width: 1150px) {
  167.   .menu-toggle {
  168.     display: -webkit-box;
  169.     display: -ms-flexbox;
  170.     display: flex; }
  171.   .header__menu {
  172.     position: relative; }
  173.     .header__menu-wrapper {
  174.       display: none;
  175.       position: absolute;
  176.       left: 0;
  177.       right: 0;
  178.       top: 100%;
  179.       background-color: #fff;
  180.       -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
  181.               box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5); }
  182.     .header__menu-container {
  183.       padding: 20px 0;
  184.       -webkit-box-orient: vertical;
  185.       -webkit-box-direction: normal;
  186.           -ms-flex-direction: column;
  187.               flex-direction: column;
  188.       -webkit-box-align: center;
  189.           -ms-flex-align: center;
  190.               align-items: center; }
  191.     .header__menu-link {
  192.       padding: 10px 0; }
  193.   .header__wrapper {
  194.     -ms-flex-pack: distribute;
  195.         justify-content: space-around; }
  196.   .header__logo {
  197.     margin: 0; }
  198.   .header__slogan {
  199.     margin: 0;
  200.     margin-right: 10px;
  201.     display: -webkit-box;
  202.     display: -ms-flexbox;
  203.     display: flex;
  204.     -webkit-box-align: center;
  205.         -ms-flex-align: center;
  206.             align-items: center; }
  207.   .header__website-desc {
  208.     margin-right: auto;
  209.     margin-top: 30px;
  210.     margin-bottom: 20px; } }
  211.  
  212. @media only screen and (max-width: 768px) {
  213.   .header__wrapper {
  214.     -webkit-box-orient: vertical;
  215.     -webkit-box-direction: normal;
  216.         -ms-flex-direction: column;
  217.             flex-direction: column; }
  218.   .header__logo {
  219.     margin-bottom: 20px; }
  220.   .header__slogan {
  221.     margin-bottom: 20px;
  222.     display: -webkit-box;
  223.     display: -ms-flexbox;
  224.     display: flex;
  225.     -webkit-box-align: center;
  226.         -ms-flex-align: center;
  227.             align-items: center; }
  228.   .header__website-desc {
  229.     margin: 0;
  230.     padding-left: 15px;
  231.     margin-bottom: 20px; } }
  232.  
  233. /* ^^^^^^^ header ^^^^^^^ */
  234. /* ******* banner ******* */
  235. .banner__wrapper {
  236.   padding-top: 23px; }
  237.  
  238. .banner__slider-element {
  239.   outline: 0; }
  240.   .banner__slider-element-wrapper {
  241.     padding-left: 90px;
  242.     min-height: 505px;
  243.     background: url(../images/banner-1.jpg) center center no-repeat;
  244.     background-size: cover;
  245.     color: #fff;
  246.     display: -webkit-box;
  247.     display: -ms-flexbox;
  248.     display: flex;
  249.     -webkit-box-align: center;
  250.         -ms-flex-align: center;
  251.             align-items: center; }
  252.  
  253. .banner__slider-header {
  254.   font-size: 31.99px;
  255.   text-transform: uppercase;
  256.   font-weight: 900;
  257.   padding-bottom: 5px; }
  258.  
  259. .banner__slider-info {
  260.   max-width: 470px; }
  261.  
  262. .banner__slider-desc {
  263.   text-transform: uppercase;
  264.   font-size: 20px;
  265.   font-weight: 200;
  266.   letter-spacing: 0.02em; }
  267.   .banner__slider-desc--small {
  268.     display: inline-block;
  269.     text-transform: none;
  270.     line-height: 20px;
  271.     font-size: 12px; }
  272.  
  273. @media only screen and (max-width: 1230px) {
  274.   .banner__slider {
  275.     padding: 0 30px; } }
  276.  
  277. @media only screen and (max-width: 768px) {
  278.   .banner__slider-element {
  279.     outline: 0; }
  280.     .banner__slider-element-wrapper {
  281.       padding: 0 15px;
  282.       text-align: center;
  283.       min-height: 300px;
  284.       position: relative;
  285.       z-index: 1; }
  286.       .banner__slider-element-wrapper:after {
  287.         content: '';
  288.         position: absolute;
  289.         z-index: -1;
  290.         background-color: #000;
  291.         opacity: .4;
  292.         top: 0;
  293.         left: 0;
  294.         right: 0;
  295.         bottom: 0; }
  296.   .banner__slider-info {
  297.     max-width: 470px;
  298.     margin: auto; } }
  299.  
  300. /* ^^^^^^^ banner ^^^^^^^ */
  301. /* ******* information ******* */
  302. .information {
  303.   margin-bottom: 27px; }
  304.   .information__wrapper {
  305.     padding-top: 45px;
  306.     padding-bottom: 45px;
  307.     border-bottom: 1px solid #245587;
  308.     display: -webkit-box;
  309.     display: -ms-flexbox;
  310.     display: flex;
  311.     -webkit-box-pack: justify;
  312.         -ms-flex-pack: justify;
  313.             justify-content: space-between; }
  314.   .information__main {
  315.     max-width: 555px; }
  316.     .information__main-img-box {
  317.       padding-bottom: 25px; }
  318.     .information__main-header {
  319.       color: #245588;
  320.       font-size: 18px;
  321.       margin-bottom: 5px; }
  322.     .information__main-desc {
  323.       font-size: 13px;
  324.       line-height: 24px; }
  325.   .information__news {
  326.     max-width: 538px;
  327.     padding-left: 50px;
  328.     border-left: 1px solid #245587;
  329.     height: 100%;
  330.     padding-bottom: 20px; }
  331.  
  332. .news__header {
  333.   text-transform: uppercase;
  334.   color: #245588;
  335.   font-weight: 500;
  336.   padding-bottom: 20px; }
  337.  
  338. .news__list-element {
  339.   display: -webkit-box;
  340.   display: -ms-flexbox;
  341.   display: flex;
  342.   margin-bottom: 32px; }
  343.   .news__list-element:last-child {
  344.     margin-bottom: 0; }
  345.   .news__list-element-img-box {
  346.     padding-right: 30px;
  347.     font-size: 0; }
  348.   .news__list-element-img {
  349.     min-width: 195px; }
  350.   .news__list-element-header {
  351.     line-height: 24px;
  352.     font-size: 13px;
  353.     color: #245588;
  354.     padding-bottom: 5px; }
  355.   .news__list-element-published {
  356.     color: #252525;
  357.     font-size: 11px; }
  358.   .news__list-element-desc {
  359.     padding-top: 7px;
  360.     font-size: 13px;
  361.     line-height: 24px; }
  362.  
  363. @media only screen and (max-width: 1170px) {
  364.   .information__wrapper {
  365.     -webkit-box-orient: vertical;
  366.     -webkit-box-direction: normal;
  367.         -ms-flex-direction: column;
  368.             flex-direction: column; }
  369.   .information__main {
  370.     max-width: 100%;
  371.     margin-bottom: 30px; }
  372.     .information__main-img-box {
  373.       text-align: center; }
  374.   .information__news {
  375.     max-width: 100%;
  376.     padding-top: 30px;
  377.     padding-left: 0;
  378.     border-top: 1px solid #245587;
  379.     border-left: none;
  380.     padding-bottom: 20px; }
  381.   .news__list-element-img-box {
  382.     padding-right: 20px; } }
  383.  
  384. @media only screen and (max-width: 650px) {
  385.   .news__list-element {
  386.     -webkit-box-orient: vertical;
  387.     -webkit-box-direction: normal;
  388.         -ms-flex-direction: column;
  389.             flex-direction: column; }
  390.     .news__list-element-img-box {
  391.       padding: 0;
  392.       text-align: center;
  393.       margin-bottom: 20px; } }
  394.  
  395. /* ^^^^^^^ information ^^^^^^^ */
  396. /* ******* about ******* */
  397. .about {
  398.   padding-bottom: 30px; }
  399.   .about__wrapper {
  400.     padding-bottom: 15px;
  401.     border-bottom: 1px solid #245587; }
  402.   .about__header {
  403.     color: #245588;
  404.     margin-bottom: 27px;
  405.     font-size: 18px; }
  406.   .about__desc {
  407.     line-height: 24px;
  408.     padding-bottom: 10px; }
  409.   .about__read-more-btn {
  410.     color: #245588;
  411.     display: inline-block; }
  412.     .about__read-more-btn:hover {
  413.       opacity: .7; }
  414.  
  415. /* ^^^^^^^ about ^^^^^^^ */
  416. /* ******* helping ******* */
  417. .helping__wrapper {
  418.   display: -webkit-box;
  419.   display: -ms-flexbox;
  420.   display: flex;
  421.   -webkit-box-pack: justify;
  422.       -ms-flex-pack: justify;
  423.           justify-content: space-between;
  424.   padding-bottom: 85px; }
  425.  
  426. .helping__info {
  427.   padding-right: 90px; }
  428.   .helping__info-header {
  429.     color: #245588;
  430.     font-size: 18px;
  431.     margin-bottom: 27px; }
  432.   .helping__info-desc {
  433.     line-height: 24px; }
  434.  
  435. .helping__form {
  436.   width: 100%;
  437.   max-width: 555px;
  438.   min-width: 555px; }
  439.   .helping__form-header {
  440.     margin-bottom: 18px;
  441.     color: #245588;
  442.     font-size: 18px; }
  443.   .helping__form-fields {
  444.     display: -webkit-box;
  445.     display: -ms-flexbox;
  446.     display: flex;
  447.     -webkit-box-pack: justify;
  448.         -ms-flex-pack: justify;
  449.             justify-content: space-between;
  450.     -ms-flex-wrap: wrap;
  451.         flex-wrap: wrap;
  452.     padding-bottom: 12px; }
  453.     .helping__form-fields-element {
  454.       padding: 0 13px;
  455.       width: 270px;
  456.       min-height: 39px;
  457.       border: 1px solid #EAEAEA;
  458.       border-radius: 3px;
  459.       margin-bottom: 18px;
  460.       color: #777; }
  461.   .helping__form-action-btn {
  462.     background-color: #245587;
  463.     color: #fff;
  464.     text-transform: uppercase;
  465.     border: 2px solid transparent;
  466.     border-radius: 3px;
  467.     padding: 15px 55px; }
  468.     .helping__form-action-btn:hover {
  469.       background-color: #fff;
  470.       color: #245587;
  471.       border-color: #245587; }
  472.  
  473. ::-webkit-input-placeholder {
  474.   color: #c2c2c2;
  475.   font-size: 11px;
  476.   text-transform: uppercase; }
  477.  
  478. ::-moz-placeholder {
  479.   color: #c2c2c2;
  480.   font-size: 11px;
  481.   text-transform: uppercase; }
  482.  
  483. /* Firefox 19+ */
  484. :-moz-placeholder {
  485.   color: #c2c2c2;
  486.   font-size: 11px;
  487.   text-transform: uppercase; }
  488.  
  489. /* Firefox 18- */
  490. :-ms-input-placeholder {
  491.   color: #c2c2c2;
  492.   font-size: 11px;
  493.   text-transform: uppercase; }
  494.  
  495. @media only screen and (max-width: 1150px) {
  496.   .helping__info {
  497.     padding-right: 40px; } }
  498.  
  499. @media only screen and (max-width: 992px) {
  500.   .helping__wrapper {
  501.     -webkit-box-orient: vertical;
  502.     -webkit-box-direction: normal;
  503.         -ms-flex-direction: column;
  504.             flex-direction: column; }
  505.   .helping__info {
  506.     padding: 0;
  507.     margin-bottom: 30px; }
  508.   .helping__form {
  509.     max-width: initial;
  510.     min-width: initial;
  511.     text-align: center; }
  512.     .helping__form-fields {
  513.       -webkit-box-pack: center;
  514.           -ms-flex-pack: center;
  515.               justify-content: center; }
  516.       .helping__form-fields-element {
  517.         width: 350px;
  518.         margin: 0 15px;
  519.         margin-bottom: 30px; } }
  520.  
  521. @media only screen and (max-width: 480px) {
  522.   .helping__form-fields {
  523.     -webkit-box-pack: center;
  524.         -ms-flex-pack: center;
  525.             justify-content: center; }
  526.     .helping__form-fields-element {
  527.       width: 100%;
  528.       margin-bottom: 20px; }
  529.       .helping__form-fields-element:last-child {
  530.         margin-bottom: 30px; } }
  531.  
  532. /* ^^^^^^^ helping ^^^^^^^ */
  533. /* ******* footer ******* */
  534. .footer {
  535.   margin-top: auto; }
  536.   .footer__wrapper {
  537.     font-size: 11px;
  538.     line-height: 24px;
  539.     padding-top: 40px;
  540.     color: #707070;
  541.     background-color: #F8F8F8; }
  542.   .footer__menu {
  543.     padding-bottom: 40px; }
  544.     .footer__menu-container {
  545.       display: -webkit-box;
  546.       display: -ms-flexbox;
  547.       display: flex;
  548.       -webkit-box-pack: justify;
  549.           -ms-flex-pack: justify;
  550.               justify-content: space-between; }
  551.     .footer__menu-link--bold-and-upper {
  552.       font-weight: bold;
  553.       text-transform: uppercase; }
  554.     .footer__menu-sub-container {
  555.       padding-left: 15px; }
  556.       .footer__menu-sub-container--no-paddings {
  557.         padding: 0; }
  558.   .footer__info {
  559.     padding-top: 15px;
  560.     padding-bottom: 15px;
  561.     background-color: #F0F0F0; }
  562.     .footer__info-wrapper {
  563.       display: -webkit-box;
  564.       display: -ms-flexbox;
  565.       display: flex;
  566.       -webkit-box-pack: justify;
  567.           -ms-flex-pack: justify;
  568.               justify-content: space-between; }
  569.  
  570. @media only screen and (max-width: 888px) {
  571.   .footer__menu-container {
  572.     -webkit-box-orient: vertical;
  573.     -webkit-box-direction: normal;
  574.         -ms-flex-direction: column;
  575.             flex-direction: column;
  576.     -webkit-box-align: center;
  577.         -ms-flex-align: center;
  578.             align-items: center;
  579.     text-align: center; }
  580.   .footer__menu-element {
  581.     margin: 0 20px;
  582.     margin-bottom: 30px; }
  583.   .footer__menu-sub-container {
  584.     padding: 0; }
  585.   .footer__info {
  586.     padding-top: 15px;
  587.     padding-bottom: 15px;
  588.     background-color: #F0F0F0; }
  589.     .footer__info-wrapper {
  590.       display: -webkit-box;
  591.       display: -ms-flexbox;
  592.       display: flex;
  593.       -webkit-box-pack: justify;
  594.           -ms-flex-pack: justify;
  595.               justify-content: space-between; } }
  596.  
  597. @media only screen and (max-width: 666px) {
  598.   .footer__info-wrapper {
  599.     -webkit-box-orient: vertical;
  600.     -webkit-box-direction: normal;
  601.         -ms-flex-direction: column;
  602.             flex-direction: column;
  603.     text-align: center; }
  604.   .footer__info-contacts {
  605.     margin-bottom: 30px; } }
  606.  
  607. /* ^^^^^^^ footer ^^^^^^^ */
  608. /* ******* .single ******* */
  609. .single {
  610.   padding-top: 23px;
  611.   padding-bottom: 50px; }
  612.   .single__media {
  613.     display: -webkit-box;
  614.     display: -ms-flexbox;
  615.     display: flex;
  616.     padding-bottom: 40px; }
  617.     .single__media-img-box {
  618.       width: 100%;
  619.       max-width: 458px; }
  620.     .single__media-img {
  621.       display: block;
  622.       margin: auto;
  623.       /*height: 1000px;*/ }
  624.     .single__media-info {
  625.       padding-left: 30px; }
  626.       .single__media-info-wrapper {
  627.         height: 100%;
  628.         display: -webkit-box;
  629.         display: -ms-flexbox;
  630.         display: flex;
  631.         -webkit-box-orient: vertical;
  632.         -webkit-box-direction: normal;
  633.             -ms-flex-direction: column;
  634.                 flex-direction: column;
  635.         /*justify-content: space-between;*/
  636.         -webkit-box-align: start;
  637.             -ms-flex-align: start;
  638.                 align-items: flex-start;
  639.         -webkit-box-pack: start;
  640.             -ms-flex-pack: start;
  641.                 justify-content: flex-start; }
  642.       .single__media-info-element {
  643.         /*margin: 5px 0;*/
  644.         margin: 15px 0;
  645.         /*background-color: red;*/ }
  646.         .single__media-info-element:first-child {
  647.           margin-top: 0; }
  648.         .single__media-info-element:last-child {
  649.           margin-bottom: 0; }
  650.       .single__media-info-header {
  651.         color: #245588;
  652.         font-size: 14px; }
  653.       .single__media-info-date {
  654.         font-size: 0;
  655.         border: 1px solid #245588; }
  656.         .single__media-info-date-item {
  657.           display: inline-block;
  658.           padding: 15px 10px;
  659.           font-size: 13px;
  660.           font-weight: bold;
  661.           color: #245588;
  662.           background: #fff; }
  663.           .single__media-info-date-item--blue {
  664.             background: #245588;
  665.             color: #fff; }
  666.       .single__media-info-details-element {
  667.         line-height: 24px;
  668.         display: -webkit-box;
  669.         display: -ms-flexbox;
  670.         display: flex; }
  671.       .single__media-info-details-caption {
  672.         min-width: 103px; }
  673.       .single__media-info-details-text {
  674.         color: #555555; }
  675.       .single__media-info-details--blue-and-bold {
  676.         color: #245588;
  677.         font-weight: bold; }
  678.       .single__media-info-action-link {
  679.         color: #245588; }
  680.   .single__desc {
  681.     line-height: 24px; }
  682.   .single__starting-time {
  683.     line-height: 24px;
  684.     padding-top: 22px;
  685.     color: #245588;
  686.     font-weight: bold; }
  687.  
  688. @media only screen and (max-width: 850px) {
  689.   .single__media {
  690.     -webkit-box-orient: vertical;
  691.     -webkit-box-direction: normal;
  692.         -ms-flex-direction: column;
  693.             flex-direction: column;
  694.     -webkit-box-align: center;
  695.         -ms-flex-align: center;
  696.             align-items: center; }
  697.     .single__media-img-box {
  698.       margin-bottom: 30px; }
  699.     .single__media-info {
  700.       padding: 0;
  701.       width: 100%; }
  702.       .single__media-info-element {
  703.         margin: 8px 0; } }
  704.  
  705. /* ^^^^^^^ .single ^^^^^^^ */
  706. /* ******* {{section-title}} ******* */
  707. /* ^^^^^^^ {{section-title}} ^^^^^^^ */
  708. /* ******* events ******* */
  709. .events {
  710.   padding-top: 23px;
  711.   padding-bottom: 140px; }
  712.   .events__types {
  713.     padding-bottom: 13px;
  714.     margin-bottom: 23px;
  715.     border-bottom: 1px solid #245588;
  716.     overflow: hidden; }
  717.     .events__types-container {
  718.       margin: 0 -15px;
  719.       display: -webkit-box;
  720.       display: -ms-flexbox;
  721.       display: flex;
  722.       -ms-flex-wrap: wrap;
  723.           flex-wrap: wrap; }
  724.     .events__types-element {
  725.       margin: 0 15px 10px;
  726.       /*&:first-child {
  727.                 margin-left: 0;
  728.             }
  729.             &:last-child {
  730.                 margin-right: 0;
  731.             }*/ }
  732.     .events__types-link {
  733.       font-size: 10px;
  734.       text-transform: uppercase;
  735.       font-weight: bold;
  736.       border-bottom: 2px solid transparent; }
  737.       .active .events__types-link, .events__types-link:hover {
  738.         color: #245588; }
  739.       .active .events__types-link {
  740.         border-bottom-color: inherit;
  741.         padding-bottom: 2px; }
  742.       .events__types-link--small {
  743.         border-bottom-color: inherit;
  744.         border-bottom-width: 1px;
  745.         font-weight: normal;
  746.         text-transform: none; }
  747.   .events__element {
  748.     border-bottom: 1px solid #245588;
  749.     margin-bottom: 23px;
  750.     padding-bottom: 18px; }
  751.   .events__media {
  752.     display: -webkit-box;
  753.     display: -ms-flexbox;
  754.     display: flex; }
  755.     .events__media-img-box {
  756.       width: 100%;
  757.       max-width: 263px; }
  758.     .events__media-img {
  759.       display: block;
  760.       margin: auto; }
  761.     .events__media-info {
  762.       width: 100%;
  763.       position: relative;
  764.       padding-left: 30px; }
  765.       .events__media-info-wrapper {
  766.         width: 100%;
  767.         height: 100%; }
  768.       .events__media-info-element {
  769.         margin-bottom: 20px; }
  770.         .events__media-info-element:last-child {
  771.           margin-bottom: 0; }
  772.       .events__media-info-title-date {
  773.         margin-bottom: 8px;
  774.         display: -webkit-box;
  775.         display: -ms-flexbox;
  776.         display: flex;
  777.         -webkit-box-pack: justify;
  778.             -ms-flex-pack: justify;
  779.                 justify-content: space-between;
  780.         -webkit-box-align: start;
  781.             -ms-flex-align: start;
  782.                 align-items: flex-start;
  783.         -ms-flex-wrap: wrap;
  784.             flex-wrap: wrap; }
  785.       .events__media-info-header {
  786.         color: #245588;
  787.         font-size: 14px;
  788.         margin-right: 15px;
  789.         margin-bottom: 15px; }
  790.       .events__media-info-date {
  791.         margin-left: auto;
  792.         border: 1px solid #245588;
  793.         display: -webkit-box;
  794.         display: -ms-flexbox;
  795.         display: flex;
  796.         min-width: 250px; }
  797.         .events__media-info-date-item {
  798.           padding: 15px 15px;
  799.           font-size: 13px;
  800.           font-weight: bold;
  801.           color: #245588;
  802.           background: #fff; }
  803.           .events__media-info-date-item--blue {
  804.             background: #245588;
  805.             color: #fff; }
  806.       .events__media-info-details-element {
  807.         line-height: 24px;
  808.         display: -webkit-box;
  809.         display: -ms-flexbox;
  810.         display: flex; }
  811.       .events__media-info-details-caption {
  812.         min-width: 103px; }
  813.       .events__media-info-details-text {
  814.         color: #555555; }
  815.       .events__media-info-details--blue-and-bold {
  816.         color: #245588;
  817.         font-weight: bold; }
  818.       .events__media-info-action-link {
  819.         display: inline-block;
  820.         color: #245588; }
  821.   .events__read-more-btn {
  822.     display: inline-block;
  823.     color: #245588; }
  824.     .events__read-more-btn:hover {
  825.       opacity: .5; }
  826.   .events__desc {
  827.     line-height: 24px; }
  828.   .events__starting-time {
  829.     line-height: 24px;
  830.     padding-top: 22px;
  831.     color: #245588;
  832.     font-weight: bold; }
  833.  
  834. @media only screen and (max-width: 992px) {
  835.   .events__media {
  836.     -webkit-box-orient: vertical;
  837.     -webkit-box-direction: normal;
  838.         -ms-flex-direction: column;
  839.             flex-direction: column;
  840.     -webkit-box-align: center;
  841.         -ms-flex-align: center;
  842.             align-items: center; }
  843.     .events__media-img-box {
  844.       margin-bottom: 30px;
  845.       max-width: 100%; }
  846.     .events__media-info {
  847.       padding: 0;
  848.       width: 100%; }
  849.       .events__media-info-title-date {
  850.         -webkit-box-align: center;
  851.             -ms-flex-align: center;
  852.                 align-items: center; }
  853.       .events__media-info-element {
  854.         margin: 8px 0; } }
  855.  
  856. @media only screen and (max-width: 500px) {
  857.   .events__media-info-details {
  858.     margin-bottom: 30px; }
  859.     .events__media-info-details-element {
  860.       -webkit-box-orient: vertical;
  861.       -webkit-box-direction: normal;
  862.           -ms-flex-direction: column;
  863.               flex-direction: column; }
  864.     .events__media-info-details-text {
  865.       padding-left: 25px;
  866.       color: #555555; } }
  867.  
  868. .events .menu-toggle {
  869.   display: none; }
  870.  
  871. @media only screen and (max-width: 768px) {
  872.   .events .menu-toggle {
  873.     display: -webkit-box;
  874.     display: -ms-flexbox;
  875.     display: flex;
  876.     width: 30px;
  877.     height: 25px; }
  878.   .events__types {
  879.     position: relative;
  880.     overflow: visible; }
  881.     .events__types-wrapper {
  882.       position: absolute;
  883.       left: 0;
  884.       right: 0;
  885.       top: 100%;
  886.       z-index: 11;
  887.       display: none;
  888.       -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  889.               box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); }
  890.     .events__types-container {
  891.       margin: 0;
  892.       background-color: #fff;
  893.       -webkit-box-orient: vertical;
  894.       -webkit-box-direction: normal;
  895.           -ms-flex-direction: column;
  896.               flex-direction: column;
  897.       -webkit-box-align: center;
  898.           -ms-flex-align: center;
  899.               align-items: center; }
  900.     .events__types-element {
  901.       margin: 10px 0; } }
  902.  
  903. /* ^^^^^^^ events ^^^^^^^ */
  904. /* ******* {{section-title}} ******* */
  905. /* ^^^^^^^ {{section-title}} ^^^^^^^ */
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!