/*=============================================
=            Section comment block            =
=============================================*/

.container {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   height: 110vh;
   border: 20px solid #fff;
   padding: 20px;
   box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.6);
   overflow: hidden;
   background-image: linear-gradient(105deg, rgba(0, 0, 0, 0.1) 40%, transparent 40%);
}
 .container--orange {
   background-color: #d53;
}
 .container--green {
   background-color: #7b5;
}
 .container--blue {
   background-color: #348;
}
 .container--purple {
   background-color: #a29;
}
 .nav {
   display: flex;
}
 .nav__trigger {
   width: 24px;
   height: 24px;
   position: absolute;
   top: 20px;
   right: 20px;
   cursor: pointer;
   z-index: 500;
}
 .nav__trigger i {
   transition-property: transform background-color;
   transition-duration: 0.3s;
   transition-delay: 0.3s;
   width: 100%;
   height: 3px;
   position: absolute;
   top: 8px;
   left: 0;
   background-color: #fff;
}
 .nav__trigger i:before, .nav__trigger i:after {
   content: "";
   transition-property: transform background-color;
   transition-duration: 0.3s;
   transition-delay: 0.3s;
   width: 100%;
   height: 3px;
   position: absolute;
   left: 0;
   background-color: #fff;
}
 .nav__trigger i:before {
   top: -8px;
}
 .nav__trigger i:after {
   top: 8px;

}
 .nav__trigger.active i {
   background-color: transparent;
}
 .nav__trigger.active i:before, .nav__trigger.active i:after {
   top: 0px;
      background-color: #000;
}
 .nav__trigger.active i:before {
   transform: rotate(45deg);
}
 .nav__trigger.active i:after {
   transform: rotate(-45deg);
   background-color: #000;
}
 .nav__list, .nav1__list, .nav2__list, .nav3__list, .nav4__list {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   visibility: hidden;
   transition-property: visibility;
}
 .nav__link, .nav1__link, .nav2__link, .nav3__link, .nav4__link {
   display: block;
   background-color: #9e569a;
   padding: 20px;
   text-decoration: none;
   color: #fff;
   font-weight: bold;
   outline: 1px solid rgba(0, 0, 0, 0.15);
}
 .nav__link:hover, .nav1__link:hover, .nav2__link:hover, .nav3__link:hover, .nav4__link:hover {
   background-color: #df91db;
}
 .nav1__list {
   transition-delay: 1.2s;
   perspective: 150px;
}
 .nav1__list.active {
   transition-delay: 0s;
   visibility: visible;
}
 .nav1__list.active .nav1__link {
   transform: translateY(0px) translateZ(0px);
   opacity: 1;
}
 .nav1__link {
   transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
   transform: translateY(0px) translateZ(-150px);
   width: 50%;
   height: 35%;
   float: left;
   opacity: 0;
}
 .nav1__link:nth-child(1) {
   transition-delay: 0s;
}
 .nav1__link:nth-child(2) {
   transition-delay: 0.2s;
}
 .nav1__link:nth-child(3) {
   transition-delay: 0.4s;
}
 .nav1__link:nth-child(4) {
   transition-delay: 0.6s;
}
 .nav1__link:nth-child(5) {
   transition-delay: 0.8s;
}
 .nav2__list {
   transition-delay: 1.15s;
}
 .nav2__list.active {
   visibility: visible;
   transition-delay: 0s;
}
 .nav2__list.active .nav2__link {
   transform: translateY(0%);
}
 .nav2__link {
   transition: transform 0.35s ease-out;
   width: 25%;
   height: 100%;
   float: left;
}
 .nav2__link:nth-child(1) {
   transition-delay: 0s;
}
 .nav2__link:nth-child(2) {
   transition-delay: 0.2s;
}
 .nav2__link:nth-child(3) {
   transition-delay: 0.4s;
}
 .nav2__link:nth-child(4) {
   transition-delay: 0.6s;
}
 .nav2__link:nth-child(5) {
   transition-delay: 0.8s;
}
 .nav2__link:nth-child(odd) {
   transform: translateY(-100%);
}
 .nav2__link:nth-child(even) {
   transform: translateY(100%);
}
 .nav3__list {
   perspective: 100px;
   transition-delay: 1.05s;
}
 .nav3__list.active {
   visibility: visible;
   transition-delay: 0s;
}
 .nav3__list.active .nav3__link {
   transform: translateX(0) translateZ(0px);
}
 .nav3__link {
   transition: transform 0.45s ease-in;
   transform: translateX(100%) translateZ(50px);
   width: 100%;
   height: 25%;
}
 .nav3__link:nth-child(1) {
   transition-delay: 0s;
}
 .nav3__link:nth-child(2) {
   transition-delay: 0.15s;
}
 .nav3__link:nth-child(3) {
   transition-delay: 0.3s;
}
 .nav3__link:nth-child(4) {
   transition-delay: 0.45s;
}
 .nav3__link:nth-child(5) {
   transition-delay: 0.6s;
}
 .nav4__list {
   transition-delay: 1.2s;
}
 .nav4__list.active {
   transition-delay: 0s;
   visibility: visible;
}
 .nav4__list.active .nav4__link {
   transform: translateX(0) rotate(0deg);
}
 .nav4__link {
   transition: transform 0.4s ease-out;
   transform: translateX(-200%) rotate(180deg);
   width: 50%;
   height: 50%;
   float: left;
}
 .nav4__link:nth-child(1) {
   transition-delay: 0s;
}
 .nav4__link:nth-child(2) {
   transition-delay: 0.2s;
}
 .nav4__link:nth-child(3) {
   transition-delay: 0.4s;
}
 .nav4__link:nth-child(4) {
   transition-delay: 0.6s;
}
 .nav4__link:nth-child(5) {
   transition-delay: 0.8s;
}
 

