.site-content a {
outline: 0;
text-decoration: none;
}
.site-content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.royal-image, .info-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.site-content h1, h2, h3, h4, h5, h6, {
margin: 0;
padding: 0;
list-style: none;
}
.site-content h1, h2, h3, h4, h5, h6 {
font-weight: normal;
} .clearfix:after, .row:after, .group:after {
visibility: hidden;
display: block;
font-size: 0;
content: "";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
.clearfix {
display: block;
}
.royal-row {
display: block;
position: relative;
float: left;
width: 100%;
} .group {
display: block;
position: relative;
float: left;
width: 100%;
height: auto;
}
@media screen and (max-width: 720px) {
.group .col-xm-1, .group .col-xm-2, .group .col-xm-3, .group .col-xm-4, .group .col-xm-5, .group .col-xm-6, .group .col-xm-7, .group .col-xm-8, .group .col-xm-9, .group .col-xm-10, .group .col-xm-11, .group .col-xm-12 {
width: 100%;
margin: 1.6% 0;
}
.group .col-1, .group .col-2, .group .col-3, .group .col-4, .group .col-5, .group .col-6, .group .col-7, .group .col-8, .group .col-9, .group .col-10, .group .col-11, .group .col-12 {
width: 100%;
}
}
@media screen and (max-width: 520px) {
.col-xm-1, .col-xm-2, .col-xm-3, .col-xm-4, .col-xm-5, .col-xm-6, .col-xm-7, .col-xm-8, .col-xm-9, .col-xm-10, .col-xm-11, .col-xm-12 {
width: 100%;
margin: 1.6% 0;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
width: 100%;
}
}  .box-full-width {
float: left;
width: 100% !important;
}
.box-cover {
display: block;
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box-full {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100vh;
} .z-index-1 {
z-index: 1;
box-shadow: 0 1.1px 1.5px 1.5px rgba(19, 19, 19, 0.1);
}
.z-index-2 {
z-index: 2;
box-shadow: 0 1.1px 2.5px 2.5px rgba(19, 19, 19, 0.2);
}
.z-index-3 {
z-index: 3;
box-shadow: 0 1.1px 3.5px 3.5px rgba(19, 19, 19, 0.3);
}
.z-index-4 {
z-index: 4;
box-shadow: 0 1.1px 4.5px 4.5px rgba(19, 19, 19, 0.4);
}
.z-index-5 {
z-index: 5;
box-shadow: 0 1.1px 5.5px 5.5px rgba(19, 19, 19, 0.5);
}
.z-index-6 {
z-index: 6;
box-shadow: 0 1.1px 6.5px 6.5px rgba(19, 19, 19, 0.6);
}
.z-index-7 {
z-index: 7;
box-shadow: 0 1.1px 7.5px 7.5px rgba(19, 19, 19, 0.7);
}
.z-index-8 {
z-index: 8;
box-shadow: 0 1.1px 8.5px 8.5px rgba(19, 19, 19, 0.8);
}
.z-index-9 {
z-index: 9;
box-shadow: 0 1.1px 9.5px 9.5px rgba(19, 19, 19, 0.9);
}
.z-index-10 {
z-index: 10;
box-shadow: 0 1.1px 10.5px 10.5px #131313;
} .border-radius-2px,
.border-radius-2px:before,
.border-radius-2px:after {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
.border-radius-3px,
.border-radius-3px:before,
.border-radius-3px:after {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.border-radius-4px,
.border-radius-4px:before,
.border-radius-4px:after {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.border-radius-5px,
.border-radius-5px:before,
.border-radius-5px:after {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.border-radius-6px,
.border-radius-6px:before,
.border-radius-6px:after {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
}
.border-radius-7px,
.border-radius-7px:before,
.border-radius-7px:after {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
}
.border-radius-8px,
.border-radius-8px:before,
.border-radius-8px:after {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
}
.border-radius-9px,
.border-radius-9px:before,
.border-radius-9px:after {
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
-ms-border-radius: 9px;
-o-border-radius: 9px;
border-radius: 9px;
}
.border-radius-10px,
.border-radius-10px:before,
.border-radius-10px:after {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
} .transition-1ms {
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-ms-transition: 0.1s;
-o-transition: 0.1s;
transition: 0.1s;
}
.transition-2ms {
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.transition-3ms {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.transition-4ms {
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
.transition-5ms {
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.transition-6ms {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-ms-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.transition-7ms {
-webkit-transition: 0.7s;
-moz-transition: 0.7s;
-ms-transition: 0.7s;
-o-transition: 0.7s;
transition: 0.7s;
}
.transition-8ms {
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-ms-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
}
.transition-9ms {
-webkit-transition: 0.9s;
-moz-transition: 0.9s;
-ms-transition: 0.9s;
-o-transition: 0.9s;
transition: 0.9s;
}
.transition-10ms {
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
} .pull-left {
float: left;
}
.pull-right {
float: right;
}
.pull-center-h {
float: left;
left: 50%;
position: relative;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.pull-center-v {
float: left;
top: 50%;
position: relative;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.rdvib-center {
float: left;
left: 50%;
top: 50%;
position: relative;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.text-center {
text-align: center;
} .margin-left-5px {
margin-left: 5px;
}
.margin-right-5px {
margin-right: 5px;
}
.margin-top-5px {
margin-top: 5px;
}
.margin-bottom-5px {
margin-bottom: 5px;
}
.margin-5px {
margin: 5px;
}
.margin-left-10px {
margin-left: 10px;
}
.margin-right-10px {
margin-right: 10px;
}
.margin-top-10px {
margin-top: 10px;
}
.margin-bottom-10px {
margin-bottom: 10px;
}
.margin-10px {
margin: 10px;
}
.margin-20px {
margin: 20px;
}
.margin-30px {
margin: 30px;
}
.margin-40px {
margin: 40px;
}
.margin-50px {
margin: 50px;
} .padding-left-5px {
padding-left: 5px;
}
.padding-right-5px {
padding-right: 5px;
}
.padding-top-5px {
padding-top: 5px;
}
.padding-bottom-5px {
padding-bottom: 5px;
}
.padding-5px {
padding: 5px;
}
.padding-left-10px {
padding-left: 10px;
}
.padding-right-10px {
padding-right: 10px;
}
.padding-top-10px {
padding-top: 10px;
}
.padding-bottom-10px {
padding-bottom: 10px;
}
.padding-10px {
padding: 10px;
}
.padding-20px {
padding: 20px;
}
.padding-30px {
padding: 30px;
}
.padding-40px {
padding: 40px;
}
.padding-50px {
padding: 50px;
} .bg-color {
background: #131313;
}
.bg-color-text {
color: #131313;
}
.text-color {
color: #888888;
}
.text-color-dark {
color: black;
}
.text-color-light {
color: white;
}
.turquoise-color {
background: #47c9af;
}
.turquoise-color-text {
color: #47c9af;
}
.green-sea-color {
background: #16a085;
}
.green-sea-color-text {
color: #16a085;
}
.emerald-color {
background: #2ecc71;
}
.emerald-color-text {
color: #2ecc71;
}
.nephritis-color {
background: #27ae60;
}
.nephritis-color-text {
color: #27ae60;
}
.peter-river-color {
background: #5cace2;
}
.peter-river-color-text {
color: #5cace2;
}
.belize-hole-color {
background: #5299c7;
}
.belize-hole-color-text {
color: #5299c7;
}
.amethyst-color {
background: #af7ac4;
}
.amethyst-color-text {
color: #af7ac4;
}
.wisteria-color {
background: #8e44ad;
}
.wisteria-color-text {
color: #8e44ad;
}
.asphalt-color {
background: #34495e;
}
.asphalt-color-text {
color: #34495e;
}
.mid-blue-color {
background: #566472;
}
.mid-blue-color-text {
color: #566472;
}
.sun-flower-color {
background: #f1c40f;
}
.sun-flower-color-text {
color: #f1c40f;
}
.orange-color {
background: #f39c12;
}
.orange-color-text {
color: #f39c12;
}
.carrot-color {
background: #eb974e;
}
.carrot-color-text {
color: #eb974e;
}
.pumpkin-color {
background: #d35400;
}
.pumpkin-color-text {
color: #d35400;
}
.alizarin-color {
background: #e74c3c;
}
.alizarin-color-text {
color: #e74c3c;
}
.pomegrante-color {
background: #c1382a;
}
.pomegrante-color-text {
color: #c1382a;
}
.clouds-color {
background: #eff3f3;
}
.clouds-color-text {
color: #eff3f3;
}
.silver-color {
background: #bdc3c7;
}
.silver-color-text {
color: #bdc3c7;
}
.concrete-color {
background: #aab7b7;
}
.concrete-color-text {
color: #aab7b7;
}
.asbestos-color {
background: #98a3a3;
}
.asbestos-color-text {
color: #98a3a3;
} .royal-item {
position: relative;
width: 100%;
}
.royal-item:before {
content: "";
display: block;
padding-top: 100%;
}
.royal-hov-content {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.royal-item.round, .royal-item.round .royal-hov-content, .royal-hov-content.round {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.royal-item.round .royal-image, .royal-item.round .info-box, .royal-item.round .royal-hov-content .royal-image, .royal-item.round .royal-hov-content .info-box, .royal-hov-content.round .royal-image, .royal-hov-content.round .info-box {
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.royal-item.round.focus-dark, .royal-item.round .royal-hov-content.focus-dark, .royal-hov-content.round.focus-dark {
border: 10px solid rgba(255, 255, 255, 0.15);
}
.royal-item.round.focus-light, .royal-item.round .royal-hov-content.focus-light, .royal-hov-content.round.focus-light {
border: 10px solid rgba(0, 0, 0, 0.3);
} .btn-small {
width: 100px;
max-width: 100%;
height: 25px;
line-height: 25px;
}
.btn-mini {
width: 150px;
max-width: 100%;
height: 35px;
line-height: 35px;
}
.btn-normal {
width: 200px;
max-width: 100%;
height: 40px;
line-height: 40px;
}
.btn-big {
width: 320px;
max-width: 100%;
height: 50px;
line-height: 50px;
} .button {
display: block;
position: relative;
cursor: pointer;
border: none;
outline: none;
color: white;
text-align: center;
}
.button:after {
content: ' ';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: none;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.button:hover:after {
background: rgba(255, 255, 255, 0.15);
}
.button:active:after {
background: rgba(0, 0, 0, 0.15);
}
.button:active.z-index-1 {
z-index: 1;
box-shadow: 0 1.1px 1px 1px rgba(19, 19, 19, 0.1);
}
.button:active.z-index-2 {
z-index: 2;
box-shadow: 0 1.1px 1.5px 1.5px rgba(19, 19, 19, 0.2);
}
.button:active.z-index-3 {
z-index: 3;
box-shadow: 0 1.1px 2px 2px rgba(19, 19, 19, 0.3);
}
.button:active.z-index-4 {
z-index: 4;
box-shadow: 0 1.1px 2.5px 2.5px rgba(19, 19, 19, 0.4);
}
.button:active.z-index-5 {
z-index: 5;
box-shadow: 0 1.1px 3px 3px rgba(19, 19, 19, 0.5);
}
.button:active.z-index-6 {
z-index: 6;
box-shadow: 0 1.1px 3.5px 3.5px rgba(19, 19, 19, 0.6);
}
.button:active.z-index-7 {
z-index: 7;
box-shadow: 0 1.1px 4px 4px rgba(19, 19, 19, 0.7);
}
.button:active.z-index-8 {
z-index: 8;
box-shadow: 0 1.1px 4.5px 4.5px rgba(19, 19, 19, 0.8);
}
.button:active.z-index-9 {
z-index: 9;
box-shadow: 0 1.1px 5px 5px rgba(19, 19, 19, 0.9);
}
.button:active.z-index-10 {
z-index: 10;
box-shadow: 0 1.1px 5.5px 5.5px #131313;
}
.button.pulse:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: 2px solid rgba(255, 255, 255, 0.3);
-webkit-animation: pulse-button 3s alternate infinite;
-moz-animation: pulse-button 3s alternate infinite;
-ms-animation: pulse-button 3s alternate infinite;
-o-animation: pulse-button 3s alternate infinite;
animation: pulse-button 3s alternate infinite;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
z-index: -1;
}
@keyframes pulse-button {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
filter: alpha(opacity=0);
-wekbit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}
100% {
-webkit-transform: scale(1.5, 2);
-moz-transform: scale(1.5, 2);
-ms-transform: scale(1.5, 2);
-o-transform: scale(1.5, 2);
transform: scale(1.5, 2);
filter: alpha(opacity=100);
-wekbit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
}
.info-box .rdvib-center p , .info-box .rdvib-center h2{
margin: 0;
}.separator {
display: block;
position: relative;
width: 100%;
margin: 5px 0;
}
.separator:before {
content: '';
display: block;
position: relative;
margin: 0 auto;
width: 65%;
height: 1px;
background: rgba(255, 255, 255, 0.6);
} .wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.container {
display: block;
position: relative;
width: 80%;
max-width: 1200px;
margin: 0 auto;
} .site-header .site-header-content {
max-width: 1400px;
}
.site-header .by-author {
display: block;
position: absolute;
right: 0;
top: 40%;
font-size: 14px;
z-index: 99999;
}
.site-header .proj-version {
display: block;
position: absolute;
bottom: 20px;
right: 20px;
height: auto;
color: rgba(255, 255, 255, 0.5);
z-index: 10;
cursor: pointer;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.site-header .proj-version:hover {
color: white;
}
.site-header .head-info {
height: 100%;
}
.site-header .go-to-content {
position: absolute;
bottom: 20px;
height: 50px;
float: left;
}
.site-header .go-to-content .arrow-icon {
display: block;
position: absolute;
bottom: 0;
color: #748097;
-webkit-animation: bouncing 0.8s linear 0s alternate infinite;
-moz-animation: bouncing 0.8s linear 0s alternate infinite;
-ms-animation: bouncing 0.8s linear 0s alternate infinite;
-o-animation: bouncing 0.8s linear 0s alternate infinite;
animation: bouncing 0.8s linear 0s alternate infinite;
}
.site-header .go-to-content .arrow-icon:hover {
color: white;
}
@keyframes bouncing {
0% {
bottom: 0%;
}
100% {
bottom: 50%;
}
} .go-to-top {
display: block;
position: fixed;
width: 45px;
height: 45px;
bottom: -70px;
right: 20px;
background: rgba(0, 0, 0, 0.4);
}
.go-to-top.active {
bottom: 20px;
} .pop-up-alert {
display: none;
}
.pop-up-alert .close-pop-up {
cursor: pointer;
line-height: 35px;
}
.pop-up-alert .close-pop-up:hover {
font-size: 35px;
color: #e74c3c;
}
.pop-up-alert.active {
z-index: 999999;
display: block;
position: fixed !important;
background-color: rgba(0, 0, 0, 0.95);
} .effect-section {
margin: 30px 0;
}
.effect-section .info-effect {
display: block;
position: relative;
width: 100%;
margin: 40px 0 20px 0;
}
.effect-section .info-effect p {
line-height: 40px;
}
.effect-section .info-effect .separator:before {
width: 45%;
}
.effect-section:first-child {
margin-top: 80px;
}
.effect-section .head-section {
display: block;
position: relative;
}
.effect-section .head-section h2 {
font-size: 2em;
line-height: 2.2em;
margin-bottom: 10px;
}
.effect-section .head-section i {
display: block;
width: 100%;
margin-top: 10px;
}
.buy-it {
display: block;
position: relative;
height: 400px;
width: 100%;
float: left;
background: pink;
}
.buy-it .button {
font-size: 20px;
}
.browsers-compatibility .head-section {
margin: 40px 0;
}
.browsers-compatibility .col-xm-2 {
padding: 10px 0;
}
.browsers-compatibility .col-xm-2 span {
display: block;
position: relative;
top: 5px;
font-size: 14px;
padding: 5px 8px;
text-align: center;
background: rgba(0, 0, 0, 0.3);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
filter: alpha(opacity=0);
-wekbit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.browsers-compatibility .col-xm-2 .fa {
height: 80px;
z-index: 0;
text-align: center;
cursor: pointer;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.browsers-compatibility .col-xm-2:hover span {
filter: alpha(opacity=100);
-wekbit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.browsers-compatibility .col-xm-2:hover .fa {
color: #5cace2;
} .site-content .row .royal-image img {
border-radius: 0;
height: 100%;
width: 100%;
}
.social-media a {color: #d0d0d0;}
.social-media a:active {
color: #333333;
}
.social-media a:hover {
color: white !important;
}.royal-image, .info-box {
display: block;
position: absolute;
width: 100%;
height: 100%;
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
zoom: 1;
}
.royal-image img, .info-box img {
display: block;
position: relative;
max-width: 100%;
max-height: 100%;
} .royal-trans-animation {
display: block;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.royal-trans-animation .info-box {
background: #16a085;
}
.royal-trans-animation.top .royal-image {
top: 0;
}
.royal-trans-animation.top .info-box {
top: 100%;
}
.royal-trans-animation.top:hover .royal-image {
top: -100%;
}
.royal-trans-animation.top:hover .info-box {
top: 0;
}
.royal-trans-animation.bottom .royal-image {
bottom: 0;
}
.royal-trans-animation.bottom .info-box {
bottom: 100%;
}
.royal-trans-animation.bottom:hover .royal-image {
bottom: -100%;
}
.royal-trans-animation.bottom:hover .info-box {
bottom: 0;
}
.royal-trans-animation.left .royal-image {
left: 0;
}
.royal-trans-animation.left .info-box {
left: 100%;
}
.royal-trans-animation.left:hover .royal-image {
left: -100%;
}
.royal-trans-animation.left:hover .info-box {
left: 0;
}
.royal-trans-animation.right .royal-image {
right: 0;
}
.royal-trans-animation.right .info-box {
right: 100%;
}
.royal-trans-animation.right:hover .royal-image {
right: -100%;
}
.royal-trans-animation.right:hover .info-box {
right: 0;
} .royal-fade-in-animation {
display: block;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.royal-fade-in-animation .royal-image, .royal-fade-in-animation .info-box {
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #e6e6e6;
}
.royal-fade-in-animation .royal-image {
z-index: 0;
}
.royal-fade-in-animation .info-box {
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
filter: alpha(opacity=0);
-wekbit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}
.royal-fade-in-animation:hover .info-box {
filter: alpha(opacity=100);
-wekbit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
} .royal-overtrans-animation {
display: block;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.royal-overtrans-animation .royal-image, .royal-overtrans-animation .info-box {
color: #e6e6e6;
}
.royal-overtrans-animation .royal-image a, .royal-overtrans-animation .royal-image a:active, .royal-overtrans-animation .royal-image a:focus, .royal-overtrans-animation .info-box a, .royal-overtrans-animation .info-box a:active, .royal-overtrans-animation .info-box a:focus {
color: #999999;
}
.royal-overtrans-animation .royal-image a:hover, .royal-overtrans-animation .royal-image a:active:hover, .royal-overtrans-animation .royal-image a:focus:hover, .royal-overtrans-animation .info-box a:hover, .royal-overtrans-animation .info-box a:active:hover, .royal-overtrans-animation .info-box a:focus:hover {
color: #f2f2f2;
}
.royal-overtrans-animation .info-box {
background-color: rgba(0, 0, 0, 0.6);
}
.royal-overtrans-animation.top .royal-image {
top: 0;
}
.royal-overtrans-animation.top .info-box {
top: 100%;
}
.royal-overtrans-animation.top:hover .info-box {
top: 0;
}
.royal-overtrans-animation.bottom .royal-image {
bottom: 0;
}
.royal-overtrans-animation.bottom .info-box {
bottom: 100%;
}
.royal-overtrans-animation.bottom:hover .info-box {
bottom: 0;
}
.royal-overtrans-animation.left .royal-image {
left: 0;
}
.royal-overtrans-animation.left .info-box {
left: 100%;
}
.royal-overtrans-animation.left:hover .info-box {
left: 0;
}
.royal-overtrans-animation.right .royal-image {
right: 0;
}
.royal-overtrans-animation.right .info-box {
right: 100%;
}
.royal-overtrans-animation.right:hover .info-box {
right: 0;
} .royal-zoom-out-animation {
display: block;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.royal-zoom-out-animation .royal-image, .royal-zoom-out-animation .info-box {
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #e6e6e6;
}
.royal-zoom-out-animation .royal-image a, .royal-zoom-out-animation .royal-image a:active, .royal-zoom-out-animation .royal-image a:focus, .royal-zoom-out-animation .info-box a, .royal-zoom-out-animation .info-box a:active, .royal-zoom-out-animation .info-box a:focus {
color: #999999;
}
.royal-zoom-out-animation .royal-image a:hover, .royal-zoom-out-animation .royal-image a:active:hover, .royal-zoom-out-animation .royal-image a:focus:hover, .royal-zoom-out-animation .info-box a:hover, .royal-zoom-out-animation .info-box a:active:hover, .royal-zoom-out-animation .info-box a:focus:hover {
color: #f2f2f2;
}
.royal-zoom-out-animation .royal-image {
z-index: 0;
}
.royal-zoom-out-animation .info-box {
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
filter: alpha(opacity=0);
-wekbit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}
.royal-zoom-out-animation:hover .info-box {
filter: alpha(opacity=100);
-wekbit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.royal-zoom-out-animation:hover .royal-image {
-webkit-transform: translateZ(0) scale(1.15, 1.15);
-moz-transform: translateZ(0) scale(1.15, 1.15);
-ms-transform: translateZ(0) scale(1.15, 1.15);
-o-transform: translateZ(0) scale(1.15, 1.15);
transform: translateZ(0) scale(1.15, 1.15);
} .royal-flip-effect-animation {
display: block;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.royal-flip-effect-animation .royal-image, .royal-flip-effect-animation .info-box {
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #e6e6e6;
}
.royal-flip-effect-animation .royal-image a, .royal-flip-effect-animation .royal-image a:active, .royal-flip-effect-animation .royal-image a:focus, .royal-flip-effect-animation .info-box a, .royal-flip-effect-animation .info-box a:active, .royal-flip-effect-animation .info-box a:focus {
color: #999999;
}
.royal-flip-effect-animation .royal-image a:hover, .royal-flip-effect-animation .royal-image a:active:hover, .royal-flip-effect-animation .royal-image a:focus:hover, .royal-flip-effect-animation .info-box a:hover, .royal-flip-effect-animation .info-box a:active:hover, .royal-flip-effect-animation .info-box a:focus:hover {
color: #f2f2f2;
}
.royal-flip-effect-animation .royal-image {
z-index: 0;
}
.royal-flip-effect-animation.top .info-box {
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transform: translateZ(0) rotateX(-180deg);
-moz-transform: translateZ(0) rotateX(-180deg);
-ms-transform: translateZ(0) rotateX(-180deg);
-o-transform: translateZ(0) rotateX(-180deg);
transform: translateZ(0) rotateX(-180deg);
}
.royal-flip-effect-animation.top:hover .royal-image {
-webkit-transform: translateZ(0) rotateX(180deg);
-moz-transform: translateZ(0) rotateX(180deg);
-ms-transform: translateZ(0) rotateX(180deg);
-o-transform: translateZ(0) rotateX(180deg);
transform: translateZ(0) rotateX(180deg);
}
.royal-flip-effect-animation.top:hover .info-box {
-webkit-transform: translateZ(0) rotateX(0deg);
-moz-transform: translateZ(0) rotateX(0deg);
-ms-transform: translateZ(0) rotateX(0deg);
-o-transform: translateZ(0) rotateX(0deg);
transform: translateZ(0) rotateX(0deg);
}
.royal-flip-effect-animation.bottom .info-box {
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transform: translateZ(0) rotateX(180deg);
-moz-transform: translateZ(0) rotateX(180deg);
-ms-transform: translateZ(0) rotateX(180deg);
-o-transform: translateZ(0) rotateX(180deg);
transform: translateZ(0) rotateX(180deg);
}
.royal-flip-effect-animation.bottom:hover .royal-image {
-webkit-transform: translateZ(0) rotateX(-180deg);
-moz-transform: translateZ(0) rotateX(-180deg);
-ms-transform: translateZ(0) rotateX(-180deg);
-o-transform: translateZ(0) rotateX(-180deg);
transform: translateZ(0) rotateX(-180deg);
}
.royal-flip-effect-animation.bottom:hover .info-box {
-webkit-transform: translateZ(0) rotateX(0deg);
-moz-transform: translateZ(0) rotateX(0deg);
-ms-transform: translateZ(0) rotateX(0deg);
-o-transform: translateZ(0) rotateX(0deg);
transform: translateZ(0) rotateX(0deg);
}
.royal-flip-effect-animation.left .info-box {
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transform: translateZ(0) rotateY(180deg);
-moz-transform: translateZ(0) rotateY(180deg);
-ms-transform: translateZ(0) rotateY(180deg);
-o-transform: translateZ(0) rotateY(180deg);
transform: translateZ(0) rotateY(180deg);
}
.royal-flip-effect-animation.left:hover .royal-image {
-webkit-transform: translateZ(0) rotateY(-180deg);
-moz-transform: translateZ(0) rotateY(-180deg);
-ms-transform: translateZ(0) rotateY(-180deg);
-o-transform: translateZ(0) rotateY(-180deg);
transform: translateZ(0) rotateY(-180deg);
}
.royal-flip-effect-animation.left:hover .info-box {
-webkit-transform: translateZ(0) rotateY(0deg);
-moz-transform: translateZ(0) rotateY(0deg);
-ms-transform: translateZ(0) rotateY(0deg);
-o-transform: translateZ(0) rotateY(0deg);
transform: translateZ(0) rotateY(0deg);
}
.royal-flip-effect-animation.right .info-box {
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transform: translateZ(0) rotateY(-180deg);
-moz-transform: translateZ(0) rotateY(-180deg);
-ms-transform: translateZ(0) rotateY(-180deg);
-o-transform: translateZ(0) rotateY(-180deg);
transform: translateZ(0) rotateY(-180deg);
}
.royal-flip-effect-animation.right:hover .royal-image {
-webkit-transform: translateZ(0) rotateY(180deg);
-moz-transform: translateZ(0) rotateY(180deg);
-ms-transform: translateZ(0) rotateY(180deg);
-o-transform: translateZ(0) rotateY(180deg);
transform: translateZ(0) rotateY(180deg);
}
.royal-flip-effect-animation.right:hover .info-box {
-webkit-transform: translateZ(0) rotateY(0deg);
-moz-transform: translateZ(0) rotateY(0deg);
-ms-transform: translateZ(0) rotateY(0deg);
-o-transform: translateZ(0) rotateY(0deg);
transform: translateZ(0) rotateY(0deg);
} .royal-bubble-effect {
display: block;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.royal-bubble-effect .royal-image, .royal-bubble-effect .info-box {
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #e6e6e6;
}
.royal-bubble-effect .royal-image a, .royal-bubble-effect .royal-image a:active, .royal-bubble-effect .royal-image a:focus, .royal-bubble-effect .info-box a, .royal-bubble-effect .info-box a:active, .royal-bubble-effect .info-box a:focus {
color: #999999;
}
.royal-bubble-effect .royal-image a:hover, .royal-bubble-effect .royal-image a:active:hover, .royal-bubble-effect .royal-image a:focus:hover, .royal-bubble-effect .info-box a:hover, .royal-bubble-effect .info-box a:active:hover, .royal-bubble-effect .info-box a:focus:hover {
color: #f2f2f2;
}
.royal-bubble-effect .royal-image {
z-index: 1;
}
.royal-bubble-effect .info-box {
z-index: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.royal-bubble-effect.round, .royal-bubble-effect .round {
overflow: visible !important;
}
.royal-bubble-effect.top:hover .royal-image {
z-index: 2;
}
.royal-bubble-effect.top:hover .info-box {
padding-top: 15%;
}
.royal-bubble-effect.top:hover .royal-image {
-webkit-transform: translateZ(0) translateY(-60%) scale(0.5, 0.5);
-moz-transform: translateZ(0) translateY(-60%) scale(0.5, 0.5);
-ms-transform: translateZ(0) translateY(-60%) scale(0.5, 0.5);
-o-transform: translateZ(0) translateY(-60%) scale(0.5, 0.5);
transform: translateZ(0) translateY(-60%) scale(0.5, 0.5);
}
.royal-bubble-effect.bottom:hover .royal-image {
z-index: 2;
}
.royal-bubble-effect.bottom:hover .info-box {
padding-bottom: 15%;
}
.royal-bubble-effect.bottom:hover .royal-image {
-webkit-transform: translateZ(0) translateY(60%) scale(0.5, 0.5);
-moz-transform: translateZ(0) translateY(60%) scale(0.5, 0.5);
-ms-transform: translateZ(0) translateY(60%) scale(0.5, 0.5);
-o-transform: translateZ(0) translateY(60%) scale(0.5, 0.5);
transform: translateZ(0) translateY(60%) scale(0.5, 0.5);
}
.royal-bubble-effect.left:hover .royal-image {
z-index: 2;
}
.royal-bubble-effect.left:hover .info-box {
padding-left: 15%;
}
.royal-bubble-effect.left:hover .royal-image {
-webkit-transform: translateZ(0) translateX(-60%) scale(0.5, 0.5);
-moz-transform: translateZ(0) translateX(-60%) scale(0.5, 0.5);
-ms-transform: translateZ(0) translateX(-60%) scale(0.5, 0.5);
-o-transform: translateZ(0) translateX(-60%) scale(0.5, 0.5);
transform: translateZ(0) translateX(-60%) scale(0.5, 0.5);
}
.royal-bubble-effect.right:hover .royal-image {
z-index: 2;
}
.royal-bubble-effect.right:hover .info-box {
padding-right: 15%;
}
.royal-bubble-effect.right:hover .royal-image {
-webkit-transform: translateZ(0) translateX(60%) scale(0.5, 0.5);
-moz-transform: translateZ(0) translateX(60%) scale(0.5, 0.5);
-ms-transform: translateZ(0) translateX(60%) scale(0.5, 0.5);
-o-transform: translateZ(0) translateX(60%) scale(0.5, 0.5);
transform: translateZ(0) translateX(60%) scale(0.5, 0.5);
} .royal-royal-zoom-in-effect {
display: block;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.royal-zoom-in-effect .royal-image, .royal-zoom-in-effect .info-box {
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #e6e6e6;
}
.royal-zoom-in-effect .royal-image a, .royal-zoom-in-effect .royal-image a:active, .royal-zoom-in-effect .royal-image a:focus, .royal-zoom-in-effect .info-box a, .royal-zoom-in-effect .info-box a:active, .royal-zoom-in-effect .info-box a:focus {
color: #999999;
}
.royal-zoom-in-effect .royal-image a:hover, .royal-zoom-in-effect .royal-image a:active:hover, .royal-zoom-in-effect .royal-image a:focus:hover, .royal-zoom-in-effect .info-box a:hover, .royal-zoom-in-effect .info-box a:active:hover, .royal-zoom-in-effect .info-box a:focus:hover {
color: #f2f2f2;
}
.royal-zoom-in-effect .royal-image {
z-index: 0;
}
.royal-zoom-in-effect .info-box {
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transform: translateZ(0) scale(1, 0);
-moz-transform: translateZ(0) scale(1, 0);
-ms-transform: translateZ(0) scale(1, 0);
-o-transform: translateZ(0) scale(1, 0);
transform: translateZ(0) scale(1, 0);
filter: alpha(opacity=0);
-wekbit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}
.royal-zoom-in-effect:hover .royal-image {
-webkit-transform: translateZ(0) scale(1.1, 1.1);
-moz-transform: translateZ(0) scale(1.1, 1.1);
-ms-transform: translateZ(0) scale(1.1, 1.1);
-o-transform: translateZ(0) scale(1.1, 1.1);
transform: translateZ(0) scale(1.1, 1.1);
}
.royal-zoom-in-effect:hover .info-box {
-webkit-transform: translateZ(0) scale(1, 1);
-moz-transform: translateZ(0) scale(1, 1);
-ms-transform: translateZ(0) scale(1, 1);
-o-transform: translateZ(0) scale(1, 1);
transform: translateZ(0) scale(1, 1);
filter: alpha(opacity=100);
-wekbit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
} .royal-square-spin-effect {
display: block;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.royal-square-spin-effect .info-box {
filter: alpha(opacity=0);
-wekbit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transform: translateZ(0) scale(2, 2);
-moz-transform: translateZ(0) scale(2, 2);
-ms-transform: translateZ(0) scale(2, 2);
-o-transform: translateZ(0) scale(2, 2);
transform: translateZ(0) scale(2, 2);
}
.royal-square-spin-effect .info-box:after, .royal-square-spin-effect .info-box:before {
content: "";
display: block !important;
position: absolute;
visibility: visible !important;
background-color: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -1;
-webkit-transition: 0.6s ease-in;
-moz-transition: 0.6s ease-in;
-ms-transition: 0.6s ease-in;
-o-transition: 0.6s ease-in;
transition: 0.6s ease-in;
}
.royal-square-spin-effect.vertical .info-box:before {
-webkit-transform: translateZ(0) translateX(100%) rotateZ(180deg);
-moz-transform: translateZ(0) translateX(100%) rotateZ(180deg);
-ms-transform: translateZ(0) translateX(100%) rotateZ(180deg);
-o-transform: translateZ(0) translateX(100%) rotateZ(180deg);
transform: translateZ(0) translateX(100%) rotateZ(180deg);
}
.royal-square-spin-effect.vertical .info-box:after {
-webkit-transform: translateZ(0) translateX(-100%) rotateZ(180deg);
-moz-transform: translateZ(0) translateX(-100%) rotateZ(180deg);
-ms-transform: translateZ(0) translateX(-100%) rotateZ(180deg);
-o-transform: translateZ(0) translateX(-100%) rotateZ(180deg);
transform: translateZ(0) translateX(-100%) rotateZ(180deg);
}
.royal-square-spin-effect.vertical:hover .info-box {
filter: alpha(opacity=100);
-wekbit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transform: translateZ(0) scale(1, 1);
-moz-transform: translateZ(0) scale(1, 1);
-ms-transform: translateZ(0) scale(1, 1);
-o-transform: translateZ(0) scale(1, 1);
transform: translateZ(0) scale(1, 1);
}
.royal-square-spin-effect.vertical:hover .info-box:before {
-webkit-transform: translateZ(0) translateX(50%) rotateZ(-90deg);
-moz-transform: translateZ(0) translateX(50%) rotateZ(-90deg);
-ms-transform: translateZ(0) translateX(50%) rotateZ(-90deg);
-o-transform: translateZ(0) translateX(50%) rotateZ(-90deg);
transform: translateZ(0) translateX(50%) rotateZ(-90deg);
}
.royal-square-spin-effect.vertical:hover .info-box:after {
-webkit-transform: translateZ(0) translateX(-50%) rotateZ(-90deg);
-moz-transform: translateZ(0) translateX(-50%) rotateZ(-90deg);
-ms-transform: translateZ(0) translateX(-50%) rotateZ(-90deg);
-o-transform: translateZ(0) translateX(-50%) rotateZ(-90deg);
transform: translateZ(0) translateX(-50%) rotateZ(-90deg);
}
.royal-square-spin-effect.horizontal .info-box:before {
-webkit-transform: translateZ(0) translateY(100%) rotateZ(180deg);
-moz-transform: translateZ(0) translateY(100%) rotateZ(180deg);
-ms-transform: translateZ(0) translateY(100%) rotateZ(180deg);
-o-transform: translateZ(0) translateY(100%) rotateZ(180deg);
transform: translateZ(0) translateY(100%) rotateZ(180deg);
}
.royal-square-spin-effect.horizontal .info-box:after {
-webkit-transform: translateZ(0) translateY(-100%) rotateZ(180deg);
-moz-transform: translateZ(0) translateY(-100%) rotateZ(180deg);
-ms-transform: translateZ(0) translateY(-100%) rotateZ(180deg);
-o-transform: translateZ(0) translateY(-100%) rotateZ(180deg);
transform: translateZ(0) translateY(-100%) rotateZ(180deg);
}
.royal-square-spin-effect.horizontal:hover .info-box {
filter: alpha(opacity=100);
-wekbit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transform: translateZ(0) scale(1, 1);
-moz-transform: translateZ(0) scale(1, 1);
-ms-transform: translateZ(0) scale(1, 1);
-o-transform: translateZ(0) scale(1, 1);
transform: translateZ(0) scale(1, 1);
}
.royal-square-spin-effect.horizontal:hover .info-box:before {
-webkit-transform: translateZ(0) translateY(50%) rotateZ(-90deg);
-moz-transform: translateZ(0) translateY(50%) rotateZ(-90deg);
-ms-transform: translateZ(0) translateY(50%) rotateZ(-90deg);
-o-transform: translateZ(0) translateY(50%) rotateZ(-90deg);
transform: translateZ(0) translateY(50%) rotateZ(-90deg);
}
.royal-square-spin-effect.horizontal:hover .info-box:after {
-webkit-transform: translateZ(0) translateY(-50%) rotateZ(-90deg);
-moz-transform: translateZ(0) translateY(-50%) rotateZ(-90deg);
-ms-transform: translateZ(0) translateY(-50%) rotateZ(-90deg);
-o-transform: translateZ(0) translateY(-50%) rotateZ(-90deg);
transform: translateZ(0) translateY(-50%) rotateZ(-90deg);
} .over-royal-flip-effect-animation {
display: block;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.over-royal-flip-effect-animation .royal-image, .over-royal-flip-effect-animation .info-box {
display: block;
position: absolute;
width: 100%;
height: 100%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: center center right;
-moz-transform-origin: center center right;
-ms-transform-origin: center center right;
-o-transform-origin: center center right;
transform-origin: center center right;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.over-royal-flip-effect-animation .royal-image {
z-index: 2;
}
.over-royal-flip-effect-animation .info-box {
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.over-royal-flip-effect-animation.top .info-box {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.over-royal-flip-effect-animation.top:hover .royal-image {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.over-royal-flip-effect-animation.top:hover .info-box {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.over-royal-flip-effect-animation.bottom .info-box {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.over-royal-flip-effect-animation.bottom:hover .royal-image {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.over-royal-flip-effect-animation.bottom:hover .info-box {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.over-royal-flip-effect-animation.left .info-box {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.over-royal-flip-effect-animation.left:hover .royal-image {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.over-royal-flip-effect-animation.left:hover .info-box {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.over-royal-flip-effect-animation.right .info-box {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.over-royal-flip-effect-animation.right:hover .royal-image {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.over-royal-flip-effect-animation.right:hover .info-box {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
} .royal-rotate-switch-effect {
display: block;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.royal-rotate-switch-effect .info-box {
background-color: rgba(0, 0, 0, 0.6);
-webkit-transform: rotateZ(360deg) scale(0, 0);
-moz-transform: rotateZ(360deg) scale(0, 0);
-ms-transform: rotateZ(360deg) scale(0, 0);
-o-transform: rotateZ(360deg) scale(0, 0);
transform: rotateZ(360deg) scale(0, 0);
}
.royal-rotate-switch-effect .royal-image {
-webkit-transform: rotateZ(0) scale(1, 1);
-moz-transform: rotateZ(0) scale(1, 1);
-ms-transform: rotateZ(0) scale(1, 1);
-o-transform: rotateZ(0) scale(1, 1);
transform: rotateZ(0) scale(1, 1);
}
.royal-rotate-switch-effect:hover .info-box {
-webkit-transform: rotateZ(0) scale(1, 1);
-moz-transform: rotateZ(0) scale(1, 1);
-ms-transform: rotateZ(0) scale(1, 1);
-o-transform: rotateZ(0) scale(1, 1);
transform: rotateZ(0) scale(1, 1);
}
.royal-rotate-switch-effect:hover .royal-image {
-webkit-transform: rotateZ(-360deg) scale(0, 0);
-moz-transform: rotateZ(-360deg) scale(0, 0);
-ms-transform: rotateZ(-360deg) scale(0, 0);
-o-transform: rotateZ(-360deg) scale(0, 0);
transform: rotateZ(-360deg) scale(0, 0);
z-index: 0;
}.royal-container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.royal-container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
} #mar_zero {
margin: 0;
}
.royal-col-xs-1, .royal-col-sm-1, .royal-col-md-1, .royal-col-lg-1, .royal-col-xs-2, .royal-col-sm-2, .royal-col-md-2, .royal-col-lg-2, .royal-col-xs-3, .royal-col-sm-3, .royal-col-md-3, .royal-col-lg-3, .royal-col-xs-4, .royal-col-sm-4, .royal-col-md-4, .royal-col-lg-4, .royal-col-xs-5, .royal-col-sm-5, .royal-col-md-5, .royal-col-lg-5, .royal-col-xs-6, .royal-col-sm-6, .royal-col-md-6, .royal-col-lg-6, .royal-col-xs-7, .royal-col-sm-7, .royal-col-md-7, .royal-col-lg-7, .royal-col-xs-8, .royal-col-sm-8, .royal-col-md-8, .royal-col-lg-8, .royal-col-xs-9, .royal-col-sm-9, .royal-col-md-9, .royal-col-lg-9, .royal-col-xs-10, .royal-col-sm-10, .royal-col-md-10, .royal-col-lg-10, .royal-col-xs-11, .royal-col-sm-11, .royal-col-md-11, .royal-col-lg-11, .royal-col-xs-12, .royal-col-sm-12, .royal-col-md-12, .royal-col-lg-12 {
position: relative;
min-height: 1px;
padding: 5px
}
.royal-col-xs-1, .royal-col-xs-2, .royal-col-xs-3, .royal-col-xs-4, .royal-col-xs-5, .royal-col-xs-6, .royal-col-xs-7, .royal-col-xs-8, .royal-col-xs-9, .royal-col-xs-10, .royal-col-xs-11, .royal-col-xs-12 {
float: left;
}
.royal-col-xs-12 {
width: 100%;
}
.royal-col-xs-11 {
width: 91.66666667%;
}
.royal-col-xs-10 {
width: 83.33333333%;
}
.royal-col-xs-9 {
width: 75%;
}
.royal-col-xs-8 {
width: 66.66666667%;
}
.royal-col-xs-7 {
width: 58.33333333%;
}
.royal-col-xs-6 {
width: 50%;
}
.royal-col-xs-5 {
width: 41.66666667%;
}
.royal-col-xs-4 {
width: 33.33333333%;
}
.royal-col-xs-3 {
width: 25%;
}
.royal-col-xs-2 {
width: 16.66666667%;
}
.royal-col-xs-1 {
width: 8.33333333%;
}
.royal-col-xs-pull-12 {
right: 100%;
}
.royal-col-xs-pull-11 {
right: 91.66666667%;
}
.royal-col-xs-pull-10 {
right: 83.33333333%;
}
.royal-col-xs-pull-9 {
right: 75%;
}
.royal-col-xs-pull-8 {
right: 66.66666667%;
}
.royal-col-xs-pull-7 {
right: 58.33333333%;
}
.royal-col-xs-pull-6 {
right: 50%;
}
.royal-col-xs-pull-5 {
right: 41.66666667%;
}
.royal-col-xs-pull-4 {
right: 33.33333333%;
}
.royal-col-xs-pull-3 {
right: 25%;
}
.royal-col-xs-pull-2 {
right: 16.66666667%;
}
.royal-col-xs-pull-1 {
right: 8.33333333%;
}
.royal-col-xs-pull-0 {
right: auto;
}
.royal-col-xs-push-12 {
left: 100%;
}
.royal-col-xs-push-11 {
left: 91.66666667%;
}
.royal-col-xs-push-10 {
left: 83.33333333%;
}
.royal-col-xs-push-9 {
left: 75%;
}
.royal-col-xs-push-8 {
left: 66.66666667%;
}
.royal-col-xs-push-7 {
left: 58.33333333%;
}
.royal-col-xs-push-6 {
left: 50%;
}
.royal-col-xs-push-5 {
left: 41.66666667%;
}
.royal-col-xs-push-4 {
left: 33.33333333%;
}
.royal-col-xs-push-3 {
left: 25%;
}
.royal-col-xs-push-2 {
left: 16.66666667%;
}
.royal-col-xs-push-1 {
left: 8.33333333%;
}
.royal-col-xs-push-0 {
left: auto;
}
.royal-col-xs-offset-12 {
margin-left: 100%;
}
.royal-col-xs-offset-11 {
margin-left: 91.66666667%;
}
.royal-col-xs-offset-10 {
margin-left: 83.33333333%;
}
.royal-col-xs-offset-9 {
margin-left: 75%;
}
.royal-col-xs-offset-8 {
margin-left: 66.66666667%;
}
.royal-col-xs-offset-7 {
margin-left: 58.33333333%;
}
.royal-col-xs-offset-6 {
margin-left: 50%;
}
.royal-col-xs-offset-5 {
margin-left: 41.66666667%;
}
.royal-col-xs-offset-4 {
margin-left: 33.33333333%;
}
.royal-col-xs-offset-3 {
margin-left: 25%;
}
.royal-col-xs-offset-2 {
margin-left: 16.66666667%;
}
.royal-col-xs-offset-1 {
margin-left: 8.33333333%;
}
.royal-col-xs-offset-0 {
margin-left: 0;
}
@media (min-width: 768px) {
.royal-col-sm-1, .royal-col-sm-2, .royal-col-sm-3, .royal-col-sm-4, .royal-col-sm-5, .royal-col-sm-6, .royal-col-sm-7, .royal-col-sm-8, .royal-col-sm-9, .royal-col-sm-10, .royal-col-sm-11, .royal-col-sm-12 {
float: left;
}
.royal-col-sm-12 {
width: 100%;
}
.royal-col-sm-11 {
width: 91.66666667%;
}
.royal-col-sm-10 {
width: 83.33333333%;
}
.royal-col-sm-9 {
width: 75%;
}
.royal-col-sm-8 {
width: 66.66666667%;
}
.royal-col-sm-7 {
width: 58.33333333%;
}
.royal-col-sm-6 {
width: 50%;
}
.royal-col-sm-5 {
width: 41.66666667%;
}
.royal-col-sm-4 {
width: 33.33333333%;
}
.royal-col-sm-3 {
width: 25%;
}
.royal-col-sm-2 {
width: 16.66666667%;
}
.royal-col-sm-1 {
width: 8.33333333%;
}
.royal-col-sm-pull-12 {
right: 100%;
}
.royal-col-sm-pull-11 {
right: 91.66666667%;
}
.royal-col-sm-pull-10 {
right: 83.33333333%;
}
.royal-col-sm-pull-9 {
right: 75%;
}
.royal-col-sm-pull-8 {
right: 66.66666667%;
}
.royal-col-sm-pull-7 {
right: 58.33333333%;
}
.royal-col-sm-pull-6 {
right: 50%;
}
.royal-col-sm-pull-5 {
right: 41.66666667%;
}
.royal-col-sm-pull-4 {
right: 33.33333333%;
}
.royal-col-sm-pull-3 {
right: 25%;
}
.royal-col-sm-pull-2 {
right: 16.66666667%;
}
.royal-col-sm-pull-1 {
right: 8.33333333%;
}
.royal-col-sm-pull-0 {
right: auto;
}
.royal-col-sm-push-12 {
left: 100%;
}
.royal-col-sm-push-11 {
left: 91.66666667%;
}
.royal-col-sm-push-10 {
left: 83.33333333%;
}
.royal-col-sm-push-9 {
left: 75%;
}
.royal-col-sm-push-8 {
left: 66.66666667%;
}
.royal-col-sm-push-7 {
left: 58.33333333%;
}
.royal-col-sm-push-6 {
left: 50%;
}
.royal-col-sm-push-5 {
left: 41.66666667%;
}
.royal-col-sm-push-4 {
left: 33.33333333%;
}
.royal-col-sm-push-3 {
left: 25%;
}
.royal-col-sm-push-2 {
left: 16.66666667%;
}
.royal-col-sm-push-1 {
left: 8.33333333%;
}
.royal-col-sm-push-0 {
left: auto;
}
.royal-col-sm-offset-12 {
margin-left: 100%;
}
.royal-col-sm-offset-11 {
margin-left: 91.66666667%;
}
.royal-col-sm-offset-10 {
margin-left: 83.33333333%;
}
.royal-col-sm-offset-9 {
margin-left: 75%;
}
.royal-col-sm-offset-8 {
margin-left: 66.66666667%;
}
.royal-col-sm-offset-7 {
margin-left: 58.33333333%;
}
.royal-col-sm-offset-6 {
margin-left: 50%;
}
.royal-col-sm-offset-5 {
margin-left: 41.66666667%;
}
.royal-col-sm-offset-4 {
margin-left: 33.33333333%;
}
.royal-col-sm-offset-3 {
margin-left: 25%;
}
.royal-col-sm-offset-2 {
margin-left: 16.66666667%;
}
.royal-col-sm-offset-1 {
margin-left: 8.33333333%;
}
.royal-col-sm-offset-0 {
margin-left: 0;
}
}
@media (min-width: 992px) {
.royal-col-md-1, .royal-col-md-2, .royal-col-md-3, .royal-col-md-4, .royal-col-md-5, .royal-col-md-6, .royal-col-md-7, .royal-col-md-8, .royal-col-md-9, .royal-col-md-10, .royal-col-md-11, .royal-col-md-12 {
float: left;
}
.royal-col-md-12 {
width: 100%;
}
.royal-col-md-11 {
width: 91.66666667%;
}
.royal-col-md-10 {
width: 83.33333333%;
}
.royal-col-md-9 {
width: 75%;
}
.royal-col-md-8 {
width: 66.66666667%;
}
.royal-col-md-7 {
width: 58.33333333%;
}
.royal-col-md-6 {
width: 50%;
}
.royal-col-md-5 {
width: 41.66666667%;
}
.royal-col-md-4 {
width: 33.33333333%;
}
.royal-col-md-3 {
width: 25%;
}
.royal-col-md-2 {
width: 16.66666667%;
}
.royal-col-md-1 {
width: 8.33333333%;
}
.royal-col-md-pull-12 {
right: 100%;
}
.royal-col-md-pull-11 {
right: 91.66666667%;
}
.royal-col-md-pull-10 {
right: 83.33333333%;
}
.royal-col-md-pull-9 {
right: 75%;
}
.royal-col-md-pull-8 {
right: 66.66666667%;
}
.royal-col-md-pull-7 {
right: 58.33333333%;
}
.royal-col-md-pull-6 {
right: 50%;
}
.royal-col-md-pull-5 {
right: 41.66666667%;
}
.royal-col-md-pull-4 {
right: 33.33333333%;
}
.royal-col-md-pull-3 {
right: 25%;
}
.royal-col-md-pull-2 {
right: 16.66666667%;
}
.royal-col-md-pull-1 {
right: 8.33333333%;
}
.royal-col-md-pull-0 {
right: auto;
}
.royal-col-md-push-12 {
left: 100%;
}
.royal-col-md-push-11 {
left: 91.66666667%;
}
.royal-col-md-push-10 {
left: 83.33333333%;
}
.royal-col-md-push-9 {
left: 75%;
}
.royal-col-md-push-8 {
left: 66.66666667%;
}
.royal-col-md-push-7 {
left: 58.33333333%;
}
.royal-col-md-push-6 {
left: 50%;
}
.royal-col-md-push-5 {
left: 41.66666667%;
}
.royal-col-md-push-4 {
left: 33.33333333%;
}
.royal-col-md-push-3 {
left: 25%;
}
.royal-col-md-push-2 {
left: 16.66666667%;
}
.royal-col-md-push-1 {
left: 8.33333333%;
}
.royal-col-md-push-0 {
left: auto;
}
.royal-col-md-offset-12 {
margin-left: 100%;
}
.royal-col-md-offset-11 {
margin-left: 91.66666667%;
}
.royal-col-md-offset-10 {
margin-left: 83.33333333%;
}
.royal-col-md-offset-9 {
margin-left: 75%;
}
.royal-col-md-offset-8 {
margin-left: 66.66666667%;
}
.royal-col-md-offset-7 {
margin-left: 58.33333333%;
}
.royal-col-md-offset-6 {
margin-left: 50%;
}
.royal-col-md-offset-5 {
margin-left: 41.66666667%;
}
.royal-col-md-offset-4 {
margin-left: 33.33333333%;
}
.royal-col-md-offset-3 {
margin-left: 25%;
}
.royal-col-md-offset-2 {
margin-left: 16.66666667%;
}
.royal-col-md-offset-1 {
margin-left: 8.33333333%;
}
.royal-col-md-offset-0 {
margin-left: 0;
}
}
@media (min-width: 1200px) {
.royal-col-lg-1, .royal-col-lg-2, .royal-col-lg-3, .royal-col-lg-4, .royal-col-lg-5, .royal-col-lg-6, .royal-col-lg-7, .royal-col-lg-8, .royal-col-lg-9, .royal-col-lg-10, .royal-col-lg-11, .royal-col-lg-12 {
float: left;
}
.royal-col-lg-12 {
width: 100%;
}
.royal-col-lg-11 {
width: 91.66666667%;
}
.royal-col-lg-10 {
width: 83.33333333%;
}
.royal-col-lg-9 {
width: 75%;
}
.royal-col-lg-8 {
width: 66.66666667%;
}
.royal-col-lg-7 {
width: 58.33333333%;
}
.royal-col-lg-6 {
width: 50%;
}
.royal-col-lg-5 {
width: 41.66666667%;
}
.royal-col-lg-4 {
width: 33.33333333%;
}
.royal-col-lg-3 {
width: 25%;
}
.royal-col-lg-2 {
width: 16.66666667%;
}
.royal-col-lg-1 {
width: 8.33333333%;
}
.royal-col-lg-pull-12 {
right: 100%;
}
.royal-col-lg-pull-11 {
right: 91.66666667%;
}
.royal-col-lg-pull-10 {
right: 83.33333333%;
}
.royal-col-lg-pull-9 {
right: 75%;
}
.royal-col-lg-pull-8 {
right: 66.66666667%;
}
.royal-col-lg-pull-7 {
right: 58.33333333%;
}
.royal-col-lg-pull-6 {
right: 50%;
}
.royal-col-lg-pull-5 {
right: 41.66666667%;
}
.royal-col-lg-pull-4 {
right: 33.33333333%;
}
.royal-col-lg-pull-3 {
right: 25%;
}
.royal-col-lg-pull-2 {
right: 16.66666667%;
}
.royal-col-lg-pull-1 {
right: 8.33333333%;
}
.royal-col-lg-pull-0 {
right: auto;
}
.royal-col-lg-push-12 {
left: 100%;
}
.royal-col-lg-push-11 {
left: 91.66666667%;
}
.royal-col-lg-push-10 {
left: 83.33333333%;
}
.royal-col-lg-push-9 {
left: 75%;
}
.royal-col-lg-push-8 {
left: 66.66666667%;
}
.royal-col-lg-push-7 {
left: 58.33333333%;
}
.royal-col-lg-push-6 {
left: 50%;
}
.royal-col-lg-push-5 {
left: 41.66666667%;
}
.royal-col-lg-push-4 {
left: 33.33333333%;
}
.royal-col-lg-push-3 {
left: 25%;
}
.royal-col-lg-push-2 {
left: 16.66666667%;
}
.royal-col-lg-push-1 {
left: 8.33333333%;
}
.royal-col-lg-push-0 {
left: auto;
}
.royal-col-lg-offset-12 {
margin-left: 100%;
}
.royal-col-lg-offset-11 {
margin-left: 91.66666667%;
}
.royal-col-lg-offset-10 {
margin-left: 83.33333333%;
}
.royal-col-lg-offset-9 {
margin-left: 75%;
}
.royal-col-lg-offset-8 {
margin-left: 66.66666667%;
}
.royal-col-lg-offset-7 {
margin-left: 58.33333333%;
}
.royal-col-lg-offset-6 {
margin-left: 50%;
}
.royal-col-lg-offset-5 {
margin-left: 41.66666667%;
}
.royal-col-lg-offset-4 {
margin-left: 33.33333333%;
}
.royal-col-lg-offset-3 {
margin-left: 25%;
}
.royal-col-lg-offset-2 {
margin-left: 16.66666667%;
}
.royal-col-lg-offset-1 {
margin-left: 8.33333333%;
}
.royal-col-lg-offset-0 {
margin-left: 0;
}
}.royal-item-hover {
position: relative;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover, .royal-item-hover * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.royal-item-hover a {
color: #333
}
.royal-item-hover a:hover {
text-decoration: none
}
.royal-item-hover img {
width: 100%;
height: 100%
}
.royal-item-hover.circle {
position: relative;
width: 100%;
height: 100%;
border-radius: 0%
}
.royal-item-hover.circle .img {
position: relative;
width: 100%;
height: 100%;
border-radius: 0%
}
.royal-item-hover.circle .img:before {
position: absolute;
display: block;
content: '';
width: 100%;
height: 100%;
border-radius: 0%;
box-shadow: inset 0 0 0 5px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.3);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle .img img {
border-radius: 0%
}
.royal-item-hover.circle .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
border-radius: 0%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.royal-item-hover.square {
position: relative;
width: 316px;
height: 216px;
border: 8px solid #fff;
box-shadow: 1px 1px 3px rgba(0,0,0,0.3)
}
.royal-item-hover.square .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.royal-item-hover.circle.effect1 .spinner {
width: 260px;
height: 260px;
border-radius: 0%;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
transition: all .8s ease-in-out
}
.royal-item-hover.circle.effect1 .img {
position: absolute;
top: 0px;
bottom: 0;
left: 0px;
right: 0;
width: auto;
height: auto
}
.royal-item-hover.circle.effect1.colored .info {
background: rgba(14, 139, 203, 0.9)
}
.royal-item-hover.circle.effect1 .info {
top: 0px;
bottom: 0;
left: 0px;
right: 0;
background: rgba(14, 139, 203, 0.9);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out
}
.royal-item-hover.circle.effect1 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 20px 0 0;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect1 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
font-family: "Open Sans", Arial, sans-serif;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect1 a:hover .spinner {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg)
}
.royal-item-hover.circle.effect1.counterclockwise a:hover .spinner {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg)
}
.royal-item-hover.circle.effect1 a:hover .info {
opacity: 1
}
.royal-item-hover.circle.effect2 .img {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect2.colored .info {
background: rgba(14, 139, 203, 0.9)
}
.royal-item-hover.circle.effect2 .info {
background: rgba(14, 139, 203, 0.9);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
pointer-events: none;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect2 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 20px 0 0;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect2 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.71)
}
.royal-item-hover.circle.effect2.left_to_right .info {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%)
}
.royal-item-hover.circle.effect2.left_to_right a:hover .img {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg)
}
.royal-item-hover.circle.effect2.left_to_right a:hover .info {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect2.right_to_left .info {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%)
}
.royal-item-hover.circle.effect2.right_to_left a:hover .img {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg)
}
.royal-item-hover.circle.effect2.right_to_left a:hover .info {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect2.top_to_bottom .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.circle.effect2.top_to_bottom a:hover .img {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg)
}
.royal-item-hover.circle.effect2.top_to_bottom a:hover .info {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect2.bottom_to_top .info {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.circle.effect2.bottom_to_top a:hover .img {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg)
}
.royal-item-hover.circle.effect2.bottom_to_top a:hover .info {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect3 .img {
z-index: 11;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect3.colored .info {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect3 .info {
background: rgba(14, 139, 203, 1);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
pointer-events: none;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect3 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 70px 0 0;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect3 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect3.left_to_right .img {
-webkit-transform: scale(1) translateX(0);
-moz-transform: scale(1) translateX(0);
-ms-transform: scale(1) translateX(0);
-o-transform: scale(1) translateX(0);
transform: scale(1) translateX(0)
}
.royal-item-hover.circle.effect3.left_to_right .info {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%)
}
.royal-item-hover.circle.effect3.left_to_right a:hover .img {
-webkit-transform: scale(0.5) translateX(100%);
-moz-transform: scale(0.5) translateX(100%);
-ms-transform: scale(0.5) translateX(100%);
-o-transform: scale(0.5) translateX(100%);
transform: scale(0.5) translateX(100%)
}
.royal-item-hover.circle.effect3.left_to_right a:hover .info {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect3.right_to_left .img {
-webkit-transform: scale(1) translateX(0);
-moz-transform: scale(1) translateX(0);
-ms-transform: scale(1) translateX(0);
-o-transform: scale(1) translateX(0);
transform: scale(1) translateX(0)
}
.royal-item-hover.circle.effect3.right_to_left .info {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%)
}
.royal-item-hover.circle.effect3.right_to_left a:hover .img {
-webkit-transform: scale(0.5) translateX(-100%);
-moz-transform: scale(0.5) translateX(-100%);
-ms-transform: scale(0.5) translateX(-100%);
-o-transform: scale(0.5) translateX(-100%);
transform: scale(0.5) translateX(-100%)
}
.royal-item-hover.circle.effect3.right_to_left a:hover .info {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect3.top_to_bottom .img {
-webkit-transform: scale(1) translateY(0);
-moz-transform: scale(1) translateY(0);
-ms-transform: scale(1) translateY(0);
-o-transform: scale(1) translateY(0);
transform: scale(1) translateY(0)
}
.royal-item-hover.circle.effect3.top_to_bottom .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.circle.effect3.top_to_bottom a:hover .img {
-webkit-transform: scale(0.5) translateY(100%);
-moz-transform: scale(0.5) translateY(100%);
-ms-transform: scale(0.5) translateY(100%);
-o-transform: scale(0.5) translateY(100%);
transform: scale(0.5) translateY(100%)
}
.royal-item-hover.circle.effect3.top_to_bottom a:hover .info {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect3.bottom_to_top .img {
-webkit-transform: scale(1) translateY(0);
-moz-transform: scale(1) translateY(0);
-ms-transform: scale(1) translateY(0);
-o-transform: scale(1) translateY(0);
transform: scale(1) translateY(0)
}
.royal-item-hover.circle.effect3.bottom_to_top .info {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.circle.effect3.bottom_to_top a:hover .img {
-webkit-transform: scale(0.5) translateY(-100%);
-moz-transform: scale(0.5) translateY(-100%);
-ms-transform: scale(0.5) translateY(-100%);
-o-transform: scale(0.5) translateY(-100%);
transform: scale(0.5) translateY(-100%)
}
.royal-item-hover.circle.effect3.bottom_to_top a:hover .info {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect4 .img {
opacity: 1;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.royal-item-hover.circle.effect4.colored .info {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect4 .info {
background: rgba(14, 139, 203, 1);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
transition: all .35s ease
}
.royal-item-hover.circle.effect4 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 100px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect4 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect4 a:hover .img {
opacity: 0;
pointer-events: none
}
.royal-item-hover.circle.effect4 a:hover .info {
visibility: visible;
opacity: 1
}
.royal-item-hover.circle.effect4.left_to_right .img {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect4.left_to_right .info {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%)
}
.royal-item-hover.circle.effect4.left_to_right a:hover .img {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%)
}
.royal-item-hover.circle.effect4.left_to_right a:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect4.right_to_left .img {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect4.right_to_left .info {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%)
}
.royal-item-hover.circle.effect4.right_to_left a:hover .img {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%)
}
.royal-item-hover.circle.effect4.right_to_left a:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect4.top_to_bottom .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect4.top_to_bottom .info {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.circle.effect4.top_to_bottom a:hover .img {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.circle.effect4.top_to_bottom a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect4.bottom_to_top .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect4.bottom_to_top .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.circle.effect4.bottom_to_top a:hover .img {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.circle.effect4.bottom_to_top a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect5 {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px
}
.royal-item-hover.circle.effect5.colored .info .info-back {
background: rgba(14, 139, 203, 0.9)
}
.royal-item-hover.circle.effect5 .info {
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d
}
.royal-item-hover.circle.effect5 .info .info-back {
visibility: hidden;
border-radius: 0%;
width: 100%;
height: 100%;
background: rgba(14, 139, 203, 0.9);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate3d(0, 1, 0, 180deg);
-moz-transform: rotate3d(0, 1, 0, 180deg);
-ms-transform: rotate3d(0, 1, 0, 180deg);
-o-transform: rotate3d(0, 1, 0, 180deg);
transform: rotate3d(0, 1, 0, 180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.royal-item-hover.circle.effect5 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect5 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect5 a:hover .info {
-webkit-transform: rotate3d(0, 1, 0, -180deg);
-moz-transform: rotate3d(0, 1, 0, -180deg);
-ms-transform: rotate3d(0, 1, 0, -180deg);
-o-transform: rotate3d(0, 1, 0, -180deg);
transform: rotate3d(0, 1, 0, -180deg)
}
.royal-item-hover.circle.effect5 a:hover .info .info-back {
visibility: visible
}
.royal-item-hover.circle.effect6 .img {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect6.colored .info {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect6 .info {
background: rgba(14, 139, 203, 1);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect6 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect6 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect6.scale_up .info {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5)
}
.royal-item-hover.circle.effect6.scale_up a:hover .img {
opacity: 0;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5)
}
.royal-item-hover.circle.effect6.scale_up a:hover .info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.circle.effect6.scale_down .info {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5)
}
.royal-item-hover.circle.effect6.scale_down a:hover .img {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5)
}
.royal-item-hover.circle.effect6.scale_down a:hover .info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.circle.effect6.scale_down_up .info {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all .35s ease-in-out .2s;
-moz-transition: all .35s ease-in-out .2s;
transition: all .35s ease-in-out .2s
}
.royal-item-hover.circle.effect6.scale_down_up a:hover .img {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5)
}
.royal-item-hover.circle.effect6.scale_down_up a:hover .info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.circle.effect7 .img {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all .35s ease-out;
-moz-transition: all .35s ease-out;
transition: all .35s ease-out
}
.royal-item-hover.circle.effect7.colored .info {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect7 .info {
background: rgba(14, 139, 203, 1);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-transition: all .35s ease .2s;
-moz-transition: all .35s ease .2s;
transition: all .35s ease .2s
}
.royal-item-hover.circle.effect7 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 100px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect7 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect7 a:hover .img {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5)
}
.royal-item-hover.circle.effect7 a:hover .info {
visibility: visible;
opacity: 1
}
.royal-item-hover.circle.effect7.left_to_right .info {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%)
}
.royal-item-hover.circle.effect7.left_to_right a:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect7.right_to_left .info {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%)
}
.royal-item-hover.circle.effect7.right_to_left a:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect7.top_to_bottom .info {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.circle.effect7.top_to_bottom a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect7.bottom_to_top .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.circle.effect7.bottom_to_top a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect8.colored .info {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect8 .img-container {
height: 100%;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
.royal-item-hover.circle.effect8 .img-container .img {
opacity: 1;
-webkit-transition: all .3s ease-in-out .3s;
-moz-transition: all .3s ease-in-out .3s;
transition: all .3s ease-in-out .3s
}
.royal-item-hover.circle.effect8 .info-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
border-radius: 0%;
opacity: 0;
pointer-events: none;
-webkit-transition: all .3s ease-in-out .3s;
-moz-transition: all .3s ease-in-out .3s;
transition: all .3s ease-in-out .3s
}
.royal-item-hover.circle.effect8 .info {
width: 100%;
height: 100%;
background: rgba(14, 139, 203, 1);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
pointer-events: none;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all .35s ease-in-out .6s;
-moz-transition: all .35s ease-in-out .6s;
transition: all .35s ease-in-out .6s
}
.royal-item-hover.circle.effect8 .info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 60px 0 0;
height: 100px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect8 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect8 a:hover .img-container {
pointer-events: none;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5)
}
.royal-item-hover.circle.effect8 a:hover .img-container .img {
opacity: 0;
pointer-events: none
}
.royal-item-hover.circle.effect8 a:hover .info-container {
opacity: 1
}
.royal-item-hover.circle.effect8 a:hover .info-container .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.circle.effect8.left_to_right .img-container .img {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect8.left_to_right .info-container {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%)
}
.royal-item-hover.circle.effect8.left_to_right a:hover .img-container .img {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%)
}
.royal-item-hover.circle.effect8.left_to_right a:hover .info-container {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect8.right_to_left .img-container .img {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect8.right_to_left .info-container {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%)
}
.royal-item-hover.circle.effect8.right_to_left a:hover .img-container .img {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%)
}
.royal-item-hover.circle.effect8.right_to_left a:hover .info-container {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect8.top_to_bottom .img-container .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect8.top_to_bottom .info-container {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.circle.effect8.top_to_bottom a:hover .img-container .img {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.circle.effect8.top_to_bottom a:hover .info-container {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect8.bottom_to_top .img-container .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect8.bottom_to_top .info-container {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.circle.effect8.bottom_to_top a:hover .img-container .img {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.circle.effect8.bottom_to_top a:hover .info-container {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect9 .img {
opacity: 1;
-webkit-transition: all .35s ease-out;
-moz-transition: all .35s ease-out;
transition: all .35s ease-out
}
.royal-item-hover.circle.effect9.colored .info {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect9 .info {
background: rgba(14, 139, 203, 1);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all .35s ease .2s;
-moz-transition: all .35s ease .2s;
transition: all .35s ease .2s
}
.royal-item-hover.circle.effect9 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect9 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect9 a:hover .img {
opacity: 0;
pointer-events: none;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5)
}
.royal-item-hover.circle.effect9 a:hover .info {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.circle.effect9.left_to_right .img {
-webkit-transform: translateX(0) rotate(0);
-moz-transform: translateX(0) rotate(0);
-ms-transform: translateX(0) rotate(0);
-o-transform: translateX(0) rotate(0);
transform: translateX(0) rotate(0)
}
.royal-item-hover.circle.effect9.left_to_right a:hover .img {
-webkit-transform: translateX(100%) rotate(180deg);
-moz-transform: translateX(100%) rotate(180deg);
-ms-transform: translateX(100%) rotate(180deg);
-o-transform: translateX(100%) rotate(180deg);
transform: translateX(100%) rotate(180deg)
}
.royal-item-hover.circle.effect9.right_to_left .img {
-webkit-transform: translateX(0) rotate(0);
-moz-transform: translateX(0) rotate(0);
-ms-transform: translateX(0) rotate(0);
-o-transform: translateX(0) rotate(0);
transform: translateX(0) rotate(0)
}
.royal-item-hover.circle.effect9.right_to_left a:hover .img {
-webkit-transform: translateX(-100%) rotate(-180deg);
-moz-transform: translateX(-100%) rotate(-180deg);
-ms-transform: translateX(-100%) rotate(-180deg);
-o-transform: translateX(-100%) rotate(-180deg);
transform: translateX(-100%) rotate(-180deg)
}
.royal-item-hover.circle.effect9.top_to_bottom .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect9.top_to_bottom a:hover .img {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.circle.effect9.bottom_to_top .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect9.bottom_to_top a:hover .img {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.circle.effect10 .img {
z-index: 11;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect10.colored .info {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect10 .info {
background: rgba(14, 139, 203, 1);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect10 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect10 .info p {
color: #ffffff;
font-style: normal;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect10 a:hover .info {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.circle.effect10.top_to_bottom .info h3 {
margin: 0 30px;
padding: 25px 0 0;
height: 65px
}
.royal-item-hover.circle.effect10.top_to_bottom .info p {
margin: 0 30px;
padding: 5px
}
.royal-item-hover.circle.effect10.top_to_bottom a:hover .img {
-webkit-transform: translateY(50px) scale(0.5);
-moz-transform: translateY(50px) scale(0.5);
-ms-transform: translateY(50px) scale(0.5);
-o-transform: translateY(50px) scale(0.5);
transform: translateY(50px) scale(0.5)
}
.royal-item-hover.circle.effect10.bottom_to_top .info h3 {
margin: 130px 30px 0;
padding: 25px 0 0;
height: 65px
}
.royal-item-hover.circle.effect10.bottom_to_top .info p {
margin: 0 30px;
padding: 5px
}
.royal-item-hover.circle.effect10.bottom_to_top a:hover .img {
-webkit-transform: translateY(-50px) scale(0.5);
-moz-transform: translateY(-50px) scale(0.5);
-ms-transform: translateY(-50px) scale(0.5);
-o-transform: translateY(-50px) scale(0.5);
transform: translateY(-50px) scale(0.5)
}
.royal-item-hover.circle.effect11 {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px
}
.royal-item-hover.circle.effect11 .img {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect11.colored .info {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect11 .info {
background: rgba(14, 139, 203, 1);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
-webkit-transition: all .35s ease .35s;
-moz-transition: all .35s ease .35s;
transition: all .35s ease .35s
}
.royal-item-hover.circle.effect11 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect11 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect11 a:hover .img {
opacity: 0
}
.royal-item-hover.circle.effect11 a:hover .info {
visibility: visible;
opacity: 1
}
.royal-item-hover.circle.effect11.left_to_right .img {
-webkit-transform: translateZ(0) rotateY(0);
-moz-transform: translateZ(0) rotateY(0);
-ms-transform: translateZ(0) rotateY(0);
-o-transform: translateZ(0) rotateY(0);
transform: translateZ(0) rotateY(0)
}
.royal-item-hover.circle.effect11.left_to_right .info {
-webkit-transform: translateZ(-1000px) rotateY(-90deg);
-moz-transform: translateZ(-1000px) rotateY(-90deg);
-ms-transform: translateZ(-1000px) rotateY(-90deg);
-o-transform: translateZ(-1000px) rotateY(-90deg);
transform: translateZ(-1000px) rotateY(-90deg)
}
.royal-item-hover.circle.effect11.left_to_right a:hover .img {
-webkit-transform: translateZ(-1000px) rotateY(90deg);
-moz-transform: translateZ(-1000px) rotateY(90deg);
-ms-transform: translateZ(-1000px) rotateY(90deg);
-o-transform: translateZ(-1000px) rotateY(90deg);
transform: translateZ(-1000px) rotateY(90deg)
}
.royal-item-hover.circle.effect11.left_to_right a:hover .info {
-webkit-transform: translateZ(0) rotateY(0);
-moz-transform: translateZ(0) rotateY(0);
-ms-transform: translateZ(0) rotateY(0);
-o-transform: translateZ(0) rotateY(0);
transform: translateZ(0) rotateY(0)
}
.royal-item-hover.circle.effect11.right_to_left .img {
-webkit-transform: translateZ(0) rotateY(0);
-moz-transform: translateZ(0) rotateY(0);
-ms-transform: translateZ(0) rotateY(0);
-o-transform: translateZ(0) rotateY(0);
transform: translateZ(0) rotateY(0)
}
.royal-item-hover.circle.effect11.right_to_left .info {
-webkit-transform: translateZ(-1000px) rotateY(90deg);
-moz-transform: translateZ(-1000px) rotateY(90deg);
-ms-transform: translateZ(-1000px) rotateY(90deg);
-o-transform: translateZ(-1000px) rotateY(90deg);
transform: translateZ(-1000px) rotateY(90deg)
}
.royal-item-hover.circle.effect11.right_to_left a:hover .img {
-webkit-transform: translateZ(-1000px) rotateY(-90deg);
-moz-transform: translateZ(-1000px) rotateY(-90deg);
-ms-transform: translateZ(-1000px) rotateY(-90deg);
-o-transform: translateZ(-1000px) rotateY(-90deg);
transform: translateZ(-1000px) rotateY(-90deg)
}
.royal-item-hover.circle.effect11.right_to_left a:hover .info {
-webkit-transform: translateZ(0) rotateY(0);
-moz-transform: translateZ(0) rotateY(0);
-ms-transform: translateZ(0) rotateY(0);
-o-transform: translateZ(0) rotateY(0);
transform: translateZ(0) rotateY(0)
}
.royal-item-hover.circle.effect11.top_to_bottom .img {
-webkit-transform: translateZ(0) rotateX(0);
-moz-transform: translateZ(0) rotateX(0);
-ms-transform: translateZ(0) rotateX(0);
-o-transform: translateZ(0) rotateX(0);
transform: translateZ(0) rotateX(0)
}
.royal-item-hover.circle.effect11.top_to_bottom .info {
-webkit-transform: translateZ(-1000px) rotateX(90deg);
-moz-transform: translateZ(-1000px) rotateX(90deg);
-ms-transform: translateZ(-1000px) rotateX(90deg);
-o-transform: translateZ(-1000px) rotateX(90deg);
transform: translateZ(-1000px) rotateX(90deg)
}
.royal-item-hover.circle.effect11.top_to_bottom a:hover .img {
-webkit-transform: translateZ(-1000px) rotateX(-90deg);
-moz-transform: translateZ(-1000px) rotateX(-90deg);
-ms-transform: translateZ(-1000px) rotateX(-90deg);
-o-transform: translateZ(-1000px) rotateX(-90deg);
transform: translateZ(-1000px) rotateX(-90deg)
}
.royal-item-hover.circle.effect11.top_to_bottom a:hover .info {
-webkit-transform: translateZ(0) rotateX(0);
-moz-transform: translateZ(0) rotateX(0);
-ms-transform: translateZ(0) rotateX(0);
-o-transform: translateZ(0) rotateX(0);
transform: translateZ(0) rotateX(0)
}
.royal-item-hover.circle.effect11.bottom_to_top .img {
-webkit-transform: translateZ(0) rotateX(0);
-moz-transform: translateZ(0) rotateX(0);
-ms-transform: translateZ(0) rotateX(0);
-o-transform: translateZ(0) rotateX(0);
transform: translateZ(0) rotateX(0)
}
.royal-item-hover.circle.effect11.bottom_to_top .info {
-webkit-transform: translateZ(-1000px) rotateX(-90deg);
-moz-transform: translateZ(-1000px) rotateX(-90deg);
-ms-transform: translateZ(-1000px) rotateX(-90deg);
-o-transform: translateZ(-1000px) rotateX(-90deg);
transform: translateZ(-1000px) rotateX(-90deg)
}
.royal-item-hover.circle.effect11.bottom_to_top a:hover .img {
-webkit-transform: translateZ(-1000px) rotateX(90deg);
-moz-transform: translateZ(-1000px) rotateX(90deg);
-ms-transform: translateZ(-1000px) rotateX(90deg);
-o-transform: translateZ(-1000px) rotateX(90deg);
transform: translateZ(-1000px) rotateX(90deg)
}
.royal-item-hover.circle.effect11.bottom_to_top a:hover .info {
-webkit-transform: translateZ(0) rotateX(0);
-moz-transform: translateZ(0) rotateX(0);
-ms-transform: translateZ(0) rotateX(0);
-o-transform: translateZ(0) rotateX(0);
transform: translateZ(0) rotateX(0)
}
.royal-item-hover.circle.effect12 .img {
opacity: 1;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect12.colored .info {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect12 .info {
background: rgba(14, 139, 203, 1);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect12 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect12 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect12 a:hover .img {
opacity: 0;
pointer-events: none
}
.royal-item-hover.circle.effect12 a:hover .info {
opacity: 1;
visibility: visible
}
.royal-item-hover.circle.effect12.left_to_right .img {
-webkit-transform: translateX(0) rotate(0);
-moz-transform: translateX(0) rotate(0);
-ms-transform: translateX(0) rotate(0);
-o-transform: translateX(0) rotate(0);
transform: translateX(0) rotate(0)
}
.royal-item-hover.circle.effect12.left_to_right .info {
-webkit-transform: translateX(100%) rotate(180deg);
-moz-transform: translateX(100%) rotate(180deg);
-ms-transform: translateX(100%) rotate(180deg);
-o-transform: translateX(100%) rotate(180deg);
transform: translateX(100%) rotate(180deg)
}
.royal-item-hover.circle.effect12.left_to_right a:hover .img {
-webkit-transform: translateX(100%) rotate(180deg);
-moz-transform: translateX(100%) rotate(180deg);
-ms-transform: translateX(100%) rotate(180deg);
-o-transform: translateX(100%) rotate(180deg);
transform: translateX(100%) rotate(180deg)
}
.royal-item-hover.circle.effect12.left_to_right a:hover .info {
-webkit-transform: translateX(0) rotate(0);
-moz-transform: translateX(0) rotate(0);
-ms-transform: translateX(0) rotate(0);
-o-transform: translateX(0) rotate(0);
transform: translateX(0) rotate(0);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
transition-delay: .4s
}
.royal-item-hover.circle.effect12.right_to_left .img {
-webkit-transform: translateX(0) rotate(0);
-moz-transform: translateX(0) rotate(0);
-ms-transform: translateX(0) rotate(0);
-o-transform: translateX(0) rotate(0);
transform: translateX(0) rotate(0)
}
.royal-item-hover.circle.effect12.right_to_left .info {
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transform: translateX(-100%) rotate(-180deg);
-moz-transform: translateX(-100%) rotate(-180deg);
-ms-transform: translateX(-100%) rotate(-180deg);
-o-transform: translateX(-100%) rotate(-180deg);
transform: translateX(-100%) rotate(-180deg)
}
.royal-item-hover.circle.effect12.right_to_left a:hover .img {
-webkit-transform: translateX(-100%) rotate(-180deg);
-moz-transform: translateX(-100%) rotate(-180deg);
-ms-transform: translateX(-100%) rotate(-180deg);
-o-transform: translateX(-100%) rotate(-180deg);
transform: translateX(-100%) rotate(-180deg)
}
.royal-item-hover.circle.effect12.right_to_left a:hover .info {
-webkit-transform: translateX(0) rotate(0);
-moz-transform: translateX(0) rotate(0);
-ms-transform: translateX(0) rotate(0);
-o-transform: translateX(0) rotate(0);
transform: translateX(0) rotate(0);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
transition-delay: .4s
}
.royal-item-hover.circle.effect12.top_to_bottom .img {
-webkit-transform: translateY(0) rotate(0);
-moz-transform: translateY(0) rotate(0);
-ms-transform: translateY(0) rotate(0);
-o-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0)
}
.royal-item-hover.circle.effect12.top_to_bottom .info {
-webkit-transform: translateY(-100%) rotate(-180deg);
-moz-transform: translateY(-100%) rotate(-180deg);
-ms-transform: translateY(-100%) rotate(-180deg);
-o-transform: translateY(-100%) rotate(-180deg);
transform: translateY(-100%) rotate(-180deg)
}
.royal-item-hover.circle.effect12.top_to_bottom a:hover .img {
-webkit-transform: translateY(-100%) rotate(-180deg);
-moz-transform: translateY(-100%) rotate(-180deg);
-ms-transform: translateY(-100%) rotate(-180deg);
-o-transform: translateY(-100%) rotate(-180deg);
transform: translateY(-100%) rotate(-180deg)
}
.royal-item-hover.circle.effect12.top_to_bottom a:hover .info {
-webkit-transform: translateY(0) rotate(0);
-moz-transform: translateY(0) rotate(0);
-ms-transform: translateY(0) rotate(0);
-o-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
transition-delay: .4s
}
.royal-item-hover.circle.effect12.bottom_to_top .img {
-webkit-transform: translateY(0) rotate(0);
-moz-transform: translateY(0) rotate(0);
-ms-transform: translateY(0) rotate(0);
-o-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0)
}
.royal-item-hover.circle.effect12.bottom_to_top .info {
-webkit-transform: translateY(100%) rotate(180deg);
-moz-transform: translateY(100%) rotate(180deg);
-ms-transform: translateY(100%) rotate(180deg);
-o-transform: translateY(100%) rotate(180deg);
transform: translateY(100%) rotate(180deg)
}
.royal-item-hover.circle.effect12.bottom_to_top a:hover .img {
-webkit-transform: translateY(100%) rotate(180deg);
-moz-transform: translateY(100%) rotate(180deg);
-ms-transform: translateY(100%) rotate(180deg);
-o-transform: translateY(100%) rotate(180deg);
transform: translateY(100%) rotate(180deg)
}
.royal-item-hover.circle.effect12.bottom_to_top a:hover .info {
-webkit-transform: translateY(0) rotate(0);
-moz-transform: translateY(0) rotate(0);
-ms-transform: translateY(0) rotate(0);
-o-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
transition-delay: .4s
}
.royal-item-hover.circle.effect13.colored .info {
background: rgba(14, 139, 203, 0.9)
}
.royal-item-hover.circle.effect13 .info {
background: rgba(14, 139, 203, 0.9);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
pointer-events: none;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect13 .info h3 {
visibility: hidden;
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect13 .info p {
visibility: hidden;
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect13 a:hover .info {
opacity: 1
}
.royal-item-hover.circle.effect13 a:hover h3 {
visibility: visible
}
.royal-item-hover.circle.effect13 a:hover p {
visibility: visible
}
.royal-item-hover.circle.effect13.right_to_left .info h3 {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%)
}
.royal-item-hover.circle.effect13.right_to_left .info p {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%)
}
.royal-item-hover.circle.effect13.right_to_left a:hover h3 {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect13.right_to_left a:hover p {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect13.left_to_right .info h3 {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%)
}
.royal-item-hover.circle.effect13.left_to_right .info p {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%)
}
.royal-item-hover.circle.effect13.left_to_right a:hover h3 {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect13.left_to_right a:hover p {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.circle.effect13.top_to_bottom .info h3 {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.circle.effect13.top_to_bottom .info p {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.circle.effect13.top_to_bottom a:hover h3 {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect13.top_to_bottom a:hover p {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect13.bottom_to_top .info h3 {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.circle.effect13.bottom_to_top .info p {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.circle.effect13.bottom_to_top a:hover h3 {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect13.bottom_to_top a:hover p {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.circle.effect14 {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px
}
.royal-item-hover.circle.effect14 .img {
visibility: visible;
opacity: 1;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
transition: all .4s ease-out
}
.royal-item-hover.circle.effect14.colored .info {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect14 .info {
background: rgba(14, 139, 203, 1);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
-webkit-transition: all .35s ease-in-out .3s;
-moz-transition: all .35s ease-in-out .3s;
transition: all .35s ease-in-out .3s
}
.royal-item-hover.circle.effect14 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect14 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect14 a:hover .img {
opacity: 0;
visibility: hidden
}
.royal-item-hover.circle.effect14 a:hover .info {
visibility: visible;
opacity: 1
}
.royal-item-hover.circle.effect14.left_to_right .img {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%
}
.royal-item-hover.circle.effect14.left_to_right .info {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%
}
.royal-item-hover.circle.effect14.left_to_right a:hover .img {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg)
}
.royal-item-hover.circle.effect14.left_to_right a:hover .info {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0)
}
.royal-item-hover.circle.effect14.right_to_left .img {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%
}
.royal-item-hover.circle.effect14.right_to_left .info {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%
}
.royal-item-hover.circle.effect14.right_to_left a:hover .img {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg)
}
.royal-item-hover.circle.effect14.right_to_left a:hover .info {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0)
}
.royal-item-hover.circle.effect14.top_to_bottom .img {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
.royal-item-hover.circle.effect14.top_to_bottom .info {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0
}
.royal-item-hover.circle.effect14.top_to_bottom a:hover .img {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg)
}
.royal-item-hover.circle.effect14.top_to_bottom a:hover .info {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0)
}
.royal-item-hover.circle.effect14.bottom_to_top .img {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0
}
.royal-item-hover.circle.effect14.bottom_to_top .info {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
.royal-item-hover.circle.effect14.bottom_to_top a:hover .img {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg)
}
.royal-item-hover.circle.effect14.bottom_to_top a:hover .info {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0)
}
.royal-item-hover.circle.effect15 .img {
opacity: 1;
visibility: visible;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
-o-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect15.colored .info {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect15 .info {
background: rgba(14, 139, 203, 1);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.5) rotate(-720deg);
-moz-transform: scale(0.5) rotate(-720deg);
-ms-transform: scale(0.5) rotate(-720deg);
-o-transform: scale(0.5) rotate(-720deg);
transform: scale(0.5) rotate(-720deg);
-webkit-transition: all .35s ease-in-out .3s;
-moz-transition: all .35s ease-in-out .3s;
transition: all .35s ease-in-out .3s
}
.royal-item-hover.circle.effect15 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect15 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect15 a:hover .img {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.5) rotate(720deg);
-moz-transform: scale(0.5) rotate(720deg);
-ms-transform: scale(0.5) rotate(720deg);
-o-transform: scale(0.5) rotate(720deg);
transform: scale(0.5) rotate(720deg)
}
.royal-item-hover.circle.effect15 a:hover .info {
opacity: 1;
visibility: visible;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
-o-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
.royal-item-hover.circle.effect16 .img {
z-index: 11;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect16.colored .info {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect16 .info {
background: rgba(14, 139, 203, 1);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect16 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect16 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect16.left_to_right .img {
-webkit-transform-origin: 90% 40%;
-moz-transform-origin: 90% 40%;
-ms-transform-origin: 90% 40%;
-o-transform-origin: 90% 40%;
transform-origin: 90% 40%
}
.royal-item-hover.circle.effect16.left_to_right .img:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 0%;
top: 40%;
left: 90%;
margin: -4px 0 0 -4px;
background: rgba(14, 139, 203, 0.9);
box-shadow: 0 0 1px rgba(255,255,255,0.9)
}
.royal-item-hover.circle.effect16.left_to_right a:hover .img {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
transform: rotate(-120deg)
}
.royal-item-hover.circle.effect16.right_to_left .img {
-webkit-transform-origin: 0% 40%;
-moz-transform-origin: 0% 40%;
-ms-transform-origin: 0% 40%;
-o-transform-origin: 0% 40%;
transform-origin: 0% 40%
}
.royal-item-hover.circle.effect16.right_to_left .img:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 0%;
top: 40%;
left: 0%;
margin: -4px 0 0 -4px;
background: rgba(14, 139, 203, 0.9);
box-shadow: 0 0 1px rgba(255,255,255,0.9)
}
.royal-item-hover.circle.effect16.right_to_left a:hover .img {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg)
}
.royal-item-hover.circle.effect17 .info {
opacity: 0; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect17 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect17 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
opacity: 0;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect17 a:hover .img:before {
box-shadow: inset 0 0 0 130px #333333, inset 0 0 0 5px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 0 0 130px rgba(14, 139, 203, 0.9), inset 0 0 0 5px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1);
}
.royal-item-hover.circle.effect17 a:hover .info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.circle.effect17 a:hover .info p {
opacity: 1
}
.royal-item-hover.circle.effect17.colored a:hover .img:before {
box-shadow: inset 0 0 0 130px #1a4a72, inset 0 0 0 5px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 0 0 130px rgba(14, 139, 203, 0.9), inset 0 0 0 5px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1)
}
.royal-item-hover.circle.effect18 {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px
}
.royal-item-hover.circle.effect18 .img {
z-index: 11;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out
}
.royal-item-hover.circle.effect18.colored .info .info-back {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect18 .info {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d
}
.royal-item-hover.circle.effect18 .info .info-back {
opacity: 1;
border-radius: 0%;
width: 100%;
height: 100%;
background: rgba(14, 139, 203, 1);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.royal-item-hover.circle.effect18 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect18 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect18.bottom_to_top .img {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0
}
.royal-item-hover.circle.effect18.bottom_to_top a:hover .img {
-webkit-transform: rotate3d(1, 0, 0, 180deg);
-moz-transform: rotate3d(1, 0, 0, 180deg);
-ms-transform: rotate3d(1, 0, 0, 180deg);
-o-transform: rotate3d(1, 0, 0, 180deg);
transform: rotate3d(1, 0, 0, 180deg)
}
.royal-item-hover.circle.effect18.top_to_bottom .img {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
.royal-item-hover.circle.effect18.top_to_bottom a:hover .img {
-webkit-transform: rotate3d(1, 0, 0, -180deg);
-moz-transform: rotate3d(1, 0, 0, -180deg);
-ms-transform: rotate3d(1, 0, 0, -180deg);
-o-transform: rotate3d(1, 0, 0, -180deg);
transform: rotate3d(1, 0, 0, -180deg)
}
.royal-item-hover.circle.effect18.left_to_right .img {
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%
}
.royal-item-hover.circle.effect18.left_to_right a:hover .img {
-webkit-transform: rotate3d(0, 1, 0, 180deg);
-moz-transform: rotate3d(0, 1, 0, 180deg);
-ms-transform: rotate3d(0, 1, 0, 180deg);
-o-transform: rotate3d(0, 1, 0, 180deg);
transform: rotate3d(0, 1, 0, 180deg)
}
.royal-item-hover.circle.effect18.right_to_left .img {
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%
}
.royal-item-hover.circle.effect18.right_to_left a:hover .img {
-webkit-transform: rotate3d(0, 1, 0, -180deg);
-moz-transform: rotate3d(0, 1, 0, -180deg);
-ms-transform: rotate3d(0, 1, 0, -180deg);
-o-transform: rotate3d(0, 1, 0, -180deg);
transform: rotate3d(0, 1, 0, -180deg)
}
.royal-item-hover.circle.effect19.colored .info {
background: rgba(14, 139, 203, 0.9)
}
.royal-item-hover.circle.effect19 .info {
background: rgba(14, 139, 203, 0.9);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect19 .info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 100px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect19 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect19 a:hover .info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.circle.effect20 {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px
}
.royal-item-hover.circle.effect20 .img {
-webkit-transition: all .35s linear;
-moz-transition: all .35s linear;
transition: all .35s linear;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0
}
.royal-item-hover.circle.effect20.colored .info .info-back {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect20 .info {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d
}
.royal-item-hover.circle.effect20 .info .info-back {
opacity: 1;
visibility: hidden;
border-radius: 0%;
width: 100%;
height: 100%;
background: rgba(14, 139, 203, 1);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all .35s linear;
-moz-transition: all .35s linear;
transition: all .35s linear;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.royal-item-hover.circle.effect20 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect20 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect20 a:hover .img {
opacity: 0
}
.royal-item-hover.circle.effect20 a:hover .info .info-back {
opacity: 1;
visibility: visible
}
.royal-item-hover.circle.effect20.top_to_bottom .info .info-back {
-webkit-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
-moz-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
-ms-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
-o-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg)
}
.royal-item-hover.circle.effect20.top_to_bottom a:hover .img {
-webkit-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
-moz-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
-ms-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
-o-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg)
}
.royal-item-hover.circle.effect20.top_to_bottom a:hover .info .info-back {
-webkit-transform: rotate3d(1, 0, 0, 0deg);
-moz-transform: rotate3d(1, 0, 0, 0deg);
-ms-transform: rotate3d(1, 0, 0, 0deg);
-o-transform: rotate3d(1, 0, 0, 0deg);
transform: rotate3d(1, 0, 0, 0deg)
}
.royal-item-hover.circle.effect20.bottom_to_top .info .info-back {
-webkit-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
-moz-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
-ms-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
-o-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg)
}
.royal-item-hover.circle.effect20.bottom_to_top a:hover .img {
-webkit-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
-moz-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
-ms-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
-o-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg)
}
.royal-item-hover.circle.effect20.bottom_to_top a:hover .info .info-back {
-webkit-transform: rotate3d(1, 0, 0, 0deg);
-moz-transform: rotate3d(1, 0, 0, 0deg);
-ms-transform: rotate3d(1, 0, 0, 0deg);
-o-transform: rotate3d(1, 0, 0, 0deg);
transform: rotate3d(1, 0, 0, 0deg)
}
.royal-item-hover.circle.effect21.colored .info {
background: rgba(14, 139, 203, 0.9)
}
.royal-item-hover.circle.effect21 .info {
background: rgba(14, 139, 203, 0.9);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect21 .info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
margin-left: -113px;
padding: 85px 0 0;
height: 120px;
transform: scale(1) rotate(-45deg);
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect21 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 0 0 45px;
font-size: 12px;
transform: scale(1) rotate(-45deg);
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect21 a:hover .info {
opacity: 1;
transform: scale(1) rotate(45deg);
transition: all 0.5s ease-in 0s;
}
.royal-item-hover.circle.effect22 {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px
}
.royal-item-hover.circle.effect22 .img {
-webkit-transition: all .35s linear;
-moz-transition: all .35s linear;
transition: all .35s linear;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0
}
.royal-item-hover.circle.effect22.colored .info .info-back {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect22 .info {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d
}
.royal-item-hover.circle.effect22 .info .info-back {
opacity: 1;
visibility: hidden;
border-radius: 0%;
width: 100%;
height: 100%;
background: rgba(14, 139, 203, 1);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all .35s linear;
-moz-transition: all .35s linear;
transition: all .35s linear;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.royal-item-hover.circle.effect22 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect22 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect22 a:hover .img {
opacity: 0
}
.royal-item-hover.circle.effect22 a:hover .info .info-back {
opacity: 1;
visibility: visible
}
.royal-item-hover.circle.effect22.top_to_bottom .info .info-back {
-webkit-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
-moz-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
-ms-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
-o-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg)
}
.royal-item-hover.circle.effect22.top_to_bottom a:hover .img {
-webkit-transform: translate3d(0, 680px, 0) rotate3d(1, 0, 0, 290deg);
-moz-transform: translate3d(0, 680px, 0) rotate3d(1, 0, 0, 290deg);
-ms-transform: translate3d(0, 680px, 0) rotate3d(1, 0, 0, 290deg);
-o-transform: translate3d(0, 680px, 0) rotate3d(1, 0, 0, 290deg);
transform: translate3d(0, 680px, 0) rotate3d(1, 0, 0, 290deg)
}
.royal-item-hover.circle.effect22.top_to_bottom a:hover .info .info-back {
-webkit-transform: rotate3d(1, 0, 0, 0deg);
-moz-transform: rotate3d(1, 0, 0, 0deg);
-ms-transform: rotate3d(1, 0, 0, 0deg);
-o-transform: rotate3d(1, 0, 0, 0deg);
transform: rotate3d(1, 0, 0, 0deg)
}
.royal-item-hover.circle.effect22.bottom_to_top .info .info-back {
-webkit-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
-moz-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
-ms-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
-o-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg)
}
.royal-item-hover.circle.effect22.bottom_to_top a:hover .img {
-webkit-transform: translate3d(0, 0, -620px) rotate3d(1, 0, 0, 290deg);
-moz-transform: translate3d(0, 0, -620px) rotate3d(1, 0, 0, 290deg);
-ms-transform: translate3d(0, 0, -620px) rotate3d(1, 0, 0, 290deg);
-o-transform: translate3d(0, 0, -620px) rotate3d(1, 0, 0, 290deg);
transform: translate3d(0, 0, -620px) rotate3d(1, 0, 0, 290deg)
}
.royal-item-hover.circle.effect22.bottom_to_top a:hover .info .info-back {
-webkit-transform: rotate3d(1, 0, 0, 0deg);
-moz-transform: rotate3d(1, 0, 0, 0deg);
-ms-transform: rotate3d(1, 0, 0, 0deg);
-o-transform: rotate3d(1, 0, 0, 0deg);
transform: rotate3d(1, 0, 0, 0deg)
}
.royal-item-hover.circle.effect23.colored .info {
background: rgba(14, 139, 203, 0.9)
}
.royal-item-hover.circle.effect23 .info {
background: #333;
background: rgba(14, 139, 203, 0.9);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-webkit-transition: all 1.35s ease-in-out;
-moz-transition: all 1.35s ease-in-out;
transition: all 1.35s ease-in-out
}
.royal-item-hover.circle.effect23 .info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
margin-left: -113px;
padding: 110px 0 0;
height: 120px;
transform: scale(1) rotate(-45deg);
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect23 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 0 0 45px;
font-size: 12px;
transform: scale(1) rotate(-45deg);
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect23 a:hover .info {
opacity: 1;
transform: scale(1) rotate(45deg);
transition: all 0.5s ease-in 0s;
}
.royal-item-hover.circle.effect24 {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px
}
.royal-item-hover.circle.effect24.colored .info .info-back {
background: rgba(14, 139, 203, 0.9);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.royal-item-hover.circle.effect24 .info {
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d
}
.royal-item-hover.circle.effect24 .info .info-back {
visibility: hidden;
border-radius: 0%;
width: 100%;
height: 100%;
background: rgba(14, 139, 203, 0.9);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate3d(0, 1, 0, 180deg);
-moz-transform: rotate3d(0, 1, 0, 180deg);
-ms-transform: rotate3d(0, 1, 0, 180deg);
-o-transform: rotate3d(0, 1, 0, 180deg);
transform: rotate3d(0, 1, 0, 180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.royal-item-hover.circle.effect24 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect24 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5)
}
.royal-item-hover.circle.effect24 a:hover .info {
-webkit-transform: rotate3d(0, 1, 0, -180deg);
-moz-transform: rotate3d(0, 1, 0, -180deg);
-ms-transform: rotate3d(0, 1, 0, -180deg);
-o-transform: rotate3d(0, 1, 0, -180deg);
transform: rotate3d(0, 1, 0, -180deg)
}
.royal-item-hover.circle.effect24 a:hover .info .info-back {
visibility: visible
}
.royal-item-hover.circle.effect25 .info {
opacity: 0; -webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect25 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect25 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
opacity: 0;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect25 a:hover .img:before {
box-shadow: inset 0 0 0 130px #333333, inset 0 0 0 5px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 0 0 130px rgba(14, 139, 203, 0.9), inset 0 0 0 5px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1);
border-radius: 50% 0;
}
.royal-item-hover.circle.effect25 a:hover .info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.circle.effect25 a:hover .info p {
opacity: 1
}
.royal-item-hover.circle.effect25.colored a:hover .img:before {
box-shadow: inset 0 0 0 130px #1a4a72, inset 0 0 0 5px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 0 0 130px rgba(14, 139, 203, 0.9), inset 0 0 0 5px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1)
}
.royal-item-hover.circle.effect26 .info {
opacity: 0; -webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect26 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0,0,0,0.3)
}
.royal-item-hover.circle.effect26 .info p {
color: #ffffff;
padding: 10px 5px;
font-style: normal;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
opacity: 0;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.circle.effect26 a:hover .img:before {
box-shadow: inset 0 0 0 130px #333333, inset 0 0 0 5px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 0 0 130px rgba(14, 139, 203, 0.9), inset 0 0 0 5px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1);
border-radius: 0 50%;
}
.royal-item-hover.circle.effect26 a:hover .info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.circle.effect26 a:hover .info p {
opacity: 1
}
.royal-item-hover.circle.effect26.colored a:hover .img:before {
box-shadow: inset 0 0 0 130px #1a4a72, inset 0 0 0 5px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 0 0 130px rgba(14, 139, 203, 0.9), inset 0 0 0 5px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1)
}
.royal-item-hover.circle.effect27 {
overflow: hidden
}
.royal-item-hover.circle.effect27.colored .info {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect27.colored .info h3 {
background: rgba(12, 109, 158, 1)
}
.royal-item-hover.circle.effect27 .img {
opacity: 1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1)
}
.royal-item-hover.circle.effect27 .info {
background: rgba(14, 139, 203, 1);
visibility: hidden;
border-radius: 0 0 50% 50%;
-moz-border-radius: 0 0 50% 50%;
-webkit-border-radius: 0 0 50% 50%;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all .35s .3s ease-in-out;
-moz-transition: all .35s .3s ease-in-out;
transition: all .35s .3s ease-in-out
}
.royal-item-hover.circle.effect27 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: rgba(12, 109, 158, 1);
margin: 30px 6px 0;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-ms-transform: translateY(-200px);
-o-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all .35s .6s ease-in-out;
-moz-transition: all .35s .6s ease-in-out;
transition: all .35s .6s ease-in-out
}
.royal-item-hover.circle.effect27 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #ffffff;
padding: 20px;
margin: 0 10px;
text-align: center;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-ms-transform: translateY(-200px);
-o-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all .35s .5s linear;
-moz-transition: all .35s .5s linear;
transition: all .35s .5s linear
}
.royal-item-hover.circle.effect27 a:hover .img {
-webkit-transform: rotate(720deg) scale(0);
-moz-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
opacity: 0;
}
.royal-item-hover.circle.effect27 a:hover .info {
visibility: visible;
}
.royal-item-hover.circle.effect27 a:hover .info h3, .royal-item-hover.circle.effect27 a:hover .info p {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.royal-item-hover.circle.effect28 { }
.royal-item-hover.circle.effect28.colored .info {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect27.colored .info h3 {
background: rgba(12, 109, 158, 1)
}
.royal-item-hover.circle.effect28 .img {
opacity: 1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1)
}
.royal-item-hover.circle.effect28 .info {
background: rgba(14, 139, 203, 1);
visibility: hidden;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all .35s .3s ease-in-out;
-moz-transition: all .35s .3s ease-in-out;
transition: all .35s .3s ease-in-out
}
.royal-item-hover.circle.effect28 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 22px;
padding: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
margin: 50px 50px 0 50px;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-ms-transform: translateY(-200px);
-o-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all .35s .6s ease-in-out;
-moz-transition: all .35s .6s ease-in-out;
transition: all .35s .6s ease-in-out
}
.royal-item-hover.circle.effect28 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #ffffff;
padding: 20px;
text-align: center;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-ms-transform: translateY(-200px);
-o-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all .35s .5s linear;
-moz-transition: all .35s .5s linear;
transition: all .35s .5s linear
}
.royal-item-hover.circle.effect28 a:hover .img {
-webkit-transform: rotate(720deg) scale(0);
-moz-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
opacity: 0;
}
.royal-item-hover.circle.effect28 a:hover .info {
visibility: visible;
}
.royal-item-hover.circle.effect28 a:hover .info h3, .royal-item-hover.circle.effect28 a:hover .info p {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.royal-item-hover.circle.effect29 { }
.royal-item-hover.circle.effect29.colored .info {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect29.colored .info h3 {
background: rgba(12, 109, 158, 1)
}
.royal-item-hover.circle.effect29 .img {
opacity: 1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1)
}
.royal-item-hover.circle.effect29 .info {
background: rgba(14, 139, 203, 1);
visibility: hidden;
border-radius: 0%;
-moz-border-radius: 0%;
-webkit-border-radius: 0%;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all .35s .3s ease-in-out;
-moz-transition: all .35s .3s ease-in-out;
transition: all .35s .3s ease-in-out
}
.royal-item-hover.circle.effect29 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 22px;
padding: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
margin: 50px 5px 0 5px;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-ms-transform: translateY(-200px);
-o-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all .35s .6s ease-in-out;
-moz-transition: all .35s .6s ease-in-out;
transition: all .35s .6s ease-in-out
}
.royal-item-hover.circle.effect29 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #ffffff;
padding: 20px;
text-align: center;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-ms-transform: translateY(-200px);
-o-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all .35s .5s linear;
-moz-transition: all .35s .5s linear;
transition: all .35s .5s linear
}
.royal-item-hover.circle.effect29 a:hover .img {
-webkit-transform: rotate(720deg) scale(0);
-moz-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
opacity: 0;
}
.royal-item-hover.circle.effect29 a:hover .info {
visibility: visible;
}
.royal-item-hover.circle.effect29 a:hover .info h3, .royal-item-hover.circle.effect29 a:hover .info p {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.royal-item-hover.circle.effect30 { }
.royal-item-hover.circle.effect30.colored .info {
background: rgba(14, 139, 203, 1)
}
.royal-item-hover.circle.effect30.colored .info h3 {
background: rgba(12, 109, 158, 1)
}
.royal-item-hover.circle.effect30 .img {
opacity: 1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1)
}
.royal-item-hover.circle.effect30 .info {
background: rgba(14, 139, 203, 1);
visibility: hidden;
border-radius: 20% 50% 20% 50%;
-moz-border-radius: 20% 50% 20% 50%;
-webkit-border-radius: 20% 50% 20% 50%;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all .35s .3s ease-in-out;
-moz-transition: all .35s .3s ease-in-out;
transition: all .35s .3s ease-in-out
}
.royal-item-hover.circle.effect30 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 22px;
padding: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
margin: 60px 50px 0 50px;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-ms-transform: translateY(-200px);
-o-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all .35s .6s ease-in-out;
-moz-transition: all .35s .6s ease-in-out;
transition: all .35s .6s ease-in-out
}
.royal-item-hover.circle.effect30 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #ffffff;
padding: 12px 20px 20px 20px;
text-align: center;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-ms-transform: translateY(-200px);
-o-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all .35s .5s linear;
-moz-transition: all .35s .5s linear;
transition: all .35s .5s linear
}
.royal-item-hover.circle.effect30 a:hover .img {
-webkit-transform: rotate(720deg) scale(0);
-moz-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
opacity: 0;
}
.royal-item-hover.circle.effect30 a:hover .info {
visibility: visible;
}
.royal-item-hover.circle.effect30 a:hover .info h3, .royal-item-hover.circle.effect30 a:hover .info p {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.royal-item-hover.square.effect1 {
overflow: hidden
}
.royal-item-hover.square.effect1.colored .info {
background: rgba(118,185,215,1)
}
.royal-item-hover.square.effect1 .img {
z-index: 11;
position: absolute;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.square.effect1 .info {
background: #333;
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.square.effect1 a:hover .info {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.square.effect1.left_and_right .info h3 {
position: absolute;
top: 12px;
left: 12px;
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
margin: 0
}
.royal-item-hover.square.effect1.left_and_right .info p {
position: absolute;
right: 12px;
bottom: 12px;
margin: 0;
font-style: normal;
font-size: 12px;
color: #ffffff
}
.royal-item-hover.square.effect1.left_and_right a:hover .img {
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.6)
}
.royal-item-hover.square.effect1.top_to_bottom .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px 10px 0 4px;
margin: 10px 0 0
}
.royal-item-hover.square.effect1.top_to_bottom .info p {
font-style: normal;
font-size: 12px;
color: #ffffff;
padding: 5px;
text-align: center
}
.royal-item-hover.square.effect1.top_to_bottom a:hover .img {
-webkit-transform: translateY(30px) scale(0.6);
-moz-transform: translateY(30px) scale(0.6);
-ms-transform: translateY(30px) scale(0.6);
-o-transform: translateY(30px) scale(0.6);
transform: translateY(30px) scale(0.6)
}
.royal-item-hover.square.effect1.bottom_to_top .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px 10px 0 4px;
margin: 134px 0 0
}
.royal-item-hover.square.effect1.bottom_to_top .info p {
font-style: normal;
font-size: 12px;
color: #ffffff;
padding: 5px;
text-align: center
}
.royal-item-hover.square.effect1.bottom_to_top a:hover .img {
-webkit-transform: translateY(-30px) scale(0.6);
-moz-transform: translateY(-30px) scale(0.6);
-ms-transform: translateY(-30px) scale(0.6);
-o-transform: translateY(-30px) scale(0.6);
transform: translateY(-30px) scale(0.6)
}
.royal-item-hover.square.effect2 {
overflow: hidden
}
.royal-item-hover.square.effect2.colored .info {
background: rgba(118,185,215,1)
}
.royal-item-hover.square.effect2.colored .info h3 {
background: rgba(12,34,52,0.6)
}
.royal-item-hover.square.effect2 .img {
opacity: 1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1)
}
.royal-item-hover.square.effect2 .info {
background: #333;
visibility: hidden;
-webkit-transition: all .35s .3s ease-in-out;
-moz-transition: all .35s .3s ease-in-out;
transition: all .35s .3s ease-in-out
}
.royal-item-hover.square.effect2 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111;
margin: 30px 0 0;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-ms-transform: translateY(-200px);
-o-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all .35s .6s ease-in-out;
-moz-transition: all .35s .6s ease-in-out;
transition: all .35s .6s ease-in-out
}
.royal-item-hover.square.effect2 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #ffffff;
padding: 20px;
text-align: center;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-ms-transform: translateY(-200px);
-o-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all .35s .5s linear;
-moz-transition: all .35s .5s linear;
transition: all .35s .5s linear
}
.royal-item-hover.square.effect2 a:hover .img {
-webkit-transform: rotate(720deg) scale(0);
-moz-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
opacity: 0
}
.royal-item-hover.square.effect2 a:hover .info {
visibility: visible
}
.royal-item-hover.square.effect2 a:hover .info h3, .royal-item-hover.square.effect2 a:hover .info p {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.square.effect3 {
overflow: hidden
}
.royal-item-hover.square.effect3.colored .info {
background: rgba(118,185,215,1)
}
.royal-item-hover.square.effect3 .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.square.effect3 .info {
height: 65px;
background: #333;
opacity: 0;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.square.effect3 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px 10px 0 4px;
margin: 4px 0 0
}
.royal-item-hover.square.effect3 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #ffffff;
padding: 5px;
text-align: center
}
.royal-item-hover.square.effect3 a:hover .info {
visibility: visible;
opacity: 1
}
.royal-item-hover.square.effect3.bottom_to_top .info {
top: auto;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.square.effect3.bottom_to_top a:hover .img {
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
-o-transform: translateY(-50px);
transform: translateY(-50px)
}
.royal-item-hover.square.effect3.bottom_to_top a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.square.effect3.top_to_bottom .info {
bottom: auto;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.square.effect3.top_to_bottom a:hover .img {
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
transform: translateY(50px)
}
.royal-item-hover.square.effect3.top_to_bottom a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.square.effect4 {
overflow: hidden;
position: relative
}
.royal-item-hover.square.effect4.colored .info {
background: rgba(12,34,52,0.6)
}
.royal-item-hover.square.effect4.colored .mask1, .royal-item-hover.square.effect4.colored .mask2 {
background: rgba(118,185,215,0.60)
}
.royal-item-hover.square.effect4 .img {
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.square.effect4 .mask1, .royal-item-hover.square.effect4 .mask2 {
position: absolute;
background: #333;
background: rgba(0,0,0,0.6);
height: 361px;
width: 361px;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.square.effect4 .mask1 {
left: auto;
right: 0;
top: 0;
-webkit-transform: rotate(56.5deg) translateX(-180px);
-moz-transform: rotate(56.5deg) translateX(-180px);
-ms-transform: rotate(56.5deg) translateX(-180px);
-o-transform: rotate(56.5deg) translateX(-180px);
transform: rotate(56.5deg) translateX(-180px);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0
}
.royal-item-hover.square.effect4 .mask2 {
top: auto;
bottom: 0;
left: 0;
-webkit-transform: rotate(56.5deg) translateX(180px);
-moz-transform: rotate(56.5deg) translateX(180px);
-ms-transform: rotate(56.5deg) translateX(180px);
-o-transform: rotate(56.5deg) translateX(180px);
transform: rotate(56.5deg) translateX(180px);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%
}
.royal-item-hover.square.effect4 .info {
background: #111;
height: 0;
visibility: hidden;
width: 361px;
-webkit-transform: rotate(-33.5deg) translate(-112px, 166px);
-moz-transform: rotate(-33.5deg) translate(-112px, 166px);
-ms-transform: rotate(-33.5deg) translate(-112px, 166px);
-o-transform: rotate(-33.5deg) translate(-112px, 166px);
transform: rotate(-33.5deg) translate(-112px, 166px);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transition: all .35s ease-in-out .35s;
-moz-transition: all .35s ease-in-out .35s;
transition: all .35s ease-in-out .35s
}
.royal-item-hover.square.effect4 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: transparent;
margin-top: 5px;
border-bottom: 1px solid rgba(255,255,255,0.2);
opacity: 0;
-webkit-transition: all .35s ease-in-out .35s;
-moz-transition: all .35s ease-in-out .35s;
transition: all .35s ease-in-out .35s
}
.royal-item-hover.square.effect4 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #ffffff;
padding: 20px;
text-align: center;
opacity: 0;
-webkit-transition: all .35s ease-in-out .35s;
-moz-transition: all .35s ease-in-out .35s;
transition: all .35s ease-in-out .35s
}
.royal-item-hover.square.effect4 a:hover .mask1 {
-webkit-transform: rotate(56.5deg) translateX(1px);
-moz-transform: rotate(56.5deg) translateX(1px);
-ms-transform: rotate(56.5deg) translateX(1px);
-o-transform: rotate(56.5deg) translateX(1px);
transform: rotate(56.5deg) translateX(1px)
}
.royal-item-hover.square.effect4 a:hover .mask2 {
-webkit-transform: rotate(56.5deg) translateX(-1px);
-moz-transform: rotate(56.5deg) translateX(-1px);
-ms-transform: rotate(56.5deg) translateX(-1px);
-o-transform: rotate(56.5deg) translateX(-1px);
transform: rotate(56.5deg) translateX(-1px)
}
.royal-item-hover.square.effect4 a:hover .info {
width: 300px;
height: 120px;
visibility: visible;
top: 40px;
-webkit-transform: rotate(0deg) translate(0, 0);
-moz-transform: rotate(0deg) translate(0, 0);
-ms-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0)
}
.royal-item-hover.square.effect4 a:hover .info h3, .royal-item-hover.square.effect4 a:hover .info p {
opacity: 1
}
.royal-item-hover.square.effect5.colored .info {
background: rgba(118,185,215,1)
}
.royal-item-hover.square.effect5.colored .info h3 {
background: rgba(12,34,52,0.6)
}
.royal-item-hover.square.effect5 .img {
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.square.effect5 .info {
background: #333;
opacity: 0;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.square.effect5 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111;
margin: 30px 0 0
}
.royal-item-hover.square.effect5 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #ffffff;
padding: 20px;
text-align: center
}
.royal-item-hover.square.effect5 a:hover .img {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
transition-delay: 0
}
.royal-item-hover.square.effect5 a:hover .info {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
transition-delay: .3s
}
.royal-item-hover.square.effect5.left_to_right .info {
-webkit-transform: scale(0) rotate(-180deg);
-moz-transform: scale(0) rotate(-180deg);
-ms-transform: scale(0) rotate(-180deg);
-o-transform: scale(0) rotate(-180deg);
transform: scale(0) rotate(-180deg)
}
.royal-item-hover.square.effect5.right_to_left .info {
-webkit-transform: scale(0) rotate(180deg);
-moz-transform: scale(0) rotate(180deg);
-ms-transform: scale(0) rotate(180deg);
-o-transform: scale(0) rotate(180deg);
transform: scale(0) rotate(180deg)
}
.royal-item-hover.square.effect6 {
overflow: hidden
}
.royal-item-hover.square.effect6.colored .info {
background: rgba(118,185,215,0.60)
}
.royal-item-hover.square.effect6.colored .info h3 {
background: rgba(12,34,52,0.6)
}
.royal-item-hover.square.effect6 .img {
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.square.effect6 .info {
background: #333;
background: rgba(0,0,0,0.6);
visibility: hidden;
opacity: 0;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.square.effect6 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111;
margin: 30px 0 0;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.square.effect6 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #ffffff;
padding: 20px;
text-align: center;
-webkit-transition: all .35s .1s linear;
-moz-transition: all .35s .1s linear;
transition: all .35s .1s linear
}
.royal-item-hover.square.effect6 a:hover .img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2)
}
.royal-item-hover.square.effect6 a:hover .info {
visibility: visible;
opacity: 1
}
.royal-item-hover.square.effect6.from_top_and_bottom .info h3 {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.square.effect6.from_top_and_bottom .info p {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.square.effect6.from_top_and_bottom a:hover .info h3, .royal-item-hover.square.effect6.from_top_and_bottom a:hover .info p {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.square.effect6.from_left_and_right .info h3 {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%)
}
.royal-item-hover.square.effect6.from_left_and_right .info p {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%)
}
.royal-item-hover.square.effect6.from_left_and_right a:hover .info h3, .royal-item-hover.square.effect6.from_left_and_right a:hover .info p {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.square.effect6.top_to_bottom .info h3 {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.square.effect6.top_to_bottom .info p {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.square.effect6.top_to_bottom a:hover .info h3, .royal-item-hover.square.effect6.top_to_bottom a:hover .info p {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.square.effect6.bottom_to_top .info h3 {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.square.effect6.bottom_to_top .info p {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.square.effect6.bottom_to_top a:hover .info h3, .royal-item-hover.square.effect6.bottom_to_top a:hover .info p {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.square.effect7 {
overflow: hidden
}
.royal-item-hover.square.effect7.colored .info {
background: rgba(118,185,215,0.60)
}
.royal-item-hover.square.effect7.colored .info h3 {
background: rgba(12,34,52,0.6)
}
.royal-item-hover.square.effect7 .img {
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.square.effect7 .info {
background: #333;
background: rgba(0,0,0,0.6);
visibility: hidden;
opacity: 0;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.square.effect7 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111;
margin: 30px 0 0;
-webkit-transform: scale(4);
-moz-transform: scale(4);
-ms-transform: scale(4);
-o-transform: scale(4);
transform: scale(4);
-webkit-transition: all .35s .1s ease-in-out;
-moz-transition: all .35s .1s ease-in-out;
transition: all .35s .1s ease-in-out
}
.royal-item-hover.square.effect7 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #ffffff;
padding: 20px;
text-align: center;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-ms-transform: scale(5);
-o-transform: scale(5);
transform: scale(5);
-webkit-transition: all .35s .3s linear;
-moz-transition: all .35s .3s linear;
transition: all .35s .3s linear
}
.royal-item-hover.square.effect7 a:hover .img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2)
}
.royal-item-hover.square.effect7 a:hover .info {
visibility: visible;
opacity: 1
}
.royal-item-hover.square.effect7 a:hover .info h3, .royal-item-hover.square.effect7 a:hover .info p {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.square.effect8 {
overflow: hidden
}
.royal-item-hover.square.effect8.colored .info {
background: rgba(118,185,215,1)
}
.royal-item-hover.square.effect8.colored .info h3 {
background: rgba(12,34,52,0.6)
}
.royal-item-hover.square.effect8 .img {
opacity: 1;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.square.effect8 .info {
background: #333;
visibility: hidden;
opacity: 0;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.square.effect8 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111;
margin: 30px 0 0;
-webkit-transition: all .35s .1s ease-in-out;
-moz-transition: all .35s .1s ease-in-out;
transition: all .35s .1s ease-in-out
}
.royal-item-hover.square.effect8 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #ffffff;
padding: 20px;
text-align: center;
-webkit-transition: all .35s .15s linear;
-moz-transition: all .35s .15s linear;
transition: all .35s .15s linear
}
.royal-item-hover.square.effect8 a:hover .img {
opacity: 0
}
.royal-item-hover.square.effect8 a:hover .info {
visibility: visible;
opacity: 1
}
.royal-item-hover.square.effect8.scale_up .img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.square.effect8.scale_up .info {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0)
}
.royal-item-hover.square.effect8.scale_up .info h3, .royal-item-hover.square.effect8.scale_up .info p {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0)
}
.royal-item-hover.square.effect8.scale_up a:hover .img {
-webkit-transform: scale(5);
-moz-transform: scale(5);
-ms-transform: scale(5);
-o-transform: scale(5);
transform: scale(5)
}
.royal-item-hover.square.effect8.scale_up a:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.square.effect8.scale_up a:hover .info h3, .royal-item-hover.square.effect8.scale_up a:hover .info p {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.square.effect8.scale_down .img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.square.effect8.scale_down .info {
-webkit-transform: scale(5);
-moz-transform: scale(5);
-ms-transform: scale(5);
-o-transform: scale(5);
transform: scale(5)
}
.royal-item-hover.square.effect8.scale_down .info h3, .royal-item-hover.square.effect8.scale_down .info p {
-webkit-transform: scale(5);
-moz-transform: scale(5);
-ms-transform: scale(5);
-o-transform: scale(5);
transform: scale(5)
}
.royal-item-hover.square.effect8.scale_down a:hover .img {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5)
}
.royal-item-hover.square.effect8.scale_down a:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.square.effect8.scale_down a:hover .info h3, .royal-item-hover.square.effect8.scale_down a:hover .info p {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.square.effect9 {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px
}
.royal-item-hover.square.effect9.colored .info .info-back {
background: rgba(118,185,215,1)
}
.royal-item-hover.square.effect9.colored .info h3 {
background: rgba(12,34,52,0.6)
}
.royal-item-hover.square.effect9 .img {
position: relative;
z-index: 11;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out
}
.royal-item-hover.square.effect9 .info {
z-index: 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d
}
.royal-item-hover.square.effect9 .info .info-back {
opacity: 1;
width: 100%;
height: 100%;
padding-top: 30px;
background: #333
}
.royal-item-hover.square.effect9 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111;
margin: 0
}
.royal-item-hover.square.effect9 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #ffffff;
padding: 20px;
text-align: center
}
.royal-item-hover.square.effect9.left_to_right .img {
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%
}
.royal-item-hover.square.effect9.left_to_right a:hover .img {
-webkit-transform: rotate3d(0, 1, 0, 180deg);
-moz-transform: rotate3d(0, 1, 0, 180deg);
-ms-transform: rotate3d(0, 1, 0, 180deg);
-o-transform: rotate3d(0, 1, 0, 180deg);
transform: rotate3d(0, 1, 0, 180deg)
}
.royal-item-hover.square.effect9.right_to_left .img {
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%
}
.royal-item-hover.square.effect9.right_to_left a:hover .img {
-webkit-transform: rotate3d(0, 1, 0, -180deg);
-moz-transform: rotate3d(0, 1, 0, -180deg);
-ms-transform: rotate3d(0, 1, 0, -180deg);
-o-transform: rotate3d(0, 1, 0, -180deg);
transform: rotate3d(0, 1, 0, -180deg)
}
.royal-item-hover.square.effect9.top_to_bottom .img {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
.royal-item-hover.square.effect9.top_to_bottom a:hover .img {
-webkit-transform: rotate3d(1, 0, 0, -180deg);
-moz-transform: rotate3d(1, 0, 0, -180deg);
-ms-transform: rotate3d(1, 0, 0, -180deg);
-o-transform: rotate3d(1, 0, 0, -180deg);
transform: rotate3d(1, 0, 0, -180deg)
}
.royal-item-hover.square.effect9.bottom_to_top .img {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0
}
.royal-item-hover.square.effect9.bottom_to_top a:hover .img {
-webkit-transform: rotate3d(1, 0, 0, 180deg);
-moz-transform: rotate3d(1, 0, 0, 180deg);
-ms-transform: rotate3d(1, 0, 0, 180deg);
-o-transform: rotate3d(1, 0, 0, 180deg);
transform: rotate3d(1, 0, 0, 180deg)
}
.royal-item-hover.square.effect10 {
overflow: hidden
}
.royal-item-hover.square.effect10.colored .info {
background: rgba(118,185,215,1)
}
.royal-item-hover.square.effect10.colored .info h3 {
background: rgba(12,34,52,0.6)
}
.royal-item-hover.square.effect10 .img {
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.square.effect10 .info {
background: #333;
visibility: hidden;
opacity: 0;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.square.effect10 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111;
margin: 30px 0 0
}
.royal-item-hover.square.effect10 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #ffffff;
padding: 20px;
text-align: center
}
.royal-item-hover.square.effect10 a:hover .info {
visibility: visible;
opacity: 1
}
.royal-item-hover.square.effect10.left_to_right .img {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.square.effect10.left_to_right .info {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%)
}
.royal-item-hover.square.effect10.left_to_right a:hover .img {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%)
}
.royal-item-hover.square.effect10.left_to_right a:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.square.effect10.right_to_left .img {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.square.effect10.right_to_left .info {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%)
}
.royal-item-hover.square.effect10.right_to_left a:hover .img {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%)
}
.royal-item-hover.square.effect10.right_to_left a:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.square.effect10.top_to_bottom .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.square.effect10.top_to_bottom .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.square.effect10.top_to_bottom a:hover .img {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.square.effect10.top_to_bottom a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.square.effect10.bottom_to_top .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.square.effect10.bottom_to_top .info {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.square.effect10.bottom_to_top a:hover .img {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.square.effect10.bottom_to_top a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.square.effect11 {
overflow: hidden
}
.royal-item-hover.square.effect11.colored .info {
background: #3498d7
}
.royal-item-hover.square.effect11.colored .info h3 {
background: rgba(12,34,52,0.6)
}
.royal-item-hover.square.effect11 .img {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.square.effect11 .info {
background: #333;
visibility: hidden;
opacity: 0;
-webkit-transition: all .35s ease .2s;
-moz-transition: all .35s ease .2s;
transition: all .35s ease .2s
}
.royal-item-hover.square.effect11 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111;
margin: 30px 0 0
}
.royal-item-hover.square.effect11 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #ffffff;
padding: 20px;
text-align: center
}
.royal-item-hover.square.effect11 a:hover .img {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5)
}
.royal-item-hover.square.effect11 a:hover .info {
visibility: visible;
opacity: 1
}
.royal-item-hover.square.effect11.left_to_right .info {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%)
}
.royal-item-hover.square.effect11.left_to_right a:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.square.effect11.right_to_left .info {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%)
}
.royal-item-hover.square.effect11.right_to_left a:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.square.effect11.top_to_bottom .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.square.effect11.top_to_bottom a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.square.effect11.bottom_to_top .info {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.square.effect11.bottom_to_top a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.square.effect12 {
overflow: hidden
}
.royal-item-hover.square.effect12.colored .info {
background: rgba(118,185,215,0.60)
}
.royal-item-hover.square.effect12.colored .info h3 {
background: rgba(12,34,52,0.6)
}
.royal-item-hover.square.effect12 .img {
-webkit-transition: all .35s ease-in;
-moz-transition: all .35s ease-in;
transition: all .35s ease-in
}
.royal-item-hover.square.effect12 .info {
background: #333;
background: rgba(0,0,0,0.6);
visibility: hidden;
opacity: 0;
-webkit-transition: all .35s ease-in;
-moz-transition: all .35s ease-in;
transition: all .35s ease-in
}
.royal-item-hover.square.effect12 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111;
margin: 30px 0 0;
-webkit-transition: all .35s ease-in;
-moz-transition: all .35s ease-in;
transition: all .35s ease-in
}
.royal-item-hover.square.effect12 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #ffffff;
padding: 20px;
text-align: center;
-webkit-transition: all .35s ease-in;
-moz-transition: all .35s ease-in;
transition: all .35s ease-in
}
.royal-item-hover.square.effect12 a:hover .info {
visibility: visible;
opacity: 1;
-webkit-transition-delay: .2s;
-moz-transition-delay: .2s;
transition-delay: .2s
}
.royal-item-hover.square.effect12 a:hover .info h3 {
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
transition-delay: .3s
}
.royal-item-hover.square.effect12 a:hover .info p {
-webkit-transition-delay: .25s;
-moz-transition-delay: .25s;
transition-delay: .25s
}
.royal-item-hover.square.effect12.left_to_right .info {
-webkit-transform: translate(-460px, -100px) rotate(-180deg);
-moz-transform: translate(-460px, -100px) rotate(-180deg);
-ms-transform: translate(-460px, -100px) rotate(-180deg);
-o-transform: translate(-460px, -100px) rotate(-180deg);
transform: translate(-460px, -100px) rotate(-180deg)
}
.royal-item-hover.square.effect12.left_to_right .info h3 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-ms-transform: translateY(-100px);
-o-transform: translateY(-100px);
transform: translateY(-100px)
}
.royal-item-hover.square.effect12.left_to_right .info p {
-webkit-transform: translateX(-300px) rotate(-90deg);
-moz-transform: translateX(-300px) rotate(-90deg);
-ms-transform: translateX(-300px) rotate(-90deg);
-o-transform: translateX(-300px) rotate(-90deg);
transform: translateX(-300px) rotate(-90deg)
}
.royal-item-hover.square.effect12.left_to_right a:hover .info {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px)
}
.royal-item-hover.square.effect12.left_to_right a:hover .info h3 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px)
}
.royal-item-hover.square.effect12.left_to_right a:hover .info p {
-webkit-transform: translateX(0px) rotate(0deg);
-moz-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
-o-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg)
}
.royal-item-hover.square.effect12.right_to_left .info {
-webkit-transform: translate(460px, -100px) rotate(180deg);
-moz-transform: translate(460px, -100px) rotate(180deg);
-ms-transform: translate(460px, -100px) rotate(180deg);
-o-transform: translate(460px, -100px) rotate(180deg);
transform: translate(460px, -100px) rotate(180deg)
}
.royal-item-hover.square.effect12.right_to_left .info h3 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-ms-transform: translateY(-100px);
-o-transform: translateY(-100px);
transform: translateY(-100px)
}
.royal-item-hover.square.effect12.right_to_left .info p {
-webkit-transform: translateX(300px) rotate(90deg);
-moz-transform: translateX(300px) rotate(90deg);
-ms-transform: translateX(300px) rotate(90deg);
-o-transform: translateX(300px) rotate(90deg);
transform: translateX(300px) rotate(90deg)
}
.royal-item-hover.square.effect12.right_to_left a:hover .info {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px)
}
.royal-item-hover.square.effect12.right_to_left a:hover .info h3 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px)
}
.royal-item-hover.square.effect12.right_to_left a:hover .info p {
-webkit-transform: translateX(0px) rotate(0deg);
-moz-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
-o-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg)
}
.royal-item-hover.square.effect12.top_to_bottom .info {
-webkit-transform: translate(-265px, -145px) rotate(-45deg);
-moz-transform: translate(-265px, -145px) rotate(-45deg);
-ms-transform: translate(-265px, -145px) rotate(-45deg);
-o-transform: translate(-265px, -145px) rotate(-45deg);
transform: translate(-265px, -145px) rotate(-45deg)
}
.royal-item-hover.square.effect12.top_to_bottom .info h3 {
-webkit-transform: translate(200px, -200px);
-moz-transform: translate(200px, -200px);
-ms-transform: translate(200px, -200px);
-o-transform: translate(200px, -200px);
transform: translate(200px, -200px)
}
.royal-item-hover.square.effect12.top_to_bottom .info p {
-webkit-transform: translate(200px, -200px);
-moz-transform: translate(200px, -200px);
-ms-transform: translate(200px, -200px);
-o-transform: translate(200px, -200px);
transform: translate(200px, -200px)
}
.royal-item-hover.square.effect12.top_to_bottom a:hover .info {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition-delay: .2s;
-moz-transition-delay: .2s;
transition-delay: .2s
}
.royal-item-hover.square.effect12.top_to_bottom a:hover .info h3 {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
transition-delay: .3s
}
.royal-item-hover.square.effect12.top_to_bottom a:hover .info p {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
transition-delay: .4s
}
.royal-item-hover.square.effect12.bottom_to_top .info {
-webkit-transform: translate(265px, 145px) rotate(45deg);
-moz-transform: translate(265px, 145px) rotate(45deg);
-ms-transform: translate(265px, 145px) rotate(45deg);
-o-transform: translate(265px, 145px) rotate(45deg);
transform: translate(265px, 145px) rotate(45deg)
}
.royal-item-hover.square.effect12.bottom_to_top .info h3 {
-webkit-transform: translate(200px, -200px);
-moz-transform: translate(200px, -200px);
-ms-transform: translate(200px, -200px);
-o-transform: translate(200px, -200px);
transform: translate(200px, -200px)
}
.royal-item-hover.square.effect12.bottom_to_top .info p {
-webkit-transform: translate(-200px, 200px);
-moz-transform: translate(-200px, 200px);
-ms-transform: translate(-200px, 200px);
-o-transform: translate(-200px, 200px);
transform: translate(-200px, 200px)
}
.royal-item-hover.square.effect12.bottom_to_top a:hover .info {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition-delay: .2s;
-moz-transition-delay: .2s;
transition-delay: .2s
}
.royal-item-hover.square.effect12.bottom_to_top a:hover .info h3 {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
transition-delay: .3s
}
.royal-item-hover.square.effect12.bottom_to_top a:hover .info p {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
transition-delay: .4s
}
.royal-item-hover.square.effect13 {
overflow: hidden
}
.royal-item-hover.square.effect13.colored .info {
background: rgba(118,185,215,0.60)
}
.royal-item-hover.square.effect13.colored .info h3 {
background: rgba(12,34,52,0.6)
}
.royal-item-hover.square.effect13 .img {
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.square.effect13 .info {
background: #333;
background: rgba(0,0,0,0.6);
visibility: hidden;
opacity: 0;
pointer-events: none;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.square.effect13 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111;
margin: 30px 0 0
}
.royal-item-hover.square.effect13 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #ffffff;
padding: 20px;
text-align: center
}
.royal-item-hover.square.effect13 a:hover .img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2)
}
.royal-item-hover.square.effect13 a:hover .info {
visibility: visible;
opacity: 1
}
.royal-item-hover.square.effect13.left_to_right .info {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%)
}
.royal-item-hover.square.effect13.left_to_right a:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.square.effect13.right_to_left .info {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%)
}
.royal-item-hover.square.effect13.right_to_left a:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.royal-item-hover.square.effect13.top_to_bottom .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.square.effect13.top_to_bottom a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.square.effect13.bottom_to_top .info {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.square.effect13.bottom_to_top a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.square.effect14.colored .info {
background: rgba(118,185,215,1)
}
.royal-item-hover.square.effect14.colored .info h3 {
background: rgba(12,34,52,0.6)
}
.royal-item-hover.square.effect14 .img {
opacity: 1;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out
}
.royal-item-hover.square.effect14 .info {
background: #333;
visibility: hidden;
opacity: 0;
pointer-events: none;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all .35s ease .2s;
-moz-transition: all .35s ease .2s;
transition: all .35s ease .2s
}
.royal-item-hover.square.effect14 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111;
margin: 30px 0 0
}
.royal-item-hover.square.effect14 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #fff;
padding: 20px;
text-align: center
}
.royal-item-hover.square.effect14 a:hover .img {
opacity: 0;
pointer-events: none;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5)
}
.royal-item-hover.square.effect14 a:hover .info {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.royal-item-hover.square.effect14.left_to_right .img {
-webkit-transform: translateX(0) rotate(0);
-moz-transform: translateX(0) rotate(0);
-ms-transform: translateX(0) rotate(0);
-o-transform: translateX(0) rotate(0);
transform: translateX(0) rotate(0)
}
.royal-item-hover.square.effect14.left_to_right a:hover .img {
-webkit-transform: translateX(100%) rotate(180deg);
-moz-transform: translateX(100%) rotate(180deg);
-ms-transform: translateX(100%) rotate(180deg);
-o-transform: translateX(100%) rotate(180deg);
transform: translateX(100%) rotate(180deg)
}
.royal-item-hover.square.effect14.right_to_left .img {
-webkit-transform: translateX(0) rotate(0);
-moz-transform: translateX(0) rotate(0);
-ms-transform: translateX(0) rotate(0);
-o-transform: translateX(0) rotate(0);
transform: translateX(0) rotate(0)
}
.royal-item-hover.square.effect14.right_to_left a:hover .img {
-webkit-transform: translateX(-100%) rotate(-180deg);
-moz-transform: translateX(-100%) rotate(-180deg);
-ms-transform: translateX(-100%) rotate(-180deg);
-o-transform: translateX(-100%) rotate(-180deg);
transform: translateX(-100%) rotate(-180deg)
}
.royal-item-hover.square.effect14.top_to_bottom .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.square.effect14.top_to_bottom a:hover .img {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.royal-item-hover.square.effect14.bottom_to_top .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.royal-item-hover.square.effect14.bottom_to_top a:hover .img {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.royal-item-hover.square.effect15 {
overflow: hidden;
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px
}
.royal-item-hover.square.effect15.colored .info {
background: rgba(118,185,215,1)
}
.royal-item-hover.square.effect15 .img {
opacity: 1;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.royal-item-hover.square.effect15 .info {
background: #333;
opacity: 0;
-webkit-transition: all .35s ease-in-out .3s;
-moz-transition: all .35s ease-in-out .3s;
transition: all .35s ease-in-out .3s
}
.royal-item-hover.square.effect15 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111;
margin: 30px 0 0
}
.royal-item-hover.square.effect15 .info p {
font-style: normal;
font-size: 12px;
position: relative;
color: #ffffff;
padding: 20px;
text-align: center
}
.royal-item-hover.square.effect15 a:hover .img {
opacity: 0;
visibility: hidden
}
.royal-item-hover.square.effect15 a:hover .info {
visibility: visible;
opacity: 1
}
.royal-item-hover.square.effect15.left_to_right .img {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%
}
.royal-item-hover.square.effect15.left_to_right .info {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%
}
.royal-item-hover.square.effect15.left_to_right a:hover .img {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg)
}
.royal-item-hover.square.effect15.left_to_right a:hover .info {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0)
}
.royal-item-hover.square.effect15.right_to_left .img {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%
}
.royal-item-hover.square.effect15.right_to_left .info {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%
}
.royal-item-hover.square.effect15.right_to_left a:hover .img {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg)
}
.royal-item-hover.square.effect15.right_to_left a:hover .info {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0)
}
.royal-item-hover.square.effect15.top_to_bottom .img {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
.royal-item-hover.square.effect15.top_to_bottom .info {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0
}
.royal-item-hover.square.effect15.top_to_bottom a:hover .img {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg)
}
.royal-item-hover.square.effect15.top_to_bottom a:hover .info {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0)
}
.royal-item-hover.square.effect15.bottom_to_top .img {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0
}
.royal-item-hover.square.effect15.bottom_to_top .info {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%
}
.royal-item-hover.square.effect15.bottom_to_top a:hover .img {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg)
}
.royal-item-hover.square.effect15.bottom_to_top a:hover .info {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0)
}