/* 
red  dark #b21611, light #c4211d
blue  dark #004e92, light #0b5ba9
*/

.box {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.flex {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}
.flex.space-around {justify-content: space-around;}
.flex.space-between {justify-content: space-between;}
.flex.flex-start {align-items: flex-start;}
.flex.direction-row {flex-direction: row;}
.hidden {display: none !important;}
.hidden2 {display: none;}

* { box-sizing: border-box; } 
BODY { margin: 0; font-family: 'Roboto', sans-serif; font-size: 13px; color: #424242; } 
A { text-decoration: none; color: inherit; }
IMG { max-width: 100%; display: block; }
INPUT { -webkit-appearance: none; background: none; font-family: inherit; font-weight: inherit; font-size: inherit; font-weight: inherit; color: inherit; border: 0; outline: 0; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type='number'] {
    -moz-appearance:textfield;
}
TEXTAREA { padding: 15px 10px; font-family: inherit; font-size: inherit; color: inherit; outline: none; }
INPUT::-webkit-input-placeholder { font-size: 12px; color: inherit; }
INPUT::-moz-placeholder { font-size: 12px; color: inherit; }
INPUT::-ms-input-placeholder { font-size: 12px; color: inherit; }
TEXTAREA::-webkit-input-placeholder { font-style: italic; }
TEXTAREA::-moz-placeholder { font-style: italic; }
TEXTAREA::-ms-input-placeholder { font-style: italic; }
P { margin-top: 5px; margin-bottom: 5px; line-height: 1.25; }
P:last-child { margin-bottom: 0; }
H1 { margin-top: 0; margin-bottom: 25px; font-size: 20px; text-transform: uppercase; color: #424242; }
H2 { margin-top: 0; margin-bottom: 20px; font-size: 16px; text-transform: uppercase; color: #424242; }
H3 { margin-top: 0; margin-bottom: 15px; font-size: 12px; font-weight: 500; text-transform: uppercase; color: #747474; }

#mainConteiner {width: 100%;float: left;}

.fullFrame, .container, .row { width: 100%; float: left; }
.mainFrame { width: 1183px; margin: 0 auto }
.line { display: flex; align-items: center; }
.row.dashed { padding: 30px 0; border-bottom: 1px #b1b1b1 dashed; }
.row.dashed:first-child { padding-top: 0; }
.blue, .blue H1 { font-size: 16px; color: #0a4d92; }
.infoPanel { width: 100%; float: left; padding: 10px; margin: 0 0 25px 0; background: #eee; text-align: center; font-size: 16px !important; color: #424242; border-radius: 3px; }
.error { width: 100%; float: left; padding: 10px; margin: 0 0 25px 0; background: #da5551; text-align: center; font-size: 16px !important; color: #fff; border-radius: 3px; }
.person .error { margin-bottom: 8px; }
.red { font-weight: bold; color: #da5551; }
.loading { opacity: .5; }
.submit { background: rgba(0,78,146,.6); cursor: wait; flex-direction: column; }
.spinner { position: relative; }
 .spinner .icon { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url("../images/icon/spinner_icon_100.png") no-repeat; background-size: 100% auto; animation: spin 1s infinite linear; }
.cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 101; display: flex; justify-content: center; align-items: center; font-size: 35px; color: #fff; }
.cover.start { background-color: #004e92; z-index: 201; cursor: wait; flex-direction: column; }
.start .spinner, .submit .spinner { width: 100px; height: 100px; margin-bottom: 25px; }
/* dokonceni registrace */
.done { display: block; }
.done .message { margin: 50px 0; text-align: right; font-size: 20px; color: #37ca37; }
.done .button { margin-top: 25px; }
/* obchodni podminky */
.conditionsPopup { display: none; padding: 60px 0 20px 0; background: rgba(0,0,0,.9); font-size: 13px; }
 .closeCover { width: 20px; height: 20px; position: absolute; right: 0; bottom: calc(100% + 10px); cursor: pointer; }
 .closeCover:before, .closeCover:after { content: ''; width: 100%; height: 2px; position: absolute; top: 50%; left: 0; background: #fff; }
 .closeCover:before { transform: rotate(45deg); }
 .closeCover:after { transform: rotate(135deg); }
 .conditionsPopup .mainFrame { width: 1000px; }
 .conditionsPopup .buttons { position: relative; margin-top: 0; }
 .conditionsPopup .text { max-height: 100%; overflow-y: auto; }
 .conditionsPopup .content { padding: 50px; background: #fff; color: #424242; overflow: hidden; }
.JShref { cursor: pointer; text-decoration: underline; }

/* ikony */
.arrowDown { padding-right: 17px; background: url('../images/icon/arrow-down.png') right center no-repeat; }

/* hlavicka */
HEADER { padding: 20px 0; color: #626262; }
  .hrefs { width: 60%; font-size: 20px; font-weight: 500; text-transform: uppercase;}
   HEADER .href { width: 48%; float: left; padding: 40px 0; background: #efefef; text-align: center; }
   HEADER .href:last-child { float: right; }
  .modes { float: left; display: flex; }
    .mode { min-width: 240px; padding: 21px 25px; background-color: #efefef; text-align: center; text-transform: uppercase; font-size: 18px; cursor: pointer; transition: all .3s; }
    .mode:not(:last-child) { margin-right: 10px; }
    .mode.active,
    .mode:hover { background-color: #0b5ba9; color: #fff; }
  .settings { float: right; display: flex; justify-content: space-between; font-size: 15px; }
   .setting { margin-right: 20px; display: flex; align-items: center; }
   .setting:last-child { margin-right: 0 }
   .setting { position: relative; }
    .label, HEADER .value { float: left; }
    .label { margin-right: 10px; }
    .setting:last-child .flag { margin-right: 10px; }
     .lang { cursor: pointer; }
     .lang IMG { height: 25px; border: 1px solid #969696; border-radius: 50%; }
     .langs { position: absolute; top: 100%; right: 0; display: none; z-index: 201; }
     .langs IMG { margin-top: 2px; }
    
/* navigace */
NAV { padding: 30px 0; background: #f5f5f5; font-size: 16px; text-transform: uppercase; color: #737373; }
 NAV .container { display: flex; justify-content: space-between; padding: 0 30px; }
  NAV .href { opacity: .4; position: relative; }
  NAV .href.active { font-weight: bold; opacity: 1; }
  NAV .href.valid { color: #0a4d92; opacity: 1; }
  
/* hlavni okno */
.main { padding: 40px 0; }

/* formularove prvky */
.select { width: 100%; float: left; margin: 5px 0 0 0; cursor: pointer; position: relative; }
.select .label { width: 100%; float: left; padding: 5px 5px 5px 0; background: url('../images/icon/arrow-down.png') right center no-repeat; }
.price.active .select .label { background: url('../images/icon/arrow-down-white.png') right center no-repeat; }
.select .desc { font-size: 14px; }
.options { display: none; min-width: 100%; position: absolute; top: 100%; left: 0; z-index: 101; margin: 0; list-style: none; padding: 0; background: #f9f9f9; border: 1px #ebebeb solid; }
 .options LI { min-width: 100%; float: left; margin: 0; padding: 10px; font-size: 13px; font-weight: 500; color: #424242; border-bottom: 1px rgba(0,0,0,.05) solid; transition: background .2s; white-space: nowrap; }
 .options LI:last-child { border-bottom: 0; }
 .options LI:hover, .options LI.active { background: rgba(0,0,0,.05); }
.food { font-size: 12px; border-bottom: 1px rgba(0,0,0,.1) solid; }
.food .label { margin-right: 0; padding-right: 15px; text-align: right; }
.food .desc { float: left; font-size: 12px; }
.currency .select { margin: 0; }
.currency .desc { font-size: 15px; }
.currency .label { float: right; margin-right: 0; margin-left: 5px; padding: 0; background: none; }
 
/* animace */
@keyframes toFullOpacity
{  
  from { opacity: 0; }
  to { opacity: 1; }
}
.control { -webkit-touch-callout: none;-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; }
.buttons { margin-top: 30px; }
.button { width: 300px; padding: 23px 40px; background-color: #ebebeb; background-repeat: no-repeat; font-size: 15px; font-weight: bold; text-transform: uppercase; color: #545454; }
.button.next { float: right; padding-right: 50px; background-image: url('../images/icon/arrows-right.png'); background-position: calc(100% - 40px) center; cursor: pointer; }
.button.next.fixed { position: fixed; right: 0; bottom: 20px; float: none; background-color: #0a4d92; background-image: url('../images/icon/arrows-right-white.png'); color: #fff; }
.button.next.valid { background-color: #0a4d92; background-image: url('../images/icon/arrows-right-white.png'); color: #fff; }
.button.prev { float: left; padding-right: 50px; background-image: url('../images/icon/arrows-left.png'); background-position: calc(40px) center; text-align: right; }
.info { float: left; font-size: 15px; }
.checked { min-height: 18px; padding-left: 30px; background: url('../images/icon/check.png') left top no-repeat; font-weight: 500; }
.dates { margin-bottom: 35px; font-size: 15px; font-weight: 500; color: #626262; }
 .date { width: 285px; height: 60px; position: relative; float: left; margin-right: 1.66%; display: flex; padding: 2px; background: url('../images/background/dashed-border.png') no-repeat; background-size: 100% 100%; } 
 .date:last-child{ margin-right: 0; }
 .date LABEL, .date .value { display: flex; align-items: center; }
 .date LABEL { padding: 0 15px; position: absolute; top: 0; left: 0; bottom: 0; }
 .date INPUT { flex: 1; padding-right: 20px; text-align: right; }
 .date .calendar { padding-right: 94px; background: url('../images/icon/input-calendar.png') center right no-repeat; }
 .date .control { flex-basis: 75px; background-color: #f5f5f5; cursor: pointer; }
 .time .label { flex: 2; margin-right: 0; }
 .time .value { flex: 1; justify-content: flex-start; }
 .time .control { display: flex; }
  .control .symbol { flex: 1; display: flex; align-items: center; justify-content: center; }
   .symbol.disabled, .symbol.disabledForced { opacity: 0.5; }
   .symbol.plus { padding-left: 10px; font-size: 30px; }
   .symbol.minus { padding-right: 10px; padding-bottom: 1px; font-size: 35px; }
   
.actions { margin-bottom: 75px; }
 .action { width: 23.75%; float: left; margin-right: 1.66%; display: flex; }
  .action .circle { width: 52px; height: 52px; margin-right: 15px; display: flex; align-items: center; justify-content: center; background: #b21611; font-size: 17px; font-weight: bold; color: #fff; border-radius: 50%; }
  .action .text { flex: 1; padding-right: 10px; }
   .action .head { margin-bottom: 5px; font-size: 14px; }
  
/* pokoje */ 
 .room { width: 100%; min-height: 200px; float: left; padding-bottom: 25px; border-bottom: 1px #b1b1b1 dashed; color: #747474; }
 .room:first-child { padding-top: 25px; border-top: 1px #b1b1b1 dashed; }
 .room:last-child { margin-bottom: 0; }
  .room .left { width: calc(100% - 390px); float: left; display: flex; }
  .room .image { width: 200px; position: relative; margin-right: 20px; }
    .image .red, .image .blue { width: 68px; height: 68px; position: absolute; left: 5px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; color: #fff; border-radius: 50%; }
    .image .red:hover .hint, .image .blue:hover .hint { display: block; animation: toFullOpacity .3s ease .1s forwards; }
    .image .red { background: linear-gradient(90deg, #c4211d 50%, #b21611 50%); font-size: 23px; }
    .image .blue { background: linear-gradient(90deg, #0b5ba9 50%, #004e92 50%); font-size: 16px; }
    .image .circle:first-child { top: 5px; }
    .image .circle:nth-child(2) { top: 73px; }
    .image .hint { width: auto; position: absolute; top: -55px; /*left: -35px;*/ left: 5px; display: none; padding: 20px 10px; background: rgba(0,0,0,.85); text-align: center; font-size: 12px; font-weight: 300; color: #fff; border-radius: 7px; opacity: 0; transition: opacity .25s; white-space: nowrap;}
    .image .hint:after { content: ''; position: absolute; bottom: -12px; /*left: calc(50% - 15px);*/ left: 20px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid rgba(0,0,0,.85); }
  .room .text { min-height: 150px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
   .room .head { width: 100%; float: left; margin-top: 10px; }
    .room .head IMG { float: left; margin-right: 6px; }
    .room .head IMG:last-child { margin-right: 10px; }
    .room .head .braces { float: left; margin-left: 5px; font-size: 15px; color: #424242; }
    .room .head H2 { float: left; margin-bottom: 0; } 
    .room .text .container { display: flex; }
     .room .content { flex: 1; font-weight: 300; }
     .room .equipment { float: right; }
      .room .equipment .container { display: flex; flex-wrap: wrap; }
       .room .item { float: left; margin-top: 10px; display: flex; align-items: center; justify-content: flex-start; font-size: 12px; font-weight: 300; }
        .room .hidden { display: none; }
        .item .more { cursor: pointer; }
        .item .icon { width: 30px; height: 30px; float: left; margin-right: 13px; background-color: #f5f5f5; background-position: center center; background-size: 70% auto; background-repeat: no-repeat; }
     .room P { margin: 0; }
      /* .room .select { margin-top: 20px; margin-bottom: 25px; } */
     .room .price { float: left; margin-right: 20px; display: flex; flex-direction: column; padding: 13px 22px 15px 13px; font-size: 12px; font-weight: 400; border: 1px #b1b1b1 dashed; line-height: 1; cursor: pointer; }
      .room .price.active { background-color: #0a4d92;color: #fff; border-color: #fff; }
      .room .price .old { float: left; margin-right: 10px; text-decoration: line-through;; }
      .room .price .current { float: left; font-size: 18px; }
      .room .price .info { margin-top: 5px; color: #004e92; }
      
/* balicky */
.package-list { display: flex; flex-wrap: wrap; justify-content: flex-start; }
  .package { flex-basis: 50%; display: flex; padding-top: 40px; border-top: 1px #b1b1b1 dashed; }
  .package:not(:nth-child(-n + 2)) { margin-top: 40px; }
    .packages img { margin-right: 25px; }
    .packages .text { flex: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
    .package .price { float: left; margin-top: 20px; margin-bottom: 40px; display: flex; align-items: flex-end; padding: 13px 22px 15px 13px; line-height: 1; border: 1px #b1b1b1 dashed; }
      .package .price .label,
      .package .price .value,
      .package .more { font-weight: 500; }
      .package .price .label,
      .package .more { font-size: 12px; color: #747474; }
      .package .price .value { font-size: 20px; color: #0b5ba9; }
      .package .more { padding-right: 25px; background: url("../images/icon/double-arrows.png") right center no-repeat; cursor: pointer; }
      
/* sluzby */
.services { font-size: 16px; }
 .roomsSelected { margin-bottom: 30px;  }
 .total { display: flex; align-items: center; font-size: 16px; }
  .total .container { flex: 1; }
   .total .row.flex { display: flex; align-items: center; }
   .total .head { width: 75px; float: left; margin-right: 15px; text-transform: uppercase; }
   .total .head.contact { width: auto; }
   .total .summary { float: left; margin-right: 10px; font-weight: 300; }
   .total .change { float: left; padding: 12px 10px; font-size: 12px; border: 1px #c6c6c6 dotted; }
   .total .additional { flex: 1; float: left; margin-right: 15px; font-size: 12px; font-weight: 300; }
  .total .price { position: relative; margin-left: 10px; }
   .total .spinner { width: 30px; height: 30px; position: absolute; top: calc(50% - 20px); left: -50px; }
   .total .price .value { font-size: 25px; font-weight: bold; color: #0a4d92; }
   .total .price P { text-align: right; font-size: 12px; font-weight: 300; color: #878787; }
  .total .row { margin-bottom: 10px; }
  .total .row:last-child { margin-bottom: 0; }

 TABLE { width: 100%; font-size: 13px; border-spacing: 0; line-height: 1.5; }
 TABLE .price { text-align: right; white-space: nowrap; }
 TD { padding: 0; }

 .diet { }
  .diet .container { display: flex; justify-content: space-between; }
  .diet .col { width: 160px; position: relative; }
   LABEL.checkbox { width: calc(100% - 25px); position: relative; float: left; margin-right: 10px; padding-left: 30px; cursor: pointer; }
   LABEL.checkbox:before { content: ''; width: 17px; height: 19px; position: absolute; top: calc(50% - 8.5px); left: 0; background-color: #eaeaea; border-radius: 2px; transition: background .3s; }
   LABEL.checkbox.active:before { background-color: #004e92; background-image: url('../images/icon/check-white.png'); background-position: center; background-repeat: no-repeat; }
   INPUT[type=radio] { display: none; }
   .diet .arrow { width: 15px; height: 19px; float: right; background: url('../images/icon/arrow-down.png') center center no-repeat; cursor: pointer; }
  .thin { font-weight: 300; text-transform: none; }
  .services H2 { margin-bottom: 25px; }
  .diet .col .desc { max-width: 100%; float: left; margin-top: 10px; display: none; padding: 10px; background: rgba(0,0,0,.85); text-align: left; font-size: 12px; font-weight: 300; color: #fff; border-radius: 7px; }
  
 .roomList { padding-top: 30px; }
 .roomList .container { display: flex; justify-content: flex-start; flex-wrap: wrap; }
  .roomList .col { width: 100%; float: left; margin-bottom: 20px; padding-bottom: 25px; border: 1px #dcdcdc solid; }
  .roomList .col.empty { border-color: #da5551; }
  .roomList .col:nth-child(4n) { margin-right: 0; }
  .roomList H3 { width: 100%; float: left; height: 55px; display: flex; align-items: center; justify-content: center; padding: 0 10px; background: #eee;font-size: 16px; color: #424242; }
  .roomList .row { margin-bottom: 13px; padding-left: 30px; padding-right: 20px; font-size: 13px; }
  .roomList .row:last-child { margin-bottom: 0; }
   .number .input { width: 40px; height: 25px; float: right; display: flex; justify-content: center; align-items: center; border: 1px #e6e6e6 dashed; }
   .roomList .type { max-width: 200px; padding-top: 4px; float: left; }
   .number .control { width: 38px; height: 25px; float: right; display: flex; background: #f5f5f5; }
    .number .symbol.plus { padding-left: 6px; font-size: 15px; font-weight: bold; }
    .number .symbol.minus { padding-bottom: 2px; padding-left: 6px; font-size: 30px; }
  .roomList P { padding-right: 20px; padding-left: 30px; font-size: 13px; }
  .roomList .guestTypes { width: 300px; float: left; }
  .roomList .service { width: 400px; float: right; }
   .service { font-size: 13px; }
   .service .container { display: flex; justify-content: space-between; }
   .service .list { width: 38.75%;}
    .service .row { margin-bottom: 8px; }
    .service .row:last-child { margin-bottom: 0; }
     .service .desc { max-width: 64%; float: left; padding-top: 4px; }
     .service .price { float: right; margin-right: 4%; padding-top: 4px; text-align: right; }
   .service .notes { width: 50%; min-height: 175px; display: flex; flex-direction: column; }
    .service P { margin: 0; }
    .notes TEXTAREA { width: 100%; min-height: 150px; margin-top: 15px; border: 1px #b5b2b2 dashed; }
 
.customer { font-size: 13px; }
 .form .container { margin-bottom: 25px; display: flex; justify-content: space-between; }
  .person, .company { width: 45%; }
  .person H2 { font-size: 20px; }
  .company H2 { margin-bottom: 25px; padding-top: 5px; font-size: 12px; font-weight: 500; }
  .form .row { display: flex; flex-wrap: wrap; }
   .form INPUT { width: 100%; height: 43px; margin-bottom: 8px; padding: 0 12px; border: 1px #c1c1c1 dotted; }
   .form INPUT.invalid { border: 2px #da5551 solid; }
   INPUT:required:invalid { border-left: 2px #da5551 solid; }
   .form INPUT:last-child { margin-bottom: 0; }
   .form .half INPUT { flex: 1; }
   .form .half INPUT:first-child { margin-right: 14px; }

.final { font-size: 13px; }
.final H3 { margin: 20px 0; font-size: 13px; color: #004e92; }
 .final .half.flex { display: flex; justify-content: space-between; margin-bottom: 20px; }
 .final .desc { flex: 1; padding-right: 20px; }
 .final .price { text-align: right; font-weight: bold; }
 .final .priceRow { margin-top: 40px; font-size: 16px; align-items: center; }
 .priceRow .desc { font-weight: bold; }
 .smallDesc { font-size: 12px; font-weight: 300; font-style: italic; color: #878787; }
 .priceRow .price { margin-left: 25px; font-size: 22px; font-weight: bold; color: #0a4d92; text-transform: uppercase; }
 .final .buttons { position: relative; display: flex; justify-content: space-between; align-items: center; padding-top: 40px; }
 .conditions { position: absolute; top: 0; right: 0; display: flex; align-items: center; text-decoration: underline; cursor: pointer; }
 .conditions INPUT { width: 20px; height: 20px; margin: 0 10px 0 0; border: 1px #c1c1c1 dotted; }
 .conditions INPUT:checked { background: url('../images/icon/check.png') center no-repeat; background-size: 12px 12px; }

 @keyframes spin { 
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }