body 

{
background-image: url("paper3.jpg");
color: black;
text-align: left;
padding-left: 0.01em;
line-height: 1.5;
}

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

h1 {
    font-size: 3.3vw;
	font-family: Papyrus, fantasy;
    text-align: center;	
}

h2 {
    font-size: 2.7vw;
	font-family: Papyrus, fantasy;
    text-align: center;
}

h3 {
    font-size: 2.4vw;
}

h4 {
    font-size: 2.4vw;
}

.text-nowrap
{
  white-space:nowrap;
}

.navl {
    display:inline-block;
	margin: -1em 0 0.5em 1em;
	font-size: 2.4vw;
    text-align: left;
	width:48%;
}

.navr {
    display:inline-block;
	margin: -1em 1em 0.5em 0;
	font-size: 2.4vw;
    text-align: right;
	width:46%;
}

.pgcenter{
margin: 0 auto;
padding: 0 0 1em 0;
text-align: center;
}

.stranaparent {
    font-size: 2.4vw;
    text-align: right;
	width:100%;
}

.stranal {
    display:inline-block;
	font-size: 2.4vw;
    text-align: left;
	width:85%;
}

.stranar {
    display:inline-block;
	font-size: 2.4vw;
    text-align: left;
	width:10%;
}

.button {
    background-color: transparent; /* Seashell */
    border: 1px solid black;
	border-color: #E2725B;
    color: black;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 2vw;
    margin: 4px 2px;
    cursor: pointer;
	border-radius: 12px;
}
 
.button:hover {
    background-color: #FF9933;
    color: white;
} 

.tekst {
  line-height: 1.3;
  margin-right: auto;
  margin-left: auto;
}

p {
  text-align: justify;
  margin:0;
  padding:0;
}

.left
{
text-align: left;
margin:0;
padding:0;
}

.dialog
{
  text-align: justify;
  margin-left: 5em;
  padding:0;
}

.first
{
margin-left: 2em;
white-space:nowrap;
}

.second
{
margin-left: -3.5em;
white-space:nowrap;
}

.btw
{
visibility: hidden;
font-size: 0.2em;
letter-spacing: 8em;
}

.wider
{
letter-spacing: 0.03em;
}

.narrow 
{
letter-spacing: -0.02em;
}

.firstnar 
{
margin-left: 1.5em;
white-space:nowrap;
letter-spacing: -0.02em;
}

.firstwider 
{
margin-left: 1.5em;
white-space:nowrap;
letter-spacing: 0.03em;
}

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

    { body { font-size: 3vw;}
	.tekst {width: 96%;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.06em;}
    } 

	/* vertikalna: Sony C5, Samsung Galaxy S8, S9, S10 = 360 */
@media only screen and (min-width: 331px) and (max-width: 365px)

    { body { font-size: 2.5vw;}
	.tekst {width: 92%;}
	.grom {letter-spacing: 0.1em;}
	#grom2 {letter-spacing: 0.09em;}
    } 

	/* vertikalna: iPhone 6, 7, 8, X, Xs = 375, iPhone 12, 12 Pro = 390 */
@media only screen and (min-width: 366px) and (max-width: 392px)

      { body { font-size: 3.2vw;}
	.tekst {width: 96%;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.06em;}
    } 

	/* vertikalna: Xiaomi = 393, Google Pixel, Nexus, Samsung Galaxy S8+,S9+,S10+ = 412 */
@media only screen and (min-width: 393px) and (max-width: 412px)

    { body { font-size: 2.5vw;}
	.tekst {width: 92%;}
	.grom {letter-spacing: 0.06em;}
	#grom2 {letter-spacing: 0.035em;}
    } 
	
	/* vertikalna: iPhone 6+, 7+, 8+, Xr, Xs max, 11 all = 414 */
@media only screen and (min-width: 413px) and (max-width: 420px)

    { body { font-size: 3.5vw;}
	.tekst {width: 96%;}
	.grom {letter-spacing: 0.06em;}
	#grom2 {letter-spacing: 0.035em;}
    } 
	
	/* vertikalna: iPhone 12 & 13 Pro Max = 428 */
@media only screen and (min-width: 413px) and (max-width: 430px)

    { body { font-size: 3.3vw;}
	.tekst {width: 96%;}
	.grom {letter-spacing: 0.074em;}
	#grom2 {letter-spacing: 0.05em;}
    } 

	/* Samsung Galaxy Note, S10, LG G5, One Plus 3, Huawei P20 = 480, vertikalna */
