.alert{
    background: #de111e;
      color: #FFF;
      padding: 1em;
      margin-bottom: 1em;
  }
  .alert-success
  {
    background: #5cb85c;
  }

  label
  {
      margin: 30px 0 10px;
  }

  .hidden-item{
      display: none;
  }

  .visible-item{
      display: block;
  }

  .error{
    color: red !important;
  }

  textarea.error,
  input.error  
  {
    border: 1px solid red;
  }

  form{
    overflow: hidden;
    float: left;
    margin-left: -15px;
    margin-right: -15px;
  }

  @media (min-width: 768px) {
    form{
      width:100%;
      margin-left: 0;
      margin-right: 0;
    }
  }

  .form-horizontal 
  {
     font-size: 18px;
  }

  .form-radios legend,
  .form-checkboxes legend 
  {
    background: none;
    margin: 0;
    font-size: .9em;
    border:none;
    padding: 0;
    font-weight: normal;
  }
  .form-control
  {
    margin: 0;
  }

  .sections
  {
    border: none;
    padding: 0;
    overflow: hidden;
    max-height: 50000px;
    position: relative;
    transition: 0.2s all;
    overflow: hidden;
    border-radius: 5px;


  animation-name: fadeIn;
  -webkit-animation-name: fadeIn; 
  animation-duration: 0.8s;   
  -webkit-animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;  
  visibility: visible !important;

  }

  @media (min-width: 768px) {
    .sections{ 
      background: #f3f3f3;
      margin: 1em 0;
    }

  }

  @import url('https://fonts.googleapis.com/css?family=Abril+Fatface');

  ol {
    padding: 0;
    font-size: smaller;
    list-style: none;
    counter-reset: my-awesome-counter;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
  }

  ol li {
    counter-increment: my-awesome-counter;
    display: flex;
    margin-bottom: 1rem;
    line-height: 1.3;
    align-items: center;
    min-width: 100%;
  }

  ol li::before {
    content: counter(my-awesome-counter);
    font-weight: bold;
    font-size: 3rem;
    margin-right: 1.5rem;
    font-family: 'Abril Fatface', serif;
    line-height: 1;
    text-align: center;
    min-width: 35px;
    align-self: flex-start;
  }

  @media (min-width: 768px) {
    ol {
      padding: 1rem 1rem 1rem 2rem;
    }

    ol li::before {
      font-size: 4rem;
      margin-right: 2rem;
      min-width: 45px;
    }
  }

  .yc_checkbox_column, .yc_radio_column
  {
    font-size:0.8em;
  }

  input{
    margin-right: 2%;
  }
  .yc-field-container, input[type="text"], textarea
  {
    /*width:94%;*/
    /*margin: 0 3%;*/
      float: left;
      box-sizing:border-box;
      padding-left: 15px;
      padding-right: 15px;
  }
  .form-group, 
  .form-radios,
  .form-checkboxes
  {
    border-bottom: 1px dashed #DDD;
    padding:15px;
    overflow: hidden;
    transition: 0.2s all;
  }
  .form-group:last-child,
  .form-group .last-item
  {
    border-bottom: none;
    margin-bottom: 0;
  }

  .form-radios label,
  .form-checkboxes label
  {
    font-size:0.8em;
    margin-bottom: 0
  }

  .form-group
  {
    padding:15px;
  }

  .form-group img{
    max-width: 100%;
    height: auto;
    margin-bottom: 0;
  }

  .form-group div[class*="col-"],
  .form-group label
  {
    padding-left: 0;
    padding-right: 0;
    flex-wrap: nowrap;
    flex-direction: column;

  }

  @media screen and (min-width: 768px){
    .form-group div[class*="col-"],
    .form-group label
    {
      padding-left: 15px;
      padding-right: 15px;
      line-height: 1.2;
      font-size: .9em;

    }

    .form-group div[class*="col-sm-5"]{
      width: 66.66667%;
    }
  }

  label,
  legend
  {
      width: 100%;
      float: left;
      margin: 0 0 1em;
      font-size:.9em;
      font-weight: normal;

      display: flex;
  }

  label input,
  legend input
  {
      flex: 0 0 5%;
  }

  @media screen and (min-width: 1200px){
    label input,
    legend input
    {
        flex: 0 0 8%;
    }
  }


  .clear {
      clear: none;
      height: 0;
      overflow: hidden;
  }

  .form-horizontal .form-group {
       margin-left: 0; 
       margin-right: 0; 
  }

   .yc-fs_events_short_description
   {
    float: left;
    width:100%;
   }

