/*
Theme Name: Magda Zabel
Theme URI:
Author: Krzysiek Dróżdż (WPmagus.pl)
Author URI: http://wpmagus.pl/
Description:
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain: magdazabel
*/


/* html5doctor.com Reset v1.6.1 - http://cssreset.com */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

a {text-decoration: underline;}
a:hover {text-decoration: none;}

p, ul, ol, table, blockquote, address, dl {margin: 1.5rem 0;}

::-webkit-input-placeholder {color: #939393;}
:-moz-placeholder {color: #939393;}
::-moz-placeholder {color: #939393; opacity: 1;}
:-ms-input-placeholder {color: #939393;}

img {max-width: 100%; height: auto;}

img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {height: auto;}

embed,
iframe,
object,
video {margin-bottom: 1.5rem; max-width: 100%;}

p > embed,
p > iframe,
p > object,
span > embed,
span > iframe,
span > object {margin-bottom: 0;}

input[type="submit"],
button,
.button {-webkit-appearance: none;}

main, article, section, header, footer, nav, aside {display: block;}


/* Global
 * ======================================== */

html {font-size: 16px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: #fff;}
body {color: #3c3c3c; line-height: 1.5; font-size: 1rem;}

#page-wrap {overflow: hidden;}

.container {width: 1140px; margin: 0 auto;}
.container:after {content: ''; display: block; clear: both;}

h1,
h2,
h3,
h4,
h5,
h6 {font-family: 'Roboto Condensed', sans-serif; margin: 2rem 0 1rem 0;}

h1 {font-size: 2.25rem; font-weight: 500; line-height: 1.15;}
h2 {font-size: 1.875rem; font-weight: 500; line-height: 1.2;}
h3 {font-size: 1.5rem; font-weight: 500; line-height: 1.25;}
h4 {font-size: 1.125rem; font-weight: 500; line-height: 1.35;}
h5 {font-size: 1rem; font-weight: 500; line-height: 1.5;}

a {color: #000; text-decoration: underline; font-weight: 500;
    -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;
}
a:hover {opacity: .75; text-decoration: none;}

ul,
ol {margin-left: 2rem;}

nav ul,
nav ol {margin: 0;}

form {}
input,
select,
textarea,
button {width: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #3c3c3c; font-size: 1rem;}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="submit"],
select,
textarea,
button {padding: .5rem 1rem; border: 1px solid #afafaf; border-radius: 3px;}
form br {display: none;}

input[type="submit"],
button,
.button {cursor: pointer; border: 1px solid #3c3c3c; background: #3c3c3c; color: #fff; text-decoration: none; border-radius: 3px; padding: .5rem 1rem; font-weight: normal;}

form .fields {margin-left: -1rem;}
form .fields:after {content: ''; clear: both; display: block;}
form .fields .field {margin: 0 0 1rem 0; float: left; width: 100%; padding-left: 1rem;}
form .fields .field--short {width: 50%;}
form .fields .field label > span {}


.columns {margin-left: -2rem; margin-right: -2rem;}
.columns:after {content: ''; clear: both; display: block;}
.columns .column {padding: 0 2rem; float: left; width: 50%;}


.list {list-style: none; margin: 0;}

.list--images {margin-left: -1rem; margin-right: -1rem;}
.list--images li {padding: 0 .5rem; margin-top: 1rem; width: 25%; float: left;}
.list--images li a {display: block;}
.list--images li img {display: block; width: 100%;}

.list--events {}
.list--events li {border-bottom: 1px solid #e2e2e2; padding: .5rem 0; font-size: .875rem; color: #afafaf;}
.list--events li:after {content: ''; clear: both; display: block;}
.list--events li > div {float: left;}
.list--events li > div :first-child {font-size: 1.5rem; margin: 0; line-height: 1.25; display: block; color: #3c3c3c;}
.list--events li > .time {width: 10rem;}
.list--events li > .play {width: calc(100% - 20rem); padding: 0 2rem;}
.list--events li > .place {float: right; width: 10rem; text-align: right;}

.list--experience {text-align: center; margin-top: 2rem;}
.list--experience li {margin-bottom: 1rem; color: #afafaf; font-size: .875rem; line-height: 1.25;}
.list--experience li .date:after {content: ' \2219'; margin: 0 .25rem;}
.list--experience li h2 {font-size: 1rem; font-weight: bold; margin: 0; color: #3c3c3c;}
.list--experience li p {margin: 0;}

dl.info {}
dl.info:after {content: ''; clear: both; display: block;}
dl.info dt,
dl.info dd {margin-bottom: .5rem;}
dl.info dt {float: left; clear: both; margin-right: 1rem; width: 8rem; font-weight: bold;}
dl.info dd {float: left; width: calc(100% - 9rem);}
dl.info dd ul,
dl.info dd ol,
dl.info address,
dl.info p {margin-top: 0; margin-bottom: 0;}
dl.info dd ol {list-style: none; margin-left: 0;}
dl.info dd ol li {margin-top: .5rem;}
dl.info dd ol li:first-child {margin-top: 0;}



.section {padding: 4rem 0; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; position: relative;}
.section:after {content: ''; clear: both; display: block;}
.section-header {margin-bottom: 3rem;}
.section-title {font-size: 2.25rem; font-weight: 500; line-height: 1.15; text-align: center;}
.section-content {}
.section .section-nav {text-align: center;}
.section .section-nav ul {list-style: none; margin: 1rem 0; padding: 0;}
.section .section-nav ul li {margin: 0 .5rem; display: inline-block;}
.section .section-nav ul li a {font-weight: normal;}
.section .section-nav ul li.current a {text-decoration: none; font-weight: bold;}
.section .bg-video {position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #000; overflow: hidden;}
.section .bg-video video {position: absolute; opacity: .75; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; object-fit: cover;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.section .scroll-to-next-section {position: absolute; left: 50%; bottom: 2rem; text-decoration: none; font-size: .75rem;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.section .scroll-to-next-section:before,
.section .scroll-to-next-section:after {content: ''; position: absolute; left: 50%; top: -3.5rem; width: 3rem; height: 3rem; line-height: 2.5rem; margin-left: -1.5rem; font-size: 1.5rem; border: 3px solid rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .5); border-radius: 100%; text-align: center;}
.section .scroll-to-next-section:before {content: '\f063'; font-family: FontAwesome;}
.section .scroll-to-next-section:after {animation: pulse 2s ease 0s infinite;}

@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    80% {
        opacity: 0;
        transform: scale(2);
    }
    100% {
        opacity: 0;
        transform: scale(3);
    }
}


.section--colorscheme_dark {background: #020315; color: #efefef;}
.section--colorscheme_dark a {color: #fff;}

.section--colorscheme_white {background: #fff;}

.section--colorscheme_gray {background: #efefef;}


.section--full_height {height: 100vh;}

.section--width_narrow .section-content {padding-left: 20%; padding-right: 20%;}


.section--side_by_side {}
.section--side_by_side .section-title {text-align: left;}
.section--side_by_side .section-header {width: 50%; float: left; padding-right: 2rem;}
.section--side_by_side .section-header img {max-width: 50%;}
.section--side_by_side .section-content {width: 50%; float: left; padding-left: 2rem;}
.section--side_by_side .section-content > h2:first-child {font-size: 2.25rem;}


.wpcf7 {position: relative;}
.wpcf7 .wpcf7-not-valid-tip {position: absolute; top: -16px; right: -10px; font-size: 80%; color: #fff; background: rgba(255, 0, 0, .75); display: block; padding: 4px 6px;}
.wpcf7 .wpcf7-response-output {display: block; position: absolute; top: 100px; left: 10%; right: 10%; padding: 2em; border: 0; text-align: center; font-size: 18px; color: #fff; font-weight: bold; box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, .2); z-index: 101;}
.wpcf7 .wpcf7-response-output.wpcf7-display-none {display: none;}
.wpcf7 .wpcf7-response-output:after {content: 'x'; position: absolute; top: 10px; right: 12px; color: #fff; cursor: pointer;}
.wpcf7 .wpcf7-response-output.wpcf7-validation-errors {background: #e81b2a;}
.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok {background: #267F00;}



/* Header
 * ======================================== */

#header {position: fixed; top: 0; left: 0; right: 0; z-index: 1100; /*background: rgba(2, 3, 21, .9);*/ color: #fff;
    -webkit-transition: background .3s;
    -o-transition: background .3s;
    transition: background .3s;
}
#header:after {content: ''; clear: both; display: block;}
#header a {color: #fff; text-decoration: none;}
#header .site-title {margin: 0; float: left; margin: 1rem 0; font-size: 2.25rem;
    -webkit-transition: font-size .3s;
    -o-transition: font-size .3s;
    transition: font-size .3s;
}
#header .nav {text-align: right; float: right;}
#header .nav .nav-toggle {display: none;}
#header .nav ul {margin: 1rem 0;}
#header .nav ul li {display: inline-block; margin-left: 1.5rem;}
#header .nav a {position: relative;}
#header .nav a:after {content: ''; position: absolute; border-bottom: 1px solid #aeaeae; bottom: -.25rem; left: 50%; width: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: width .3s;
    -o-transition: width .3s;
    transition: width .3s;
}
#header .nav a:hover:after {width: 1rem;}
#header .nav .current-menu-item > a:after {width: 100%;}

.scrolled #header {background: rgba(0, 0, 0, .8);}
.scrolled #header .site-title {font-size: 1.45rem;}

body.admin-bar {margin-top: -32px;}
body.admin-bar #header {margin-top: 32px;}

/* Footer
 * ======================================== */

#footer {font-size: .875rem;}



/* Main
 * ======================================== */

#main {}


/* Content
 * ======================================== */


/* RWD
 * ======================================== */

@media (max-width: 1204px) {
    .container {width: auto; margin-left: 2rem; margin-right: 2rem;}
}

@media (max-width: 960px) {
    .section--side_by_side {}
    .section--side_by_side .section-title {}
    .section--side_by_side .section-header {width: 100%; float: none; padding-right: 0;}
    .section--side_by_side .section-content {width: 100%; float: none; padding-left: 0;}

    #header .nav {padding: 0; right: 0;}
    #header .nav .nav-container {position: absolute; top: 0; right: 0; min-height: 100vh; z-index: 10000; background: rgba(0, 0, 0, .95); padding: 10rem 2rem 1rem 2rem; width: 100vw;}
    #header .nav ul {display: block; float: none; width: 100%;}
    #header .nav ul li {display: block; text-align: center; margin-bottom: 1.5rem;}
    #header .nav ul li a {padding: .5rem 0; display: block; font-size: 1.125rem; color: #fff; width: auto; background: transparent;}
    #header .nav ul ul {display: block; position: static; background: transparent; max-width: none;}
    #header .nav ul ul li {margin-bottom: 0;}
    #header .nav ul ul li a {font-size: .875rem;}
    #header .nav ul ul ul li a {padding-left: 0;}
    #header .nav li:hover,
    #header .nav li a:hover {background: transparent; color: #fff;}
    #header .nav .current-menu-item > a:after {width: 4rem;}

    #header .nav .nav-toggle {cursor: pointer; z-index: 10001; width: 2rem; height: 2rem; top: .75rem; right: 2rem; background: transparent; padding: 0; display: block; position: absolute; overflow: hidden; font-size: 0; text-indent: -9999px; border-radius: 0; border: none; cursor: pointer;}
    #header .nav .nav-toggle span {top: 50%; margin-top: -1px; height: 2px; display: block; position: absolute; left: 0; right: 0; background: #fff;
        -webkit-transition: background 0 0.3s; -moz-transition: background 0 0.3s; -ms-transition: background 0 0.3s; -o-transition: background 0 0.3s; transition: background 0 0.3s;
    }
    #header .nav .nav-toggle span:before,
    #header .nav .nav-toggle span:after {height: 2px; position: absolute; display: block; left: 0; width: 100%; background-color: #fff; content: '';
        -webkit-transition-duration: 0.3s, 0.3s; -moz-transition-duration: 0.3s, 0.3s; -ms-transition-duration: 0.3s, 0.3s; -o-transition-duration: 0.3s, 0.3s; transition-duration: 0.3s, 0.3s;
        -webkit-transition-delay: 0.3s, 0; -moz-transition-delay: 0.3s, 0; -ms-transition-delay: 0.3s, 0; -o-transition-delay: 0.3s, 0; transition-delay: 0.3s, 0;
    }
    .dark-header #header .nav .nav-toggle span,
    .dark-header #header .nav .nav-toggle span:before,
    .dark-header #header .nav .nav-toggle span:after {background-color: #fff;}
    #header .nav .nav-toggle span:before {top: -.75rem;
        -webkit-transition-property: top, -webkit-transform; -moz-transition-property: top, -moz-transform; -ms-transition-property: top, -ms-transform; -o-transition-property: top, -o-transform; transition-property: top, transform;
    }
    #header .nav .nav-toggle span:after {bottom: -.75rem;
        -webkit-transition-property: bottom, -webkit-transform; -moz-transition-property: bottom, -moz-transform; -ms-transition-property: bottom, -ms-transform; -o-transition-property: bottom, -o-transform; transition-property: bottom, transform;
    }
    #header .nav.on .nav-toggle {}
    #header .nav.on .nav-toggle span {background: none;}
    #header .nav.on .nav-toggle span:before {top: 0; background-color: #fff;
        -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
    }
    #header .nav.on .nav-toggle span:after {bottom: 0; background-color: #fff;
        -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
    }
    #header .nav.on .nav-toggle span:before,
    #header .nav.on .nav-toggle span:after {
        -webkit-transition-delay: 0, 0.3s; -moz-transition-delay: 0, 0.3s; -ms-transition-delay: 0, 0.3s; -o-transition-delay: 0, 0.3s; transition-delay: 0, 0.3s;
    }

    #header .nav .nav-container {
        -webkit-transform: translateX(150%); -moz-transform: translateX(150%); -ms-transform: translateX(150%); -o-transform: translateX(150%); transform: translateX(150%);
        -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
    }
    #header .nav.on .nav-container {
        -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0);
    }
}

@media (max-width: 840px) {
    .columns {}
    .columns .column {float: none; width: 100%;}
    .columns .column + .column {margin-top: 4rem;}

    .list--images {}
    .list--images li {width: 33.3333333333%;}
}

@media (max-width: 782px) {
    body.admin-bar {margin-top: -46px;}
    body.admin-bar #header {margin-top: 46px;}

    #header .site-title {font-size: 1.45rem;}
}

@media (max-width: 720px) {
    .list--images {}
    .list--images li {width: 50%;}

    .list--events {}
    .list--events li > div {float: none;}
    .list--events li > div :first-child {}
    .list--events li > .time {width: 100%;}
    .list--events li > .time .date {font-size: .875rem; display: inline-block;}
    .list--events li > .play {width: 100%; padding: 0; margin: .5rem 0;}
    .list--events li > .place {float: none; width: 100%; text-align: left;}
    .list--events li > .place .city {font-size: .875rem; display: inline-block;}


    .section--width_narrow .section-content {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 600px) {
    body.admin-bar #header {position: absolute;}

    form .fields .field--short {width: 100%;}
}

@media (max-width: 400px) {
    .section--side_by_side .section-header img {max-width: 100%; width: 100%;}
}


/* Print
 * ======================================== */

@media print {
    body {background: none !important; color: #2b2b2b; font-size: 12pt; width: 100%;}
    #header {background: none; min-height: 100px;}
    #header .site-title a {filter: url(inverse.svg#negative); -webkit-filter: invert(100%); filter: invert(100%); height: 100px;}
    #header .site-title:after {position: absolute; right: 0; top: 0;}
    #header .nav {display: none;}
    #footer {display: none;}
    h2, h3 {page-break-after: avoid;}
    article a {font-weight: bolder; text-decoration: none;}
    article a[href^=http]:after {content:" <" attr(href) "> ";}
}


/* WP Styles
 * ======================================== */

.alignleft {float: left;}
.alignright {float: right;}
.aligncenter {display: block; margin-left: auto; margin-right: auto; text-align: center;}

blockquote.alignleft,
figure.wp-caption.alignleft,
img.alignleft {margin: .5rem 1rem .5rem 0;}
.wp-caption.alignleft {margin: .5rem 1rem .5rem 0;}

blockquote.alignright,
figure.wp-caption.alignright,
img.alignright {margin: .5rem 0 .5rem 1rem;}
.wp-caption.alignright {margin: .5rem 0 .5rem 1rem;}

blockquote.aligncenter,
img.aligncenter,
.wp-caption.aligncenter {margin-top: .5rem; margin-bottom: .5rem;}

.site-content blockquote.alignleft,
.site-content blockquote.alignright {padding-top: .5rem; width: 50%;}

.site-content blockquote.alignleft p,
.site-content blockquote.alignright p {margin-bottom: .5rem;}

.wp-caption {margin-bottom: 1rem; color: #767676;}
.wp-caption img[class*="wp-image-"] {display: block; margin: 0;}
.wp-caption-text {font-style: italic; line-height: 1.4; margin: .5rem 0;}
div.wp-caption .wp-caption-text {padding-right: 1rem}

div.wp-caption.alignright img[class*="wp-image-"],
div.wp-caption.alignright .wp-caption-text {padding-left: 1rem; padding-right: 0;}

.wp-smiley {border: 0; margin-bottom: 0; margin-top: 0; padding: 0;}