/*  Adaptive style   */

/*   1024px  */

@media screen and (max-width: 1024px),
only screen and (max-device-width:1024px) {
    
.layout {
width:940px;
}

#menu li a {
padding:0.4em 30px;
}
    
}


/*   854px  */

@media screen and (max-width: 854px),
only screen and (max-device-width:854px) {
    
.layout {
width:810px;
}

.logo {
width:40%;
}

.geo, .phone {
width:25%;
}

#menu li a {
padding:0.4em 20px;
}

.component, .component-mr, .component-lm, .component-mlr, .component-lrm {  /*  макет Главная + правая  Main + Right */
width:100%;
float:none;
}

.sidebar-right.nospace {
padding:0;
}

.sidebar-left, .sidebar-right {
width:97%;
padding:0 3% 0 0;
float:none;
}
    
}


/*   800px  */

@media screen and (max-width: 800px),
only screen and (max-device-width:800px) {
    
.layout {
width:760px;
}

.logo {
width:40%;
}

.geo, .phone {
width:25%;
}

#menu li a {
padding:0.4em 20px;
}

.component, .component-mr, .component-lm, .component-mlr, .component-lrm {  /*  макет Главная + правая  Main + Right */
width:100%;
float:none;
}

.sidebar-right.nospace {
padding:0;
}

.sidebar-left, .sidebar-right {
width:97%;
padding:0 3% 0 0;
float:none;
}

.span3 {
width:49%;
}

.span4 {
width:95%;
}

.social-box {
width:30%;
float:none;
text-align: left;
}

.social-box a {
float:left;
}
    
}



/*   768px  */

@media screen and (max-width: 768px),
only screen and (max-device-width:768px) {
    
.layout {
width:730px;
}

.logo {
width:40%;
}

.geo, .phone {
width:25%;
}

#menu li a {
padding:0.4em 20px;
}

.component, .component-mr, .component-lm, .component-mlr, .component-lrm {  /*  макет Главная + правая  Main + Right */
width:100%;
float:none;
}

.sidebar-right.nospace {
padding:0;
}

.sidebar-left, .sidebar-right {
width:97%;
padding:0 3% 0 0;
float:none;
}

.span3 {
width:49%;
}

.span4 {
width:95%;
}

.social-box {
width:30%;
float:none;
text-align: left;
}

.social-box a {
float:left;
}
    
}


/*   640px  */

@media screen and (max-width: 640px),
only screen and (max-device-width:640px) {
    
.layout {
width:95%;
}

.logo {
width:95%;
margin:0 0 1em 0;
}

.geo, .phone, .topbox {
width:88%;
float:none;
text-align:left;
padding:0 0 0 9%;
height:auto;
margin:0 0 1.5em 0;
}

.topbox {
padding:0;
}

.component, .component-mr, .component-lm, .component-mlr, .component-lrm {  /*  макет Главная + правая  Main + Right */
width:100%;
float:none;
}

.sidebar-right.nospace {
padding:0;
}

.sidebar-left, .sidebar-right {
width:97%;
padding:0 3% 0 0;
float:none;
}

.span3 {
width:49%;
}

.span4 {
width:95%;
}

.social-box {
width:40%;
float:none;
text-align: left;
}

.social-box a {
float:left;
}

#debug {
padding:0.5em 0 3em 0;
}

.topline {
padding-top:2.5em;
}

#menu {
position:fixed;
top:0;
}

#menu .layout {
background: url(../images/menuicon.png) top 0.7em left 2% no-repeat;
cursor:pointer;
height:2.5em
}

#menu ul {
display:none;
}

#menu.mobilemenu .layout {
background: url(../images/menuicon.png) top 0.7em left 0 no-repeat;
}

#menu.mobilemenu ul.nav {
display:block;
position:fixed;
height:100%!important;
z-index:9999;
overflow:auto;
width:40%;
left:9%;
background:#364656;
}

#menu.mobilemenu ul>li {
float:none;
}

#menu.mobilemenu li.parent > ul, #menu.mobilemenu li.parent > ul {
display:block;
font-size:80%;
position:static;
background:#232F3B;
}

.cols-2 {
width:99%;
margin:0;
float:none;
}

.cols-2 .span6 {
width:100%;
}

.cols-3 .span4 {
width:99%;
margin:0;
float:right;
padding: 0;
}


