/* Stylesheet */

body {
  background: url(/content/image/Backgrounds/cloud.webp) 0 0 repeat-x, url(/content/image/Backgrounds/black-shapes.webp) 0 0 repeat, url(/content/image/Backgrounds/stars-bg-3.webp) 0 0 repeat;
  background-attachment: fixed;
  animation: twinkles-only 120s linear infinite;
  color: #fff;
  min-height: 100vh;
  font-family: 'Open Sans', sans-serif;
  padding-top: 87px;
}

.glow {
  box-shadow: 0 0 0.75rem rgba(255,255,255,0.5), 0 0 0.25rem #b45b5a;
}

.main-nav .navbar-toggler {
  width: 100%;
  color: #fff !important;
}

h1,h2,h3,h4 {
  font-family: 'RocknRoll One', sans-serif;
}

@keyframes twinkles-only {
  0% { background-position: 0 bottom, 0 0, 0 0}
  100% { background-position: -3000px bottom, 640px 480px, 0 0 }
}

@keyframes rocket {
  from {
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    transform: skewX(5deg);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.rocket {
  animation-name: rocket;
  animation-timing-function: ease-out;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 2s;
}

.logo-oval {
  position: absolute;
  top: calc(50vh - 212px);
  left: calc(50vw - 342.5px);
  
  animation-name: zoomin;
  animation-timing-function: ease-in;
  animation-duration: 0.7s;
  animation-delay: 3.5s;
  animation-fill-mode: both;
  transform-origin: center center;
  opacity: 0;
  transform: scale(800%);
}

.logo-the-delray {
  position: absolute;
  top: calc(50vh - 180px);
  left: calc(50vw - 340px);
  transform: rotate(-900deg) translate(100vw, -100vh);
  animation-name: spinthedelray;
  animation-timing-function: ease-in-out;
  animation-duration: 0.7s;
  animation-delay: 4.5s;
  animation-fill-mode: both;
  transform-origin: center center;
  opacity: 0;
}

@keyframes spinthedelray {
  from {
    transform: rotate(-360deg) translate(100vw, -100vh);
    opacity: 0; 
  }
  to {
    transform: rotate(-20deg);    
    opacity: 1;
  }
}

@keyframes spinrockets {
  from {
    transform: rotate(360deg) translate(-100vw, 100vh);
    opacity: 0;
  }
  to {
    transform: rotate(-20deg);    
    opacity: 1;
  }
}


.logo-rockets {
  position: absolute;
  top: calc(50vh + 80px);
  left: calc(50vw + 40px);
  transform: rotate(-900deg) translate(100vw, -100vh);
  animation-name: spinrockets;
  animation-timing-function: ease-in-out;
  animation-duration: 0.7s;
  animation-delay: 4.9s;
  animation-fill-mode: both;
  transform-origin: center center;
  opacity: 0;
}

@keyframes zoomin {
 
  from {
    opacity: 0;
    transform: scale(800%);
  }
  to {
    opacity: 1;
    transform: scale(100%);
  }
}

.bg-star {
  transform-origin: center center;
  position: fixed; 
  animation-name: star;
  animation-timing-function: ease-in-out;
  animation-duration: 0.7s;
  animation-fill-mode: both;
  transform: scale(0);
  /*animation-iteration-count: infinite;*/
}

#star-1 {
  top: 20%;
  left: 70%;
  animation-delay: 4.4s;
}

#star-2 {
  bottom: 5%; left: 50%; 
  animation-delay: 0.5s;
  animation-duration: 0.5s;
}

#star-3 {
  top: 50%; left: 5%;
  animation-delay: 3.4s;
  animation-duration: 0.6s;
}

#star-4 {
  top: 30%;
  left: 30%;
  animation-delay: 2.3s;
  animation-duration: 0.5s;
}

#star-5 {
  top: 5%;
  left: 80%;
  animation-delay: 5s;
}

@keyframes star {
	from: {
  		transform: scale(0);
	}
	70% {
  		transform: scale(0.3);
	}
	to {
  		transform: scale(0);
	}
}

.btn-chrome {
  background-color: #4c4c4c; 
  background-image: -moz-linear-gradient(top,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6-15 */
  background-image: -webkit-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
  background-image: linear-gradient(to bottom,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border-color: #131313;
  color: white;
  font-family: 'RocknRoll One', sans-serif;
  font-size: 2rem;
  transition: background-position 0.2s;
  background-repeat: repeat-x;
  text-shadow: 0 0 10px #000;
}

.btn-chrome:hover {
  background-color: #4c4c4c;
  background-position: 0 5px;
  border-color: #131313;
  color: white;
}

.btn-chrome:active {
  background-color: #4c4c4c;
  background-position: 0 5px;
  border-color: #131313;
  color: white;
}

#down-arrow {
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255,255,255,0.7);
  position: absolute;
  bottom: 10px;
  left: calc(50vw - 64px);
  animation-name: breathebg;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+20,2989d8+50,1e5799+80&0+0,0.8+15,1+19,1+81,0.8+85,0+100;Blue+Two+Sided+Transparent */
  background: -moz-linear-gradient(top,  rgba(30,87,153,0) 0%, rgba(30,87,153,0.8) 15%, rgba(30,87,153,1) 19%, rgba(30,87,153,1) 20%, rgba(41,137,216,1) 50%, rgba(30,87,153,1) 80%, rgba(30,87,153,1) 81%, rgba(30,87,153,0.8) 85%, rgba(30,87,153,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-size: 128px 128px;
  background-repeat: repeat-y;
}

#down-arrow:hover {
  background: #fff !important;
  box-shadow: 0 0 5px #fff;
}

@keyframes breathebg {

  from {
    background-position: 0 0;
  }
  
  to {
    background-position: 0 128px;
  }
  
}

::-webkit-scrollbar {
  height: 12px;
  width: 12px;
  background: #000;
}

::-webkit-scrollbar-thumb {
  background: #b45b5a;
  -webkit-border-radius: 1ex;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
  background: #000;
}

::selection {
  background: #b45b5a;
  color: #fff;
}

::-moz-selection {
  background: #b45b5a;
  color: #fff;
}

* {
	scrollbar-color:  #b45b5a #000; 
}

.main-nav {
  font-family: "Rocknroll One", sans-serif;
  font-size: 2rem;
}

.category-header .btn {
   display: none !important;
}

.category-header {  
  padding-top: 100px;
}

.category-header h1 {
  font-size: 3rem !important;
}

@media ( max-width: 767px ) {
  #theme- { background: rgba(0,0,0,0.8) !important; }
}

.gallery-title, .blog-control-top, .blog-category-container {
 	padding-top: 120px;  
}