




/*
     FILE ARCHIVED ON 5:38:00 Apr 16, 2016 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 18:42:22 May 6, 2016.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/** Ultima CSS Reset **/
fieldset,img,abbr,iframe,hr{border:0}

.unstyled { list-style-type: none }

/* DEFAULT FONT(s) */
body, p {
  font-family: 'Open Sans', sans-serif;
  color:#585858;
  font-size: 15px;
  line-height: 1.64;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  font-size: 17px;
}
h1, h2, h3, h4, h5, h6, p, span, li, a, label{font-family: 'Open Sans', sans-serif; color: #585858; font-weight:normal; -webkit-font-smoothing: antialiased;}

ul{-webkit-padding-start: 0px;}




/* Row/Column Tweaks */
div.row.nomarg {margin: 0px;}
div.nopad {padding: 0px!important;}

/* Body/wrapper/footer Tweak*/
body, html {height: 100%;}
.wrapper {
  min-height: 100%;
  margin-bottom: -195px; 
}
.wrapper:after {
  content: "";
  display: block;
}
#footer, .wrapper:after {
  height: 195px;
}
/* -----------------------------------------------------------
        ------ DESK HEADER STYLES ------
----------------------------------------------------------- */
  #header {background: #3498db;}
  #header .container {padding:40px 15px;}

  #header h1.logo {
    margin: 0px;
  }
  #header h1.logo a{
    color: #fff;
    font-weight: normal;
    font-size: 30px;
  }
  #header h1.logo:hover a{
    text-decoration: none;
  }

  #header ul.nav.nav-pills {
    margin: 0px;
    float: right;
  }

  #header ul.nav.nav-pills li {
    margin-right: 14px;
    display: inline;
  }

  #header ul.nav.nav-pills li p{
    color: #fff;
    font-size: 14px;
    border: none;
    padding: 10px 16px;
    margin: 0px;
  }

  #header ul.nav.nav-pills li a{
    color: #fff;
    font-size: 14px;
    border: 2px solid #7ac4f4;
    padding: 7px 16px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;

    -webkit-transition: ease all 0.5s;
    -o-transition: ease all 0.5s;
    transition: ease all 0.5s;
  }
  #header ul.nav.nav-pills li:hover a{
    color: #fff;
    background: none;
    border-color: #fff;
  }

  /* Lanague Dropdown */
  #header .langslct { 
    color: #fff;
    font-size: 14px;
    border: 2px solid #7ac4f4;
    padding: 7px 16px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-transition: ease all 0.5s;
    -o-transition: ease all 0.5s;
    transition: ease all 0.5s;
  }

  #header .langslct.langslctHover {
  /* Styles for when the select box is hovered */
      background: none;
      border-color: #fff;
  }

  #header .langslct.langslctOpen {
  /* Styles for when the select box is open */
      background: none;
      border-color: #fff;
  }

  #header .langslct.langslctFocus {
  /* Styles for when the select box is in focus */
      background: none;
      border-color: #fff;
  }

  #header .langslct > .langslctInner{
    color: #fff;
    width: auto!important;
  }
  #header .langslct i {
    margin-left: 5px;
  }

/* -----------------------------------------------------------
        ------ DESK SEARCH STYLES ------
----------------------------------------------------------- */
  #search {
   background: #f6f6f6;

  }
  #search .container {
    padding: 42px 0px;
  }
  #search #q {
    background: white;
    font-weight: 300;
    font-size: 24px;
    padding: 15px 30px;
    width: 100%;
    border:2px solid #dadada; 
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    height: 60px;
  }
  #search #support-search-submit {
    color:#8b8b8b;
    background: none;
    border:  none;
    font-size: 24px;
    position: absolute;
    right: 35px;
    top: 20px;
    z-index: 999;
  }
  #search #support-search-submit:hover, #search input[type=submit]:hover, #search button:hover{
    background: none;
    color: #585858;
  }
  #search input[type=submit]:hover,#search input[type=submit]:focus, 
  .btn.btn-primary:hover,#search button:hover,#search button:focus {
   opacity: 1;
  }
  #search input#q:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  ::-webkit-input-placeholder {
     color: #8b8b8b;
     font-weight: 300;
     transition: opacity 0.25s ease; 
  }

  :-moz-placeholder { /* Firefox 18- */
     color: #8b8b8b;  
      font-weight: 300;
     transition: opacity 0.25s ease; 
  }

  ::-moz-placeholder {  /* Firefox 19+ */
     color: #8b8b8b;
      font-weight: 300;
     transition: opacity 0.25s ease; 
  }

  :-ms-input-placeholder {  
     color: #8b8b8b;
      font-weight: 300;
     transition: opacity 0.25s ease; 
  }

  [placeholder]:focus::-webkit-input-placeholder {
    transition: opacity 0.25s ease; 
     font-weight: 300;
    opacity: 0.33;
  }

  .desk-index-subheader.span12 {
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #FFFFFF !important;
  }
/* -----------------------------------------------------------
          ------ SEARCH AUTO COMPLETE STYLES ------
----------------------------------------------------------- */
  .ui-widget {
    background: #333;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: none;
    border-top-left-radius: 0; 
    border-top-right-radius: 0; 
    margin: 0;
  }
    
  .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
  }
    
  .ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active {
    margin: 0;
  }
   
  .ui-menu .ui-menu-item:hover {
   background-color: #F3F5F3; 
  }
   
  .article-autocomplete-subject {
    display: block;
    font-size: 16px;
    font-weight: normal;
    padding: 10px;
  }
   
  .article-autocomplete-body {
    display: none;
  }
   
  .ui-menu .ui-menu-item {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }



/* -----------------------------------------------------------
                ------ BREADCRUMB STYLES ------
----------------------------------------------------------- */
  #breadcrumbs {
    background: none;
  }
  #breadcrumbs > .container {
    padding: 40px 15px 44px 15px;
  }
  #breadcrumbs > .container > .row {
    
  }
  #breadcrumbs ol.breadcrumb {
    margin: 0px;
    background: none;
    padding: 0px;
  }
  #breadcrumbs ol.breadcrumb li {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
  }
  #breadcrumbs ol.breadcrumb li a {
    color: #3498db;
  }
  #breadcrumbs ol.breadcrumb > li + li:before {
    content:"\003e";
  }
  #breadcrumbs ol.breadcrumb > li.pull-right:before{
    content:"";
  }
/* -----------------------------------------------------------
                ------ SIDEBAR STYLES ------
----------------------------------------------------------- */
  #sidebar {}
  #sidebar > h2 {
    margin: 0px;
    font-weight: 600;
    font-size: 28px;
  }
  #sidebar > ul {
    border-radius: 10px;
    list-style: none;
    background: #f6f6f6;
    padding: 0px 15px;
    margin: 60px 0px;
  }

  #sidebar > ul > li{
    text-transform: uppercase;
    border-bottom: 2px solid #e2e2e2;
  }
  #sidebar > ul > li:last-child{
    border-bottom: none
  }

  #sidebar > ul > li > a{
    color: #3498db;
    padding: 20px 0px; 
    display: block; 
    font-size: 14px; 
    font-weight: 600;
  }
  #sidebar > ul > li.phone > a{
    color: #333;
  }

  #sidebar > ul > li > a > i {
    float: right;
    color: #c5c5c5;
    margin-right: 10px;
    font-size: 20px;
  }

  #sidebar > ul > li:hover a {

  }
  #sidebar > ul > li:hover i {
    color: #e2e2e2;
  }
 
  /* AUTO SUGGESTION */
  .autosuggest > ul {
    list-style: none;
    background: none;
    padding: 0px;
    margin: 20px 0px;
  }

  .autosuggest > ul > li{
    text-transform: uppercase;
    border-bottom:none;
    padding-right: 15px;
  }
  .autosuggest > ul > li > a{
    color: #3498db;
    padding: 20px 0px 20px 15px; 
    display: block;

  }
  .autosuggest > ul > li > a > span {
    color: #3498db;
    font-size: 14px; 
    font-weight: 500;
    text-overflow: ellipsis; word-wrap: break-word; white-space: nowrap; overflow: hidden;
    display: inline-block;
    width: 80%;
  }
  .autosuggest > ul > li:nth-child(odd) {
    background: #f6f6f6;
  }
  .autosuggest > ul > li:nth-child(even) {
    background: none;
  }

  .autosuggest > ul > li > a > i {
    float: right;
    color: #c5c5c5; 
    margin-right: 10px;
    font-size: 20px;
  }

  .autosuggest > ul > li:hover a {
    
  }
  .autosuggest > ul > li:hover i {
    color: #e2e2e2;
  }


/* -----------------------------------------------------------
        ------ DESK CONTENT STYLES ------
                site/portal wide
----------------------------------------------------------- */
  #content {
    background: #fff;
  }
  #content .container {
    padding: 0px 15px 130px;
  }
  .container .header h2 {
    margin: 0px;
    color: #585858;
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 28px;
    line-height: 1;
  }
  #content > .container > .row > .col-md-8 {
    padding-left: 0px;
    padding-right: 30px;
  }
    #content > .container > .row > .col-md-4{
      padding-left: 45px;
      padding-right: 0px;

    }
  .container .body.row {
    padding-top: 40px;
  }
  span.gravatar,
  .gravatar{
      display: block;
      width: 50px;
      height: 50px;
      overflow: hidden;
      -webkit-border-radius: 24px;
      -moz-border-radius: 24px;
      border-radius: 24px;
    }

  /* DEFAULT BTN STARTING POINTS */
  a.btn,
  input.btn {
    font-size: 14px;
    background: none;
    border: 2px solid #5dade2;
    padding: 7px 16px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-transition: ease all 0.5s; 
    -o-transition: ease all 0.5s;
    transition: ease all 0.5s;
  }
  a.btn span {
      color: #3498db;
      border-right: 2px solid #eaeaea;
      padding-right: 10px;
      margin-right: 10px;
      -webkit-transition: ease all 0.5s;
      -o-transition: ease all 0.5s;
      transition: ease all 0.5s;
  }
  .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled], .btn.btn-primary:hover, button:hover {

  }

  #content .container a.btn,
  #content .container input.btn{ 
    color: #3498db;
    border: 2px solid #eaeaea;
    font-weight: 600;
  }
  #content .container a.btn span,
  #content .container input.btn span {
    color: #3498db;
    border-right: 2px solid #eaeaea;
    padding-right: 10px;
    margin-right: 10px;
    font-weight: 600;
  }

  #content .container a.btn:hover,
  #content .container a.btn:hover span,
  #content .container a.btn:hover span,
  #content .container a.btn:hover {
    border-color:#999;
  }
  
  #content .container a.btn:active,
  #content .container a.btn.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