/*=====  End of Section comment block  ======*/

.all {
   display: flex;
   perspective: 10px;
   transform: perspective(300px) rotateX(20deg);
   will-change: perspective;
   perspective-origin: center center;
   transition: all 1.3s ease-out;
   justify-content: center;
   transform-style: preserve-3d;
}
 .all:hover {
   perspective: 1000px;
   transition: all 1.3s ease-in;
   transform: perspective(10000px) rotateX(0deg);
}
 .all:hover .text {
   opacity: 1;
}
 .all:hover > div {
   opacity: 1;
   transition-delay: 0s;
}
 .all:hover .explainer {
   opacity: 0;
}
 .left, .center, .right, .lefter, .righter {
   width: 200px;
   height: 150px;
   transform-style: preserve-3d;
   border-radius: 10px;
   border: 1px solid #fff;
   box-shadow: 0 0 20px 5px rgba(100, 100, 255, 0.4);
   opacity: 0;
   transition: all 0.3s ease;
   transition-delay: 1s;
   position: relative;
   background-position: center center;
   background-size: contain;
   background-repeat: no-repeat;
   background-color: #58d;
   cursor: pointer;
   background-blend-mode: color-burn;
}
 .left:hover, .center:hover, .right:hover, .lefter:hover, .righter:hover {
   box-shadow: 0 0 30px 10px rgba(100, 100, 255, 0.6);
   background-color: #ccf;
}
 .text {
   transform: translateY(30px);
   opacity: 0;
   transition: all 0.3s ease;
   bottom: 0;
   left: 5px;
   position: absolute;
   will-change: transform;
   color: #fff;
   text-shadow: 0 0 5px rgba(100, 100, 255, 0.6);
}
 .lefter {
   transform: translateX(-60px) translateZ(-50px) rotateY(-10deg);
   background-image: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/organization-512.png);
}
 .left {
   transform: translateX(-30px) translateZ(-25px) rotateY(-5deg);
   background-image: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/creative_draw-512.png);
}
 .center {
   opacity: 1;
   background-image: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png);
}
 .right {
   transform: translateX(30px) translateZ(-25px) rotateY(5deg);
   background-image: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/cloud_weather-512.png);
}
 .righter {
   transform: translateX(60px) translateZ(-50px) rotateY(10deg);
   background-image: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/search-512.png);
}
 .explainer {
   font-weight: 300;
   font-size: 2rem;
   color: #fff;
   transition: all 0.6s ease;
   width: 100%;
   height: 100%;
   background-color: #303050;
   background-image: radial-gradient(circle at center top, #cce, #33a);
   border-radius: 10px;
   text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
   display: flex;
   justify-content: center;
   align-items: center;
}
 .ref {
   background-color: #000;
   background-image: linear-gradient(to bottom, #d80, #c00);
   border-radius: 3px;
   padding: 7px 10px;
   position: absolute;
   font-size: 16px;
   bottom: 10px;
   right: 10px;
   color: #fff;
   text-decoration: none;
   text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}
 .ref::first-letter {
   font-size: 12px;
}
 
 .nav > ul {
    padding-left: 0rem;
}

@media (max-width: 800px) {

            .container {
                height: 55vh !important;
            }
   }

@media (max-width: 1000px) {

            .container {
                height: 65vh !important;
            }
   }


 @media (max-width: 720px) and (max-height: 750px) {

            .container {
                height: 65vh !important;
            }
   }

 



   @media (min-width: 768px){
        .container, .container-md, .container-sm {
              max-width: 90% !important;
          }
}