/* Stylesheet von mir angepasst zuletzt am 09.02.2026 */

/* Layout Hauptelemente und Boxen*/
html {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
*,::before,::after {
	box-sizing: inherit;
}

body {
	width: 100%;
    padding-top: 1px;
    height: auto;
    background: #d6ae01 linear-gradient(90deg, transparent 15%, rgba(255,255,255,.3) 95%);
    background-size: 0.5em;
    margin: auto;
}

/* Layout for screens smaller than 55cm.*/
@media only screen and (max-width: 55em) {
body {
    padding-left: 0px;
    padding-top: 2px;
    padding-right: 0px;
    padding-bottom: 2px;
}
}
/* Box 1 not visible with img telephone, consider balancing the width left + 1px, link contact sticky*/
.box1 {
	width: 1px;
    height: 0px;
    float: right;
	background: white;
    padding-right: 3%;
    top: 35em;
    position: sticky;
    z-index: 9;
}
@media only screen and (max-width: 55em) {
.box1 {
    top: 30em;
}
}
/* Box 2 not visible with img house link start, sticky*/
.box2 {
	width: 1px;
    height: 0px;
	background: white;
    float: right;
    padding-right: 3%;
    top: 40em;
    position: sticky;
    z-index: 9;
}
@media only screen and (max-width: 55em) {
.box2 {
    top: 33.5em;
}
}

/* Box 3 not visible with img arrow up, sticky*/
.box3 {
	width: 1px;
    height: 0px;
	background: white;
    float: right;
    padding-right: 3%;
    top: 45em;
    position: sticky;
    z-index: 9
}
@media only screen and (max-width: 55em) {
.box3 {
    top: 37em;
}
}
.img-box1-box2-box3 {
    width: 70px;
    height: auto;
    float: right
}
@media only screen and (max-width: 55em) {
.img-box1-box2-box3 {
    width: 50px;
    height: auto;
    float: right
}
}
/* Header with Box 4 for heading EB - Guitar and Language and Box 5 for visible navigation and staves and box 6*/
header {
    width: 100%;
    height: auto;
    border-radius: .3em .3em 0em 0em;
    background: #F5F5F5;
    border-top: solid 1px #d6ae01;   
}
/* Header with box4l for logo and box4r for text*/
.header-container {  
    height: 12em;
    padding-top: 0.5em;   
    border-right: solid 2px #547867;
    border-left: solid 2px #547867;
    border-bottom: solid 1px #d6ae01;  
    display: grid;
    grid-template-columns: 10% 90%;
 }
 @media only screen and (max-width: 55em) {
.header-container {  
    display: block; 
    height: auto;
 }
 }
.box4l {
    width: auto
}
.figure-img-logo-box4l {
    text-align: left
}
@media only screen and (max-width: 55em) {
.figure-img-logo-box4l {
    text-align: center
}
}
.img-logo-box4l {
    width: 120px;
    height: auto;
    margin: 1em
}
@media only screen and (max-width: 55em) {
.img-logo-box4l {
    width: 150px;
    height: auto;
}
}
.box4r {
    height: auto;
}
@media only screen and (max-width: 55em) {
.box4r {
    padding-left: 2%;
    padding-right: 2%; 
    font-size: 0px;
}
}


/* Box 5 in the header with navigation and staves */
.box5 {
    width: 100%;
    height: 10em;
    background: white;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 3em;
    padding-bottom: 2em;
    border-right: solid 2px #547867;
    border-left: solid 2px #547867;
    margin: auto;
    text-align: center;
}
/* Layout for screens smaller than 105em.*/
@media only screen and (max-width: 55em) {
.box5 {
    width: 100%;
    height: auto;
}
}
.box5_index {
    width: 100%;
    height: auto;
    line-height: 4em; 
    background: white;
    padding-top: 1em;
    padding-left: 3%;
    padding-right: 3%;
    padding-bottom: 2em;
    text-align: center;
    border-right: solid 2px #547867;
    border-left: solid 2px #547867;
    margin: auto;
}


.box5-a-country-code {
    color: black;
    font-size: 1.2em;
    font-weight: 600;
    font-family: "Calibri Light";  
    text-decoration: underline 1px black;
    text-underline-offset: 3px;
    letter-spacing: 0.1em;
    line-height: 2em; 
    padding-left: 5%
}
.figure-bestellung-nav {
    width: 43px;
    height: auto;
    margin-left: 10px;
    margin-right: 2px; 
} 
.img-bestellung-nav {
    width: 43px;
    height: auto;
}


/* Box 6 in the header with navigation, img logo bookstore, img logo Amazon and img logo EB-Guitar */
.box6 {
    width: 100%;
    height: auto;
    background: white;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.7em;
    text-align: center;
    border-right: solid 2px #547867;
    border-left: solid 2px #547867;
    margin: auto;
    font-size: 105%;
}
.img-logo-book-box6 {
    width: 12%; 
    margin-right: 8%;
    margin-top: -10px;
}
.img-logo-amazon-box6 {
    width: 8%; 
    height: auto;
    margin-right: 10%;
    margin-top: -10px;
}
.img-logo-eb-box6 {
    width: 9%; 
    height: auto;
    margin-top: -10px;
}
/* Layout for spanish version*/
.img-logo-EB-box6 {
    height: 35px;
    width: auto;
    position: relative;
    top: 8px;
    text-decoration: none
}
.figure-logo-box6 {
    width: 80%; 
    margin: auto;
}
/* Layout for screens smaller than 55cm.*/
@media only screen and (max-width: 55em) {
.img-logo-book-box6 {
    width: 25%; 
    height: auto;
    margin-right: 8%;
    margin-top: 20px
}
.img-logo-amazon-box6 {
    width: 16%; 
    height: auto;
    margin-right: 8%;
    margin-top: 15px
}
.img-logo-eb-box6 {
    width: 20%; 
    height: auto;
    margin-top: 15px
}
.figure-logo-box6 {
    width: 100%; 
    height: auto; 
    margin: auto;
}
}



/* Article only on subpages with box 10 for introduction */
article {
    width: 100%;
    height: auto;
    background-color: white;
    border-top: solid 1px #d6ae01;
    border-right: solid 2px #547867;
    border-left: solid 2px #547867;
    display: grid;
    grid-template-columns: 60% 35%; 
    gap: 5%;
    grid-template-rows: auto;
    padding-left: 5%;
    padding-right: 10%;
    padding-top: 10em;
    padding-bottom: 8em;
    margin: auto;
}

@media only screen and (max-width: 55em) {
article {
    display: block; 
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 2em;
    padding-bottom: 2em;
    text-align: left
}
}
.background { 
    background-image: url("buch_gitarrengeschichten_titelseite.jpg");
    background-size: cover;       /* Bild füllt den Container vollständig aus [6] */
    background-position: right;  /* Bild wird zentriert [11] */
    background-repeat: no-repeat; /* Bild wird nicht gekachelt [7] */
    width: 100%;                  /* Artikelbreite [8] */
    min-height: 55vh;            /* Beispiel: Artikel ist mindestens so hoch wie der Viewport [8] */
}

.background_es { 
    background-image: url("libro_asuntos_guitarras_background.jpg");
    background-size: cover;       /* Bild füllt den Container vollständig aus [6] */
    background-position: right;  /* Bild wird zentriert [11] */
    background-repeat: no-repeat; /* Bild wird nicht gekachelt [7] */
    width: 100%;                  /* Artikelbreite [8] */
    min-height: 55vh;            /* Beispiel: Artikel ist mindestens so hoch wie der Viewport [8] */
}

/* Main for all screens */
main {
    width: 100%;
    height: auto;
    background-color: white;
    border-right: solid 2px #547867;
    border-bottom: solid 1px #d6ae01;
    border-left: solid 2px #547867;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 3em;
	padding-top: 4em;
    margin: auto;
}

/* Layout for screens wider than 55em. Main with three columns for boxes 6 or 7 (same width) or 17, 18, 19 (different widths)*/
@media only screen and (max-width: 55em) {
main {
    padding-top: 4em;
    padding-left: 2%;
    padding-right: 2%;
}
}

/* Different containers for startpage */

.container_grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
    border-radius: 0.3em 0.3em 0.3em 0.3em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 40px 0 rgba(0, 0, 0, 0.19);
    margin-top: 4em;
    margin-bottom: 4em;
    padding-left: 5%;
    padding-right: 5%
}

