/**
 * "Yet Another Multicolumn Layout" - YAML CSS Framework
 *
 * default screen stylesheet - FULLPAGE-layout type layout
 *
 * @copyright       Copyright 2005-2012, Dirk Jesse
 * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-CDL (http://www.yaml.de/license.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         v4.0.1
 * @revision        $Revision: 733 $
 * @lastmodified    $Date: 2012-03-04 19:15:48 +0100 (So, 04 Mrz 2012) $
 */

@media screen {
  html, body {
  }


  #doitPanel {
    /*        position: fixed !important;
            top: 7em;*/
    display: none;
  }

  /* force vertical scrollbar */
  body {
    overflow-y: hidden;
    overflow-x: auto;
    /*min-width: 82em;*/
    margin-right: 20px;
  }

  /* Layout Module Configuration */
  .doitOuterLayout {
    max-width: 100%;
    /* min-width: 87em;*/
    margin: 0 auto;
    background-color: transparent;
    /*z-index: 1;*/
    position: relative; /* for z-index */
  }

  .doitPadding {
    padding: 0.8em 0 0.8em 0;
  }

  .doitLinkbox {
    padding: 0.3em 0.6em 0.7em 0.6em;
    margin-top: 0px;
    border-top: solid 1px #fff;
    /* background-color: rgb(0,0,0);*/
    background-color: rgba(0,0,0,.8);
    /*background-color: transparent\9; 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000); verursacht Fehler im CSS3 Validator */
    /* zoom:1;  verursacht Fehler im CSS3 Validator */
    display: none;
  }

  .doitBackNext {
    padding: 0.3em 0.6em 0.7em;
    margin-top: 0px;
    border-top: solid 1px #fff;
    /* background-color: rgb(0,0,0, .8);
     background-color: rgba(0,0,0,.8);*/
    background-color: #333;
    height:auto;
    /*		background-color: transparent\9;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000); verursacht Fehler im CSS3 Validator */
    /*		zoom:1; verursacht Fehler im CSS3 Validator */
  }

  .doitBottomBox {
    padding:0;
    margin-top: 0px;
    border-top: solid 1px #ddd;
    /*background-color: rgb(0,0,0);*/
    /*background-color: rgba(0,0,0,.8);*/
    /* background-color: rgba(30,30,30,.8);*/
    /* background-color: transparent\9;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000); 
    zoom:1; verursacht Fehler im CSS3 Validator */
    display: block;

  }
  .doitBottomBoxBS{
    display: table;

    /* left: 0;
     bottom: 0;
    width:100%;*/

    color: #FFF;

    border-top: solid 1px #fff;
    /* background-color: rgb(0,0,0,.8);
     background-color: rgba(0,0,0,.8);*/

    height: 30px;
    /*
     z-index: 1000;
line-height: 2.7rem;
font-weight: bold;*/




  }
  .doitBottomBoxBS .doitHListNavi{
    padding:0;
  } 
  .doitBottomBoxBS .doitHListNavi ul li{
    padding-right: 20px;
  }

  .doitBottomBoxBS .doitHListNavi ul li a{
    line-height: 1.7rem;
    font-weight: bold;

  }
  .doitBottomBoxBS .doitHListNavi #fright{
    float:right;
    color:#fff;
    font-size: 90%;
    font-style: italic;
    padding:0;
  }
  .doitBottomBoxBS .doitHListNavi #fright .rcopyright{

    color:#fff;
    font-size: 92%;
    font-weight: bolder;
    font-style: normal;
  }

  /* fallback for missing media queries support*/
  body > header,
  body > nav, body > footer {
    min-width: 760px;
  }

  /* Basic Element Styling */
  header {
    background: transparent;
    color: #000;
    margin-top: 0px;
  }



  nav {
    background: transparent;
    margin-top: 1.1em;
  }

  footer {
    background: #333;
    color: #444;
    bottom: 0;
  }


  #doitInfoMouseOrTouch{
    position: fixed;
    bottom: 30px; 
    z-index: 49;   
    left: 45%;
    pointer-events: none;
  }

  .doitInfoMouse {
    width: 80px;
    height: 75px;
    background:transparent url('../../../images/infoMouseK.png') center top no-repeat;
    background-color: rgba(204,204,204,0.5);
    background-position: center center;
    margin: 5px;
    border-radius: 50px;
  }

  .doitInfoTouch {
    width: 80px;
    height: 75px;
    background:transparent url('../../../images/infoTouchK.png') center top no-repeat;
    background-color: rgba(204,204,204,0.5);
    background-position: center center;
    margin: 5px;
    border-radius: 50px;
  }


  header .doitPadding {
    padding: 0.6em;
  }

  .doitGbox { padding: 0 1.5em; }

  .doitPanelForm label {
    width: 50%;
  }
  #doitContactForm.doitPanelForm label, #doitSendForm.doitPanelForm label {
    vertical-align: top;
    width: 40%;
  }

  #doitInteriorItems img {
    width: 29.16px;
    height:	75px;
  }

  .doitInfoboxContent {
    max-height: 600px;	
  }	

  #doitOverlayProject {
    max-width: 30%;
  }

  #doitContactForm p, #doitContactForm div, #doitContactForm label, 
  #doitSendForm p, #doitSendForm div, #doitSendForm label,
  #doitOrderForm p, #doitOrderForm div, #doitOrderForm label,
  #doitProjectForm, #doitProjectForm div, #doitProjectForm label {
    font-size: 12px;
    line-height: 1.8em;	
  }
  #bcRoom{
    display: table-cell;
  }
  #doitBreadCrumb {
    border-collapse: collapse;
    display: table;
    table-layout: fixed;
    width: 100%;
    position: relative;
    white-space: nowrap;
    list-style-type:none;
    margin: 0;
    padding: 0;
    vertical-align: top;  	
    position:relative; 
    left: 15.6%;   
    margin-top: 1px;
  }

  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a {     
    margin: 0;		
    background-color: #fff;
    display: block;
    text-align: center;
    font-weight:normal;
    text-decoration:none;       
    color:#333;
    width:93%;

    cursor: pointer;                       
    /*text-transform: uppercase;*/
    height: 22px;
    line-height: 22px;
    text-align: center;
    overflow: hidden;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a.bcFirst{

  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi{
    display: table-cell;
    list-style-type: none;
    margin: 0;

    padding: 0;
    vertical-align: top;
    position: relative;
    width: 222px;

  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a:after{
    left: 206px;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(2, 2, 3, 0);
    border-left-color: #fff;
    border-width: 11px;
    margin-top: -11px;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi:first-child a:after{
    left: 206px;
  }


  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a:hover:after, 
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a.active:after,
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a:focus:after,
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a:active:after{
    border-color: rgba(2, 2, 3, 0);
    border-left-color: #333;      
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi:first-child a{
    margin-left: 0px;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a:before{
    position:absolute;
    left:-14px;             
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 11px;
    position: absolute;
    pointer-events: none;
    border-left: 11px solid transparent; border-top: 11px solid #fff; border-bottom: 11px solid #fff;        
    margin-top: -11px;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a:hover:before,#doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a.active:before,
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a:focus:before,#doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a:active:before{

    border-left-color: transparent; 
    border-top-color: #333; 
    border-bottom-color: #333;        

  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi:first-child a:before{
    left: -11px;
    width:0;
  }   
  /*
      #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a:hover:before, #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a.active:before,
      #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a:focus:before, #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a:active:before{              
          border-left: 11px solid transparent;        
          border-top: 11px solid #fff; border-bottom: 11px solid #fff;        
          margin-top: -11px;
  
      }*/


  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a:focus,
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a:hover,
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a:active,
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a.active,
  .bcRoom a.active {
    color:#fff ;                
    text-decoration:none;
    background-color:#333;
    outline: none;
    border: none;
  }
  .bcRoom .bcFirst {
    margin-left: 0;         
  }

  #applyDivrails label,
  #connectleft label,
  #connectright label,
  #slidingDoorBrake label div,
  #applyMaterial label,
  #applyProfileMaterial label,
  #applyInteriorMaterial label,
  #heightAdjustor label div,
  #skirtingGap label div,
  #backWall label div,
  #doitInteriorSwitchDiv,
  #doitFrontSwitchDiv{		
    cursor: pointer;
  }

  .titconfig{
    display: inline-block;
  }
  #applyDivrailsInfo p{
    display: inline-block;
    width: auto;
    margin-right: 20px;

  }

}

/* reset fallback values in modern browsers */
@media screen and ( min-width: 0px ) {

  body > header,
  body > nav, body > footer {
    min-width: 0;
  }
}

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

  #doitQpNaviLogo {	
    /* background-size: 63%;*/
    width: 290px;
    min-width:290px;


  }
  /*.doitHListQp .doitHListQpUl .doitHListQpLi a {
      width: 80%;
  }*/
  /*.doitHListQp .doitHListQpUl .doitHListQpLi a.active::before, .doitHListQp .doitHListQpUl .doitHListQpLi a:hover::before,
  .doitHListQp .doitHListQpUl .doitHListQpLi a:focus::before, .doitHListQp .doitHListQpUl .doitHListQpLi a:active::before{    
      left: -24%;
      width: 24%;
  }*/
  .doitHListQp .doitHListQpUl .doitHListQpLi:first-child a.active:before, .doitHListQp .doitHListQpUl .doitHListQpLi:first-child a:hover:before,
  .doitHListQp .doitHListQpUl .doitHListQpLi:first-child a:focus:before, .doitHListQp .doitHListQpUl .doitHListQpLi:first-child a:active:before{
    left: 0px; 
    display: none;
  }    
}


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

  #doitQpNaviLogo {	
    /* background-size: 70%;*/


  }

  #doitOverlayAbout, #doitOverlayImpressum {
    max-width: 70% !important;
  }


}
@media screen and ( max-width: 1400px ) {
  /*  #doitQpNaviOpenConf, #doitQpNaviSaveConf, #doitQpNaviNewConf {
        width: 8%;
    }
  */
  #doitQpNaviLogo {	
    min-width: 250px;
  }

  #doitSidenav.doitHListQp .doitHListQpUl .doitHListQpLi a .sidenavTitle {
    font-size: 86%;
    letter-spacing: -0.09em;
  }


  .doitInfoboxContent {
    max-height: 500px;	
  }	

  #doitOverlayAbout, #doitOverlayImpressum {
    max-width: 65% !important;
  }

  .doitInfoboxHeader h3 {
    font-size: 155%;
  } 
  h6{
    font-size: 102%;
  }

  #topNavRightMenu{      
    width: 70%;     
  }
}

