input#input-width,
input#input-columns,
input#input-space {
    background: #eee none repeat scroll 0 0;
    border: medium none;
    border-radius: 0;
    color: #555;
    float: left;
    font-family: roboto;
    font-size: 14px;
    height: 29px;
    margin: 1px 0 0 5px;
    padding: 5px;
    width: 40px;
    text-align: right;
}

div.element-tools {
    background: #333 none repeat scroll 0 0;
    display: inline-block;
    padding: 10px;
    width: auto;
    position: relative;
    margin: 0 15px 9px 0;
}

div.element-tools::after {
    border-color: #333 transparent;
    border-style: solid;
    border-width: 16px 0 0 16px;
    bottom: -16px;
    content: "";
    display: block;
    left: 50px;
    position: absolute;
    width: 0;
    z-index: 50000;
}

.element.edit {
    border: 1px dashed rgba(0, 0, 0, 0.2);
}

#BtnColumns,
#BtnItems {
    background: #000 none repeat scroll 0 0;
}

div.element-tools .button {
    font-size: 13px;
    margin: 0 10px;
    padding: 5px 10px;
}

.element-tools div.desc {
    color: #999;
    float: left;
    font-size: 12px;
    margin: 7px 5px 0 15px;
}

.element-tools div.element-editor.absolute {
    background: #e83a3a none repeat scroll 0 0;
    color: #fff;
    font-size: 12px;
    height: 27px;
    left: 0;
    margin: 0;
    padding: 5px 10px;
    position: absolute;
    top: -27px;
}

.element-tools img {
    width: 30px;
    opacity: 0.6;
    float: left;
}

.element-tools img:hover {
    opacity: 0.9;
    cursor: pointer;
}

.element-tools img.active {
    opacity: 0.9;
    background: #000;
    cursor: auto;
}

div.block {
    display: inline-block;
    margin: 0;
    /*overflow: hidden;*/
    position: relative;
    width: 100%;
    margin: 0 0 -4px;
    min-height: 40px;
}

.legend {
    background: yellow none repeat scroll 0 0;
    font-size: 12px;
    padding: 2px 4px;
    position: absolute;
    top: 35px;
}

body {
    color: #555;
    font-size: 15px;
    background: #ededed;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    min-height: 100%;
}

div.content-width {
    margin: 0 auto;
    max-width: 1100px;
    padding: 35px 0;
    width: 100%;
}


/* wireframe */

.wireframe.type-1 div.content-width {
    padding: 15px 0;
}

.wireframe.type-1 .text-edit {
    margin: 0;
}

.wireframe-title.size-1 {
    padding: 30px 15px;
}

.wireframe-title.size-2 {
    padding: 60px 15px;
}

.wireframe-title.size-3 {
    padding: 120px 15px;
    font-size: 34px;
}

.wireframe.type-1 .block:nth-child(even) {
    background: rgba(255, 255, 255, 0.5);
}

.wireframe .content-width>.element>.wireframe-title {
    background: none !important;
}

.wireframe-title {
    text-align: center;
    background: #c1c1c1;
    padding: 15px;
    font-size: 20px;
    font-weight: 600;
    display: none;
}

.wireframe.type-1 .slider.block .slider-text.content-width div.element div.wireframe-title {
    text-align: center;
    padding: 15px;
    font-size: 20px;
    font-weight: 600;
    color: #555;
    display: none;
}

.wireframe.type-1 div.slider-text.content-width {
    display: none;
}

.wireframe.type-2 .wireframe-title {
    display: none;
}

.wireframe.type-1 .wireframe-title {
    display: block;
    margin: 5px 0;
}

.wireframe.type-1 .slider .wireframe-title {
    display: block;
    margin: 0;
}

.group .wireframe-title {
    background: #999;
    font-size: 16px;
    color: #CCC;
}

.wireframe.type-1 .element.description p,
.wireframe.type-1 .element.header h2,
.wireframe.type-1 .element.buttons .button {
    box-sizing: border-box;
    padding: 15px 18px;
    display: none;
}

