/*!

* # Semantic UI 2.2.4 - Shape
* http://github.com/semantic-org/semantic-ui/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/

/*******************************

Shape

*******************************/

.ui.shape {

position: relative;
vertical-align: top;
display: inline-block;
-webkit-perspective: 2000px;
        perspective: 2000px;
-webkit-transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;

} .ui.shape .sides {

-webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;

} .ui.shape .side {

opacity: 1;
width: 100%;
margin: 0em !important;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;

} .ui.shape .side {

display: none;

} .ui.shape .side * {

-webkit-backface-visibility: visible !important;
        backface-visibility: visible !important;

}

/*******************************

Types

*******************************/

.ui.cube.shape .side {

min-width: 15em;
height: 15em;
padding: 2em;
background-color: #E6E6E6;
color: rgba(0, 0, 0, 0.87);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);

} .ui.cube.shape .side > .content {

width: 100%;
height: 100%;
display: table;
text-align: center;
-webkit-user-select: text;
   -moz-user-select: text;
    -ms-user-select: text;
        user-select: text;

} .ui.cube.shape .side > .content > div {

display: table-cell;
vertical-align: middle;
font-size: 2em;

}

/*******************************

Variations

*******************************/

.ui.text.shape.animating .sides {

position: static;

} .ui.text.shape .side {

white-space: nowrap;

} .ui.text.shape .side > * {

white-space: normal;

}

/*******************************

States

*******************************/

/*————–

Loading

—————*/

.ui.loading.shape {

position: absolute;
top: -9999px;
left: -9999px;

}

/*————–

Animating

—————*/

.ui.shape .animating.side {

position: absolute;
top: 0px;
left: 0px;
display: block;
z-index: 100;

} .ui.shape .hidden.side {

opacity: 0.6;

}

/*————–

CSS

—————*/

.ui.shape.animating .sides {

position: absolute;

} .ui.shape.animating .sides {

-webkit-transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;

} .ui.shape.animating .side {

-webkit-transition: opacity 0.6s ease-in-out;
transition: opacity 0.6s ease-in-out;

}

/*————–

Active

—————*/

.ui.shape .active.side {

display: block;

}

/*******************************

Theme Overrides

*******************************/

/*******************************

User Overrides

*******************************/