/* CSS Document */

:root {
  --dark-grey-color: #393939;
  --orange-color: #e08053;
  --green-logo-color: #24757b;
}

* {margin: 0; padding: 0; list-style-type: none; text-decoration: none; font-family: Open Sans, Open-Sans-Fallback, sans-serif; font-weight: 500;}
.material-icons {font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 16px !important; display: inline-block; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; vertical-align: middle;
}

html, body {height: 100%;}

.hcenter {margin: 0 auto; width: 100%;}
.clearfix:before, .clearfix:after {content: ""; display: table;}
.clearfix:after {clear: both;}

h1 {overflow: hidden; width: 1px; height: 1px;}
h2 {font-size: 3em; font-family: 'Dancing Script', cursive; font-style: italic;}
h3 {font-size: 2em; font-family: 'Dancing Script', cursive; font-style: italic;}
h4 {font-size: 1.2em; font-weight: 600; font-style: italic;}

strong, td.contact-header {font-weight: bold;}
fieldset {border: 0;}
.ralign {text-align: right;}
.dottedbottom {border-bottom: dotted 2px black;}
.margtop10 {margin-top: 10px;}
.italic {font-style: italic;}
.orange {color: var(--orange-color); font-weight: bold;}

#top-stripe {width: 100%; height: 40px; background-color: #f7f7f7; color: var(--dark-grey-color); font-size: 13px;}
#top-stripe .hcenter {max-width: 1450px;}
#top-info div, #social-media a {display: inline-block;}
#social-media {margin-left: 35px; height: 40px; width: 100px; float: left; }
#social-media a {display: inline-block; width: 30px; height: 40px;}


#facebook-link {background: url(../images/facebook-grey.png) no-repeat center center; background-size: 18px;}
#facebook-link:hover {background: url(../images/facebook-blue.png) no-repeat center center; background-size: 18px;}
#instagram-link {background: url(../images/instagram-grey.png) no-repeat center center;  background-size: 18px;}
#instagram-link:hover {background: url(../images/instagram-color.png) no-repeat center center; background-size: 18px;}

#top-info {position: relative; float: right; margin-right: 35px; height: 40px;}
#top-info .material-icons {color: #aaa; padding: 12px 5px; margin-left: 20px;}
#top-info div span {position: relative; top: 2px;}
#top-info span a {color: var(--orange-color); }
#top-info span a:hover {border-bottom: solid 1px var(--orange-color);}

#main-picture-section {width: 100%; height: 50%; min-height: 300px; background: url(../images/emkafe-main.jpg) no-repeat center center; background-size: cover;}
#main-picture-section .hcenter {max-width: 1450px; position: absolute;}

#navigation {position: relative; text-align: right; padding-top: 12px; float: right;}
#navigation li {display: inline; margin-right: 35px;}
#navigation a {padding-bottom: 8px; text-transform: uppercase; color: var(--green-logo-color); font-size: 16px; font-weight: bold; transition: opacity 300ms, transform 300ms;}
#navigation a:active, #navigation a:hover, .navcurrent {border-bottom: 3px solid var(--green-logo-color); transition-duration: 0.25s; --webkit-transition-duration: 0.25s; transform-origin: center;}

@media (max-width:600px) {
  #navigation {display: none;}
}

/*
#navigation {position: relative; text-align: right; padding-top: 30px;}
#navigation li {display: inline; margin-right: 35px;}
#navigation a {padding-bottom: 10px; text-transform: uppercase; color: var(--green-logo-color); font-size: 16px; font-weight: bold; transition: opacity 300ms, transform 300ms;}
#navigation a:active, #navigation a:hover {border-bottom: 2px solid var(--green-logo-color); transition-duration: 0.25s; --webkit-transition-duration: 0.25s; transform-origin: center;}
*/

#logo-circle {width: 300px; height: 300px; position: relative; top: 100%; left: 50%; transform: translate(-50%,-50%); background: white; border-radius: 150px;}
#logo-inner {width: 270px; height: 270px; position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 135px; border: 3px solid var(--green-logo-color);}

#main-message, #gallery-message, #author {width: 100%; background: #EEE;}
#main-message, #gallery-message, #footer, .button {text-align: center;}

#main-message {width: 100%; background: #EEE;}
#main-message-text {width: 100%; min-height: 350px; background: url(../images/main-message-two-circles-transparent.png) no-repeat center center; background-size: cover;}
#main-message-text h2 {padding-top: 160px; padding-bottom: 15px;}
.solo-h2 {padding-top: 210px !important;}
#main-message-text p {max-width: 40%; margin: 0 auto; padding-bottom: 15px; line-height: 28px; font-size: 1.2em}
#main-message-text table {width: 250px; margin: 0 auto; padding-bottom: 15px; line-height: 28px; font-size: 1.2em}

#main-with-buttons {width: 100%; min-height: 350px; background: url(../images/coffee-on-the-table.jpg) no-repeat center center; background-size: cover;}
#buttons-container {width: 350px; padding-top: 50px;}
.button {padding: 35px; margin-bottom: 50px; border: 2px solid white; color: white; font-size: 1.5em}

#gallery-message {width: 100%; padding-bottom: 30px; background: #EEE;}
#gallery-message-text {width: 100%; height: 100%;}
#gallery-message-text h2 {padding-top: 50px; padding-bottom: 20px;}
#gallery-message-text p {max-width: 40%; margin: 0 auto; padding-bottom: 20px; line-height: 30px; font-size: 1.2em}
.small-gallery img {margin: 10px;}

