/*
    Created on : 28.07.2015, 09:48:12
    last modified: 2018-09-27
    Author     : sus
    Link-Color : #b2182b
*/

/* lato-regular - latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'),
        url('fonts/lato-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('fonts/lato-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+  */
}

/* lato-700 - latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: local('Lato Bold'), local('Lato-Bold'),
        url('fonts/lato-v14-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('fonts/lato-v14-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


html, body {
    background: #fff;
    color: #000;
    font-size: 100%;
    font-family: Lato, sans-serif;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    padding: 0 0.7em;
}

img {
    border: none;
    max-width: 100%;
    height: auto;
}

header, article, footer, nav, figure, form  {
    display: block;
    margin: 0; padding: 0;
}

h1, h2, h3, h4,h5 {
    margin: 0;
    padding: 0;
}

a {
    color: #b2182b;
    text-decoration: none;
}

a:hover, a:focus, a:active {
    text-decoration: underline;
}
a[href^=tel] {
    color: inherit;
    cursor: inherit;
}

nav a:hover, a[href^=tel]:hover {
    text-decoration: none;
}

h6.wai, .screen-reader-text, label.wai {
    position: absolute;
    left: -2000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media screen AND (max-width: 42em) {
    .noMobile {
        display: none;
    }
}

#page {
    width: 1280px;
    margin: 0 auto;
    max-width: 100%;
    background: #fff;
}


#page:after, .line:after, header:after {
    content: ' ';
    display: block;
    clear: both;
}

/* Header */

header {
    display: flex;
    flex-direction: row;
    padding: 0.5em 5%;
    align-items: center;
}

#logo {
    width: 20%;
    margin-right: 2.5%;
}

#headMain {
    width: 80%;
}

#headline {
    color: #444;
}

#headline p {
    margin: 0;
}

#headline .title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

#headline .textwidget {
    font-size: 0.9em;
    margin-bottom: 1.75rem;
}

#searchNav {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

#site-navigation {
    padding-right: 1em;
}

#site-navigation ul, #site-navigation li {
    margin: 0; padding: 0;
}

#site-navigation {
    flex-grow: 2;
    flex-basis: 100%;
}

#hamburger {
    display: none;
}

#MainMenu li {
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding: 0 1.3em 0 1.1em; 
    border-right: 1px solid #666;
    white-space: nowrap;
}

#MainMenu li:first-child {
    padding-left: 0;
}

#MainMenu li li:first-child {
    padding-left: 0.2em;
}

#MainMenu li:last-child {
    border: none;

}

#MainMenu li li {
    display: block;
}

#MainMenu li ul {
    z-index: 20;
    display: none;
    position: absolute;
    left: 0.5em;
    top: -1px;
    text-align: left;
    margin-top: 1.55em;
    padding-bottom: 0.55em;
    background-color: rgba(250,250,250,0.9);
    min-width: 100%;
    padding-left: 0.75em;
    padding-right: 0.5em;
}

#MainMenu li li {
    border-right: none;
    padding-left: 0.2em;
}

#site-navigation li:hover ul {
    display: block;
}

#MainMenu a {
    font-size: 1.1em;
    font-weight: bold;
    color: #b3001e;
    text-decoration: none;
}

#MainMenu li li a {
    color: #033;
    font-size: 0.85em;
    font-weight: normal;
    border-left: 1px solid #666;
    padding-left: 0.5em;
}

#search {
    flex-grow: 1;
    flex-basis: 12em;
    max-width: 80%;
    display: flex;
}

#s {
    font-family: inherit;
    font-size: 0.9em;
    border: 0.1em solid #ccc;
    padding: 0.1em 0.2em;
    line-height: 1.2;
    height: 1.5em;
}


#searchsubmit {
    height: 1.9em;
    width: auto;
}

@media screen AND (max-width: 73em) {
    header {
        padding-right: 0.5em;
    }
    #logo {

    } 

    #MainMenu li {
        padding: 0 0.7em 0 0.5em;
    }

    #MainMenu a {
        font-size: 1em;
    }
    #MainMenu li ul {
        padding-left: 0.2em;
        margin-left: -0.25em;

    }
}