/* -----------------------------------------------------------
                ------ INDEX STYLES ------
----------------------------------------------------------- */
  #content .container.index {
    padding: 15px 15px 130px;
  }


  #content .container.index .header h2{
    margin-bottom: 40px;
    font-weight: 600;
  }
  #content .container.index .desk-topic,
  #content .container.index .desk-qna {
    padding-bottom: 40px;
  }

  #content .container.index .desk-topic + .row.header {background :#0ff;}

  #content .container.index .desk-topic h3,
  #content .container.index .desk-qna h3 {
    padding-bottom: 26px;
    margin-bottom: 24px;
    margin-top: 10px;
    text-transform: uppercase;
    font-size: 17px;
    border-bottom: 2px solid #e1e1e1;
    text-transform: uppercase;
    font-weight: 600;
    text-overflow: ellipsis; word-wrap: break-word; white-space: nowrap; overflow: hidden;
  }
  #content .container.index .desk-topic h3 a,
  #content .container.index .desk-qna h3 a{
    color: #585858;
    text-decoration: none;
  }

  #content .container.index .desk-topic ul,
  #content .container.index .desk-qna ul{
    padding-left: 20px;
    margin-bottom: 36px;
  }
  #content .container.index .desk-topic ul li,
  #content .container.index .desk-qna ul li {
    padding-left: 0px;
    margin-bottom: 18px;
    color: #c6c6c6;
    font-size: 16px;
  }
  #content .container.index .desk-topic ul li a,
  #content .container.index .desk-qna ul li a{
    color: #585858;
  }


  /* LIST STYLE INDEX */
  #content .container.index .desk-topic.list ul,
  #content .container.index .desk-qna.list ul{
    list-style:none;
  }
  #content .container.index .desk-topic.list ul li,
  #content .container.index .desk-qna.list ul li{
    padding: 10px 0px;
    border-bottom: 1px solid #eaeaea;
  }
  #content .container.index .list ul li:hover {
    background: #efefe;
  }
  #content .container.index .list a.btn {
    margin-left: 14px;
    float: right;
  }
  #content .container.index .list h3 {
    margin-bottom: 10px;
    font-size: 1.8em;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
  
/* -----------------------------------------------------------
                ------ TOPIC STYLES ------
            #content .container.topic {} 
----------------------------------------------------------- */
  

  #content > .container.topic > .row > .col-md-8 {
    padding-right: 55px; 
  }  
  #content .container.topic .header .switch .btn {
    float: right;
    margin-left: 10px;
    border-color: #eaeaea;
  }

  #content .container.topic .header .switch .btn.active,
  #content .container.topic .header .switch .btn:hover {
    color: #fff;
    background: #3498db;
    border-color: #3498db;
  }

  #content .container.topic .body .qna,
  #content .container.topic .body .article {
    border-top: 2px solid #eaeaea;
    padding: 40px 0px;
  }
  #content .container.topic .body .qna h3,
  #content .container.topic .body .article h3 {
    margin: 0px 0px 14px 0px;
  }
  #content .container.topic .body .qna h3 a,
  #content .container.topic .body .article h3 a {
    color: #585858;
  }
  #content .container.topic .body .qna p,
  #content .container.topic .body .article p {
    margin-bottom: 18px;
  }

/* -----------------------------------------------------------
                ------ SEARCH STYLES ------
              #content .container.search {}
----------------------------------------------------------- */
   #content > .container.search > .row > .col-md-8 {
      padding-right: 55px;
    }
  #content .container.search .result.row{}

  #content .container.search .noresults.row{}


  #content .container.search .result.question,
  #content .container.search .result.article {
    border-top: 2px solid #eaeaea;
    padding: 40px 0px;
  }
  #content .container.search .result.question:first-child,
  #content .container.search .result.article:first-child {
    border: none;
  }

  #content .container.search .result.question h3,
  #content .container.search .result.article h3 {
    margin: 0px 0px 14px 0px;
  }
  #content .container.search .result.question h3 a,
  #content .container.search .result.article h3 a {
    color: #585858;
  }
  #content .container.search .result.question p,
  #content .container.search .result.article p {
    margin-bottom: 18px;
  }


/* -----------------------------------------------------------
                ------ ARTICLE STYLES ------
                #content .container.article {}
----------------------------------------------------------- */
  #content .container.article {}

  #content .container.article .header.row h2 {}

  #content .container.article .body.row {
    padding-bottom: 60px;
    max-width: 100%;
    height: auto !important;
  }
  #content .container.article .body.row > div{
    max-width: 100%;
    height: auto !important;
  }
  #content .container.article .body.row,
  #content .container.article .body.row p{

  }
  #content .container.article .body.row img {
    padding: 10px;
  }
  #content .container.article .body.row ul{

  }
  #content .container.article .body.row ul li {

  }
  div.rateblock.row {
    margin: 0px;

  }
  div.rateblock > div{
    padding: 50px 10px;
    border-top: 2px solid #ebeced;
    border-bottom: 2px solid #ebeced;
  }
  div.rateblock p {
    color:#585858;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 10px;
  }
  #rate_article span {
    display: none; /* Remove to display vote snippets */
  }

  #rate_article a{
      color: #65bc9c;
      font-size: 14px;
      border: 2px solid #65bc9c;
      padding: 8px 24px;
      margin: 0px;
      float: left;
      font-weight: 600;
      margin-right: 12px;
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius: 50px
  }
  #rate_article .rate-link-down a {
    color: #b85252;
    border-color: #f19595;
  }

  #rate_article a:hover {
    background:#65bc9c;
    color: #fff;
    text-decoration: none;
  }
  #rate_article .rate-link-down a:hover{
    background:#f19595;
    color: #fff;
    text-decoration: none;
  }