/* Layout for screens wider than 55em. Main with three columns for boxes 6 or 7 (same width) or 17, 18, 19 (different widths)*/
@media only screen and (max-width: 55em) {
.container_grid {
    display: block; 
    padding-left: 5%;
    padding-right: 5%;
}
}

.container_image {
	position: relative;
    background: white;
	border-bottom: 1px solid;
	width: 100%;
	height: auto
}
.container_text {
    text-align: left;
    padding-left: 5%;
    padding-right: 5%;
    background-color: white;
    padding-top: 0.5em;
    padding-bottom: 2em;
    border-radius: 0.3em 0.3em 0.3em 0.3em;
}

.style_a_container_img_text {
    text-decoration: none
}

.style_bestellen {
    font-size: 1.1em;
    line-height: 3em;
    font-weight: 400;
    color: black;
    margin: auto;
    text-align: center;
    padding-top: 5em;
}

@media only screen and (max-width: 55em) {
.style_bestellen {
    font-size: 0.9em;
    line-height: 2em;
    font-weight: 500;
}
}

.container_grid_40_60 {
    display: grid;
    grid-template-columns: 25% 65%; /* Beide Spalten nehmen 50% der Breite ein */
    gap: 10px; /* Optional: Abstand zwischen den Spalten */
    border-radius: 0.3em 0.3em 0.3em 0.3em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 40px 0 rgba(0, 0, 0, 0.19);
    margin-top: 4em;
    margin-bottom: 4em;
    padding-left: 2%;
    padding-right: 2%
}
/* Layout for screens wider than 55em. Main with three columns for boxes 6 or 7 (same width) or 17, 18, 19 (different widths)*/
@media only screen and (max-width: 55em) {
.container_grid_40_60 {
    display: block; 
    padding-left: 5%;
    padding-right: 5%
}
}
.container_image_left {
	position: relative;
    background: white;
}
.image_two_rows_border_bottom_left {
    border-bottom: 1px solid;
    width: 85%;
    padding-top: 12em;
    margin-left: 15%
}
@media only screen and (max-width: 55em) {
.image_two_rows_border_bottom_left {
    padding-top: 8em;
    margin-left: 1%
}
}
.container_text_right {
    padding-top: 4em;
    padding-bottom: 2em;
    padding-left: 25%
}
@media only screen and (max-width: 55em) {
.container_text_right {
    padding-top: 3em;
    padding-left: 1%
}
}

