*,



*::after,



*::before {



-webkit-box-sizing: border-box;



box-sizing: border-box;



}







.hidden {



position: absolute;



overflow: hidden;



width: 0;



height: 0;



pointer-events: none;



}



/*



Icons.



*/



.icon {



display: block;



width: 1.5em;



height: 1.5em;



margin: 0 auto;



fill: currentColor;



}







.message-mobile {



font-size: 0.85em;



display: none;



width: 100%;



padding: 0.5em;



text-align: center;



background: #ff3d53;



}



/*



Header.



*/



.codrops-header {



display: flex;



flex-direction: row;



flex-wrap: wrap;



align-items: center;



width: 100%;



padding: 1.5em 1.5em 4em;



text-align: left;



}







.codrops-header__title {



font-size: 1.15em;



margin: 0;



padding: 0 0.5em;



}







.codrops-header__tagline {



font-size: 0.85em;



width: 100%;



margin: 0;



color: #b0adad;



}







.codrops-header__tagline::before {



content: '> ';



}







.github {



font-size: 0.85em;



font-weight: bold;



margin: 0 0 0 auto;



}







/*



Top Navigation Style.



*/



.codrops-links {



position: relative;



display: flex;



justify-content: center;



text-align: center;



white-space: nowrap;



}







.codrops-links::after {



content: '';



position: absolute;



top: 20%;



left: 50%;



width: 1px;



height: 60%;



background: #b0adad;



transform: rotate3d(0, 0, 1, 22.5deg);



}







.codrops-icon {



display: inline-block;



margin: 0.25em 0 0.25em 0.25em;



padding: 0.35em 0 0.35em 0.35em;



}







.codrops-icon:first-child {



margin: 0.25em 0.25em 0.25em 0;



padding: 0.35em 0.35em 0.35em 0;



}







/*



Content.



*/



.content {



position: relative;



display: flex;



flex-wrap: wrap;



align-items: center;



padding: 0 0 1em;



}







.content:not(:first-child) {



padding: 4em 0;



}







.content.content--padded {



padding: 4em 0 8em;



}







.content__title {



font-size: 0.85em;



position: absolute;



top: 18%;



left: 2em;



width: 5em;



margin: 0.75em 0;



color: #b0adad;



}







/*



Grid.



*/



.grid {



position: relative;



display: flex;



flex-wrap: wrap;



justify-content: center;



align-items: center;



width: 100%;



padding: 0 7em;



perspective: 800px;



perspective-origin: 50% 100%;



}







.grid__item {



position: relative;



display: block;



flex: none;



width: 250px;



margin: 1.5em 2vw;



cursor: default;



transform-style: preserve-3d;



}







.grid__item:hover,



.grid__item:focus {



outline: none;



}







.grid__item--c1,



.grid__item--c1:hover,



.grid__item--c1:focus {



color: #52649e;



}







.grid__item--c2,



.grid__item--c2:hover,



.grid__item--c2:focus {



color: #ee7074;



}







.grid__item--c3,



.grid__item--c3:hover,



.grid__item--c3:focus {



color: #f7f295;



}







.stack {



position: relative;



width: 100%;



height: 200px;



transform-style: preserve-3d;



}







.stack__deco {



position: absolute;



top: 0;



left: 0;



width: 100%;



height: 100%;



background-color: currentColor;



transform-origin: 50% 100%;



}







.stack__deco:first-child {



opacity: 0.2;



}







.stack__deco:nth-child(2) {



opacity: 0.4;



}







.stack__deco:nth-child(3) {



opacity: 0.6;



}







.stack__deco:nth-child(4) {



opacity: 0.8;



}







.stack__figure {



position: relative;



display: flex;



justify-content: center;



align-items: center;



overflow: hidden;



width: 100%;



height: 100%;



cursor: pointer;



transform-origin: 50% 100%;



}







.stack__img {



position: relative;



display: block;



flex: none;



}







.grid__item-caption {



position: relative;



display: flex;



flex-wrap: wrap;



width: 100%;



transform-style: preserve-3d;



}







.grid__item-title {



font-size: 1.15em;



width: 100%;



margin: 1em 0;



text-align: left;



color: #fff;



}







