html {
   box-sizing: border-box;
}

*,
*:before,
*:after {
   box-sizing: inherit;
}

html {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   background-color: #cc6699ff;
}

body {
   background-color: #fff7e6ff;
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-size: large;
   color: #262626;
   /* overflow: hidden;  */
}

a {
   text-decoration: none;
}


@font-face {
   font-family: "overlay";
   src: local("Lobster"), url("../fonts/Lobster-Regular.woff");
}

@font-face {
   font-family: "board";
   src: local("Teko Medium"), url("../fonts/Teko-SemiBold.woff");
}


/* OVERLAY */

.overlay {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 21px 0 24px 0; /* <--- */
}

.overlay-title {
   background-color: yellowgreen;

   display: flex;
   align-items: center;
   justify-content: center;
   padding: 6px 0 18px 0; /* <--- */
}

.overlay--main-banner, 
.overlay-title--main-banner {
   background-color: #2952a3ff;
   color: aliceblue;
}

.overlay__inside {
   /* border: 1px solid; */
   text-align: center;
   width: 90%;
}

.overlay__inside:hover { background-color: transparent; }

.overlay__inside h1 {
   font-family: overlay;
   font-size: 32px;
   font-weight: 500;
   margin-block-end: 0.3em;
   margin-block-start: 0.6em;
}

.overlay__inside h2 {
   font-size: 18px;
   font-weight: 600;
   margin-block-start: 0.6em;
   margin-block-end: 0.3em;
}


/* NOTICE BOARD */

.board {   
   /* border: 1px dashed #afafaf; */

   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: stretch;

   margin: 0;
   padding: 10px 111px;

   text-align: left;
}

/* board--signboard - pone encabezados */

.board--signboard { background-color: transparent; }

.board--signboard h1 {
   font-family: board;
   color: #2952a3ff;
   font-size: 30px;
   margin-block-start: 0.6em;
   margin-block-end: 0.3em;
}

.board--advertisement h1 {
   font-family: board;
   color: #2952a3ff;
   font-size: 32px;
   margin-block-start: 0.6em;
   margin-block-end: 0.3em;
}

.board--signboard h2 {
   font-family: board;
   color: #2952a3ff;
   font-size: 24px;
   margin-block-start: 0.6em;
   margin-block-end: 0.3em;
}

.board--advertisement h2 {
   font-family: board;
   color: #2952a3ff;
   font-size: 26px;
   margin-block-start: 0.6em;
   margin-block-end: 0.3em;
}

.board--signboard h3 {
   /* border: 1px solid; */
   font-family: board;
   color: #2952a3ff;
   font-size: 36px;
   margin-block-start: 0.6em;
   margin-block-end: 0.3em;
}

.board--advertisement h3 {
   font-family: board;
   color: #2952a3ff;
   font-size: 40px;
   margin-block-start: 0.6em;
   margin-block-end: 0.3em;
}

/* board__signboard - pone el entorno */

.board__signboard {
   background-color: #7c202005;
   border-bottom: 3px solid #7c202023;
   margin: 10px 24px;
   padding: 0 30px;
   width: 100%;
}

.board__signboard_box {
   border: 1px solid;
   margin: 10px 24px;
   padding: 0 30px;
   width: 100%;
}

.board__signboard_blank {
   margin: 10px 24px;
   padding: 0 30px;
   width: 100%;
}

@media (max-width: 1400px) {
   .board__signboard_box,
   .board__signboard_blank,
   .board__signboard {
      margin: 2px 4px;
   }
}

@media (max-width: 912px) {
   .board {
      flex-direction: column;
      padding: 7px 12px;
   }

   .board__signboard_box,
   .board__signboard_blank,
   .board__signboard {
      padding: 0;
      margin: 1px 2px;
   }
}

/* board--advertisement - para centrar títulos con comentarios y o figuras */

.board--advertisement {
   align-items: center;
   flex-direction: column;
   text-align: center;
   margin: 0; 
   padding: 0;
}

.board--advertisement img {
   margin-left: auto;
   margin-right: auto;
}

.board--advertisement a {
   color: blue;
}

.board--advertisement i {
   color: #2952a3ff;
}

/* board--title - para poner un título centrado sin espacios arriba y abajo */

.board--title { padding: 0; }

.board--title h3 {
   /* border: 1px solid; */
   font-family: board;
   color: #2952a3ff;
   font-size: 36px;
   margin-block-start: 0;
   margin-block-end: 0;
}

/* SIZES */

.size-25 {
   width: 25%;
}

.size-35 {
   width: 35%;
}

.size-50 {
   width: 50%;
}

.size-75 {
   width: 75%;
}

@media (max-width: 912px) {
   .size-25,
   .size-35,
   .size-50,
   .size-75 {
      width: 99%;
   }
}


/* FOOT ??? */

.foot {
   background-color: #cc6699ff;
   color: #fff;
   height: 166px;
   text-align: center;
}

/* ------------------------------------------------------------- */