@font-face {
  font-family: 'GothamPro';
  src: url("../webfonts/GothamPro-Regular.eot?#iefix") format("embedded-opentype"), url("../webfonts/GothamPro-Regular.woff") format("woff"), url("../webfonts/GothamPro-Regular.ttf") format("truetype"), url("../webfonts/GothamPro-Regular.svg#GothamPro-Black") format("svg");
  font-weight: 400;
  font-style: normal; }
@font-face {
  font-family: 'GothamPro';
  src: url("../webfonts/GothamPro-Black.eot?#iefix") format("embedded-opentype"), url("../webfonts/GothamPro-Black.woff") format("woff"), url("../webfonts/GothamPro-Black.ttf") format("truetype"), url("../webfonts/GothamPro-Black.svg#GothamPro-Black") format("svg");
  font-weight: 900;
  font-style: normal; }
strong {
  font-weight: 900; }

.grid-grid-logo-wrapper {
  position: absolute;
  top: 32px;
  left: 36px;
  z-index: 1050;
  font-family: GothamPro, sans-serif, Arial, Helvetica, 'Courier New', Times;
  font-size: 17px;
  font-weight: 900;
  vertical-align: middle;
  mix-blend-mode: difference; }
  .grid-grid-logo-wrapper .grid-grid-authors {
    display: none;
    font-weight: 400; }
    .grid-grid-logo-wrapper .grid-grid-authors a {
      color: #29FFAD !important;
      font-weight: 900; }
  .grid-grid-logo-wrapper:hover .grid-grid-logo {
    display: none; }
  .grid-grid-logo-wrapper:hover .grid-grid-authors {
    display: block; }

