body 

{
background: #dfdfdf;
color: black
text-align: left;
padding-left: 0.01em;
line-height: 1.3;

}

a:link, a:visited { color: black }

h1 {
    font-size: 4vw;
    text-align: center;
}

h2 {
    font-size: 3.6vw;
    text-align: center;
}

h3 {
    font-size: 2.4vw;
}

h4 {
    font-size: 2.4vw;
}

#tekst {
    width: 100%;
    margin: 0 auto;
    padding-left: 1em;
}

.strana {

    text-align: right;
    padding: 0.3em 1.5em 0.3em 0.1em;

}



/* iPhone 4,5 vertikalna = 320 */
@media only screen and (max-width: 330px) 


       { body { font-size: 3vw; }

    } 

/* Sony C5 vertikalna = 360 */
@media only screen and (min-width: 331px) and (max-width: 370px)


       { body { font-size: 2.7vw; }

    } 

/* iPhone 6, 7, 8 vertikalna = 375, iPhone 6+, 7+, 8+ vertikalna = 414 */
@media only screen and (min-width: 371px) and (max-width: 420px)


       { body { font-size: 3.1vw; }

    } 

@media only screen and (min-width: 421px) and (max-width: 490px) and (orientation:portrait)


       { body { font-size: 3.2vw; }

    } 

/* iPhone 4 horizontalna = 480 */
@media only screen and (min-width: 421px) and (max-width: 490px)  and (orientation:landscape)


       { body { font-size: 2vw; }

    } 

/* Nexus 7 tablet vertikalna = 601 */
@media only screen and (min-width: 491px) and (max-width: 620px)


       { body { font-size: 2.6vw; }

    } 

/* iPhone 6,7,8 = 667 */
@media only screen and (min-width: 621px) and (max-width: 720px)


       { body { font-size: 2.3vw; }

    } 


/* Galaxy tablets, Kindle Fire = 800 */
@media only screen and (min-width: 721px) and (max-width: 840px) and (orientation:portrait)


       { body { font-size: 2.8vw}

    }


/* iPhone 6+,7+,8+ = 736, iPhone X = 812 */
@media only screen and (min-width: 721px) and (max-width: 840px) and (orientation:landscape)


       { body { font-size: 2.6vw; }

    } 

/* iPad Pro = 1024 x 1366 */
@media only screen and (min-width: 841px) and (max-width: 1100px)


       { body { font-size: 2.4vw; }
	   #tekst {width: 85%;}
        .strana {padding-right:1.7em;}

    } 
 
@media only screen and (min-width: 1101px) and (max-width: 1250px)



       { body { font-size: 2.2vw; }
	   #tekst {width: 80%;}
        .strana {padding-right:1.7em;}

    }

@media only screen and (min-width: 1251px) and (max-width: 1823px)

       { body { font-size: 2.1vw;}
	   #tekst {width: 70%;}
        .strana {padding-right:1.7em;}
    }


@media only screen  and (min-width : 1824px) 
       { body { font-size: 1.9vw; }
	   #tekst {width: 70%;}
        .strana {padding-right:1.7em;}

    }


#container {
    width: 100%;
    margin: 0 auto;
    padding: 5px;
}


.btn {
    display: inline-block;
    padding: 10px;
    border-radius: 5px; /*optional*/
    color: #aaa;
    font-size: .875em;
}

.pagination {
    background: #f2f2f2;
    padding: 5px;
    margin-bottom: 5px;
}

.page {
    display: inline-block;
    padding: 0px 9px;
    margin-right: 4px;
    border-radius: 3px;
    border: solid 1px #c0c0c0;
    background: #e9e9e9;
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
    font-size: .875em;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}

.page:hover, .page.gradient:hover {
    background: #fefefe;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
    background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
}

.page.active {
    border: none;
    background: #616161;
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
    color: #f0f0f0;
    text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}

.page.gradient {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f8f8), to(#e9e9e9));
    background: -moz-linear-gradient(0% 0% 270deg,#f8f8f8, #e9e9e9);
}


.page.dark {
    border: solid 1px #32373b;
    background: #3e4347;
    box-shadow: inset 0px 1px 1px rgba(255,255,255, .1), 0px 1px 3px rgba(0,0,0, .1);
    color: #feffff;
    text-shadow: 0px 1px 0px rgba(0,0,0, .5);
}

.page.dark:hover, .page.dark.gradient:hover {
    background: #3d4f5d;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#547085), to(#3d4f5d));
    background: -moz-linear-gradient(0% 0% 270deg,#547085, #3d4f5d);
}

.page.dark.active {
    border: none;
    background: #2f3237;
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .1);
}

.page.dark.gradient {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#565b5f), to(#3e4347));
    background: -moz-linear-gradient(0% 0% 270deg,#565b5f, #3e4347);
}