/* ################################################### WIDTH 1500px ################################################### */
@media only screen and (max-width: 1500px){

    .hf_fs88{
        font-size: 79px;
    }

    .hf_fs32{
        font-size: 29px;
    }

    .hf_fs20{
        font-size: 18px;
    }

    .hf_fs18{
        font-size: 16px;
    }

    .hf_ls9{
        letter-spacing: 8px;
    }

    .hf_w100-160{
        width: calc(100% - 80px);
    }

    .hf_w1300{
        width: 85%;
    }

}

/* ################################################### WIDTH 1300px ################################################### */
@media only screen and (max-width: 1300px){

    .hf_fs88{
        font-size: 71px;
    }

    .hf_fs55{
        font-size: 50px;
    }

    .hf_fs32{
        font-size: 26px;
    }

    .hf_fs20{
        font-size: 16px;
    }

    .hf_ls9{
        letter-spacing: 7px;
    }

    #hf_sub_nav ul li ul li{
        margin-bottom: 13px;
    }

    #hf_main_nav ul li ul li a::before{
        height: 3px;
    }

}

/* ################################################### WIDTH 1100px ################################################### */
@media only screen and (max-width: 1100px){

    .hf_fs88{
        font-size: 64px;
    }

    .hf_fs55{
        font-size: 45px;
    }

    .hf_fs32{
        font-size: 23px;
    }

    .hf_ls9{
        letter-spacing: 6px;
    }

    .hf_pt250{
        padding-top: 160px;
    }

    .hf_ptb180{
        padding: 120px 0px;
    }

    .hf_pt50{
        padding-top: 35px;
    }

    .hf_pb180{
        padding-bottom: 120px;
    }

    .hf_pb50{
        padding-bottom: 35px;
    }

    .hf_pt30{
        padding-top:15px;
    }

    .hf_pb100{
        padding-bottom: 66px;
    }

    header .hf_pt50{
        padding-top: 30px;
    }

    header .hf_pb50{
        padding-bottom: 30px;
    }

    .hf_nav_button{
        width: 30px;
    }

    #hf_nav_container.hf_nav_open{
        height: calc(100% - 104px);
    }

    #hf_nav_container{
        top: 104px;
    }

    #hf_nav_container.hf_nav_scrolled{
        top: 76px;
    }

    #hf_nav_container.hf_nav_open.hf_nav_scrolled{
        height: calc(100% - 76px);
    }

    #hf_nav_container .hf_center_content{
        margin-top: -104px;
    }

    #hf_main_nav ul li ul li{
        margin-bottom: 13px;
    }

    #hf_sub_nav ul li ul li{
        margin-bottom: 11px;
    }

}

/* ################################################### WIDTH 1000px ################################################### */
@media only screen and (max-width: 1000px){

    #hf_footer_claim{
        display: none;
    }

}

/* ################################################### WIDTH 950px ################################################### */
@media only screen and (max-width: 950px){

    #hf_footer_nav_content.hf_w100-160{
        width: 70%;
    }

    #hf_footer_nav #hf_footer_nav_content li ul li:nth-child(2){
        margin-right: 0px;
    }

    #hf_footer_nav #hf_footer_nav_content li ul li:last-child{
        padding-top: 10px;
    }

}

/* ################################################### WIDTH 900px ################################################### */
@media only screen and (max-width: 900px){

    .hf_fs88{
        font-size: 58px;
    }

    .hf_fs55{
        font-size: 40px;
    }

    .hf_fs32{
        font-size: 21px;
    }

    .hf_ls9{
        letter-spacing: 5px;
    }

    #hf_sub_nav ul li ul li{
        margin-bottom: 9px;
    }

    #hf_sub_nav ul li ul li a::before{
        height: 1px;
    }

    #hf_footer_nav_content.hf_w100-160{
        width: 65%;
    }

}

/* ################################################### WIDTH 700px ################################################### */
@media only screen and (max-width: 700px){

    .hf_fs88{
        font-size: 52px;
    }

    .hf_fs55{
        font-size: 36px;
    }

    .hf_fs32{
        font-size: 19px;
    }

    .hf_ls9{
        letter-spacing: 4px;
    }

    #hf_nav_container .hf_w63, #hf_nav_container .hf_w30{
        width: 100%;
    }

    #hf_nav_container .hf_w30{
        padding-top: 50px;
    }

    #hf_nav_container .hf_fleft, #hf_nav_container .hf_fright{
        float: none;
    }

    #hf_main_nav ul li ul li{
        margin-bottom: 9px;
    }

    #hf_main_nav ul li ul li a:before{
        height: 2px;
    }

    #hf_sub_nav ul li ul li{
        margin-bottom: 7px;
    }

    #hf_footer_nav #hf_footer_nav_content li ul li{
        margin-right: 30px;
    }

    #hf_footer_nav #hf_footer_nav_content li ul li a::before{
        height: 2px;
    }

}

/* ################################################### WIDTH 650px ################################################### */
@media only screen and (max-width: 650px){

    #hf_footer_nav .hf_fleft{
        float: none;
    }

    #hf_footer_nav #hf_meta_nav{
        width: 100%;
        text-align: center;
    }

    #hf_footer_social_service_wrapper{
        width: 280px;
        margin: 0px auto;
        padding-top: 15px;
    }

    #hf_footer_social_service_wrapper.hf_fright{
        float: none;
    }

}

