html {
    background-color: #fff;
}

body {
    font-family: Heebo-Light, sans-serif;
    -moz-osx-font-smoothing: grayscale;
}

header {
    position: fixed;
    width: 100%;
    z-index: 5000;
    background: #fff;
}

main {
    max-width: 100%;
    min-width: 100%;
    padding: 140px 0 0 0;
}

.container,
.row {
    max-width: 72.5rem;
    margin: 0 auto;
}

h1 {
    font-size: 1.75rem;
}

h2,
h3 {
    padding-bottom: 16px;
}

h2 {
    font-size: 26px;
}

h3 {
    font-size: 18px;
}

p {
    margin-bottom: 1rem;
    font-size: inherit;
    text-rendering: optimizeLegibility;
    line-height: 1.5em;
}

p.bigger {
    font-size: 16px;
}

strong {
    line-height: 2em;
    font-family: "heebo-medium";
    font-size: 18px;
}

.round-image {
    margin-bottom: 20px;
}

#main-fill {
    max-width: 1200px;
    min-width: 320px;
    margin: 0 auto;
}

.fill {
    background: #f8f8f8;
}

.row .fill {
    border-radius: 11px;
}

.stroke {
    background-color: #fff;
}

.no-pad {
    padding: 0;
}

.padding {
    padding: 0 45px;
}

button.small,
a.button.small,
span.button.small {
    line-height: 31px;
}

.icon:before {
    color: #0079c1;
    font-size: 83px;
}

.icon {
    width: inherit;
}

.left-icon {
    float: left;
    padding: 10px 20px 0 0;
}

.animated-icon {
    text-align: right;
    padding-top: 20px;
}

.animated-icon .icon:before {
    color: #0079c1;
    font-size: 100px;
}

.left-icon .icon:before {
    color: #0079c1;
    font-size: 67px;
}

.text {
    overflow: auto;
}

/*.banner-image {
  background: url(../assets/insurance-grs/main-image.jpg);
  height: 440px !important;
  
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100%;
}
.banner.banner-large .banner-promo {
  line-height: 0px;
  color: #000;
  margin-top: 100px;
  left: 240px;
}
.banner.banner-large .banner-promo h2 {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -0.35px;
}
.banner.banner-large .banner-promo p{font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;}*/

.banner-image {
    background: url(/assets/insurance-grs/main-image.jpg);
    height: 440px !important;
    background-attachment: fixed;
    background-size: contain;
    height: 200px;
    margin: 200px 0;
    background-position-y: 100px;
    background-repeat: no-repeat;
}

.banner-image::after {
    /* Display and position the pseudo-element */
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* Move the pseudo-element back away from the camera,
     * then scale it back up to fill the viewport.
     * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
    transform: translateZ(-1px) scale(1.5);
    /* Force the background image to fill the whole element. */
    background-size: 100%;
    /* Keep the image from overlapping sibling elements. */
    z-index: -1;
}

.banner.banner-large .banner-promo {
    line-height: 0;
    color: #000;
    margin-top: 100px;
    left: 240px;
}

.wrapper-header {
    /* The height needs to be set to a fixed value for the effect to work.
   * 100vh is the full height of the viewport. */
    height: 375px;
    /* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
    overflow-x: hidden;
    /* Enable scrolling on the page. */
    overflow-y: auto;
    /* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
    perspective: 2px;
}

.section {
    /* Needed for children to be absolutely positioned relative to the parent. */
    position: relative;
    /* The height of the container. Must be set, but it doesn't really matter what the value is. */
    height: 440px;
}

.parallax::after {
    /* Display and position the pseudo-element */
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* Move the pseudo-element back away from the camera,
   * then scale it back up to fill the viewport.
   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
    transform: translateZ(-1px) scale(1.5);
    /* Force the background image to fill the whole element. */
    background-size: 100%;
    /* Keep the image from overlapping sibling elements. */
    z-index: -1;
}

