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


html {line-height: 2.3em; font-size:1vw}
h1 {font-size: 4.3em; line-height: 1.1em;}
h2 {font-size: 2.3em; line-height: 1.1em;}
h3 {line-height: 1.2em;}
.container {width:80%}
.left-content { padding-left: 10%;}

}

@media only screen and (max-width: 1280px) {
.introtext h1 { font-size: 3.7rem;}
}


@media only screen and (max-width: 900px) {
html {font-size: 14px}
.container {width:86%}
.col {width:100%}
#ham {display:block}
#topnav {display:none}
.bg {background-size: 200%; background-position: 58% bottom;}
.mouse-wrap {display:none} .mouse {display:none}
.graphs {height: 30%;}
.graph {width: 19%; margin: 0 0.5%;}

section.kdojsme { display: block;}
section.kdojsme .right { height: 34em;}    

.feat {width: 45%;}  
.boxed-claim {top:50%}  


}


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

html { font-size: 13px;  font-weight: normal;}

p {font-size:1.1em}
h1 {font-size: 2.3em;}


.menu .kontakt {display: block;
width: 100%;
bottom: 0;
top: auto;
z-index: 2000;
transform: translateY(0);
height: 30%;}

.menu nav {width:100%; display:block; left:0; }



.intro {height: 93vh;}
.bg { background-size: 250%; background-position: 68% bottom;}

.introtext { width: 90%; top:30%}
.introtext button {width:84%}
.introtext .but-color {margin-bottom: 10px;}
.introtext h1 { font-size: 33px;}
.graphs { height: 37%;}
.graph {width: 24%; margin: 0; }
.graph .figures { font-size: 22px;}
.graph .billions {font-size: 10px;}
.graph .caption {font-size: 8px;}


section.kdojsme .left-content {padding-top: 6em; text-align: center;}
.left-content { padding: 6em 7%;}
section.kdojsme .right { height: 21em;}

section.zabyvame { display: block;text-align: center;     overflow: hidden; padding-top: 2em; padding-bottom: 4em;}
section.zabyvame .left { width: 100%; display:block; height:auto; background:none; padding:2em 7%}
section.zabyvame .left h2 {position:static; }
section.zabyvame .right { width: 100%; padding: 0 7%;}

.zabyvame .row { display: block; margin: 2em 0;}
.zabyvame .col {width: 100%; display: block; margin:0 0 2em 0}
.zabyvame .num, .zabyvame .row.long .num { float: none; width: auto; margin-right:0; margin-bottom: 0.1em;}
.zabyvame .tex {width:100%}
 

.feats {height:auto; padding:1em 0; text-align: center;}
.feat {width: 100%; margin: 0 0 2em 0;}
.statsepani p {width:100%}

.swiper-slide .illustration {display:none}
.description { 
    width: 100%;
    padding: 9em 7% 8em 7%;
    text-align: center;}
    
.swiper-slide .description h2 { width: 80%;  margin: 0 auto 1.5em;}
.swiper-button-prev, .swiper-button-next {top:15%}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {text-align: center; position: absolute;
    bottom: 3em;
    left: auto;
    width: 100%;
    top: auto;
    right: 0;
    padding-left: 0;}

.swiper-title {
    top: 1em;
    width: 75%;
    left: 0; right: 0; margin: auto;
    padding:0;
    text-align: center;
}

    

section.proc { display: block; overflow: auto;}
section.proc .left-content { padding: 4em 7%; text-align: center;}
section.proc .right {height:auto; padding:2em; padding: 2em 0;}
.boxed-claim {position: static; width: auto; margin-left: 7%; display: inline-block;}

section.kontakt {display: block;}
.map {height: 14em;}

footer {font-size: 16px;}
.foot1 .left, .foot1 .right {width:100%; margin-bottom:1em}
.foot1 .right {float:left; text-align: left; margin-top:2em}
.foot2 {height:auto; margin:2em 0 0; overflow:auto}
.foot2 .logo-foot { position: static; top: 0; transform: none; margin-bottom: 1em;}
.foot2 p {float:left; text-align: left; margin-top:2em; position:static}




}