.container_grid_60_40 {
    display: grid;
    grid-template-columns: 65% 25%; /* Beide Spalten nehmen 50% der Breite ein */
    border-radius: 0.3em 0.3em 0.3em 0.3em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 40px 0 rgba(0, 0, 0, 0.19);
    margin-top: 4em;
    margin-bottom: 4em;
    padding-left: 5%;
    padding-right: 2%
}
/* Layout for screens wider than 55em. Main with three columns for boxes 6 or 7 (same width) or 17, 18, 19 (different widths)*/
@media only screen and (max-width: 55em) {
.container_grid_60_40 {
    display: block;
    padding-left: 5%;
    padding-right: 5%
}
}
.container_text_left {
    padding-top: 4em;
    padding-bottom: 2em;
    padding-right: 25%
}
@media only screen and (max-width: 55em) {
.container_text_left {
    padding-top: 3em;
    padding-right: 1%
}
}
.container_image_right {
	position: relative;
    background: white;
    padding-bottom: 2em
}
.image_two_rows_border_bottom_right {
    border-bottom: 1px solid;
    width: 85%;
    padding-top: 12em;
    margin-left: 25%
}
@media only screen and (max-width: 55em) {
.image_two_rows_border_bottom_right {
    padding-top: 8em;
    margin-left: 1%
}
}
.flex_container_one_row {
    display: flex;
    flex-direction: column; /* Anordnung untereinander */
    gap: 10px; /* optional: Abstand zwischen Elementen */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 40px 0 rgba(0, 0, 0, 0.19);
    margin-top: 4em;
    margin-bottom: 4em;
    padding-top: 4em;
    padding-bottom: 4em;
    padding-left: 10%;
    padding-right: 10%;
    margin: auto
}
.one_row_text {
    text-align: left;
    background-color: white;
}
.one_row_foto {
  width: 40%;
  margin: auto
}
@media only screen and (max-width: 55em) {
.one_row_foto {
    width: 100%;
    margin: 3%;
}
}