.slider.block div.content-width {
    padding: 0;
}

.wireframe.type-1 .slider .element.slider-image {
    background: #d1d1d1;
}

.wireframe.type-1 .slider .element.slider-image img {
    display: none;
}

.wireframe.type-1 div.content-width {
    padding: 15px 0;
}

.wireframe.type-1 .slider div.content-width {
    padding: 0;
}

.wireframe.type-1 div.content-width.full-width {
    max-width: inherit;
}

div.element.slider-image {
    padding: 0;
}

.wireframe.type-1 div.content-width.full-width .module {
    margin: 0;
    padding: 0;
}

.wireframe.type-2 .module div.element div.atom img,
.wireframe.type-2 .element.slider-image img {
    opacity: 0;
}

.wireframe.type-2 .element div.image,
.wireframe.type-2 .element.slider-image {
    position: relative;
    background: #bbb;
}

.wireframe.type-2 .element div.image::after,
.wireframe.type-2 .element.slider-image::after {
    background-image: url("../media/icon/general/image-symbol-2.svg");
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    background-position: center center;
}

.wireframe.type-2 h2.atom.text-edit,
.wireframe.type-2 h3.atom.text-edit,
.wireframe.type-2 div.atom.text-edit.introtext,
.wireframe.type-2 div.atom.text-edit.readmore {
    color: #555 !important;
}

.wireframe.type-2 .block button {
    background: #555;
}

.wireframe.type-2 div.atom.text-edit.readmore {
    background: #ccc !important;
}

.wireframe.type-2 div.text-edit.button {
    color: #ccc !important;
    background: #555 !important;
}


/* wireframe END */

.module.blank .element {
    border: 1px dashed rgba(0, 0, 0, 0.2);
    /*padding: 50px 40px;*/
    text-align: center;
    color: rgba(0, 0, 0, 0.4);
    height: 100%;
    justify-content: center;
    align-items: center;
}

.module.blank {
    /*min-width: 50%;*/
    padding: 6px;
    width: 100%;
}

div.element.group,
.full-width div.element {
    padding: 0;
}

.slider .content-width {
    padding: 0;
}

div.content-width.full-width {
    max-width: none;
}

div.content-width.full-width .module {
    margin: 10px 0 0 0;
    padding: 0 10px;
}

div.content-width.full-width .size-100 {
    padding: 0;
}

div.content-width.full-width .module1:first-child {
    margin: 0;
    padding: 0;
}

[class*="item"] img {
    height: auto;
    width: 100%;
}

.slider-image img {
    float: left;
    width: 100%;
}

div.slider-image {
    display: inline-block;
}

.block.slider div.slider-text {
    color: #fff;
    left: 0 !important;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    z-index: 5;
    padding: 0;
    font-size: initial;
    transform: translateY(-50%);
}

.block h1 {
    font-size: 50px;
    font-weight: 700;
    width: 100%;
}

.block h2 {
    font-size: 40px;
    font-weight: 700;
    width: 100%;
}

.block h3, .kontakt {
    font-size: 23px;
    font-weight: 700;
    width: 100%;
}

.block.slider div.slider-text p {
    font-size: 23px;
    font-weight: 700;
    margin: 0 10px 15px;
    color: #fff;
    text-align: center;
}

p.description {
    font-size: 23px;
    font-weight: 700;
    margin: 0 10px 15px;
    text-align: center;
}

.full-width div.tools-block {
    right: 5px !important;
}

.menu .tools-block,
.slider .tools-block {
    height: 46px;
    margin-top: -23px;
}

.tools-block {
    height: 55px;
    left: initial !important;
    margin-top: -22.5px;
    position: absolute;
    right: -100px !important;
    top: 50% !important;
    width: 95px;
    z-index: 1000;
}

#app button.remove-block {
    background: #fff url("../media/icon/general/close.svg") no-repeat scroll center center / 35px auto;
    border: 1px solid rgba(0, 0, 0, 0.3);
    float: right;
    height: 45px;
    margin-bottom: 10px;
    opacity: 0;
    width: 45px;
}

