/*!
* Ares Dashboard - v1.0.0 - Copyright 2016
* @author pixelcave - https://pixelcave.com
*/

/* Bootstrap Overwrite/Extend */
html, body {
    height: 100%;
}

body {
    color: #e8f4ff;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    background-image: url(../img/bg_ares.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
/* The only rule that matters */
#video-background {
background:url("/styles/theme/gow/img1/quadrato.png") repeat , url("/styles/theme/gow/img1/sfondonuovo.png") repeat , url("/pic/window.png") no-repeat fixed center center #0d0d0d;
/*  making the video fullscreen  */
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -100;
}
.videoContainer .overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    background:url("/styles/theme/gow/img1/quadrato.png")no-repeat;
    opacity: 0.5;
}

/* These just style the content */
article {
/*  just a fancy border  */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 10px solid rgba(255, 255, 255, 0.5);
  margin: 10px;
}

h1, h2, h3, .h1, .h2, .h3, .heading {
    font-family: 'Raleway', sans-serif;
    margin: 0;
    color: #e8f4ff;
}

a {
    color: #62d0f0;
    font-weight: 600;
    -webkit-transition: color .15s ease-out;
    transition: color .15s ease-out;
}

a:hover,
a:focus {
    color: #62d0f0;
    text-decoration: none;
}

a.link-sf {
    position: relative;
}

a.link-sf:before {
    position: absolute;
    top: -5px;
    right: -2px;
    bottom: -5px;
    left: -2px;
    content: "";
    background-color: rgba(255, 255, 255, .15);
    visibility: hidden;
    -webkit-transform: scaleY(2);
    -ms-transform: scaleY(2);
    transform: scaleY(2);
    -webkit-transition: -webkit-transform .12s ease-out;
    transition: transform .12s ease-out;
}

a.link-sf:hover,
a.link-sf:focus {
    color: #fff;
}

a.link-sf:hover:before,
a.link-sf:focus:before {
    visibility: visible;
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}

a.link-sf:active:before {
    -webkit-transform: scaleY(1.2);
    -ms-transform: scaleY(1.2);
    transform: scaleY(1.2);
}

.text-sf {
    color: #62d0f0;
}

.text-crystal {
    color: rgba(255, 255, 255, .25);
}

.text-white-op {
    color: rgba(255, 255, 255, .75);
}

.text-success {
    color: #2ecc71;
}

.text-danger {
    color: #e74c3c;
}

.btn.btn-xl {
    padding: 14px 12px;
}

.btn.btn-sf {
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
    border: 2px solid rgba(255, 255, 255, .25);
    border-left-width: 4px;
    border-right-width: 4px;
    background: transparent;
}

.btn.btn-sf:hover,
.btn.btn-sf:focus {
    color: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 1);
    outline: 0;
}

.btn.btn-sf:active {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, .15);
}

.progress {
    margin-bottom: 10px;
    background: rgba(0, 0, 0, .25);
    height: 10px;
}

.progress-bar-sf {
    background-color: rgba(98, 208, 240, .1);
}

/* Main Layout */
#page-container {
    min-width: 320px;
}

#page-container:before {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    z-index: -1;
}

#page-container.modern-sf:before {
    background-color: rgba(0, 22, 41, .75);
}

#page-container.vintage-sf:before {
    background-color: rgba(197, 107, 19, .35);
}

#page-container.vintage-sf .block {
    background-color: rgba(0, 0, 0, .3);
}

#page-container.interstellar-sf:before {
    background-color: rgba(255, 0, 192, .35);
}

#page-container.interstellar-sf .block {
    background-color: rgba(0, 0, 0, .3);
}

#page-header {
    padding: 26px 26px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

#page-main {
    padding: 50px 20px 1px;
}

/* Blocks */
.block {
    margin-bottom: 20px;
    background-color: rgba(0, 0, 0, .15);
    border-left: 4px solid rgba(255, 255, 255, .1);
}

.block-header {
    padding: 5px 5px 5px;
}

.block-header:before,
.block-header:after {
    content: " ";
    display: table;
}

.block-header:after {
    clear: both;
}

.block-title {
    font-size: 20px;
    font-weight: 400;
    font-family: 'Raleway', sans-serif;
    color: rgba(255, 255, 255, .25);
    text-transform: uppercase;
    line-height: 1.2;
}

.block-content {
    margin: 0 auto;
    padding: 20px 20px 1px;
    max-width: 100%;
    overflow-x: visible;
}

.block-content.block-content-full {
    padding-bottom: 20px;
}

.block-content p,
.block-content .push,
.block-content .block {
    margin-bottom: 15px;
}

/* Circles */
.circles {
    position: relative;
    left: 50%;
    margin-left: -280px;
    width: 560px;
    height: 560px;
}