.foto_one_row_border_bottom {
    border-bottom: 1px solid;
    border-color:#8A0808;
    width: 70%;
    margin-left: 30%;
    margin-bottom: 2em;
    margin-top: 0.5em
}
@media only screen and (max-width: 55em) {
.foto_one_row_border_bottom {
    width: 100%;
    margin-left: 1%;
}
}
.container_grid_collage {
	display: grid;
	grid-template-columns: 50% 50% ;
    margin-top: 4em;
    width: 60%;
    margin: auto;
    margin-bottom: 4em;
    margin-top: 4em
}
@media only screen and (max-width: 55em) {
.container_grid_collage {
    width: 100%;
}
}

/* Zoom is only working in footer,but not in collage, don´t know why */
.image_collage {
    width: 100%; 
    height: auto;
    padding-right: 3px;
    padding-bottom: 0px;
}


.zoom {
	transition: transform 0.7s;
}
.zoom:hover {
	transform: scale(0.9);
}

.dimmer_image {
	opacity: 1;
	display: block;
	transition: .9s ease;
	width: 100%;
	height: auto;
    margin-top: 0em;
	margin-bottom: 0em;
	padding-top: 0em;
	padding-bottom: 0em;
}

.container_image:hover .dimmer_image {
	opacity: 0.6;
}

.figure-bestellung-one_row {
    width: 100%;
    height: auto;
    padding-left: 60%;
    margin-top: -30px
}
.figure-bestellung-polaroid {
    width: 100%;
    height: auto; 
}
 
.figcaption-index-polaroid {
    font-family: "Calibri Light";
    text-align: left;
    width: 100%; 
    height: auto;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-size: 1.1em;
    line-height: 1.4em;
    font-weight: 500;
    letter-spacing: 0.0em;
    word-spacing: 0.0em;
    color: DarkRed;
}  

@media only screen and (max-width: 55em) {
.figcaption-index-polaroid {
    font-size: 0px;
}
}


.img-bestellung-polaroid {
    width: 43px;
    height: auto;
}
.figcaption-general {
    font-family: "Calibri Light";
    text-align: left;
    width: 100%; 
    height: auto;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-size: 0.9em;
    line-height: 1.1em;
    font-weight: 500;
    color: black;
}  


/* style for slideshow gallery */

/* Position the image container (needed to position the left and right arrows) */
.container_slide {
    position: relative;
    width: 25%;
    margin-left: 50%
}

@media only screen and (max-width: 55em) {
.container_slide {
    width: 80%;
    margin-left: 5%;
    margin-right: 5%
}
}

/* Hide the images by default */
.mySlides {
  display: none;
}
.container_shadow {
    border-radius: 0.3em 0.3em 0.3em 0.3em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 40px 0 rgba(0, 0, 0, 0.19);
    margin-top: 4em;
    margin-bottom: 4em;
    padding-top: 7em;
    padding-left: 10%;
    padding-right: 15%
}

/* Add a pointer when hovering over the thumbnail images */
.img-slider {
    width: 100%}
.cursor {
  cursor: pointer;
}
/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}
.active,
.demo:hover {
  opacity: 1;
}

/* Container for image text, is not used */
.caption-container {
  text-align: center;
  background-color: white;
  padding: 2px 16px;
  color: black;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 11.11%
}


/** =========== Texts, fonts, paragraphs, links ============= **/

.initiale::first-letter {
    font-size: 2.1em;
    font-weight: 500;
    margin-right: 1px
}

a {
    color: black;
}
a:hover {
	color: silver;
}
a:visited {
	color: black;
}
a:visited:hover {
    color: silver; 
}


.box4r a {
    text-decoration: none;
    color: black;
}
.box4r a:hover {
	text-decoration: underline;
}
.box4r a:visited {
	color: black;
}

.box4r a:active {
	color: black;
}

.box5 a {
    display: inline-block;
    text-decoration: none;
    color: black;
    font-size: 1.4em;
    font-weight: 500;
    font-family: "Calibri Light";
    letter-spacing: 0.02em;
    word-spacing: 0.02em;
    line-height: 2em;   
}

