/* .pyr-container-outer { 
    width: 1024px;
    margin: 0 auto;
} */

article {
    padding-top: 300px !important;
    /* min-height: 1000px; */
}

.title {
    position: absolute;
    font-weight: normal;
    font-style: italic;
    color: rgba(255,255,255,0.8);
    font-size: 24px;
    margin: 115px 0 0 55px;
    text-shadow: 2px 2px 1px rgba(0,0,0,0.4);
    letter-spacing: 1px;
}

#site-content table {
    border-color: #FFF;
    font-size: 14px;
}

.post-1 {
    min-height: 2000px;
}

#site-content td {
    border-color: rgba(255,255,255,0.4) !important;
}

.pyr-container {
    position: relative;
    /* background-color: #edbf86; */
    background-color: red;
    background-image: url(./assets/images/bg.jpg);
    background-repeat: no-repeat;
    /* background-position: top left; */
    background-attachment: fixed;
    background-position: center -35px;
	width: 1024px;
	margin: 0 auto;
    height: 100%;
}

.pyr-header {
    position: fixed;
    background-image: url('./assets/images/sky.jpg');
    background-position: 100% -120px;
    height: 280px;
    width: 1024px;
    transition:background-position-x 2s ease;
    /* display: none */
}

#sky.pos1 {
    background-position-x: 100%;
}

#sky.pos2 {
    background-position-x: 75%;
}

#sky.pos3 {
    background-position-x: 50%;
}

#sky.pos4 {
    background-position-x: 25%;
}

.pyr-img-header {
    
    display: block;
    /* margin-top: -100px; */
}

.pyr-image-overlay {
    
    /* border: 3px solid green; */
    background-image: url('./assets/images/pyramids.png');
    background-position-y: -120px;
    height: 100%;
}



.pyr-nav {
    position: fixed;
    width: 1024px;
    height: 100px;
    background-color: rgba(0,51,102,0.25);
}

.pyr-top {
    width: 100%;
    height: 65px;
    background-color: rgba(0,51,102,0.65);
}
    
.pyr-ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0 40px;
}

.pyr-li {
    display: inline-block;
    /* padding: 0 15px; */
    
    font-size: 14px;
    color: #FFF;
    cursor: pointer;
    margin: 0;

}

.pyr-li a {
    padding: 0 15px;
    text-decoration: none;
    color: #FFF;
    line-height: 35px;
    display: block;
}
.pyr-li:hover {
    background-color: rgba(0,51,102,0.65);
}

.pyr-active {
    background-color: rgba(0,51,102,0.65);
}
    
/* overrides */

.entry-content {
	color: #333;
	font-size: 14px !important;
	letter-spacing: normal;
}

.entry-header {
    padding: 0px !important;
    background-color: transparent !important;
}

.entry-categories,
.post-meta-wrapper {
    display: none;
}

h4 {
    font-size: 22px !important;
    color: #FFF !important;
}

.wp-image-24 {
    float: left;
    margin-right: 20px;
}

.post-inner {
    padding-top: 20px !important;
}

.entry-title {
    padding-top: 20px !important;
    font-size: 24px !important;
    text-align: left !important;
    max-width: 58rem !important;
    width: calc(100% - 4rem) !important;
    margin: 0 auto !important;
    color: #FFF;
}

.post-separator {
    display: none !important;
}

#site-footer {
    display: none;
}


/* Pyramid animation */

.pyramid {
    width: 400px;
    height: 400px;
    position: absolute;
    perspective: 300px;
    perspective-origin: 50% 40%;
    z-index: 1000;
    /* border: 3px solid black; */
    top: -90px;
    right: -60px;
  }
  
  .side {
    position: absolute;
    left: 140px;
    top: 150px;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 80px solid #ccc;
    transform-origin: 50% 0%;
    animation: spin 5s infinite linear;
  }
  
  .back {
    animation-delay: -2.5s;
  }
  
  .right {
    animation-delay: -1.25s;
  }
  
  .left {
    animation-delay: -3.75s;
  }
  
  @keyframes spin {
    0% {
      transform: rotateY(0deg) rotateX(30deg);
      /* border-bottom-color: lighten(#0000FF, 5%); */
      border-bottom-color: rgba(0, 65, 125, 0.85);
    }
    25% {
      transform: rotateY(90deg) rotateX(30deg);
      /* border-bottom-color: darken(#0000FF, 5%); */
      border-bottom-color: rgba(0, 50, 100, 1);
      opacity: 1;
    }
    25.1% {
      opacity: 0;
    }
    50% {
      transform: rotateY(180deg) rotateX(30deg);
      /* border-bottom-color: darken(#0000FF, 12%); */
      border-bottom-color: rgba(0, 50, 100, 1);
    }
    74.9% {
      opacity: 0;
    }
    75% {
      transform: rotateY(270deg) rotateX(30deg);
      /* border-bottom-color: darken(#0000FF, 15%); */
      border-bottom-color: rgba(0, 50, 100, 1);
      opacity: 1;
    }
    100% {
      transform: rotateY(360deg) rotateX(30deg);
      /* border-bottom-color: lighten(#0000FF, 5%); */
      border-bottom-color: rgba(0, 65, 125, 0.85);
    }
  }
  
  
  .shadow {
    position: absolute;
    top: 250px;
    left: 175px;
    width: 30px;
    height: 30px;
    background-color: rgba(0,0,0,0.35);;
    box-shadow: 0 0 40px 40px rgba(0,0,0,0.35);
    animation: shadow 5s infinite linear;
  }
  
  @keyframes shadow {
    0% {
      transform: rotateX(90deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(90deg) rotateZ(-360deg);
    }
  }
  
  .ball {
    position: absolute;
    top:0px;
    left:12px;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;  
    transform: rotateX(-5deg);
  }
  
  @keyframes rot{
    0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); }
    100% { transform: rotateY(360deg) rotateX(0deg) rotateZ(0deg); }
  }
  
  .layer {
    position: absolute;
    top: 124px;
    left: 150px;
    width: 35px;
    height: 35px;
  }
  
  .moving
  {
    transform-style: preserve-3d;
    transform-origin: 49vmin 49vmin;
    animation: rot 10s linear infinite;
  }
  
  .clip
  {
    border-radius: 50%;  
    overflow:hidden;
    transform: translateZ(-0vmin);
  }
  
  @keyframes highlightanim {     
    0.00% {left: -150.00%; top: -178.00% }
    12.50% {left: -117.67%; top: -179.64% }
    25.00% {left: -97.69%; top: -195.87% }
    28.75% {left: -95.00%; top: -207.09% }
    32.50% {left: -97.69%; top: -220.70% }
    40.00% {left: -117.67%; top: -240.01% }
    47.50% {left: -150.00%; top: -247.50% }
    55.00% {left: -182.33%; top: -240.01% }
    62.50% {left: -202.31%; top: -220.70% }
    68.75% {left: -205.00%; top: -207.09% }
    75.00% {left: -202.31%; top: -195.87% }
    87.50% {left: -182.33%; top: -179.64% }
    100.00% {left: -150.00%; top: -178.00% }
  }     
      
  .shade
  {
    position: relative;
    top: -150%;
    left: -150%;
    width: 400%;
    height: 400%;
    background: radial-gradient(at 50% 40%, white, #cc9966, #ffcc99, #F00, #F00);
    animation: highlightanim 4s linear infinite;
  }