@media screen AND (max-width: 57em) {
    header {
        display: block;
    }
    #logo {
        float: left;
    }
    #headMain {
        width: auto;
    }

    #headline {
        padding-left: 27%;
    }

    #MainMenu {
        clear: left;
    }
}

@media screen AND (max-width: 45em) {
    header {
        text-align: center;
    }

    #searchNav {
        text-align: left;
        position: relative;
    }


    #logo {
        display: inline-block;
        width: 45%;
        float: none;
    }
    #headline {
        padding-left: 0;
    }

    #headline .title {
        font-size: 1em;        
    }

    #headline .textwidget {
        margin-bottom: 0.75em;
    }

    #hamburger {
        display: block;
        font-size: 1.7rem;
        line-height: 1;
        margin-left: 1em;
        color: #000;
    }

    #site-navigation {

    }

    #MainMenu {
        font-size: 1.1em;
        padding: 0;
        line-height: 1.8;
        background-color: #444;
        padding-left: 0.3em;
        position: absolute;
        top: 2em;
        left: 0;
        z-index: 30;
        position: absolute;
        height: 15.25em;
        overflow-y: auto;
        padding: 0.4em;
    }

    #MainMenu li a, #MainMenu li li a {
        color: #fff;
        border: none;
    }
    #MainMenu li {
        display: block;
        border: none;
        padding: 0;
        padding-left: 0.4em;
    }

    #MainMenu li:first-child {
        padding-left: 0.4em;
    }

    #MainMenu li ul {
        position: static;
        display: block;
        background: none;
        margin: 0;
        padding: 0;
    }


}

@media screen AND (max-width: 20em) {
    header {}
    #s {width: 7em;}
    #MainMenu {
        left: 0;
    }
    #MainMenu li {
        white-space: normal;
    }
}

/* graphischer Einstieg */ 

#hdgraph:before {
    content: "";
    display: block;
    padding-top: 35.703125%;
}

#hdgraph {
    margin: 0;
    position: relative;
}

#hdgraph .liste {
    font-size: 1.1em;
    position: absolute;
    z-index: 20;
    left: 5%;
    top: 14%;
    background-color: rgba(250,250,250,0.8);
    padding: 0.75em 1em;
}

@media screen AND (max-width: 65em) {
    #hdgraph .liste {
    top: 5%;
    }
}

@media screen AND (max-width: 54em) {
    #hdgraph .liste {
        display: none;
    }
}

#hdgraph h2 {
    font-size: 1em;
    line-height: 1.2;
    color: #333;
}

#hdgraph img {
    margin-top: -35.703125%;
    display: block;
}

#hdgraph ul {
    margin: 0; padding: 0;
}

#hdgraph li {
    margin: 0.5em 0.2em 0.5em 1.2em;
}

#hdgraph a {
    color: #333;
    text-decoration: none;
}



/* ################################ featured ##################### */

#featured {
    text-align: justify;
    padding: 0 10.25%;
    margin-top: 1em;
}

#featured li {
    margin: 0; padding: 0;
    display: inline-block;
    width: 25%;
    list-style: none;
    text-align: center;
    line-height: normal;
}

#featured img {
    display: block;
    margin: 0.5em auto;
}

#featured a {
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    color: #666;
}

#featured:after {
    content: "";
    display: inline-block;
    width: 90%;
    height: 1px;
    line-height: 1px;
}

@media screen AND (max-width: 45em) {

    
    #featured li {
        width: 22%;
    }
    #featured a {
        font-size: 1em;
    }
}

@media screen AND (max-width: 32em) {
    #featured {display: none;}
}

/* ********************** Inhaltsbereich ************************ */

article {
    box-sizing: border-box;
    padding-top: 1px;
    clear: both;
    margin: 1em 5%;
}
article h1 {
    color: #b2182b;
    font-size: 1.3em;
    font-weight: normal;
    margin: 0.3em 0;
}
article p {
    border: 1px dotted #b2182b;
    margin: 0.2em 0;
}


