/*  Adaptive style   */

/*   1200px  */

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


/*   1024px  */

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

.main-menu li {
padding: 0 20px;
}

#header .box3 {
display: flex;
}

.logodesc {
margin:auto;
padding:0 0 0 10px;
}
}

/*   960px  */

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

}

/*   854px  */

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

#menu {
padding:0.7em 0;
}

.main-menu ul {
width:95%;
margin:0 auto;
display:block;
height:18px;
background: url(../images/menuicon.png) no-repeat;
cursor:pointer;
}

.main-menu li {
display:none;
}

.mobilemenu>ul {
width:95%;
overflow:hidden;
margin:0 auto;
display:block;
background: url(../images/menuicon.png) top 2% left no-repeat;
}

.mobilemenu li {
display:block;
float:none;
width:100%;
padding-bottom: 0.5em!important;
}

#menu li.parent > ul, #menu li.parent:hover > ul {
display: block;
position:static;
}

.leftbar, .rightbar {
width:100%;
float:none;
margin-left:0;
}

.main {
width:95%;
float:none;
margin:0 auto;
}

#footer {
padding:0 2%;
}

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

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

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

.span4 {width:99%; float:left}
.span3 {width:48%; float:left}

}


/*   768px  */

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

#header .box3 {
width:95%;
float:none;
}

#header #logo {
width:60%;
margin:0 auto;
}

#logo a, #geo, #contact {
margin:auto;
}

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


/*   640px  */

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

.span4 {
width:95%;
}
}


/*   480px  */

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

#toTop {
display:none!important;
}

.span3, .span6 {
width:95%;
}

#header #logo {
width:100%;}

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