/* COLORS */
body {
	background-color: var(--main-bg-color);
	font-size: var(--main-font-size);
	line-height: var(--main-line-height);
	letter-spacing: var(--main-letter-spacing);
	color: #000000;	
}

#nav ul.actions.vertical li {float: left;width: 45%;padding:0;margin-right:0;margin-bottom:25px;}
#nav ul.actions.vertical li:nth-child(odd) {margin-right:7%!important;}
#nav ul.actions.vertical li > .button {width: 100%;}
#nav ul.actions.vertical.special li:after {display:none;}

/* FONT */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/assets/fonts/Roboto/static/Roboto-Regular.ttf) format("truetype");  
}


@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: optional;
  src: url('/assets/fonts/Roboto/static/Roboto-Light.ttf') format("truetype");  
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/assets/fonts/Roboto/static/Roboto-Bold.ttf') format("truetype");  
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/Inter/static/Inter_24pt-Regular.ttf') format("truetype");  
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('/assets/fonts/Inter/static/Inter_24pt-Medium.ttf') format("truetype");  
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/assets/fonts/Inter/static/Inter_24pt-Bold.ttf') format("truetype");  
}


/* FONT */

@media only screen and (max-width: 736px) {
	#nav ul.actions.vertical li {width: 100%!important;}
}

h1, h2, h3, h4, h5, h6 {
	color:var(--main-title-color);
	font-family: var(--main-font-titles);	
}

h1 { 
    hyphens: auto;
    hyphenate-limit-chars: 10;
    box-sizing: border-box;
    margin: 0 0 2rem;
    padding: 0px;
    min-width: 0px;
    font-weight: 700;
    line-height: 1;
    white-space: pre-wrap;
    letter-spacing: -0.0375rem;
    font-size: clamp(2rem, 1.5rem, 3rem);
    text-align: left;
}


h2 { 
    hyphens: auto;
    hyphenate-limit-chars: 10;
    box-sizing: border-box;
    margin: 0;
    padding:0 0 1.2rem;
    min-width: 0px;
    font-weight: 700;
    line-height: 1;
    white-space: pre-wrap;
    letter-spacing: -0.0375rem;
    font-size: 2rem;
    text-align: left;
}


ul li {
    margin-bottom: 0.5em;
}

@media only screen and (max-width: 736px) {
	h1, #home header {
		font-size: 1.8rem;
		text-align: center;
	}	
}

/* PANEL */
#home.panel > .content {
	padding: 2rem;	
}
.panel > .content {
    padding: 1rem 2rem 2rem 2rem;
    display:flow;
}

.inner {
    clear: both;
}

@media screen and (max-width: 1280px) {
    .panel > .content {
        padding: 2.5em;
    }
}

/* HEADER */
header {
	margin: 0 0 1.2rem 0;
	text-align:left;
} 
header > :first-child:after {
    background-color: var(--main-buttom-color);
}

header > :first-child:after { display:none;}
header p {
    letter-spacing: unset;
    text-transform: unset;
    font-weight: 400;
    line-height:1.250rem;    
	font-size:1.1rem;
}

p {
    margin: 0 0 1em 0;
    line-height:1.5em;
}

p.small {
    font-size: 70%;
}

/* #footer .copyright {text-transform: lowercase!important;} */

/* logo + first pannel */
#logo {max-width:170px;margin: 2rem 0;}

/* Buttons */

.button {
	box-shadow: inset 0 0 0 1px var(--main-button-border-color);
	color: var(--main-button-color)!important;
    background-color: var(--main-button-background);
	font-weight: 400;
}

button.active, .button:hover, .button.active {
	box-shadow: inset 0 0 0 1px var(--main-button-border-color-active);
	color: var(--main-button-color-active)!important;
    background-color: var(--main-button-background-active);
}

ul.actions li:nth-child(6) a.button {
	box-shadow: inset 0 0 0 1px var(--action-button-border-color);
	color: var(--action-button-color)!important;
    background-color: var(--action-button-background);
	font-weight: 400;
}

ul.actions li:nth-child(6) a.button:hover {
	box-shadow: inset 0 0 0 1px var(--action-button-border-color-active);
	color: var(--action-button-color-active)!important;
    background-color: var(--action-button-background-active);
}

ul.actions li:nth-child(5) a.button {
	box-shadow: inset 0 0 0 1px var(--login-button-border-color);
	color: var(--login-button-color)!important;
    background-color: var(--login-button-background);
	font-weight: 400;
}

ul.actions li:nth-child(5) a.button:hover {
	box-shadow: inset 0 0 0 1px var(--login-button-border-color-active);
	color: var(--login-button-color-active)!important;
    background-color: var(--login-button-background-active);
}

.button.back:before {
	color: var(--main-buttom-color)!important;
}


