.blue-menu {
    display: none;
}
.hamburger-menu-button {
    display: none;
}

@media screen and (max-width: 990px) {

    body {
    
        min-width: 320px;
    }

    .container{
        width: 100%;
        box-sizing: border-box;
    }   


    /**** header ***/

    .header .block-first{
        display:inline-block;
        height: unset;
        margin-bottom: -3px;
    }

    .header .block-first .search,
    .header .block-first .misc {
        display: none;
    }

    .header .customer a{
        height: 30px;
        line-height: 30px;
    }

    .header .customer .profile-link a::before{
        top: 10px;
    }

    .header .customer li::before{
        top: 10px;
    }

    .header .search{
        float: left;
        padding: 3px 0 0 0;
        display: none;
    }

    .header .block-last{
        height: auto;
        display: inline-block;
        margin-top: -3px;
        margin-bottom: -3px;
        width: 100%;
        padding-bottom: 0;
        padding-top: 0;
    }

    .header .logo {
        width: 100%;
        height: auto;
        margin-bottom: 0px;
    }

    .header .logo a {
        width: 100%;
        height: auto;
        text-indent: 0;
        color: #fff;
        font: 15px/1.4 'ITCLubalinGraphBook';
        font-weight: bold;
        padding: 15px 25px 15px 65px;
        box-sizing: border-box;
        display: block;
        background: url('images/logo-mobile.png') no-repeat, url('images/logo-mobile-back.png') repeat-x;
        background-size: contain, contain;
        background-position: 15px;
        position: relative;
    }

    .header .logo a::after{
        background: url('images/bkg_sidebar-callout-dark.png') no-repeat 100% 0;
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 30px;
    }

    .header .main-block{
        float: none;
        width: 100%;
        box-sizing: border-box;
        height: auto;
        background-size: 30px;
        display: table;
        background: #b2bb1e;
    }

    .header .main-block::after{
        display: none;
    }

    .header .home-legend{
        text-align: center;
        vertical-align: middle;
        display: table-cell;
        font-size: 15px;
        padding: 8px 40px 8px 40px;
    }

    .header-nav{
        padding: 8px 20px 8px 20px;
        position: relative;
    }

    /*.header-nav.on {
        padding-top: 42px;
    }*/

    .header-nav a{
        display: none;
    }

    .header-nav.on li > a{
        display: block;
        font-size: 14px!important;
    }

    .header-nav li.current >  a{
        display: block;
        font-size: 14px;
    }


    /****** header menu *****/

    .hamburger-menu-button {
       /* width: 15px;
        height: 15px;*/
        width: 30px;
        height: 30px;
        padding: 6px;
        display: block;
        position: absolute;
        /*background: #73afb6;
        border: 8px solid #73afb6;*/
        background: url(images/logo-mobile-back.png) repeat-x;
        border: 0px solid #73afb6;    
        box-sizing: content-box;
        border-radius: 10%;
        opacity: 0.85;
        text-indent: 100%;
        color: transparent;
        white-space: nowrap;
        cursor: pointer;
        overflow: hidden;
        right: 7px;
        top: 14px;
        outline: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-box-shadow: 0px 0px 14px #363636;
        -moz-box-shadow: 0px 0px 14px #363636;
        box-shadow: 0px 0px 14px #363636;
    }

    #hamburger-sub-menu{
        right: 2px;
        background: url(images/bkg_fake-sidebar.png) repeat 0 0;
    }

    .hamburger-menu-button-open {
        top: 50%;
        margin-top: -1px;
        left: 50%;
        margin-left: -12px;
    }

    .hamburger-menu-button-open, 
    .hamburger-menu-button-open::before, 
    .hamburger-menu-button-open::after {
        position: absolute;
        width: 24px;
        height: 2px;
        background: #fff;
        border-radius: 4px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    .hamburger-menu-button-open::before, 
    .hamburger-menu-button-open::after {
        left: 0;
        content: "";
    }

    .hamburger-menu-button-open::before {
        top: 6px;
    }

    .hamburger-menu-button-open::after {
        bottom: 6px;
    }

    .hamburger-menu-button-close {
        background: transparent;
        -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }

    .hamburger-menu-button-close::before {
        -webkit-transform: translateY(-6px) rotate(45deg);
              transform: translateY(-6px) rotate(45deg);
    }

    .hamburger-menu-button-close::after {
        -webkit-transform: translateY(6px) rotate(-45deg);
              transform: translateY(6px) rotate(-45deg);
    }

    .blue-menu {
        /*position: absolute;
        top: 0;
        left: 0;*/
        margin: auto;
        overflow: hidden;
        width: 100%;        
        background: #73afb6;
        display:block;
    }

    .blue-menu-fixed {
        display: none;      
    }

    .blue-menu .blue-menu-container {
        /*-webkit-transform: translateX(-110%);
              transform: translateX(-110%);*/
        background-color: #3896d3;/*
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;*/
        padding: 0 5px;
    }

    .header-nav.on .blue-menu .blue-menu-container {
        /*-webkit-transform: translateX(0px);
        transform: translateX(0px);*/
    }

    .blue-menu .misc{
        width: 100%;
    }

    .blue-menu .misc a{
        height: 34px;
        line-height: 34px;
        padding: 0px 12px;
        display: block;
        font-size: 15px;
    }

    .blue-menu .misc a::before{
        display: none;  
    }    

    .control-btn{
        display: none;
    }

    /** main **/

    .main{
        background: 0;
    }


    .col-main {
        width: 100%;
        float: none;
        padding: 0 0 20px 0;
    }

    .col1-layout{
        width: 100%;
        padding: 0;
    }

    .col1-layout .col-main-content, .col2-right-layout .col-main-content, .col-2-set .col-main-content, .col-main-content{
        width: 100%;
        float: none;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .col2-right-layout .col-main-sidebar{
        width: 100%;
        float: right;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .col-2-set .col-1{
        width: 100%;
        margin-bottom: 20px;
    }

    .col-2-set .col-2{
        width: 100%;
    }

    .col-main-content img.header-img{
        width: 100%;
        margin: 0;
    }

    /*** LOGIN **** ***/


    #login-box{
        position: fixed;
        top: 50px;
        right: 20px;
        left: 20px;
        width: auto;
        height: auto;
        background: 0;
        background-color: white;
        border: 1px solid #848484;
    }

    /*** sidebar right**/
    .block{
        margin: 20px 0 15px;
        width: 100%;
    }

    .magazine_media-sidebar{
        width: 100%;
        float: none;
    }

    .photo-album-block .scroller-content{
        width: 100%;
    }

    .photo-album-block li a{
        width: 100%;
    }

    /***** slide **/

    .main-slider{
        width: 100%;
        height: auto;
    }

    .main-slider img{
        display: block;
        width: 100%;
        height: auto;
    }

    .main-slider .slider-info{
        width: 100%;
        top: 100%;
        left: 0;
        right: 0;
        height: 210px;
        position: relative;
        padding: 15px 15px;
        box-sizing: border-box;
    }

    .main-slider > ul > li{
        position: relative;
        display: none!important;
    }

    .main-slider > ul > li.active{
        display: list-item!important;
    }

    .slider-info .type{
        font-size: 13px;
    }

    .slider-info .title{
        font-size: 24px;
        line-height: 26px;
        padding: 6px 0 10px;
    }

    .slider-info .descn{
        padding: 0 0 10px;
        font-size: 14px;
        line-height: 16px;
    }

    .slider-info .more a{
        font-size: 17px;
    }

    .main-slider .navigation{
        left: 15px;
        bottom: 230px;
    }

    .home-col-set{
        background: 0;
        margin: 16px 0;
    }

    .middle-col{
        float: unset;
        width: 100%;
        display: inline-block;
    }

    .chronicle-col{
        float: unset;
        width: 100%;
        display: inline-block;
        padding: 0;
    }

    .chronicle-col>.page-title,.calendar-col, .feat-col, .news-col{
        display: inline-block;
        padding: 0 10px;
        box-sizing: border-box;
        float: unset;
        width: 100%;
    }

    .chronicle-col>.page-title{
        margin-top: 18px;
    }

    .feat-col, .news-col{
        border-bottom: 1px dashed #a4a5a5;
    }

    .home-page .featured-chronicle{
        border-bottom: 0;
    }

    .calendar-col{
        border-top: 1px dashed #a4a5a5;
    }

    /* sidebar menu **/

    .sidebar{
        float: none;
        width: 100%;
        background: url(images/bkg_fake-sidebar.png) repeat 0 0;
        float: unset;
        margin-bottom: 10px;
        position: relative;
        box-sizing: border-box;
    }

    .index-nav{
        width: 100%;
        padding: 6px 0;
        display: none;
    }

    .index-nav > ul > li{
        left: 0;
    }

    .index-nav > ul > li > a{
        width: 100%;
        font-size: 16px;
        line-height: 1.1;
        padding: 2px 15px!important;
        box-sizing: border-box;
        border: 1px solid transparent !important;
        background: 0 !important;
        color: #fff !important;
    }
    .index-nav li.parent > ul{
        left: 0;
        width: 0;
        padding: 0;
    }

    .sub-nav{
        padding: 8px 14px 4px 14px;
    }

    .sub-nav .section-title{
        font-size: 16px;
        padding: 9px 20px 9px 6px;
        background: transparent;
        display: none;
    }
    .sub-nav > ul > li > ul{
        padding: 0 0 4px;
    }
    .sub-nav > ul > li > a {
        font-size: 13px;
        padding: 6px 17px;
        display: none;
    }
    .sub-nav > ul > li > ul > li > a{
        display:none;
    }

    .sub-nav > ul > li.current > a,
    .sub-nav > ul > li > ul > li.current > a,
    .sub-nav > ul > li.active > a{
        background-position: 4px 8px;
        display: block;
        border-top: 0;
        color: #fff;
    }
    .sub-nav > ul > li > ul > li.current > a{
        background-position: 16px 6px;
    }
    .sub-nav > ul > li.current > a::before,
    .sub-nav > ul > li > ul > li.current > a::before,
    .sub-nav > ul > li.active > a::before{
        top: 8px;
        left: 3px;
    }
    .sidebar.on .index-nav{
        display: block;
    }
    .sidebar.on .section-title{
        /*display: block;*/
    }

    .sidebar.on .sub-nav > ul > li > a,
    .sidebar.on .sub-nav > ul > li > ul > li > a {
        display:block;
    }

    .sidebar.on .sub-nav > ul > li > a{
        border-top: 1px dashed #eeab8f;
    }
    .sidebar.on .sub-nav > ul > li:first-child > a{
        border: 0;
    }
    .social-networks{
        padding: 8px 0 8px 0;
        background: url(images/bkg_sidebar_shadow.png) no-repeat 0% 0px;
        background-size: cover;
        display: none;
    }

    .sidebar.on .social-networks {
        display: block;
    }

    .social-networks p{
        padding-left: 15px;
    }

    .social-networks::before{
        padding: 8px 0 8px 0;
        background: url(images/bkg_sidebar_shadow.png) no-repeat 0% 0px;
        background-size: cover;
        display: none;    
    }

    .index-nav li.parent:hover > ul, .index-nav li.parent:focus > ul {
        visibility: hidden;
        display: none;

    }

    /**** tables ****/
    .simple-table td, .simple-table th {
        padding: 10px 4px;
    }

    .simple-table th{
        font-size: 13px;
    }


    /****USER***/
    #progress{
        width: 100%!important;
    }


    /****** ABOUT ******/
    .about-block .about-text{
        width: 100%;
    }


    /**** FORM ***/
    a.button span, div.button span,.callout-btn span{
        white-space: normal;
    }

    form .form-list li label{
        width: 100%!important;
        margin-bottom: 3px;
    }

    .form-list li.textarea textarea {
        width: 100%;
        box-sizing: border-box;
    }

    #conference_participant_role_form_holder #form_role table, 
    #conference_participant_gender_form_holder #form_gender table,
    #conference_participant_race_ethnicity_form_holder #form_race_ethnicity table
    {
        width: 100%!important;
    }

    #conference_participant_role_form_holder #form_role label, 
    #conference_participant_gender_form_holder #form_gender label,
    #conference_participant_race_ethnicity_form_holder #form_race_ethnicity label{
        width: 88%!important;
    }

    #form_general #form_general_status,
    #form_jobs #contact_city,
    #form_publications #title,
    #form_publications #publisher,
    #form_biography #bio_textarea .wysiwyg,
    #wcc_action_select_area select
    {
        width: 280px!important;
        box-sizing: border-box;
    }


    /***callouts*/
    .callout-dark, .callout-light {
        padding: 18px 26px 18px 20px;
    }

    .callout-btn > span{
        padding: 0 14px;
    }

}

@media screen and (max-width: 480px) {

    .blue-menu-fixed {
        position: fixed;
        bottom: 0;
        left: 5px;
        right: 5px;
        width: auto;        
        display: block;
        min-width: 310px;
    }    

    .blue-menu .misc a{
        font-size: 14px;
        padding: 0px;
        width: 50%;
        text-align: center;
    }

    .blue-menu .misc .small-hide-link{
        /*display: none;*/
    }

    .footer {
        padding-bottom: 60px;
    }    
    
}