@media only screen and (max-width: 55em) {
.box5 a {
    font-size: 1em;
}
}
.box5_index a {
    display: inline-block;
    text-decoration: none;
    color: black;
    font-size: 1.3em;
    font-weight: 500;
    font-family: "Calibri Light";
    letter-spacing: 0.02em;
    word-spacing: 0.02em;
    line-height: 2em;   
}

@media only screen and (max-width: 55em) {
.box5_index a {
    font-size: 1em;
}
}
.box6 a {
    text-decoration: none;
}

p {
    font-family: "Calibri Light";
    font-size: 1.1em;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: 0.02em;
    word-spacing: 0.02em;
    color: black;
}
@media only screen and (max-width: 55em) {
p {
    font-size: 1em;
    line-height: 1.2em;   
}
}

h1 {
    font-size: 2.5em;
    font-weight: 500;
    font-family: "Calibri";
    text-align: left;
    color: #424242;
    letter-spacing: 0.1em;
}
@media only screen and (max-width: 55em) {
h1 {
    font-size: 1.3em;
    text-decoration: underline 1px #424242;
    text-underline-offset: 2px;
    padding-left: 2%;
    padding-right: 2%
}
}
article h1 {
    text-align: right;
    margin-right: 10%;
    display: block;
}
@media only screen and (max-width: 55em) {
article h1 {
    text-align: left;
    padding-bottom: 0em
}
}

.box4r h1 {
    font-size: 3.2em;
    font-weight: 500;
    font-family: "Times New Roman";
    text-align: center;
    color: #424242;
    letter-spacing: 0.1em;
    text-decoration: underline 1px #424242;
    text-underline-offset: 5px;
    padding-right: 10%;
}

@media only screen and (max-width: 55em) {
.box4r h1 {
    font-size: 1.3em;
    padding-bottom: 1em
}
}
h2 {	
    font-size: 1.5em;
    line-height: 2em;
    font-family: "Calibri";
    font-weight: 500;
    text-align: left;
    color: #424242;
    text-decoration: underline 1px #424242;
    text-underline-offset: 6px;
}

main h2 {
	grid-column: 1 / 5;
	display: block;
	background: white;
	width: 100%;
	padding-left: 2%;
	padding-right: 2%;
	padding-top: 2em;
	border-radius: 0.2em 0.2em 0em 0em;
}


 
article h2 {
    padding-top: 4em
}
 
 @media only screen and (max-width: 55em) {
article h2 {	
    padding-top: 2em
}
}

@media only screen and (max-width: 55em) {
h2 {	
    font-size: 1.2em;
    line-height: 1.9em;
}
}
.box4r h2 {
    font-size: 1.2em;
    letter-spacing: 0.05em;
    word-spacing: 0.05em;
    font-weight: 300;
    text-align: center;
    color: #424242;
    letter-spacing: 0.1em;
    text-decoration: none;
    padding-right: 11%;
    margin-top: -12px
}

@media only screen and (max-width: 55em) {
.box4r h2 {
    font-size: 1em;
}
}

h3 {
    font-family: "Calibri Light";
    font-size: 1.1em;
    line-height: 1.2em;
    letter-spacing: 0.04em;
    word-spacing: 0.04em;
    font-weight: 600;
    color: #0D0D0D;
    text-align: left;
    padding-top: 1.2em;
    padding-bottom: 0.5em;
    text-decoration: underline 1px #0D0D0D;
    text-underline-offset: 3px;
    border: none
}


h4 {
    font-family: "Calibri Light";
    font-size: 1.1em;
    line-height: 1.2em;
    color: Gray;
    font-weight: 500;
    text-align: justify;
    border-top: 1px dotted #d6ae01;
    padding-top: 0.8em;
    padding-bottom: 0em;
    width: 80%
}

@media only screen and (max-width: 55em) {
h4 {
    font-size: 1.1em;
    line-height: 1.8em;
}
}


/* Layout Footer*/

footer {
    width: 100%;
    height: auto;
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 2em;
    padding-bottom: 7em;
    margin: auto;
}

@media only screen and (max-width: 55em) {
footer {  
    display: block; 
    padding-left: 2%;
    padding-right: 2%;
}
}