.stroke {
    border: 1px solid #959595;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.header-lang {
    display: table-cell;
    padding: 40px 40px 0 0;
}

input,
button {
    margin-bottom: 20px;
}

input[type="text"] {
    padding: 15px;
}

input::placeholder {
    color: #001928;
}

ul {
    padding: 0 14px
}

.clear {
    clear: both;
}

table {
    margin-top: 10px;
}

table thead {
    background: #f2f2f2;
    padding: 20px 0;
}

table thead th {
    padding: 25px 8px;
    color: #001928;
    font-size: 15px;
    font-family: "heebo-medium";
    border-bottom: 2px solid #9a9a9a;
}

table tbody th,
table tbody td {
    padding: 10px;
}

table tbody td:nth-child(2n+1) {
    background-color: #fff;
}

table tbody td:first-child {
    color: #0079c1;
    font-family: "heebo-medium";
}

/* Sets the actual background images to adorable kitties. This part is crucial. */
.bg1::after {
    background-image: url(../assets/insurance-grs/main-image.jpg);
    background-repeat: no-repeat;
}

/*.choose {
  background: url(../assets/insurance-grs/bg-why-choose.png) bottom no-repeat;
}*/

.staggered-animation-container2 h2 {
    padding-top: 30px;
}

form .button.attention {
    width: 100%;
}

.left {
    text-align: left;
}

main.new {
    padding: 0;
}

@media screen and (max-width:767px) {
    main {
        padding: 0;
    }
    header {
        position: unset;
    }
    strong {
        margin: -.4em 0;
        font-size: 16px;
    }
    h1 {
        font-size: 1.5rem;
        line-height: 2rem;
        letter-spacing: 0;
        font-weight: 300;
    }
    h2 {
        font-size: 1.5rem;
        line-height: 2rem;
        letter-spacing: 0;
        font-weight: 300;
    }
    h3 {
        font-size: 1.125rem;
        line-height: 2rem;
        letter-spacing: 0;
        font-weight: 300;
        padding-bottom: 0
    }
    section,
    .padding {
        padding: 0 20px;
    }
    .m-centered {
        text-align: center;
    }
    .staggered-animation-container2 h2 {
        padding-top: 0;
    }
    .banner-image {
        background: url(../assets/insurance-grs/mob-main-image.png);
        height: 179px !important;
        background-attachment: inherit;
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .left-icon .icon:before {
        font-size: 47px;
    }
    .text {
        font-size: 12px;
        padding-top: 15px;
    }
    .accordion>.accordion-container>.accordion-title>.function {
        float: right;
        margin: 0;
    }
    .function {
        padding: 4px;
    }
    .accordion>hr {
        margin: 10px 0;
    }
    .accordion h3 {
        color: #000;
    }
    .accordion>.accordion-container>.accordion-content {
        margin: 0;
    }
    .accordion .text {
        padding-top: 5px;
    }
    .accordion-content .icon:before {
        color: #0079c1;
        font-size: 57px;
    }
    table thead th {
        font-weight: bold;
    }
    table thead th {
        padding: 7px;
        font-size: 11px;
        font-weight: bold;
    }
    .fill.desktop-hide {
        border-radius: 0;
        margin: 0 -15px;
        text-align: center;
    }
    .fill.desktop-hide .centered {
        width: 100%;
    }
    .choose {
        border-bottom: 1px solid #ccc;
    }
    .mob-fill {
        background: #f8f8f8;
    }
    .width70 {
        width: 70% !important;
    }
}

@media (min-width:769px) {
    .desktop-max {
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
    .overlay-window {
        width: 400px !important;
    }
}

@media (max-width:767px) {
    .banner.banner-large .banner-promo {
        line-height: 0;
        color: #000;
    }
    .mobile-title {
        font-size: 20px;
    }
    .rohit {
        padding-top: 20px !important;
    }
    .overlay-window {
        width: 100% !important;
    }
}

.os-animation {
    opacity: 0;
}

.os-animation.animated {
    opacity: 1;
}