.circle {
    position: absolute;
    display: inline-block;
    border-radius: 50%;
}

.circles-main-content {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: 200;
    font-size: 48px;
    line-height: normal;
    color: #fff;
}

.circle-0 {
    width: 52%;
    height: 52%;
    top: 24%;
    left: 24%;
    background: rgba(98, 208, 240, .02) url(../img/bg_circle_0.png) center center no-repeat;
    -webkit-animation: spin 80s infinite linear;
    animation: spin 80s infinite linear;
}

.circle-1 {
    width: 56%;
    height: 56%;
    top: 22%;
    left: 22%;
    border: 20px groove rgba(98, 208, 240, .1);
    -webkit-animation: spin-inverse 40s infinite linear;
    animation: spin-inverse 40s infinite linear;
}

.circle-2 {
    width: 64%;
    height: 64%;
    top: 18%;
    left: 18%;
    border: 6px dotted rgba(255, 255, 255, .05);
    -webkit-animation: spin 100s infinite linear;
    animation: spin 100s infinite linear;
}

.circle-3 {
    width: 72%;
    height: 72%;
    top: 14%;
    left: 14%;
    border: 10px double rgba(255, 255, 255, .5);
    -webkit-animation: spin 30s infinite linear;
    animation: spin 30s infinite linear;
}

.circle-4 {
    width: 76%;
    height: 76%;
    top: 12%;
    left: 12%;
    border: 4px dotted rgba(98, 208, 240, .5);
    -webkit-animation: spin-inverse 60s infinite linear;
    animation: spin-inverse 60s infinite linear;
}

.circle-5 {
    width: 94%;
    height: 94%;
    top: 3%;
    left: 3%;
    border: 2px rgba(98, 208, 240, .2);
    border-style: dashed solid dashed solid;
    -webkit-animation: spin 30s infinite linear;
    animation: spin 30s infinite linear;
}

.circle-6 {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 36px double rgba(255, 255, 255, .03);
    -webkit-animation: spin-inverse 50s infinite linear;
    animation: spin-inverse 50s infinite linear;
}

.circle-over-1,
.circle-over-2,
.circle-over-3 {
    width: 70px;
    height: 70px;
    line-height: 70px;
    top: 0;
    right: 0;
    color: rgba(231, 76, 60, 1);
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    background-color: rgba(231, 76, 60, .15);
}

.circle-over-2 {
    border: 1px dashed rgba(231, 76, 60, .3);
    background-color: transparent;
    -webkit-animation: spin-inverse 15s infinite linear;
    animation: spin-inverse 15s infinite linear;
}

.circle-over-3 {
    border: 3px dashed rgba(231, 76, 60, .3);
    background-color: transparent;
    -webkit-animation: spin-inverse 15s infinite linear;
    animation: spin-inverse 15s infinite linear;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin-inverse {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(-360deg);
    }
}

@keyframes spin-inverse {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}
body{
  height: 100vh;
  text-align: center;
}
  /*Trigger Button*/
