/*big screen*/
@media only screen and (min-width: 1700px) {

body {line-height: 1.8em; font-size:1vw}
h1 {font-size: 5.8em;}
h2 {font-size: 3.2em;}




}
@media only screen and (max-width: 1200px) {
    body {font-size: 1.2vw}
    .work-text p {width: 17em;}
}

@media only screen and (max-width: 700px) {
body {font-size: 14px}
h1 {font-size: 2.5em;}
.topbar, .logo {position: absolute;}
.topnav {display: none;}
#ham {display: block;}
.socs {right: 0em;}
.socs img{margin-right: 1em;}
.intro h2 {font-size: 2.2em; margin: 0; padding:0 10%}
.logo { width: 70%; top: 0.8em; left: 3.6%;}
.intro {padding-top: 3em;}
.intro .left {width: 100%;}
.circle {        top: 1.3em; width: 42%; left: 56.6%;}
.intro .right {width: 100%; padding-top: 3.3em;}
p.oblasti {margin: 0; padding:10%; width: 100%; box-sizing: border-box; font-size: 0.8em;}
.onas { padding-top: 0em;}
.info h3.small {text-align: center;}
.onas .col1 {width: 100%; padding:10%; text-align: left;}
.onas .col2 {width: 100%; margin-left: 0%; margin-top: 4em;}
.banners {padding-top: 7em;}
.banners .col {width:100%}
.icons .icon {width:100%}

.intro img.blob1 { top: 12em; margin-top: 1vw; width: 92%;}
.foto {top: 8vw;}
.orn3 {
position: absolute;
        top: 84em;
        width: 17%;
        transform: rotate(-14deg);
        left: 77%;
        z-index: 200;}
.orn4 {position: absolute;
        top: 80vw;
        transform: scale(1.5);
        width: 8em;
        transform: rotate(14deg) scaleX(-1);
        left: 68%;
        z-index: 20;}
.orn7 {
    position: absolute;
    top: 86em;
    width: 18%;
    transform: rotate(20deg);
    left: -1%;   }     

.info {overflow: hidden;}
.info .row {display: block; padding-top: 0;}
.info .col {width:100%; display:block; position: relative; }
.info .col1 {padding: 5em 0 8em;}
.info .col1 > div { width: 90%; margin: auto;}
.info .orn1 { top: -1em; width: 45%; left: 78%;}
.info p { position: static; top:0; left:0; right: 0; margin: auto; transform: none; text-align: center; }
.info h4 {text-align: center;}

.motto .motto-title { font-size: 1.7em;}

.posts .grid {display: grid; grid-template-columns: 1fr 1fr}
.posts {}
.posts h3 {
    font-size: 1.1em;}

.contact form .inline {width: 100%;}
.contact form .inline span {width: 100%;}

.foot .col {width: 100% ; margin-bottom:4em}
.foot .col2 {display: none;} 
.foot {font-size: 0.8em;}

.orn5 {top: 21em; width: 18vw; left: 72%;}

.orn6 { bottom: 3em; top:auto; width: 14vw;  left: 21%; }
.single {
    margin: 0em 0 0 0;
    width: 100%;
    overflow: hidden;
    padding: 8em 10%;
    box-sizing: border-box;}
.single h1 {font-size: 2em;}
.single .col {width: 100% }
.single .col1 {padding: 0;}
.single .col2 {display: none;}



.contact form .tag {float: none; margin-bottom: .5em;}
select {width: 100%;}
input[type=text], input[type=email], select {font-size: 1em;}


}
  

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


html { font-size: 13px; }
h2 {font-size: 2.2em;}
.posts .grid {display: grid; grid-template-columns: 1fr}

}