ul.icons li .icon {
	height: auto!important;
	width: auto!important;	
    letter-spacing: unset!important;
    line-height: unset!important;
}


#nav.second .button {
    box-shadow: none;
    text-align: left;
    padding: 0!important;
    margin: 0 0 1rem 0!important;
    border-radius: 0;
	height: auto!important;
    letter-spacing: unset!important;
    line-height: unset!important;
}

#nav.second ul li {
    float: left!important;
    width: auto!important;
    padding: 0!important;
    margin:0 0 0 1em!important
}

#nav.second ul li a {
  color: var(--main-title-color);
  position: relative;
  overflow: hidden;
}

#nav.second ul li a.button::before,
#nav.second ul li a.button::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  background:  var(--main-button-color);
  transition: all 0.5s;
}

ul.actions li:nth-child(5) a:hover::before,
ul.actions li:nth-child(5) a:hover::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  background:  var(--login-button-color)!important;
  transition: all 0.5s;  
}

ul.actions li:nth-child(6) a:hover::before,
ul.actions li:nth-child(6) a:hover::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  background:  var(--action-button-color)!important;
  transition: all 0.5s;  
}

#nav.second ul li a::before {
  top: 0;
  left: 0;
}

#nav.second ul li a::after {
  bottom: 0;
  right: 0;
}

#nav.second ul li a:hover {
	background:#FFFFFF;
}

#nav.second ul li a:hover::before {
	color:#000000;
  width: 100%;
  transition: width 0.25s ease-in-out;
}

#nav.second ul li a:hover::after {
  width: 100%;
  transition: width 0.25s ease-in-out 0.25s;
}

/* ICONES */
.icons a {
	border:none!important;
}
.icons a span.label {
	color:var(--main-font-body)!important;
	font-family: var(--main-font-titles)!important;
	text-transform:lowercase;
	font-weight: 400;	
	text-decoration:none!important;
}


/* ==== GRID SYSTEM ==== */

.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  position: relative;
  width: 100%;
}

.row [class^="col"] {
  float: left;
  margin: 0.5rem 0;
  min-height: 0.125rem;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 96%;
}

.col-1-sm {
  width: 4.33%;
}

.col-2-sm {
  width: 12.66%;
}

.col-3-sm {
  width: 21%;
}

.col-4-sm {
  width: 29.33%;
}

.col-5-sm {
  width: 37.66%;
}

.col-6-sm {
  width: 46%;
}

.col-7-sm {
  width: 54.33%;
}

.col-8-sm {
  width: 62.66%;
}

.col-9-sm {
  width: 71%;
}

.col-10-sm {
  width: 79.33%;
}

.col-11-sm {
  width: 87.66%;
}

.col-12-sm {
  width: 96%;
}

.row::after {
	content: "";
	display: table;
	clear: both;
}

.hidden-sm {
  display: none;
}

@media only screen and (min-width: 33.75em) {  /* 540px */
  .container {
    width: 80%;
  }
}

@media only screen and (min-width: 45em) {  /* 720px */
  .col-1 {
    width: 4.33%;
  }

  .col-2 {
    width: 12.66%;
  }

  .col-3 {
    width: 21%;
  }

  .col-4 {
    width: 29.33%;
  }

  .col-5 {
    width: 37.66%;
  }

  .col-6 {
    width: 46%;
  }

  .col-7 {
    width: 54.33%;
  }

  .col-8 {
    width: 62.66%;
  }

  .col-9 {
    width: 71%;
  }

  .col-10 {
    width: 79.33%;
  }

  .col-11 {
    width: 87.66%;
  }

  .col-12 {
    width: 96%;
  }

  .hidden-sm {
    display: block;
  }
}

@media only screen and (min-width: 60em) { /* 960px */
  .container {
    width: 75%;
    max-width: 60rem;
  }
}

/* LOADER */

.loader {
position : fixed;
z-index: 9999;
top : 0px;
left : 0px;
height : 100%;
width : 100%;
cursor : wait;
}


.sk-fading-circle {
  width: 40px;
  height: 40px;
  position: relative;
top : 40%;
left : 50%;

}

.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: var(--main-buttom-color);
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; 
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}

.panel {
    background-color: transparent;
}

.panel:not(.special) {
    background-image: url(../../images/spay-lux.com-global-payment-services-from-luxembourg-filigrane-21.png);
    background-repeat: no-repeat;
    background-position: 99% 99%;
    background-size: 140px;     
}

@media screen and (max-width: 1279px) {
	.panel > .image 	{border-radius: 10px 10px 0 0;}
	.panel > .content 	{border-radius: 0 0 10px 10px;}
}

@media screen and (min-width: 1280px) {
	.panel > .image 	{border-radius: 10px 0 0 10px;}
	.panel > .content 	{border-radius: 0px 10px 10px 0;}
}