@media screen and ( max-width: 1200px ) {
  /* #doitQpNaviOpenConf, #doitQpNaviSaveConf, #doitQpNaviNewConf {
       width: 10%;
   }*/

  #doitQpNaviLogo {	
    min-width: 220px;
  }

  #doitSidenav.doitHListQp .doitHListQpUl .doitHListQpLi a .sidenavTitle {
    font-size: 76%;        
    font-size-adjust: 0.45;
  }
  /* close button positioned on upper right corner */
  .simple_overlay .close {
    background-size: 20px 20px !important;
    height:20px !important; 
    width:20px !important;
    /*      background-image:url(../../../images/iconCloseBl.svg) !important;*/
  }

  .simple_overlay .close:before {
    top: -7px;
  }
  .simple_overlay .close:after {
    top: -7px;
  }

  #doitOverlayAbout .close:before,
  .lupeOverlay .close:before{
    right: 18px !important;
    top: -4px;
  }
  #doitOverlayAbout .close:after,
  .lupeOverlay .close:after{
    right: 18px !important;
    top: -4px;
  }

  #doitOverlayImpressum {
    font-size: 80%;
  }

  #doitOverlayAbout {
    padding: 0.8em 1em 0em 1.5em !important;
  }

  #doitOverlayAbout, #doitOverlayImpressum {
    max-width: 60% !important;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi {
    width: 190px;
  }

  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a{     
    font-size: 10px;       
  }

  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a::after, #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi:first-child a::after {
    left: 176px;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a:before {

    width: 0;
    position: absolute;
    pointer-events: none;
    border-left: 11px solid transparent; ; 
    left:-11px;
  }
  h5, #doitFrontSwitchDiv a, #doitInteriorSwitchDiv a{
    font-size: 13px !important;
  }
  #doitFrontSwitchDiv, #doitInteriorSwitchDiv {    
    padding: 0.539em 0 0.539em 0em;
  }

}