/* ### Einspalter ### */

.onecol h1 {
    margin-bottom: 0.5em;
}

.onecol p {
    border-width: 0 0 0 1px;
    padding-left: 1.5%;
}

.onecol figure {
    max-width: 100%;
    text-align: center;
    display: block;
    margin: 0;
    padding: 0;
    margin-top: 1em;
}

/* ### Zweispalter ### */

.twocol h1 {
    margin-bottom: 0;
}

.twocol figure {
    float: right;
    width: 48.4%;
    margin-top: -1em;
}

/* teilweise Teamseiten z.B. Hof */
.twofigures figure {
    margin-top: 0.5em;
    float: left;
}

.twofigures h1+figure, .twofigures figure:first-child {
    margin-right: 3.2%;
}


.twofigures figcaption {
    font-size: 0.9em;
    padding-bottom: 1em;
}

.twofigures strong {
    display: block;
}


.left figure {
    float: left;
    margin-left: 0;
}

.twocol.left h1 {
    padding-left: 55%;
}


.twocol p {
    width: 48.4%;
    padding: 1em 0;
    border-width: 1px 0;
}


.threecol {
    text-align: justify;
}

.threecol * {
    text-align: left;
}

.threecol figure {
    display: inline-block;
    width: 31%;
    vertical-align: top;
}

.threecol:after {
    content: "";
    display: inline-block;
    width: 70%;
    height: 1px;
}

.nolines p {
    border-width: 0;
}

.nolines h2 {
    font-size: 1em;
    margin: 0;
    font-weight: bold;
    margin-top: 1em;
}

.nolines h2 + p {
    margin-top: 0;
    padding-top: 0;
}

.nolines figure+h2 {
    border-top: 1px dotted #b2182b;
    padding-top: 0.5em;
    margin-top: 0;
}

.nolines p:last-child {
    border-bottom-width: 1px;
}

.left p {
    float: right;
}

@media screen AND (max-width: 35em) {
    article h1, .threecol h1, .intro h1, .subtitle, #subtitle /*produktseiten*/ {
        font-size: 1.2em;
        text-align: center;
    }
    .onecol p {
        border: 0; 
        padding-left: 0;
    }

}

/* ############### Home ########################### */


#home .line {
    margin: 2em 5%;
    clear: both;
    box-sizing: border-box;
    padding-top: 1px;
}

#featured+.line {
    margin-top: -0.75em;
}

.line h1, .line article {
    margin: 0;

}

#home .line article {
    display: inline-block;
    width: 31.5%;
    margin-right: 2%;
}

#home .line article:last-child {
    margin-right: 0;
}

#home .line article p {
    border-width: 1px 0;
    padding: 1em 0;
}

.anfahrt {
    border: 1px dotted #aaa;
    padding: 0.3em 1em 0.1em 1em;
}

#home .line .anfahrt p {
    border: none;
    margin: 0.5em 0;
    padding: 0;
}

#home .line .col2 {
    width: 65.5%;
    display: inline-block;
    vertical-align: top;
}


#home .threecol figure {
    width: 31.5%;
    float: right;
    margin-top: -3.5em;
    margin-right: 2%;

}


#home .threecol h1+figure {
    margin-right: 1%;
}

.threecol p {
    width: 31.5%;
}

#home .line .threecol  {
    width: auto;
}

#home .line a span {
    color: #000;
}

#home a em {
    color: #b2182b;
    font-weight: bold;
    font-style: normal;
}




@media screen AND (max-width: 66em) {
    
    
    #home .line {
        margin: 1em;
    }

    #home .line article {
        width: 98%;
        margin: 0.5em 1%;
    }

    .col2 p, #home .line .col2 {
        width: 100%;
    }
    
    .twocol figure {
        width: 33%;
        margin-left: 2%;
    }

    #home .threecol figure {
        width: 48%;
        margin-top: 1em;
    }

    .threecol p {
        clear: both;
        width: auto;
    }

    .twocol p {
        width: auto;
    }

    .twocol figure {
        margin-top: 1em;
    }
    
    .twofigures figure {
        width: 48.4%;
        margin-left: 0;
    }

}