.footer_container_grid {
	width: 100%;
    height: auto;
    display: grid;
	grid-template-columns: 40% 20% 20% 20%;
    border-radius: 0.3em 0.3em 0.3em 0.3em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 40px 0 rgba(0, 0, 0, 0.19);
    padding-top: 3em;
    padding-bottom: 5em;
    padding-left: 5%;
    padding-right: 5%;
    margin-top: 4em;
    margin-bottom: 4em;
    background: #d6ae01;
}

/* Layout for screens wider than 55em. Main with three columns for boxes 6 or 7 (same width) or 17, 18, 19 (different widths)*/
@media only screen and (max-width: 55em) {
.footer_container_grid {
    display: block; 
    margin-top: 1em;
    margin-bottom: 0em;
    min-height: 60vh
}
}

.img-symbol-footer {
    height: 50px;
    width: auto;
    padding-left: 5%;
    padding-right: 5%;
    margin: auto
}

footer ul {
    list-style-type: circle;
    margin-top: -10px;
    margin-bottom: 4.5em
}
footer li {
    color: white;
    font-family: "Calibri Light";
    font-size: 1.3em;
    font-weight: 500;
}

footer a {
    font-family: "Calibri Light";
    color: white;
    text-decoration: none;
}
footer a:hover {
    color: white;
    text-decoration: underline;
}
footer a:visited {
    color: white;
}

/* Anchors with different heights for boxes */
a.anker_position_nav {
    display: block;
    position: relative;
    top: 0em; 
    visibility: hidden;
}

@media only screen and (max-width: 105em) {
a.anker_position_nav {
    display: block;
    position: relative;
    top: -3em; 
    visibility: hidden;
}
}
a.anker_position_nav_es {
    display: block;
    position: relative;
    top: -3em; 
    visibility: hidden;
}
a.anker_position_h2 {
    display: block;
    position: relative;
    top: -15em; 
    visibility: hidden;
}

a.anker_position_h3 {
    display: block;
    position: relative;
    top: 4em; 
    visibility: hidden;
}
@media only screen and (max-width: 105em) {
a.anker_position_h3 {
    display: block;
    position: relative;
    top: -1.5em; 
    visibility: hidden;
}
}





/** Line 1 stave, Line 2 bottom line thin dotted, Line 3 side line excerpts, information, Line 4 button EB guitar, Line 5 line under photo at Naymlap, Line 6 shelf for photos in navigation box **/
.line-1 {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, #ccc, #407563, #ccc);
    width: 90%;
    margin-bottom: -3px;
}
.line-11 {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, #ccc, #8A0808, #ccc);
    width: 111%;
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: -15%:
}
.line-12 {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, #ccc, #8A0808, #ccc);
    width: 111%;
    margin-top: 2em;
    margin-bottom: 2em;
    margin-right: -15%
}


.line-2 {
    border-bottom: 1px dotted #547867; 
    padding-bottom: 1px
}
.line-3 {
    border-left: 4px solid #547867;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 4em;
    padding-left: 30px;
}
.line-4 {
    border-top: 1px solid #F2F2F2;
    border-bottom: 2px solid #547867;
    border-left: 1px solid #F2F2F2;
    border-right: 2px solid #547867;
    border-radius: 0.4em 0.4em 0.4em 0.4em;
    margin: auto; 
    margin-top: 1em;
    margin-left: 1px;
    margin-bottom: 8em;
    padding-bottom: 5px;
    padding-top: 5px;
    width: 150px;
    font-family: "Times New Roman";
    font-size: 1.2em;
    line-height: 1.2em;
    font-weight: 500;
    color: black;
    word-spacing: 0.05em;
    letter-spacing: 0.05em;
    text-align: center;
}
.line-5 {
    color: gold;
    border: solid;
    height: 5px;
    width: 55%;
    float: right;
    margin-top: 10px;
}

.line-6 {
    border-bottom: solid;
    height: 2px;
    color: #d6ae01;
    width: 155%;
    float: right
}
.line-8 {
    border-right: 1px solid #0B3861;
    border-left: 1px solid #0B3861;
    border-bottom: 1px solid #0B3861;
    text-align: center;
    margin-top: 4em;
    margin: auto; 
    margin-bottom: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    width: 80%;
    font-family: calibri;
    font-size: 1.2em;
    font-weight: 550;
    color: #0B3861;
    word-spacing: 0.05em;
    letter-spacing: 0.05em;
}