src/StartPlatz/Bundle/StyleBundle/Resources/views/CSS/_homepage.version-2021-winter.html.twig line 1

Open in your IDE?
  1. <!-- style definitions to make interim homepage similar to previous homepage
  2.      search for
  3.      $this->render('@StartPlatzStyleBundle/CSS/_homepage.version-2021-winter.html.twig',[]);
  4. -->
  5. <style>
  6.     /* Event styles */
  7.     .bg-startplatz {
  8.         background-color: #7ab800;
  9.     }
  11.     .bg-ai-hub {
  12.         background-color: #9632FF !important;
  13.     }
  15.     a.bg-ai-hub:hover, a.bg-ai-hub:focus,
  16.     button.bg-ai-hub:hover,
  17.     button.bg-ai-hub:focus {
  18.         background-color: #b880fe !important; }
  21.     .bg-sp-grey {
  22.         background-color: rgba(82,84,89,0.2);
  23.     }
  25.     /* redefinition for branding purposes */
  26.     .alert-success{
  27.         background-color: #7ab800;
  28.         color: white;
  29.     }
  31.     /* Coworking styles */
  32.    .office-perks .card {
  33.         padding-bottom: 0px;
  34.         border-left: 4px solid #7ab800;
  35.         height: 110px;
  36.         border-radius:1.5rem;
  37.         background-color: #eee;
  38.         margin-bottom: 1.0rem;
  39.         
  40.         background: #eee;
  41.         padding-bottom: 2px;
  42.         box-shadow: none;
  43.         font-size: 14px;
  44.     }
  45.     .office-perks .card:hover {
  46.         box-shadow: none;
  47.     }
  48.     .office-perks .card-header {
  49.         background: none;
  50.         border: none;
  51.     }
  52.     .office-perks .card-body {
  53.         padding-top: 0rem;
  54.         padding: 0rem 0.8rem 0.8rem 0.8rem;
  55.         color: #000000;
  56.         line-height: 1.4;
  57.         font-weight: 500;
  59.         text-align: center;
  60.     }
  62.     .memberships-header h3:after {
  63.         content: " ";
  64.         display: block;
  65.         width: 100px;
  66.         border-bottom: 2px solid #8cc63f;
  67.         margin-top: 5px;
  68.         margin-bottom: 10px;
  69.     }
  70.     .center-block {
  71.       display: block;
  72.       margin-left: auto;
  73.       margin-right: auto;
  74.     }
  75.     .faq .panel-group {
  76.       margin-bottom: 20px;
  77.     }    
  78.     .faq a {
  79.         color: #8cc63f;
  80.     }
  81.     .faq a:hover {
  82.         text-decoration: underline;
  83.     }
  84.     .faq .panel {
  85.       margin-bottom: 20px;
  86.       background-color: #fff;
  87.       border-radius: 4px;
  88.       border: 1px solid transparent;
  89.       -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
  90.       box-shadow: 0 1px 1px rgba(0,0,0,.05);
  91.     }
  92.     .faq .panel-group .panel + .panel {
  93.       margin-top: 5px;
  94.     }
  95.     .faq .panel-group .panel {
  96.       margin-bottom: 0;
  97.       border-radius: 4px;
  98.     }
  99.     .faq .panel-default,
  100.     .faq .panel.panel-default {
  101.       border-color: #ddd;
  102.     }
  103.     .faq .panel-default > .panel-heading {
  104.       color: #333;
  105.       background-color: #f5f5f5;
  106.       border-color: #ddd;
  107.     }
  108.     .faq .panel-group .panel-heading {
  109.       border-bottom: 0;
  110.         border-bottom-color: currentcolor;
  111.     }
  112.     .faq .panel-heading {
  113.       padding: 10px 15px;
  114.       border-bottom: 1px solid transparent;
  115.       border-top-left-radius: 3px;
  116.       border-top-right-radius: 3px;
  117.     }
  118.     .faq .panel-body {
  119.       padding: 15px;
  120.     }
  122.     .col-padding {
  123.         padding-left: 6px;
  124.         padding-right: 0px;
  125.     }
  126.     .card-title {
  127.         font-size: 20px;
  128.         font-weight: bold;
  129.         padding-bottom: 6px;
  130.     }
  131.     .card-title-events {
  132.         font-size: 20px;
  133.         font-weight: bold;
  134.         padding-bottom: 6px;
  135.         color:#7AB800;
  136.     }
  137.     .sp-green, .spGreen{
  138.         color:#7AB800;
  139.     }
  140.     .free-access-info {
  141.         font-weight: bold; /* Example property */
  142.         color: #7AB800; /* Startplatz green for free access info */
  143.         /* Additional styling as needed */
  144.     }
  145.     .cardsmall-title {
  146.         font-size: 17px;
  147.         font-weight: bold;
  148.         margin:1px;
  149.     }
  150.     .card-body {
  151.         color: #ffffff;
  152.         padding: 10px 10px 0;
  153.     }
  154.     .card-body-events{
  155.         color:black;
  156.         padding:20px;
  157.     }
  158.     .card-header {
  159.         background: #7AB800;
  160.         min-height: 50px;
  161.     }
  162.     .threeLineEllipsis {overflow: hidden;text-overflow: ellipsis;
  163.         display: -webkit-box;-webkit-line-clamp: 3;/* number of lines to show */line-clamp: 3;
  164.         -webkit-box-orient: vertical;}
  165.     @media (min-width: 0px) and (max-width: 767px) {
  166.         .card-margin-right {
  167.             margin-left: 15px;
  168.             margin-right: 15px;
  169.         }
  170.     }
  171.     @media (min-width: 768px) and (max-width: 991px) {
  172.         .card-margin-right {
  173.             margin-left: 15px;
  174.             margin-right: 15px;
  175.         }
  176.     }
  177.     @media (min-width: 992px) and (max-width: 1199px) {
  178.         .card-margin-right {
  179.             margin-right: 15px;
  180.             margin-left: 15px;
  181.         }
  182.     }
  183.     @media (min-width: 1200px) {
  184.         .card-margin-right {
  185.             margin-right: 20px;
  186.             margin-left: 15px;
  187.         }
  188.     }
  189.     a.link {
  190.         text-decoration: none;
  191.         color: white;
  192.     }
  193.     .introbig {
  194.         color: black;
  195.         font-size: 56px;
  196.         text-align:center;
  197.         font-weight: bold;
  198.     }
  199.     .introsmall {
  200.         color: black;
  201.         font-size: 18px;
  202.         text-align:center;
  203.         text-transform: uppercase;
  204.     }
  205.     .introteaser {
  206.         color: black;
  207.         font-size: 18px;
  208.         text-align:center;
  209.     }
  210.     .testimonial-name {
  211.         font-size: 18px;
  212.         text-align:center;
  213.         font-weight: bold;
  214.     }
  215.     .text_medium {
  216.         font-size:17px;
  217.         margin-left: 15px;
  218.         margin-right: 15px;
  219.     }
  220.     .card-footer {
  221.         margin:10px;
  222.     }
  223.     .card-body {
  224.         padding: 0 10px;
  225.         color: #ffffff;
  226.     }
  227.     #quote-text {
  228.         font-size:18px;
  229.     }
  230.     .bg-success {
  231.         background-color:#7AB800!important;
  232.     }
  234.     .new-label {color:#fff;background-color:#ef5777;font-size:16px;text-transform:uppercase;padding:4px 7px;display:block;position:absolute;top:-10px;left:5px
  235.     }
  236.     
  237.     .banner-title {
  238.         font-family: 'Source Sans Pro', sans-serif;
  239.         text-shadow: 0px 0px 7px black;
  240.         font-size: 50px;
  241.         font-weight: bold;
  242.         color: white;
  243.     }
  245.     /*Corporation Landingpage*/
  247.     .bold {
  248.         font-weight: bold;
  249.     }
  250.     .lighter {
  251.         font-weight: lighter;
  252.     }
  253.     .temp-font{
  254.         font-family: Arial;
  255.     }
  257.     .align-middle{
  258.         margin: auto;
  259.         width: 8em;
  260.         height: 8em;
  261.     }
  263.     .list-image-hook-partner {
  264.         background: url("https://res.cloudinary.com/startplatz/image/upload/c_scale,w_48/v1653997119/Wordpress/Business-Club%20Landingpage%20/1.png") no-repeat 0px 0px transparent;
  265.         list-style-type: none;
  266.         margin: 0;
  267.         padding: 0px 0px 1px 65px;
  268.         vertical-align: middle;
  269.     }
  271.     .list-image-hook {
  272.         background: url("https://res.cloudinary.com/startplatz/image/upload/c_scale,w_24/v1653997119/Wordpress/Business-Club%20Landingpage%20/1.png") no-repeat 0px 0px transparent;
  273.         list-style-type: none;
  274.         margin: 0;
  275.         padding: 0px 0px 1px 55px;
  276.         vertical-align: middle;
  277.     }
  279.     .list-image-burger {
  280.         background: url("https://res.cloudinary.com/startplatz/image/upload/c_scale,w_48/v1614678467/Icons/business-affiliate-network.png") no-repeat 0px 0px transparent;
  281.         list-style-type: none;
  282.         margin: 0;
  283.         padding: 0px 0px 1px 70px;
  284.         vertical-align: middle;
  285.     }
  287.     .list-image-network {
  288.         background: url("https://res.cloudinary.com/startplatz/image/upload/c_scale,w_48/v1653997119/Wordpress/Business-Club%20Landingpage%20/5.png") no-repeat 0px 0px transparent;
  289.         list-style-type: none;
  290.         margin: 0;
  291.         padding: 0px 0px 1px 70px;
  292.         vertical-align: middle;
  293.     }
  295.     .list-image-percent {
  296.         background: url("https://res.cloudinary.com/startplatz/image/upload/c_scale,w_48/v1653997120/Wordpress/Business-Club%20Landingpage%20/7.png") no-repeat 0px 0px transparent;
  297.         list-style-type: none;
  298.         margin: 0;
  299.         padding: 0px 0px 1px 70px;
  300.         vertical-align: middle;
  301.     }
  303.     .list-image-megaphone {
  304.         background: url("https://res.cloudinary.com/startplatz/image/upload/c_scale,w_48/v1653997119/Wordpress/Business-Club%20Landingpage%20/6.png") no-repeat 0px 0px transparent;
  305.         list-style-type: none;
  306.         margin: 0;
  307.         padding: 0px 0px 1px 70px;
  308.         vertical-align: middle;
  309.     }
  311.     .list-image-global {
  312.         background: url("https://res.cloudinary.com/startplatz/image/upload/c_scale,w_48/v1614678469/Icons/worldwide.png") no-repeat 0px 0px transparent;
  313.         list-style-type: none;
  314.         margin: 0;
  315.         padding: 0px 0px 1px 70px;
  316.         vertical-align: middle;
  317.     }
  319.     .list-image-event {
  320.         background: url("https://res.cloudinary.com/startplatz/image/upload/c_scale,w_48/v1614678467/Icons/croissant.png") no-repeat 0px 0px transparent;
  321.         list-style-type: none;
  322.         margin: 0;
  323.         padding: 0px 0px 1px 70px;
  324.         vertical-align: middle;
  325.     }
  327.     .list-image-benefits {
  328.         background: url("https://res.cloudinary.com/startplatz/image/upload/c_scale,w_48/v1614678466/Icons/hand-shake.png") no-repeat 0px 0px transparent;
  329.         list-style-type: none;
  330.         margin: 0;
  331.         padding: 0px 0px 1px 70px;
  332.         vertical-align: middle;
  333.     }
  335.     .no-border-style{
  336.         border: 0px solid rgba(0,0,0,.125);
  337.         border-radius: 0em;
  338.     }
  340.     .side-border-style{
  341.         border-top: 0px solid rgba(0,0,0,.125);
  342.         border-bottom: 0px solid rgba(0,0,0,.125);;
  343.         border-radius: 0em;
  344.     }
  346.     .event-links a {
  347.         color: inherit; /* blue colors for links too */
  348.         text-decoration: inherit; /* no underline */
  349.     }
  351.     .event-links a:hover {
  352.         color: inherit; /* blue colors for links too */
  353.         text-decoration: inherit; /* no underline */
  354.     }
  356.     a.link-green {
  357.         color:#7AB800;
  358.     }
  360.     @media (min-width: 768px) {
  361.         .pt-md-6,
  362.         .py-md-6 {
  363.             padding-top: 5rem !important;
  364.         }
  366.         .pr-md-6,
  367.         .px-md-6 {
  368.             padding-right: 5rem !important;
  369.         }
  371.         .pb-md-6,
  372.         .py-md-6 {
  373.             padding-bottom: 5rem !important;
  374.         }
  376.         .pl-md-6,
  377.         .px-md-6 {
  378.             padding-left: 5rem !important;
  379.         }
  380.     }
  382.         .pt-md-7,
  383.         .py-md-7 {
  384.             padding-top: 6rem !important;
  385.         }
  387.         .pr-md-7,
  388.         .px-md-7 {
  389.             padding-right: 6rem !important;
  390.         }
  392.         .pb-md-7,
  393.         .py-md-7 {
  394.             padding-bottom: 6rem !important;
  395.         }
  397.         .pl-md-7,
  398.         .px-md-7 {
  399.             padding-left: 6rem !important;
  400.         }
  403.     @media (min-width: 768px) {
  404.         .height-auto {
  405.             height: 400px;
  406.         }
  407.     }
  409.     @media (max-width: 400px) {
  410.         .space-3 {
  411.             padding-top: 2rem !important;
  412.             padding-bottom: 2rem !important; }
  413.     }
  415.     .btn-sp-green {
  416.         color: #ffff;
  417.         background-color: #7ab800 ;
  418.         border-color: #7ab800;
  419.     }
  421.     .btn-sp-green:hover {
  422.         color: #ffff;
  423.         background-color: #507900;
  424.         border-color: #507900;
  425.     }
  427.     /*Timeline at "Nächste Schritte" section*/
  429.     .timeline-item {
  430.         padding: 0.5em 2em 0.6em;
  431.         position: relative;
  432.         color: rgba(0, 0, 0, 0.88);
  433.         border-left: 2px solid rgba(0, 0, 0, 0.88);
  434.     }
  436.     .timeline-item p {
  437.         font-size: 1.1rem;
  438.     }
  440.     .timeline-item::before {
  441.         content: attr(date-is);
  442.         position: absolute;
  443.         left: 2em;
  444.         font-weight: bold;
  445.         top: 1em;
  446.         display: block;
  447.         font-family: 'Roboto', sans-serif;
  448.         font-weight: 700;
  449.         font-size: .785rem;
  450.     }
  452.     .timeline-item::after {
  453.         width: 10px;
  454.         height: 10px;
  455.         display: block;
  456.         top: 1em;
  457.         position: absolute;
  458.         left: -7px;
  459.         border-radius: 10px;
  460.         content: '';
  461.         border: 2px solid black;
  462.         background: white;
  463.     }
  465.     .timeline-item:last-child {
  466.         border-image: linear-gradient(
  467.                 to bottom,
  468.                 rgba(0, 0, 0, 0.88),
  469.                 rgba(0, 0, 0, 0.88))1;
  471.     }
  474.     /*Timeline at "Nächste Schritte" section end */
  477.     /* Slideshow container */
  479.     .slideshow-container {
  480.         position: relative;
  481.         background: #f1f1f1f1;
  482.     }
  484.     /* Slides */
  486.     .mySlides {
  487.         display: none;
  488.         padding: 80px;
  489.         text-align: center;
  490.         background: #8cc63f;
  491.     }
  493.     /* Next & previous buttons */
  494.     .prev, .next {
  495.         cursor: pointer;
  496.         position: absolute;
  497.         top: 50%;
  498.         width: auto;
  499.         margin-top: -30px;
  500.         padding: 16px;
  501.         color: white;
  502.         font-weight: bold;
  503.         font-size: 20px;
  504.         border-radius: 0 3px 3px 0;
  505.         user-select: none;
  506.     }
  508.     /* Position the "next button" to the right */
  509.     .next {
  510.         position: absolute;
  511.         right: 0;
  512.         border-radius: 3px 0 0 3px;
  513.     }
  515.     /* On hover, add a black background color with a little bit see-through */
  516.     .prev:hover, .next:hover {
  517.         background-color: rgba(0,0,0,0.8);
  518.         color: white;
  519.     }
  521.     /* The dot/bullet/indicator container */
  522.     .dot-container {
  523.         text-align: center;
  524.         padding: 20px;
  525.         background: #8cc63f;
  526.     }
  528.     /* The dots/bullets/indicators */
  529.     .dot {
  530.         cursor: pointer;
  531.         height: 15px;
  532.         width: 15px;
  533.         margin: 0 2px;
  534.         background-color: #bbb;
  535.         border-radius: 50%;
  536.         display: inline-block;
  537.         transition: background-color 0.6s ease;
  538.     }
  540.     /* Add an italic font style to all quotes */
  541.     q {
  542.         font-size: 15px;
  543.         font-style: italic;
  544.         color: white;
  545.     }
  547.     /* Add a blue color to the author */
  548.     .author {color: white;}
  550.     /* Slideshow container end */
  552.     /* Corporation Landingpage end */
  555.     /* Service Partner */
  556.     .partner-headline {
  557.         font-size: 40px;
  558.         font-weight: lighter;
  559.     }
  561.     .col-same-heigth img {width: 100%; height: auto;  }
  563.     @media (min-width: 500px) {
  564.         .container-div {
  565.             display: table;
  566.             border-spacing: 16px;
  567.         }
  568.         .col-same-heigth {
  569.             display: table-cell;
  570.             box-sizing: border-box;
  571.             cell-spacing: 8px;
  572.             padding: 0.5em;
  573.             vertical-align: top
  574.         }
  577.     }
  580.     /* Service Partner end */
  583.     /*Card default*/
  584.     .card-general {
  585.         width: 18rem;height: 26rem;border: 2px solid #7ab800;
  586.         box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16), 0 0 6px rgba(0, 0, 0, 0.1);
  587.         transition: .4s transform cubic-bezier(.155,1.105,.295,1.12),.4s box-shadow,.4s
  588.         -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  589.     }
  590.     .card-general-hover:hover {transform: scale(1.04);}
  592.     /*Card Header with background color and centered title*/
  593.     .card-general-header {
  594.         display: flex;
  595.         align-items: center;
  596.         text-align: left;
  597.         justify-content: center;
  598.         width: 100%;
  599.         height: 8rem;
  600.         background:  #7ab800;
  601.     }
  603.     /*Card Header with image*/
  604.     .card-general-header-image{text-align: center;width: 100%;height: 10rem;}
  605.     .card-general-header-image img {width: 100%;height: 100%;object-fit: contain;}
  606.     .card-general-header-image svg {width: 100%;height: 100%;object-fit: contain;}
  608.     /*Card separator*/
  609.     .card-general-seperator {width: 100%;height: 0.6rem;
  610.         background: linear-gradient(90deg,#7AB800 0%, #AACF61 60%, #ffffff 110%);
  611.     }
  613.     /*Card body default*/
  614.     .card-general-body {height: 15rem; display:flex; flex-direction: column; width: 100%; overflow:hidden;}
  615.     .card-general-body::-webkit-scrollbar {display: none; scrollbar-width: none;}
  616.     .rounded-pill-green{background-color: #AACF61;}
  617.     .rounded-pill-grey{background-color: #d7d9d4;}
  620.     {# Generals Cards Ende #}
  622.     {# Partner Cards #}
  624.     .card-startup {
  625.         height: 20rem;
  626.         background-color: #fff;
  627.         border: 3px solid black;
  628.         flex-wrap: wrap;
  629.         display: flex;
  630.         justify-content: space-between;
  631.     }
  632.     .card-startup-logo a {
  633.         width: 100%;
  634.         height: 20rem;
  635.         object-fit: contain;
  636.         float: left;
  637.     }
  638.     .card-startup-logo img {
  639.         width: 100%;
  640.         height: 20rem;
  641.         max-height: 260px;
  642.         object-fit: contain;
  643.         float: left;
  644.     }
  645.     .card-startup-logo svg {
  646.         width: 100%;
  647.         height: 20rem;
  648.         max-height: 260px;
  649.         object-fit: contain;
  650.         float: left;
  651.     }
  652.     .card-startup .card-name {
  653.         font-size: 30px;
  654.         float: left;
  655.         color: black;
  656.         position: relative;
  657.         font-weight: bold;
  658.         display: block;
  659.     }
  660.     .card-startup .card-content {
  661.         width: 100%;
  662.         height: 100%;
  663.         margin:  5px 0px 0px 0px;
  664.         display: flex;
  665.         flex-direction: column;
  666.     }
  667.     .card-startup .card-content p{
  668.         width: 100%;
  669.         font-size: 15px;
  670.         color: black;
  671.         padding:  0px;
  672.     }
  673.     .card-place {
  674.         display: inline-block;
  675.         color: black;
  676.         padding: 10px 0px;
  677.     }
  678.     .card-place img{
  679.         width: 15px;
  680.         height: 20px;
  681.     }
  682.     .card-startup-link{
  683.         display: inline-block;
  684.         padding: 10px 0px;
  685.     }
  686.     .card-startup-link img{
  687.         width: 35px;
  688.         height: 35px;
  689.     }
  690.     .card-startup-link a{
  691.         color: black;
  692.         font-weight: bold;
  693.         padding: 0px 10px;
  694.     }
  695.     @media (max-width: 575px) {
  696.         .card-startup {
  697.             height: auto;
  698.         }
  699.     }
  701.     {# Partner card end #}
  704.     .oneLineEllipsis {overflow: hidden;text-overflow: ellipsis;word-break:break-all;
  705.         display: -webkit-box;-webkit-line-clamp: 1;/* number of lines to show */line-clamp: 1;
  706.         -webkit-box-orient: vertical;}
  707.     .twoLineEllipsis {overflow: hidden;text-overflow: ellipsis;word-break:break-all;
  708.         display: -webkit-box;-webkit-line-clamp: 2;/* number of lines to show */line-clamp: 2;
  709.         -webkit-box-orient: vertical;}
  710.     .threeLineEllipsis {overflow: hidden;text-overflow: ellipsis;
  711.         display: -webkit-box;-webkit-line-clamp: 3;/* number of lines to show */line-clamp: 3;
  712.         -webkit-box-orient: vertical;}
  713.     .fourLineEllipsis {overflow: hidden;text-overflow: ellipsis;
  714.         display: -webkit-box;-webkit-line-clamp: 4;/* number of lines to show */line-clamp: 4;
  715.         -webkit-box-orient: vertical;}
  716.     .fiveLineEllipsis {overflow: hidden;text-overflow: ellipsis;
  717.         display: -webkit-box;-webkit-line-clamp: 5;/* number of lines to show */line-clamp: 5;
  718.         -webkit-box-orient: vertical;word-wrap:break-word;}
  719.     .sixLineEllipsis {overflow: hidden;text-overflow: ellipsis;
  720.         display: -webkit-box;-webkit-line-clamp: 6;/* number of lines to show */line-clamp: 6;
  721.         -webkit-box-orient: vertical;word-wrap:break-word;}
  722.     .xLineEllipsis {overflow: hidden;text-overflow: ellipsis;
  723.         display: -webkit-box;/* number of lines to show: line-clamp: 3;-webkit-line-clamp: 3; */
  724.         -webkit-box-orient: vertical;}
  726.     {# Office Koeln, Duesseldorf #}
  728.     .office-gallery {
  729.         display: flex;
  730.         flex-wrap: wrap;
  731.         justify-content: center;
  732.     }
  734.     .office-gallery-row {
  735.         display: flex;
  736.         flex-direction: row;
  737.         width: 85%;
  738.     }
  740.     .office-gallery-row img {
  741.         width: 50%;
  742.         box-sizing: border-box;
  743.         padding: 10px;
  744.     }
  746.     .flex-container-office {
  747.         display: flex;
  748.         flex-direction: row;
  749.     }
  751.     @media (max-width: 800px) {
  752.         .flex-container-office {
  753.             flex-direction: column;
  754.         }
  755.     }
  757.     .office-grid {
  758.         display: grid;
  759.         grid-template-columns: repeat(7, 1fr);
  760.         grid-template-rows: repeat(5, 1fr);
  761.         width: 100%;
  762.         height: 600px;
  763.         grid-gap: 10px;
  764.     }
  766.     .grid-item1 {
  767.         background-image: url("https://images.unsplash.com/photo-1534719156993-f3c9448673bf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f089cfa06eb1cd7c0f654b39d8fdfd07&auto=format&fit=crop&w=1350&q=80");
  768.         background-size: cover;
  769.         background-position: center;
  770.         grid-column: 1/4;
  771.         grid-row: 1/6;
  772.     }
  774.     .grid-item2 {
  775.         background-image: url("https://images.unsplash.com/photo-1534759846116-5799c33ce22a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=19c8355cd5aff72debf2f4720f4c7e09&auto=format&fit=crop&w=688&q=80");
  776.         background-size: cover;
  777.         background-position: center;
  778.         grid-column: 1/2;
  779.         grid-row: 2/5;
  780.     }
  782.     .grid-item3 {
  783.         background-image: url("https://images.unsplash.com/photo-1508097549463-97f74cb9a6aa?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=52c257bf60c788a1332419c74c6a8a01&auto=format&fit=crop&w=1350&q=80");
  784.         background-size: cover;
  785.         background-position: center;
  786.         grid-column: 1/5;
  787.         grid-row: 5/5;
  788.     }
  790.     .grid-item4 {
  791.         background-image: url("https://images.unsplash.com/photo-1507562534834-42ebd36b00ea?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f712012a42c9e9d9163fd9a0c80fd66a&auto=format&fit=crop&w=1202&q=80");
  792.         background-size: cover;
  793.         background-position: center;
  794.         grid-column: 2/4;
  795.         grid-row: 2/5;
  796.     }
  798.     .grid-item5 {
  799.         background-image: url("https://images.unsplash.com/photo-1534714259038-764cb4cf1d58?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d07ea713fcf12221034dafd8f4ffe82b&auto=format&fit=crop&w=1350&q=80");
  800.         background-size: cover;
  801.         background-position: center;
  802.         grid-column: 4/6;
  803.         grid-row: 1/3;
  804.     }
  806.     .grid-item6 {
  807.         background-image: url("https://images.unsplash.com/photo-1515694581961-1fbdb6840a5f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4267be6fb944c94b672e0b3ddb458286&auto=format&fit=crop&w=634&q=80");
  808.         background-size: cover;
  809.         background-position: center;
  810.         grid-column: 4/5;
  811.         grid-row: 3/6;
  812.     }
  814.     .grid-item7 {
  815.         background-image: url("https://images.unsplash.com/photo-1534703580202-6123d4189ef6?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5478b30dec2346f00a40ab259d162068&auto=format&fit=crop&w=634&q=80");
  816.         background-size: cover;
  817.         background-position: center;
  818.         grid-column: 5/6;
  819.         grid-row: 3/6;
  820.     }
  822.     .grid-item8 {
  823.         background-image: url("https://images.unsplash.com/photo-1534743901536-d184ed4194bc?ixlib=rb-0.3.5&s=21fd4555141d93425b8ee3f80f764e69&auto=format&fit=crop&w=634&q=80");
  824.         background-size: cover;
  825.         background-position: center;
  826.         grid-column: 6/8;
  827.         grid-row: 1/6;
  828.     }
  829.     
  830.     /* TARIFE */
  832.     .card-memberships {
  833.         padding-bottom: 0px;
  834.         border-left: 4px solid #7ab800;
  835.         height: 170px;
  836.         border-radius: 1.5rem;
  837.         background-color: #eee;
  838.         margin-bottom: 1.0rem;
  839.     }
  841.     .card-header-memberships {
  842.         display: flex;
  843.         align-items: center;
  844.         text-align: left;
  845.         justify-content: center;
  846.         width: 100%;
  847.         height: 90px;
  848.         border-bottom: none;
  849.         border-radius: 1.5rem;
  850.     }
  852.     .card-body-memberships {
  853.         display: flex;
  854.         align-items: center;
  855.         justify-content: center;
  856.         font-size: 0.9rem;
  857.         line-height: 1.4;
  858.         font-weight: 500;
  859.         text-align: center;
  860.         color: #000000;
  861.     }
  863.     .community_perks {
  864.         border-left: 4px solid #7ab800;
  865.         background-color: #eee;
  866.     }
  868.     .office_perks {
  869.         border-top: 2px solid #ffffff;
  870.         border-left: 4px solid #0680bb;
  871.         background-color: #eee;
  872.     }
  874.     .office_perks_link {
  875.         color: black;
  876.         text-decoration: underline;
  877.     }
  879.     .memberships {
  880.         margin-right: 20px;
  881.         margin-left: 20px;
  882.         font-size: 15px;
  883.     }
  885.     .memberships-headline h3{
  886.         font-size: 20px;
  887.     }
  889.     .memberships-headline h3:after {
  890.         content: " ";
  891.         display: block;
  892.         width: 100px;
  893.         border-bottom: 2px solid #8cc63f;
  894.         margin-top: 5px;
  895.         margin-bottom: 10px;
  896.     }
  898.     /* Create four columns of equal width */
  899.     .columns-memberships {
  900.         float: left;
  901.         width: 25%;
  902.         padding: 8px;
  903.     }
  905.     /* Create four columns of equal width */
  906.     .columns-memberships {
  907.         float: left;
  908.         width: 25%;
  909.         padding: 8px;
  910.     }
  912.     /* Change the width of the three columns to 100%
  913. (to stack horizontally on small screens) */
  914.     @media (max-width: 768px) {
  915.         .columns-memberships {
  916.             width: 100%;
  917.         }
  918.     }
  920.     @media (max-width: 767px) {
  921.         .hidden-xs {
  922.             display: none !important;
  923.         }
  924.     }
  926.     a.link-memberships {
  927.         text-decoration: none;
  928.         color: #7ab800;
  929.     }
  931.     /* Style the list */
  932.     .price {
  933.         list-style-type: none;
  934.         border: 1px solid #eee;
  935.         margin: 0;
  936.         padding: 0;
  937.         -webkit-transition: 0.3s;
  938.         transition: 0.3s;
  939.     }
  941.     /* Add shadows on hover */
  942.     .price:hover {
  943.         box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
  944.     }
  946.     /* Pricing header */
  947.     .price .header {
  948.         background-color: #8cc63f;
  949.         color: white;
  950.         font-size: 25px;
  951.     }
  953.     /* List items */
  954.     .price li {
  955.         border-bottom: 1px solid #eee;
  956.         padding: 10px;
  957.         text-align: center;
  958.     }
  960.     /* Grey list item */
  961.     .price .grey {
  962.         background-color: #eee;
  963.         font-size: 20px;
  964.     }
  966.     /* Grey list item location */
  967.     .price .grey_second {
  968.         background-color: #eee;
  969.         font-size: 14px;
  970.         display: inline-flex;
  971.     }
  973.     /* Placeholder */
  974.     .clear .clear {
  975.         clear: both;
  976.     }
  979.     /* Grey list small item */
  980.     .price .grey_small {
  981.         background-color: #eee;
  982.         font-size: 12px;
  983.     }
  985.     /* The "Sign Up" button */
  986.     .button-sign-up {
  987.         background-color: #8cc63f;
  988.         border: none;
  989.         color: white;
  990.         padding: 10px 25px;
  991.         text-align: center;
  992.         text-decoration: none;
  993.         font-size: 18px;
  994.     }
  996.     .memberships-top-headline {
  997.         font-size: 65px;
  998.     }
  1000.     @media (max-width: 768px) {
  1001.         .memberships-top-headline {
  1002.             font-size: 55px;
  1003.         }
  1004.     }
  1006.     .general-line-clamp {
  1007.         display            : block;
  1008.         display            : -webkit-box;
  1009.         -webkit-box-orient : vertical;
  1010.         position           : relative;
  1011.         overflow           : hidden;
  1012.         text-overflow      : ellipsis;
  1013.         padding            : 0 !important;
  1014.         line-height: var(--global--line-height-body,1.2) !important;
  1015.     }
  1017.     .general-line-clamp-1 {
  1018.         -webkit-line-clamp : 1;
  1019.         height             : calc(1em * var(--global--line-height-body, 1.15) * 1.6);
  1020.     }
  1022.     .general-line-clamp-2 {
  1023.         -webkit-line-clamp : 2;
  1024.         height             : calc(1em * var(--global--line-height-body, 1.15) * 2);
  1025.     }
  1027.     .general-line-clamp-3 {
  1028.         -webkit-line-clamp : 3;
  1029.         height             : calc(1em * var(--global--line-height-body, 1.15) * 3);
  1030.     }
  1032.     .general-line-clamp-4 {
  1033.         -webkit-line-clamp : 4;
  1034.         height             : calc(1em * var(--global--line-height-body, 1.15) * 4);
  1035.     }
  1037.     .general-line-clamp-5 {
  1038.         -webkit-line-clamp : 5;
  1039.         height             : calc(1em * var(--global--line-height-body, 1.15) * 5.6);
  1040.     }
  1042.     /* Geschäftsadresse Köln */
  1044.     .business-address .font-weight-light{
  1045.         font-weight: 300!important;
  1046.     }
  1048.     .business-address .intro-text {
  1049.         text-align: justify;
  1050.         max-width: 875px;
  1051.         margin: 3rem auto;
  1052.     }
  1054.     .business-address .intro-text p {
  1055.         font-size: 1.6rem;
  1056.         line-height: 1.7;
  1057.     }
  1059.     .business-address .placeholder-addition {
  1060.         height: 160px;
  1061.         z-index:1;
  1062.         position: absolute;
  1063.     }
  1065.     .business-address .panel-heading-box{
  1066.         background-color: #f5f5f5;
  1067.         width: 1045px;
  1068.     }
  1070.     .business-address .panel-heading-entry{
  1071.         text-decoration: none !important;
  1072.         color: #7ab800;
  1073.         cursor:pointer;
  1074.     }
  1076.     .business-address .panel-collapse-box{
  1077.         background-color: white;
  1078.         width: 1045px;
  1079.     }
  1083. </style>