/*MEDIAAA------------------------------------------*/

@media only screen and (min-width:1500px){
.logo {font-size:1em}

}
@media only screen and (max-width:1700px){
header, .hometop , .tail, footer, .work-detail, #blog, .main-de {width:1352px;}

.hometop3 {width: 672px;} 
.hometop3 img {margin-left:-23%; margin-top: -21%; }
.grid {width:1360px; }

}



@media only screen and (max-width:1020px){
body {font-size:16px}
h2 {font-size: 1.6em;}
.introtext h1 {font-size:3.4em}
.toggle-menu { padding: 1.6em 3em; top:0}
.caption { bottom: 1.5em; left: 2.3em;}
.caption h3 {font-size: 0.8em;}
.cara {display:none}
.menu-center-cont {margin-left: 9%; width: 93%;}
.contact-in-menu {margin-left:11%}
.about {margin-left: 14%;}
.example-right {  width: 46%;  padding: 0em 3em 3em 4em;}
.project-imagery-dark {background-position: -17% 0%;}

}

@media only screen and (max-width:800px){
header, .hometop , .tail, footer, .work-detail, #blog, .main-de {width:98%;}
h1 { font-size: 2.5em;}
nav {display:none}
.example-left { width: 104%;  margin-left: -9%;}
.example-right {width: 100%; padding: 4em 10% 0em 10%;}
.project-imagery-dark {padding: 6em 2em 7em 10%;}
.project-imagery-dark .text {width: 60%;}
.mobiles img {width: 42%;}

.example.sqares .example-left { width: 100%;  margin-left: 0;}

.posters-cont {width:80%}
}



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

.main-title {top:25%}
.main-title h1 {font-size: 2.2em;}
.toggle-menu { padding: 1.4em 1em; left:0}
.logo { right: 6%; top: 1.1em;}
.introtext {  height: auto;  padding-bottom: 5em;}
.introtext .quote {    width: 92%; padding: 11em 4% 0 4%; }
.introtext h1 { font-size: 2.3em;}
.recent {display:none}
.caption {width: 90%;}

.row-works {display:block}
.col {width:100%}

.work { height: auto; margin-bottom: 0.2em;}
.fullwork {height: auto;}

.skills {    padding: 3em 4%;}
.skills div { width: 100%;}

.menu-center-cont { margin-left: 0; width: 100%;}
.contact-in-menu {margin: auto; float: none; text-align: left;  width: 70%;   }

.about {    float: none; text-align: left; width: 70%; margin-top: 2em;}
.main-title h2 {font-size: 1em;}
.chapter {padding: 4em 10% 2em 10%;}
.chapter-left {width: 100%;}
.chapter-left h2 {margin-bottom: .8em;}
.chapter-right { width: 100%;  margin-top: 6em;}
.chapter-right h1, .example h1 {width: 96%;}
.example { margin-top: 4em;}
.screens img {width: 90%;}
.project-imagery-dark .text { width: 100%;}
.project-imagery-dark {background-position: 20% 20%; background-size: 510%;}
.mobiles img { width: 103%;  margin: 0 3% 0 -7%;}
.mobiles { padding: 4em 0;}
.foot-image { width: 240%; margin-left: -90%;}
.skills { padding: 3em 10%;}
.skills .contact, .skills a {line-height: 1.5em;}
.single-page {margin-top:9em}
.ux {font-size: 1.2em;}



}