Fotoalbum s příběhem CSS

<link rel="apple-touch-icon" sizes="180x180" href="/user/documents/upload/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/user/documents/upload/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/user/documents/upload/favicon/favicon-16x16.png">
<link rel="manifest" href="/user/documents/upload/favicon/site.webmanifest">
<link rel="mask-icon" href="/user/documents/upload/favicon/safari-pinned-tab.svg" color="#efcc3d">
<link rel="shortcut icon" href="/user/documents/upload/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#efcc3d">
<meta name="msapplication-config" content="/user/documents/upload/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC:400,700" rel="stylesheet">
<link href="/user/documents/upload/fasp1.css?v=18" rel="stylesheet">
<style>
h1{font-weight:600;}
.plus-gallery-item {
border: none;
}
.message{display:none !important;}
form fieldset, fieldset.f-border {
border-color: transparent;
}

#menu li a {
color: #2c2e35;
}
#menu li a.active {
font-weight: bold;
}

.type-category #content-in h1 {
display: none;
}
.top-menu a[href*="/inspirace/"]{font-weight: 600 !important;}
.yellow{color: #EFCC3D;
font-size: 60px;
font-weight: 800;}
.top-menu li.active a {
color: #2c2e35;
}
.vlastni-album:before {
content: url(/user/documents/upload/stars.png);
margin: 0 auto;
display: block;
text-align: center;
transform: scale(0.5);
margin-bottom: 10px;
}
.prod-img {
max-width: 451px;
max-height: 351px;
}
.top-menu li a{color:#2c2e35;padding-left: 10px;padding-right: 10px; font-weight:200;}
.top-menu li.active a{background-color:#EFCC3D; border-radius:40px; color:#2c2e35 ;}

.prod-complete p{font-family: 'Amatic SC', bold !important;font-size:24pt;font-weight: 600;}
.prod-complete a{text-decoration:none;}
@media(min-width:768px){
#menu .first-line {
display: none;
}
#menu{display:none;}
.type-category #menu ,.type-product #menu{
display: flex !important;
justify-content: center;
margin-top: 20px;
border: none;
}
nav#menu>ul>li {
background: #EFCC3D;
margin-left: 5px;
margin-right: 5px;
}
#menu .list-inline>li:hover>a {
border:none;
color:#2c2e35;
font-weight:600;
}
}
@media(min-width:768px) and (max-width:1440px){
.in-index #main-in {
top: -60px;
}
.in-index #logo{top:-20px;}
.in-index #header-cart-wrapper {top:10px;}
div#main-wrapper {
padding-left: 40px;
padding-right: 40px;
}
}
#main-in h1 {
text-align: center;
}
.type-page #column-l,.type-post #column-l,.type-posts-listing #column-l{display:none;}
.type-page #content-in,.type-post #content-in, .type-posts-listing #content-in{width:100%;}
.type-detail #column-l,.type-category #column-l{width:20%;}
.text a{color:#000;}
#category-filter-wrapper{display:none;}

#header-cart-wrapper {
position: absolute;
z-index: 30;
right: 0.35rem;
top: 0;
text-align: right;
}
#menu-side {
position: absolute;
top: 0;
left: auto;
right: 10px;
bottom: auto;
display: block;
}
.in-index #menu-side {
position: absolute;
top: 10px;
left: auto;
right: 190px;
bottom: auto;
display: block;
}
body:not(.in-index) #menu-side {
position: absolute;
top: 0;
left: auto;
right: 200px;
bottom: auto;
display: block;
}

.top-menu {
list-style: none;
display: flex;
flex-direction: row;
list-style:none;
line-height: 40px;
}
.top-menu li a {
color: #000;
}
#menu-side ul li a{
display: block;
text-transform: uppercase;
font-size: 1.1rem;
}
.top-menu li {
padding: 10px;
padding: 0.5rem 0.75rem;

}

article#welcome {
display: none;
}
#footer-in {
border-top: 0.75rem solid #f8f8f8;
}
#copyright {
background: #f8f8f8;
}
.large-12.row.collapse.header-contacts {
display: none;
}
.searchform.large-12.medium-12.small-12 {
display: none;
}
#homepage-banner{text-align: center;}
@media(min-width:768px){
#menu>ul>li:nth-last-child(-n+3){display:none;}
}
@media(max-width:767px){
#homepage-banner, article#welcome {
margin-top: 15px;
}
#menu-helper-box li a:hover, .navigation-menu a:hover {
color: #000;
text-decoration: underline;
}
.frame-works h1 {
margin-top: 40px;
}
.in-index #header-cart-wrapper{z-index:1; top:35px;}
.in-index #menu{top:-28px; z-index:2;}
.in-index #menu, #menu {
display: block;
}
.jak-na-to .container {
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.jak-na-to .container div {
height: auto !important;
width: 30% !important;
}
.benefits .text{display:flex;flex-direction:column;}
.benefits-images img {
width: 50% !important;
}
.obchod-hp #tlacitko {
margin-top: 20px;
}
.inspiration #tlacitko{margin-top:20px; margin-bottom:30px;}
.kontakt form {
margin: 10px;
}
#header-cart {
top: 0;
}
#header {
margin-bottom: 30px;
}
#main{margin-top: 20px;}
.box-account-links-trigger,#menu-side{display:none;}
#menu-side{display:none !important;}
.frame-works {
margin-top: 0px !important;
}

#logo {
left: 0;
top: 0;
height: 4.25rem;
line-height: 3.25rem;
}
.header_section p {
font-size: 95%;
}

.jak-na-to h1 {
margin-top: 0px;
}
.benefits {
margin-top: 20px;
margin-bottom: 15px;
}
.in-index .obchod-hp{
margin-top:-30px;}
.kontakt {
margin-top: 40px;
}
.inspiration h1 {
margin-top: 50px;
}
}
#subcategories a {
color: #000;
}
@media(max-width:425px){
h1.main-h1 span{font-size:23pt !important;}
#content h1 span.yellow {
font-size: 29pt !important;
}
}
@media(max-width:375px){
h1.main-h1 span{font-size:20pt !important;}
#content h1 span.yellow {
font-size: 26pt !important;
}
}
@media(max-width:320px){
h1.main-h1 span{font-size:17pt !important;}
#content h1 span.yellow {
font-size: 23pt !important;
}
}
</style>