/* ################################################### WIDTH 500px ################################################### */
@media only screen and (max-width: 500px){

    .hf_fs88{
        font-size: 47px;
    }

    .hf_fs55{
        font-size: 32px;
    }

    .hf_fs32{
        font-size: 17px;
    }

    .hf_pt250{
        padding-top: 110px;
    }

    .hf_ptb180{
        padding: 60px 0px;
    }

    .hf_pt50{
        padding-top: 25px;
    }

    .hf_pt20{
        padding-top: 10px;
    }

    .hf_pb180{
        padding-bottom: 60px;
    }

    .hf_pb50{
        padding-bottom: 25px;
    }

    .hf_pb100{
        padding-bottom: 40px;
    }

    .hf_ls9{
        letter-spacing: 3px;
    }

    .hf_w100-160, .hf_w1300{
        width: 90%;
    }

    header .hf_pt20{
        padding-top: 9px;
    }

    header.hf_header_scrolled .hf_pt20{
        padding-top: 9px;
    }

    header #hf_logo{
        -webkit-transition: all 0s linear;
        -moz-transition: all 0s linear;
        -ms-transition: all 0s linear;
        -o-transition: all 0s linear;
        transition: all 0s linear;
    }

    header.hf_header_scrolled #hf_logo{
        transform: scale(1) translateY(0%);
    }

    .hf_nav_button_text{
        margin-left: 15px;
    }

    #hf_logo{
        width: 63px;
        height: 25px;
        margin-left: -31.5px;
        background-size: auto 100%;
        background-repeat: no-repeat;
    }

    #hf_nav_container, #hf_nav_container.hf_nav_scrolled{
        top: 85px;
    }

    #hf_nav_container.hf_nav_open{
        height: calc(100% - 85px);
    }

    #hf_nav_container.hf_nav_scrolled{
        top: 85px;
    }

    #hf_nav_container.hf_nav_open.hf_nav_scrolled{
        height: calc(100% - 85px);
    }

    #hf_nav_container .hf_center_content{
        margin-top: -33px;
    }

    #hf_main_nav ul li, #hf_main_nav ul li ul li, #hf_sub_nav ul li, #hf_sub_nav ul li ul li{
        -moz-transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -o-transform: translateY(25px);
        -ms-transform: translateY(25px);
        transform: translateY(25px);
    }

    #hf_nav_container .hf_w30{
        padding-top: 25px;
    }

}

/* ################################################### WIDTH 450px ################################################### */
@media only screen and (max-width: 450px){

    nav .hf_fs88{
        font-size: 38px;
    }

    #hf_footer_nav_content.hf_w100-160{
        width: 90%;
    }

}

/* ################################################### WIDTH 400px ################################################### */
@media only screen and (max-width: 400px){

    .hf_fs88{
        font-size: 42px;
    }

    .hf_nav_button_text{
        display: none;
    }

    nav .hf_fs20, #hf_sequence .hf_fs20{
        font-size: 14px;
    }

    nav .hf_pt30{
        padding-top: 10px;
    }

    #hf_main_nav ul li ul li{
        margin-bottom: 2px;
    }

}

/* ################################################### WIDTH 350px ################################################### */
@media only screen and (max-width: 350px){

    nav .hf_fs88{
        font-size: 35px;
    }

}

/* ################################################### LANDSCAPE ################################################### */
@media only screen and (max-width: 750px) and (orientation: landscape){

    .hf_fs88{
        font-size: 47px;
    }

    .hf_fs55{
        font-size: 32px;
    }

    .hf_fs32{
        font-size: 17px;
    }

    .hf_ptb180{
        padding: 60px 0px;
    }

    .hf_pb180{
        padding-bottom: 60px;
    }

    .hf_pb100{
        padding-bottom: 40px;
    }

    .hf_pt50{
        padding-top: 25px;
    }

    .hf_pt20{
        padding-top: 10px;
    }

    .hf_pb50{
        padding-bottom: 25px;
    }

    .hf_ls9{
        letter-spacing: 4px;
    }

    header .hf_pt50{
        padding-top: 30px;
    }

    header .hf_pb50{
        padding-bottom: 30px;
    }

    header .hf_pt20{
        padding-top: 9px;
    }

    header.hf_header_scrolled .hf_pt20{
        padding-top: 9px;
    }

    header.hf_header_scrolled #hf_logo{
        transform: scale(1) translateY(0%);
    }

    .hf_nav_button_text{
        margin-left: 15px;
    }

    .hf_nav_button_text{
        margin-left: 15px;
    }

    #hf_logo{
        width: 63px;
        height: 25px;
        margin-left: -31.5px;
        background-size: auto 100%;
        background-repeat: no-repeat;
    }

    #hf_nav_container .hf_fleft{
        float: left;
    }

    #hf_nav_container .hf_fright{
        float: right;
    }

    #hf_nav_container .hf_w63{
        width: 63%;
    }

    #hf_nav_container .hf_w30{
        width: 30%;
        padding-top: 0px;
    }

    #hf_nav_container .hf_center_content{
        margin-top: 0px;
    }

    #hf_nav_container, #hf_nav_container.hf_nav_scrolled{
        top: 85px;
    }

    #hf_nav_container.hf_nav_open{
        height: calc(100% - 85px);
    }

    #hf_nav_container.hf_nav_scrolled{
        top: 85px;
    }

    #hf_nav_container.hf_nav_open.hf_nav_scrolled{
        height: calc(100% - 85px);
    }

    #hf_main_nav ul li, #hf_main_nav ul li ul li, #hf_sub_nav ul li, #hf_sub_nav ul li ul li{
        -moz-transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -o-transform: translateY(25px);
        -ms-transform: translateY(25px);
        transform: translateY(25px);
    }

    #hf_footer_nav #hf_footer_nav_content li ul li:nth-child(2){
        margin-right: 30px;
    }

}

/* ################################################### LANDSCAPE ################################################### */
@media only screen and (max-width: 620px) and (orientation: landscape){

    nav .hf_fs88{
        font-size: 35px;
    }

}