@media only screen and (min-width: 431px) and (max-width: 490px) and (orientation:portrait)

    { body { font-size: 2.6vw;}
	.tekst {width: 92%;}
	.grom {letter-spacing: 0.07em;}
	#grom2 {letter-spacing: 0.06em;}
    } 

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

    { body { font-size: 2vw; }
	.tekst {width: 94%;}
	.grom {letter-spacing: 0.1em;}
	#grom2 {letter-spacing: 0.06em;}
    } 

	/* Sony Xperia = 540, vertikalna */
@media only screen and (min-width: 491px) and (max-width: 570px) and (orientation: portrait)

    { body { font-size: 2.8vw;}
	.tekst {width: 96%;}
	.grom {letter-spacing: 0.05em;}
	#grom2 {letter-spacing: 0.04em;}
    } 

/* iPhone5 = 568, horizonalna */
@media only screen and (min-width: 491px) and (max-width: 570px) and (orientation: landscape)

    { body { font-size: 2vw;}
	.tekst {width: 94%;}
	.grom {letter-spacing: 0.1em;}
	#grom2 {letter-spacing: 0.07em;}
    } 

	/* Alcatel tablet = 600, vertikalna */
@media only screen and (min-width: 571px) and (max-width: 650px) and (orientation: portrait)

    { body { font-size: 2.5vw;}
	.tekst {width: 94%;}
	.grom {letter-spacing: 0.075em;}
	#grom2 {letter-spacing: 0.06em;}
    }  

/* Sony C5 = 640, horizontalna */
@media only screen and (min-width: 571px) and (max-width: 640px) and (orientation:landscape)

    { body { font-size: 2.5vw;}
	.tekst {width: 90%;}
	.grom {letter-spacing: 0.075em;}
	#grom2 {letter-spacing: 0.055em;}
    }

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

    { body { font-size: 2vw;}
	.tekst {width: 95%;}
	.strana {padding: 0.2em 1.7em 0.2em auto;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.056em;}
    } 

	/* Surface Pro = 720, vertikalna */
@media only screen and (min-width: 671px) and (max-width: 736px) and (orientation:portrait)

    { body { font-size: 2.8vw;}
	.tekst {width: 88%;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.06em;}
    }