@media screen and ( max-width: 1024px ) {
  /*html * { font-size:96%; }*/


  #doitRoomArrowsCanvasId {font-size: 80%;}

  #doitPanel, #doitPriceTestText {
    font-size: 90%;		
  }

  .doitOuterLayout {
    min-width: 98%;
    max-width: 100%;
  }



  #doitQpNaviLogo {	
    border-left: 1em solid transparent;
    background-size: 80%;
  }


  .doitG14 {min-width: 18.5em; }		
  .doitG15 {min-width: 18.5em; }  

  .dattaya-maccordion{font-size: 110%;}

  .doitVList a {
    padding-left: 1.7em;
    padding-top: 0.7em;
    padding-bottom: 0; 
  }

  .doitVList a:before
  {
    top: 9px;
  }


  .doitHListBackNext .doitHListBackNextUl .doitHListBackNextBack a:before {
    left: 11px;
    top: 9px;
  }


  .doitHListBackNext .doitHListBackNextUl .doitHListBackNextFor a:after {
    right: 11px;
    top: 9px;
  }



  .doitHListBackNext .doitHListBackNextUl .doitHListBackNextBack a {
    margin-right: 0.2em;
    padding: 0.7125em 0.3em 0.7em 32px;
  }


  .doitHListBackNext .doitHListBackNextUl .doitHListBackNextFor a {
    text-align: right;
    margin-left: 0.2em;
    padding: 0.7125em 32px 0.7em 0.3em;
  }

  .dattaya-maccordion .dattaya-maccordion-header {
    padding: .7em 1em 1em 1em;
  }



  .doitUnderline {
    width: 115%;		
    left: -0.8em;
  }

  .details {
    font-size: 130%;
  }
  /* close button positioned on upper right corner */
  /*    .simple_overlay .close {
        background-size: 20px 20px !important;
        height:20px !important; 
        width:20px !important;
        background-image:url(../../../images/iconClose.svg) !important;
      }
  
      #doitOverlayImpressum {
        font-size: 80%;
      }
  
      #doitOverlayAbout, #doitOverlayImpressum {
        max-width: 70% !important;
      }*/





  #doitFloorSelAcc h5 {
    padding:2px 10px !important;
  }


  .doitInfoboxContent {
    max-height: 400px;	
  }	

  /* .doitInfoboxContentLeftResp {	
       float: left;
       width: 35%;
   }

   .doitInfoboxContentRightResp {	
       float: right;
       width: 60%;
   }	

   .doitInteriorContent {	
       padding-left: 1em !important;
   }
  */	
  .doitPanelForm input[type="submit"],
  .doitPanelForm input[type="button"] {
    font-size: 14px;
  }

  #doitSubmitContact {
    /*    padding: 10px;*/
    /*   margin-top: 1.6em;
       margin-bottom: -0.5em;	*/
  }

  #doitSubmitKfg {
    margin-top: 0.6em !important;
    margin-bottom: -2em;	
  }	

  #doitOverlayAbout, #doitOverlayImpressum {
    max-width: 70% !important;
  }   
  /*
    #doitOverlayStart {


        max-width: 50%;
        min-width: 50%;

    }*/
  .doitInfoboxHeader h3 {
    font-size: 135%;
  } 
  #doitOverlayProject {
    max-width: 50%;
  }		

  #doitContactForm p, #doitContactForm div, #doitContactForm label, 
  #doitSendForm p, #doitSendForm div, #doitSendForm label,
  #doitOrderForm p, #doitOrderForm div, #doitOrderForm label,
  #doitProjectForm, #doitProjectForm div, #doitProjectForm label {
    font-size: 11px;
    line-height: 1.7em;	
  }
  #cusLogoText{
    font-size: 80%;
  }
  /*
      #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb a {
          min-width: 150px;
          font-size: 10px;
          background-size: 100% auto;	
          margin-left: -19px;
      }*/
  /*  #doitClosetPosTabs.ui-tabs .ui-tabs-nav li a {

        padding: .5em 0.7em 1em 0.7em !important
    }
  */
  .doitHListBackNext .doitHListPrintSendUl #doitQpBoxBtnPrint a  {
    padding-top: 0.8em;
  }

  #topNavRightMenu{      
    width: 90%;     
  }


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

  /* #doitQpNaviOpenConf, #doitQpNaviSaveConf, #doitQpNaviNewConf {
       width: 14%;
   }*/

  #doitQpNaviLogo {	
    /*background-size: 70%;*/
    min-width: 200px;
  }

  #doitSidenav.doitHListQp .doitHListQpUl .doitHListQpLi a .sidenavTitle {
    letter-spacing: -0.0625em;
    font-size: 70%;
    font-size-adjust: 0.40;
  }
  /*#doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb a {
      min-width: 140px;
      font-size: 8px;
      background-size: 100% auto;
      margin-left: -19px;
  }
  .doitHListQp .doitHListQpUl .doitHListQpLi a {

      width: 78%;

  }*/
  .doitHListQp .doitHListQpUl .doitHListQpLi a.active::before, .doitHListQp .doitHListQpUl .doitHListQpLi a:hover::before,
  .doitHListQp .doitHListQpUl .doitHListQpLi a:focus::before, .doitHListQp .doitHListQpUl .doitHListQpLi a:active::before{    
    left: -27%;
    width: 26%;
  }
  .doitHListQp .doitHListQpUl .doitHListQpLi:first-child a.active:before, .doitHListQp .doitHListQpUl .doitHListQpLi:first-child a:hover:before,
  .doitHListQp .doitHListQpUl .doitHListQpLi:first-child a:focus:before, .doitHListQp .doitHListQpUl .doitHListQpLi:first-child a:active:before{
    left: 0px; 
    width: 0;
  } 
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi {

    width: 165px;

  }

  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a{
    width: 91.5%;
    font-size: 11px;
    text-transform: none;
  }

  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a::after, #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi:first-child a::after {
    left: 151px;
  }


  .ui-accordion .ui-accordion-header a{
    font-size: 90%;
  }
  /* .ui-accordion .ui-accordion-content {

padding: 0 !important;
   }*/
  .ui-accordion .ui-accordion-header {
    padding: 0.9em 0 0.6em 0em !important;
  }
  #doitInteriorFormHeight label, #doitInteriorFormDepth label, #doitInteriorFormWidth label {
    width: 40% !important;
  }
  .doitPanelForm {

    margin-right: -5px;
  }    

  #topNavRightMenu div a{

    padding-left: 5px;
    padding-right: 10px;
  }
  h5, #doitFrontSwitchDiv a, #doitInteriorSwitchDiv a{
    font-size: 11.5px !important;

  }
  .doitUIInfoDialogContent {
    max-height: 30em !important;
  }
}
@media screen and ( max-width: 833px ) {
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a{
    width: 92%;
    font-size: 90%;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi {
    width: 150px;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a::after, #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi:first-child a::after {
    left: 137px;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a::before {
    /*  width:3px;*/
  }
  #topNavRightMenu div a, #dprice.doitHListQpLi{
    font-size: 95%;
  }
}

@media screen and ( max-width: 800px ) {
  /*   #doitQpNaviOpenConf, #doitQpNaviSaveConf, #doitQpNaviNewConf {
         width: 20%;
     }*/    


  /*  .doitHListQp .doitHListQpUl .doitHListQpLi a {

        width: 76%;

    }*/
  .doitHListQp .doitHListQpUl .doitHListQpLi a.active::before, .doitHListQp .doitHListQpUl .doitHListQpLi a:hover::before,
  .doitHListQp .doitHListQpUl .doitHListQpLi a:focus::before, .doitHListQp .doitHListQpUl .doitHListQpLi a:active::before{    
    left: -32.5%;
    width: 22.5%;
  }
  .doitHListQp .doitHListQpUl .doitHListQpLi:first-child a.active:before, .doitHListQp .doitHListQpUl .doitHListQpLi:first-child a:hover:before,
  .doitHListQp .doitHListQpUl .doitHListQpLi:first-child a:focus:before, .doitHListQp .doitHListQpUl .doitHListQpLi:first-child a:active:before{
    left: 0px; 
    width: 0;
  }    
  /*
      #doitFrontSwitchDiv a, #doitInteriorSwitchDiv a {
          font-size: 11px;
      }*/

  #topNavRightMenu div a {
    white-space: pre-wrap;
    padding-left: 5px;
    padding-right: 5px;

  }

  #dprice.doitHListQpLi {
    width: 40%;

  }
    .doitUIInfoDialogContent {
    max-height: 25em !important;
  }
}
@media screen and ( max-width: 720px ) {
  /*  #doitQpNaviOpenConf, #doitQpNaviSaveConf, #doitQpNaviNewConf {
        width: 25%;
    }*/

  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi {

    width: 140px;

  }

  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a{
    width: 85%;
    font-size: 10px;

  }

  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a::after, #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi:first-child a::after {
    left: 118px;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a::before {
    width:9px;
    left:-20px;
  }

  .doitUIInfoDialogContent {
    max-height: 20em !important;
  }

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

  /*
          .doitHListQp .doitHListQpUl .doitHListQpLi a span {
              position: absolute;
              left: 0px;
              overflow: hidden;
          }*/


  #topNavRightMenu div a, #dprice.doitHListQpLi{
    font-size: 90%;
  }
  .doitUIInfoDialogContent {
    max-height: 10em !important;
  }

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

  /* .doitHListQp .doitHListQpUl .doitHListQpLi a.active::before, .doitHListQp .doitHListQpUl .doitHListQpLi a:hover::before,
       .doitHListQp .doitHListQpUl .doitHListQpLi a:focus::before, .doitHListQp .doitHListQpUl .doitHListQpLi a:active::before{
       left: -72.5%;
       width: 48%;
   }
   .doitHListQp .doitHListQpUl .doitHListQpLi a {
       width: 57%;
   }
   .doitHListQp .doitHListQpUl .doitHListQpLi a span {
       position: relative;
       left: -20px;
       overflow: hidden;
   }*/   


  #topNavRightMenu div a, #dprice.doitHListQpLi{
    font-size: 85%;
  }   
  #dprice{
    font-weight: normal;
    display: table-cell;
    vertical-align: middle;

  }
  .doitTopNavRightPriceDiv{
    white-space: pre-wrap;
    line-height: 0.30rem;
    vertical-align: middle;
    padding-right: 10px;
  }
  .ui-dialog{
    left: 10% !important;
    width: 80% !important;        
  }

}
@media screen and ( max-width: 570px ) {
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi {
    width: 122px;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a{
    width: 91%;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a::after, #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi:first-child a::after {
    left: 110px;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a::before {
    width:0;
    left:-11px;
  }
  #dprice.doitHListQpLi{
    width: 32%; 
  }
  #topNavRightMenu div a, #dprice.doitHListQpLi{
    font-size: 75%;
  }



  #topNavRightMenu div a, #dprice.doitHListQpLi{
    font-weight: normal;
  }
}
@media screen and ( max-width: 530px ) {
  #topNavRightMenu div a, #dprice.doitHListQpLi{
    font-size: 70%;
    font-size-adjust: 0.45;
  }
}
@media screen and ( max-width: 496px ) {
  #doitTopNavRight .doitHListQp .doitHListQpUl .doitHListQpLi a span {
    position: relative;
    left: -10px;
    overflow: hidden;
    text-transform: none;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi {
    width: 112px;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a{
    width: 84%;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a::after, #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi:first-child a::after {
    left: 94px;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a::before {
    width: 5px;
    left: -16px;
  }

  #topNavRightMenu div a, #dprice.doitHListQpLi{
    font-size: 60%;
    font-size-adjust: 0.40;
  }
}
@media screen and ( max-width: 480px ) {

  #cusLogoText{
    font-size: 40%;
  }
  header .doitPadding {
    padding: 0.75em 10px;
  }

  .doitPadding,
  nav .doitHList ul {
    padding-left: 10px;
    padding-right: 10px;
  }



  nav .doitHList ul,
  nav .doitHList li {
    display:block;
    float: none;
    width: auto;
    text-align: left;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a::after, #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi:first-child a::after {
    left: 85%;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a::before {      
    left: -14%;
  }

}
@media screen and ( max-width: 496px ) {
  #doitTopNavRight .doitHListQp .doitHListQpUl .doitHListQpLi a span {  
    left: -9px;  
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi {
    width: 90px;
  }
  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a{

    width: 86%;

  }

  #doitBreadCrumb #doitBreadCrumbL.doitbreadcrumb .doitBreadCrumbQpLi a::before {
    width: 0;
    left: -11px;
  }


}