/* -----------------------------------------------------------
                ------ SOCIAL STYLES ------
----------------------------------------------------------- */
  #content .container.article .row.footer{
    padding-top: 60px;
  }
  #content .container.article .row.footer p.updated {
    text-transform: uppercase;
    color: #999999;
    font-size: 16px;
  }

  ul.social {
    list-style: none;
  }
  ul.social li{
    float: left;
  }
  ul.social li.btn-facebook{
    margin-right: 35px;
  }
  ul.social li iframe,
  ul.social > li > div {
    vertical-align: bottom!important;
  }


/* -----------------------------------------------------------
              ------ MY ACCOUNT/PROFILE STYLES ------
----------------------------------------------------------- */
div.container.myaccount {}

/* -----------------------------------------------------------
              ------ MY PORTAL INDEX STYLES ------
----------------------------------------------------------- */
  div.container.myportal {}

  .myportal.index .header {}
  .myportal.index .header ul.case-menu {
    list-style: none;
  }
  .myportal.index .header ul.case-menu li{
    float: left;
    margin-right: 15px;
  }
  .myportal.index .header ul.case-menu li.new{
    float: right;
    margin-right: 0px;
  }
  .myportal.index .header ul.case-menu li.new a{
    background: #3498db;
    color: #fff;
    padding: 10px 15px;
    font-size: 16px;
    margin: 0px;
    font-weight: 400;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
  }
  .myportal.index .header ul.case-menu li.new a:hover {
    background: #353C45;
    text-decoration: none;
    color: #fff;
  }


  /* ACTIVE ONLY CHECKBOX */
  .myportal.index .header ul.case-menu li label{
    float: left;
    margin-top:8px;
    margin-right: 10px;
  }

  .myportal.index .header ul.case-menu li .checkbox input {
      display: none;
  }

  .myportal.index .header ul.case-menu li .checkbox span {
      width: 26px;
      height: 26px;
      display: block;
      background: url('/web/20160416053800/https://desk-customers.s3.amazonaws.com/ocz/img/checkbox.png') no-repeat;
      background-position: 0px 0px;
      float: left;
  }
  .myportal.index .header ul.case-menu li .checkbox input:checked + span {
    background-position: 0px -32px;
  }


  .myportal.index .body{}
  .myportal.index .body.row {
    padding-top: 45px;
  }
  
  /* MY CASES TABLE */
  .myportal.index .body table thead {
    background: #f6f6f6;
    color: #676767;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    border-top: 1px solid #ebeced; 
  }
  .myportal.index .body table thead th {
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: none;
    line-height: 1;
    padding: 20px 10px;
  }
  .myportal.index .body table thead th span {
    font-weight: 600;
    color: #676767;
    font-size: 14px;
  }
  .myportal.index .body table thead th span:after{
    font-family: FontAwesome;
    content: "\f0dc";
    color: #e2e2e2;
    margin-left: 8px;
  }
  .myportal.index .body table thead th.headerSortUp span:after{
    font-family: FontAwesome;
    content:"\f0de";

  }
  .myportal.index .body table thead th.headerSortDown span:after{
    font-family: FontAwesome;
    content:  "\f0dd";
  }
  .myportal.index .body table tbody{
    font-size: 16px;
    font-weight: 400;
    color: #525252;
  }
  .myportal.index .body table tbody tr td{
    border: none;
    line-height: 1;
    padding: 18px 10px;

  }
  .myportal.index .body table tbody tr a{
    color: #3498DB;

  }
  .myportal.index .body table tbody tr:nth-child(odd) > td {
    background: none;
  }
  .myportal.index .body table tbody tr:nth-child(even) > td {
    background: #fafafa;
  }


