body{margin:0;background: rgba(0, 0, 0, 1);overflow: hidden;height:100vh}
img{width: 100%;max-height:100%;}
.modal *{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.row > .column{width:33.333%;box-sizing: border-box;float: left}
.modal{
  position: fixed;
  left:0;
  top:0;
  background: #000;
  width:100%;
  height:100%;
  overflow:hidden;
  color:red;
  display: flex;
  justify-content: center;
  align-items: center;
  display:none;
  transition:all 1s ease;
}

.modal-content{
  display: flex;
  margin-left:30px;
  margin-right:30px;
  transition: all 1s ease;

}
.modal .modal-content .mySlides {
  line-height: 0;
  width:350px;
  animation:fade 1s;

}
.modal .modal-content .mySlides img{max-width:100%;}

/*.modal .mySlides:first-of-type{
  margin-left:30px
}
.modal .mySlides:last-of-type{
  margin-right:30px
}*/


.modal .mySlides img{ transition: all .2s linear; }
.modal-content .mySlides img:hover{
  transform: scale(1.05);
  /*border-right:3px solid #000;
  border-left:6px solid #000*/
}
.full-modal .mySlides{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:none;
  animation:fade 1s;

}
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 45px;
  font-size: 35px;
  font-weight: bold;
  z-index: 2;
}
.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.prev{position: absolute;left:0}
.next {position: absolute;right:0;text-align:right}
.prev,
.next{
  font-size: 2em;
  height: 100%;
  line-height: 100vh;
  width:100px;
  cursor: pointer;
}
.prev:hover,
.next:hover {
  background-color: rgba(0, 111, 0, 0.2);
}

.holoimg{
  display:block;
  /*background-image: url("../images/hologram1.jpg");*/
  background-size: cover;
  /*width:100%;*/
  /*min-height: 300px;*/
  text-align: center;
  color:#eee;
  overflow:hidden;
  cursor:pointer;
  /*padding:100px;*/
  line-height:100vh;
  opacity:.5
}
.holoimg:hover{
  opacity:1
}
.holoimg i{
  /*margin-top:80px;*/
}
.holoimg .overlay:hover{
  text-shadow: 3px 3px 15px rgba(255,255,255,.5);
  transform:scale(1.1) translate(0,5px);

}
.overlay{
  /*width:100%;*/
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  /*min-height: 300px*/

}
@keyframes fade{
  from{
    opacity:0;
    /*transform:scale(0);*/
  }
  /*50%{
    opacity: .3
  }*/
  to{
    opacity: 1;
    /*transform:scale(1);*/
  }
}
.loaded .loader-container{
  visibility: hidden;
}
.loader{
    display: block;
    position: absolute;
    left: 50%;
    margin-left:-75px;
    top:50%;
    margin-top:-75px;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    z-index: 2
}
.loaded .loader{opacity: 0;}
.loader:after{
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}
.loader:before{
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
.loader-section{
  position: fixed;
  top:0;
  width:51%;
  height:100%;
  background-color: #222;
  color:#eee;
  z-index: 1
}
.loader-section.section-left{left:0;}
.loader-section.section-right{right:0;}
.loaded .loader-section.section-left{left: -100%;transition: all .7s .3s ease-out;}
.loaded .loader-section.section-right{right:-100%;transition: all .7s .3s ease-out;}

@keyframes spin{
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}
/*
#container { display:block; }

@media only screen and (orientation:portrait){

  #container {

    height: 100vh;
    width:100vw;
    -webkit-transform: rotate(90deg);

    -moz-transform: rotate(90deg);

    -o-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    transform: rotate(90deg);

  }

}

@media only screen and (orientation:landscape){

  #container {

     -webkit-transform: rotate(0deg);

     -moz-transform: rotate(0deg);

     -o-transform: rotate(0deg);

     -ms-transform: rotate(0deg);

     transform: rotate(0deg);

  }

}*/

/* Gerosccope */