@font-face {
    font-family: 'DrukText-Medium';
    src: url('https://www.jutarnji.hr/templates/site/fonts/jutarnji/DrukTextMedium/DrukText-Medium.woff') format('woff'),
    url('https://www.jutarnji.hr/templates/site/fonts/jutarnji/DrukTextMedium/DrukText-Medium.ttf') format('truetype');
    font-weight: normal;
	font-style: normal;
}


@font-face {
    font-family: 'DrukText-MediumItalic';
    src: url('https://www.jutarnji.hr/templates/site/fonts/jutarnji/DrukTextMediumItalic/DrukText-MediumItalic.woff') format('woff'),
    url('https://www.jutarnji.hr/templates/site/fonts/jutarnji/DrukTextMediumItalic/DrukText-MediumItalic.ttf') format('truetype');
    font-weight: normal;
	font-style: normal;
}



/*  BOJE:
    color: #18232f;
    color: #e64314;  */


/*  ŠIRINE:
    BIG: 1558px;
    md: 1244px; 
    sm-do 1022px: 100%; padding: 20px;
    xs-do 768: 100%; padding: 0;    */


    .section-news {
        background-color: #ffffff;
        background-image: url('https://apps.jutarnji.hr/cdn/newsletteri-v5/1920-300.png');
        background-size: 1920px;
        background-position: center top;
        background-repeat: no-repeat;
        padding: 70px 10px 30px 10px;  

        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        }


    h1 {    
        margin: 0;
        }

    
    h1.banner {
        font-family: 'DrukText-Medium', sans-serif;
        color: #18232f;
        font-size: 58px;
        line-height: 65px;
        font-weight: normal;
        margin: 250px auto 0 auto;
        width: 90%;
        text-align: center;
        }


    .best {
        margin: 70px auto 0 auto;
        width: 90%;
        text-align: center;
        }
 

        .best h1 {
            font-family: 'Slabo 27px', serif;
            font-weight: 400;
            color: #1D1D1D;
            font-size: 50px;
            line-height: 52px;
            }


        .best h2 {    
            font-family: 'Open Sans', sans-serif;
            font-weight: 400;
            color: #1D1D1D;
            font-size: 22px;
            line-height: 25px;
            padding: 0 10%;
            padding-top: 20px;
            } 


    .forma {    
        margin: 0 auto;
        width: 100%;
        text-align: center;
        height: auto;
        } 
        
        

/* MEDIA QUERIES */
    
    
@media (min-width: 576px) {

    .section-news {
        background-size: 1920px;
        background-position: center top;
        }



    .best h1 {    
        font-size: 64px;
        line-height: 74px;
        } 

    .forma, 
    .best {    
        width: 550px;
        } 
    
}

@media (min-width: 768px) {

    .forma, 
    .best {    
        width: 650px;
        }    

    .best {
        margin: 154px auto 0 auto;
        }

        h1.banner {
            font-size: 72px;
            line-height: 72px;
            margin: 44px auto 0 auto;
            text-align: left;
            }
       

    .section-news {
        background-size: 1525px;
        background-position: 28% top;
        }

}

@media (min-width: 992px) {

    .forma, 
    .best, 
    h1.banner {    
        width: 818px;
        } 

    .best {    
        margin: 172px auto 0 auto;
        } 

    .section-news {
        background-size: 1700px;
        background-position: 8% top;
        }

}

@media (min-width: 1200px) {

    .best, 
    h1.banner {    
        width: 1242px;
        }

    .best {    
        margin: 220px auto 0 auto;
        } 


    .section-news {
        background-size: 1920px;
        background-position: center top;
        }
    

}


@media (min-width: 1921px) {


    .section-news {
        background-size: 2560px;
        }
    

}