/*
Theme Name: DevUpgrade
Description: DevUpgrade.online — darmowy kurs online dla programistów na poziomie junior i regular
Author: Łukasz Krawczyk
Author URI: mailto:lukasz.krawczyk.lublin@gmail.com
Template: wp-bootstrap-starter
Version: 1.0.0
Text Domain: devupgrade
*/

/*********** COLORS **********/
/*
#202020 black
#909090 gray
#e0e1d7 white-like
*/

html { font-size: 1rem; }

body { font-size: .9375rem; line-height: 1.6; color: #909090; }

#page h1,
#page h2,
#page h3,
#page h4,
#page h5,
#page h6 { font-family: 'Fira Sans', sans-serif !important; font-weight: 700; }

#page h1 { font-size: 2.125rem !important; line-height: 1.6 !important; }

a,
a:hover,
img,
img:hover,
i,
i:hover,
div,
div:hover { transition: all .4s; }

a:hover { text-decoration: none; }

a { color: #fff; }

a:hover { color: #909090; }

#promo a { color: #202020; }

#promo a:hover { color: #909090; }

#promo a.my-btn.btn-dark { background-color: #202020; color: #fff; }

#promo a.my-btn.btn-dark:hover { background-color: #909090; }

#cookie-notice { border-top: .0625rem solid #909090; }

#cookie-notice .cn-button { background-color: #909090; color: #202020; }

#cookie-notice .cn-button:hover { background-color: #fff; }

.navbar-brand img { height: 3.75rem; width: auto; padding-top: 0; padding-bottom: 0; }

header#masthead { background-color: #202020; position: -webkit-sticky; position: sticky; top: 0; z-index: 99; border-bottom: .125rem solid #e0e1d7; box-shadow: 0 0 3rem #202020; }

body:not(.theme-preset-active) #masthead .navbar-nav li > a { text-transform: none; font-size: 1rem; font-weight: 700; color: #909090; padding: 0; margin: .625rem 0 0; text-align: center; }

body:not(.theme-preset-active) #masthead .navbar-nav li:first-child > a { margin-left: 0; }

body:not(.theme-preset-active) #masthead .navbar-nav li:last-child > a { margin-right: 0; }

body:not(.theme-preset-active) #masthead .navbar-nav li > a:hover { font-weight: 700; color: #fff; }

.navbar-light .navbar-toggler { background: linear-gradient(to right, #e0e1d7, #636668); border: none; }

#page-sub-header { background-repeat: no-repeat !important; background-position: center bottom 1rem, right center !important; background-size: 1rem, cover !important; border-bottom: .125rem solid #e0e1d7; padding-top: 0; }

#extra { background: linear-gradient(to right, #e0e1d7, #a0a09e); }

#page-sub-header #slogan .plate { background: linear-gradient(to right, #e0e1d7, #a0a09e); padding: 1.5rem 15px; visibility: hidden; }

#page-sub-header #slogan,
#slogan-mobile { text-align: left; }

#slogan-mobile { padding: 1.5rem 15px; }

#page-sub-header #slogan h1,
#page-sub-header #slogan .entry-content,
#slogan-mobile h1,
#slogan-mobile .entry-content { color: #202020; }

#page-sub-header #slogan h1,
#slogan-mobile h1 { font-family: 'Fira Code', monospace !important; font-size: 1.25rem !important; letter-spacing: .25rem; }

#page-sub-header p { font-size: .875rem; font-weight: 400; line-height: 1.8; }

#page-sub-header #mouse { height: 1.5rem; }

.entry-content > :last-child { margin-bottom: 0; }

.my-btn { background-color: #909090; border-color: #909090; color: #fff; text-transform: uppercase; font-weight: 700; font-size: .75rem; letter-spacing: .125rem; padding: .75rem 1.5rem; }

.my-btn:active { background-color: transparent !important; border-color: #909090 !important; color: #909090 !important; }

.my-btn:hover { background-color: transparent; border-color: #909090; color: #909090; }

body:not(.theme-preset-active) footer#colophon { background-color: #202020; color: #909090; }

body:not(.theme-preset-active) footer#colophon a:hover { color: #fff; }

#social-media { background-color: #e0e1d7; color: #202020; font-size: 85%; }

#social-media a { color: #202020; }

#social-media a:hover,
#social-media a:hover i { color: #909090; }

#social-media i.linkedin { color: #0073b1; }

#social-media i.twitter { color: #4ca0ec; }

#social-media i.github { color: #25292e; }

#social-media i.youtube { color: #ea3323; }

#social-media i.facebook { color: #304979; }

#content.site-content { padding-top: 0; padding-bottom: 0; }

#content.site-content .main-header { margin-bottom: 1.5rem; padding-bottom: 0; text-align: center; }

#content.site-content .main-header::after { content: ''; position: relative; display: block; width: 3rem; height: .25rem; margin-left: auto; margin-right: auto; margin-top: .375rem; background-color: #909090; }

.post.hentry { margin-bottom: 0; }

.section { background-color: #202020; padding-top: 4rem; padding-bottom: 4rem; }

.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6 { color: #fff; }

.section.short { background: linear-gradient(to right, #909090, #e0e1d7, #909090); padding-top: 2.625rem; padding-bottom: 2.625rem; text-align: center; }

.section.short h1,
.section.short h2,
.section.short h3,
.section.short h4,
.section.short h5,
.section.short h6 { color: #202020; }

.section.short h1 { font-size: 1.625rem !important; }

.section.short h6 { font-size: 1.0625rem; }

.section.short .date h6 { color: #909090; }

.section.short img { height: 2.3125rem; width: auto; }

#zapowiedz,
#ile-to-kosztuje { background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed; background-size: cover; }

#zapowiedz i,
#ile-to-kosztuje i { color: #909090; }

#ile-to-kosztuje { color: #fff; }

.video-container { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; }

.video-container iframe { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#epizody .slick-carousel .thumb { cursor: pointer; }

#epizody .slick-carousel .thumb:hover { opacity: .75; }

/* #epizody .slick-carousel .thumb.disabled { cursor: not-allowed; filter: grayscale(100%) blur(.125rem); transition: all .4s; } */

#epizody .slick-carousel .thumb .video-title { color: #fff; }

#o-autorach .full-name { font-size: 1.375rem; }

.separator { background-color: #909090; border: none; height: .0625rem; margin-top: 2rem; margin-bottom: 2rem; width: 100%; }

.slick-prev,
.slick-next { z-index: 1; }

.slick-prev { left: 0; }

.slick-next { right: 0; }

@media (min-width: 576px) {
    #page-sub-header #slogan h1,
    #slogan-mobile h1 { font-size: 1.625rem !important; }
    .slick-prev { left: -25px; }
    .slick-next { right: -25px; }
}

@media (min-width: 768px) {
    body:not(.theme-preset-active) #masthead .navbar-nav li > a { margin: 0 1.5rem; text-align: left; }
    #page-sub-header { background-position: center bottom 1rem, center !important; }
    #page-sub-header #slogan .plate { padding: 1.5rem 2.75rem; visibility: visible; }
}

@media (min-width: 992px) {
    #o-autorach .separator { width: 91.67%; }
    #page-sub-header #slogan .plate { padding: 4.25rem 2.75rem; }
}

@media (min-width: 1200px) {
    .navbar-brand img { height: 8rem; width: auto; padding-top: 1rem; padding-bottom: 1rem; }
    .navbar-brand img.mini { height: 3.75rem; padding-top: 0; padding-bottom: 0; }
    #o-autorach .separator { width: 83.33%; }
}