@media screen AND (max-width: 42em) {
    .threecol figure {
        width: auto;
        margin-bottom: 1em;
    }

     .twocol figure {
         width: 85%;
         float: none;
         margin: 0.3em auto 1em auto;
    }
    
    .twofigures h1+figure, .twofigures figure:first-child {
        margin-right: auto;
    }
}


@media screen AND (max-width: 32em) {
    
   
    

    #home .line article p {
        border-top: none;
    }

}



#page > h2 {
    margin-left: 5%;
}


/* ########################## FOOTER ########################### */

footer {
    clear: both;
    background-color: #999;
    color: #fff;
    padding: 0.5em 5% 4em 5%;
    margin-top: 3em;
}

footer a {
    color: #fff;
}

footer ul, footer li {
    margin: 0; padding:0;
}

footer li {
    display: inline-block;
    border-right: 1px solid #fff;
    list-style: none;
    padding-left: 1.2em;
    padding-right: 1.2em;
}

footer li:first-child {
    
}

footer li:last-child {
    border-right: none;
}


#menu-item-2639:before, #menu-item-4146:before, #menu-item-1110:before {
  content: '';
  display: inline-block;
  vertical-align: text-bottom;
  width: 1.5em;
  background: url('graph/facebook.png');
  background-size: 100%;
  height: 1.5em;
  margin-right: 0.3em;
}


@media screen AND (max-width: 47em) {

    footer {
        padding-bottom: 1em;
    }
    footer nav li {
        margin-right: 1.5em;
        border: none;
        padding: 0;
        line-height: 2.2;
    }
    #menu-item-2639, #menu-item-4146{
        margin-left: 0;
   }
}

@media screen AND (max-width: 24em) {
        
    #menu-item-2639, #menu-item-4146 {
        white-space: normal; /* Umbruch bei sehr kleinem Screen erlauben */
        line-height: normal;
    }
}


/* ######################## Sonderseiten ##################################*/

/* ####### intro Übersichtsseiten 1. und 2. Ebene mit "button" ###### */

.intro {
    margin: 3em 5% 1em 5%;
    padding: 1px 0;
}

.intro:after {
    content: '';
    display: block;
    clear: both;
}

.intro h1 {
    font-size: 1.8em;
    font-weight: normal;
    letter-spacing: 1px;
    color: #b2182b;
    text-transform: uppercase;
}

.intro .subtitle {
    font-size: 1.6em;
    color: #b2182b;
}

.intro h1, .intro p, .intro .subtitle {
    padding-left: 35%;
}

.intro img {
    width: 21%;
    height: auto;
    margin: 0 6%;
    float: left;
}


@media screen AND (max-width: 55em) {
    .intro h1 {font-size: 1.3em;}
    .intro .subtitle {font-size: 1.1em;}
    .intro {margin-top: 1em;}
    .intro p { padding-left: 0; }
    .intro img { padding-bottom: 0.5em;}
}

@media screen AND (max-width: 32em) {
    .intro img {display: none;}
    .intro h1 {font-size: 1.2em;}
    .intro h1, .intro .subtitle { padding-left: 0;}
}

/* ################ acr-News (Produktseiten) ################# */

article.acrnews {
    padding: 1px 1em 1em 0;
    position: relative;
}

.acrnews h1 {
    color: #666;
    margin-top: 0;
    padding-top: 0;
}

.acrnews h1 img { /* Markenlogos */
    display: block;
    padding-bottom: 0.3em;
}

.acrnews h2 {
    font-size: 1.1em;
    font-weight: bold;
}

.acrnews #subtitle {
    font-size: 1.4em;
    color: #b2182b;
    text-transform: uppercase;
    margin-top: 0.3em;
}


.acrnews p {
    border: none;
    margin: 0.5em 0;
    /*max-width: 55em;*/
}

.acrnews ul {
    margin: 0.5em 1em;
    padding: 0;
}

.acrnews li {
    margin: 0;
    padding: 0;
}


.more {
    color: #b2182b;
}