.login-trigger {
  font-weight: bold;
  color: #fff;
  background: linear-gradient(to bottom right, #B05574, #F87E7B);
  padding: 15px 30px;
  border-radius: 30px;
  position: relative; 
  top: 50%;
}

/*Modal*/
h4 {
  font-weight: bold;
  color: #fff;
}
.close {
  color: #fff;
  transform: scale(1.2)
}
.modal-content {
  font-weight: bold;
  background: linear-gradient(to bottom right,#F87E7B,#B05574);
}
.form-control {
  margin: -1em 1px;
}
.form-control:hover, .form-control:focus {
  box-shadow: none;  
  border-color: #fff;
}
.username, .password {
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 2px solid #eee;
  padding-left: 0;
  font-weight: normal;
  background: transparent;  
}
.form-control::-webkit-input-placeholder {
  color: #eee;  
}
.form-control:focus::-webkit-input-placeholder {
  font-weight: bold;
  color: #fff;
}
.login {
  padding: 6px 20px;
  border-radius: 20px;
  background: none;
  border: 2px solid #FAB87F;
  color: #FAB87F;
  font-weight: bold;
  transition: all .5s;
  margin-top: 1em;
}
.login:hover {
  background: #FAB87F;
  color: #fff;
}
// n is number of stars required
@function star-generator ($n) {
  // $value: '#{random(2000)}px #{random(2000)}px #FFF';
  $value: "#{random(2000)}px #{random(2000)}px #FFF";
  @for $i from 2 through $n {
    // $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF';
    $value: "#{$value}, #{random(2000)}px #{random(2000)}px #FFF";
  }
  @return unquote($value);
  // @return #{$value};
  // @return $value;
}
@mixin element($width,$height:$width,$radius:$width,$background:transparent) { // creates a element element and requires width, then sets the height and radius if you don't pass them (defaults to a circle)
  background:$background;
  border-radius:$radius;
  content:"";
  display:block;
  height:$height;
  width:$width;
}
$shadows-small: star-generator(700);
$shadows-medium: star-generator(200);
$shadows-big: star-generator(100);

* {
  box-sizing:border-box; /* Box sizing. Thanks Chris Coyier! */
  position:relative;
}
body {
  background:#000;
  // background:radial-gradient(ellipse at bottom, #1b1b1b 0%, #0a0a0a 100%);
  // display:block;
  height:100vh;
  // overflow:hidden;
  // perspective:1000;
  text-align:center;
  
  // background-image:
  //   radial-gradient(2px 2px at 20px 30px, rgba(#fff,.6), rgba(#000, 0)), 
  //   radial-gradient(2px 2px at 40px 70px, rgba(#fff,.7), rgba(#000, 0)), 
  //   radial-gradient(2px 2px at 50px 160px, rgba(#fff,.5), rgba(#000, 0)), 
  //   radial-gradient(2px 2px at 90px 40px, rgba(#fff,.3), rgba(#000, 0)), 
  //   radial-gradient(2px 2px at 130px 80px, rgba(#fff,.5), rgba(#000, 0)), 
  //   radial-gradient(2px 2px at 160px 120px, rgba(#fff,.8), rgba(#000, 0)),
  //   ;
  // background-repeat: repeat;
  // background-size: 200px 200px;
  // content: "";
  // display: block;
  // height: 100vh;
  // position: absolute;
  // width: 100%;
}
body > * {
}
.stars {
  @include element(1px);
  animation:fade 120s linear 1 reverse;
  box-shadow: $shadows-small;
  // display:none;
  &:before {
    @extend .stars;
    @include element(2px);
    box-shadow: $shadows-medium;
  }
  &:after {
    @extend .stars;
    @include element(3px);
    box-shadow: $shadows-big;
  }
}
.blue {
  // animation:fade 5s linear infinite;
  animation:fade 5s linear 1;
  color:#0b43ff;
  // display:none;
  font-family:"Open Sans";
  font-size:6vmax;
  font-size:4em;
  font-weight:700;
  height:25vh;
  line-height:1.4;
  margin:auto;
  max-width:55vw;
  min-width:50vw;
  opacity:0;
  text-align:left;
  top:35vh;
}
.logo {
  // animation:fly 10s linear infinite;
  animation:fly 10s linear 1 7s;
  background-image:url("https://www.darkhorizons.ca/assetss/img/logo.png");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  bottom:0;
  // display:none;
  left:0;
  position:absolute;
  right:0;
  top:0;
  /* background-size:0; */
  height:100vh;
  visibility:hidden;
}
.crawl {
  // background:tomato;
  // bottom:0;
  font-size:2.75vmax;
  height:auto;
  height:10vmax;
  // left:20vw;
  margin:0 25vmax;
  // overflow:hidden;
  position:fixed;
  // right:20vw;
  text-align:justify;
  // transform:perspective(40em) rotateX(70deg);
  transform:perspective(100vmax) rotateX(70deg);
  transform-origin:bottom;
  // top:20rem;
  /* width:18em; */
  // width:80vmax;
  // &:before {
  //   @include element(100%,25%,0);
  //   background:
  //     linear-gradient(#0a0a0a,transparent)
  //     ;
  //   z-index:100;
  // }
}
.crawl p {
  // animation:crawl 10s linear infinite;
  animation:crawl 60s linear 1 0s; /* Put the animation on the p tag to make it follow the skewed shape. */
  // bottom:10vmax;
  bottom:-100vmax;
  color:#ffd032;
  font:700 1em/1.4em "Open Sans";
  // height:100%;
  margin:2vmax auto;
  position:relative;
  transform-origin:bottom;
  width:100%;
  // z-index:0;
  // &:before {
  //   @include element(100%,25%,0,dodgerblue);
  //   background:
  //     linear-gradient(blue,purple)
  //     ;
  //   position:absolute;
  //   z-index:100;
  // }
}
.center {
  text-align:center;
}
.center + .center {
  text-transform:uppercase;
}
img {
}
@keyframes fade {
  30% {opacity:1;}
  70% {opacity:1;}
  100% {opacity:0;}
}
@keyframes fly {
  from {
    background-size:100vmax;
    visibility:visible;
  }
  to {
    background-size:0vmax;
  }
}
@keyframes crawl {
  0% {
    bottom:-100vmax;
    /* visibility:visible; */
  }
  100% {
    bottom:70vmax;
  }
}