﻿.help-banner {
  background-color: #f7f7f7;
  padding-top: 1em;
  min-height: 18em;
  overflow: hidden;
}
.help-banner .question-mark {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 1;
}
.help-banner .question-mark .signpost-svg {
  display: none;
  position: absolute;
  opacity: 0.7;
  top: -40px;
  left: 100px;
}
.help-banner .content-help {
  padding: 2em;
  padding-top: 1em;
  display: flex;
  flex-direction: column;
  align-self: center;
  grid-column: 2;
  margin: 0 auto;
  text-transform: uppercase;
  text-align: center;
  align-items: center;
}
@media (min-width: 1000px) {
  .help-banner .content-help {
    padding-right: 20%;
    text-align: right;
    align-items: flex-end;
  }
}
.help-banner .content-help h1 {
  font-weight: 700;
  color: #303030;
  padding-bottom: 0.25em;
}
.help-banner .content-help .end {
  display: flex;
  justify-content: flex-end;
}
.help-banner .content-help .end h4 {
  color: #505050;
  /*                text-align: right;*/
}
.help-banner .content-help .btn-div {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5em;
}
.help-banner .content-help .btn-div .mybtn {
  max-width: 200px;
  display: flex;
  justify-content: space-between;
}
.help-banner .content-help .btn-div .mybtn:hover {
  transform: scale(1.1);
}
.help-banner .content-help .btn-div .mybtn img {
  width: 1em;
  transform: rotate(90deg);
}
/*@media (min-width: 667px) {


    .help-banner {
        .content-help {

            h1 {
                font-size: 2.5rem;
                padding-bottom: 0.5em;
            }

            .start, .end {
                .flex-end();
            }
        }
    }
}*/
/*@media (min-width: 768px) {
    .help-banner {
        display: grid;
        grid-template-columns: 30% 70%;
        min-height: 18em;



        .question-mark {

            .signpost-svg {
                display: block;
                position: absolute;
                opacity: 0.7;
                left: -170px;
                top: -30px;

                img {
                    width: 29em;
                }
            }
        }

        .content-help {
            grid-column: 2;

            h1 {
                font-size: 2.25rem;
            }

            .end {
                .flex-end();
            }


            h4 {
                letter-spacing: 1.5px;
                color: #505050;
            }

            .btn-div {
                .flex-end();
                margin-top: 1.5em;

                .mybtn {
                    max-width: 200px;
                    .flex-between();

                    &:hover {
                        transform: scale(1.1);
                    }

                    img {
                        width: 1em;
                        transform: rotate(90deg);
                    }
                }
            }
        }
    }
    
}*/
/*@media (min-width: 992px) {
    .help-banner {
        display: grid;
        grid-template-columns: 35% 65%;
        padding-top: 1em;
        min-height: 20em;

        .question-mark {

            .signpost-svg {
                top: -40px;
                left: 20px;
            }
        }

        .content-help {

            h1 {
                font-weight: 700;
                color: #303030;
                font-size: 3rem;
                padding-bottom: 0.25em;
            }

            .end {
                .flex-end();
            }
        }
    }
}*/
/*@media (min-width: 1200px) {
    .help-banner {
        grid-template-columns: 35% 65%;

        .content-help {
            padding-right: 0;
        }
    }
}

// XL (desktop)
@media (min-width: 1369px) {

    .help-banner {
        .question-mark {

            .signpost-svg {
                top: -40px;
                left: 145px;
            }
        }

        .content-help {

            h1 {
                font-weight: 700;
                color: #303030;
                font-size: 3rem;
                padding-bottom: 0.25em;
            }

            .end {
                .flex-end();
            }
        }
    }
}*/