/*========= FONTS */

@font-face {
    font-family: 'secession';
    src: url('fonts/secession-afisha-normal.eot');
    src: url('fonts/secession-afisha-normal.eot?#iefix') format('embedded-opentype'),
         url('fonts/secession-afisha-normal.woff2') format('woff2'),
         url('fonts/secession-afisha-normal.woff') format('woff'),
         url('fonts/secession-afisha-normal.ttf') format('truetype'),
         url('fonts/secession-afisha-normal.svg#secession') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kreon';
    src: url('fonts/kreon-bold.eot');
    src: url('fonts/kreon-bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/kreon-bold.woff2') format('woff2'),
         url('fonts/kreon-bold.woff') format('woff'),
         url('fonts/kreon-bold.ttf') format('truetype'),
         url('fonts/kreon-bold.svg#kreon') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'opensans';
    src: url('fonts/opensans-italic.eot');
    src: url('fonts/opensans-italic.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-italic.woff2') format('woff2'),
         url('fonts/opensans-italic.woff') format('woff'),
         url('fonts/opensans-italic.ttf') format('truetype'),
         url('fonts/opensans-italic.svg#opensans') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'beton';
    src: url('fonts/betontextbol.eot');
    src: url('fonts/betontextbol.eot?#iefix') format('embedded-opentype'),
         url('fonts/betontextbol.woff2') format('woff2'),
         url('fonts/betontextbol.woff') format('woff'),
         url('fonts/betontextbol.ttf') format('truetype'),
         url('fonts/betontextbol.svg#beton') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'intro';
    src: url('fonts/introheadr-base.eot');
    src: url('fonts/introheadr-base.eot?#iefix') format('embedded-opentype'),
         url('fonts/introheadr-base.woff2') format('woff2'),
         url('fonts/introheadr-base.woff') format('woff'),
         url('fonts/introheadr-base.ttf') format('truetype'),
         url('fonts/introheadr-base.svg#intro') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'linux';
    src: url('fonts/linlibertine_rzi_g.eot');
    src: url('fonts/linlibertine_rzi_g.eot?#iefix') format('embedded-opentype'),
         url('fonts/linlibertine_rzi_g.woff2') format('woff2'),
         url('fonts/linlibertine_rzi_g.woff') format('woff'),
         url('fonts/linlibertine_rzi_g.ttf') format('truetype'),
         url('fonts/linlibertine_rzi_g.svg#linux') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'korger';
    src: url('fonts/korgerg.eot');
    src: url('fonts/korgerg.eot?#iefix') format('embedded-opentype'),
         url('fonts/korgerg.woff2') format('woff2'),
         url('fonts/korgerg.woff') format('woff'),
         url('fonts/korgerg.ttf') format('truetype'),
         url('fonts/korgerg.svg#korger') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'plakat';
    src: url('fonts/plakat-fraktur.eot');
    src: url('fonts/plakat-fraktur.eot?#iefix') format('embedded-opentype'),
         url('fonts/plakat-fraktur.woff2') format('woff2'),
         url('fonts/plakat-fraktur.woff') format('woff'),
         url('fonts/plakat-fraktur.ttf') format('truetype'),
         url('fonts/plakat-fraktur.svg#plakat') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'fertigo';
    src: url('fonts/fertigo_pro_regular.eot');
    src: url('fonts/fertigo_pro_regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/fertigo_pro_regular.woff2') format('woff2'),
         url('fonts/fertigo_pro_regular.woff') format('woff'),
         url('fonts/fertigo_pro_regular.ttf') format('truetype'),
         url('fonts/fertigo_pro_regular.svg#fertigo') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roundest';
    src: url('fonts/roundest-serial-medium-regular.eot');
    src: url('fonts/roundest-serial-medium-regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/roundest-serial-medium-regular.woff2') format('woff2'),
         url('fonts/roundest-serial-medium-regular.woff') format('woff'),
         url('fonts/roundest-serial-medium-regular.ttf') format('truetype'),
         url('fonts/roundest-serial-medium-regular.svg#roundest') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*========= GLOBAL */

* {margin:0;padding:0;}
html,body {height:100%; width:100%; overflow:hidden;font-family:arial,helvetica,sans-serif;}
img {border:none;}
a:link,a:visited {color: #c00;text-decoration:none;}
a:hover,a:active {color: #f00;text-decoration:none;}
h1 {font-family:'secession';font-size:2em;text-transform:uppercase;margin:0 0 10px 0;}


/*========= POEM */

#instructions {position:absolute; top:10px; right:10px; z-index:50px; width:86px; height:59px; display:inline-block; background:url('../img/click.png');background-repeat:no-repeat;background-position:0 0;}

#instructionspause {position:absolute; top:10px; right:10px; z-index:50px; width:150px; height:115px; display:inline-block; background:url('../img/clicktopause.png');background-repeat:no-repeat;background-position:0 0;}

#holder {position:absolute; top:0; left:0; width:100%; height:100%; padding:10px; display:block; z-index:2;text-align:center;}
#poem {display:inline-block; text-align:left; font-size:5vh;}

.lineouter {display:table;}
.line {color:#333; margin:-0.5vh 0;}
#title {font-family:'secession';font-size:6vh;font-weight:bold;text-transform:uppercase;margin:0 0 2vh 0;}

	#line1,#line16 {font-family:'kreon';letter-spacing:-1px;}
#lineouter2 {margin:-1vh 0 0 0;}
	#line2 {font-family:'opensans';letter-spacing:0.5px;font-size:4.5vh;}
	#line3,#line9,#line13 {font-family:'beton';}
	#line4,#line10 {font-family:'intro';font-weight:bolder;line-height:6vh;}
	#line5,#line14 {font-weight:bold;font-size:4.5vh;letter-spacing:-1px;}
#lineouter6 {margin:-0.25vh 0 -0.5vh 0;}
	#line6,#line15 {font-family:'linux';font-style:italic;}
#lineouter7 {margin:-0.75vh 0 0 0;}
	#line7 {font-family:'plakat';}
#lineouter8 {margin:-0.75vh 0 0 0;}
	#line8 {font-family:'fertigo';}
#lineouter11 {margin:-0.25vh 0 0.5vh 0;}
	#line11 {font-style:italic;font-weight:bold;font-size:4.5vh;}
	#line12,#line16 {font-family:'roundest';}
#lineouter13 {margin:0.25vh 0;}
	#line13{font-size:4.5vh;font-style:italic;}
#lineouter16 {margin:-1.5vh 0;}

#line1,#line2,#line3,#line4,#line5,#line6,#line7,#line8,#line9,#line10,#line11,#line12,#line13,#line14,#line15,#line16{display:table-cell;vertical-align:middle;}

.author {width:100px; color:#666; font-size:1.75vh; font-weight:bold; font-family:intro,arial,helvetica,sans-serif;display:table-cell;vertical-align:middle;padding:0.75vh 0 0 15px;}

@media all and (max-width: 750px) {
		#poem {font-size:4vh;}
		#title {font-size:4.5vh;margin:0 0 1vh 0;}
		#line2 {font-size:3.5vh;}
		#line4,#line10 {line-height:5vh;}
		#line5,#line14 {font-size:3.5vh;}
		#line11 {font-size:3.5vh;}
		#line13{font-size:3.5vh;}
}

/*========= ADD YOUR LINE */
#add {position:absolute; bottom:10px; right:10px; z-index:50; width:150px; height:100px; display:inline-block; background:url('../img/add.png');background-repeat:no-repeat;background-position:0 0;}
#add:hover {background-position:-150px 0;}

#addsmall {position:absolute; bottom:10px; right:10px; z-index:50; width:90px; height:60px; display:inline-block; background:url('../img/addsmall.png');background-repeat:no-repeat;background-position:0 0;}
#addsmall:hover {background-position:-90px 0;}

/*========= PAUSE MODAL */

#modal-background,#modal-background2 {position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(210, 200, 200, 0.9); visibility:hidden; z-index:40;}

#modal-body {position:fixed; width:200px; height:200px; padding:30px; left:50%; top:50%; margin-left:-125px; margin-top:-125px; background:#fcfcfa; z-index:40;text-align:center;-webkit-border-radius:150px;-moz-border-radius:150px;border-radius:150px;border:8px solid #f00;}
#modal-title{font-family:secession,arial,helvetica,sans-serif; font-size:2.4em;color:#f00;margin:60px 0 10px 0;}
#modal-text{font-family:kreon,arial,helvetica,sans-serif; font-size:1em; letter-spacing:2px;}


/*========= ADD MODAL */
.parent {position:relative;width:100%;height:100%;text-align:center;}
.child {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font:1.5em kreon,arial,helvetica,sans-serif;background:#fff;padding:40px;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;border:4px solid #000;}
.child p {font-size:0.7em;}
.numoption {display:table; margin:25px 0;}
.num {display:table-cell;vertical-align:middle;width:60px;height:60px;background-color:#f00;color:#fff;-webkit-border-radius:40px;-moz-border-radius:40px;border-radius:40px;border:4px solid #000;font-family:'kreon';font-size:2.3em;line-height:1.1em; float:left;text-align:center;margin:0 20px 0 0;}
.numtext {display:table-cell;vertical-align:middle;color:#000;font-size:0.7em;text-align:left;margin:0;}
.simpl {margin:15px 0 0 0; font-family:'kreon';font-size:0.8em;}

#close {width:75px; height:75px; position:absolute; top:-40px; right:-35px; display:inline-block; background:url('../img/close.png');background-repeat:no-repeat;}
#close:hover {background-position:-80px 0;}

@media all and (max-width: 1000px) {
	.child {top:15%; left:15%;transform:translate(-10%,-10%);padding:20px;}
}
@media all and (max-width: 600px) {
	.child {top:15%; left:15%;transform:translate(-10%,-10%);padding:10px;font-size:1.3em;line-height:0.9em; -webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
	p {text-align:left;}
	.numoption {margin:0;}
	#numoption1 {margin:15px 0 10px 0;}
	#numoption2 {margin:0 0 5px 0;}
	h1 {display:none;}
	.num {display:table-cell;vertical-align:middle;width:30px;height:30px;background-color:#f00;color:#fff;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;border:2px solid #000;font-family:'kreon';font-size:1.3em;line-height:1.1em; float:left;text-align:center;margin:0 10px 0 0;}
	.numtext {display:table-cell;vertical-align:middle;color:#000;font-size:0.7em;text-align:left;}
	#close {width:40px; height:40px; position:absolute; top:-30px; right:-20px; display:inline-block; background:url('../img/close-small.png');background-repeat:no-repeat;}
	#close:hover {background-position:-43px 0;}

}