.Window > div {
 width: 90%;
 position: relative;
 margin: 2% auto;
 padding: 10px 5px 5px;
 border-radius: 10px;
 background: #fff;
 box-shadow: 0px 0px 20px 2px;
}
    
}




/*   480px  */

@media screen and (max-width: 480px),
only screen and (max-device-width:480px) {
    
.layout {
width:95%;
}

#toTop {
display:none!important;
}

.topline {
text-align:left;
}

.topline li {
float:none;
}

.logo {
width:95%;
margin:4em 0 1em 0;
}

.geo, .phone, .topbox {
width:95%;
float:none;
text-align:left;
padding:0 0 0 5%;
height:auto;
margin:0 0 1.5em 0;
}

.topbox {
padding:0;
}

.component, .component-mr, .component-lm, .component-mlr, .component-lrm {  /*  макет Главная + правая  Main + Right */
width:100%;
float:none;
}

.sidebar-right.nospace {
padding:0;
}

.sidebar-left, .sidebar-right {
width:97%;
padding:0 3% 0 0;
float:none;
}

.span3 {
width:49%;
}

.span4 {
width:95%;
}

.social-box {
width:40%;
float:none;
text-align: left;
}

.social-box a {
float:left;
}

#debug {
padding:0.5em 0 3em 0;
}

.topline {
padding-top:3.5em;
}

#menu {
position:fixed;
top:0;
z-index: 999;
}

#menu .layout {
background: url(../images/menuicon.png) top 0.7em left 2% no-repeat;
cursor:pointer;
height:2.5em
}

#menu ul {
display:none;
}

#menu.mobilemenu .layout {
background: url(../images/menuicon.png) top 0.7em left 0 no-repeat;
}

#menu.mobilemenu ul.nav {
display:block;
position:fixed;
height:100%!important;
z-index:9999;
overflow:auto;
width:60%;
left:9%;
background:#610101;
}

#menu.mobilemenu ul>li {
float:none;
}

#menu.mobilemenu li.parent > ul, #menu.mobilemenu li.parent > ul {
display:block;
font-size:80%;
position:static;
background:#232F3B;
}
    
}



/*   375px  */

@media screen and (max-width: 375px),
only screen and (max-device-width:375px) {
    
.layout {
width:95%;
}

.logo {
width:95%;
margin:2em 0 1em 0;
}

.geo, .phone, .topbox {
width:80%;
float:none;
text-align:left;
padding:0 0 0 17%;
height:auto;
margin:0 0 1.5em 0;
}

.topbox {
padding:0;
}

.component, .component-mr, .component-lm, .component-mlr, .component-lrm {  /*  макет Главная + правая  Main + Right */
width:100%;
float:none;
}

.sidebar-right.nospace {
padding:0;
}

.sidebar-left, .sidebar-right {
width:97%;
padding:0 3% 0 0;
float:none;
}

.span3 {
width:49%;
}

.span4 {
width:95%;
}

.social-box {
width:80%;
float:none;
text-align: left;
}

.social-box a {
float:left;
}

#debug {
padding:0.5em 0 3em 0;
}

.topline {
padding-top:2.5em;
}

#menu {
position:fixed;
top:0;
}

#menu .layout {
background: url(../images/menuicon.png) top 0.7em left 2% no-repeat;
cursor:pointer;
height:2.5em
}

#menu ul {
display:none;
}

#menu.mobilemenu .layout {
background: url(../images/menuicon.png) top 0.7em left 0 no-repeat;
}

#menu.mobilemenu ul.nav {
display:block;
position:fixed;
height:100%!important;
z-index:9999;
overflow:auto;
width:60%;
left:9%;
background:#364656;
}

#menu.mobilemenu ul>li {
float:none;
}