.column {



width: 50%;



padding: 0 0.5em;



opacity: 0;



}







.column--left {



text-align: right;



}







.column--right {



text-align: left;



}







.column__text {



font-size: 0.85em;



display: block;



color: #fff;



}







.column--left .column__text {



font-weight: bold;



}







.column--right .column__text {



color: #b0adad;



}







/*



Individual effects.



*/







/*



Vega.



*/



.grid--effect-vega .column {



opacity: 1;



}







/*



Castor.



*/



.grid--effect-castor .stack__figure,



.grid--effect-castor .stack__deco {



transform-origin: 50% 50%;



}







.grid--effect-castor .column {



opacity: 1;



}







/*



Hamal.



*/



.grid--effect-hamal {

padding:0px;

perspective: none;



}







.grid--effect-hamal .column {



opacity: 1;



}







/*



polaris.



*/



.grid--effect-polaris {



perspective-origin: 100% -100%;



}







.grid--effect-polaris .column {



opacity: 1;



}







/*



Alphard.



*/



.grid--effect-alphard {



perspective: none;



}







.grid--effect-alphard .column {



opacity: 1;



}







.grid--effect-alphard .stack__figure,



.grid--effect-alphard .stack__deco {



transform-origin: 50% 150%;



}







/*



Altair.



*/



.grid--effect-altair {



perspective-origin: 50% -50%;



}







.grid--effect-altair .column {



opacity: 1;



}







.grid--effect-altair .stack__figure,



.grid--effect-altair .stack__deco {



transform-origin: 50% 100%;



}







/*



rigel.



*/



.grid--effect-rigel {



perspective-origin: 50% 100%;



}







.grid--effect-rigel .column {



opacity: 1;



}







/*



Canopus.



*/



.grid--effect-canopus {



perspective-origin: 50% 0%;



}







.grid--effect-canopus .column {



opacity: 1;



}







.grid--effect-canopus .stack__figure,



.grid--effect-canopus .stack__deco {



transform-origin: 50% 100%;



}







/*



pollux.



*/



.grid--effect-pollux {



perspective: 1000px;



perspective-origin: 50% -70%;



}







.grid--effect-pollux .column {



opacity: 1;



}







.grid--effect-pollux .stack__figure,



.grid--effect-pollux .stack__deco {



transform-origin: 50% 50%;



}







.grid--effect-pollux .grid__item-caption > .grid__item-title {



transform-origin: 50% -200%;



}







/*



deneb.



*/



.grid--effect-deneb {



perspective: none;



}







.grid--effect-deneb .stack__figure,



.grid--effect-deneb .stack__deco {



transform-origin: 50% 50%;



}







.grid--effect-deneb .grid__item-caption > .column {



transform-origin: 50% -200%;



}







/*



Related demos.



*/



.content.content--related {



font-weight: bold;



justify-content: center;



min-height: 0;



padding-bottom: 10em;



text-align: center;



background: #5d5d66;



}







.content--related a {



color: #b0adad;



}







.content--related a:hover,



.content--related a:focus {



color: #fff;



}







.content--related p:first-child {



padding: 6em 0 2em;



}







.content--related p {



width: 100%;



color: #37373e;



}







.media-item {



font-size: 0.85em;



display: inline-block;



padding: 1em 2vw;



vertical-align: top;



transition: color 0.3s;



}







.media-item__img {



max-width: 100%;



opacity: 0.6;



transition: opacity 0.3s;



}







.media-item:hover .media-item__img,



.media-item:focus .media-item__img {



opacity: 1;



}







.media-item__title {



font-size: 1em;



margin: 0;



padding: 0.5em;



}



.pt-3d-ih-content .pt-ih-description-block,



.pt-3d-ih-content .pt-ih-heading-block {



width: 100%;



}



.pt-3d-ih-content .pt-title



{



padding: 20px 0 10px;



}



.pt-3d-ih-content .pt-title .heading-title



{



margin: 0;



}



@media screen and (max-width: 42em) {



.codrops-header {



	display: block;



	text-align: center;



}



.github {



	width: 100%;



	margin: 0;



	padding: 0.5em 0;



}



.message-mobile {



	display: block;



}



}



.grid__item-caption .column {



    width: 100%;



    text-align: center;



}