@font-face
{
	font-family: 'ABBvoice';
	src: local('ABBvoice_A_Lt'), url('ABBvoice_A_Lt.ttf') format('truetype');
   font-display: swap;
}

*
{
   margin: 0;
   padding: 0;
   font-family: 'ABBvoice', Arial, Helvetica, sans-serif;
}

html, body
{
   width: 100%;
   height: 100%;
}

#topbar
{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 4.8vw;
   z-index: 2;
}
.top-link
{
   width: 7%;
   height: auto;
}
.top-link img
{
   width: 100%;
   height: auto;
}
#arrow-back
{
   width: 7%;
   height: auto;
}
#logo
{
   width: 7%;
}

#main-index
{
   width: 100%;
   position: relative;
   overflow-x: hidden;
}
#main
{
   width: 100%;
   position: relative;
}

.holder
{
   width: 100%;
   height: 100%;
   position: absolute;
}
#main > img
{
   width: 100%;
}

.line
{
   width: 30%;
   position: absolute;
   top: -3vw;
   left: 0;
}
.line-fixed
{
   position: fixed;
}
#video-holder
{
   width: 100%;
   height: 100vh;
}

#video
{
   margin: auto;
   margin-top: 13vw;
   width: 50vw;
   height: 27vw;
   position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
}
#video video
{
   width: 100%;
   background-color: black;
}
#video button
{
   -moz-appearance: none;
        appearance: none;
   -webkit-appearance: none;
   background: none;
   border: none;
   font-weight: bold;
   font-size: 16pt;
   color: #888888;
   position: absolute;
   top: 45px;
   right: 45px;
}
#video button:hover
{
   cursor: pointer;
}

#map-holder
{
   width: 100%;
   height: 100vh;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   position: relative;
}

#map
{
   width: 95%;
   height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-transform: translateX(5%);
           transform: translateX(5%);
}
#main-map
{
   width: 40%;
   height: auto;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
}
#main-map img
{
   width: 100%;
   height: 26.5vw;
}

.map-name
{
   height: 8.2vw;
   position: absolute;
   top: 50%;
   left: 50%;
}
.map-name:hover
{
   cursor: pointer;
   -webkit-filter: invert(0.5);
           filter: invert(0.5);
}
#acoruna
{
   -webkit-transform: translateX(-340%) translateY(-240%);
           transform: translateX(-340%) translateY(-240%);
}
#bilbao
{
   -webkit-transform: translateX(-50%) translateY(-250%);
           transform: translateX(-50%) translateY(-250%);
}
#bcl
{
   -webkit-transform: translateX(45%) translateY(-220%);
           transform: translateX(45%) translateY(-220%);
}
#valencia
{
   -webkit-transform: translateX(80%) translateY(50%);
           transform: translateX(80%) translateY(50%);
}
#malaga
{
   -webkit-transform: translateX(-40%) translateY(140%);
           transform: translateX(-40%) translateY(140%);
}
#sevilla
{
   -webkit-transform: translateX(-185%) translateY(80%);
           transform: translateX(-185%) translateY(80%);
}
#madrid
{
   -webkit-transform: translateX(-290%) translateY(-20%);
           transform: translateX(-290%) translateY(-20%);
}
#valladolid
{
   -webkit-transform: translateX(-210%) translateY(-120%);
           transform: translateX(-210%) translateY(-120%);
}


#info-holder
{
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: end;
       -ms-flex-pack: end;
           justify-content: flex-end;
   position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   padding-top: 1.5vw;
   margin-bottom: 1vw;
}

.info
{
   width: 68%;
   padding: 100px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   margin-right: 6%;
}
.info > img
{
   width: 100%;
   margin-bottom: 50px;
}

