@charset "UTF-8";
/* CSS Document */

@media (max-width: 450px) {  
  
  #resizer{ height: 50%; }

  /* menu */ 
  
  #mobile_menu_bar{ 
    display: block;
    pointer-events: all; 
    z-index: 11;
    position: fixed;
    bottom: 0;
    left: 0;
  } 

  #mobile_menu{
    display: block;
    position: fixed;
    left: 0;
    top: 100%;
    height: 100%;
    width: 100%;
    z-index: 24; 
  }

  .show_menu #mobile_menu{ top: 0; }

  #mobile_menu_ul{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%; 
    display: flex;
    flex-direction: column;
    justify-content:center;
    font-size: 20px;
    line-height: 40px;
    text-align: center; 
    z-index: 24; 
    border-top-right-radius: 20px; 
    border-top-left-radius: 20px; 
  }
  
  .content h1 { font-size: 24px; line-height: 1.3em; } 
  .content h2 { font-size: 18px; line-height: 1.3em; margin-top: 10px;  } 

  
  #mobile_menu_ul .menu_item{
    height: 50px;
    line-height: 50px;
    font-size: 21px;
    font-weight: 200;
  }

  #mobile_menu_out{
    width: 100%;
    height: 100%;
    z-index: 23;   
  }

  #mobile_menu_x{
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 0;
    left: 0; 
    cursor: pointer;
    z-index: 24;
  }
	
  /* overrides */

  .title{ 
    width: 100%;
    font-size: 28px;
    line-height: 34px; 
  }

  .subtitle{ 
    width: 100%;
    font-size: 18px;
    line-height: 24px; 
  }

  .text{
    font-size: 18px;
    line-height: 24px; 
  }
 
  .option{
    font-size: 18px;
    line-height: 24px;  
  } 

  .narrative_bt{
    margin:30px 0;
  }

  .user_score_li{
    font-size: 15px;
  }  
  
  #user_score_message{ font-size: 22px; } 

  .option .icon{ height: 24px; } 
  .input_module { padding: 24px 0; }

  .content{ 
    font-size: 18px;
    padding-top: 0 
  }
    
  #modal{
    top: 60px;
    height: calc(100% - 120px);
  }

  #modal_top{
    height: 60px;
    line-height: 60px;
  }
  
  #modal_x{
    width: 60px;
    height: 60px;
  }
  
  #menu_bt{ display: block; }
  #journey_bt{ display: block; }
  #top_menu{ display: none; }   

  #top_bar, #top_bar.start{ height: 60px; }
  #journey{ margin: 50px auto; }

  .bottom_bar{ height: 60px; }
 
  #help_nav{
    width: 100%;
    height: 60px;
  } 
  
  .help_image{ height: 300px; }
  
  #help_pos{
    height: 60px;
    line-height: 60px;
  }

  .small_bt{
    max-width: 100%;
    margin-left: 0;
  }

  .help_nav_bt{
    width: 60px;
    height: 60px;
  }

  #modal_icon{
    width: 60px;
    height: 60px;
  }

  #modal_bottom{
    height: 60px;
  }

  #save_bt{
    height: 40px;
    line-height: 40px;
    max-width: 90%;
    font-size: 16px;
  }

  #credits_logos{ height: 75px; } 
  #menu_lb{ line-height: 60px; } 
  #options{ height: 60px; bottom: -25px; } 
  #options.show{ bottom: 60px; } 
  .option_li{ height: 60px; line-height: 60px;}
    
  #journey_bt_label{ 
    top: 10px;
  }
  
  #help_bt{ width: 100px; }
  #journey_bt{ width: 100px; }

  #back_bt{ 
	  height: 30px;
    line-height: 30px;  
    padding:0 15px 0 40px; 
    left: 10px;
  }

  .side_tech_li{
    font-size: 14px;
    line-height: 24px;
    padding-left: 0;
  }

  .side_tech_li .number{
    font-size: 12px;
  }
  
.side_tech_li .trl{
  font-size: 12px;
}

.narrative_radar{
  height: 300px;
}

.story_summary br{
	display: none;
}
  

  #card_x{
    top: -60px;  
    right: 0;  
  }

  #ev_logo{ width: 60px; }
  #client_badge{ width: 60px; } 
  
  #credits_list .name{ font-size: 16px; } 
  #credits_list .role{ font-size: 11px; } 

  .start #ev_logo{ left: 0; transform: scale(1); }
  .start #client_badge{ right: 0; transform: scale(1); }

  .image_html{ font-size: 5px; line-height: 8px; }
  .image{ padding-top: 75%; } 
  
  #top_title{	text-align: center; }
  #top_subject{	text-align: center; } 
     
  #top_subtitle{	
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    width: 100%;
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-size: 10px; 
    text-transform: uppercase;
    /* background: #f0f; */
  }

  #card_x{
    width: 60px;
    height: 60px;
  }

  #intro{ 
    padding: 40px 20px; 
    font-size: 18px; 
    line-height: 24px; 
  } 

  .left .story_data, .right .story_data{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 85%;
    margin: auto; 
    height: 100%; 
  }

  .cover_image{ width: 100%; }
  .story_section .fog{ display: none; }
  .story_section .fog_m{ display: block; }

  .left .story_data{ left: 0; }
  .right .story_data{ left: 0; }

  #cover_title{ font-size: 40px; }
  #cover_author{ font-size: 16px; }

  #credits_list .credit.full{ 
    margin-bottom: 50px; 
    height: auto;
  }

  #credits_list .credit.full .photo{  
    width: 100%;
    position: relative;
    margin-bottom: 20px;
  } 
  
  #credits_list .credit.full .credit_data{   
    width: 100%;
    position: relative;
    left: 0;
  }

  .credit_logo{ background-size: 70%;}

  #footer{ height: 470px; padding-bottom: 70px;}

  .footer_cell{
    width: 85%; 
    position: relative;
    margin: auto;
    height: 200px;
  } 
  
  #help_bt { padding-right: 50px; }
  #help_bt_icon{ right:10px; }

  #save_bt{ 
    font-size: 10px;
    width: 200px;
  } 

  #footer_logo{ top: 30px; } 
  #footer_about{ top: 70px; width: 100%; padding-right: 0; } 
  #footer_contact{ top:160px; bottom: 0;}

  .footer_nav{ padding-top: 30px; }
  
 

}