/* -----------------------------------------------------------
          ------ PUBLIC QUESTION STYLES ------
                 .container.qna
----------------------------------------------------------- */
  

  .container.qna .header h3,
  .container.qna .header h3 span {
    margin: 0px;
    color: #999999;
    font-weight:400;
    font-size: 17px;
  }
  div.container.qna > div.row {margin: 0px;}
  div.container.qna div.body.question hr{
    margin: 55px 0px;
    border: 1px solid #ebeced;
  }
  div.container.qna div.row.header h2{
    margin-bottom: 12px;
  }

  div.container.qna div.row.header.question {
    padding-top: 30px;
  }
  div.container.qna div.header.question div.col-md-1 {
    margin-top: 5px;
  }

  

  /* Answer Styles */
  div.container.qna div.row.header.answers {}
  div.container.qna div.row.body.answer {
    margin: 0px;
  }
  div.container.qna div.row.body.answer.best {
    padding: 30px 0px;
    background: #ffffcc;
    margin: 0px;
  }
  div.container.qna div.row.body.answer div.col-md-1 {
    padding-left: 0px;
  }
  div.container.qna div.row.body.answer h3 {
    margin-top: 0px;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 30px;
  }

  div.container.qna div.row.body.answer h3 small{
    font-size: 17px;
    color: #999;
    font-weight: 400;
  }

  /* Reply Styles */
  div.container.qna div.reply.row {
    padding-top: 60px;
    border-top: 2px solid #efefef;
    margin: 60px 0px 0px 0px;
  }
  div.container.qna div.reply.row h2,
  #content div.container.qna div.row.header.answer h2{
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 20px 0px;
  }
  /* Attachments */
  .container.qna .attachments.row,
  .container.portal .attachments.row > {padding: 20px 0px;}



  /*Ratings */
  .answer-rating a.rate {
    font-size: 18px;
    border: 2px solid #ebeced;
    padding: 2px 18px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
  }
  .answer-rating span.score {
    margin-right: 10px;
  }
  .answer-rating a.rate.increment {
    color: #65bc9c;
  }
  .answer-rating a.rate.decrement {
    color: #e76565;
  }
  .answer-rating a.rate:hover {
    background: #ebeced;
  }






  /* -----------------------------------------------------------
                  ------ MY PORTAL CASE VIEW ------
  ----------------------------------------------------------- */
  div.myportal.case {}

  /* QUESTION/HEADING */
  div.myportal.case .header .col-md-1{
    margin-top: 5px;
  }
  div.myportal.case .header h2{
    margin-bottom: 12px;
  }
  .myportal.case .header h3,
  .myportal.case .header h3 span {
    margin: 0px;
    color: #999999;
    font-weight:400;
    font-size: 17px;
  }
  
  /* CASE STATUS/ATTACHMENTS */

  .myportal.case {}

  .myportal.case .status{
    margin: 60px 0px;
    padding: 30px 0px;
    border: 2px solid #ebeced;
    border-width: 2px 0px;
  }
  .myportal.case .status .stats{
    padding-left: 0px;
  }
  .myportal.case .status table tbody{
    font-size: 16px;
    font-weight: 400;
    color: #000;
  }
  .myportal.case .status table tbody tr td{
    border: none;
    line-height: 1;
    padding: 10px 5px;

  }
  .myportal.case .status table tbody tr:nth-child(odd) > td {
    background: none;
  }
  .myportal.case .status table tbody tr:nth-child(even) > td {
    background: none;
  }

  .myportal.case .status  button,
  .myportal.case .status  input[type="submit"]{
    background: #3498db;
    color: #fff;
    padding: 10px 15px;
    font-size: 17px;
    margin: 0px;
    font-weight: 400;
    float: right;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    border: 0px;
  }
  .myportal.case .status button:hover,
  .myportal.case .status input[type="submit"]:hover {
    background: #353C45;
    text-decoration: none;
    color: #fff;
  }


  /* CASE ANSWERS/REPLIES */
  .myportal.case .answer.row{
    margin: 0px;
  }
  .myportal.case  .answer.row .col-md-1{
    margin-top: 0px;
    padding-left: 0px;
  }
 .myportal.case div.answer.row {
    margin-top: 65px;
  }
 .myportal.case div.answer.row h2,
 .myportal.case div.row.header.answer h2{
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 20px 0px;
  }
 .myportal.case div.row.answer h3.meta {
    margin-top: 0px;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 28px;
  }

 .myportal.case div.row.answer h3.meta small{
    font-size: 17px;
    color: #999;
    font-weight: 400;
  }

  /* REPLY FORM */
  .myportal.case div.reply.row {
    padding-top: 60px;
    border-top: 2px solid #efefef;
    margin: 60px 0px 0px 0px;
  }
  .myportal.case div.reply.row h2{
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 20px 0px;
  }
/* -----------------------------------------------------------
            ------ MY PORTAL/ACCOUNT STYLES ------
----------------------------------------------------------- */
  div.myportal.account {}
  div.myportal.account .myaccount-form img{
    display:none;
  }
  div.myportal.account .myaccount-form {
    font-size: 16px;
    font-weight: 400;
    color: #525252;
  }
  div.myportal.account .myaccount-form i{
    color:#9f9f9f;
    margin: 0px 8px;
  }
  /* EMAIL */
  div.myportal.account .myaccount-form [id^="email_"] {
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
    padding: 15px 10px;
  }
  div.myportal.account .myaccount-form .confirmed {
    background: #fafafa;
    padding: 15px 10px;
  }
  div.myportal.account .myaccount-form  div[id^="email_"] span.verify_sent_at {
    display: none;
  }
  div.myportal.account .myaccount-form  div[id^="email_"] .verified input {
    border: none;
    background: none;
    font-size: 16px;
    font-weight: 400;
    color: #3498db;
    padding: 0px;
    margin-top: -3px;
  }
  div.myportal.account .myaccount-form div[id^="email_"] > div.verified{
    float: right;
    color: #9f9f9f;
    margin-right: 15px;
  }
  div.myportal.account .myaccount-form .confirmed > div.verified:before{
    content: "\f00c";
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    color:#65BC9C;
  }

  div.myportal.account .myaccount-form div[id^="email_"] > .email_delete{
    float: right;
    float: right;
    margin-top: -3px;
  }
  div.myportal.account .myaccount-form .email_delete input{
    border: none;
    background: none;
    font-size: 16px;
    font-weight: 400;
    color: #999;
    max-height: 26px;
  }

  /* TWITTER */
  div.myportal.account .myaccount-form [id^="twitter_"] {
    background: #fafafa;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
    padding: 15px 10px;
    position: relative;
  }
  div.myportal.account .myaccount-form div[id^="twitter_"] > .verified .verify-checked{
    position: absolute;
    right: 10px;
    top: 15px;
    color: #9f9f9f;
  }
  div.myportal.account .myaccount-form div[id^="twitter_"] > .verified .verify-checked:before{
    content: "\f00c";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    color:#65BC9C;
  }

  /* FACEBOOK */
  div.myportal.account .myaccount-form [id^="facebook_"] {
    background: #fafafa;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
    padding: 15px 10px;
    position: relative;
  }
  div.myportal.account .myaccount-form div[id^="facebook_"] > .verified {
    position: absolute;
    right: 10px;
    top: 15px;
    color: #9f9f9f;
  }
  div.myportal.account .myaccount-form div[id^="facebook_"] > .verified:before{
    content: "\f00c";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    color:#65BC9C;
  }


  /* NEW EMAIL ADDY */
  .new_customer_contact_email {
    padding: 40px 0px;
    border-bottom: 2px solid #eee;
    min-height: 122px;
  }
  .new_customer_contact_email input {
    max-width: 400px;
    float: left;
  }
  .new_customer_contact_email button {
    color: #fff;
    background: #3498db;
    padding: 5px 10px;
    float: left;
    border: none;
    min-height: 44px;
    margin-left: 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
  }
  .new_customer_contact_email button:hover{
    background: #353c45;
  }
  /* ADD ACCOUNTS */
  #add_facebook,
  #add_twitter {
    padding: 30px 0px;
    border-bottom: 2px solid #eee;

  }