@media screen AND (max-width: 40em) {
    .acrnews #subtitle {
        font-size: 1.1em;
    }
}

@media screen AND (max-width: 32em) {

    article.acrnews {
        padding-top: 2.6em;
    }
    .acrnews .datblattlink {
        font-size: 1em;
        top: 0;
    }

    .acrnews h1 img {
        max-width: 40%;
        margin: auto;
    }
}


.datblattlink, .acrnewslisting .archivlink {
    font-size: 1.4em;
    padding: 0.2em 0;
    text-align: center;
    display: block;
    float: right;
    background: #b2182b;
    color: #fff;
    width: 8em;
    position: absolute;
    top: 0;
    right: 1em;
}

.acrnewslisting .archivlink {
    position: static;
    float: right;
    margin: 1em 0;
    margin-right: 1%;
}


.zenec_konf figure {
    width: 33%; float: right; margin-left: 2%;
}

.zenec_konf h3, .relItems h2 {
    margin: 1em 0 0.5em 0;
    font-size: 1.2em;
    color: #b2182b;
}


/* ######################## Verteiler / Listing ################## */

.acrnewslisting, .subPages {
    box-sizing: border-box;
    margin: 0.75em 5%;
    padding: 0;
    clear: both;
}

.acrnewslisting ul, .subPages ul {
    margin: 0; padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.acrnewslisting li, .subPages li {
    list-style: none;
    font-size: 0.9em;
    width: 31.5%;
    border: 1px dotted #aaa;
    margin: 1% 0;
    padding: 0;
    padding-bottom: 0.5em;
    text-align: center;
}

.acrnewslisting ul:after, .subPages ul:after {
    content: "";
    height: 0;
    width: 31.5%;
}

.acrnewslisting .pdflink {
    display: block;
    margin-top: 0.5em;
    font-weight: bold;
    font-size: 1.1em;
}


@media screen AND (max-width: 62.5em) {
    .acrnewslisting li, .subPages li {
        width: 48%;

    }

}

@media screen AND (max-width: 40em) {
    .acrnewslisting li, .subPages li {
        width: 98%;
        margin: 1% auto;
    }
}


.acrnewslisting a, .subPages a {
    text-decoration: none;
    color: #111;
    font-weight: normal;
    display: block;
    max-width: 100%;
}

.acrnewslisting h2, .subPages h2, .relItems h3  {
    font-size: 1.2em;
    color: #666;
    text-align: center;
}

.acrnewslisting article h1, .subPages article h1 {
    color: #b2182b;
    margin-top: 2em;
    margin-bottom: 0.5em;
    padding: 0.5em;
}

.acrnewslisting .subtitle, .subPages .subtitle {
    color: #b2182b;
    font-weight: bold;
    padding: 0 0.5em;
    text-align: center;
}

.acrnewslisting img {
    padding: 0;
    margin: 0;
}

.acrnewslisting p, .subPages p {
    padding: 0 0.5em;
    border: none;

}

.catdesc p {
    padding: 0;
}

.relItems {
    margin: 2.5em 0 1em 0;
}

.relItems h3 {
    margin: 0.5em 0;
}

.relItems img {
    display: block;
    width: 90%;
    margin: 0.5em 5%;
}

.relItems ul {
    margin: 0;
}





/* ################## Newsarchiv ########################## */

h1.archiv {
    margin-top: 1.5em;
    font-size: 1.6em;
}

.archiv + .acrnewslisting {
    margin-top: 0;
}

.pagination {
    text-align: center;
}
.pagination a, .page-numbers.current {
    display: inline-block;
    padding: 1em 2em;
}

.page-numbers.current {
    font-weight: bold;
    font-size: 1.1em;
    color: #b2182b;
}


/* ############ about / über uns ############### */

article.firmengeschichte {
    padding-top: 2em;
}

.threecol + .firmengeschichte {
    padding-top: 0.5em;
}

table.firmengeschichte, .firmengeschichte table {
    margin-top: 0.5em;
    border: 1px dotted #b2182b;
    border-width: 1px 0;
    width: 45%;
    padding: 1em 0;
}

.firmengeschichte td {
    padding-bottom: 1em;
}

.firmengeschichte th {
    text-align: left;
    width: 5em;
    font-weight: bold;
    color: #b2182b;
    vertical-align: top;
}


@media screen AND (max-width: 66em) {
    .firmengeschichte table {
        width: auto;
    }
    
}

/* ############### Legalcontent Impressum und co ############### */

.textcontent {
    margin: 0 5%;
}

.pagetitle {
    margin-left: 5%;
    margin-top: 1em;
    text-transform: uppercase;
    color: #b2182b;
}

.textcontent h1 {
    margin-top: 1em;
    font-size: 1.3em;
    text-transform: uppercase;
    color: #b2182b;
}

/* #################### Kontakt ################## */

article.kontakt {
    display: inline-block;
    width: 33%;
    vertical-align: top;
    margin: 1em 0;
    margin-right: 5%;
}


article.kontakt p {
    border: none;
    margin: 0.75em 0;
}

.kontakt h2 {
    margin-top: 0;
    font-size: 1.1em;
    font-weight: bold;
}

#map {
    width: 60%;
    display: inline-block;
    margin-top: 1em;
    position: relative;
}

