/*=============================================================
    Authour URI: www.binarytheme.com
    License: Commons Attribution 3.0

    http://creativecommons.org/licenses/by/3.0/

    100% To use For Personal And Commercial Use.
    IN EXCHANGE JUST GIVE US CREDITS AND TELL YOUR FRIENDS ABOUT US
   
    ========================================================  */


/*=======================================
    CUBE
==================================================*/
@keyframes bganim {
                from {
                    background-position: 0px;
                }

                to {
                    background-position: 80px;
                }
            }




	.wrap {
                margin-top: 120px;
			    margin-bottom: 120px;
                perspective: 1000px;
                perspective-origin: 50% 50%;
                /*  background-image: linear-gradient(135deg,#80d0c7 25%,#13547a 25%, #13547a 50%,#80d0c7 50%, #80d0c7 75%,#13547a 75%,#13547a 100%);*/
				background-image: linear-gradient(135deg,#195b7e 25%,rgba(0,0,1,0.1) 25%, rgba(0,0,1,0.1) 50%,#195b7e 50%,#195b7e 75%,rgba(0,0,1,0.1) 75%, rgba(0,0,1,0.1) 100%);
                background-size: 80px 80px;
                 /*border-top: solid 3px #999;
                border-bottom: solid 3px #999;
                Background stripes animation */
                animation: bganim 3s linear 2s infinite;
            }

	.cube {
                margin: auto;
                position: relative;
                height: 200px;
                width: 200px;
                transform-style: preserve-3d;
				color: white;

		   }

    .cube div {
                    position: absolute;
                    padding: 10px;
                    box-sizing: border-box;
                    height: 100%;
                    width: 100%;
                    opacity: 0.9;
                    background-color: #000;
                    border: solid 1px #eee;
                    color: #13547a;
                    font: 10px arial;
					
                    transition: transform 0.2s ease-in;
            }

	  .cube .c-ray {
		
					position: absolute;
                    /*padding: 10px;*/
                    box-sizing: border-box;
                    height: 10%;
                    width:200%;
                    opacity: 0.4;
                    vertical-align: middle;
                    border: solid 1px #eee;
                    color: #fff;
                    font: 1em arial;
					margin-bottom:0.5em;
					background-image: linear-gradient(135deg,#f00 25%,rgba(1,0,0,0.5) 25%, rgba(1,0,0,0.5) 50%,#f00 50%,#f00 75%,rgba(1,0,0,0.5) 75%, rgba(1,0,0,0.5) 100%);
					background-size: 10% 200%;
					animation: bganim 3s linear 2s infinite ;
                    transition: transform 0.2s ease-in;
					
		 
	 }

		   .c-front {
                transform: translateZ(100px) scale(0.8);
            }

            .c-back {
                transform: translateZ(-100px) rotateY(180deg) ;
            }

            .c-right {
                transform: rotateY(-270deg) translateX(100px);
                transform-origin: top right;
            }

            .c-left {
                transform: rotateY(270deg) translateX(-100px);
                transform-origin: center left;
            }

			.c-ray
			{
                transform: rotateY(270deg) translateX(50px) translateY(90px) translateZ(-100px) ;
                transform-origin: center left;
            }

            .c-top {
                transform: rotateX(-270deg) translateY(-100px);
                transform-origin: top center;
            }

            .c-bottom {
                transform: rotateX(270deg) translateY(100px);
                transform-origin: bottom center;
            }

			
			
			.csm-front {
                transform: translateZ(50px) scale(0.5, 0.5);
            }

            .csm-back {
                transform: translateZ(-50px) rotateY(180deg) scale(0.5, 0.5);
            }

            .csm-right {
                transform: rotateY(-270deg) translateX(50px) translateZ(-50px) translateY(50px)scale(0.5, 0.5);
                transform-origin: top right;
            }

            .csm-left {
                transform: rotateY(270deg) translateX(-50px) translateZ(-50px)  scale(0.5, 0.5);
                transform-origin: center left;
            }

            .csm-top {
                transform: rotateX(-270deg) translateY(-50px) 
				translateZ(-50px) scale(0.5, 0.5);
                transform-origin: top center;
            }

            .csm-bottom {
                transform: rotateX(270deg) translateY(50px) translateZ(-50px) scale(0.5, 0.5);
                transform-origin: bottom center;
            }
			
			
            @keyframes rotate {
                from {
                    transform: rotateX(0deg) rotateY(0deg);
                }

                to {
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
			
			 @keyframes spinner {
                from {
                    transform: rotateY(0deg);
                }

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

            .cube {
                animation: rotate 20s infinite linear;
            }
			
			.c-ray {
                animation: spinner 20s infinite linear;
            }

            .wrap:hover .c-front {
                transform: translateZ(200px);
            }

            .wrap:hover .c-back {
                transform: translateZ(-200px) rotateY(180deg);
            }

            .wrap:hover .c-right {
                transform: rotateY(-270deg) translateZ(100px) translateX(100px);
            }

            .wrap:hover .c-left {
                transform: rotateY(270deg) translateZ(100px) translateX(-100px);
            }

            .wrap:hover .c-top {
                transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
            }

            .wrap:hover .c-bottom {
                transform: rotateX(270deg) translateZ(100px) translateY(100px);
            }

			.big_circle {    
				display: table-cell;
				vertical-align: middle;
				background: blue;
				border-radius: 50%;
				opacity: 0.3;
				width: 50%;
				height: 50%;
			}

			.tiny_circle {
				margin: auto;
				border-radius: 50%;
				width: 15px;
				height: 15px;
				background: red;
			}

			

/*================================================
    VIDEO GALLERY
==================================================*/


.collection {
  display: grid;
  padding: 2rem;
  grid-template-columns: 300px 1fr;
  gap: 1rem;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  font: 500 100%/1.5;
}
.collection video {
  max-width: 100%;
  height: auto;
}

.collection img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 650px) {
  .collection {
    display: block;
    font-size: 80%;
  }
  .collection p {
    position: relative;
    margin: -3rem 0 2rem 1rem;
    padding: 1rem;
    background: rgba(white, 0.8);
  }
}