.grid-grid-logo {
  color: #29FFAD; }
  .grid-grid-logo > span {
    font-weight: 400;
    vertical-align: middle; }

.link-no-line {
  text-decoration: none !important; }
  .link-no-line:hover .link-line {
    text-decoration: underline !important; }

.svg-preview svg {
  width: 100%;
  height: auto; }

.svg-preview svg rect:hover {
  fill-opacity: 1;
  fill: #dadada; }

.container-gg {
  overflow: hidden; }
  .container-gg .gg-preview-size {
    font-size: 11px;
    white-space: nowrap;
    display: none;
    margin: -1px 0 0 -1px;
    pointer-events: none; }
  .container-gg .col {
    border-top: 1px solid rgba(35, 41, 49, 0.2);
    border-right: 1px solid rgba(35, 41, 49, 0.2);
    box-shadow: -1px 1px rgba(35, 41, 49, 0.2);
    flex-basis: unset; }
    .container-gg .col:hover {
      background: rgba(35, 41, 49, 0.07); }
      .container-gg .col:hover .gg-preview-size {
        display: block; }
    .container-gg .col:last-child .gg-preview-size {
      right: 0; }

.gg-preview {
  height: 100%; }

.grid-grid-configurator {
  font-family: GothamPro, sans-serif, Arial, Helvetica, 'Courier New', Times;
  z-index: 1000;
  background: #29FFAD;
  color: #232931;
  padding: 44px 35px 26px 35px;
  width: 550px;
  height: 550px;
  transition: opacity .5s linear; }
  .grid-grid-configurator.gg-invisible {
    pointer-events: none;
    opacity: .05; }
  @media (max-width: 1366px) {
    .grid-grid-configurator {
      width: 450px;
      height: 450px; } }
  @media (max-width: 550px) {
    .grid-grid-configurator {
      position: relative !important;
      width: 100%;
      height: auto;
      padding-top: 84px;
      left: 0 !important;
      top: 0 !important; } }
  .grid-grid-configurator .bring-info-line {
    font-size: 120px;
    line-height: .96em;
    letter-spacing: -5px;
    font-weight: bold;
    color: #29FFAD;
    text-shadow: -1px -1px #000, -1px 1px #000, 1px -1px #000, 1px 1px #000; }
    @media (max-width: 1366px) {
      .grid-grid-configurator .bring-info-line {
        font-size: 100px; } }
    @media (max-width: 550px) {
      .grid-grid-configurator .bring-info-line {
        font-size: 60px;
        letter-spacing: -2.5px; } }
  .grid-grid-configurator .btn-download {
    color: #29FFAD;
    background: #232931;
    text-transform: uppercase;
    font-weight: bold;
    border: none;
    border-radius: 0;
    font-size: 20px;
    padding: 17px 40px; }
    @media (max-width: 1366px) {
      .grid-grid-configurator .btn-download {
        padding: 13px 30px; } }
  .grid-grid-configurator .grid-grid-control-x {
    display: inline-block;
    position: relative;
    vertical-align: top; }
    .grid-grid-configurator .grid-grid-control-x > .icon-x {
      display: inline-block;
      width: 26px;
      margin-left: 0;
      margin-right: 0;
      height: 30px;
      background: #232931;
      vertical-align: middle;
      position: absolute;
      pointer-events: none;
      z-index: 20; }
      .grid-grid-configurator .grid-grid-control-x > .icon-x:before {
        position: absolute;
        content: '';
        width: 4px;
        height: 30px;
        background: #29FFAD;
        left: 6px;
        top: 0; }
      .grid-grid-configurator .grid-grid-control-x > .icon-x:after {
        position: absolute;
        content: '';
        width: 4px;
        height: 30px;
        background: #29FFAD;
        left: 16px;
        top: 0; }
    .grid-grid-configurator .grid-grid-control-x .grid-grid-control-x-value {
      padding-left: 35px;
      font-size: 31px;
      font-weight: bold;
      display: inline-block;
      width: 90px;
      margin-top: -7px;
      overflow: hidden;
      height: 44px;
      cursor: url(../img/arrows-h-alt.png) 12 12, auto; }
      .grid-grid-configurator .grid-grid-control-x .grid-grid-control-x-value .grid-grid-control-option {
        display: block; }
  .grid-grid-configurator .grid-grid-control-y {
    display: inline-block;
    position: relative;
    vertical-align: top; }
    .grid-grid-configurator .grid-grid-control-y > .icon-y {
      display: inline-block;
      width: 30px;
      height: 26px;
      margin-top: 2px;
      margin-bottom: 2px;
      background: #232931;
      vertical-align: middle;
      position: absolute;
      pointer-events: none;
      z-index: 20; }
      .grid-grid-configurator .grid-grid-control-y > .icon-y:before {
        position: absolute;
        content: '';
        width: 30px;
        height: 4px;
        background: #29FFAD;
        top: 6px;
        left: 0; }
      .grid-grid-configurator .grid-grid-control-y > .icon-y:after {
        position: absolute;
        content: '';
        width: 30px;
        height: 4px;
        background: #29FFAD;
        top: 16px;
        left: 0; }
    .grid-grid-configurator .grid-grid-control-y .grid-grid-control-y-value {
      padding-left: 40px;
      font-size: 31px;
      font-weight: bold;
      display: inline-block;
      width: 90px;
      margin-top: -7px;
      overflow: hidden;
      height: 44px;
      cursor: url(../img/arrows-v-alt.png) 12 12, auto; }
      .grid-grid-configurator .grid-grid-control-y .grid-grid-control-y-value .grid-grid-control-option {
        display: block; }
  .grid-grid-configurator .grid-grid-control-golden-ratio {
    display: inline-block;
    vertical-align: top; }
    .grid-grid-configurator .grid-grid-control-golden-ratio .custom-control-label {
      padding-left: 28px;
      font-size: 20px; }
    .grid-grid-configurator .grid-grid-control-golden-ratio .custom-control-label::before {
      top: 0;
      width: 54px;
      height: 30px;
      background-color: #232931;
      border: none;
      border-radius: 15px;
      box-shadow: none !important; }
    .grid-grid-configurator .grid-grid-control-golden-ratio .custom-control-label::after {
      top: 3px;
      width: 24px;
      height: 24px;
      border: none;
      border-radius: 12px;
      background-color: #fff;
      box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
      left: -33px; }
    .grid-grid-configurator .grid-grid-control-golden-ratio .custom-control-input:checked ~ .custom-control-label::before {
      background-color: #00C67A; }
    .grid-grid-configurator .grid-grid-control-golden-ratio .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
      background-color: #fff;
      -webkit-transform: translateX(1.5rem);
      transform: translateX(1.5rem); }
  .grid-grid-configurator .grid-grid-control-refresh {
    display: inline-block;
    vertical-align: top; }
    .grid-grid-configurator .grid-grid-control-refresh .gg-refresh-btn {
      background: transparent;
      border: none;
      width: 30px;
      height: 30px;
      background: url("../img/repeat.svg") no-repeat 50% 50%;
      background-size: contain; }
  .grid-grid-configurator .grid-grid-configurator-bottom {
    position: absolute;
    bottom: 0;
    padding-bottom: 26px; }
    @media (max-width: 550px) {
      .grid-grid-configurator .grid-grid-configurator-bottom {
        position: static;
        padding-top: 40px;
        padding-bottom: 0; } }

.drop-right {
  border-right: 1px solid #00C67A !important; }

/*# sourceMappingURL=gridgrid.css.map */