#menu.mobilemenu li.parent > ul, #menu.mobilemenu li.parent > ul {
display:block;
font-size:80%;
position:static;
background:#232F3B;
}
  .flat {
  font-family: 'Montserrat';
  text-transform: uppercase;
  border: none;
  text-align: center;
  outline: none;
  cursor: pointer;
  color: #fafafa;
}
.flat.xs {
  padding: 3px 9px;
  font-size: 13px;
}
.flat.sm {
  padding: 9px 12px;
  font-size: 13px;
}
.flat.md {
  padding: 12px 15px;
  font-size: 13px;
}
.flat.lg {
  padding: 15px 24px;
  font-size: 15px;
}
.flat:active {
  position: relative;
  top: 2px;
}
.flat.grey {
  background-color: #5a5a5a;
  -webkit-box-shadow: 0px 3px 0px #484848;
  -moz-box-shadow: 0px 3px 0px #484848;
  box-shadow: 0px 3px 0px #484848;
}
.flat.grey:active {
  -webkit-box-shadow: 0px 1px 0px #5a5a5a;
  -moz-box-shadow: 0px 1px 0px #5a5a5a;
  box-shadow: 0px 1px 0px #5a5a5a;
}
.flat.grey:hover {
  background-color: #555555;
}
.flat.green {
  background-color: #0aa699;
  -webkit-box-shadow: 0px 3px 0px #08847a;
  -moz-box-shadow: 0px 3px 0px #08847a;
  box-shadow: 0px 3px 0px #08847a;
}
.flat.green:active {
  -webkit-box-shadow: 0px 1px 0px #0aa699;
  -moz-box-shadow: 0px 1px 0px #0aa699;
  box-shadow: 0px 1px 0px #0aa699;
}
.flat.green:hover {
  background-color: #099d91;
}
.flat.purple {
  background-color: #6a598d;
  -webkit-box-shadow: 0px 3px 0px #544770;
  -moz-box-shadow: 0px 3px 0px #544770;
  box-shadow: 0px 3px 0px #544770;
}
.flat.purple:active {
  -webkit-box-shadow: 0px 1px 0px #6a598d;
  -moz-box-shadow: 0px 1px 0px #6a598d;
  box-shadow: 0px 1px 0px #6a598d;
}
.flat.purple:hover {
  background-color: #645485;
}
.flat.navy-blue {
  background-color: #22262e;
  -webkit-box-shadow: 0px 3px 0px #1b1e24;
  -moz-box-shadow: 0px 3px 0px #1b1e24;
  box-shadow: 0px 3px 0px #1b1e24;
}
.flat.navy-blue:active {
  -webkit-box-shadow: 0px 1px 0px #22262e;
  -moz-box-shadow: 0px 1px 0px #22262e;
  box-shadow: 0px 1px 0px #22262e;
}
.flat.navy-blue:hover {
  background-color: #20242b;
}
.flat.pink {
  background-color: #f35958;
  -webkit-box-shadow: 0px 3px 0px #c24746;
  -moz-box-shadow: 0px 3px 0px #c24746;
  box-shadow: 0px 3px 0px #c24746;
}
.flat.pink:active {
  -webkit-box-shadow: 0px 1px 0px #f35958;
  -moz-box-shadow: 0px 1px 0px #f35958;
  box-shadow: 0px 1px 0px #f35958;
}
.flat.pink:hover {
  background-color: #e65453;
}
.flat.blue {
  background-color: #0090d9;
  -webkit-box-shadow: 0px 3px 0px #0073ad;
  -moz-box-shadow: 0px 3px 0px #0073ad;
  box-shadow: 0px 3px 0px #0073ad;
}
.flat.blue:active {
  -webkit-box-shadow: 0px 1px 0px #0090d9;
  -moz-box-shadow: 0px 1px 0px #0090d9;
  box-shadow: 0px 1px 0px #0090d9;
}
.flat.blue:hover {
  background-color: #0088ce;
}
.flat.yellow {
  background-color: #ec6507;
  -webkit-box-shadow: 0px 3px 0px #caa616;
  -moz-box-shadow: 0px 3px 0px #caa616;
  box-shadow: 0px 3px 0px #caa616;
}
.flat.yellow:active {
  -webkit-box-shadow: 0px 1px 0px #fdd01c;
  -moz-box-shadow: 0px 1px 0px #fdd01c;
  box-shadow: 0px 1px 0px #fdd01c;
}
.flat.yellow:hover {
  background-color: #f0c51a;
}  

@media screen and (max-width: 800px) {
.delivery thead {
    display: none;
  }
.delivery tr {
    display: block;
    margin-bottom: 1rem;
    border-bottom: 2px solid #e8e9eb;
  }
.delivery td {
    display: block;
    text-align: right;
  }
.delivery td:before {
    content: attr(aria-label);
    float: left;
    font-weight: bold;
  }
}