/*
Theme Name: Zwolinska
Theme URI: http://www.zwolinskainstytut.com
Author: DataDiscovery
Author URI: http://www.datadiscovery.pl
Description: Theme for Instytut Kosmetyczny Danuty Zwolinskiej
Version: 1.0
*/
@import url('css/editor-style.css?v=20160712');

.logo { padding: 50px 0; }
.logo div.gradient { width: 50%; top: 0; bottom: 0; position: absolute; left: 25%;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+50,ffffff+100&0+0,1+50,0+100 */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+50,ffffff+100&0+0,0.1+50,0+100 */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.15)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */
}
.logo.border { border-top: 12px solid #000000; border-bottom: 12px solid #000000; }
.logo>h2 { font-size: 3.6em; letter-spacing: 3.6px; color: #7c7c7c; text-align: center; text-shadow: 2px 2px rgba(0,0,0,0.75); position: relative; z-index: 2; margin-bottom: 16px; }
.logo>h2 br { display: none; }
.logo>a { font-size: 3em; letter-spacing: 8px; color: #ffffff; display: block; text-align: center; text-shadow: 2px 2px rgba(0,0,0,.75); cursor: pointer; position: relative; z-index: 3; }
#banner { position: relative; z-index: 1; }
#banner ul li .cover { width: 100%; padding-top: 51.54%; }
.navs { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; }


.flex { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.flex-col { -webkit-flex-direction: column; -ms-flex-direction: column; -moz-box-direction: column; flex-direction: column; }
/* Template 1 */

.wide { letter-spacing: 2px; }

#tothetop { width: 25px; height: 80px; background: transparent url('img/strzalka.png') no-repeat center center; right: 20px; bottom: 20px; display:none; position: fixed; z-index: 1000; }


#main { position: relative; }

.floatnav.fixed { position: fixed; }
.floatnav {
    position: absolute; top: 0; left: 0; right: 0; border-top: 2px solid rgba(255,255,255,.9); font-size: 1.9em; color: #ffffff; text-transform: uppercase; z-index: 1000; letter-spacing: 2px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+53,000000+100&0.59+0,0.59+53,0.59+53,1+100 */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.59) 0%, rgba(0,0,0,0.59) 53%, rgba(0,0,0,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.59)), color-stop(53%,rgba(0,0,0,0.59)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.59) 0%,rgba(0,0,0,0.59) 53%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.59) 0%,rgba(0,0,0,0.59) 53%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.59) 0%,rgba(0,0,0,0.59) 53%,rgba(0,0,0,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.59) 0%,rgba(0,0,0,0.59) 53%,rgba(0,0,0,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.floatnav nav { overflow: hidden; padding: 30px 0; position: relative; display: none; }
.floatnav ul { text-align: center; }
.floatnav li { display: inline-block; margin-left: 16px; box-sizing: border-box; vertical-align: bottom; text-align: left; }
.floatnav li.active a { color: #da291c; }
.floatnav li:first-child { margin-left: 0; }
.floatnav a { color: #ffffff; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; transition: color 0.3s ease; }
.floatnav a:hover { color: #63666A; }
.floatnav button { display: block; border: none; color: #ffffff; background: transparent; cursor: pointer; position: absolute; padding: 0; font-size: 2em; outline: none; top: 30px; right: 160px; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; transition: color 0.3s ease; }
.floatnav button:hover { color: #63666A; }

.floatnav.collapsed ul { display: none; }
.floatnav.collapsed { background: none; }

.cover { background-position: top center; background-size: cover; background-repeat: no-repeat; position: relative; }




.view { position: relative; }
.lSSlideOuter { position: relative; }
.lSPager { position: absolute; left: 160px; top: 36px; right: 0; }
.lSSlideOuter .lSPager.lSpg { text-align: left; }
.lSSlideOuter .lSPager.lSpg>li a { display: block; width: 20px; height: 20px; border: 1px solid #000000; background-color: rgba(0,0,0,0.0) }
.lSSlideOuter .lSPager.lSpg>li.active a, .lSSlideOuter .lSPager.lSpg>li:hover a  { background-color: rgba(0,0,0,0.5) }
.stripes { background: transparent url('img/background03.png') repeat top left; }
.subnav { background-color: rgba(255,255,255,0.5); padding: 20px 0; position: relative; z-index: 2; }
.subnav a { color: #000000; text-transform: uppercase; font-size: 2em; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; transition: color 0.3s ease; letter-spacing: 1px; }
.subnav a:hover { color: #63666A; }
.subnav ul { overflow: hidden; }
.subnav li { display: block; float: left; width: 16.666666667%; text-align: center; }
#homeView>header { z-index: 1; position: relative; }
#homeView>.body { z-index: 2; position: relative; }


.slider { position: relative; }
.slider>li { position: relative; }


/* layout2 */
.layout2 { position: relative;}
.layout2 h1 mark, .layout2 h2 mark { text-transform: uppercase; }
.layout2 header { background-position: top center; background-repeat: no-repeat; background-size: cover; padding-top: 30.625%; }
.layout2 header>.content {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#141414+0,141414+100&0.3+0,1+100 */
    background: -moz-linear-gradient(top,  rgba(20,20,20,0.3) 0%, rgba(20,20,20,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(20,20,20,0.3)), color-stop(100%,rgba(20,20,20,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(20,20,20,0.3) 0%,rgba(20,20,20,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(20,20,20,0.3) 0%,rgba(20,20,20,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(20,20,20,0.3) 0%,rgba(20,20,20,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(20,20,20,0.3) 0%,rgba(20,20,20,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d141414', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
    position: relative; padding-top: 80px;
    padding-bottom: 80px;
}
.layout2 .center { position: relative; }
.layout2 .icon { position: absolute; left: 50%; top: -75px; -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); transform: translate(-50%,0); }
.layout2>.body { background-color: #141414 }
.layout2 p { font-size: 2.8em; text-align: center; }
.layout2>header p { margin-bottom: 10px; }
.layout2>header h1, .layout2>header h2 { margin-bottom: 10px; text-align: center; }

.layout2>.body>.center { padding: 40px 0; text-align: center; }
.layout2>.body>.center h1 { text-align: center; margin-bottom: 85px; }
.layout2>.body>.center p.small { margin-top: 58px; font-size: 2.4em;  }
.faq h2 { margin-bottom: 20px; }
.faq dl { margin-bottom: 20px; }
.faq dt { margin-bottom: 5px; cursor: pointer; }
.faq dd { margin-bottom: 10px; display: none; color: #63666A; }
.layout2 .faq strong { font-weight: bold; }
.layout2 .faq dl { font-size: 2.2em; }
.layout2 .faq li { list-style-type: }
.layout2 .faq ul { margin-bottom: 5px; }
.layout2 ol, .layout2 ul h3 { font-size: 2.4em;  text-align: justify; }
.layout2 ol { margin-bottom: 30px; list-style-type: decimal; list-style-position: outside; padding-left: 20px; }
.layout2 ul h3 { margin-bottom: 10px; }

/* layout 1 */
.layout1 { position: relative;}
.layout1 h1 mark, .layout2 h2 mark { text-transform: uppercase; }
.layout1 header { background-position: top center; background-repeat: no-repeat; background-size: cover; padding-top: 41.666666667%; }
.layout1 header>.content {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#141414+0,141414+100&0.3+0,1+100 */
    background: -moz-linear-gradient(top,  rgba(20,20,20,0.3) 0%, rgba(20,20,20,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(20,20,20,0.3)), color-stop(100%,rgba(20,20,20,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(20,20,20,0.3) 0%,rgba(20,20,20,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(20,20,20,0.3) 0%,rgba(20,20,20,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(20,20,20,0.3) 0%,rgba(20,20,20,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(20,20,20,0.3) 0%,rgba(20,20,20,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d141414', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
    position: relative; padding-top: 80px;
    padding-bottom: 80px;
}
.layout1 .center { position: relative; text-align: center; }
.layout1 .icon { margin-bottom: 45px; }
.layout1>.body { background-color: #141414 }
.layout1 p { font-size: 2.8em; text-align: center; }
.layout1>header p { margin-bottom: 10px; }
.layout1>header p { margin-bottom: 10px; }
.layout1>header h1, .layout2>header h2 { margin-bottom: 10px; text-align: center; }
/*.layout1>header h1 { margin-bottom: 80px; }*/
.layout1>.body>.center { padding: 40px 0; text-align: center; }
.layout1>.body>.center p.small { font-size: 2.4em;  }
.layout1>.body .caption { background-color: #ffffff; color: #141414; padding: 4px; }
h2 { margin-bottom: 10px }

#main { -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75); z-index: 2; }
#page>footer { position: relative; z-index: 1; }

::-webkit-input-placeholder {
    color: #ffffff;
}

:-moz-placeholder { /* Firefox 18- */
    color: #ffffff;
}

::-moz-placeholder {  /* Firefox 19+ */
    color: #ffffff;
}

:-ms-input-placeholder {
    color: #ffffff;
}

@media screen and (max-width: 1600px) {
    #banner ul li .cover { padding-top: 51.54% !important; }
    .floatnav button { right: 10px; }
    .lSPager { left: 10px; }


}

@media screen and (max-width: 1300px) {
    .floatnav { font-size: 1.6em; }
    .floatnav button { right: 10px; }
    .lSPager { left: 10px; }

    #kontakt .row.form { font-size: 1.8em; }

}

@media screen and (max-width: 1160px) {
    .floatnav { font-size: 1.4em; }
}

@media screen and (max-width: 1000px) {
    .floatnav { font-size: 1em; }
    .floatnav li { margin-left: 12px; }
    .subnav a { font-size: 1.6em; }
    nav.divisions ul li a, div.divisions header a { font-size: 3em; }
    div.divisions p { font-size: 2em; }
    div.divisions footer a { font-size: 2.2em; }

}

@media screen and (max-width: 940px) {
    .floatnav { font-size: 1.6em; }
    .floatnav button { display: block; }
    .floatnav nav { padding: 4px; }
    .floatnav li { display: list-item; text-align: center; }
    .floatnav li { margin-left: 0; padding: 2px; }
    .floatnav li br { display: none; }
}

@media screen and (max-width: 700px) {
    .logo { padding-top: 30px; padding-bottom: 30px; }
    .logo>h2 { font-size: 2.4em; letter-spacing: 3px; }
    .logo>a { font-size: 2.0em; letter-spacing: 4px; }
    .navs { display: none; }
    nav.divisions ul li a, div.divisions header a { font-size: 2.4em; }
    div.divisions p { font-size: 1.6em; }
    div.divisions footer a { font-size: 2em; }
    div.divisions header { display: block; }


    #kontakt form { width: 100% }

    .logo>h2 br { display: inline; }
}

@media screen and (max-width: 400px) {
    nav.services li { width: 100%; }
    .logo>h2 br { display: inline; }
}