@font-face {font-family: 'd-dinregular'; src: url('font/d-din-webfont.woff2') format('woff2'), url('font/d-din-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'd-din_condensedregular'; src: url('font/d-dincondensed-webfont.woff2') format('woff2'), url('font/d-dincondensed-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}

:root
{
 --color-purple: #dc1290;
}

*
{
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}

html
{
 min-height: 100%;
}

body
{
 height: 100%;
 margin: 20px 0 0 0;
 font-family: 'd-dinregular', arial, sans-serif;
 font-size: 16pt;
 line-height: 22pt;
 color: #000;
}

body.index
{
 background: #4b4b4b url(/img/index-photo-gray.png) no-repeat bottom right fixed;
}

.center
{
 text-align: center;
}

.clr
{
 clear: both;
}

.float-right
{
 float: right;
 margin: 0 0 20px 20px;
}

a
{
 text-decoration: none;
 color: #000;
 transition: color 300ms;
}

a:hover
{
 transition: color 300ms;
}

h1
{
 font-size: 1.5em;
 font-weight: bold;
 margin-bottom: 1em;
}

p
{
 margin-bottom: 1.5em;
}

p em
{
 font-family: 'd-din_condensedregular', arial, sans-serif;
 font-style: normal;
 font-weight: bold;
}

.mobile-only {display: none !important;}


.button
{
 cursor: pointer;
 box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
 font-family: Roboto, sans-serif;
 -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;
 font-size: 0.875rem;
 line-height: 2.25rem;
 font-weight: 500;
 letter-spacing: 0.04em;
 text-decoration: none;
 text-transform: uppercase;
 -webkit-tap-highlight-color: transparent;
 will-change: transform, opacity;
 display: inline-block;
 position: relative;
 box-sizing: border-box;
 min-width: 64px;
 height: 40px;
 padding: 0 16px;
 border: none;
 outline: none;
 text-align: center;
 webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-appearance: none;
 overflow: hidden;
 vertical-align: middle;
 border-radius: 2px;
 background-color: var(--color-purple);
 color: #fff !important;
 margin-bottom: .5em;
}

.button:disabled,
.button:disabled:hover,
.button-disabled,
.button-disabled:hover
{
 background-color: #888 !important;
 cursor: default !important;
}

.button:hover
{
 background-color: #fff !important;
 color: #000 !important;
}

.two-cols
{
 display: inline-block;
 vertical-align: top;
 width: 48%;
}

.two-cols:first-child
{
 margin-right: 4%;
}

/* */

header
{
 padding: 20px;
 width: 100%;
 top: 0;
 margin: 0 0 60px 0;
}

#logo
{
 float: left;
 width: 120px;
 height: 24px;
 background: url(../img/zita-mina-logo-black-500.png);
 background-size: 100%;
 background-repeat: no-repeat;
}


body.index #logo
{
 background: url(../img/zita-mina-logo-white-500.png);
 background-size: 100%;
 background-repeat: no-repeat;
}

.wrapper
{
 margin: 0 auto;
 max-width: 980px;
}

#index-photo
{
 position: fixed;
 right: 5px;
 bottom: 10px;
 transform: rotate(-90deg) translate(100%, 0);
 transform-origin: right bottom;
}

#index-photo a
{
 color: #999;
 font-size: 11pt;
}

#index-photo a:hover
{
 color: #fff;
}

nav#menu {float: right;}
nav#menu > ul {list-style-type: none; clear: both;}
nav#menu > ul > li {display: inline-block; padding-left: 1.5em;}
nav#menu > ul > li:first-child {padding-left: 0;}
nav#menu > ul > li > a {display: block; text-decoration: none; text-transform: uppercase; color: #333; font-family: 'd-din_condensedregular', arial, sans-serif; font-size: 26px; line-height: 26px;}
/*nav#menu > ul > li > a:hover {color: var(--color-purple);}*/
body.index nav#menu > ul > li > a {color: #fff;}

#menu-h {display: none; cursor: pointer;}
#menu-h > svg {fill: var(--color-purple); transition: fill 300ms;}
body.index #menu-h > svg {fill: #fff; transition: fill 300ms;}
/*#menu-h:hover > svg {fill: var(--color-purple); transition: fill 300ms;}*/

#content-wrapper
{
 max-width: 980px;
 margin: 0 auto 40px auto;
}

/* */

h2
{
 clear: both;
 text-transform: uppercase;
 font-size: 22pt;
 margin: .5em 0;
 font-weight: normal;
}

h3
{
 clear: both;
 font-size: 20pt;
 margin: .5em 0;
 font-weight: normal;
}

/* products */

#products
{
 text-align: center;
}

.product
{
 display: inline-block;
 vertical-align: top;
 width: 46%;
 text-transform: uppercase;
 margin-bottom: 60px;
}

.product:nth-child(odd)
{
 margin-right: 8%;
}

.product > img
{
 display: block;
 width: 100%;
 border: 3px solid #333;
 border-radius: 40px;
 margin-bottom: .5em;
}

.basket-button
{
}

.product img
{
 display: block;
}

/* gallery */

#gallery
{
 text-align: center;
}

#gallery > div
{
 display: inline-block;
 vertical-align: top;
 width: 46%;
 margin: 0 2% 40px 2%;
}

#gallery > div > img
{
 width: 100%;
 border: 1px solid #ccc;
 border-radius: 40px;
}

/* Contact */

body.contact #content
{
 padding-top: 2em;
}

body.contact p
{
 font-weight: bold;
 margin-bottom: 1em;
}

/* MEDIA QUERIES */

@media screen and (max-width: 1020px)
{
 #content-wrapper {margin: 0 20px 40px 20px;}
}

@media screen and (max-width: 640px)
{
 #content-wrapper {padding-top: 0;}

 #menu-h {display: block; width: 40px; height: 40px; position: absolute; top: 30px; right: 16px; z-index: 110;}
 #menu-h > img {width: 100%; height: auto; cursor: pointer;}
 nav#menu {display: none; float: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); z-index: 100;}
 nav#menu > ul {list-style-type: none; position: absolute; top: 73px; right: 0; height: auto; padding: 0; margin-right: 0;}
 nav#menu > ul > li {display: block; text-align: right; padding: 8px 1em;}
 nav#menu > ul > li > a {display: block; text-decoration: none; text-transform: uppercase; color: #fff;}
 img.float-right {max-width: 50%;}

 .two-cols {display: block; width: 100%; margin-bottom: 1em;}
 .two-cols:first-child {margin-right: 0;}

}

@media screen and (max-width: 600px)
{
 .product {width: 100%; margin: 0 0 40px 0;}
 .product:nth-child(odd) {margin-right: 0;}
 #gallery > div {width: 96%; margin: 0 0 40px 0;}
}

@media screen and (max-width: 480px)
{
 body.index {background-size: 120%;}
 #index-photo a {font-size: 9pt;}
}