#app button.edit-block {
    background: #fff url("../media/icon/general/setting.svg") no-repeat scroll center center / 35px auto;
    border: 1px solid rgba(0, 0, 0, 0.3);
    float: left;
    height: 45px;
    margin-bottom: 10px;
    opacity: 0;
    width: 45px;
}

#app button.delete-modul {
    background: #fff url("../media/icon/general/close.svg") no-repeat scroll center center / 22px auto;
    border: medium none;
    display: none;
    height: 30px;
    margin-bottom: 10px;
    opacity: 0;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
}

#app .module.blank:hover button.delete-modul:hover {
    opacity: 1;
}

#app .module.blank:hover button.delete-modul {
    opacity: 0.6;
}

.create-icon {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    display: inline-block;
    height: 100px;
    width: 100px;
	cursor: pointer;
}

.create-icon img {
    width: 100%;
	height: auto;
}

#app .module.blank:hover span {
    display: none;
}

#app .block:hover .tools-block .visible {
    opacity: 0.6;
    border-radius: 10em;
}

#app .block:hover .visible:hover {
    cursor: pointer;
    opacity: 1;
}

.visible {
    background-color: #fff;
    visibility: visible;
    z-index: 2000;
}

.block .text-edit {
    border: 1px dashed rgba(0, 0, 0, 0);
    cursor: pointer;
    margin: 0;
    overflow: hidden;
    padding: 5px;
    position: relative;
}

.block .text-edit:hover {
    border: 1px dashed rgba(0, 0, 0, 0.5);
}


/* Basic layout items and module */

.slider .module1,
.slider .size-100 {
    margin: 0;
    padding: 0;
}

.module {
    padding: 5px;
    box-sizing: border-box;
    flex-basis: 0;
    flex-grow: 1;
}

.full-width .module {
    padding: 0;
}

.item {
    box-sizing: border-box;
    padding: 10px;
}

.spacer {
    min-height: 20px;
}

.type-menu [class*="col-"] {
    padding: 0;
    width: auto;
}

.type-menu.horizontal {
    flex-direction: row;
}

.type-menu.vertical {
    flex-direction: column;
}

.type-menu.nobutton button,
.type-menu.nobutton .button {
    background: none;
}