/*  legend{
    font-size: 1.3em;
      width: 100%;
      margin: 0;
      padding: 10px 20px 20px !important;
      border-radius: 5px 5px 0 0;
      box-sizing: border-box;
      padding-right: 10% !important;
  }*/

 
  .yc-image-large-top img
  {
    max-width: 100%;
    width: 75%;
    height: auto;
    margin: 1rem auto 3rem;
    display: block;
  }

  @media (min-width: 768px) {
    .yc-image-large-top img
    {
      width: auto;
    }
  }

  h1 {
    font-size: 2em;
    line-height: 1em;
}

  input.form-control, select, textarea.form-control{
      color: #555;
      font-size:0.9em;
      border:1px solid #DDD;
      border-radius:5px;
          box-shadow: 2px 2px 15px #00000026;
  }

  @media (min-width: 768px) {
    textarea.form-control{
      border:none;
      box-shadow: 2px 2px 15px #00000012;
    }
  }

  input[type="radio"], 
  input[type="checkbox"] {
    width: 18px;
    height: 18px;
    display: block;
    margin:.25rem 1rem .5rem 0;
    float: left;
  }

  .btn-success
  {
    width:100%;
    margin:1em 0;
    background:#5cb85c;
    color: #FFF;
    font-size: 1.5em;
    text-transform: uppercase;
    display: none;
        border-radius: 5px;
  }


  .next-group{
    padding: 0.5em 1em;
      background: #DDD;
      margin: 1.2em;
      float: left;
      overflow: hidden;
      text-decoration: none;
  }
  .closed .yc-field-container, 
  .closed .form-group, 
  .closed .form-radios, 
  .closed .form-checkboxes,
  .closed .next-group
  {
    max-height: 0;
      height: 0;
      padding: 0;
      margin: 0;
      border: none;
      overflow: hidden;
  }
  .mform_error
  {
    color: #d9534f;
      font-size: 0.8em;
      font-weight: bold;
  }

  .form-control-static{
    display: block;
    padding:1rem 0;
    float: left;
    font-size: smaller;
  }

  .unhide-section{
    position: absolute;
      right: 20px;
      top: 10px;
      /*background: #DDD;*/
      border-radius: 5px;
      padding: 5px;
      cursor:pointer;
      -webkit-transform: none;
      -moz-transform: none;
      -o-transform: none;
      -ms-transform: none;
      transform: none;
  }
  .unhide-section span{
      width: 15px;
      height: 15px;
      display: block;
      background: transparent url('../images/expand-collapse.svg') no-repeat center center;
  }

  .closed .unhide-section{
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
  }

  .form-radios ul,
  .form-checkboxes ul
  {
    padding: 1rem 0;
    width: 100%;
    list-style: none;
  }

  .form-radios ul.float 
  {
    text-align:center;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  li.float {
      flex-grow: 1;
      flex-basis: 0;
      text-align: center;
  }

  .form-radios ul.float input[type="radio"], 
  .form-radios ul.float input[type="checkbox"] 
  {
    display: block;
    float: none;
    width: 18px;
    height: 18px;
    margin: 0 auto .5rem;
  }

    @media screen and (max-width: 667px) 
    {
      .form-radios .col-sm-9
      {
        padding-left: 0;
        padding-right: 0;
        float: left;
        width: 100%;
      }

      /*.form-radios ul.float input[type="radio"], 
      .form-radios ul.float input[type="checkbox"] 
      {
          display: inline-block;
      }
      */
    }

    @media (min-width: 768px) and (max-width: 1024px){
      .col-sm-5 {
          width: 75%;
      }
    }



/* -------------------------tooltip -------------------------*/
    .tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.4;
    opacity: 0;
    filter: alpha(opacity=0); }
    .tooltip.in {
      opacity: 0.9;
      filter: alpha(opacity=90); }
    .tooltip.top {
      margin-top: -3px;
      padding: 5px 0; }
    .tooltip.right {
      margin-left: 3px;
      padding: 0 5px; }
    .tooltip.bottom {
      margin-top: 3px;
      padding: 5px 0; }
    .tooltip.left {
      margin-left: -3px;
      padding: 0 5px; }

    .tooltip-inner {
      max-width: 200px;
      padding: 3px 8px;
      color: #fff;
      text-align: center;
      text-decoration: none;
      background-color: #000;
      border-radius: 0; }

    .tooltip-arrow {
      position: absolute;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid; }

    .tooltip.top .tooltip-arrow {
      bottom: 0;
      left: 50%;
      margin-left: -5px;
      border-width: 5px 5px 0;
      border-top-color: #000; }
    .tooltip.top-left .tooltip-arrow {
      bottom: 0;
      right: 5px;
      margin-bottom: -5px;
      border-width: 5px 5px 0;
      border-top-color: #000; }
    .tooltip.top-right .tooltip-arrow {
      bottom: 0;
      left: 5px;
      margin-bottom: -5px;
      border-width: 5px 5px 0;
      border-top-color: #000; }
    .tooltip.right .tooltip-arrow {
      top: 50%;
      left: 0;
      margin-top: -5px;
      border-width: 5px 5px 5px 0;
      border-right-color: #000; }
    .tooltip.left .tooltip-arrow {
      top: 50%;
      right: 0;
      margin-top: -5px;
      border-width: 5px 0 5px 5px;
      border-left-color: #000; }
    .tooltip.bottom .tooltip-arrow {
      top: 0;
      left: 50%;
      margin-left: -5px;
      border-width: 0 5px 5px;
      border-bottom-color: #000; }
    .tooltip.bottom-left .tooltip-arrow {
      top: 0;
      right: 5px;
      margin-top: -5px;
      border-width: 0 5px 5px;
      border-bottom-color: #000; }
    .tooltip.bottom-right .tooltip-arrow {
      top: 0;
      left: 5px;
      margin-top: -5px;
      border-width: 0 5px 5px;
      border-bottom-color: #000; }

    table td, table th{
        display: inline-block;
        float:left;
        width:100%;
      }
    table th{
        display:none;
      }

/* ------- answers ------- */

  .answer, .answer-text{
      background: #EEE; 
      font-size:0.75em;
      display: inline-block;
      padding: 0.5em;
      float: left;
      width:100%;
      line-height: 1.5em;
      border-bottom: 1px solid #FFF;
  }
  .answer-text{
      background: none;
      border-bottom: 1px solid #eee;
      margin-bottom: 0.5em;
          padding: 1em 0;
  }
  div .answer-text:last-child{
      border-bottom: none;
  }

  .answer{
    width:35%;
    border-radius: 15px;
  }
  .segment-color {
      width: 20px;
      height: 20px;
      display: inline-block;
      float: left;
      border-radius: 50%;
      background: #eee;
      margin-right: 10px;
  }
  .option{
    float: left;
    width:100%;
    overflow: hidden;
    margin-bottom: 5px;
  }

@media screen and (min-width: 350px) 
{
  
}


@media screen and (min-width: 850px) 
{
  table td, table th{
    display: table-cell;
    width: auto;
    float: none;
  }
  input[type="radio"], 
  input[type="checkbox"] 
  {
    width: 15px;
    height: 15px;
    display: inline-block;
  }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        margin-top:15px;
    }
    50% {
        opacity: 0.8;
         margin-top:5px;
    100% {
        opacity: 1;
         margin-top:0;
    }       
}


@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        margin-top:15px;
    } 
    50% {
        opacity: 0.8;
         margin-top:5px;
      }
    100% {
        opacity: 1;
         margin-top:0;
    }
}