@mixin transition {
  -webkit-transition:all 300ms ease-in;
  -moz-transition:all 300ms ease-in;
  -o-transition:all 300ms ease-in;
  transition:all 300ms ease-in;
}

.gag-video-container {
  position: relative;
  padding-bottom: 56.25%;
  margin-bottom: 30px;
  height: 0;
  overflow: hidden;

  iframe,
  object,
  embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.ga-copyright {
  text-align: center;
  color: #7f8c8d;

  a {
    color: #7f8c8d;
    text-decoration: underline;
    @include transition;

    &:hover {
      color: #2c3e50;
      text-decoration: none;
    }
  }

  a img {
    filter: grayscale(100%);
    opacity: .2;
    @include transition;
  }

  a:hover img {
    filter: none;
    opacity: 1;
  }
}

.google-analytics-germanized {
  box-sizing: border-box;

  .google-analytics-germanized-form {
    margin-top: 20px;
  }

  .warning-text {
    color: #e67e22;
  }

  .gag-settings-buttons {
    padding-left:40px;

    ul {
      margin:0;
    }

    ul li {
      display:inline-block;
      margin:0 .2em 0 0;
      position:relative;

      .new  {
        font-size:11px;
        border:1px solid #61bebc;
        border-radius:5px;
        padding:2px 6px;
        margin:0 0 0 5px;
        line-height: 0;
      }

      a {
        color: #30aeab;
        background:#fff;
        display:block;
        padding:10px 20px;
        border-radius:.4rem .4rem 0 0;
        text-decoration:none;
        font-size:16px;
        @include transition;
        outline:0;
        border-bottom:2px solid rgba(0,0,0,0);

        &.active , &:hover, &:focus {
          background:#30aeab;
          color:#fff;
          box-shadow:none;
        }
      }
    }
  }

  .gag-settings-wrapper-outer {
    background: #61bebc;
    background: -moz-linear-gradient(-45deg, #61bebc 0%, #30aeab 0%, #30afac 34%, #00cea8 100%);
    background: -webkit-linear-gradient(-45deg, #61bebc 0%,#30aeab 0%,#30afac 34%,#00cea8 100%);
    background: linear-gradient(135deg, #61bebc 0%,#30aeab 0%,#30afac 34%,#00cea8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61bebc', endColorstr='#00cea8',GradientType=1 );
    padding:4em 0;
    border-radius:.4rem
  }

  .gag-settings-wrapper {
    max-width: 800px;
    margin: 0 auto;
  }

  .gag-settings-item {
    padding: 25px;
    background: #fff;
    border-bottom: 2px solid #f1f1f1;
    -webkit-box-shadow: 5px 5px 20px 0 rgba(0,0,0,.2);
    box-shadow: 5px 5px 20px 0 rgba(0,0,0,.2);
    border-radius:.4rem;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    margin-bottom:3em;
    position:relative;

    &.onegagbox:before {
      position: absolute;
      top: 41%;
      left: -64px;
      content: '1';
      font-size: 170px;
      color: #fff;
      opacity: .3;
    }

    &.twogagbox:after {
      position: absolute;
      top: 41%;
      right: -96px;
      content: '2';
      font-size: 170px;
      color: #fff;
      opacity: .3;
    }

    &.thirdgagbox {
      text-align: center;
    }

    &.thirdgagbox:before {
      position: absolute;
      top: 41%;
      left: -100px;
      content: '3';
      font-size: 170px;
      color: #fff;
      opacity: .3;
    }

    &:hover {
      -webkit-box-shadow: 2px 2px 8px 0 rgba(0,0,0,.25);
      box-shadow: 2px 2px 8px 0 rgba(0,0,0,.25);
    }

    &:focus {
      border-bottom:3px solid #000;
    }

    &.subheadline {
      position:relative;
      margin-top:7em;

      & > span {
        position: absolute;
        top: -47px;
        left: 0;
        font-size: 20px;
        letter-spacing:1px;
        color: #fff;
        border: 2px solid #fff;
        padding: 15px 20px;
        border-radius: .4rem .4rem 0 0;
      }
    }

    .oneline_field {

      margin-bottom:1em;

      &:last-child {
        margin:0;
      }

      .leftbox {
        width:30%;
        float:left;
        min-height:45px;
        display:flex;
        align-items:center;
      }

      .rightbox {
        width:70%;
        float:left;
      }

      label[type="text"], input {
        text-align:left!important;
        text-align-last:left!important;
      }

      label {
        padding-bottom:0!important;
      }

      &.checkboxarea {

        .leftbox {
          min-height:25px!important;
        }

        strong {
          padding-bottom:0;
        }

        .rightbox  {
          input {
            margin:0 10px 0 0!important;
          }

          p {
            margin-bottom:0;
          }

        }
      }
    }

    .mini-description {
      font-size:13px;
      color:#7a7a7a;
      display:block;
      width:100%;

      strong {
        font-size: inherit !important;
        display: inline !important;
      }
    }

    label, strong {
      font-weight: bold;
      display: block;
      text-align: center;
      font-size: 16px;
      padding-bottom: 10px;

      &.checkboxlabel {
        display:inline;
      }
    }

    input[type="text"], select, textarea {
      text-align: center;
      font-size: 18px;
      width: 100%;
      max-width:100%;
      padding: 10px;
      border-radius:.4rem;
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
      height:45px;
      line-height: 1.2;
      text-align-last:center;

      &:focus, &:hover {
        border:1px solid #329694;
        outline: 0;
      }
    }

    textarea {
      text-align:left!important;
      text-align-last:left;
      height:200px!important;
      font-size:14px;
      font-family:Courier, serif;
      line-height:1.5;

      &#cc-banner-text {
        font-family:sans-serif;
        font-size: 18px;
      }
    }

    input[type="checkbox"] {
      text-align: center;
      font-size: 18px;
      padding: 5px!important;
      border-radius: .4rem;
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
      height: 26px;
      width: 27px;
      margin:0 20px 0 10px;

      &:focus, &:hover {
        border:1px solid #329694;
        outline: 0;
      }
    }


    input[type="radio"] {
      text-align: center;
      font-size: 18px;
      padding: 5px!important;
      border-radius: 10rem;
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
      height: 26px;
      width: 27px;
      margin:1px 0 0 10px;

      &:focus, &:hover {
        border:1px solid #329694;
        outline: 0;
      }
    }
  }


  .gag-analytics-sendmebutton {
      max-width: 800px;
      margin: 0 auto;
      text-align:center;

    button.gag-sendme-up {
      text-align: center;
      font-size: 18px;
      padding:15px 25px;
      border-radius:.4rem;
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
      color:#fff;
      cursor:pointer;
      background:#37d6d3;
      -webkit-box-shadow: 5px 5px 20px 0 rgba(0,0,0,.15);
      box-shadow: 5px 5px 20px 0 rgba(0,0,0,.15);
      border:none;
      outline:0;

      &.sucess {
        position:relative;
        padding-right:50px;
        background:#30d5ac;

        &:after {
          position:absolute;
          content:'\002714';
          top:0;
          right:0;
          background:#41f2af;
          padding:15px 10px;
          border-radius:0 .4rem .4rem 0;
        }
      }

      &:hover {
        -webkit-box-shadow: 2px 2px 8px 0 rgba(0,0,0,.15);
        box-shadow: 2px 2px 8px 0 rgba(0,0,0,.15);
        background:#30d5ac;
      }
    }
  }

  .logotype {
    max-width: 800px;
    margin: 0 auto;
    text-align:center;

    img {
      -webkit-box-shadow: 5px 5px 20px 0 rgba(0,0,0,.15);
      box-shadow: 5px 5px 20px 0 rgba(0,0,0,.15);
      width:15%;
      border-radius:20px;
      margin-bottom:3em;
    }
  }

  .gag-ats-option {
    border-bottom:1px solid #ccc;
    padding-bottom:30px;
    margin-bottom:30px;
  }

  #tab5 .gag-settings-item {
    text-align:center;
  }


  .clear:before,
  .clear:after {
    content: "";
    display: table;
    table-layout: fixed; }

  .clear:after{
    clear: both;
  }

/* Cookie Notice */

.ga-cookie-notice-layout {
  border:1px solid #ececec;
  height:40px;
  width:50px;
  display:inline-block;
  position:relative;
  border-radius:5px;
  transition:0.3s ease-in-out all;
  margin:0 5px 5px 0;
  cursor: pointer;

  &:hover, &.active {
    box-shadow:0 8px 20px rgba(0, 0, 0, 0.1);
    transform:scale(1.1);
  }

  &:after {
    position:absolute;
    bottom:15px;
    right: 5px;
    width:20px;
    height:10px;
    content:'';
  }


  &.ga-lay1 {
    background:#fff;

    &:after {
      background:#37d6d3;
    }
  }

  &.ga-lay2 {
    background:#37d6d3;

    &:after {
      background:#fff;
    }
  }

  &.ga-lay3 {
    background:#eeeef8;

    &:after {
      background:#009ed4;
    }
  }

  &.ga-lay4 {
    background:#2c2c2c;

    &:after {
      background:#f25416;
    }
  }

  &.ga-lay5 {
    background:#275f47;

    &:after {
      background:#01cc76;
    }
  }

  &.ga-lay6 {
    background:#ff6c4f;

    &:after {
      background:#fcab4c;
    }
  }

  &.ga-lay7 {
    background:#e0e0e0;

    &:after {
      background:#e5025d;
    }
  }

  &.ga-lay8 {
    background:#000000;

    &:after {
      background:#fff;
    }
  }



}


}