span.button::before {
    background-image: url("../media/icon/blocks/strategy.svg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    display: inline-block;
    float: left;
    height: 20px;
    margin-right: 5px;
    vertical-align: initial;
    width: 20px;
    filter: invert(100%);
}

span.button.i-home::before {
    background-image: url("../media/icon/blocks/home.svg");
}

span.button.i-reference::before {
    background-image: url("../media/icon/blocks/reference.svg");
}

span.button.i-contact:before {
    background-image: url("../media/icon/blocks/contact.svg");
}

span.button.i-meeting:before {
    background-image: url("../media/icon/blocks/meeting.svg");
}

span.button.i-gallery:before {
    background-image: url("../media/icon/blocks/gallery.svg");
}

span.button.i-strategy:before {
    background-image: url("../media/icon/blocks/strategy.svg");
}

.nobutton span.button::before {
    filter: invert(0);
    opacity: 0.7;
}

[class*="col-"],
.item {
    -moz-box-flex: 1;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.col-1 {
    width: 100%;
    flex: 0 0 100%;
}

.col-2 {
    width: 50%;
    flex: 0 0 50%;
}

.col-3 {
    width: 33.33%;
    flex: 0 0 33.33%;
}

.col-4 {
    width: 25%;
    flex: 0 0 25%;
}

.col-5 {
    width: 20%;
    flex: 0 0 20%;
}

.col-6 {
    width: 16.66%;
    flex: 0 0 16.66%;
}

.col-7 {
    width: 14.28%;
    flex: 0 0 14.28%;
}

.col-8 {
    width: 12.5%;
    flex: 0 0 12.5%;
}

.col-9 {
    width: 11.11%;
    flex: 0 0 11.11%;
}

.col-10 {
    width: 10%;
    flex: 0 0 10%;
}

.element.header {
    margin: 0;
}

.element.header {
    margin: 0;
}


/*div.module:hover {
    background: rgba(0,0,0,0.05);
}*/

.span3:nth-child(even) .content {
    background: rgba(255, 255, 255, 0.8);
}

.image {
    margin: 0;
    font-size: 0;
}

.delete h3 {
    margin: 0 0 5px 0;
}

div.content {
    background: #fff none repeat scroll 0 0;
    display: block;
    margin: 0;
    overflow: hidden;
    padding: 20px 15px;
}

.element .item>.content {
    /*display: flex;
	flex-flow: row wrap;*/
    display: block;
}

.element.align-right .item .content {
    /*flex-direction: row-reverse;*/
    float: rigth;
}

.element .atom {
    float: left;
}

.element.align-right .atom.type-button {
    float: right;
}

.element.align-center .atom {
    float: none;
}

.element .group {
    overflow: hidden;
    padding: 0 5px;
    width: 100%;
    float: left;
}

.element.align-center .group {
    margin: 0 auto;
    float: none;
}

.element.align-right .group {
    float: right;
}


/* .element .item > .content {
    display: flex;
}

.element.align-center .item > .content {
    display: block;
} */


/* smszat*/

.content .readmore {
    background: #0491b9 none repeat scroll 0 0;
    display: inline-block;
    float: right;
    font-size: 14px;
    margin: 10px 5px 0;
    padding: 6px 15px;
    color: #fff;
}


/* smszat END */

.block .button,
.block .atom button,
.block .atom .date {
    background: #0491b9 none repeat scroll 0 0;
    display: inline-block;
    font-size: 14px;
    margin: 5px;
    padding: 6px 15px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    vertical-align: top;
    border: 1px dashed rgba(0, 0, 0, 0);
}

.block .button.style-1,
.block .atom button.style-1 {
    background: none;
    color: #0491b9;
}

.block .button.style-1,
.block .atom button.style-1 {
    padding-left: 0;
    padding-right: 0;
}

.block .atom .date {
    background: none;
    vertical-align: top;
    color: inherit;
    margin-left: 0;
    margin-right: 0;
    padding: 6px 5px;
    border-radius: 0;
}

.block .atom.large .date {
    font-size: 17px;
    padding: 12px 10px;
}

.block .large .button,
.block .atom.large button,
.block .atom.large input {
    font-size: 17px;
    padding: 12px 30px;
    border-radius: 3px;
}

.element.slider-image,
.atom.image {
    overflow: hidden;
}

.align-center .content[class*="size-"] {
    margin: 0 auto;
}

.atom[class*="size-"]>* {
    width: 100%;
}

.atom[class*="size-"] {
    padding: 5px;
}

.atom.image[class*="size-"] {
    padding: 0;
}

.atom:not([class*="size-"]) {
    clear: both;
}

div.content-width {
    margin: 0 auto;
    max-width: 1100px;
    padding: 35px 0;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    position: relative;
}

.element {
    overflow: visible;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    padding: 0 6px;
}

.atom input,
.atom textarea {
    border: 0 none;
    border-radius: 2px;
    color: #777;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    outline: medium none;
    padding: 6px 15px;
    font-family: inherit;
}

.slider.block {
    font-size: 0;
}

.slider.block .element {
    font-size: initial;
}

.align-center,
.align-center .atom>* {
    text-align: center;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}


/* experiment */

.atom.align-center[class*="size-"] {
    clear: both;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.align-center .atom.image[class*="size-"] {
    clear: both;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.element.align-right .atom[class*="size-"] {
    float: right;
}


/* experiment END */


/* Skills */

.element .icon-svg {
    opacity: 0.7;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.element .content .icon-svg {
    padding: 5px 5px 15px 5px;
}

.element .content .image.icon-svg.round {
    background: #fff none repeat scroll 0 0;
    border-radius: 50rem;
    padding: 15px;
    margin-bottom: 10px;
}


/*.element.align-center .atom {
    float: none;
}*/

.icon-svg {
    padding: 0;
}

.content.no-bg {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    padding: 0;
}

div#app {
    display: inline-block;
    overflow: hidden;
}


/* Míra 15.6.2017 */

#popup {
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
    opacity: 0;
    position: fixed;
    bottom: 0;
    z-index: 999;
}

#popup:hover {
    opacity: 1;
}

#blockpicker,
#elementpicker {
    display: none;
    background: rgba(0, 0, 0, 0.75);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

.picker_wrapper {
    width: 75%;
    background: #FFF;
    margin: 0 auto;
    margin-top: 10%;
}

.picker_wrapper,
.sidebar {
    min-height: 250px;
}

.nav {
    width: 75%;
    float: right;
    height: 3em;
}

.sidebar {
    width: 25%;
    background: rgba(0, 0, 0, .05);
}

.element .size-5,
.module.size-5 {
    width: 5%;
    flex: 0 0 5%;
}

.element .size-10,
.module.size-10 {
    width: 10%;
    flex: 0 0 10%;
}

.element .size-15,
.module.size-15 {
    width: 15%;
    flex: 0 0 15%;
}

.element .size-20,
.module.size-20 {
    width: 20%;
    flex: 0 0 20%;
}

.element .size-25,
.module.size-25 {
    width: 25%;
    flex: 0 0 25%;
}

.element .size-30,
.module.size-30 {
    width: 30%;
    flex: 0 0 30%;
}

.element .size-33,
.module.size-33 {
    width: 33.33%;
    flex: 0 0 33.33%;
}

.element .size-35,
.module.size-35 {
    width: 35%;
    flex: 0 0 35%;
}

.element .size-40,
.module.size-40 {
    width: 40%;
    flex: 0 0 40%;
}

.element .size-45,
.module.size-45 {
    width: 45%;
    flex: 0 0 45%;
}

.element .size-50,
.module.size-50 {
    width: 50%;
    flex: 0 0 50%;
}

.element .size-55,
.module.size-55 {
    width: 55%;
    flex: 0 0 55%;
}

.element .size-60,
.module.size-60 {
    width: 60%;
    flex: 0 0 60%;
}

.element .size-65,
.module.size-65 {
    width: 65%;
    flex: 0 0 65%;
}

.element .size-70,
.module.size-70 {
    width: 70%;
    flex: 0 0 70%;
}

.element .size-75,
.module.size-75 {
    width: 75%;
    flex: 0 0 75%;
}

.element .size-80,
.module.size-80 {
    width: 80%;
    flex: 0 0 80%;
}

.element .size-85,
.module.size-85 {
    width: 85%;
    flex: 0 0 85%;
}

.element .size-90,
.module.size-90 {
    width: 90%;
    flex: 0 0 90%;
}

.element .size-95,
.module.size-95 {
    width: 95%;
    flex: 0 0 95%;
}

.element .size-100,
.module.size-100 {
    width: 100%;
    flex: 0 0 100%;
}

* {
    box-sizing: border-box;
}

.blog .item,
.item.flex {
    display: flex;
}

.category .item {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.module.size-100 .col-1 div.content.size-50 {
    padding: 40px 35px;
}

.menu .content-width {
    padding: 10px 0;
}

.timeline .content {
    background: none;
}

.type-menu .item {
    -moz-box-flex: inherit;
    flex-basis: auto;
    flex-grow: inherit;
    max-width: 100%;
    padding: 0;
}

.type-menu.align-center {
    justify-content: center;
}

.type-menu.align-right {
    justify-content: flex-end;
}

.type-menu.rounded button {
    border-radius: 10em;
}


/* Míra 2.7.2017 */

.zoomHelper {
    float: left;
    width: 20%;
    height: 1px;
}

.zoomBody {
    float: left;
    width: 60%;
    zoom: 60%;
}