/*
 Theme Name:   sajan
 Author:       Maciej Sajan
 Template:     twentyseventeen
 Version:      1.0.0
*/


/* próg menu mobile @media (min-width:768px) */


@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;700&display=swap');


/*####################################### menu główne */



@media (min-width:768px){
    /* pusty kontener po nawigacji który sprawiał dziure pod bannerem*/
    .navigation-top {
        background: #000;
        border: none;
        height: 0;
    }
    #site-navigation > div {
        position: fixed;
        top: 0px;
        box-shadow: rgb(255 255 255 / 5%) 0px 7px 10px;
        width: 100%;
        left: 0;
    }
    
    .colors-dark .main-navigation > div > ul{
        background: rgb(11 11 12 / 93%);
    }
    /*####################################### linki w menu */
    #site-navigation > div a {
        font-family: 'Oxanium', sans-serif;
        color: #fff;
        font-size: 15px;
        text-transform: uppercase;
        padding: 22px 14px;
    }
    #top-menu {
        text-align: right;
    }
    #site-navigation > div .current-menu-item{
        background: #e5830f;
    }
    
    #site-navigation > div li a{
        transition: all, 0.4s;
    }
    #site-navigation > div li.current-menu-item a{
        color:#fff;
    }
    #site-navigation > div li:not(.current-menu-item) a:hover{
        color:#e5830f;
        transform: scale(1.1);
    }
    
         /*####################################### sub menu */
    
    .colors-dark #site-navigation.main-navigation .sub-menu{
        background: rgb(0 0 0 / 68%);
    }
    
    
    .colors-dark #site-navigation.main-navigation .sub-menu .menu-item:hover {
        background: #e5830f;
    }

    .colors-dark #site-navigation.main-navigation .sub-menu .menu-item:not(.current-menu-item) a {
        padding: 10px 14px; 
    }
       
    
    
    .colors-dark #site-navigation.main-navigation .sub-menu .menu-item:not(.current-menu-item):hover a:hover {
        color:#fff;
        transform:none;
    }


}



/*####################################### banner header */

/* nakładka cień nad video*/
.custom-header-media:before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / 62%) 75%, rgb(0 0 0 / 83%) 100%);
}
.twentyseventeen-front-page.has-header-video .custom-header-media:before{
    height: 100%;
}


/*####################################### site branding logo h1 TYTYUL STRONY */



@media (min-width:768px){
    .site-branding {
        top: 66px;
    }
    .site-branding > .wrap {
        width: 100%;
        margin: 0;
        padding: 0;
        max-width: unset;
    }
    img.custom-logo {
        max-height: unset;
        padding: 30px;
    }
    .twentyseventeen-front-page.has-header-image .custom-header-media, .twentyseventeen-front-page.has-header-video .custom-header-media,
    .custom-header-media{
        height: 75vh;
    }
}

/*####################################### ukrycie kontrolki video */
#wp-custom-header-video-button {
    display: none;
}


/*####################################### content area */

body.colors-dark .site-content-contain {
    background-color: #0b0b0c;
}


@media screen and (min-width: 48em){
.wrap {
    max-width: unset!important;
    padding-left: 6em;
    padding-right: 6em;
}
}


@media screen and (min-width: 30em){
    .page-one-column .panel-content .wrap {
        max-width: 1100px;
    }
}







/*####################################### fonty */


/*####################################### naglówki heading */
h1, h2, h3, h4{
    font-family:'Oxanium',sans-serif;
    color:#fff!important;
}

.content-area h1.entry-title{
    font-size: 20px;
}


/*h2 domyslne */
body.page:not(.twentyseventeen-front-page) .entry-title{
    font-size: 35px;
    color: white;
    letter-spacing: 0;
}
/*####################################### teksty */

.content-area p,
.content-area ul li{
    color: #bbbaba;
}

/*####################################### listy */
.content-area ul {
    list-style-image: url(http://postepstudio.pl/wp-content/uploads/punktor_postepstudio.png);
    list-style-position: inside;
}



/*####################################### guziki */
.entry-content  .wp-block-button__link {
    background-color: #e5830f!important;
    font-family: 'Oxanium', sans-serif!important;
    text-transform: uppercase!important;
    padding: 17px 35px 13px 35px!important;
    transition: all, 0.4s!important;
    /* why importan? czemu sie nie nadpisuje z seventeen ta sama reguła???!!!  */
}

.entry-content  .wp-block-button__link:hover {
    background-color: #c31005!important;
    transform: scale(1.2);
    /* why importan? czemu sie nie nadpisuje z seventeen ta sama reguła???!!!  */
}





/*####################################### stopka footer */

#colophon {
    border: navajowhite;
    background: #000;
    background: url(http://postepstudio.pl/wp-content/uploads/stopka_tlo_postepstudio.jpg);
    box-shadow: inset rgb(255 255 255 / 8%) 0px 1px 18px 0px;
    min-height: 200px;
}

/*##############################################################################
##############################################################################
##############################################################################
                        Poniżej style dla intranet ninja
                    powyżej odziedziczone z patentstudio.pl
##############################################################################
##############################################################################
##############################################################################*/

.custom-header {
    height: 270px;
}

code {
    padding: 20px;
}


@media (min-width: 768px){
    .site-branding {
        top: 66px;
        padding: 0;
    }
}

@media (min-width: 768px){
    img.custom-logo {
        max-height: 199px;
        padding: 30px;
    }
}



.colors-dark h2.entry-title a,
.colors-dark h2.entry-title a:hover{
    color: #e5830f;
    font-size: 25px;
    font-weight: bold;
}


/* Rozdziałka artykówów */
#main > article {
    border-bottom: dotted 8px #3e2405;
    margin-bottom: 60px;
    padding-bottom: 40px;
}






/*##############################################################################
                        TIMELINE
##############################################################################*/


#timeline{
    width: 100%;
    height: 5px;
    background: #e5830f;

}


header,
.entry-content{
    width: 100%!important;
}
#znaczniki-kontener{
    width: 100%;
    height: 100px;
    padding: 50px 0px;
    position: relative;
}

.znacznik {
    background: #fff;
    padding: 2px 10px;
    margin:0;
    width: fit-content;
    color: #000;
    font-family: 'Libre Franklin';
    font-weight: bold;
    position: absolute;
    left: 0px;
    user-select: none;
    transition: height 0.4s, backround 0.4s, border 0.4s;
}

.zaznaczony {
    background: #ffb300;
    height: 38px;
    border: solid 2px #fff;
}

button {
    background: #e5830f!important;
    color: #000;
    margin: 15px;
}

#output {
    background: #292929;
    padding: 24px;
    margin: 30px 0;
    border: solid 2px #ffffff3d;
    border-radius: 20px;
    line-height: 1.5;
    font-family: monospace;
}