@font-face {
    font-family: 'livemore';
    src: url('../f/LiveMore.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/*
300 Light
400 Regular
500 Medium
600 SemiBold
700 Bold
800 ExtraBold
*/
@font-face {
    font-family: 'Open Sans';
    src: url('../f/OpenSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../f/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../f/OpenSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../f/OpenSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../f/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../f/OpenSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../f/OpenSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Birthstone';
    src: url('../f/Birthstone-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}


body {
    font-family:"Open Sans";
    padding-top:130px; /* this is for offset to make space for topnav */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img.icon-social {
    width:25px;
    height:25px;
}

img.footer-dbs-logo {
    width:79px;
    height:25px;
}

i,em {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-style: italic;
}

.red {
    color:#cc0000 !important;
}

.pc {
    display: block;
}

.tab,
.mb {
    display: none;
}

img {
    max-width: 100%;
}

.learn-more {
    display: inline-block;
    color: #cc0000;
    border: 1px #cc0000 solid;
    border-radius: 2px;
    font-size: 14px;
    line-height: 19px;
    font-weight: 600;
    background: none;
    text-decoration: none;
    padding: 12.5px 30px;
    white-space: nowrap;
    opacity: 1;
    overflow: hidden;
    position: relative;
    -webkit-transition: color .3s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: color .3s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: color .3s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: color .3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sec-title .red-text {
    color: #C00;
    font-style: normal;
    font-weight: 600;
    font-size: 38px;
    line-height: 48px;
}

.sec-title span {
    display: block;
}

.sec-title .birthstone {
    position: relative;
    font-family: 'Birthstone';
    font-size: 68px;
    line-height: 48px;
    width: fit-content;
}

/* Text + Image headline */

.text-img__headline {
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    font-size: 38px;
    line-height: 1;
    color: #1a1a1a;
    margin: 0;
    padding: 0;
}

.text-img__headline span {
    display: block;
}

.text-img__headline .red {
    position: relative;
    z-index: 1;
}

.text-img__headline .img-text {
    position: relative;
    width: 40%;
    max-width: 300px;
}

.text-img__headline .img-text img {
    width: 100%;
    height: 100%;
}

.growth-img-text {
    margin-top: -20px;
}

/* media max-width styles */
@media (max-width: 576px) {

    .row {
        margin-left:-8px;
        margin-right:-8px;
    }

    body {
        padding-top:80px;
    }

}

@media (max-width: 992px) {

}


/* media min-width styles */

/* Small devices (sm, ≥576px) */
@media (min-width: 576px) {

}

/* Medium devices (md, ≥768px) */
@media (min-width: 768px) {
}

/* Large devices (lg, ≥992px) */
@media (min-width: 992px) {

}

/* Extra large devices (xl, ≥1200px) */
@media (min-width: 1200px) {
    /* Learn more hover effect */
    
    .learn-more::before {
        content: "";
        display: block;
        width: 0%;
        height: 100000%;
        position: absolute;
        top: 50%;
        left: 75%;
        z-index: -1;
        background-color: #c00;
        -webkit-transition: width .3s cubic-bezier(0.4, 0, 0.2, 1), transform .3s cubic-bezier(0.4, 0, 0.2, 1);
        -moz-transition: width .3s cubic-bezier(0.4, 0, 0.2, 1),transform .3s cubic-bezier(0.4, 0, 0.2, 1);
        -ms-transition: width .3s cubic-bezier(0.4, 0, 0.2, 1),transform .3s cubic-bezier(0.4, 0, 0.2, 1);
        -o-transition: width .3s cubic-bezier(0.4, 0, 0.2, 1),transform .3s cubic-bezier(0.4, 0, 0.2, 1);
        transition: width .3s cubic-bezier(0.4, 0, 0.2, 1), transform .3s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: center;
        -webkit-transform: translate(-50%, -50%) rotate(-45deg);
        -moz-transform: translate(-50%, -50%) rotate(-45deg);
        -ms-transform: translate(-50%, -50%) rotate(-45deg);
        -o-transform: translate(-50%, -50%) rotate(-45deg);
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .learn-more:hover {
        opacity: 1;
        color: #fff;
    }

    .learn-more:hover::before {
        width: 175%;
        -webkit-transform: translate(-50%, -50%) rotate(-45deg);
        -moz-transform: translate(-50%, -50%) rotate(-45deg);
        -ms-transform: translate(-50%, -50%) rotate(-45deg);
        -o-transform: translate(-50%, -50%) rotate(-45deg);
        transform: translate(-50%, -50%) rotate(-45deg)
    }

    .learn-more:active {
        -webkit-transition: opacity 0s cubic-bezier(0.4, 0, 0.2, 1);
        -moz-transition: opacity 0s cubic-bezier(0.4, 0, 0.2, 1);
        -ms-transition: opacity 0s cubic-bezier(0.4, 0, 0.2, 1);
        -o-transition: opacity 0s cubic-bezier(0.4, 0, 0.2, 1);
        transition: opacity 0s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: .2
    }

  
}

/* Extra extra large devices (xxl, ≥1400px) */
@media (min-width: 1400px) {

    /* override container class to have maximum width of 1140px */
    .container {
        max-width: 1140px !important;
    }

}


@media (min-width: 768px) and (max-width: 1024px) {

    .tab {
        display: block;
    }

    .tab ~ .pc {
        display: none;
    }

    body.home .text-img__headline {
        font-size: 38px;
    }

    body.home .animate-banner__desc p {
        font-size: 16px;
    }
}


@media (max-width: 767.9px) {

    .pc ,
    .tab{
        display: none;
    }

    .mb {
        display: block;
    }

    .sec-title .red-text {
        font-size: 28px;
    }
    
    .sec-title .birthstone {
        font-size: 60px;
    }

    .text-img__headline {
        font-size: 28px;
    }

    .text-img__headline .img-text {
        width: 55%;
    }
}