/**
*** SIMPLE GRID
*** (C) ZACH COLE 2016
**/

/* UNIVERSAL */

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  font-size: 100%;
}

/* ==== GRID SYSTEM ==== */

.binding {
  width: 94%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  /*position: relative;*/
  width: 100%;
}

.row [class^="grid"] {
  float: left;
  margin: 0px 1%;
  min-height: 0.125rem;
}

.grid1,
.grid2,
.grid3,
.grid4,
.grid5,
.grid6,
.grid7,
.grid8,
.grid9,
.grid10,
.grid11,
.grid12 {
  width: 100%;
  /*border: 1px solid #d0d;*/
}

.row::after {
	content: "";
	display: table;
	clear: both;
}

.hidden {
  display: none;
}

/* Responsive */
@media only screen and (min-width: 33.75em) {  /* maximale Breite 540px */

    .binding {
      width: 80%;
    }
}

@media only screen and (max-width: 1260px) {  /* maximale Breite 540px */

    /*body{*/
        /*border: 5px solid #f0f !important;*/
    /*}*/

    /* Ausblenden */
    #header .sm-bar,
    .ticket-button,
    #top-infos .col,
    #video_background{
        display: none;
    }

    /* Formularfelder Breite untereinander */
    .defaultform .formbody input,
    .defaultform .formbody select,
    .defaultform .formbody .select2-container,
    .defaultform .formbody div.button,
    .defaultform .formbody textarea,
    a.button{
        margin: 5px auto !important;
    }

    .folge .defaultform .formbody #wishMonth .select2-container{
        text-indent: 3.3%;
    }

    .defaultform .formbody label{
        text-align: left;
        margin: 10px 2px !important;
    }

    .defaultform .formbody{
        text-align: center;
    }

    .defaultform {
        padding: 0 0;
    }

    .start .domicil-event-search .ce_form{
        margin: 0;
    }

    .domicil-event-search{
        margin-bottom: 33px;
    }

    .form-wrapper.binding{
        width: 100% !important;
        padding-left: 2.7% !important;
        padding-right: 2.7% !important;
        background: #cc4853 !important;
    }

    .start #today{
        background-position: 44.5% center;
    }

    .start #wishdate {
        background-position: 43% center;
    }

    .start #eventTypes .select2-container {
        background-position: 42% center;
    }

    .defaultform .formbody .select2-container{
        padding-bottom: 16px;
    }

    .defaultform .formbody .select2-container .show_more,
    .defaultform .formbody .select2-container .select2-selection__choice{
        padding: 20px 0;
    }

    .show_more, .defaultform .formbody .select2-container .select2-selection__choice {
        width: 100%;
        text-align: left;
    }

    .domicil-event-search .defaultform .formbody input#eventTitle {
        width: 100%;
        float: none;
    }

    .domicil-event-search .defaultform .formbody .search-submit {
        width: 100%;
        height: 67px;
        background-size: 35px 35px;
        margin-top: 15px !important;
    }

    .folge .defaultform .formbody input,
    .folge .defaultform .formbody select,
    .folge .defaultform .formbody .select2-container,
    .folge .defaultform .formbody div.button,
    .folge .defaultform .formbody textarea, a.button{
        text-align: left !important;
    }

    .folge .defaultform .formbody div.button.center,
    .folge .defaultform .formbody textarea, a.button.center{
        text-align: center !important;
    }

    .folge .select2-container .select2-selection--single{
        text-align: left !important;
    }

    .folge .defaultform .formbody .select2-container{
        background-position: 20px center;
    }

    .folge #main h1.filterheadline{
        padding-bottom: 20px;
    }

}

/* maximale Breite */
@media only screen and (min-width: 994px) {
  .grid1 {
      width: 6.32%; /*Okay*/
  }

  .grid2 {
      width: 16%;/*Okay*/
  }

  .grid3 {
      width: 23%; /*Okay*/
  }

  .grid4 {
      width: 31.33%; /*Okay*/
  }

  .grid5 {
      width: 39.5%;/*Okay*/
  }

  .grid6 {
      width: 48%; /*Okay*/
  }

  .grid7 {
      width: 56.35%;/*Okay*/
  }

  .grid8 {
      width: 62.66%;
  }

  .grid9 {
      width: 73%;
  }

  .grid10 {
      width: 81%;
  }

    #header .mod_navigation ul li{
        padding-left: 30px !important;
    }

    #header .mod_navigation ul li li{
        padding-left: 0 !important;
    }

  .grid11 {
      width: 91.58%;
  }

  .grid12 {
    width: 98%; /*Okay*/
  }

  .hidden {
    display: block;
  }
}

@media only screen and (min-width: 993px) { /* maximale Breite 960px */
  .binding {
    width: 75%;
    max-width: 60rem;
  }
}