/* Obrazky v clancich
----------------------------------------------- */
@media only screen and (max-width: 480px) {

.article .article-img-fly-left {float: none; margin: 10px 0;}
.article .article-img-fly-left img {width: 100%; margin-bottom: 10px;}

.article .article-img-fly-right {float: none; margin: 10px 0;}
.article .article-img-fly-right img {width: 100%; margin-bottom: 10px;}

}



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

#orderform {width: 94%; margin-left: 3%;}

}



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

#menu .nav-collapse ul {width: 950px; margin: 0 125px 0 0; float: right; font-size: 0.875em;}

}



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

.box-outer {width: 94%; margin-left: 3%;}
.box {width: 40%;}
.box-full {width: calc(100% - 150px);}

h1.header, h2.header {left: 35px; margin: 0;}

}



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

#container {width: 100%;}

#phone {margin: 0; left: 180px; top: 20px;}

#menu .nav-collapse ul {width: 760px; font-size: 0.75em;}
#menu .nav-collapse ul li a {margin-left: 10px;}

}



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

body {}

.slogan {font-size: 2.5em; width: 480px;}

}



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

.box {width: 415px;}
.box-full {width: calc(100% - 150px);}

#order {margin-left: -275px; position: relative; left: 50%;}

.slogan {font-size: 3.5em; width: 100%;}

}



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

.servis {display: none; visibility: hidden;}
.servis-resp {display: block; visibility: visible;}

.facebook {top: 70px; right: 50px;}
.facebook img {width: 24px;}

.instagram {top: 70px; right: 20px;}
.instagram img {width: 24px;}

}



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

#phone {left: 100px; top: 15px; padding: 6px 0 6px 0; width: 230px;}

.box-outer-more {margin-top: 100px;}
.box {padding: 35px;}
.box-full {width: calc(100% - 70px);}

}



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

#menu .nav-collapse ul li a {margin-left: 15px; font-size: 0.75em;}

}



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

body {}

}



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

.box-outer {margin-top: 100px;}
.box-img, .box-color {display: none; visibility: hidden;}
.box, .box-full {width: calc(100% - 70px);}

}



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

.article {width: 90%; padding: 5%; margin: 0;}

.article .article-column-2 {column-count: 1;}
.article .article-column-3 {column-count: 1;}
.article .article-column-4 {column-count: 1;}

}



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

body {}

}



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

#formular form .input-input {margin-bottom: 0;}
#formular form .input-antispam input.field {width: calc(100% - 113px);}

#kontakt {width: 90%; float: left; margin: 0 5%;}
#kontakt .article {padding: 0;}

#formular {width: 90%; float: left; margin: 0 5%;}
#formular form {padding-left: 0;}
#formular form .input-cell {height: 40px;}
#formular form .input-text {width: 100%; text-align: left; padding-right: 0;}
#formular form .input-input {width: 100%;}
#formular form .input-textarea {height: auto; float: left;}
#formular form .input-textarea .input-input {height: auto; float: left;}
#formular form .input-button {height: 50px; margin-top: 10px; float: left;} 
#formular form .input-button .input-text {height: 0;}

.article-side-icons {width: 100%;}
.side-icons {display: none; visibility: hidden;}
.side-icons-resp {display: block; visibility: visible;}

}



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

body {}

}



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

#order {width: calc(100% - 100px); left: 0; margin-left: 0; position: static;}
#order h3 {font-size: 1.5em;}
#order input {width: calc(100% - 56px); margin: 0 0 10px 0;}
#order input.half {width: calc(100% - 56px); margin: 0 0 10px 0;}

}



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

#kontakt {width: 96%; margin: 0 2%;}

#formular {width: 96%; margin: 0 2%;}

.slogan {font-size: 2.5em;}

}



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

.box ul.icon-list li {font-size: 1.0em; padding: 23px 0 0 80px;}

}



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

#order {width: calc(100% - 50px); padding: 25px 25px 15px 25px;}
#order h3 {font-size: 1.25em;}
#order p {font-size: 0.875em;}

}



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

.box ul.icon-list li {font-size: 0.875em; padding: 17px 0 0 80px;}

.slogan {font-size: 2.0em; width: 90%; float: left; margin-left: 5%;}

}



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

#phone {font-size: 0.75em; width: 200px;}
#phone span {font-size: 1.25em;}

.slogan {font-size: 1.5em;}

}



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

#phone {display: none; visibility: hidden;}

}



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

#order h3 {font-size: 1.0em;}
#order p {font-size: 0.75em;}

}