.agenda
{
	margin: 15px 0;
}
.agenda img
{
	width: 25px;
   height: 25px;
	margin-right: 15px;
}
.agenda > div
{
	margin: 7px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.list
{
	padding-left: 60px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

#background
{
   z-index: -1;
   min-height: 130%;
   min-width: 130%;
   position: fixed;
   top: 0px;
   left: 50%;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
   margin: auto;
   -webkit-transition: all 1.6s ease-out;
   transition: all 1.6s ease-out;
}
#bg
{
   z-index: 0;
   -webkit-filter: opacity(0.8) brightness(5);
           filter: opacity(0.8) brightness(5);
   position: fixed;
   min-height: 130%;
   min-width: 130%;
   margin: auto;
   top: 0px;
   left: 50%;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
   -webkit-transition: all 0.8s ease-out;
   transition: all 0.8s ease-out;
}
.register
{
   width: 100%;
   padding: 10px 0px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: end;
       -ms-flex-pack: end;
           justify-content: flex-end;
}

#btn-register img
{
   height: 3vw;
}

#scroller
{
   width: 100%;
   text-align: center;
   -webkit-transform: translateY(-300%);
           transform: translateY(-300%);
}
@-webkit-keyframes arrowGlow
{
   from { -webkit-filter: none; filter: none; }
   to { -webkit-filter: drop-shadow(0px 30px 0px rgb(239, 62, 51)); filter: drop-shadow(0px 30px 0px rgb(239, 62, 51)); -webkit-transform: translateY(50%); transform: translateY(50%); }
}
@keyframes arrowGlow
{
   from { -webkit-filter: none; filter: none; }
   to { -webkit-filter: drop-shadow(0px 30px 0px rgb(239, 62, 51)); filter: drop-shadow(0px 30px 0px rgb(239, 62, 51)); -webkit-transform: translateY(50%); transform: translateY(50%); }
}
@-webkit-keyframes arrowJump
{
   0% { -webkit-transform: translateY(0%); transform: translateY(0%); }
   50% { -webkit-transform: translateY(50%); transform: translateY(50%); }
   100% { -webkit-transform: translateY(0%); transform: translateY(0%); }
}
@keyframes arrowJump
{
   0% { -webkit-transform: translateY(0%); transform: translateY(0%); }
   50% { -webkit-transform: translateY(50%); transform: translateY(50%); }
   100% { -webkit-transform: translateY(0%); transform: translateY(0%); }
}
.grim-icon
{
   margin: 25px 25px;
   width: 100px;
   height: 100px;
   -webkit-transform: scale(0.5) translateY(-0%);
           transform: scale(0.5) translateY(-0%);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   margin: auto;
}
.grim-icon > *:hover
{
   cursor: pointer;
}

.arrow-double-down
{
   width: 60%;
   height: 60%;
   position: relative;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.arrow-double-down:not(:hover)
{
   -webkit-animation: arrowGlow 0.85s ease-in infinite, arrowJump 0.85s ease-in-out infinite;
           animation: arrowGlow 0.85s ease-in infinite, arrowJump 0.85s ease-in-out infinite;
}
.arrow-double-down:hover
{
   -webkit-filter: drop-shadow(0px 30px 0px rgb(239, 62, 51));
           filter: drop-shadow(0px 30px 0px rgb(239, 62, 51));
   -webkit-transform: translateY(25%);
           transform: translateY(25%);
}
.arrow-double-down::before, .arrow-double-down::after
{
   content: "";
   position: absolute;
   top: 20%;
   width: 60%;
   height: 10%;
   background-color: rgb(239, 62, 51);
   border-radius: 5px;
}
.arrow-double-down::before
{
   left: 1.25px;
   -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
}
.arrow-double-down::after
{
   right: 1.25px;
   -webkit-transform: rotate(-45deg);
           transform: rotate(-45deg);
}

.agenda a
{
   text-decoration: none;
   color: rgb(239, 62, 51);
   margin: 0 6px;
}

@media screen and (max-width: 1024px)
{
   #topbar
   {
      position: static;
      height: 9.4vw;
   }
   .top-link
   {
      z-index: 20;
      width: 14vw;
      height: 9.4vw;
   }
   .agenda img
   {
      width: 60px;
      height: 60px;
   }
   .line
   {
      position: static;
      width: 80%;
      min-width: 550px;
      margin-bottom: 2vw;
   }
   #logo
   {
      width: 14vw;
   }
   #main-index
   {
      overflow: hidden;
   }
   #video-holder, #map-holder, #info-holder
   {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      height: 90.6vh;
   }
   #video
   {
      padding: 0;
      width: 100%;
      height: auto;
      margin: 0;
      border-radius: 0;
   }
   #map
   {
      -webkit-transform: scale(1.4);
              transform: scale(1.4);
   }
   .grim-icon
   {
      -webkit-transform: scale(1.25) translateY(-0%);
              transform: scale(1.25) translateY(-0%);
   }
   .info
   {
      width: 100%;
      padding: 25px;
   }
   .info * { font-size: 22pt; }
   #btn-register img
   {
      height: 7vw;
   }
}