@media screen and (max-width: 1200px) {
    #header .navigation{float:left; width: 100%; padding:10px 0 0 0; border-top:solid 1px #e6eaee; margin-top: 10px;}
    #header .navigation ul li:first-child{border-left:0px; padding-left: 0px;}
}
@media screen and (max-width: 1199px) {
    .wizard-contents .crack-growth-curve .btn-group.actions{display: block;}
    .wizard-contents .crack-growth-curve .btn-group.actions .btn{margin: 0px; min-width: inherit; width:48%;}
    .wizard-contents .crack-growth-curve .btn-group.actions .btn:last-child{margin-left: 2%;}
    .wizard-contents .stress-concentration-factor .btn-group.actions{display: block;}
    .wizard-contents .stress-concentration-factor .btn-group.actions .btn{min-width:inherit; width:48%;}
    .wizard-contents .stress-concentration-factor .btn-group.actions .btn:last-child{margin-left: 2%;}
    
    .wizard-contents .secondary-stress .nav-tabs.nav-justified{display: block;}
    .wizard-contents .secondary-stress .nav-tabs.nav-justified > li{display:block; width:100%; border:0px;}
}
@media screen and (max-width: 991px) {
    #header{margin-bottom: 10px;}
    #header .navigation > ul > li{padding-left:20px; font-size:14px;}
    #header .navigation > ul > li > a{padding-right:18px;}    
    #header .user-area > li.user .dropdown-menu{left:auto; right:0px;}
    #header .user-area > li.user .dropdown-menu:after{left:auto; right:25px;}
    #header .user-area > li.user{padding-right:7px;}

    .wizard-contents .crack-growth-curve2 .table{margin-bottom: 20px;}
    .wizard-contents .crack-growth-curve2 .top-area{margin-bottom: 0px;}
    .wizard-contents .crack-growth-curve2 .top-area .text-right{text-align: left; padding-top: 15px;}
    
    .wizard-contents .crack-growth-curve2 .table{margin: 20px 0px;}
    .wizard-contents .crack-growth-curve2 .table thead{display: none;}
    .wizard-contents .crack-growth-curve2 .table tbody tr{border:solid 1px #CCC; padding:15px 15px 10px 15px; display: block; margin-bottom: 13px;}
    .wizard-contents .crack-growth-curve2 .table tbody tr:last-child{margin-bottom:0px;}
    .wizard-contents .crack-growth-curve2 .table tbody td{display: block; text-align: left; position: relative; padding-left:60%;}
    .wizard-contents .crack-growth-curve2 .table tbody td:after{content: ""; position: absolute; top: 7px; left:0px; width:40%; font-weight: 600; font-size:14px;}
    .wizard-contents .crack-growth-curve2 .table tbody td:first-child:after{content:"Stage"}
    .wizard-contents .crack-growth-curve2 .table tbody td:nth-child(2):after{content:"Histogram"}
    .wizard-contents .crack-growth-curve2 .table tbody td:nth-child(3):after{content:"Stage Duration (yrs)"}
    .wizard-contents .crack-growth-curve2 .table tbody td:nth-child(4):after{content:"Paris Curve"}
    .wizard-contents .crack-growth-curve2 .table tbody td:nth-child(5):after{content:"Time step for growth calculation (ys)"}
    .wizard-contents .crack-growth-curve2 .table tbody td:nth-child(6):after{content:"Display every nth calculation step"}
    .wizard-contents .crack-growth-curve2 .table tbody td:last-child:after{content:"Time step for growth calculation (ys)"}
    
    .wizard-contents .analysis-results .table{margin-bottom: 0px;}
    .wizard-contents .analysis-results .table thead{display: none;}
    .wizard-contents .analysis-results .table tbody tr{border:solid 1px #CCC; display: block; margin-bottom: 13px; padding:15px 15px 10px 15px;}
    .wizard-contents .analysis-results .table tbody tr:last-child{margin-bottom: 0px;}
    .wizard-contents .analysis-results .table tbody td{display: block; text-align: left; position: relative; padding-left:60%;}
    .wizard-contents .analysis-results .table tbody td:after{content: ""; position: absolute; top: 7px; left:0px; width:40%; font-weight: 600; font-size:14px;}
    .wizard-contents .analysis-results .table tbody td:first-child:after{content:"Length/Depth Ratio, (2c/a)"}
    .wizard-contents .analysis-results .table tbody td:nth-child(2):after{content:"Max, Depth,a(mm)"}
    .wizard-contents .analysis-results .table tbody td:nth-child(3):after{content:"Max, Depth,2c(mm)"}
    .wizard-contents .analysis-results .table tbody td:nth-child(4):after{content:"Fracture Ratio, Kr"}
    .wizard-contents .analysis-results .table tbody td:nth-child(5):after{content:"Stress Intensity Factor, Ki (N/mm3/2)"}
    .wizard-contents .analysis-results .table tbody td:nth-child(6):after{content:"Load Ratio, Lr"}
    .wizard-contents .analysis-results .table tbody td:last-child:after{content:"Reference Stress (MPa)"}
}
@media screen and (max-width: 550px) {
    .wizard-contents .analysis-results .table tbody td:after{width:100%;}
    .wizard-contents .analysis-results .table tbody td{padding-left:0px; padding-top:30px;}
    
    .wizard-contents .crack-growth-curve2 .table tbody td:after{width:100%;}
    .wizard-contents .crack-growth-curve2 .table tbody td{padding-left:0px; padding-top:30px;}
}
@media screen and (max-width: 850px) {
    #footer-fixed .btn-group .btn {font-size:12px}
}
@media screen and (max-width: 767px) {
    #main-contents-wrapper{padding-bottom: 20px; padding-top:0px;}
    
    #header{margin-bottom: 10px;}
    #header .navigation > ul > li{padding-left:20px; font-size:14px;}
    #header .navigation > ul > li > a{padding-right:20px;}    
    #header .user-area > li.user .dropdown-menu{left:auto; right:0px;}
    #header .user-area > li.user .dropdown-menu:after{left:auto; right:25px;}
    #header .user-area > li.user{padding-right:7px;}
    
    .steps-wrapper{padding:4px 10px; background:white; border:solid 1px #e1e1e1; margin: 0px 0px 58px 0px;}
    .steps-wrapper .progress-bar{display: none;}
    .steps-wrapper ul{position: relative;}
    .steps-wrapper ul li{line-height: 100%;}
    .steps-wrapper ul li span{width:39px; height: 39px; position: relative; border-radius:39px; background-size:39px 117px; background-position: center -39px; background-color:white; border-color:white;}
    .steps-wrapper ul li desc{display:none; position: absolute; top: 55px; color:#009bdb; font-size:15px; left: 0px; width:100%; background: white; border:solid 1px #e1e1e1; padding:10px; text-align: center;}
    .steps-wrapper ul li.active span{background-color:white; border-color:white; background-position:center -78px;}
    .steps-wrapper ul li.current span{background-color:#009bdb; border-color:#009bdb; background-position:center 0px;}
    .steps-wrapper ul li.current span:after{content: ""; width:12px; height:12px; transform: rotate(45deg); border-left:solid 1px #CCC; border-top:solid 1px #CCC; z-index: 100; position: absolute; bottom: -23px; left:50%; margin-left: -5px; background:white;}
    .steps-wrapper ul li.current desc{display: block;}
    
    .projects-list .btn-group .btn{margin-left: 10px; font-size:13px;}
    .projects-list .btn-group:after{clear: both; display: block; content: "";}
    .projects-list .btn-group{display: block; margin-bottom: 20px;}
    
    .wizard-contents{margin-bottom: 10px;}
    
    .wizard-contents .secondary-stress .nav-tabs.nav-justified{display: table;}
    .wizard-contents .secondary-stress .nav-tabs.nav-justified > li{display:table-cell; width:auto; border-right:solid 1px #CCC;}
    
    .nav-tabs.nav-justified > li a{margin-bottom: 0px;}
    
    #footer .text-left{text-align: center; margin-bottom: 20px;}
    #footer .text-right{text-align: center;}
    
    .projects-list .table thead{display: none;}
    .projects-list .table tbody td{display: block; text-align: left; position: relative; padding-left:40%;}
    .projects-list .table tbody td:after{content: ""; position: absolute; top: 8px; left:0px; width:40%; font-weight: 600; font-size:14px;}
    .projects-list .table tbody td:first-child:after{content:"Select"}
    .projects-list .table tbody td:nth-child(2):after{content:"File Name"}
    .projects-list .table tbody td:nth-child(3):after{content:"Rename"}
    .projects-list .table tbody td:nth-child(4):after{content:"Modified Date"}
    .projects-list .table tbody td:nth-child(5):after{content:"Progress"}
    .projects-list .table tbody td:nth-child(6):after{content:"Download"}
    .projects-list .table tbody td:last-child:after{content:"Delete"}
    
    .projects-list .table tr th:nth-child(3),
    .projects-list .table tr td:nth-child(3),
    .projects-list .table tr th:nth-child(5),
    .projects-list .table tr td:nth-child(5),
    .projects-list .table tr th:nth-child(6),
    .projects-list .table tr td:first-child,
    .projects-list .table tr td:nth-child(6),
    .projects-list .table tr th:last-child,
    .projects-list .table tr td:last-child{
        text-align: left;
    }
    .projects-list .table tbody tr{border: solid 1px #CCC; display: block; padding: 15px 15px 10px 15px; margin-bottom: 13px;}
}
@media screen and (max-width: 660px) {
    .steps-wrapper{margin-top: 68px;}
    
    .header-wrapper{min-height: 68px;}
    .header-wrapper.has-steps{min-height: 185px;}
    .header-wrapper.has-steps #header{margin-bottom: 10px;}
    .header-wrapper .header-inner{position: fixed; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; top: 0px; left:0px; width: 100%; z-index: 1000; background: white; border-bottom: solid 1px #DDD; box-shadow:0px 7px 10px rgba(0,0,0,0.10);}
    #header{padding: 15px 0px; position: relative; margin-bottom: 0px;}
    #header .pull-left{float:none; width:100%; position: relative; text-align: center; margin-bottom: 0px; padding-top:2px; width:calc(100% - 50px); width:-webkit-calc(100% - 50px); width:-moz-calc(100% - 50px)}
    #header .mobile-nav-icon{position: absolute; display: block; top: 10px; left:0px; margin-left: 0px; width:25px; height: 20px; background: white;}
    #header .mobile-nav-icon span{height: 4px; background: #000; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; width:100%; position: absolute; top: 0px; left: 0px; display: block; z-index: 100;}
    #header .mobile-nav-icon span:nth-child(2){top:8px;}
    #header .mobile-nav-icon span:last-child{top:16px;}
    #header .mobile-nav-icon.open span:nth-child(2){opacity: 0;}
    #header .mobile-nav-icon.open span:first-child{transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); top:7px;}
    #header .mobile-nav-icon.open span:last-child{transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); top:7px;}    
    #header .navigation{width:300px; padding:0px; box-shadow:5px 0px 7px rgba(0,0,0,0.20); transition: all 0.3s ease; left: -300px; margin-top: 0; border:0px; position: fixed; top:0px; height: 100%; background: rgba(255,255,255,0.90); z-index: 100000; float:none;}
    #header .navigation > ul > li:first-child{padding-left:15px;}
    #header .navigation > ul > li.settings{display: block;}
    #header .navigation > ul > li{text-align: left; display: block; padding: 15px; border-bottom: solid 1px #CCC;}
    #header .navigation > ul > li:hover{background: #DDD;}
    #header .navigation .dropdown-menu.options{max-width:100%; width:100%;}
    #header .user-area > li.user .icon{margin: 0px;}
    #header .user-area > li.user{border-right: 0px; margin: 0px;}
    #header .user-area > li.settings{display: none;}
    
    #main-contents-wrapper{padding-top:15px}

    .toggle-mobile-menu{overflow-x:hidden;}
    .toggle-mobile-menu .header-wrapper .header-inner{left:300px;}
    .toggle-mobile-menu #header .navigation{left:0px;}
    .toggle-mobile-menu #main-wrapper{left:300px;}
    
    .header-wrapper.sticky .steps-wrapper{margin-bottom: 11px;}
    .header-wrapper.sticky .steps-wrapper ul li.current span:after{display: none;}
    .header-wrapper.sticky .steps-wrapper ul li desc{display: none;}
}
@media screen and (max-width: 500px) {
    .projects-list .btn-group .btn{margin:0 0 10px 0; width:100%; text-align: left; padding:5px 10px;}
    .projects-list .btn-group .btn:last-chld{margin-bottom: 0px;}
    
    .wizard-contents .secondary-stress .nav-tabs.nav-justified{display: block;}
    .wizard-contents .secondary-stress .nav-tabs.nav-justified > li{display:block; width:100%; border:0px;}
    
    #footer .text-left{margin-bottom: 10px;}
    #footer .text-left ul li{font-size:12px; margin-bottom: 10px;}
    #footer .text-right{font-size:12px;}
    
    #main-wrapper{padding-bottom: 20px;}
    
    .projects-list .table tbody td:after{width:100%;}    
    .projects-list .table tbody td{padding-left:0px; padding-top:30px;}
}
@media screen and (max-width: 400px) {
    #header .navigation{width:250px; padding:0px; left:-250px;}
    .toggle-mobile-menu .header-wrapper .header-inner{left:250px;}
    .toggle-mobile-menu #main-wrapper{left:250px;}
}