.zoom {transition: transform .2s;}
.zoom:hover {transform: scale(1.1);}

#gallery-right, #gallery-left {display: flex; justify-content: space-around;}
.gallery-wrapper {display: flex; justify-content: center; flex-direction: row;}
#gallery-left .gallery-wrapper {flex-direction: row-reverse;}
#gallery-right-text, #gallery-left-text {max-width: 300px; min-width: 220px; height: 100%; line-height: 25px; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 10px;}
#gallery-right-text h3, #gallery-left-text h3 {margin-bottom: 40px; width: 100%;}
#gallery-right-text {text-align: right;}

#gallery-right .small-gallery, #gallery-left .small-gallery {max-width: 450px !important;}
#gallery-left {background: #EEE;}
@media (max-width:806px) {
  .gallery-wrapper, #gallery-left .gallery-wrapper {width: 450px; flex-direction: column;}
  #gallery-right-text, #gallery-left-text {text-align: center; padding: 50px 0px; margin: 0 auto; width: 450px !important;  min-width: 450px;}
}
@media (max-width:462px) {
  .gallery-wrapper {width: 220px;}
  #gallery-right-text, #gallery-left-text {text-align: center; padding: 50px 0px; margin: 0 auto; width: 220px !important;  min-width: 220px;}
}

#owner {text-align: center;}
#owner h3 {margin-top: 20px; margin-bottom: 20px;}
#owner h4, #owner p {margin-bottom: 20px;}
#owner a {color: black;}
#owner a:hover, #owner a:active {color: var(--green-logo-color);}

#contact {width: 100%; display: flex; justify-content: space-around;}
#contact-wrapper {width: 950px !important; padding: 50px;}
#contact iframe, #contact table {float: left;}
#contact-table {width: 300px; margin-top: 85px; margin-left: 50px;}
#contact-table td {padding: 5px;}
td.contact-symbol {vertical-align: top;}
td.contact-symbol span {font-size: 24px !important; color: var(--orange-color);}
@media (max-width:965px) {
  #contact iframe, #contact table {float: none;}
  #contact-wrapper {width: 500px !important;}
  #contact iframe {margin-bottom: 20px}
  #contact-table {margin: 0 auto;}
}

@media (min-width:1450px) {
.cake-list-2 {display: flex; justify-content: center;}
.cake-list-2 .cake-list-item {float: left;}
}

#cake-list img, #cake-list table {float: left;}
.cake-list-item {margin-bottom: 15px; display: flex; justify-content: center; align-items: center;}
.cake-table {margin: 0 100px 0 50px; width: 340px; min-width: 340px; max-width: 340px; padding: 5px 0; border-collapse: separate; border-spacing: 5px; }
.cake-table th {text-align: left; font-size: 2em; font-family: 'Dancing Script', cursive; font-style: italic;}
.cake-table th span {font-size: 0.3em; vertical-align: top; font-weight: bold;}
.cake-header {font-weight: bold; color: var(--orange-color); text-align: right; vertical-align: baseline; width: 100px}
.cake-price {font-weight: bold;}
.cake-table td strong {color: var(--orange-color);}
.dottedbottom {border-bottom: 1px dotted black;}
.cake-size {width: 60px !important;}
.cake-price {width: 135px !important; font-weight: normal;}
.fake-cake-list-item {width: 690px;}

#cake-select, #order-form {width: 500px; margin: 0 auto;}
#order-form-section {background: #EEE; padding: 20px 0; display: flex; justify-content: center; align-items: center;}
#order-form-section h2, #order-form-section p {text-align: center; margin-bottom: 20px;}
select, input, textarea {padding: 10px; width: 300px; font-size: 1em;}
select {width: 324px;}
#size-select {width: 175px;}
label, #selected-cake-list div.label {font-weight: bold; margin-right: 10px; width: 140px; text-align: right !important;}
#chcinapislabel {font-weight: 500;}
.form-row {display:flex; flex-direction: row; justify-content: left; align-items: center; margin-bottom: 10px;}
.form-double {display: flex; flex-direction: column; justify-content: left;}
input[type=checkbox] {width: 16px; margin: 0 10px 10px 0;}
.last-row {margin-bottom: 40px;}
#add-cake, #send-order {width: 175px; font-weight: bold; cursor: pointer;}

#cake-list-container, .label {float: left; max-width: 325px; width: 325px;}
#selected-cake-list p {text-align: left;}
.delete-item {color: var(--orange-color);}
.delete-item:hover {color: red;}
#empty-cart {font-style: italic;}
#full-price {padding: 10px 0; margin: 0;}

#jmeno-error, #email-error, #telefon-error, #napis-error {color: red; font-style: italic; text-align: left !important; margin-left: 160px; display: none;}
.redbox {border-color: red;}
.redtext {color: red;}





#footer {width: 100%; background: var(--dark-grey-color); color: white;}
#footer-text h2 {padding-top: 40px; padding-bottom: 20px;}
#footer-text p {padding-bottom: 30px; line-height: 30px; font-size: 1.2em}

#author {text-align: center;}
#author img {margin: 0 auto; margin-top: 15px;}
#author p {padding-bottom: 15px; padding-top: 5px; line-height: 20px; font-size: .8em; font-style: italic;}