/* -----------------------------------------------------------
                ------ FORM STYLES ------
----------------------------------------------------------- */
  .container.email .header h2,
  .container.qna .header h2,
  .container .header h2,
  .container .header h2,
  .container .header h2 {

  }
    .panel-default {
    border: 2px solid #e9e9e9;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    border-radius: 12px;
  }
  .panel-default .panel-body,
  .panel-default .panel-footer {
    padding: 22px;
  }

  label {font-weight: 400; color: #525252; font-size: 17px;}
  .panel input {margin-bottom: 10px;}

  #recaptcha_widget_div {
    background: #f5f5f5;
    padding: 10px;
  }


  div.upload { 
    position: relative;
    overflow: hidden;
    margin: 10px;
    color: #fff;
    font-weight: 400;
    text-shadow: none;
    float: left;
    font-size: 14px;
  }
  div.upload h2 {
    font-weight: 400;
    font-size: 16px;
    text-shadow: none;
    color: #525252;
    margin: 0px;
  }
  div.upload h2 i {
    margin-right: 10px;
    font-size: 22px;
    color: #525252;
  }
  div.upload input#case_attache {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    min-height: 40px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
  }

  input#FileName {
    border: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 0px;
    color: #e74313;
    font-weight: 400;
    min-height: 0px;
    margin-top: 10px;
  }
  .input-button > input {
    background: #3498db;
    color: #fff;
    display: inline-block;
    width: 100%;
    padding: 13px;
    text-align: center;
    border:none;
    font-weight: 400;
    border-radius: 6px;
    font-size: 16px;
    margin: 10px 0px;
  }
  .input-button > input:hover {
    background: #353c45;
  }

  .field input[type=text],
  .field input[type=password],
  .form-control {
    display: block;
    width: 100%;
    height: 45px;
    padding: 12px;
    font-size: 17px;
    line-height: 1.42857143;
    color: #525252;
    background-color: #fff;
    background-image: none;
    border: 2px solid #e9e9e9;
    border-radius: 4px;
    -webkit-box-shadow:none;
    box-shadow:none;
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  }

  /* VALADATION STRAP LIKE STYLES */
    .field.has-error input,
    .field.has-error input[type=text],
    .field.has-error input[type=password],
    .field.has-error label,
    .form-group.has-error label {
      color: #a94442;
      border-color: #a94442;
      font-weight: 400;
    }
    .field.has-error input,
    .field.has-error input[type=text],
    .field.has-error input[type=password] {
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    }

    .field.has-success input,
    .field.has-success input[type=text],
    .field.has-success input[type=password],
    .form-group.has-success label,
    .field.has-success label {
      color: #3c763d;
      border-color: #3c763d;
    }
    .field.has-success input,
    .field.has-success input[type=text],
    .field.has-success input[type=password],{
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    }

/* -----------------------------------------------------------
                ------ LOGIN STYLES ------
               ------ PASSWORD STYLES ------
               ------ REGISTER STYLES ------
----------------------------------------------------------- */
  .container.login div.panel.login .panel-body,
  .container.password div.panel.login .panel-body,
  .container.register div.panel.login .panel-body{
    padding: 35px 20px;
  }
  .container.login div.login h2,
  .container.password div.login h2,
  .container.register div.login h2 {
    text-align: center;
    margin-top: 0px;
  }
  .alternatelogins {
    border-top: 2px solid #E8E8E8;
    padding-top: 20px; 
    margin-top: 20px;
  }
  .alternatelogins > div {
    float: left;
    width: 45%;
    margin-left: 2.5%
  }
  .alternatelogins > div:first-child { 
    margin-right: 2.5%;
  }
  .alternatelogins > div > a{
    display:inline-block;
    width: 100%;
    border: 2px solid #E8E8E8;
    font-weight: 700;
 
  }
  .alternatelogins > div > a:hover {
    background: #E8E8E8;
  }
  .alternatelogins #facebook {
    display: inline-block;
    color: #205D96;
  }
  .alternatelogins #twitter {
    display: inline-block;
    color: #3db4ff;

  }
  div.options {}
  div.options ul{list-style: none;}
  div.options ul li{float: left; width: 50%;text-align: center}
  div.options ul li a{font-weight: 700; color: #3498DB; text-transform: uppercase;font-size: 14px;}

  /* -----------------------------------------------------------
                  ------ NOTFICATION STYLES ------
  ----------------------------------------------------------- */
  
  #flash {
    display:none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    min-height: 50px;
    background-color: #FFF8EA;
    border: 0;
    margin-bottom: 0;
    color: #A79A80;
    text-shadow: none;
    text-align: center;
    padding: 20px;
  }
  .agent_notifier_msg.a-flash.flash_notice{
    font-weight: 400;
    text-align: center;
  }
  
/* -----------------------------------------------------------
        ------ DESK FOOTER STYLES ------
----------------------------------------------------------- */
#footer {
  background: #353c45;
  color: #3498db;
  padding: 94px 0px 80px 0px;
} 
#footer .container p {
  color: #3498db;
  margin: 0px;
}
#footer .container a {
  color: #fff;
  text-decoration: none;
}


/* -----------------------------------------------------------
        ------ MOBILE STYLES ------
----------------------------------------------------------- */
  /* Canvas/Wrapper */
  #site-wrapper{
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  #site-canvas {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .show-nav #site-canvas {
    -webkit-transform: translateX(300px); 
    transform: translateX(300px);
    
    -webkit-transition: 300ms ease-out all;
    transition: 300ms ease-out all; 
  }

  /* Mobile Header main/menu */
  #mobileHeader {
    margin-bottom: 0px;
    background: #3498db;
    border: none;
    height: 45px;
  }

  #mobileHeader a.menu{
    color: #fff;
    float: left;
    background: none;
    border: none;
    height: 45px;
    margin-left: 10px;
  } 
  #mobileHeader a i{ 
    float: left;
    cursor: pointer;
    font-size: 22px;
    line-height: 45px;
    font-weight:300;
  }
  #mobileHeader h1 {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    margin: 0px;
    padding: 0px;
    line-height: 45px;
  }
  #mobileHeader h1 a { 
    color: #fff;
  }


  /* MOBILE SEARCH */
  #mobile-menu .search {
    min-height: 45px;
    background: #1A86CF;
  }
  #mobile-menu .search .row{
    margin: 0px;
    height: 45px;
    backgrground:  rgba(0, 0, 0, .11); 
  }
  #mobile-menu .search .row > div{
    padding: 0px;
  }
  #mobile-menu input#q2 {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    background: #39A0E5;
    border: 0;
    float: left;
    margin: 8px 0 0 10px;
    padding: 4px 10px 4px 32px;
    width: 274px;
    color: #FFF !important;
    font-size: 13px;
    line-height: 19px;
    height: 27px;
  }
  #mobile-menu .search button {
    color: #a3d3f4;
    background: none;
    border: none;
    font-size: 16px;
    position: absolute;
    left: 14px;
    top: 12px;
    z-index: 999;
  }
   #mobile-menu input#q2 ::-webkit-input-placeholder {
     color: #fff !important;
     font-weight: 300;
     transition: opacity 0.25s ease; 
  }

   #mobile-menu input#q2 :-moz-placeholder { /* Firefox 18- */
     color: #fff !important;  
      font-weight: 300;
     transition: opacity 0.25s ease; 
  }

   #mobile-menu input#q2 ::-moz-placeholder {  /* Firefox 19+ */
     color: #fff !important;
      font-weight: 300;
     transition: opacity 0.25s ease; 
  }

   #mobile-menu input#q2 :-ms-input-placeholder {  
     color: #fff !important;
      font-weight: 300;
     transition: opacity 0.25s ease; 
  }

  #mobile-menu input#q2 [placeholder]:focus::-webkit-input-placeholder {
    transition: opacity 0.25s ease; 
     font-weight: 300;
      opacity: 0.33;
  
  }

  /* Mobile Search Suggestion */
  #mobile-menu .mobile-suggest{
      -webkit-transition: 0.5s ease-in-out;
      -o-transition:0.5s ease-in-out;
      transition: 0.5s ease-in-out;
  }
  #mobile-menu .mobile-suggest ul {
    list-style: none;
    webkit-transition: 0.5s ease-in-out;
    -o-transition:0.5s ease-in-out;
    transition: 0.5s ease-in-out;
  }
  #mobile-menu .mobile-suggest ul li{}
  #mobile-menu .mobile-suggest ul li a{
    color: #D4D9DE; font-size: 14px;
  }
  #mobile-menu .mobile-suggest ul li a span{
    color: #D4D9DE; font-size: 14px;
    text-overflow: ellipsis; 
    word-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    width: 80%;
  }
  #mobile-menu .mobile-suggest ul li a i{
    color: #D4D9DE;
    font-size: 14px;
  }
 




  /* Mobile Brand/User */
  #mobile-menu img.gravatar{
    margin: 10px auto;
    diplay: block;
  }

  #mobile-menu {
    background: #353C45;
    color: #D4D9DE;
    width: 300px; 
    height: 100%!important;
    position: absolute;
    top: 0;
    left: -300px;
    padding: 0px;
    z-index: 999;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    
  }
  #mobile-menu .brand {
    background: #252A31;
    padding: 15px 10px;
  }
  #mobile-menu .brand .logo {
    display: none;
  }
  #mobile-menu .brand h1 {
    text-align: center;
    color: #fff;
  }
  #mobile-menu .brand h4{ 
    text-align: center;
    color: #ccc;
  } 
  #mobile-menu .brand h5{
    text-align: center;
    font-size: 12px;
  }

  
  /* Mobile Navigation/language */
  #mobile-menu .nav {
    list-style: none;
  }
  #mobile-menu .nav li{
    margin: 0px;
    padding: 0px;
  }
  #mobile-menu .nav li a{
    color: #fff;
    font-weight: 400;
    padding: 14px 20px 13px 20px;
    display: block;
    cursor: pointer;
    color: #D4D9DE;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: normal;
    margin: 0 0 1px;
    font-size: 13px;
  }
  #mobile-menu .nav li a:hover,
  #mobile-menu .nav li a:focus{
    background: none;
  }
  #mobile-menu .nav li a i {
    float: right;
  }
    

  #mobile-menu select, 
  #mobile-menu input,
  #mobile-menu input {
    background: transparent;
    background-color: transparent;
    outline: none;
    width: 100%;
    -webkit-appearance: none;
  }
  
  /* Lanague Dropdown */
  #mobile-menu #desk-mobile-lang-list select{
    padding: 14px 20px 13px 20px;
  }
  #mobile-menu .moblangslct {
    color: #D4D9DE;
    display: inline-block;
    width: 100%;
    font-size: 13px;
    padding: 14px 20px 13px 20px;
    border: none;
  }

  #mobile-menu .moblangslct.moblangslctHover {
  /* Styles for when the select box is hovered */
      background: none;
      border-color: #fff;
  }

  #mobile-menu .moblangslct.moblangslctOpen {
  /* Styles for when the select box is open */
      background: none;
      border-color: #fff;
  }

  #mobile-menu .moblangslct.moblangslctFocus {
  /* Styles for when the select box is in focus */
      background: none;
      border-color: #fff;
  }

  #mobile-menu .moblangslct > .moblangslctInner{
    color: #fff;
    width: 100% important!;
  }
  #mobile-menu .moblangslct > .moblangslctInner i {
    float: right; 
  }
  /* Mobile Breadcrumbs? */


  /* Small screens
  max-width 640px, mobile-only styles, use when QAing mobile issues */
  @media only screen and (max-width: 40em) {
      #header,
      #search {display: none;}
      #sidebar {margin-top: 50px;}
      #mobileHeader select {padding: 10px 15px;}
      #content .gravatar {display: none;}
      #mobile-menu .gravatar {display: block;}

      #breadcrumbs > .container > .row {
        padding: 0px 15px;
      }
      #content > .container > .row > .col-md-8 {
        padding: 0px 15px;
      }
      #content > .container > .row > .col-md-4{
        padding: 0px 15px;
      }
      #content .container.index .desk-topic ul,
      #content .container.index .desk-qna ul{
        list-style: none;
        padding: 0px;
      }

      #content .container.index .desk-topic ul li,
      #content .container.index .desk-qna ul li {
        width: 100%;
        margin-bottom: 0px;
        padding: 15px;
        border-bottom: 1px solid #efefef;
      }
      #content .container.index .desk-topic ul li a,
      #content .container.index .desk-qna ul li a{
        display: inline-block; 
        width: 100%;
      }

      #content .container.index a.desk-topic-view-all {
        float: right;
      }
      div.options ul li,
      .alternatelogins > div {
        width: 100%;
        margin: 5px auto;
      }

      .new_customer_contact_email input {
        max-width: 75%;
      }
  }
  /* -- MEDIUM SCREENS --
  min-width 641px, medium screens */
  @media only screen and (min-width: 40.063em) { 
    
  }
  /* min-width 641px and max-width 1024px */
  @media only screen and (min-width: 40.063em) and (max-width: 64em) {
    #header,
    #search {display: none;}
     #breadcrumbs > .container > .row {
        padding: 0px 15px;
      }
      #content > .container > .row > .col-md-8 {
        padding: 0px 15px;
      }
      #content > .container > .row > .col-md-4{
        padding: 0px 15px;
      }
  }
  
  
  /* -- LARGE SCREENS --
  min-width 1025px, large screens */
  @media only screen and (min-width: 64.063em) {
    #mobileHeader {display: none;}
  } 
  /* min-width 1024px and max-width 1440px */
  @media only screen and (min-width: 64.063em) and (max-width: 90em) { 
  
  }
  
  
  /* -- XLARGE SCREENS --
  min-width 1441px, xlarge screens */
  @media only screen and (min-width: 90.063em) {
    
  } 
  /* min-width 1441px and max-width 1920px */
  @media only screen and (min-width: 90.063em) and (max-width: 120em) { 
  
  }
  /* min-width 1921px, xlarge screens */
  @media only screen and (min-width: 120.063em) { 
  
  }
  






  /* -----------------------------------------------------------
                  ------ BURGER BUTTON STYLES ------
  ----------------------------------------------------------- */
