body { background: #efefef; background-image: linear-gradient(to right, #f6f6f6, #f6f6f6 50%, #efefef 50%, #efefef); background-image: -moz-linear-gradient(to right, #f6f6f6, #f6f6f6 50%, #efefef 50%, #efefef); font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 400; }
a { color: #222; }
h1, h2, h3, h4, h5, h6 { margin: 0.8em 0; }
p { line-height: 24px; margin: 1em 0; }
div, ul, li, p { box-sizing: border-box; }
.wrapper { max-width: 1200px; margin: auto; }
#page { background: #efefef; position: relative; }
#contents { background: #fff; }
#top { height: 189px; font-size: 24px; color: #575757; position: relative; padding: 22px 0; }
#top > div { margin-left: 24px; }
#top .logo { float: left; margin: 0; margin-top: 4px; margin-right: 27px; }
#top .logo a { display: block; width: 137px; height: 136px; background: url(../images/logo.png) center center no-repeat; text-indent: -9999px; margin: auto; }
#top .name { overflow: hidden; position: relative; top: 50%; transform: translateY(-50%); }
#top .name h2 { margin: 0; font-size: 34px; font-weight: 400; text-transform: uppercase; }
#top .name h2 small { font-size: 22px; font-weight: 400; }
#top .name p { margin: 0; }
#top .patron { background: #fff url(https://zsbystrzejowice.szkolnykatalog.pl/themes/szkolny3/images/patron.png) center center no-repeat; float: right; width: 145px; height: 145px; }
#top .godlo { background: #fff url(../images/godlo.png) center center no-repeat; width: 145px; height: 145px; float: left; margin-right: 24px; }
#top .calendar { position: absolute; background: #fff; width: 300px; height: 288px; bottom: -48px; left: 0; overflow: hidden; }
#top .calendar .datepicker { width: auto; height: auto; left: 50%; }
#top .calendar .datepickerContainer { transform: translateX(-50%); }
#top .calendar .datepicker tbody th, #top .calendar .datepicker tbody th a { font-weight: 800; height: 32px; }
#top .calendar .datepickerMonth a { text-transform: uppercase; }
#top .calendar .datepickerMonth a span { display: block; line-height: 24px; }
#top .calendar .datepickerDoW { border-bottom: 1px #e6e6e6 solid; }
#top .calendar .datepickerGoPrev a, #top .calendar .datepickerGoNext a { background: url(https://zsbystrzejowice.szkolnykatalog.pl/themes/szkolny3/images/calendar-arrow.png) left center no-repeat; }
#top .calendar .datepickerGoNext a { transform: scale(-1, 1); }
#top tbody.datepickerDays a { width: 33px; height: 33px; font-weight: 600; text-decoration: none; padding: 1px; }
#top tbody.datepickerDays a span { border-radius: 50%; width: 29px; height: 29px; border: 2px transparent solid; display: block; background: #F5562F; }
#top td.datepickerDisabled a { color: #737373; }
#top td.datepickerDisabled a span, #top td.datepickerNotInMonth a span { background: #fff; }
#top td.datepickerNotInMonth a { color: #c4c4c4; }
#top td.datepickerSpecial a span, #top td.datepickerSpecialActive a span { background: #fff; color: #646060; border: 2px #009acf solid; font-size: 14px; font-weight: 600; }

#top_menu { background: #fff; text-align: left; line-height: 24px; padding: 38px 45px; font-weight: 500; position: relative; }
#top_menu .menu_toggle { background: url(../images/menu-toggle.png) left center no-repeat; padding-left: 30px; display: none; height: 47px; margin: auto; width: 60px; vertical-align: top; text-transform: uppercase; color: #fefefe; line-height: 48px; font-weight: 500; cursor: pointer; }
#top_menu ul { display: block; margin: auto; width: 100%; }
#top_menu > ul > li { display: inline-block; padding: 0; font-size: 14px; color: #1d1e20; text-transform: uppercase; margin: 0 13px; transition: all 0.3s ease; position: relative; }
#top_menu > ul > li > a { color: #1d1e20; text-decoration: none; display: block; }
#top_menu ul ul { background: #fff; padding: 0 18px; overflow: hidden; position: absolute; top: 80px; left: 50%; width: 242px; max-height: 0; overflow: hidden; border-width: 0; border-color: #ed145b; border-style: solid; border-radius: 10px; text-shadow: none; transition: all 0.4s ease; transform: translateX(-50%); z-index: 557; }
#top_menu ul ul li a { color: #1d1e20; }
#top_menu ul li:hover ul { max-height: 1000px; border-width: 3px; }
#top_menu ul ul li { border-bottom: 1px #ed145b dotted; color: #ed145b; line-height: 29px; font-size: 14px; text-transform: uppercase; font-weight: 800; padding: 10px 0; }
#top_menu ul ul li.first_item { margin-top: 6px; }
#top_menu ul ul li.last_item { border-bottom: none; margin-bottom: 6px; }
#top_menu .fb_icon { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); margin-left: 20px; }
#top_menu .fb_icon a { background: url(../images/fb-icon.png) center center no-repeat; width: 40px; height: 40px; background-size: contain; display: block; text-indent: -9999px; }
#top_menu .user_icon { position: absolute; right: 86px; top: 50%; transform: translateY(-50%); margin-left: 20px; }
#top_menu .user_icon a { background: url(../images/user-icon.png) center center no-repeat; width: 40px; height: 40px; background-size: contain; display: block; text-indent: -9999px; cursor: default; }
#banner { width: auto; }
#banner .buttons { position: absolute; top: 165px; right: -55px; width: 112px; z-index: 555; }
#banner .btn_prev, #banner .btn_next { background: url(../images/banner-arrows.png) left center no-repeat; cursor: pointer; width: 56px; height: 56px; float: left; }
#banner .btn_next { background-position: right center; }

#main .header { background: #7bb971; line-height: 99px; border-left: 67px #f7da64 solid; }
#main .header .soc_links { float: right; width: 120px; margin-top: 29px; margin-right: 29px; text-transform: uppercase; text-indent: -9999px; }
#main .header .soc_links ul { list-style: none; }
#main .header .soc_links li { float: left; margin-left: 12px; width: 44px; height: 45px; }
#main .header .soc_links a { display: block; }
#main .header .soc_links .gplus a { background: url(https://zsbystrzejowice.szkolnykatalog.pl/themes/szkolny3/images/gplus-logo.png) no-repeat; }
#main .header .soc_links .facebook a { background: url(https://zsbystrzejowice.szkolnykatalog.pl/themes/szkolny3/images/facebook-logo.png) no-repeat; }
#main .header h1 { margin: 0; color: #fff; font-size: 34px; font-weight: 400; padding: 28px 10px 28px 45px; overflow: hidden; line-height: 44px; }

#sidebar { background: #f7f7f7; float: left; width: 320px; padding: 12px 32px; }
#sidebar h3 { border-bottom: 1px #d0d0d0 solid; margin-bottom: 12px; height: 44px; line-height: 50px; font-weight: 300; color: #ea6a56; font-size: 18px; padding-left: 34px; position: relative; }
#sidebar h3:before, #bottom h3:before { background: #f7da64; width: 23px; height: 34px; position: absolute; top: 0; left: 0; content: ''; }
#sidebar h3 a { color: #ea6a56; text-decoration: none; }
#sidebar p { line-height: 18px; }
#sidebar .iz { margin-bottom: 35px; }
#sidebar .menu { margin-left: -15px; }
#sidebar .menu ul li { text-align: left; line-height: 33px; padding: 3px 15px; border-bottom: 1px #acacac dotted; font-weight: 300; font-size: 14px; color: #212120; position: relative; display: block; }
#sidebar .menu ul li.last_item { border-bottom: none; }
#sidebar .menu ul li.children:after { position: absolute; top: 0; right: -31px; display: none; content: ''; height: 39px; width: 32px; border-right: 6px #ea6a56 solid; }
#sidebar .menu ul li.children:hover:after { display: block; }
#sidebar .menu li a { color: #212120; }
#sidebar .menu ul ul { background: #ea6a56; opacity: 0; transition-property: opacity, visibility; transition-duration: 0.3s, 0s; transition-delay:  0s, 0.3s; padding: 14px 33px; position: absolute; top: 0; left: 301px; z-index: 10; visibility: hidden; }
#sidebar .menu ul li:hover > a, #sidebar .menu ul li.active > a { color: #b75a26; }
#sidebar .menu ul li:hover > ul { opacity: 1; z-index: 100; visibility: visible; }
#sidebar .menu ul ul li { width: 218px; }
#sidebar .menu ul ul ul { left: 251px; }
#sidebar .preview_category { position: relative; }
#sidebar .preview_category h6 { margin-bottom: 10px; transition: all 0.3s ease; }
#sidebar .preview_category h6 a { color: #4d4d4d; line-height: 18px; font-size: 14px; font-weight: 300; }
#sidebar .preview_category h6:hover a { color: #000; }
#sidebar .preview_category .view_more { position: absolute; top: 18px; right: 8px; font-size: 14px; font-weight: 300; }
#sidebar .preview_category .view_more a { color: #ea6a56; }
#sidebar .text { text-align: center; }
#sidebar .text h3 { text-align: left; }
#sidebar .text img { max-width: 100%; }


#main_contents { padding: 50px 50px 50px 70px; color: #494949; float: left; width: 880px; }
#main_contents h1, #main_contents h2, #main_contents h3, #main_contents h4, #main_contents h5, #main_contents h6 { font-size: 32px; color: #7bb971; font-weight: 400; }
#main_contents h2 { font-size: 26px; }
#main_contents h3 { font-size: 22px; }
#main_contents h4 { font-size: 18px; }
#main_contents h5 { font-size: 16px; }
#main_contents h6 { font-size: 14px; }
#main_contents .slideshow, #main_contents .preview_images, #main_contents .list_images { text-align: center; }
#main_contents .slideshow .photo, #main_contents .preview_image, #main_contents .list_image { display: inline-block; float: none; border: 3px #e24c52 solid; margin-left: 8px; margin-right: 5px; margin-bottom: 16px; border-radius: 10px; }
#main_contents .slideshow .photo img, #main_contents .preview_image img, #main_contents .list_image img { border-radius: 6px; }
#main_contents p { line-height: 22px; margin: 1.6em 0; }
#main_contents blockquote { background: #00a3d9; padding: 60px 25px 32px; border-radius: 10px; line-height: 24px; font-size: 16px; font-style: normal; color: #fff; font-weight: 700; position: relative; margin: 61px 133px 27px; }
#main_contents blockquote p { line-height: 24px; font-size: 16px; margin: 0; }
#main_contents blockquote footer { text-align: right; line-height: 18px; font-size: 14px; font-style: italic; color: #fff; font-weight: 500; margin-top: 10px; margin-right: 50px; }
.cf:after { display: table; content: ''; clear: both; }
#main_contents blockquote:before { background: url(https://zsbystrzejowice.szkolnykatalog.pl/themes/szkolny3/images/quote-bg.png) center center no-repeat; display: block; position: absolute; top: -53px; right: 0; content: ''; width: 214px; height: 117px; }
#bottom { background: #7bb971; color: #fff; position: relative; font-size: 14px; font-weight: 300; padding: 5px 0 55px; }
#bottom a { color: #fff; }
#bottom p { margin: 0 0 1em; line-height: 18px; }
#bottom h3 { border-bottom: 1px #a1c87e solid; margin-bottom: 12px; height: 48px; line-height: 50px; font-weight: 300; color: #fff; font-size: 18px; padding-left: 34px; position: relative; }
#bottom h3 a { color: #fff; text-decoration: none; }
#bottom .iz { float: left; width: 260px; margin-right: 20px; }

#bottom iframe { vertical-align: middle; }
#author { font-size: 12px; line-height: 30px; text-align: right; margin-right: 40px;  }
/*#footer { float: right; text-align: right; font-size: 12px; margin-right: 30px; }*/
#cookies_policy { position: fixed; bottom: 0; width: 100%; text-align: center; padding: 10px 0; border-top: 1px #ccc solid; background: #fff; color: #000; font-size: 14px; z-index: 599; }
#cookies_policy .close { float: right; margin: 0 5% 10px 20px; }
#cookies_policy a { color: #111f4e; }
#fancybox-wrap, #fancybox-wrap div { box-sizing: content-box; }

@media screen and (min-width: 1601px){
#sidebar .menu { position: absolute; top: 0; left: -274px; margin-left: 0; }
#sidebar .menu > ul { padding: 20px 38px; }
#sidebar .menu > ul > li { width: 220px; }
#sidebar .menu ul li { text-align: right; border-bottom: 1px #d9d9d9 dotted; font-weight: 300; font-size: 14px; color: #fff; }
#sidebar .menu > ul > li { color: #2d2d2d; }
#sidebar .menu ul li a { color: #fff; }
#sidebar .menu > ul > li > a { color: #2d2d2d; }
#sidebar .menu ul li.children:after { border-right: 6px #f7da64 solid; right: -16px; }
#sidebar .menu ul li:hover > a, #sidebar .menu ul li.active > a { color: #fff799; }
#sidebar .menu > ul > li:hover > a, #sidebar .menu > ul > li.active > a { color: #ea6a56; }
#sidebar .menu ul ul li.children:after { right: -32px; }
#sidebar .menu ul ul { background: #7bb971; left: 236px; }
#sidebar .menu ul ul ul { left: 251px; }
}
/*
@media screen and (min-width: 1201px) and (max-width: 1600px){
#sidebar .menu ul ul { background: none; position: static; opacity: 1; visibility: visible; max-height: 0; padding: 0; transition: all 0.3s; }
#sidebar .menu ul li:hover > ul { max-height: 800px; padding: 0; }
#sidebar .menu ul li.children:after { border-right: none; }
#sidebar .menu ul li { overflow: hidden; }
#sidebar .menu ul li:hover { overflow: hidden; }
}
*/
@media screen and (max-width: 1600px){
#contents { position: relative; display: flex; flex-direction: row-reverse; }
#contents:before { background: #f7da64; width: 2px; height: 100%; position: absolute; top: 0; left: 318px; content: ''; display: block; }
#sidebar { background: none; float: left; width: 318px; margin-right: 2px; }
#sidebar h3 { color: #ce3c39; }
#sidebar h3:before { background: #0eb492; }
#sidebar h3 a, #sidebar .preview_category .view_more a { color: #ea6a56; }
#sidebar .menu ul ul li { border-bottom: 1px dotted #f5b5ab; }
#sidebar .menu ul ul li, #sidebar .menu ul ul li a { color: #fff; }
#sidebar .menu ul ul li:hover, #sidebar .menu ul ul li:hover a { color: #F8DBD7; }
#main_contents { width: 100%; float: right; flex: 1; }
#main_contents .slideshow_m_thumbs, #main_contents .preview_images, #main_contents .list_images { margin-right: -20px; }
#main .banner .buttons { right: 0; }
#main_contents blockquote { margin: 61px 10% 27px; }
#bottom .iz { margin-right: 0; margin-left: 20px; }
}
@media screen and (max-width: 1100px){
#top_menu { padding-right: 80px; padding-left: 0; }
#top_menu .fb_icon, #top_menu .user_icon { display: none; }
}
@media screen and (max-width: 880px){
#top { height: auto; }
#top .logo { float: none; margin: 0 auto; }
#top .name { clear: both; transform: none; }
}
@media screen and (max-width: 760px){
#top { height: auto; background-size: cover; padding: 12px 0; }
#top .logo_block, #top .preview_category, #top .slideshow, #top .calendar, #top .menu, #sidebar, #main_contents, #bottom .iz_1 { float: none; width: auto; margin-top: 0; margin-left: 0; margin-right: 0; }
#top .logo a { background-size: contain; margin: 0 auto 10px; }
#top .name h2 { font-size: 24px; }
#top .godlo, #top .patron { display: none; }
#top_menu { padding: 23px 80px 23px 5px; }
#main .top_menu { padding: 5px 0; background: #6C98A7; transition: all 0.5s linear; }
#main .top_menu ul { display: none; }
#main .top_menu ul li:hover ul { max-height: 0; border: none; }
#main .top_menu .menu_toggle { display: block; }
#main .soc_links { display: none; }
#main .header { border: none; }
#main .header h1 { padding: 10px; font-size: 28px; line-height: 34px; }
#top .address { display: none; float: none; margin: 5px; width: auto; }
#contents { display: block; }
#contents:before { display: none; }
#sidebar { border: none; float: none; margin: 20px 10px; padding: 0; }
#sidebar .menu { margin: 0; }
#sidebar .menu ul li { padding: 3px 0; }
#sidebar .menu ul li a { display: block; }
#sidebar .menu ul ul { opacity: 1; position: static; visibility: visible; padding: 5px 0 5px 15px; background: none; }
#sidebar .menu ul ul li { padding: 0; border: none; }
#sidebar .menu ul ul li, #sidebar .menu ul ul li a { color: #212120; }
#sidebar .menu ul ul li:hover, #sidebar .menu ul ul li:hover a { color: #212120; }
#sidebar .promoted_node { display: none; }
#sidebar h3 { }
#main_contents { padding: 10px; float: none; width: auto; }
#main_contents .content_main { margin: 0; }
#main_contents blockquote { padding: 15px; margin: 5px; }
#main_contents blockquote:before { display: none; }
#main_contents .slideshow_m_thumbs, #main_contents .preview_images, #main_contents .list_images { margin-right: 0; }
#bottom h3 { }
#bottom .iz { margin: 20px 10px; float: none; width: auto; }
#bottom .iz_1 { height: auto; }
}
@media screen and (max-width: 420px){
#top .logo a { height: auto; width: 50%; min-height: 80px; }
#top .name h2, #top .name h2 small { font-size: 16px; }
#top .name p { font-size: 14px; }
}