/* nesto, horizontalna */
@media only screen and (min-width: 671px) and (max-width: 715px) and (orientation:landscape)

    { body { font-size: 2.4vw;
	background: #FFFFFF;}
	.tekst {width: 92%;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.056em;}
   }   
 
/* iPhone X, Xs (tacno tu), horizontalna */
@media only screen and (min-width: 716px) and (max-width: 725px) and (orientation:landscape)

    { body { font-size: 1.9vw;}
	.tekst {width: 92%;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.056em;}
   }  

/* nesto, horizontalna */
@media only screen and (min-width: 726px) and (max-width: 734px) and (orientation:landscape)

    { body { font-size: 2.4vw;
	background: #edecdc;}
	.tekst {width: 92%;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.056em;}
   } 

/* iPhone 6+, 7+, 8+ = tacno 736, horizontalna */
@media only screen and (min-width: 735px) and (max-width: 736px) and (orientation:landscape)

    { body { font-size: 1.9vw;}
	.tekst {width: 92%;
	line-height: 1.2;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.055em;}
}

/* horizontalna: Samsung Galaxy S8, S9 = 740 */
@media only screen and (min-width: 737px) and (max-width: 740px)

    { body { font-size: 2.4vw;
	background: #FFF5EE;}
	.tekst {width: 90%;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.06em;}
}

/* horizontalna: Samsung Galaxy S9+, S10 = tacno izmedju 741-760 */
@media only screen and (min-width: 741px) and (max-width: 760px)

    { body { font-size: 2.4vw;}
	.tekst {width: 90%;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.06em;}
}

	/* vertikalna: iPad 3,4, iPad Mini, iPad Retina = 768 (tu) */
@media only screen and (min-width: 761px) and (max-width: 770px)

    { body { font-size: 2.8vw;}
	.tekst {width: 88%;
	line-height: 1.2;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.055em;}
}

	/* Samsung Galaxy Tab 10, Amazon Kindle Fire = 800, vertikalna */
@media only screen and (min-width: 771px) and (max-width: 800px) and (orientation:portrait)

    { body { font-size: 2.6vw; }
	.tekst {width: 88%;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.05em;}
}

/* iPhone 12 mini = 780, horizontalna */
@media only screen and (min-width: 771px) and (max-width: 780px) and (orientation:landscape)

    { body { font-size: 1.9vw;}
	.tekst {width: 92%;
	line-height: 1.2;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.055em;}
}
	
/* Samsung Galaxy S20 (2020) = 800, horizontalna */
@media only screen and (min-width: 781px) and (max-width: 800px) and (orientation:landscape)

    { body { font-size: 2.5vw;}
	.tekst {width: 90%;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.05em;}
	}

	/* iPad 7 10.2 inch = 810, vertikalna */
@media only screen and (min-width: 801px) and (max-width: 812px) and (orientation:portrait)

    { body { font-size: 3vw;}
	.tekst {width: 88%;}
	.grom {letter-spacing: 0.09em;}
	#grom2 {letter-spacing: 0.06em;}
}

/* iPhone XR = tacno tu (navodno 808), Xs Max, 11 Pro = 812, horizontalna */
@media only screen and (min-width: 801px) and (max-width: 812px) and (orientation:landscape)

    { body { font-size: 1.9vw;}
	.tekst {width: 90%;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.055em;}
}

/* horizontalna: Samsung A5 (tacno tu) */
@media only screen and (min-width: 813px) and (max-width: 830px)

    { body { font-size: 2.5vw;}
	.tekst {width: 90%;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.055em;}
}

	/* iPad Pro 10.5" = 834, vertikalna */
@media only screen and (min-width: 831px) and (max-width: 854px) and (orientation:portrait)

    { body { font-size: 3.2vw;}
	.tekst {width: 86%;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.06em;}
}

/* iPhone 12, 12 Pro = 844, horizontalna */
@media only screen and (min-width: 831px) and (max-width: 854px) and (orientation:landscape)

    { body { font-size: 1.9vw;}
	.tekst {width: 90%;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.055em;}
}

	/* iPad Pro = 1024, vertikalna */
@media only screen and (min-width: 855px) and (max-width: 1100px) and (orientation:portrait)

    { body { font-size: 3.4vw;}
	.tekst {width: 82%;}
	.grom {letter-spacing: 0.07em; }
	#grom2 {letter-spacing: 0.05em; }
    }

/* iPhone XR, 11 Pro, 11 Pro Max = 896, iPhone 12 Pro Max = 926, horizontalna */
@media only screen and (min-width: 855px) and (max-width: 930px) and (orientation:landscape)

    { body { font-size: 1.9vw;}
	.tekst {width: 90%;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.055em;}
}
	
/* Alcatel tablet = 960, iPad = 1024, Huawei Mate 20 Pro = 1040, horizontalna */
@media only screen and (min-width: 931px) and (max-width: 1100px) and (orientation:landscape)

    { body { font-size: 2.5vw;}
	.tekst {width: 85%;}
	#firstgr {letter-spacing: 0.01em;}
	.grom {letter-spacing: 0.07em;}
	#grom2 {letter-spacing: 0.04em;}
    } 
 
@media only screen and (min-width: 1101px) and (max-width: 1250px)

    { body { font-size: 2.4vw;}
    .tekst {width: 70%;}
    .strana {padding-right:1.7em;}
	.grom {letter-spacing: 0.08em;}
    }

/* Lenovo tablet 10 = 800x1280-horizontalna, my desktop */
@media only screen and (min-width: 1251px) and (max-width: 1350px)

    { body { font-size: 2.3vw;}
    .tekst {width: 68%;}
    .strana {padding-right:1.7em;}
	.grom {letter-spacing: 0.08em;}
	#grom2 {letter-spacing: 0.062em;}
	#firstgr {letter-spacing: 0.025em;}
    }

@media only screen and (min-width: 1351px) and (max-width: 1500px)

    { body { font-size: 2vw;}
	.tekst {width: 58%;}
    .strana {padding-right:1.7em;}
	.grom {letter-spacing: 0.075em;}
	#grom2 {letter-spacing: 0.06em;}
	#firstgr {letter-spacing: 0.01em;}
    }

@media only screen and (min-width: 1501px) 

    { body { font-size: 2vw;}
	.tekst {width: 56%;}
    .strana {padding-right:1.7em;}
	.grom {letter-spacing: 0.07em;}
	#grom2 {letter-spacing: 0.04em;}
	#firstgr {letter-spacing: 0.01em;}
    }


#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: 0.4em 0.2em;
    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);
}



#strohan{
    height: 200px;
    width: 100%;
    line-height: 200px;
    text-align: center;
}

.btn {
    border: 2px solid black;
    background-color: white;
    color: black;
    padding: 10px 20px;
    font-size: 2.3vw;
    cursor: pointer;

}

/* Burnt orange */
.success {
    border-color: #CC5500;
    color: black;

}

.success:hover {
    background-color: #CC5500;
    color: white;
}

/* Cinnamon */
.info {
    border-color: #D2691E;
    color: black;

}

.info:hover {
    background: #D2691E;
    color: white;
}

/* Burnt orange */
.warning {
    border-color: #CC5500;
    color: black;

}

.warning:hover {
    background: #CC5500;
    color: white;
}