iframe {
    max-width: 100%;
}

/* Kontaktformular */

h2.kontaktform {
    font-size: 1.2em;
    color: #b2182b;
    width: 37%;
    float: left;
    margin-top: 2.3em;
}


.wpcf7-form {
    margin: 2em 0;
    box-sizing: border-box;
    width: 62%;
    float: right;
}

.wpcf7-form label {
    display: block;
}

.wpcf7-form label:after {
    content: ": ";
}

.wpcf7-form input, .wpcf7-form textarea {
    width: 95%;
}

.wpcf7-form div {
    margin: 1em 0;
}

div.submit {
    text-align: right;
    margin-right: 4%;
}

.submit input {
    width: 75%;
    display: inline-block;
}

.wpcf7-form input:active, .wpcf7-form textarea:active {
    border: 1px solid #000;
}

@media screen AND (max-width: 40em) {
    article.kontakt {
        width: auto;
    }

    #map {
        width: 98%
    }

    h2.kontaktform {
        width: auto;
        float: none;
    }

    .wpcf7-form {
        width: 95%;
        float: none;
    }
}



.fahrzeuge th {
    font-weight: bold;
    text-align: left;
}

.fahrzeuge th, .fahrzeuge td {
    border: 1px solid #999;
    padding: 0 0.3em;
    line-height: 1.7;
}

.fahrzeuge {
    margin: 0.5em 1.5% 1em 0;
    width: 31.5%;
    display: inline-table;
    border-collapse: collapse;
}

table.single {width: auto;}

.fahrzeuge:last-child {
    margin-right: 0;
}

#searchresults {
    margin-left: 0;
    padding-left: 0;
}

#searchresults li {
    margin: 0.7em 0;
    list-style: none;
}

#searchresults p {
    margin: 0;
}

.search h1 {
    padding-top: 2em;
}

/* ######## Flexbox layout ################ */

.acrnewslisting ul, ul.acrnewslisting {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.acrnewslisting li {
    display: flex;
    margin-bottom: 1em;
}

.relItems li {
    flex-direction: column;
}

.relItems .inner {
    display: flex;
    flex-direction: column-reverse;
}

.relItems a {
    color: #b2182b;
}

/* ######### videoeinbindung ################### */

@media screen AND (max-width: 1000px) {

    .twocol.video figure{
        width: auto;
        margin-top: 0.25em;
        float: none;
    }

    .twocol.video p {
        width: auto;
    }
}



@media print {
    #searchNav, footer,#hdgraph,#featured {
        display: none;
    }
    
    header, article, .acrnewslisting, .subPages {
        margin: 0;
        padding: 0;
    }
    
    #logo {
        width: 30%;
    }
    
    .acrnewslisting ul {
        display: block;
    }
    
    .acrnewslisting li {
        display: inline-block;
        width: 30%;
        border: none;
        margin-bottom: 2em;
    }
}