.menu-button{
  cursor: pointer;
  display: inline-block;
  font-size: 10px;
  height: 3em;
  margin: 7px 0px 0px 12px;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  width: 3em;
  -webkit-tap-highlight-color: transparent;
}
.menu-button span{
  background: #fff;
  border-radius: 1em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: 0.4em;
  position: absolute;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.menu-button span {
  width: 50%;
}
.menu-button span:nth-child(1) {
  border-radius: 1em 0 0 1em;
  left: 0;
  top: .5em;
}
.menu-button span:nth-child(2) {
  border-radius: 0 1em 1em 0;
  top: .5em;
  right: 0;
}
.menu-button span:nth-child(3) {
  left: 0;
  top: 1.3em;
  width: 100%;
}
.menu-button span:nth-child(4) {
  border-radius: 1em 0 0 1em;
  left: 0;
  top: 2.1em;
}
.menu-button span:nth-child(5) {
  border-radius: 0 1em 1em 0;
  right: 0;
  top: 2.1em;
}
.menu-button.open span:nth-child(1) {
  -webkit-transform: rotate(45deg) translate(0.4em);
  -ms-transform: rotate(45deg) translate(0.4em);
  transform: rotate(45deg) translate(0.4em);
}
.menu-button.open span:nth-child(2) {
  -webkit-transform: rotate(-45deg) translate(-0.45em);
  -ms-transform: rotate(-45deg) translate(-0.45em);
  transform: rotate(-45deg) translate(-0.45em);
}
.menu-button.open span:nth-child(3) {
  opacity: 0;
}
.menu-button.open span:nth-child(4) {
  -webkit-transform: rotate(-45deg) translate(0.4em);
  -ms-transform: rotate(-45deg) translate(0.4em);
  transform: rotate(-45deg) translate(0.4em);
}
.menu-button.open span:nth-child(5) {
  -webkit-transform: rotate(45deg) translate(-0.45em);
  -ms-transform: rotate(45deg) translate(-0.45em);
  transform: rotate(45deg) translate(-0.45em);
}

  