/* 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);}
.panel > .image {min-height: var(--main-min-height);}

h1, h2, h3, h4, h5, h6 {
	color:var(--main-buttom-color);
	font-weight: 300;
}

ul.icons li .icon:before {
	color:var(--main-buttom-color);
}

ul.icons li:hover .icon:before {
	color:var(--main-buttom-active-color);
}

ul ul {margin:0}

/* MISC */
input[type="submit"], input[type="reset"], input[type="button"], button, .button {font-size: 0.7em;}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], select {font-size: 0.7em;}
strong, b {font-weight: 600;}
span.small {font-size: 0.8em;text-transform:none;letter-spacing:0.2px;}
pre {white-space: normal;font-size: 0.8em;line-height: 1.8em;}

/* TABLES */
table td, table th {font-size:0.7em;}
table tbody tr {border: solid 1px var(--main-table-color);border-left: 0;border-right: 0;}
table thead {border-bottom: solid 2px var(--main-table-color);}
table tfoot {border-top: solid 2px var(--main-table-color);}
table th {font-weight:600;}
.table-wrapper {margin-bottom:25px}

/* HEADER */
header {margin: 1em 0;}
header p {font-size:1.2em;}
header > :first-child:after {
    background-color: var(--main-buttom-color);
}

/* FOOTER */
#footer {margin: 2em 0 0 0;}
#footer .copyright {font-size: 0.5em;color:#000000;text-transform: lowercase;}

/* logo + first pannel */
#logo {max-width:200px;margin-left:-1px;margin-bottom: 1em;}
.panel.special {text-align: left;}


#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;}

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

ul.icons {clear: both;}

/* Buttons */
input[type="submit"], input[type="reset"], input[type="button"], button, .button {
	box-shadow: inset 0 0 0 1px var(--main-buttom-color);
	color: var(--main-buttom-color)!important;
    background-color: var(--main-buttom-background);
	font-weight: bold;
}

input[type="submit"].back:before, input[type="reset"].back:before, input[type="button"].back:before, button.back:before, .button.back:before {
	color: var(--main-buttom-color)!important;
}

input[type="submit"]:hover, input[type="submit"].active, input[type="reset"]:hover, input[type="reset"].active, input[type="button"]:hover, input[type="button"].active, button:hover, button.active, .button:hover, .button.active {
	color: var(--main-buttom-active-color)!important;
	box-shadow: inset 0 0 0 1px var(--main-buttom-active-color);
}


/* ==== 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; } 
}