Team:Tianjin/Resources/CSS:main
- fontcolor
{
color:#c4d8e1;
}
- services-graphic .area-graphic .area-icon.left .qwe
{
-webkit-animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 2s infinite; animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 2s infinite
}
- services-graphic .area-graphic .area-icon.left .qwe span
{
-webkit-animation: iconColor 16s ease 2s infinite; animation: iconColor 16s ease 2s infinite
}
- services-graphic .area-graphic .area-icon.right .qwe
{
-webkit-animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 6s infinite; animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 6s infinite
}
- services-graphic .area-graphic .area-icon.right .qwe span
{
-webkit-animation: iconColor 16s ease 6s infinite; animation: iconColor 16s ease 6s infinite
}
- services-graphic .area-typo.left .typo-block.qwe
{
padding-bottom: 78px
}
- services-graphic .area-typo.right .typo-block.qwe
{
padding-top: 150px
}
- services-graphic .area-graphic a.icon.qwe
{
margin-top: 225px;
margin-right: -30px
}
- services-graphic .area-graphic .area-icon.left .qwe:after
{
left: 26px;
top: 145px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
- services-graphic .area-graphic .area-icon.right .qwe:after
{
right: 26px;
top: 247px;
-webkit-transform:none;
transform: rotate(0deg)
}
.wrapper,.row,#page-Team_Tianjin #loading #landing-container #about-us {
*zoom: 1
}
.wrapper:before,.row:before,#page-Team_Tianjin #loading #landing-container #about-us:before,.wrapper:after,.row:after,#page-Team_Tianjin #loading #landing-container #about-us:after {
content: " "; display: table
}
.wrapper:after,.row:after,#page-Team_Tianjin #loading #landing-container #about-us:after {
clear: both
}
.animated {
-webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both
}
.animated.infinite {
-webkit-animation-iteration-count: infinite; animation-iteration-count: infinite
}
.animated.hinge {
-webkit-animation-duration: 2s; animation-duration: 2s
}
@-webkit-keyframes bounce {
0%,20%,53%,80%,100%
{
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
40%,43%
{
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0)
}
70%
{
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0)
}
90%
{
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0)
}
}
@keyframes bounce {
0%,20%,53%,80%,100%
{
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
40%,43%
{
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0)
}
70%
{
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0)
}
90%
{
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0)
}
}
.bounce {
-webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom
}
@-webkit-keyframes flash {
0%,50%,100%
{
opacity: 1
}
25%,75%
{
opacity: 0
}
}
@keyframes flash {
0%,50%,100%
{
opacity: 1
}
25%,75%
{
opacity: 0
}
}
.flash {
-webkit-animation-name: flash; animation-name: flash
}
@-webkit-keyframes pulse {
0%
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
50%
{
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
100%
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
@keyframes pulse {
0%
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
50%
{
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
100%
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
.pulse {
-webkit-animation-name: pulse; animation-name: pulse
}
@-webkit-keyframes rubberBand {
0%
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
30%
{
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1)
}
40%
{
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1)
}
50%
{
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1)
}
65%
{
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1)
}
75%
{
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1)
}
100%
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
@keyframes rubberBand {
0%
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
30%
{
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1)
}
40%
{
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1)
}
50%
{
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1)
}
65%
{
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1)
}
75%
{
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1)
}
100%
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
.rubberBand {
-webkit-animation-name: rubberBand; animation-name: rubberBand
}
@-webkit-keyframes shake {
0%,100%
{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,30%,50%,70%,90%
{
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,40%,60%,80%
{
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
@keyframes shake {
0%,100%
{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,30%,50%,70%,90%
{
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,40%,60%,80%
{
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
.shake {
-webkit-animation-name: shake; animation-name: shake
}
@-webkit-keyframes swing {
20%
{
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg)
}
40%
{
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg)
}
60%
{
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg)
}
80%
{
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg)
}
100%
{
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg)
}
}
@keyframes swing {
20%
{
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg)
}
40%
{
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg)
}
60%
{
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg)
}
80%
{
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg)
}
100%
{
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg)
}
}
.swing {
-webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing
}
@-webkit-keyframes tada {
0%
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
10%,20%
{
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)
}
30%,50%,70%,90%
{
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
}
40%,60%,80%
{
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
}
100%
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
@keyframes tada {
0%
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
10%,20%
{
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)
}
30%,50%,70%,90%
{
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
}
40%,60%,80%
{
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
}
100%
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
.tada {
-webkit-animation-name: tada; animation-name: tada
}
@-webkit-keyframes wobble {
0%
{
-webkit-transform: none;
transform: none
}
15%
{
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
}
30%
{
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
}
45%
{
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
}
60%
{
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
}
75%
{
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
}
100%
{
-webkit-transform: none;
transform: none
}
}
@keyframes wobble {
0%
{
-webkit-transform: none;
transform: none
}
15%
{
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
}
30%
{
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
}
45%
{
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
}
60%
{
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
}
75%
{
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
}
100%
{
-webkit-transform: none;
transform: none
}
}
.wobble {
-webkit-animation-name: wobble; animation-name: wobble
}
@-webkit-keyframes bounceIn {
0%,20%,40%,60%,80%,100%
{
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
0%
{
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3)
}
20%
{
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
40%
{
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9)
}
60%
{
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03)
}
80%
{
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97)
}
100%
{
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
@keyframes bounceIn {
0%,20%,40%,60%,80%,100%
{
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
0%
{
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3)
}
20%
{
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
40%
{
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9)
}
60%
{
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03)
}
80%
{
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97)
}
100%
{
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
.bounceIn {
-webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .75s; animation-duration: .75s
}
@-webkit-keyframes bounceInDown {
0%,60%,75%,90%,100%
{
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
0%
{
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0)
}
60%
{
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0)
}
75%
{
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0)
}
90%
{
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0)
}
100%
{
-webkit-transform: none;
transform: none
}
}
@keyframes bounceInDown {
0%,60%,75%,90%,100%
{
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
0%
{
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0)
}
60%
{
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0)
}
75%
{
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0)
}
90%
{
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0)
}
100%
{
-webkit-transform: none;
transform: none
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown; animation-name: bounceInDown
}
@-webkit-keyframes bounceInLeft {
0%,60%,75%,90%,100%
{
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
0%
{
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0)
}
60%
{
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0)
}
75%
{
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
90%
{
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0)
}
100%
{
-webkit-transform: none;
transform: none
}
}
@keyframes bounceInLeft {
0%,60%,75%,90%,100%
{
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
0%
{
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0)
}
60%
{
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0)
}
75%
{
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
90%
{
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0)
}
100%
{
-webkit-transform: none;
transform: none
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft; animation-name: bounceInLeft
}
@-webkit-keyframes bounceInRight {
0%,60%,75%,90%,100%
{
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
0%
{
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0)
}
60%
{
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0)
}
75%
{
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
90%
{
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0)
}
100%
{
-webkit-transform: none;
transform: none
}
}
@keyframes bounceInRight {
0%,60%,75%,90%,100%
{
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
0%
{
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0)
}
60%
{
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0)
}
75%
{
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
90%
{
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0)
}
100%
{
-webkit-transform: none;
transform: none
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight; animation-name: bounceInRight
}
@-webkit-keyframes bounceInUp {
0%,60%,75%,90%,100%
{
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
0%
{
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0)
}
60%
{
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0)
}
75%
{
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0)
}
90%
{
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0)
}
100%
{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
@keyframes bounceInUp {
0%,60%,75%,90%,100%
{
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
0%
{
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0)
}
60%
{
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0)
}
75%
{
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0)
}
90%
{
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0)
}
100%
{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp; animation-name: bounceInUp
}
@-webkit-keyframes bounceOut {
20%
{
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9)
}
50%,55%
{
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
100%
{
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3)
}
}
@keyframes bounceOut {
20%
{
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9)
}
50%,55%
{
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
100%
{
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3)
}
}
.bounceOut {
-webkit-animation-name: bounceOut; animation-name: bounceOut; -webkit-animation-duration: .75s; animation-duration: .75s
}
@-webkit-keyframes bounceOutDown {
20%
{
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0)
}
40%,45%
{
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0)
}
100%
{
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
}
@keyframes bounceOutDown {
20%
{
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0)
}
40%,45%
{
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0)
}
100%
{
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown; animation-name: bounceOutDown
}
@-webkit-keyframes bounceOutLeft {
20%
{
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0)
}
100%
{
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
}
@keyframes bounceOutLeft {
20%
{
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0)
}
100%
{
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft
}
@-webkit-keyframes bounceOutRight {
20%
{
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0)
}
100%
{
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
}
@keyframes bounceOutRight {
20%
{
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0)
}
100%
{
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight; animation-name: bounceOutRight
}
@-webkit-keyframes bounceOutUp {
20%
{
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0)
}
40%,45%
{
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0)
}
100%
{
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
}
@keyframes bounceOutUp {
20%
{
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0)
}
40%,45%
{
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0)
}
100%
{
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp; animation-name: bounceOutUp
}
@-webkit-keyframes fadeIn {
0%
{
opacity: 0
}
100%
{
opacity: 1
}
}
@keyframes fadeIn {
0%
{
opacity: 0
}
100%
{
opacity: 1
}
}
.fadeIn {
-webkit-animation-name: fadeIn; animation-name: fadeIn
}
@-webkit-keyframes fadeInDown {
0%
{
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInDown {
0%
{
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown; animation-name: fadeInDown
}
@-webkit-keyframes fadeInDownBig {
0%
{
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInDownBig {
0%
{
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig
}
@-webkit-keyframes fadeInLeft {
0%
{
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInLeft {
0%
{
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft; animation-name: fadeInLeft
}
@-webkit-keyframes fadeInLeftBig {
0%
{
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInLeftBig {
0%
{
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig
}
@-webkit-keyframes fadeInRight {
0%
{
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInRight {
0%
{
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight; animation-name: fadeInRight
}
@-webkit-keyframes fadeInRightBig {
0%
{
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInRightBig {
0%
{
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig
}
@-webkit-keyframes fadeInUp {
0%
{
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInUp {
0%
{
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp; animation-name: fadeInUp
}
@-webkit-keyframes fadeInUpBig {
0%
{
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInUpBig {
0%
{
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig
}
@-webkit-keyframes fadeOut {
0%
{
opacity: 1
}
100%
{
opacity: 0
}
}
@keyframes fadeOut {
0%
{
opacity: 1
}
100%
{
opacity: 0
}
}
.fadeOut {
-webkit-animation-name: fadeOut; animation-name: fadeOut
}
@-webkit-keyframes fadeOutDown {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
}
@keyframes fadeOutDown {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown; animation-name: fadeOutDown
}
@-webkit-keyframes fadeOutDownBig {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
}
@keyframes fadeOutDownBig {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig
}
@-webkit-keyframes fadeOutLeft {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
}
@keyframes fadeOutLeft {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft
}
@-webkit-keyframes fadeOutLeftBig {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
}
@keyframes fadeOutLeftBig {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig
}
@-webkit-keyframes fadeOutRight {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
}
@keyframes fadeOutRight {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight; animation-name: fadeOutRight
}
@-webkit-keyframes fadeOutRightBig {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
}
@keyframes fadeOutRightBig {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig
}
@-webkit-keyframes fadeOutUp {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
@keyframes fadeOutUp {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp; animation-name: fadeOutUp
}
@-webkit-keyframes fadeOutUpBig {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
}
@keyframes fadeOutUpBig {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig
}
@-webkit-keyframes flip {
0%
{
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
40%
{
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
50%
{
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
80%
{
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
100%
{
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
}
@keyframes flip {
0%
{
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
40%
{
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
50%
{
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
80%
{
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
100%
{
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
}
.animated.flip {
-webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip
}
@-webkit-keyframes flipInX {
0%
{
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transition-timing-function: ease-in;
opacity: 0
}
40%
{
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transition-timing-function: ease-in
}
60%
{
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1
}
80%
{
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
}
100%
{
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
@keyframes flipInX {
0%
{
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transition-timing-function: ease-in;
opacity: 0
}
40%
{
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transition-timing-function: ease-in
}
60%
{
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1
}
80%
{
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
}
100%
{
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
.flipInX {
-webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX
}
@-webkit-keyframes flipInY {
0%
{
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transition-timing-function: ease-in;
opacity: 0
}
40%
{
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transition-timing-function: ease-in
}
60%
{
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1
}
80%
{
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
}
100%
{
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
@keyframes flipInY {
0%
{
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transition-timing-function: ease-in;
opacity: 0
}
40%
{
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transition-timing-function: ease-in
}
60%
{
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1
}
80%
{
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
}
100%
{
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
.flipInY {
-webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY
}
@-webkit-keyframes flipOutX {
0%
{
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
30%
{
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1
}
100%
{
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0
}
}
@keyframes flipOutX {
0%
{
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
30%
{
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1
}
100%
{
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0
}
}
.flipOutX {
-webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-backface-visibility: visible !important; backface-visibility: visible !important
}
@-webkit-keyframes flipOutY {
0%
{
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
30%
{
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1
}
100%
{
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0
}
}
@keyframes flipOutY {
0%
{
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
30%
{
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1
}
100%
{
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0
}
}
.flipOutY {
-webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; -webkit-animation-duration: .75s; animation-duration: .75s
}
@-webkit-keyframes lightSpeedIn {
0%
{
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0
}
60%
{
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1
}
80%
{
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1
}
100%
{
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes lightSpeedIn {
0%
{
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0
}
60%
{
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1
}
80%
{
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1
}
100%
{
-webkit-transform: none;
transform: none;
opacity: 1
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out
}
@-webkit-keyframes lightSpeedOut {
0%
{
opacity: 1
}
100%
{
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0
}
}
@keyframes lightSpeedOut {
0%
{
opacity: 1
}
100%
{
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0
}
}
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in
}
@-webkit-keyframes rotateIn {
0%
{
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0
}
100%
{
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateIn {
0%
{
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0
}
100%
{
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
.rotateIn {
-webkit-animation-name: rotateIn; animation-name: rotateIn
}
@-webkit-keyframes rotateInDownLeft {
0%
{
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0
}
100%
{
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateInDownLeft {
0%
{
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0
}
100%
{
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft
}
@-webkit-keyframes rotateInDownRight {
0%
{
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0
}
100%
{
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateInDownRight {
0%
{
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0
}
100%
{
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight
}
@-webkit-keyframes rotateInUpLeft {
0%
{
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0
}
100%
{
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateInUpLeft {
0%
{
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0
}
100%
{
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft
}
@-webkit-keyframes rotateInUpRight {
0%
{
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0
}
100%
{
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateInUpRight {
0%
{
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0
}
100%
{
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight
}
@-webkit-keyframes rotateOut {
0%
{
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1
}
100%
{
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0
}
}
@keyframes rotateOut {
0%
{
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1
}
100%
{
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0
}
}
.rotateOut {
-webkit-animation-name: rotateOut; animation-name: rotateOut
}
@-webkit-keyframes rotateOutDownLeft {
0%
{
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1
}
100%
{
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0
}
}
@keyframes rotateOutDownLeft {
0%
{
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1
}
100%
{
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft
}
@-webkit-keyframes rotateOutDownRight {
0%
{
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1
}
100%
{
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0
}
}
@keyframes rotateOutDownRight {
0%
{
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1
}
100%
{
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight
}
@-webkit-keyframes rotateOutUpLeft {
0%
{
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1
}
100%
{
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0
}
}
@keyframes rotateOutUpLeft {
0%
{
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1
}
100%
{
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft
}
@-webkit-keyframes rotateOutUpRight {
0%
{
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1
}
100%
{
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0
}
}
@keyframes rotateOutUpRight {
0%
{
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1
}
100%
{
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight
}
@-webkit-keyframes hinge {
0%
{
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out
}
20%,60%
{
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out
}
40%,80%
{
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1
}
100%
{
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0
}
}
@keyframes hinge {
0%
{
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out
}
20%,60%
{
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out
}
40%,80%
{
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1
}
100%
{
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0
}
}
.hinge {
-webkit-animation-name: hinge; animation-name: hinge
}
@-webkit-keyframes rollIn {
0%
{
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes rollIn {
0%
{
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.rollIn {
-webkit-animation-name: rollIn; animation-name: rollIn
}
@-webkit-keyframes rollOut {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
}
}
@keyframes rollOut {
0%
{
opacity: 1
}
100%
{
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
}
}
.rollOut {
-webkit-animation-name: rollOut; animation-name: rollOut
}
@-webkit-keyframes zoomIn {
0%
{
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3)
}
50%
{
opacity: 1
}
}
@keyframes zoomIn {
0%
{
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3)
}
50%
{
opacity: 1
}
}
.zoomIn {
-webkit-animation-name: zoomIn; animation-name: zoomIn
}
@-webkit-keyframes zoomInDown {
0%
{
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
60%
{
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
}
}
@keyframes zoomInDown {
0%
{
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
60%
{
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
}
}
.zoomInDown {
-webkit-animation-name: zoomInDown; animation-name: zoomInDown
}
@-webkit-keyframes zoomInLeft {
0%
{
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
60%
{
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
}
}
@keyframes zoomInLeft {
0%
{
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
60%
{
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
}
}
.zoomInLeft {
-webkit-animation-name: zoomInLeft; animation-name: zoomInLeft
}
@-webkit-keyframes zoomInRight {
0%
{
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
60%
{
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
}
}
@keyframes zoomInRight {
0%
{
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
60%
{
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
}
}
.zoomInRight {
-webkit-animation-name: zoomInRight; animation-name: zoomInRight
}
@-webkit-keyframes zoomInUp {
0%
{
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
60%
{
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
}
}
@keyframes zoomInUp {
0%
{
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
60%
{
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
}
}
.zoomInUp {
-webkit-animation-name: zoomInUp; animation-name: zoomInUp
}
@-webkit-keyframes zoomOut {
0%
{
opacity: 1
}
50%
{
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3)
}
100%
{
opacity: 0
}
}
@keyframes zoomOut {
0%
{
opacity: 1
}
50%
{
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3)
}
100%
{
opacity: 0
}
}
.zoomOut {
-webkit-animation-name: zoomOut; animation-name: zoomOut
}
@-webkit-keyframes zoomOutDown {
40%
{
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
100%
{
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
}
}
@keyframes zoomOutDown {
40%
{
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
100%
{
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
}
}
.zoomOutDown {
-webkit-animation-name: zoomOutDown; animation-name: zoomOutDown
}
@-webkit-keyframes zoomOutLeft {
40%
{
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)
}
100%
{
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center
}
}
@keyframes zoomOutLeft {
40%
{
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)
}
100%
{
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center
}
}
.zoomOutLeft {
-webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft
}
@-webkit-keyframes zoomOutRight {
40%
{
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)
}
100%
{
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center
}
}
@keyframes zoomOutRight {
40%
{
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)
}
100%
{
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center
}
}
.zoomOutRight {
-webkit-animation-name: zoomOutRight; animation-name: zoomOutRight
}
@-webkit-keyframes zoomOutUp {
40%
{
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
100%
{
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
}
}
@keyframes zoomOutUp {
40%
{
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
100%
{
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
}
}
.zoomOutUp {
-webkit-animation-name: zoomOutUp; animation-name: zoomOutUp
}
@-webkit-keyframes cw {
0%
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100%
{
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes cw {
0%
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100%
{
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@-webkit-keyframes ccw {
0%
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100%
{
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg)
}
}
@keyframes ccw {
0%
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100%
{
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg)
}
}
@-webkit-keyframes scan {
0%
{
top: 10px
}
50%
{
top: 190px
}
100%
{
top: 10px
}
}
@keyframes scan {
0%
{
top: 10px
}
50%
{
top: 190px
}
100%
{
top: 10px
}
}
@-webkit-keyframes spinner-rotate-outer {
0%
{
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg)
}
100%
{
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg)
}
}
@keyframes spinner-rotate-outer {
0%
{
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg)
}
100%
{
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg)
}
}
@-webkit-keyframes spinner-rotate-inner {
0%
{
-webkit-transform: rotateZ(60deg);
transform: rotateZ(60deg)
}
100%
{
-webkit-transform: rotateZ(420deg);
transform: rotateZ(420deg)
}
}
@keyframes spinner-rotate-inner {
0%
{
-webkit-transform: rotateZ(60deg);
transform: rotateZ(60deg)
}
100%
{
-webkit-transform: rotateZ(420deg);
transform: rotateZ(420deg)
}
}
@-webkit-keyframes spinner-rotate-single-1 {
0%
{
-webkit-transform: rotateZ(56deg);
transform: rotateZ(56deg)
}
20%
{
-webkit-transform: rotateZ(-132deg);
transform: rotateZ(-132deg)
}
40%
{
-webkit-transform: rotateZ(-250deg);
transform: rotateZ(-250deg)
}
60%
{
-webkit-transform: rotateZ(40deg);
transform: rotateZ(40deg)
}
70%
{
-webkit-transform: rotateZ(-80deg);
transform: rotateZ(-80deg)
}
100%
{
-webkit-transform: rotateZ(56deg);
transform: rotateZ(56deg)
}
}
@keyframes spinner-rotate-single-1 {
0%
{
-webkit-transform: rotateZ(56deg);
transform: rotateZ(56deg)
}
20%
{
-webkit-transform: rotateZ(-132deg);
transform: rotateZ(-132deg)
}
40%
{
-webkit-transform: rotateZ(-250deg);
transform: rotateZ(-250deg)
}
60%
{
-webkit-transform: rotateZ(40deg);
transform: rotateZ(40deg)
}
70%
{
-webkit-transform: rotateZ(-80deg);
transform: rotateZ(-80deg)
}
100%
{
-webkit-transform: rotateZ(56deg);
transform: rotateZ(56deg)
}
}
@-webkit-keyframes spinner-rotate-single-2 {
0%
{
-webkit-transform: rotateZ(-24deg);
transform: rotateZ(-24deg)
}
10%
{
-webkit-transform: rotateZ(142deg);
transform: rotateZ(142deg)
}
20%
{
-webkit-transform: rotateZ(-87deg);
transform: rotateZ(-87deg)
}
30%
{
-webkit-transform: rotateZ(-345deg);
transform: rotateZ(-345deg)
}
40%
{
-webkit-transform: rotateZ(86deg);
transform: rotateZ(86deg)
}
50%
{
-webkit-transform: rotateZ(175deg);
transform: rotateZ(175deg)
}
60%
{
-webkit-transform: rotateZ(-245deg);
transform: rotateZ(-245deg)
}
70%
{
-webkit-transform: rotateZ(4deg);
transform: rotateZ(4deg)
}
80%
{
-webkit-transform: rotateZ(-132deg);
transform: rotateZ(-132deg)
}
90%
{
-webkit-transform: rotateZ(345deg);
transform: rotateZ(345deg)
}
100%
{
-webkit-transform: rotateZ(-24deg);
transform: rotateZ(-24deg)
}
}
@keyframes spinner-rotate-single-2 {
0%
{
-webkit-transform: rotateZ(-24deg);
transform: rotateZ(-24deg)
}
10%
{
-webkit-transform: rotateZ(142deg);
transform: rotateZ(142deg)
}
20%
{
-webkit-transform: rotateZ(-87deg);
transform: rotateZ(-87deg)
}
30%
{
-webkit-transform: rotateZ(-345deg);
transform: rotateZ(-345deg)
}
40%
{
-webkit-transform: rotateZ(86deg);
transform: rotateZ(86deg)
}
50%
{
-webkit-transform: rotateZ(175deg);
transform: rotateZ(175deg)
}
60%
{
-webkit-transform: rotateZ(-245deg);
transform: rotateZ(-245deg)
}
70%
{
-webkit-transform: rotateZ(4deg);
transform: rotateZ(4deg)
}
80%
{
-webkit-transform: rotateZ(-132deg);
transform: rotateZ(-132deg)
}
90%
{
-webkit-transform: rotateZ(345deg);
transform: rotateZ(345deg)
}
100%
{
-webkit-transform: rotateZ(-24deg);
transform: rotateZ(-24deg)
}
}
@-webkit-keyframes rotates {
0%
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100%
{
-webkit-transform: rotate(720deg);
transform: rotate(720deg)
}
}
@keyframes rotates {
0%
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100%
{
-webkit-transform: rotate(720deg);
transform: rotate(720deg)
}
}
@-webkit-keyframes rotatesInvers {
0%
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100%
{
-webkit-transform: rotate(-720deg);
transform: rotate(-720deg)
}
}
@keyframes rotatesInvers {
0%
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100%
{
-webkit-transform: rotate(-720deg);
transform: rotate(-720deg)
}
}
@-webkit-keyframes roll {
0%
{
stroke-dashoffset: 0
}
100%
{
stroke-dashoffset: 150
}
}
@keyframes roll {
0%
{
stroke-dashoffset: 0
}
100%
{
stroke-dashoffset: 150
}
}
@-webkit-keyframes iconBgColor {
0%
{
background-color: transparent
}
5%
{
background-color: #004a7c
}
15%
{
background-color: #004a7c
}
20%
{
background-color: transparent
}
}
@keyframes iconBgColor {
0%
{
background-color: transparent
}
5%
{
background-color: #004a7c
}
15%
{
background-color: #004a7c
}
20%
{
background-color: transparent
}
}
@-webkit-keyframes iconColor {
0%
{
color: #004a7c
}
5%
{
color: #fff
}
15%
{
color: #fff
}
20%
{
color: #004a7c
}
}
@keyframes iconColor {
0%
{
color: #004a7c
}
5%
{
color: #fff
}
15%
{
color: #fff
}
20%
{
color: #004a7c
}
}
@-webkit-keyframes svgColor {
0%
{
fill: #004a7c
}
25%
{
fill: #39898D
}
50%
{
fill: #004a7c
}
75%
{
fill: #39898D
}
100%
{
fill: #004a7c
}
}
@keyframes svgColor {
0%
{
fill: #004a7c
}
25%
{
fill: #39898D
}
50%
{
fill: #004a7c
}
75%
{
fill: #39898D
}
100%
{
fill: #004a7c
}
}
@keyframes pulse {
0%
{
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0
}
1%
{
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: .7
}
50%
{
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 0
}
100%
{
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 0
}
}
@keyframes fadeIn {
0%
{
opacity: 0
}
100%
{
opacity: 1
}
}
@-webkit-keyframes comeDown {
0%
{
opacity: 0
}
100%
{
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes comeDown {
0%
{
opacity: 0
}
100%
{
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes fadeInRight {
100%
{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@-webkit-keyframes fadeInRightWide {
0%
{
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInRightWide {
0%
{
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInUp {
0%
{
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
100%
{
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes bounceIn {
0%,20%,40%,60%,80%,100%
{
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
0%
{
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3)
}
20%
{
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
40%
{
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9)
}
60%
{
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03)
}
80%
{
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97)
}
100%
{
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
.bounceIn {
-webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .75s; animation-duration: .75s
}
@keyframes bounceInLeft {
0%,60%,75%,90%,100%
{
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
0%
{
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0)
}
60%
{
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0)
}
75%
{
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
90%
{
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0)
}
100%
{
-webkit-transform: none;
transform: none
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft; animation-name: bounceInLeft
}
@keyframes bounceOut {
20%
{
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9)
}
50%,55%
{
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
100%
{
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3)
}
}
.bounceOut {
-webkit-animation-name: bounceOut; animation-name: bounceOut; -webkit-animation-duration: .75s; animation-duration: .75s
}
.animated {
-webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both
}
.grey.lighten-5 {
background-color: #fafafa !important
}
.grey.lighten-4 {
background-color: #f5f5f5 !important
}
.grey.lighten-3 {
background-color: #eee !important
}
.grey.lighten-2 {
background-color: #e0e0e0 !important
}
.grey.lighten-1 {
background-color: #bdbdbd !important
}
.grey {
background-color: #9e9e9e !important
}
.grey.darken-1 {
background-color: #757575 !important
}
.grey.darken-2 {
background-color: #616161 !important
}
.grey.darken-3 {
background-color: #424242 !important
}
.grey.darken-4 {
background-color: #212121 !important
}
.background-dark {
background-color: #1A262F; color: #fff
}
html.lt-ie10 #loading,html.lt-ie10 .page-border {
display: none
}
html.lt-ie10 body {
text-align: center; background: #1A262F
}
html.lt-ie10 #loading>* {
display: block !important
}
html.lt-ie10 #content {
position: absolute; top: 50%; left: 0; right: 0; height: 300px; margin-top: -150px
}
html.lt-ie10 body h1,html.lt-ie10 body h2,html.lt-ie10 body h3 {
color: #fff
}
html.lt-ie10 body h1 {
color: #004a7c; font-size: 72px
}
html.lt-ie10 body h2 {
font-size: 28px; margin-top: 65px
}
html.lt-ie10 body h2 a {
color: #39898D
}
html.lt-ie10 body h2 a:hover,html.lt-ie10 body h2 a:focus {
text-decoration: none
}
html.lt-ie10 .icon-list {
margin: 0 auto; margin-top: 35px; width: 355px; text-align: center
}
html.lt-ie10 .icon-list li {
display: inline; float: left; margin: 0 8px
}
html.lt-ie10 .icon-list li a {
color: #fff; display: block; float: left; width: 55px
}
html.lt-ie10 .icon-list li a span.icon {
font-size: 50px; display: block; margin-bottom: 10px
}
html.lt-ie10 .icon-list li a span.icon-label {
font-size: 14px
}
html.lt-ie10 .icon-list li a:hover,html.lt-ie10 .icon-list li a:focus {
color: #004a7c
}
@media (min-width: 1025px) {
.hide-desktop
{
display: none !important
}
}
@media (max-width: 1024px) and (min-width: 721px) {
.hide-tablet
{
display: none !important
}
}
@media (max-width: 720px) {
.hide-mobile
{
display: none !important
}
}[class^="shadow-"] {
border: 1px solid rgba(0,0,0,0.06)
}
.shadow-1dp {
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.04)
}
.shadow-2dp {
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.04)
}
.shadow-3dp {
box-shadow: 0 3px 4px 0 rgba(0,0,0,0.04)
}
.shadow-4dp {
box-shadow: 0 4px 5px 0 rgba(0,0,0,0.04)
}
.shadow-6dp {
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.04)
}
.shadow-8dp {
box-shadow: 0 8px 10px 1px rgba(0,0,0,0.04)
}
.shadow-16dp {
box-shadow: 0 16px 24px 2px rgba(0,0,0,0.04)
}
a {
transition: all,0.4s,ease
}
- site-navigation
{
transition: all 0.2s ease-in-out
}
- site-navigation
{
transition: all 0.2s ease-in-out
}
- site-navigation>ul>li
{
transition: all 0.2s ease-in-out
}
- page-Team_Tianjin #home-navigation>a
{
opacity: 0; transition: all 0.2s ease-in-out
}
- page-Team_Tianjin #home-navigation>a:first-child
{
-webkit-animation: fadeIn 120ms ease-in-out 240ms forwards; animation: fadeIn 120ms ease-in-out 240ms forwards
}
- page-Team_Tianjin #home-navigation>a:nth-child(2)
{
-webkit-animation: fadeIn 120ms ease-in-out 480ms forwards; animation: fadeIn 120ms ease-in-out 480ms forwards
}
- page-Team_Tianjin #home-navigation>a:nth-child(3)
{
-webkit-animation: fadeIn 120ms ease-in-out 720ms forwards; animation: fadeIn 120ms ease-in-out 720ms forwards
}
- page-Team_Tianjin #home-navigation>a:nth-child(4)
{
-webkit-animation: fadeIn 120ms ease-in-out 960ms forwards; animation: fadeIn 120ms ease-in-out 960ms forwards
}
- page-Team_Tianjin #home-navigation>a:nth-child(5)
{
-webkit-animation: fadeIn 120ms ease-in-out 1200ms forwards; animation: fadeIn 120ms ease-in-out 1200ms forwards
}
- page-Team_Tianjin #home-portfolio-list--wrapper
{
opacity: 0; -webkit-animation: fadeInRightWide 800ms ease-in-out 1200ms forwards; animation: fadeInRightWide 800ms ease-in-out 1200ms forwards
}
- page-Team_Tianjin .main-content #about-us
{
opacity: 0; -webkit-animation: fadeIn 1200ms ease-in 960ms forwards; animation: fadeIn 1200ms ease-in 960ms forwards
}
.gear-canvas .gear.normal {
opacity: 0; -webkit-animation: fadeIn 360ms ease-in 2000ms forwards; animation: fadeIn 360ms ease-in 2000ms forwards
}
.gear-canvas .gear.normal .gear-inner {
-webkit-animation: cw 8s linear 3.5s infinite; animation: cw 8s linear 3.5s infinite
}
.gear-canvas .gear.large {
opacity: 0; -webkit-animation: fadeIn 360ms ease-in 1000ms forwards; animation: fadeIn 360ms ease-in 1000ms forwards
}
.gear-canvas .gear.large .gear-inner {
-webkit-animation: ccw 8s linear 3.5s infinite; animation: ccw 8s linear 3.5s infinite
}
.gear-canvas .gear.middle {
opacity: 0; -webkit-animation: fadeIn 360ms ease-in 1500ms forwards; animation: fadeIn 360ms ease-in 1500ms forwards
}
.gear-canvas .gear.middle .gear-inner {
-webkit-animation: cw 8s linear 3.5s infinite; animation: cw 8s linear 3.5s infinite
}
.gear-canvas .gear.small {
opacity: 0; -webkit-animation: fadeIn 360ms ease-in 2500ms forwards; animation: fadeIn 360ms ease-in 2500ms forwards
}
.gear-canvas .gear.small .gear-inner {
-webkit-animation: ccw 8s linear 3.5s infinite; animation: ccw 8s linear 3.5s infinite
}
.gear-canvas .gear.center {
opacity: 0; -webkit-animation: fadeIn 360ms ease-in 500ms forwards; animation: fadeIn 360ms ease-in 500ms forwards
}
.gear-canvas .gear.center .gear-inner {
-webkit-animation: cw 8s linear 3.5s infinite; animation: cw 8s linear 3.5s infinite
}
.gear-canvas .gear-area-c {
opacity: 0; -webkit-animation: fadeIn 360ms ease-in 2500ms forwards; animation: fadeIn 360ms ease-in 2500ms forwards
}
.gear-canvas .gear-area-c .one .gear-inner {
-webkit-animation: cw 8s linear 3.5s infinite; animation: cw 8s linear 3.5s infinite
}
.gear-canvas .gear-area-c .two .gear-inner {
-webkit-animation: ccw 8s linear 3.5s infinite; animation: ccw 8s linear 3.5s infinite
}
.gear-canvas .gear-area-c .three .gear-inner {
-webkit-animation: cw 8s linear 3.5s infinite; animation: cw 8s linear 3.5s infinite
}
.gear-canvas .gear-area-c .four {
-webkit-transform: rotate(-30deg); transform: rotate(-30deg)
}
.gear-canvas .gear-area-c .four .gear-inner {
-webkit-animation: ccw 8s linear 3.5s infinite; animation: ccw 8s linear 3.5s infinite
}
.gear-canvas .brain #laser {
-webkit-animation: scan 3.5s linear infinite; animation: scan 3.5s linear infinite
}
.gear-canvas .chain-wapper {
opacity: 0; -webkit-animation: fadeIn 360ms ease-in 3000ms forwards; animation: fadeIn 360ms ease-in 3000ms forwards
}
.gear-canvas .chain-wapper svg {
-webkit-animation: roll 4s linear 3.5s infinite; animation: roll 4s linear 3.5s infinite
}
- services-graphic .area-typo.left .typo-block,#services-graphic .area-typo.right .typo-block
{
opacity: 0; -webkit-animation: fadeInRight 500ms ease-in 1.2s forwards; animation: fadeInRight 500ms ease-in 1.2s forwards
}
- services-graphic .area-typo.left .typo-block .typo-line,#services-graphic .area-typo.right .typo-block .typo-line
{
transition: all 0.7s ease 0s
}
- services-graphic .area-graphic a.icon
{
opacity: 0
}
- services-graphic .area-graphic .area-icon.left .top
{
-webkit-animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 2s infinite; animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 2s infinite
}
- services-graphic .area-graphic .area-icon.left .top span
{
-webkit-animation: iconColor 16s ease 2s infinite; animation: iconColor 16s ease 2s infinite
}
- services-graphic .area-graphic .area-icon.right .top
{
-webkit-animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 6s infinite; animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 6s infinite
}
- services-graphic .area-graphic .area-icon.right .top span
{
-webkit-animation: iconColor 16s ease 6s infinite; animation: iconColor 16s ease 6s infinite
}
- services-graphic .area-graphic .area-icon.right .bottom
{
-webkit-animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 10s infinite; animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 10s infinite
}
- services-graphic .area-graphic .area-icon.right .bottom span
{
-webkit-animation: iconColor 16s ease 10s infinite; animation: iconColor 16s ease 10s infinite
}
- services-graphic .area-graphic .area-icon.left .bottom
{
-webkit-animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 14s infinite; animation: fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 14s infinite
}
- services-graphic .area-graphic .area-icon.left .bottom span
{
-webkit-animation: iconColor 16s ease 14s infinite; animation: iconColor 16s ease 14s infinite
}
- process-canvas .process-block.step-1,#process-canvas .process-block.step-2,#process-canvas .process-block.step-3
{
opacity: 0; -webkit-transform: translateY(-50px); transform: translateY(-50px); -webkit-animation: comeDown 800ms 1.2s ease forwards; animation: comeDown 800ms 1.2s ease forwards
}
- process-canvas .process-block.step-4,#process-canvas .process-block.step-5,#process-canvas .process-block.step-6
{
opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); -webkit-animation: comeDown 800ms 2s ease forwards; animation: comeDown 800ms 2s ease forwards
}
- full-portfolio-list--wrapper
{
opacity: 0; -webkit-animation: fadeInRightWide 800ms ease-in-out 240ms forwards; animation: fadeInRightWide 800ms ease-in-out 240ms forwards
}
- contact-preface h2
{
opacity: 0; -webkit-transform: translateY(-50px); transform: translateY(-50px); -webkit-animation: comeDown 350ms 500ms ease forwards; animation: comeDown 350ms 500ms ease forwards
}
- contact-preface p
{
opacity: 0; -webkit-transform: translateY(-50px); transform: translateY(-50px); -webkit-animation: comeDown 350ms 850ms ease forwards; animation: comeDown 350ms 850ms ease forwards
}
- contact-form .form-group
{
opacity: 0; transition: all 0.2s ease-in-out
}
- contact-form .form-group:first-child
{
-webkit-animation: fadeIn 240ms ease-in-out 1200ms forwards; animation: fadeIn 240ms ease-in-out 1200ms forwards
}
- contact-form .form-group:nth-child(2)
{
-webkit-animation: fadeIn 240ms ease-in-out 1680ms forwards; animation: fadeIn 240ms ease-in-out 1680ms forwards
}
- contact-form .form-group:nth-child(3)
{
-webkit-animation: fadeIn 240ms ease-in-out 1920ms forwards; animation: fadeIn 240ms ease-in-out 1920ms forwards
}
- contact-form .form-group:nth-child(4)
{
-webkit-animation: fadeIn 240ms ease-in-out 2160ms forwards; animation: fadeIn 240ms ease-in-out 2160ms forwards
}
- contact-form .form-group:nth-child(5)
{
-webkit-animation: fadeIn 240ms ease-in-out 2400ms forwards; animation: fadeIn 240ms ease-in-out 2400ms forwards
}
nav.page-navi a {
opacity: 0; -webkit-animation: fadeIn 500ms ease-in 1.5s forwards; animation: fadeIn 500ms ease-in 1.5s forwards
}
.typo-display-1 {
font-size: 96px
}
.typo-display-1.large {
font-size: 120px
}
.typo-display-1.small {
font-size: 81.6px
}
.typo-display-2 {
font-size: 56px
}
.typo-display-2.large {
font-size: 70px
}
.typo-display-2.small {
font-size: 47.6px
}
.typo-display-3 {
font-size: 32px
}
.typo-display-3.large {
font-size: 40px
}
.typo-display-3.small {
font-size: 27.2px
}
.typo-display-4 {
font-size: 28px
}
.typo-display-4.large {
font-size: 35px
}
.typo-display-4.small {
font-size: 23.8px
}
.typo-headline {
font-size: 22px
}
.typo-headline.large {
font-size: 27.5px
}
.typo-headline.small {
font-size: 18.7px
}
.typo-title {
font-size: 20px
}
.typo-title.large {
font-size: 25px
}
.typo-title.small {
font-size: 17px
}
.typo-subhead {
font-size: 16px
}
.typo-subhead.large {
font-size: 20px
}
.typo-subhead.small {
font-size: 13.6px
}
.typo-body-2 {
font-size: 14px
}
.typo-body-2.large {
font-size: 17.5px
}
.typo-body-2.small {
font-size: 11.9px
}
.typo-body-1 {
font-size: 14px
}
.typo-body-1.large {
font-size: 17.5px
}
.typo-body-1.small {
font-size: 11.9px
}
.typo-caption {
font-size: 12px
}
.typo-caption.large {
font-size: 15px
}
.typo-caption.small {
font-size: 10.2px
}
.typo-blockquote {
font-size: 18px
}
.typo-blockquote.large {
font-size: 22.5px
}
.typo-blockquote.small {
font-size: 15.3px
}
.typo-menu {
font-size: 10px
}
.typo-menu.large {
font-size: 12.5px
}
.typo-menu.small {
font-size: 8.5px
}
.typo-button {
font-size: 12px
}
.typo-button.large {
font-size: 15px
}
.typo-button.small {
font-size: 10.2px
}
body {
font-size: 14px
}
h1 {
font-family: "sofia-pro",sans-serif; text-transform: uppercase; font-size: 56px; font-weight: 700; line-height: 1em; letter-spacing: 2.8px; margin-top: 24px; margin-bottom: 24px
}
h1.large {
font-size: 70px
}
h2 {
font-family: "sofia-pro",sans-serif; text-transform: uppercase; font-size: 32px; font-weight: 700; line-height: 48px; letter-spacing: 0.64px; margin-top: 24px; margin-bottom: 24px
}
h2.large {
font-size: 40px
}
h3 {
font-family: 'raleway', cursive; text-transform: uppercase; font-size: 28px; font-weight: 700; line-height: 40px; margin-top: 24px; margin-bottom: 24px
}
h3.large {
font-size: 35px
}
h4 {
font-family: "sofia-pro",sans-serif; font-size: 22px; font-weight: 600; line-height: 32px; letter-spacing: 0.22px; margin-top: 24px; margin-bottom: 16px
}
h4.large {
font-size: 27.5px
}
h5 {
font-family: "sofia-pro",sans-serif; font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: 0.2px; margin-top: 24px; margin-bottom: 16px
}
h5.large {
font-size: 25px
}
h6 {
font-family: 'Baloo Bhaijaan', cursive; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: 0.16px; margin-top: 24px; margin-bottom: 16px
}
h6.large {
font-size: 20px
}
p {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0; margin-bottom: 16px
}
ul,ol,dl {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0
}
blockquote {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; font-size: 18px; font-weight: 300; font-style: italic; line-height: 1.35; letter-spacing: 0.08em
}
blockquote:before {
position: absolute; left: -0.5em; content: '“'
}
blockquote:after {
content: '”'; margin-left: -0.05em
}
address {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0; font-style: normal
}
.typo-display-1 {
font-family: "sofia-pro",sans-serif; text-transform: uppercase; font-size: 96px; font-weight: 400; line-height: 1
}
.typo-display-2 {
font-family: "sofia-pro",sans-serif; text-transform: uppercase; font-size: 56px; font-weight: 700; line-height: 1em; letter-spacing: 2.8px
}
.typo-display-3 {
font-family: "sofia-pro",sans-serif; text-transform: uppercase; font-size: 32px; font-weight: 700; line-height: 48px; letter-spacing: 0.64px
}
.typo-display-4 {
font-family: "sofia-pro",sans-serif; text-transform: uppercase; font-size: 28px; font-weight: 700; line-height: 40px
}
.typo-headline {
font-family: "sofia-pro",sans-serif; font-size: 22px; font-weight: 600; line-height: 32px; letter-spacing: 0.22px
}
.typo-title {
font-family: "sofia-pro",sans-serif; font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: 0.2px
}
.typo-subhead {
font-family: "sofia-pro",sans-serif; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: 0.16px
}
.typo-body-2 {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0
}
.typo-body-1 {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0
}
.typo-caption {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0
}
.typo-menu {
font-family: "sofia-pro",sans-serif; font-size: 10px; font-weight: 600; line-height: 1em; letter-spacing: 0.1em; text-transform: uppercase
}
.typo-menu.small {
font-size: 13px
}
.typo-button {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; font-weight: 500; text-transform: uppercase; line-height: 1em; letter-spacing: .28em; letter-spacing: 0.28px
}
.small {
font-size: 85%
}
@font-face {
font-family:'4eblabs';
src:url("../fonts/4eblabs.eot"); src:url("../fonts/4eblabs.eot") format("embedded-opentype"),url("../fonts/4eblabs.ttf") format("truetype"),url("../fonts/4eblabs.woff") format("woff"),url("../fonts/4eblabs.svg") format("svg"); font-weight:normal; font-style:normal } [class^="icon-"],[class*=" icon-"] {
font-family: '4eblabs'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale
}
.icon-behance:before {
content: "\e800"
}
.icon-calendar:before {
content: "\e617"
}
.icon-stats:before {
content: "\e618"
}
.icon-chrome:before {
content: "\e61a"
}
.icon-firefox:before {
content: "\e61b"
}
.icon-ie:before {
content: "\e61c"
}
.icon-opera:before {
content: "\e61d"
}
.icon-safari:before {
content: "\e61e"
}
.icon-codepen:before {
content: "\e619"
}
.icon-reorder:before {
content: "\e071"
}
.icon-remove-circle:before {
content: "\e074"
}
.icon-long-arrow-right:before {
content: "\e0ad"
}
.icon-long-arrow-left:before {
content: "\e0ae"
}
.icon-circle-arrow-right:before {
content: "\e138"
}
.icon-circle-arrow-left:before {
content: "\e139"
}
.icon-chevron-right:before {
content: "\e13c"
}
.icon-chevron-left:before {
content: "\e13d"
}
.icon-line-arrow-right:before {
content: "\e166"
}
.icon-line-arrow-left:before {
content: "\e167"
}
.icon-angle-right:before {
content: "\e16d"
}
.icon-angle-left:before {
content: "\e16e"
}
.icon-menu:before {
content: "\e607"
}
.icon-gmail:before {
content: "\e60a"
}
.icon-arrow-left:before {
content: "\e600"
}
.icon-arrow-right:before {
content: "\e601"
}
.icon-chart:before {
content: "\e602"
}
.icon-check:before {
content: "\e603"
}
.icon-css3:before {
content: "\e604"
}
.icon-disk:before {
content: "\e605"
}
.icon-dropbox:before {
content: "\e606"
}
.icon-flowchart:before {
content: "\e608"
}
.icon-git:before {
content: "\e609"
}
.icon-grunt:before {
content: "\e60b"
}
.icon-html5:before {
content: "\e60c"
}
.icon-illustrator:before {
content: "\e60d"
}
.icon-javascript:before {
content: "\e60e"
}
.icon-modernizr:before {
content: "\e60f"
}
.icon-mysql:before {
content: "\e610"
}
.icon-omnigraffle:before {
content: "\e611"
}
.icon-photoshop:before {
content: "\e612"
}
.icon-php:before {
content: "\e613"
}
.icon-sketch:before {
content: "\e614"
}
.icon-skype:before {
content: "\e615"
}
.icon-wordpress:before {
content: "\e616"
}
.icon-mobile:before {
content: "\e000"
}
.icon-search:before {
content: "\e007"
}
.icon-browser:before {
content: "\e00c"
}
.icon-expand:before {
content: "\e01a"
}
.icon-lightbulb:before {
content: "\e030"
}
.icon-pencil:before {
content: "\e032"
}
.icon-tools:before {
content: "\e033"
}
.icon-tools-2:before {
content: "\e034"
}
.icon-paintbrush:before {
content: "\e036"
}
.icon-heart:before {
content: "\e04a"
}
.icon-upload:before {
content: "\e04c"
}
.icon-facebook:before {
content: "\e05d"
}
.icon-twitter:before {
content: "\e05e"
}
.icon-googleplus:before {
content: "\e05f"
}
.icon-tumblr:before {
content: "\e061"
}
.icon-linkedin:before {
content: "\e062"
}
.icon-dribbble:before {
content: "\e063"
}
.text-capitalize {
text-transform: capitalize !important
}
.text-uppercase {
text-transform: uppercase !important
}
.text-lowercase {
text-transform: lowercase !important
}
.text-center {
text-align: center !important
}
.text-left {
text-align: left !important
}
.text-right {
text-align: right !important
}
.text-color-contrast-primary {
color: rgba(0,0,0,0.87)
}
.text-color-contrast-secondary
{
color: rgba(0,0,0,0.54)
}
.text-color-contrast-hint {
color: rgba(0,0,0,0.38)
}
.text-color-contrast-primary-alt {
color: #fff
}
.text-color-contrast-secondary-alt {
color: rgba(255,255,255,0.7)
}
.text-color-contrast-hint-alt {
color: rgba(255,255,255,0.5)
}
.font-family-title {
font-family: "sofia-pro",sans-serif
}
.font-family-body {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif
}
.font-ultra-thin {
font-weight: 100 !important
}
.font-thin {
font-weight: 200 !important
}
.font-light {
font-weight: 300 !important
}
.font-regular {
font-weight: 400 !important
}
.font-medium {
font-weight: 500 !important
}
.font-semi-bold {
font-weight: 600 !important
}
.font-bold {
font-weight: 700 !important
}
.font-black {
font-weight: 900 !important
}
.font-icons {
font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; word-wrap: normal; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased
}
- ,*:before,*:after
{
box-sizing: border-box
}
body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,dl,dd,ol,ul,figure {
margin: 0; padding: 0
}
body {
font: 400 20px/1.5 -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; color: rgba(0,0,0,0.87); background-color: #f2f2f2; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; -webkit-font-kerning: normal; font-kerning: normal
}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,ul,ol,dl,figure {
margin-bottom: 12px
}
img {
max-width: 100%; vertical-align: middle; border: 0
}
img.full-width {
width: 100% !important
}
figure>img {
display: block
}
figcaption {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0
}
ul,ol {
list-style: none
}
li>ul,li>ol {
margin-bottom: 0
}
a {
color: rgba(0,0,0,0.87); text-decoration: none
}
a:hover,a:focus {
color: #004a7c
}
- -moz-selection
{
background: #004a7c; color: #fff
}
- selection
{
background: #004a7c; color: #fff
}
blockquote {
color: #828282; border-left: 4px solid #e8e8e8; padding-left: 12px
}
blockquote>:last-child {
margin-bottom: 0
}
pre,code {
font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef
}
code {
padding: 1px 5px
}
pre {
padding: 8px 12px; overflow-x: auto
}
pre>code {
border: 0; padding-right: 0; padding-left: 0
}
.wrapper {
max-width: 960px; margin-right: auto; margin-left: auto
}
@media-query (max-width: 1024px) {
.wrapper
{
max-width: calc(960px - (24px));
padding-right: 12px;
padding-left: 12px
}
}
@media (max-width: 960px) {
.wrapper
{
padding-left: 24px;
padding-right: 24px
}
}
.wrapper:after,.row:after,#page-Team_Tianjin #loading #landing-container #about-us:after {
content: ""; display: table; clear: both
}
.icon>svg {
display: inline-block; vertical-align: middle
}
.icon>svg path {
fill: #828282
}
.line-drawing {
transition: opacity 0.5s
}
.line-drawing path {
fill: none
}
path.line-round {
stroke-linecap: round
}
path.stroke-medium {
stroke-width: 1
}
path.stroke-thin {
stroke-width: 1
}
symbol g {
fill: #f2f2f2
}
- -webkit-scrollbar
{
display: none
}
{
-ms-overflow-style: none
}
.circle {
border-radius: 100%
}
.show {
opacity: 1
}
.hide {
opacity: 0
}
.pull-left {
float: left
}
.pull-right {
float: right
}
.button {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; font-weight: 500; text-transform: uppercase; line-height: 1em; letter-spacing: .28em; letter-spacing: 0.28px; height: 36px; display: inline-block; text-align: center; line-height: 36px; background-color: #004a7c; color: #fff !important; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.54); padding-left: 1rem; padding-right: 1rem
}
.button.fixed {
width: 96px
}
.button.extend {
width: 100%
}
.button:hover {
background-color: #39898D; transition: all 0.3ms ease-in-out; -webkit-transition: all 0.3ms ease-in-out
}
.button.secondary {
background-color: #39898D
}
.button.secondary:hover,.button.secondary:focus {
background-color: #004a7c
}
.button.dark {
background-color: #1A262F
}
.button.dark:hover,.button.dark:focus {
background-color: #004a7c
}
.rippleEffect {
-webkit-animation: rippleDrop 1s linear; animation: rippleDrop 1s linear
}
@-webkit-keyframes rippleDrop {
100%
{
-webkit-transform: scale(500);
transform: scale(500)
}
}
@keyframes rippleDrop {
100%
{
-webkit-transform: scale(500);
transform: scale(500)
}
}
.portfolio--4ocal-web-ui-kit {
background: #F7CAC9
}
.page--4ocal-web-ui-kit .page-border {
border-color: #F7CAC9
}
.page--4ocal-web-ui-kit .page-border .portfolio-nav-panel {
background: #F7CAC9
}
.page--4ocal-web-ui-kit .page-border .portfolio--classic .article-title {
color: #F7CAC9
}
.portfolio--4eeder-web-ui-kit {
background: #034F84
}
.page--4eeder-web-ui-kit .page-border {
border-color: #034F84
}
.page--4eeder-web-ui-kit .page-border .portfolio-nav-panel {
background: #034F84
}
.page--4eeder-web-ui-kit .page-border .portfolio--classic .article-title {
color: #034F84
}
.portfolio--4boutique-ecommerce-ui-kit {
background: #C8A985
}
.page--4boutique-ecommerce-ui-kit .page-border {
border-color: #C8A985
}
.page--4boutique-ecommerce-ui-kit .page-border .portfolio-nav-panel {
background: #C8A985
}
.page--4boutique-ecommerce-ui-kit .page-border .portfolio--classic .article-title {
color: #C8A985
}
.portfolio--baobaofaner-website {
background: #FF66A4
}
.page--baobaofaner-website .page-border {
border-color: #FF66A4
}
.page--baobaofaner-website .page-border .portfolio-nav-panel {
background: #FF66A4
}
.page--baobaofaner-website .page-border .portfolio--classic .article-title {
color: #FF66A4
}
.portfolio--kjnational-website {
background: #4F7390
}
.page--kjnational-website .page-border {
border-color: #4F7390
}
.page--kjnational-website .page-border .portfolio-nav-panel {
background: #4F7390
}
.page--kjnational-website .page-border .portfolio--classic .article-title {
color: #4F7390
}
.portfolio--the12volt-ecommerce-website {
background: #d80c18
}
.page--the12volt-ecommerce-website .page-border {
border-color: #d80c18
}
.page--the12volt-ecommerce-website .page-border .portfolio-nav-panel {
background: #d80c18
}
.page--the12volt-ecommerce-website .page-border .portfolio--classic .article-title {
color: #d80c18
}
.portfolio--akoralanecove-website {
background: #98af38
}
.page--akoralanecove-website .page-border
{
border-color: #98af38
}
.page--akoralanecove-website .page-border .portfolio-nav-panel {
background: #98af38
}
.page--akoralanecove-website .page-border .portfolio--classic .article-title {
color: #98af38
}
.portfolio--4ebstudio-website {
background: #004a7c
}
.page--4ebstudio-website .page-border {
border-color: #004a7c
}
.page--4ebstudio-website .page-border .portfolio-nav-panel {
background: #004a7c
}
.page--4ebstudio-website .page-border .portfolio--classic .article-title {
color: #004a7c
}
.portfolio--htcmc-website {
background: #35bc7a
}
.page--htcmc-website .page-border {
border-color: #35bc7a
}
.page--htcmc-website .page-border .portfolio-nav-panel {
background: #35bc7a
}
.page--htcmc-website .page-border .portfolio--classic .article-title {
color: #35bc7a
}
.portfolio--4wow-template {
background: #fc0
}
.page--4wow-template .page-border {
border-color: #fc0
}
.page--4wow-template .page-border .portfolio-nav-panel {
background: #fc0
}
.page--4wow-template .page-border .portfolio--classic .article-title {
color: #fc0
}
.portfolio--myaushop-ecommerce-website {
background: #afd9f5
}
.page--myaushop-ecommerce-website .page-border {
border-color: #afd9f5
}
.page--myaushop-ecommerce-website .page-border .portfolio-nav-panel {
background: #afd9f5
}
.page--myaushop-ecommerce-website .page-border .portfolio--classic .article-title {
color: #afd9f5
}
.portfolio--4boutique-ecommerce-ui-kit {
background-image: linear-gradient(219deg, #C8A985, #F0E3CC)
}
.page--4boutique-ecommerce-ui-kit .page-border {
border-image-source: radial-gradient(circle at 17% 100%, #C8A985, #F0E3CC 33%, #F0E3CC 67%, #C8A985); border-image-slice: 1
}
.portfolio--applemusic-gui {
background-image: radial-gradient(circle at 17% 100%, #e751be, #eb719d 33%, #9c62ea 67%, #4e54e6)
}
.portfolio--4wow-template {
background-image: linear-gradient(219deg, #73E0B8, #fc0)
}
.page--4wow-template .page-border {
border-image-source: linear-gradient(to left, #73e0b8, #73e0b8 50%, #fc0 50%, #fc0); border-image-slice: 1
}
.price-table {
border: 1px solid rgba(255,255,255,0.12); padding: 48px 24px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column
}
.price-table.recommend {
border: 2px solid #004a7c
}
.price-table .price-table--header {
text-align: center
}
.price-table .price {
margin-top: 32px; margin-bottom: 32px; text-align: center
}
.price-table .price * {
line-height: 1em; margin: 0 !important
}
.price-table .price .price--number {
font-weight: 200; letter-spacing: 0
}
.price-table .price .price--caption {
font-family: "sofia-pro",sans-serif; font-size: 10px; font-weight: 600; line-height: 1em; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7)
}
.price-table .price .price--caption.small {
font-size: 13px
}
.price-table ul>li {
line-height: 1.7em; font-weight: 300; letter-spacing: 0.05em; padding-left: 1em; position: relative
}
.price-table ul>li:before {
content: "\00b7"; position: absolute; left: 0
}
.price-table footer.portfolio-table--footer {
text-align: center; margin-top: 1rem
}
.price-table footer.portfolio-table--footer .label {
font-size: 10px; text-transform: uppercase; color: #39898D; border: 1px solid #39898D; padding: 2px 4px
}
.price-table footer.portfolio-table--footer .market-links {
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; margin-top: 1rem
}
.price-table footer.portfolio-table--footer .market-links img {
width: 100px
}
.scroll-bar {
width: 360px; margin-left: 24px; margin-top: 60px; margin-bottom: 24px; position: relative; border-bottom: 1px dotted #c5c5c5
}
@media (max-width: 480px) {
.scroll-bar
{
width: 240px
}
}
.ui-slider-handle {
position: absolute; top: -12px; bottom: -12px; left: 24px; width: 24px; height: 24px; border-radius: 50px; background: #39898D; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5); cursor: move; outline: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle
}
.ui-slider-handle:first-of-type {
display: none
}
.ui-slider-handle:before {
content: "\2039"; width: 50%; text-align: right; color: white; margin-top: -2px
}
.ui-slider-handle:after {
content: "\203A"; width: 50%; text-align: left; color: white; margin-top: -2px
}
.ui-slider-range {
height: 1px; margin-bottom: -1px; background: rgba(0,0,0,0.87)
}
.slides input {
display: none
}
.slides #overflow {
overflow: hidden
}
.slides figure img {
width: 100%
}
.slides #slides .inner {
width: 800%; line-height: 0
}
.slides #slides figure {
width: 12.5%; float: left; margin: 0
}
.slides #slide1:checked ~ #slides .inner {
margin-left: 0%
}
.slides #slide2:checked ~ #slides .inner {
margin-left: -100%
}
.slides #slide3:checked ~ #slides .inner {
margin-left: -200%
}
.slides #slide4:checked ~ #slides .inner {
margin-left: -300%
}
.slides #slide5:checked ~ #slides .inner {
margin-left: -400%
}
.slides #slide6:checked ~ #slides .inner {
margin-left: -500%
}
.slides #slide7:checked ~ #slides .inner {
margin-left: -600%
}
.slides #slide8:checked ~ #slides .inner {
margin-left: -700%
}
.slides #controls {
margin: -30% 0 0 0; width: 100%; height: 50px
}
.slides #controls label {
display: none; width: 50px; height: 50px; opacity: 0.3
}
.slides #active {
margin: 28% 0 0; text-align: center
}
@media (max-width: 480px) {
.slides #active
{
margin: 10% 0 0
}
}
.slides #active label {
border-radius: 5px; display: inline-block; width: 10px; height: 10px; background: #999999; margin-left: 4px; margin-right: 4px
}
.slides #active label:hover {
background: #ccc; border-color: #777 !important; cursor: pointer
}
.slides #controls label:hover {
opacity: 0.8; cursor: pointer
}
.slides #slide1:checked ~ #controls label:nth-child(2) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides #slide1:checked ~ #controls label:nth-child(2)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 26px 47px
}
}
.slides #slide2:checked ~ #controls label:nth-child(3) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides #slide2:checked ~ #controls label:nth-child(3)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 26px 47px
}
}
.slides #slide3:checked ~ #controls label:nth-child(4) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides #slide3:checked ~ #controls label:nth-child(4)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 26px 47px
}
}
.slides #slide4:checked ~ #controls label:nth-child(5) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides #slide4:checked ~ #controls label:nth-child(5)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 26px 47px
}
}
.slides #slide5:checked ~ #controls label:nth-child(6) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides #slide5:checked ~ #controls label:nth-child(6)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 26px 47px
}
}
.slides #slide6:checked ~ #controls label:nth-child(7) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides #slide6:checked ~ #controls label:nth-child(7)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 26px 47px
}
}
.slides #slide7:checked ~ #controls label:nth-child(8) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides #slide7:checked ~ #controls label:nth-child(8)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 26px 47px
}
}
.slides #slide8:checked ~ #controls label:nth-child(9) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides #slide8:checked ~ #controls label:nth-child(9)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 26px 47px
}
}
.slides #slide8:checked ~ #controls label:nth-child(1) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides #slide8:checked ~ #controls label:nth-child(1)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 26px 47px
}
}
.slides #slide1:checked ~ #controls label:nth-child(8) {
background: url("../images/arrow-prev.png") no-repeat center;
float: left;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides #slide1:checked ~ #controls label:nth-child(8)
{
background: url("../images/arrow-prev@2x.png") no-repeat center;
background-size: 26px 47px
}
}
.slides #slide2:checked ~ #controls label:nth-child(1) {
background: url("../images/arrow-prev.png") no-repeat center;
float: left;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides #slide2:checked ~ #controls label:nth-child(1)
{
background: url("../images/arrow-prev@2x.png") no-repeat center;
background-size: 26px 47px
}
}
.slides #slide3:checked ~ #controls label:nth-child(2) {
background: url("../images/arrow-prev.png") no-repeat center;
float: left;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides #slide3:checked ~ #controls label:nth-child(2)
{
background: url("../images/arrow-prev@2x.png") no-repeat center;
background-size: 26px 47px
}
}
.slides #slide4:checked ~ #controls label:nth-child(3) {
background: url("../images/arrow-prev.png") no-repeat center;
float: left;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides #slide4:checked ~ #controls label:nth-child(3)
{
background: url("../images/arrow-prev@2x.png") no-repeat center;
background-size: 26px 47px
}
}
.slides #slide5:checked ~ #controls label:nth-child(4) {
background: url("../images/arrow-prev.png") no-repeat center;
float: left;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides #slide5:checked ~ #controls label:nth-child(4)
{
background: url("../images/arrow-prev@2x.png") no-repeat center;
background-size: 26px 47px
}
}
.slides #slide6:checked ~ #controls label:nth-child(5) {
background: url("../images/arrow-prev.png") no-repeat center;
float: left;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides #slide6:checked ~ #controls label:nth-child(5)
{
background: url("../images/arrow-prev@2x.png") no-repeat center;
background-size: 26px 47px
}
}
.slides #slide7:checked ~ #controls label:nth-child(6) {
background: url("../images/arrow-prev.png") no-repeat center;
float: left;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides #slide7:checked ~ #controls label:nth-child(6)
{
background: url("../images/arrow-prev@2x.png") no-repeat center;
background-size: 26px 47px
}
}
.slides #slide8:checked ~ #controls label:nth-child(7) {
background: url("../images/arrow-prev.png") no-repeat center;
float: left;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides #slide8:checked ~ #controls label:nth-child(7)
{
background: url("../images/arrow-prev@2x.png") no-repeat center;
background-size: 26px 47px
}
}
.slides #slide1:checked ~ #active label:nth-child(1) {
background: #004a7c
}
.slides #slide2:checked ~ #active label:nth-child(2) {
background: #004a7c
}
.slides #slide3:checked ~ #active label:nth-child(3) {
background: #004a7c
}
.slides #slide4:checked ~ #active label:nth-child(4) {
background: #004a7c
}
.slides #slide5:checked ~ #active label:nth-child(5) {
background: #004a7c
}
.slides #slide6:checked ~ #active label:nth-child(6) {
background: #004a7c
}
.slides #slide7:checked ~ #active label:nth-child(7) {
background: #004a7c
}
.slides #slide8:checked ~ #active label:nth-child(8) {
background: #004a7c
}
.slides #slides {
margin-left: auto; margin-right: auto; box-sizing: border-box
}
.slides #slides .inner {
-webkit-transform: translateZ(0); transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1)
}
.slides #slider {
-webkit-transform: translateZ(0); transition: all 0.5s ease-out
}
.slides #controls label {
-webkit-transform: translateZ(0); transition: opacity 0.2s ease-out
}
.slides #controls,.slides #slides,.slides #active,.slides #active label {
-webkit-transform: translateZ(0); transition: all 0.5s ease-out
}
.slides-v {
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center
}
.slides-v input {
display: none
}
.slides-v #slides,.slides-v #overflow {
overflow: visible; width: calc(50vw - 0.5rem); height: 33.33vw
}
.slides-v figure img {
width: 100%; height: 100%
}
.slides-v #slides .inner {
width: calc(50vw - 0.5rem); height: 800%; line-height: 0
}
.slides-v #slides figure {
width: calc(50vw - 0.5rem); height: 33.33vw; float: left; margin: 0
}
.slides-v #slide1:checked ~ #slides .inner {
margin-top: 0vw
}
.slides-v #slide2:checked ~ #slides .inner {
margin-top: -33.33vw
}
.slides-v #slide3:checked ~ #slides .inner {
margin-top: -66.66vw
}
.slides-v #slide4:checked ~ #slides .inner {
margin-top: -99.99vw
}
.slides-v #slide5:checked ~ #slides .inner {
margin-top: -133.32vw
}
.slides-v #slide6:checked ~ #slides .inner {
margin-top: -166.65vw
}
.slides-v #slide7:checked ~ #slides .inner {
margin-top: -199.98vw
}
.slides-v #slide8:checked ~ #slides .inner {
margin-top: -233.31vw
}
.slides-v #controls {
width: 100%; margin: 0; position: absolute; z-index: 50; -webkit-transform: rotate(90deg); transform: rotate(90deg); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center
}
.slides-v #controls .controls-container {
width: 33.33vw
}
@media not all and (min-resolution: 0.001dpcm) { @ supports (-webkit-appearance: none)
{
.slides-v #controls
{ left: 0;
top: calc(50% - 30px) }
} }
@media screen and (min-width: 0\0) {
.slides-v #controls
{
left: 0;
top: calc(50% - 30px)
}
}
.slides-v #controls label {
display: none; width: 60px; height: 60px; opacity: 0.3
}
.slides-v #active {
margin: 28% 0 0; text-align: center; height: 60px
}
@media (max-width: 480px) {
.slides-v #active
{
margin: 10% 0 0
}
}
.slides-v #active label {
border-radius: 5px; display: inline-block; width: 10px; height: 10px; background: #999999; margin-left: 4px; margin-right: 4px
}
.slides-v #active label:hover {
background: #ccc; border-color: #777 !important; cursor: pointer
}
.slides-v #controls label:hover {
opacity: 0.8; cursor: pointer
}
.slides-v #slide1:checked ~ #controls label:nth-child(2) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides-v #slide1:checked ~ #controls label:nth-child(2)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 30px 60px
}
}
.slides-v #slide2:checked ~ #controls label:nth-child(3) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides-v #slide2:checked ~ #controls label:nth-child(3)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 30px 60px
}
}
.slides-v #slide3:checked ~ #controls label:nth-child(4) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides-v #slide3:checked ~ #controls label:nth-child(4)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 30px 60px
}
}
.slides-v #slide4:checked ~ #controls label:nth-child(5) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides-v #slide4:checked ~ #controls label:nth-child(5)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 30px 60px
}
}
.slides-v #slide5:checked ~ #controls label:nth-child(6) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides-v #slide5:checked ~ #controls label:nth-child(6)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 30px 60px
}
}
.slides-v #slide6:checked ~ #controls label:nth-child(7) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides-v #slide6:checked ~ #controls label:nth-child(7)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 30px 60px
}
}
.slides-v #slide7:checked ~ #controls label:nth-child(8) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides-v #slide7:checked ~ #controls label:nth-child(8)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 30px 60px
}
}
.slides-v #slide8:checked ~ #controls label:nth-child(9) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides-v #slide8:checked ~ #controls label:nth-child(9)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 30px 60px
}
}
.slides-v #slide8:checked ~ #controls label:nth-child(1) {
background: url("../images/arrow-next.png") no-repeat center;
float: right;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides-v #slide8:checked ~ #controls label:nth-child(1)
{
background: url("../images/arrow-next@2x.png") no-repeat center;
background-size: 30px 60px
}
}
.slides-v #slide1:checked ~ #controls label:nth-child(8) {
background: url("../images/arrow-prev.png") no-repeat center;
float: left;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides-v #slide1:checked ~ #controls label:nth-child(8)
{
background: url("../images/arrow-prev@2x.png") no-repeat center;
background-size: 30px 60px
}
}
.slides-v #slide2:checked ~ #controls label:nth-child(1) {
background: url("../images/arrow-prev.png") no-repeat center;
float: left;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides-v #slide2:checked ~ #controls label:nth-child(1)
{
background: url("../images/arrow-prev@2x.png") no-repeat center;
background-size: 30px 60px
}
}
.slides-v #slide3:checked ~ #controls label:nth-child(2) {
background: url("../images/arrow-prev.png") no-repeat center;
float: left;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides-v #slide3:checked ~ #controls label:nth-child(2)
{
background: url("../images/arrow-prev@2x.png") no-repeat center;
background-size: 30px 60px
}
}
.slides-v #slide4:checked ~ #controls label:nth-child(3) {
background: url("../images/arrow-prev.png") no-repeat center;
float: left;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides-v #slide4:checked ~ #controls label:nth-child(3)
{
background: url("../images/arrow-prev@2x.png") no-repeat center;
background-size: 30px 60px
}
}
.slides-v #slide5:checked ~ #controls label:nth-child(4) {
background: url("../images/arrow-prev.png") no-repeat center;
float: left;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides-v #slide5:checked ~ #controls label:nth-child(4)
{
background: url("../images/arrow-prev@2x.png") no-repeat center;
background-size: 30px 60px
}
}
.slides-v #slide6:checked ~ #controls label:nth-child(5) {
background: url("../images/arrow-prev.png") no-repeat center;
float: left;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides-v #slide6:checked ~ #controls label:nth-child(5)
{
background: url("../images/arrow-prev@2x.png") no-repeat center;
background-size: 30px 60px
}
}
.slides-v #slide7:checked ~ #controls label:nth-child(6) {
background: url("../images/arrow-prev.png") no-repeat center;
float: left;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides-v #slide7:checked ~ #controls label:nth-child(6)
{
background: url("../images/arrow-prev@2x.png") no-repeat center;
background-size: 30px 60px
}
}
.slides-v #slide8:checked ~ #controls label:nth-child(7) {
background: url("../images/arrow-prev.png") no-repeat center;
float: left;
margin: 0;
display: block
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.slides-v #slide8:checked ~ #controls label:nth-child(7)
{
background: url("../images/arrow-prev@2x.png") no-repeat center;
background-size: 30px 60px
}
}
.slides-v #slide1:checked ~ #active label:nth-child(1) {
background: #004a7c
}
.slides-v #slide2:checked ~ #active label:nth-child(2) {
background: #004a7c
}
.slides-v #slide3:checked ~ #active label:nth-child(3) {
background: #004a7c
}
.slides-v #slide4:checked ~ #active label:nth-child(4) {
background: #004a7c
}
.slides-v #slide5:checked ~ #active label:nth-child(5) {
background: #004a7c
}
.slides-v #slide6:checked ~ #active label:nth-child(6) {
background: #004a7c
}
.slides-v #slide7:checked ~ #active label:nth-child(7) {
background: #004a7c
}
.slides-v #slide8:checked ~ #active label:nth-child(8) {
background: #004a7c
}
.slides-v #slides {
margin-left: auto; margin-right: auto; box-sizing: border-box
}
.slides-v #slides .inner {
-webkit-transform: translateZ(0); transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1)
}
.slides-v #slider {
-webkit-transform: translateZ(0); transition: all 0.5s ease-out
}
.slides-v #controls label {
-webkit-transform: translateZ(0); transition: opacity 0.2s ease-out
}
@media (max-width: 480px) {
.slides-v #controls
{
display: none
}
}
.slides-v #slides,.slides-v #active,.slides-v #active label {
-webkit-transform: translateZ(0); transition: all 0.5s ease-out
}
- gallery
{
margin-top: 60px; margin-bottom: 100px
}
- gallery #overflow
{
width: 690px
}
- portfolio-slider
{
height: calc(100vh - 1rem); margin: 0; position: relative
}
- portfolio-slider .overlay
{
position: absolute; z-index: 50; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center
}
@media (max-width: 1024px) {
#portfolio-slider .overlay
{
display: none
}
}
- portfolio-slider .overlay .overlay-layers
{
width: 50vw; height: 100vw
}
- portfolio-slider .overlay .overlay-layer
{
width: 100%; height: 33.33vw
}
- portfolio-slider .overlay .overlay-layer.overlay-layer--top
{
background-image: linear-gradient(-180deg, #F2F2F2 78%, rgba(242,242,242,0.75) 100%)
}
- portfolio-slider .overlay .overlay-layer.overlay-layer--bottom
{
background-image: linear-gradient(0deg, #F2F2F2 77%, rgba(242,242,242,0.75) 100%)
}
@media not all and (min-resolution: 0.001dpcm) { @ supports (-webkit-appearance: none)
{
#portfolio-slider .overlay
{ height: calc(100vh - 1rem)
}
#portfolio-slider .overlay .overlay-layers
{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
} }
@media screen and (min-width: 0\0) {
#portfolio-slider .overlay
{
height: calc(100vh - 1rem);
top: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row;
flex-flow: row
}
#portfolio-slider .overlay .overlay-layers
{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
}
- portfolio-slider.slides .overlay
{
display: none
}
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (min-device-pixel-ratio: 1.5) {
#awwwards.nominee.green.left a
{
background-image: url(../images/awwwards_nominee_green_left@2x.png)
}
#awwwards.nominee.green.right a
{
background-image: url(../images/awwwards_nominee_green_right@2x.png)
}
}
.row {
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; -ms-flex-direction: row; flex-direction: row; margin-left: -12px; margin-right: -12px
}
@media (max-width: 600px) {
.row
{
margin-left: -8px;
margin-right: -8px
}
}
.row.align-top {
-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start
}
.row.align-bottom {
-webkit-box-align: end; -ms-flex-align: end; align-items: flex-end
}
.row.align-middle {
-webkit-box-align: center; -ms-flex-align: center; align-items: center
}
.row.align-baseline {
-webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline
}
.row.align-stretch {
-webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch
}
.row.align-left {
-webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start
}
.row.align-right {
-webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end
}
.row.align-center {
-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center
}
.row.align-space-between {
-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between
}
.row.space-around {
-ms-flex-pack: distribute; justify-content: space-around
}
.row+.row {
margin-top: 24px
}
.row [class^="col-"],.row .cols {
box-sizing: border-box; padding-left: 12px; padding-right: 12px
}
@media (max-width: 600px) {
.row [class^="col-"],.row .cols
{
padding-left: 8px;
padding-right: 8px
}
}
.row.layout-dir-column {
-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -ms-flex-direction: column; flex-direction: column
}
.row.layout-dir-column [class^="col-"],.row.layout-dir-column .cols {
padding-top: 12px; padding-bottom: 12px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto
}
@media (max-width: 600px) {
.row.layout-dir-column [class^="col-"],.row.layout-dir-column .cols
{
padding-top: 8px;
padding-bottom: 8px
}
}
.row.layout-dir-column [class^="col-"]:first-of-type,.row.layout-dir-column .cols:first-of-type {
padding-top: 0
}
.row.wrap {
-ms-flex-wrap: wrap; flex-wrap: wrap
}
.row.wrap [class^="col-"] {
margin-bottom: 24px
}
.row.large {
margin-left: -24px; margin-right: -24px
}
.row.large [class^="col-"],.row.large .cols {
padding-left: 24px; padding-right: 24px
}
@media (max-width: 600px) {
.row.large [class^="col-"],.row.large .cols
{
padding-left: 8px;
padding-right: 8px
}
}
.row.large.wrap [class^="col-"] {
margin-bottom: 48px
}
.col-1 {
width: 8.3333333333%
}
@media not all and (min-resolution: 0.001dpcm) { @ supports (-webkit-appearance: none)
{
.col-1
{ width: 8.2333333333%
}
} }
.col-2 {
width: 16.6666666667%
}
@media not all and (min-resolution: 0.001dpcm) { @ supports (-webkit-appearance: none)
{
.col-2
{ width: 16.5666666667%
}
} }
.col-3 {
width: 25%
}
@media not all and (min-resolution: 0.001dpcm) { @ supports (-webkit-appearance: none)
{
.col-3
{ width: 24.9%
}
} }
.col-4 {
width: 33.3333333333%
}
@media not all and (min-resolution: 0.001dpcm) { @ supports (-webkit-appearance: none)
{
.col-4
{ width: 33.2333333333%
}
} }
.col-5 {
width: 41.6666666667%
}
@media not all and (min-resolution: 0.001dpcm) { @ supports (-webkit-appearance: none)
{
.col-5
{ width: 41.5666666667%
}
} }
.col-6 {
width: 50%
}
@media not all and (min-resolution: 0.001dpcm) { @ supports (-webkit-appearance: none)
{
.col-6
{ width: 49.9%
}
} }
.col-7 {
width: 58.3333333333%
}
@media not all and (min-resolution: 0.001dpcm) { @ supports (-webkit-appearance: none)
{
.col-7
{ width: 58.2333333333%
}
} }
.col-8 {
width: 66.6666666667%
}
@media not all and (min-resolution: 0.001dpcm) { @ supports (-webkit-appearance: none)
{
.col-8
{ width: 66.5666666667%
}
} }
.col-9 {
width: 75%
}
@media not all and (min-resolution: 0.001dpcm) { @ supports (-webkit-appearance: none)
{
.col-9
{ width: 74.9%
}
} }
.col-10 {
width: 83.3333333333%
}
@media not all and (min-resolution: 0.001dpcm) { @ supports (-webkit-appearance: none)
{
.col-10
{ width: 83.2333333333%
}
} }
.col-11 {
width: 91.6666666667%
}
@media not all and (min-resolution: 0.001dpcm) { @ supports (-webkit-appearance: none)
{
.col-11
{ width: 91.5666666667%
}
} }
.col-12 {
width: 100%
}
@media not all and (min-resolution: 0.001dpcm) { @ supports (-webkit-appearance: none)
{
.col-12
{ width: 99.9%
}
} }
- site-navigation
{
position: fixed; top: 50%; left: 2rem
}
@media (min-width: 1025px) {
#site-navigation
{
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(-90deg) translateX(-50%);
transform: rotate(-90deg) translateX(-50%);
z-index: 50
}
}
@media (max-width: 1024px) {
#site-navigation
{
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background-color: #004a7c;
z-index: 50;
padding-top: 120px;
transition: all 0.25s ease-in-out;
display: none
}
}
@media (max-width: 1024px) {
#site-navigation ul
{
list-style: none;
margin-left: 0;
margin-bottom: 30px;
width: 480px;
margin: 0 auto
}
}
@media (max-width: 600px) {
#site-navigation ul
{
width: 135px;
margin: 0 auto
}
}
@media (min-width: 1025px) {
#site-navigation ul li
{
display: inline-block
}
}
- site-navigation ul li a
{
font-family: "sofia-pro",sans-serif; font-size: 17px; font-weight: 600; line-height: 2em; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(0,0,0,0.54); padding: 0 8px
}
- site-navigation ul li a.small
{
font-size: 13px
}
@media (max-width: 1024px) {
#site-navigation ul li a
{
color: #ffffff;
font-size: 32px;
line-height: 2
}
}
@media (max-width: 480px) {
#site-navigation ul li a
{
font-size: 22px
}
}
- site-navigation ul li a:hover,#site-navigation ul li a:focus
{
color: rgba(0,0,0,0.87)
}
@media (max-width: 1024px) {
#site-navigation ul li a:hover,#site-navigation ul li a:focus
{
color: #39898D;
-webkit-animation: all 300ms ease-in-out;
animation: all 300ms ease-in-out
}
}
- site-navigation ul li.active a
{
color: #39898D; position: relative
}
- site-navigation ul li.active a:after
{
position: absolute; top: 50%; right: 6px; bottom: 50%; left: 6px; content: "";
}
.page-border {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; height: 100vh; border: 8px solid #004a7c; z-index: -10; background-image:url(); background-size:100% 100%; background-repeat:no-repeat;
}
.page-container {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image:url(
}
- site-header
{
position: fixed; z-index: 50; top: 2rem; right: 2rem; left: 2rem
}
- site-header #logo
{
margin-top: 6px
}
- site-header #back a
{
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: "sofia-pro",sans-serif; font-size: 12px; font-weight: 600; line-height: 1em; text-transform: uppercase; letter-spacing: 2px; margin: 0
}
- site-header #back a .hint
{
font-size: 10px; font-weight: 300; letter-spacing: 6.4px
}
- site-header #back a .arrow,#site-header #back a .arrow:before,#site-header #back a .arrow:after
{
cursor: pointer; height: 1px; width: 18px; display: block; content: ; transition: all 0.25s ease-in-out; margin-right: 8px; background-color: rgba(0,0,0,0.87)
}
@media (max-width: 600px) {
#site-header #back a .arrow,#site-header #back a .arrow:before,#site-header #back a .arrow:after
{
width: 21px;
height: 2px
}
}
- site-header #back a .arrow
{
background: transparent; position: relative
}
- site-header #back a .arrow:before
{
-webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute
}
- site-header #back a .arrow:after
{
-webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute
}
- site-header #back a:hover .arrow:before,#site-header #back a:hover .arrow:after
{
background-color: #004a7c
}
@media (max-width: 1024px) {
#site-header #language-switch
{
display: none
}
#site-header #nav-toggle
{
position: absolute;
top: 0;
right: 0;
cursor: pointer;
padding: 10px 22px 10px 0px
}
#site-header #nav-toggle #menu-icon,#site-header #nav-toggle #menu-icon:before,#site-header #nav-toggle #menu-icon:after
{
cursor: pointer;
height: 2px;
width: 22px;
background: #000;
position: absolute;
display: block;
content: ;
z-index: 50;
transition: all 0.25s ease-in-out
}
#site-header #nav-toggle #menu-icon:before
{
top: -7px
}
#site-header #nav-toggle #menu-icon:after
{
bottom: -7px
}
#site-header #nav-toggle #menu-icon.active
{
background: transparent
}
#site-header #nav-toggle #menu-icon.active:before
{
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #ffffff;
top: 0
}
#site-header #nav-toggle #menu-icon.active:after
{
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #ffffff;
bottom: 0
}
}
@media (max-width: 600px) {
#site-header #nav-toggle
{
top: 24px;
right: 24px
}
#site-header #back
{
position: absolute;
right: 8px;
top: 20px
}
#site-header #back .prev-page
{
display: none
}
}
- main-content
{
width: calc(100vw - 16px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row
}
@media (max-width: 600px) {
#main-content
{
overflow-x: hidden
}
}
- main-content article
{
display: -webkit-box; display: -ms-flexbox; display: flex
}
.layout--work #main-content {
position: relative; height: auto
}
@media (min-width: 601px) {
#pagelayout #main-content,.layout--default #main-content
{
height: calc(100vh - 16px)
}
}
- site-footer
{
z-index: 50; font-family: "sofia-pro",sans-serif; font-size: 12px; color: rgba(0,0,0,0.38)
}
@media (min-width: 601px) {
#site-footer
{
position: absolute;
top: auto;
right: 2rem;
bottom: 1rem;
left: 2rem
}
}
@media (max-width: 600px) {
#site-footer
{
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
}
- site-footer #social-links a
{
color: rgba(0,0,0,0.38); padding-right: 8px
}
- site-footer #social-links a:hover,#site-footer #social-links a:focus
{
color: rgba(0,0,0,0.54)
}
- site-footer #social-links a:not(:first-child):before
{
content: "\2022"; margin-right: 8px
}
@media (max-width: 600px) {
#pagelayout:not(.page--works) #site-header
{
top: 8px;
right: 8px;
left: 8px;
padding: 16px
}
#pagelayout:not(.page--works) #site-header:not(.modal)
{
background-color: #f2f2f2
}
#pagelayout:not(.page--works) #main-content
{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
padding-top: 64px
}
#pagelayout:not(.page--works) #site-footer
{
margin: 2rem auto
}
#pagelayout:not(.page--works).page--about article
{
margin-right: 2rem;
height: calc(100vh - 12rem);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
}
@media (max-width: 600px) {
.layout--work #site-header
{
top: 8px;
right: 8px;
left: 8px;
padding: 16px
}
}
.page--works #main-content,.page-Team_Tianjin #main-content {
height: calc(100vh - 16px)
}
@media (max-width: 600px) {
.page--works #site-header,.page-Team_Tianjin #site-header
{
top: 8px !important;
right: 8px !important;
left: 8px !important;
padding: 16px !important
}
.page--works #site-footer,.page-Team_Tianjin #site-footer
{
position: absolute;
top: auto;
right: 0;
bottom: 1rem;
left: 0
}
}
.layout-space-1 {
height: 1rem
}
.layout-space-2 {
height: 2rem
}
.layout-space-3 {
height: 3rem
}
.layout-space-4 {
height: 4rem
}
.layout-space-5 {
height: 5rem
}
.layout-space-6 {
height: 6rem
}
nav.page-navi a {
position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 40px; z-index: 50; font-family: "sofia-pro",sans-serif; font-size: 12px; font-weight: 600; line-height: 1em; text-transform: uppercase; letter-spacing: 2px; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center
}
nav.page-navi a .hint {
font-size: 1.225em; font-weight: 600; letter-spacing: 0.1em
}
nav.page-navi a .arrow {
display: inline-block; width: 5em; height: 0.1em; background: rgba(0,0,0,0.87); position: relative; vertical-align: middle; margin-left: 8px
}
nav.page-navi a .arrow:after,nav.page-navi a .arrow:before {
content: ""; position: absolute; top: 0; right: 0; width: 8px; height: 1px; background: rgba(0,0,0,0.87); -webkit-transform-origin: top right; transform-origin: top right
}
nav.page-navi a .arrow:before {
-webkit-transform: rotate(40deg); transform: rotate(40deg)
}
nav.page-navi a .arrow:after {
-webkit-transform: rotate(-40deg); transform: rotate(-40deg)
}
nav.page-navi a:hover .next-page,nav.page-navi a:focus .next-page {
-webkit-transform: translateX(100%); transform: translateX(100%); transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; padding-left: 8px
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
nav.page-navi a:hover .next-page,nav.page-navi a:focus .next-page
{
-webkit-transform: translateX(110%);
transform: translateX(110%);
transition: none;
padding-left: 0
}
}
nav.page-navi a:hover .arrow,nav.page-navi a:focus .arrow {
transition-delay: 0.1s; -webkit-transform: translateX(-100%); transform: translateX(-100%); transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; margin-left: 0
}
nav.page-navi a:hover .arrow,nav.page-navi a:hover .arrow:before,nav.page-navi a:hover .arrow:after,nav.page-navi a:focus .arrow,nav.page-navi a:focus .arrow:before,nav.page-navi a:focus .arrow:after {
background-color: #004a7c
}
@media (max-width: 1024px) {
.page-navi
{
display: none
}
}
.gear-canvas--wrapper {
width: 850px; height: 600px; margin-left: auto; margin-right: auto; position: relative
}
.gear-canvas .gear.normal {
position: absolute; height: 80px; width: 80px; border-radius: 40px
}
.gear-canvas .gear.normal .gear-inner {
position: relative; height: 100%; width: 100%; background: #B5B5B5; border-radius: 50%; border: 1px solid white(0.1)
}
.gear-canvas .gear.normal .gear-inner .bar {
background: #B5B5B5; height: 12px; width: 96px; position: absolute; left: 50%; margin-left: -48px; top: 50%; margin-top: -6px; border-radius: 2px; border-left: 1px solid white(0.1); border-right: 1px solid white(0.1)
}
.gear-canvas .gear.normal .gear-inner .bar:nth-child(2) {
-webkit-transform: rotate(60deg); transform: rotate(60deg)
}
.gear-canvas .gear.normal .gear-inner .bar:nth-child(3) {
-webkit-transform: rotate(120deg); transform: rotate(120deg)
}
.gear-canvas .gear.normal .gear-inner .bar:nth-child(4) {
-webkit-transform: rotate(90deg); transform: rotate(90deg)
}
.gear-canvas .gear.normal .gear-inner .bar:nth-child(5) {
-webkit-transform: rotate(30deg); transform: rotate(30deg)
}
.gear-canvas .gear.normal .gear-inner .bar:nth-child(6) {
-webkit-transform: rotate(150deg); transform: rotate(150deg)
}
.gear-canvas .gear.normal .gear-inner .bar:nth-child(7) {
-webkit-transform: rotate(45deg); transform: rotate(45deg)
}
.gear-canvas .gear.normal .gear-inner .bar:nth-child(8) {
-webkit-transform: rotate(135deg); transform: rotate(135deg)
}
.gear-canvas .gear.normal .gear-inner .bar:nth-child(9) {
-webkit-transform: rotate(105deg); transform: rotate(105deg)
}
.gear-canvas .gear.normal .gear-inner .bar:nth-child(10) {
-webkit-transform: rotate(15deg); transform: rotate(15deg)
}
.gear-canvas .gear.normal .gear-inner .bar:nth-child(11) {
-webkit-transform: rotate(165deg); transform: rotate(165deg)
}
.gear-canvas .gear.normal .gear-inner .bar:nth-child(12) {
-webkit-transform: rotate(75deg); transform: rotate(75deg)
}
.gear-canvas .gear.normal .gear-text {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; z-index: 999; padding-left: 16px; padding-right: 16px
}
.gear-canvas .gear.normal .gear-text h6 {
font-weight: 500; line-height: 80px
}
.gear-canvas .gear.normal:after {
content: ""; position: absolute; height: 64px; width: 64px; border-radius: 50%; background-color: #f2f2f2; top: 50%; left: 50%; margin-left: -32px; margin-top: -32px; z-index: 3
}
.gear-canvas .gear.x-large {
position: absolute; height: 296px; width: 296px; border-radius: 148px
}
.gear-canvas .gear.x-large .gear-inner {
position: relative; height: 100%; width: 100%; background: #979797; border-radius: 50%; border: 1px solid white(0.1)
}
.gear-canvas .gear.x-large .gear-inner .bar {
background: #979797; height: 20px; width: 332px; position: absolute; left: 50%; margin-left: -166px; top: 50%; margin-top: -10px; border-radius: 2px; border-left: 1px solid white(0.1); border-right: 1px solid white(0.1)
}
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(2) {
-webkit-transform: rotate(60deg); transform: rotate(60deg)
}
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(3) {
-webkit-transform: rotate(120deg); transform: rotate(120deg)
}
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(4) {
-webkit-transform: rotate(90deg); transform: rotate(90deg)
}
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(5) {
-webkit-transform: rotate(30deg); transform: rotate(30deg)
}
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(6) {
-webkit-transform: rotate(150deg); transform: rotate(150deg)
}
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(7) {
-webkit-transform: rotate(45deg); transform: rotate(45deg)
}
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(8) {
-webkit-transform: rotate(135deg); transform: rotate(135deg)
}
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(9) {
-webkit-transform: rotate(105deg); transform: rotate(105deg)
}
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(10) {
-webkit-transform: rotate(15deg); transform: rotate(15deg)
}
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(11) {
-webkit-transform: rotate(165deg); transform: rotate(165deg)
}
.gear-canvas .gear.x-large .gear-inner .bar:nth-child(12) {
-webkit-transform: rotate(75deg); transform: rotate(75deg)
}
.gear-canvas .gear.x-large .gear-text {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; z-index: 999; padding-left: 36px; padding-right: 36px
}
.gear-canvas .gear.x-large .gear-text h6 {
font-weight: 500; line-height: 296px
}
.gear-canvas .gear.x-large:after {
content: ""; position: absolute; height: 260px; width: 260px; border-radius: 50%; background-color: #f2f2f2; top: 50%; left: 50%; margin-left: -130px; margin-top: -130px; z-index: 3
}
.gear-canvas .gear.large {
position: absolute; height: 135px; width: 135px; border-radius: 67.5px
}
.gear-canvas .gear.large .gear-inner {
position: relative; height: 100%; width: 100%; background: #004a7c; border-radius: 50%; border: 1px solid white(0.1)
}
.gear-canvas .gear.large .gear-inner .bar {
background: #004a7c; height: 16px; width: 159px; position: absolute; left: 50%; margin-left: -79.5px; top: 50%; margin-top: -8px; border-radius: 2px; border-left: 1px solid white(0.1); border-right: 1px solid white(0.1)
}
.gear-canvas .gear.large .gear-inner .bar:nth-child(2) {
-webkit-transform: rotate(60deg); transform: rotate(60deg)
}
.gear-canvas .gear.large .gear-inner .bar:nth-child(3) {
-webkit-transform: rotate(120deg); transform: rotate(120deg)
}
.gear-canvas .gear.large .gear-inner .bar:nth-child(4) {
-webkit-transform: rotate(90deg); transform: rotate(90deg)
}
.gear-canvas .gear.large .gear-inner .bar:nth-child(5) {
-webkit-transform: rotate(30deg); transform: rotate(30deg)
}
.gear-canvas .gear.large .gear-inner .bar:nth-child(6) {
-webkit-transform: rotate(150deg); transform: rotate(150deg)
}
.gear-canvas .gear.large .gear-inner .bar:nth-child(7) {
-webkit-transform: rotate(45deg); transform: rotate(45deg)
}
.gear-canvas .gear.large .gear-inner .bar:nth-child(8) {
-webkit-transform: rotate(135deg); transform: rotate(135deg)
}
.gear-canvas .gear.large .gear-inner .bar:nth-child(9) {
-webkit-transform: rotate(105deg); transform: rotate(105deg)
}
.gear-canvas .gear.large .gear-inner .bar:nth-child(10) {
-webkit-transform: rotate(15deg); transform: rotate(15deg)
}
.gear-canvas .gear.large .gear-inner .bar:nth-child(11) {
-webkit-transform: rotate(165deg); transform: rotate(165deg)
}
.gear-canvas .gear.large .gear-inner .bar:nth-child(12) {
-webkit-transform: rotate(75deg); transform: rotate(75deg)
}
.gear-canvas .gear.large .gear-text {
position: absolute; top: -1rem; right: -1rem; bottom: 0; left: -0.5rem; text-align: center; z-index: 999; padding-left: 35px; padding-right: 35px
}
.gear-canvas .gear.large .gear-text h6 {
font-weight: 500; line-height: 135px
}
.gear-canvas .gear.large:after {
content: ""; position: absolute; height: 100px; width: 100px; border-radius: 50%; background-color: #f2f2f2; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; z-index: 3
}
.gear-canvas .gear.middle {
position: absolute; height: 100px; width: 100px; border-radius: 50px
}
.gear-canvas .gear.middle .gear-inner {
position: relative; height: 100%; width: 100%; background: #4a4a4a; border-radius: 50%; border: 1px solid white(0.1)
}
.gear-canvas .gear.middle .gear-inner .bar {
background: #4a4a4a; height: 12px; width: 116px; position: absolute; left: 50%; margin-left: -58px; top: 50%; margin-top: -6px; border-radius: 2px; border-left: 1px solid white(0.1); border-right: 1px solid white(0.1)
}
.gear-canvas .gear.middle .gear-inner .bar:nth-child(2) {
-webkit-transform: rotate(60deg); transform: rotate(60deg)
}
.gear-canvas .gear.middle .gear-inner .bar:nth-child(3) {
-webkit-transform: rotate(120deg); transform: rotate(120deg)
}
.gear-canvas .gear.middle .gear-inner .bar:nth-child(4) {
-webkit-transform: rotate(90deg); transform: rotate(90deg)
}
.gear-canvas .gear.middle .gear-inner .bar:nth-child(5) {
-webkit-transform: rotate(30deg); transform: rotate(30deg)
}
.gear-canvas .gear.middle .gear-inner .bar:nth-child(6) {
-webkit-transform: rotate(150deg); transform: rotate(150deg)
}
.gear-canvas .gear.middle .gear-inner .bar:nth-child(7) {
-webkit-transform: rotate(45deg); transform: rotate(45deg)
}
.gear-canvas .gear.middle .gear-inner .bar:nth-child(8) {
-webkit-transform: rotate(135deg); transform: rotate(135deg)
}
.gear-canvas .gear.middle .gear-inner .bar:nth-child(9) {
-webkit-transform: rotate(105deg); transform: rotate(105deg)
}
.gear-canvas .gear.middle .gear-inner .bar:nth-child(10) {
-webkit-transform: rotate(15deg); transform: rotate(15deg)
}
.gear-canvas .gear.middle .gear-inner .bar:nth-child(11) {
-webkit-transform: rotate(165deg); transform: rotate(165deg)
}
.gear-canvas .gear.middle .gear-inner .bar:nth-child(12) {
-webkit-transform: rotate(75deg); transform: rotate(75deg)
}
.gear-canvas .gear.middle .gear-text {
position: absolute; top: -1rem; right: -1.5rem; bottom: 0; left: -1.5rem; text-align: center; z-index: 999; padding-left: 24px; padding-right: 24px
}
.gear-canvas .gear.middle .gear-text h6 {
font-weight: 500; line-height: 100px
}
.gear-canvas .gear.middle:after {
content: ""; position: absolute; height: 76px; width: 76px; border-radius: 50%; background-color: #f2f2f2; top: 50%; left: 50%; margin-left: -38px; margin-top: -38px; z-index: 3
}
.gear-canvas .gear.small {
position: absolute; height: 60px; width: 60px; border-radius: 30px
}
.gear-canvas .gear.small .gear-inner {
position: relative; height: 100%; width: 100%; background: #D8D8D8; border-radius: 50%; border: 1px solid white(0.1)
}
.gear-canvas .gear.small .gear-inner .bar {
background: #D8D8D8; height: 10px; width: 72px; position: absolute; left: 50%; margin-left: -36px; top: 50%; margin-top: -5px; border-radius: 2px; border-left: 1px solid white(0.1); border-right: 1px solid white(0.1)
}
.gear-canvas .gear.small .gear-inner .bar:nth-child(2) {
-webkit-transform: rotate(60deg); transform: rotate(60deg)
}
.gear-canvas .gear.small .gear-inner .bar:nth-child(3) {
-webkit-transform: rotate(120deg); transform: rotate(120deg)
}
.gear-canvas .gear.small .gear-inner .bar:nth-child(4) {
-webkit-transform: rotate(90deg); transform: rotate(90deg)
}
.gear-canvas .gear.small .gear-inner .bar:nth-child(5) {
-webkit-transform: rotate(30deg); transform: rotate(30deg)
}
.gear-canvas .gear.small .gear-inner .bar:nth-child(6) {
-webkit-transform: rotate(150deg); transform: rotate(150deg)
}
.gear-canvas .gear.small .gear-inner .bar:nth-child(7) {
-webkit-transform: rotate(45deg); transform: rotate(45deg)
}
.gear-canvas .gear.small .gear-inner .bar:nth-child(8) {
-webkit-transform: rotate(135deg); transform: rotate(135deg)
}
.gear-canvas .gear.small .gear-inner .bar:nth-child(9) {
-webkit-transform: rotate(105deg); transform: rotate(105deg)
}
.gear-canvas .gear.small .gear-inner .bar:nth-child(10) {
-webkit-transform: rotate(15deg); transform: rotate(15deg)
}
.gear-canvas .gear.small .gear-inner .bar:nth-child(11) {
-webkit-transform: rotate(165deg); transform: rotate(165deg)
}
.gear-canvas .gear.small .gear-inner .bar:nth-child(12) {
-webkit-transform: rotate(75deg); transform: rotate(75deg)
}
.gear-canvas .gear.small .gear-text {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; z-index: 999; padding-left: 12px; padding-right: 12px
}
.gear-canvas .gear.small .gear-text h6 {
font-weight: 500; line-height: 60px
}
.gear-canvas .gear.small:after {
content: ""; position: absolute; height: 48px; width: 48px; border-radius: 50%; background-color: #f2f2f2; top: 50%; left: 50%; margin-left: -24px; margin-top: -24px; z-index: 3
}
.gear-canvas .gear.center {
top: calc(50% - 148px - 12px); left: calc(50% - 148px); z-index: 99
}
.gear-canvas .gear-area {
position: absolute; top: 50%; right: 50%; bottom: 50%; left: 50%
}
.gear-canvas .gear-area-a {
left: 0; top: 0
}
.gear-canvas .gear-area-a .large {
left: 195px; top: 60px
}
.gear-canvas .gear-area-a .middle {
left: 330px; top: 30px
}
.gear-canvas .gear-area-a .normal {
left: 180px; top: 195px
}
.gear-canvas .gear-area-a .small {
left: 438px; top: 60px
}
.gear-canvas .gear-area-b {
left: 0; bottom: 0
}
.gear-canvas .gear-area-b .large {
left: 168px; bottom: 110px
}
.gear-canvas .gear-area-b .middle {
left: 300px; bottom: 75px
}
.gear-canvas .gear-area-b .normal {
left: 230px; bottom: 25px
}
.gear-canvas .gear-area-b .small {
left: 132px; top: 15px
}
.gear-canvas .gear-area-c {
top: 0; right: 0
}
.gear-canvas .gear-area-c .one {
position: absolute; height: 90px; width: 90px; border-radius: 45px; top: 55px; right: 90px
}
.gear-canvas .gear-area-c .one .gear-inner {
position: relative; height: 100%; width: 100%; background: #004a7c; border-radius: 50%; border: 1px solid white(0.1)
}
.gear-canvas .gear-area-c .one .gear-inner .bar {
background: #004a7c; height: 6px; width: 102px; position: absolute; left: 50%; margin-left: -51px; top: 50%; margin-top: -3px; border-radius: 2px; border-left: 1px solid white(0.1); border-right: 1px solid white(0.1)
}
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(2) {
-webkit-transform: rotate(60deg); transform: rotate(60deg)
}
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(3) {
-webkit-transform: rotate(120deg); transform: rotate(120deg)
}
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(4) {
-webkit-transform: rotate(90deg); transform: rotate(90deg)
}
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(5) {
-webkit-transform: rotate(30deg); transform: rotate(30deg)
}
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(6) {
-webkit-transform: rotate(150deg); transform: rotate(150deg)
}
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(7) {
-webkit-transform: rotate(45deg); transform: rotate(45deg)
}
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(8) {
-webkit-transform: rotate(135deg); transform: rotate(135deg)
}
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(9) {
-webkit-transform: rotate(105deg); transform: rotate(105deg)
}
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(10) {
-webkit-transform: rotate(15deg); transform: rotate(15deg)
}
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(11) {
-webkit-transform: rotate(165deg); transform: rotate(165deg)
}
.gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(12) {
-webkit-transform: rotate(75deg); transform: rotate(75deg)
}
.gear-canvas .gear-area-c .one .gear-text {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; z-index: 999; padding-left: 12px; padding-right: 12px
}
.gear-canvas .gear-area-c .one .gear-text h6 {
font-weight: 500; line-height: 90px
}
.gear-canvas .gear-area-c .one:after {
content: ""; position: absolute; height: 78px;
width: 78px; border-radius: 50%; background-color: #f2f2f2; top: 50%; left: 50%; margin-left: -39px; margin-top: -39px; z-index: 3
}
.gear-canvas .gear-area-c .two {
position: absolute; height: 75px; width: 75px; border-radius: 37.5px; top: 140px; right: 60px
}
.gear-canvas .gear-area-c .two .gear-inner {
position: relative; height: 100%; width: 100%; background: #4A4A4A; border-radius: 50%; border: 1px solid white(0.1)
}
.gear-canvas .gear-area-c .two .gear-inner .bar {
background: #4A4A4A; height: 6px; width: 87px; position: absolute; left: 50%; margin-left: -43.5px; top: 50%; margin-top: -3px; border-radius: 2px; border-left: 1px solid white(0.1); border-right: 1px solid white(0.1)
}
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(2) {
-webkit-transform: rotate(60deg); transform: rotate(60deg)
}
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(3) {
-webkit-transform: rotate(120deg); transform: rotate(120deg)
}
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(4) {
-webkit-transform: rotate(90deg); transform: rotate(90deg)
}
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(5) {
-webkit-transform: rotate(30deg); transform: rotate(30deg)
}
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(6) {
-webkit-transform: rotate(150deg); transform: rotate(150deg)
}
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(7) {
-webkit-transform: rotate(45deg); transform: rotate(45deg)
}
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(8) {
-webkit-transform: rotate(135deg); transform: rotate(135deg)
}
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(9) {
-webkit-transform: rotate(105deg); transform: rotate(105deg)
}
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(10) {
-webkit-transform: rotate(15deg); transform: rotate(15deg)
}
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(11) {
-webkit-transform: rotate(165deg); transform: rotate(165deg)
}
.gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(12) {
-webkit-transform: rotate(75deg); transform: rotate(75deg)
}
.gear-canvas .gear-area-c .two .gear-text {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; z-index: 999; padding-left: 12px; padding-right: 12px
}
.gear-canvas .gear-area-c .two .gear-text h6 {
font-weight: 500; line-height: 75px
}
.gear-canvas .gear-area-c .two:after {
content: ""; position: absolute; height: 63px; width: 63px; border-radius: 50%; background-color: #f2f2f2; top: 50%; left: 50%; margin-left: -31.5px; margin-top: -31.5px; z-index: 3
}
.gear-canvas .gear-area-c .three {
position: absolute; height: 65px; width: 65px; border-radius: 32.5px; top: 82px; right: 18px
}
.gear-canvas .gear-area-c .three .gear-inner {
position: relative; height: 100%; width: 100%; background: #B5B5B5; border-radius: 50%; border: 1px solid white(0.1)
}
.gear-canvas .gear-area-c .three .gear-inner .bar {
background: #B5B5B5; height: 8px; width: 77px; position: absolute; left: 50%; margin-left: -38.5px; top: 50%; margin-top: -4px; border-radius: 2px; border-left: 1px solid white(0.1); border-right: 1px solid white(0.1)
}
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(2) {
-webkit-transform: rotate(60deg); transform: rotate(60deg)
}
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(3) {
-webkit-transform: rotate(120deg); transform: rotate(120deg)
}
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(4) {
-webkit-transform: rotate(90deg); transform: rotate(90deg)
}
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(5) {
-webkit-transform: rotate(30deg); transform: rotate(30deg)
}
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(6) {
-webkit-transform: rotate(150deg); transform: rotate(150deg)
}
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(7) {
-webkit-transform: rotate(45deg); transform: rotate(45deg)
}
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(8) {
-webkit-transform: rotate(135deg); transform: rotate(135deg)
}
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(9) {
-webkit-transform: rotate(105deg); transform: rotate(105deg)
}
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(10) {
-webkit-transform: rotate(15deg); transform: rotate(15deg)
}
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(11) {
-webkit-transform: rotate(165deg); transform: rotate(165deg)
}
.gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(12) {
-webkit-transform: rotate(75deg); transform: rotate(75deg)
}
.gear-canvas .gear-area-c .three .gear-text {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; z-index: 999; padding-left: 12px; padding-right: 12px
}
.gear-canvas .gear-area-c .three .gear-text h6 {
font-weight: 500; line-height: 65px
}
.gear-canvas .gear-area-c .three:after {
content: ""; position: absolute; height: 53px; width: 53px; border-radius: 50%; background-color: #f2f2f2; top: 50%; left: 50%; margin-left: -26.5px; margin-top: -26.5px; z-index: 3
}
.gear-canvas .gear-area-c .four {
position: absolute; height: 50px; width: 50px; border-radius: 25px; top: 12px; right: 155px
}
.gear-canvas .gear-area-c .four .gear-inner {
position: relative; height: 100%; width: 100%; background: #D8D8D8; border-radius: 50%; border: 1px solid white(0.1)
}
.gear-canvas .gear-area-c .four .gear-inner .bar {
background: #D8D8D8; height: 6px; width: 62px; position: absolute; left: 50%; margin-left: -31px; top: 50%; margin-top: -3px; border-radius: 2px; border-left: 1px solid white(0.1); border-right: 1px solid white(0.1)
}
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(2) {
-webkit-transform: rotate(60deg); transform: rotate(60deg)
}
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(3) {
-webkit-transform: rotate(120deg); transform: rotate(120deg)
}
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(4) {
-webkit-transform: rotate(90deg); transform: rotate(90deg)
}
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(5) {
-webkit-transform: rotate(30deg); transform: rotate(30deg)
}
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(6) {
-webkit-transform: rotate(150deg); transform: rotate(150deg)
}
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(7) {
-webkit-transform: rotate(45deg); transform: rotate(45deg)
}
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(8) {
-webkit-transform: rotate(135deg); transform: rotate(135deg)
}
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(9) {
-webkit-transform: rotate(105deg); transform: rotate(105deg)
}
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(10) {
-webkit-transform: rotate(15deg); transform: rotate(15deg)
}
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(11) {
-webkit-transform: rotate(165deg); transform: rotate(165deg)
}
.gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(12) {
-webkit-transform: rotate(75deg); transform: rotate(75deg)
}
.gear-canvas .gear-area-c .four .gear-text {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; z-index: 999; padding-left: 12px; padding-right: 12px
}
.gear-canvas .gear-area-c .four .gear-text h6 {
font-weight: 500; line-height: 50px
}
.gear-canvas .gear-area-c .four:after {
content: ""; position: absolute; height: 38px; width: 38px; border-radius: 50%; background-color: #f2f2f2; top: 50%; left: 50%; margin-left: -19px; margin-top: -19px; z-index: 3
}
.gear-canvas .gear-area-c .four:after {
background-color: #D8D8D8; border: 1px solid #fff
}
.gear-canvas .gear-area-c .four .gear-text {
padding: 0; top: -1.3em; left: -70px; right: auto; bottom: auto; width: 12em
}
.gear-canvas .gear-area-c .four h6 {
line-height: 1em !important; height: 1em; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em
}
.gear-canvas .gear-area-d {
right: 0; bottom: 0
}
.gear-canvas .gear-area-d .large {
left: 120px; top: 55px
}
.gear-canvas .gear-area-d .normal {
left: 195px; top: -30px
}
.gear-canvas .gear-area-d .small {
left: 250px; top: 40px
}
.gear-canvas .brain {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 215px;
height: 215px;
left: calc(50% - 107.5px);
top: calc(50% - 107.5px - 12px);
text-align: center;
background: url("
") no-repeat center center;
z-index: 999
}
.gear-canvas .brain #laser {
position: absolute; top: 0; right: 20px; bottom: 0; left: 20px; height: 2px; background-color: #308cbe; box-shadow: 0 0 50px 3px #308cbe
}
.gear-canvas .chain-wapper {
position: absolute; top: 58px; right: auto; bottom: auto; left: 285px; z-index: -20; stroke-width: 3px; stroke: #333
}
- page--contact article
{
width: 100%
}
@media (max-width: 840px) {
#page--contact article
{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
}
@media (min-width: 841px) {
#page--contact .contact-wrapper
{
width: 50%
}
#page--contact .contact-wrapper:nth-of-type(1)
{
padding-right: 60px
}
#page--contact .contact-wrapper:nth-of-type(2)
{
padding-left: 48px
}
}
@media (max-width: 840px) {
#page--contact .contact-wrapper
{
width: 75%
}
#page--contact .contact-wrapper:nth-of-type(1)
{
margin-bottom: 5rem
}
}
@media (max-width: 600px) {
#page--contact .contact-wrapper:nth-of-type(1)
{
margin-top: 3rem;
margin-bottom: 3rem
}
}
@media (min-width: 841px) {
#page--contact #contact-preface
{
width: 80%;
max-width: 360px;
float: right
}
}
- page--contact #contact-preface a
{
color: #004a7c
}
- page--contact #contact-preface a:hover,#page--contact #contact-preface a:focus
{
color: #39898D
}
@media (min-width: 841px) {
#page--contact #contact-form
{
width: 80%;
max-width: 480px
}
}
- page--contact #contact-form .form-group
{
position: relative; margin-bottom: 1em
}
- page--contact #contact-form .form-group .form-control
{
height: 28px; display: block; width: 100%; padding: 0.1em 0em 1px 0em; border: none; border-bottom: 1px solid rgba(0,0,0,0.12); border-radius: 0px; outline: none; margin: 0px; background: none
}
- page--contact #contact-form .form-group.submit
{
margin-bottom: 0.5em
}
- page--contact #contact-form .form-group::-webkit-input-placeholder,#page--contact #contact-form .form-group:-moz-placeholder,#page--contact #contact-form .form-group::-moz-placeholder,#page--contact #contact-form .form-group:-ms-input-placeholder
{
color: transparent
}
- page--contact #contact-form .form-group input,#page--contact #contact-form .form-group textarea,#page--contact #contact-form .form-group label
{
text-transform: uppercase; box-shadow: none; -webkit-box-shadow: none
}
- page--contact #contact-form .form-group input:focus,#page--contact #contact-form .form-group textarea:focus
{
box-shadow: none; -webkit-box-shadow: none; border-color: #39898D
}
- page--contact #contact-form .form-group textarea.form-control
{
padding: 0.1em 0em 5px 0em; height: 120px
}
- page--contact #contact-form .form-group .button
{
border: 0; padding: 0; cursor: pointer
}
- page-Team_Tianjin #loading
{
background: #1A262F; width: 100vw; height: 100vh; position: relative; z-index: 99
}
- page-Team_Tianjin #loading #logo-svg
{
position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: calc(50vw - 103px)
}
- page-Team_Tianjin #loading #logo-svg svg
{
fill: #004a7c
}
- page-Team_Tianjin #loading #logo-svg.loading
{
fill: none
}
- page-Team_Tianjin #loading #logo-svg.loading svg path,#page-Team_Tianjin #loading #logo-svg.loading svg polygon
{
-webkit-animation: svgColor linear 3.5s infinite; animation: svgColor linear 3.5s infinite
}
- page-Team_Tianjin #loading #landing-container
{
width: 100vw; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center
}
- page-Team_Tianjin #loading #landing-container #mbp-wrapper
{
width: 100vw; height: 100vh
}
- page-Team_Tianjin #loading #landing-container #mbp-drawing
{
position: absolute; top: auto; right: auto; bottom: auto; left: auto; top: calc(50% - 205px); left: calc(50% - 399px)
}
- page-Team_Tianjin #loading #landing-container #mbp-drawing svg
{
pointer-events: none; height: 410px
}
- page-Team_Tianjin #loading #landing-container #mbp-drawing .drawings
{
max-height: 600px
}
- page-Team_Tianjin #loading #landing-container #mbp-drawing .line-drawing path
{
stroke: white; stroke-width: 2
}
- page-Team_Tianjin #loading #landing-container #about-us
{
font-family: "sofia-pro",sans-serif; width: 526px; height: 250px; position: absolute; top: calc(50% - 139px); right: calc(50% - 268px); bottom: calc(50% - 139px); left: calc(50% - 268px); padding: 0 0 0 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center
}
- page-Team_Tianjin #loading #landing-container #about-us .our-core
{
width: 50%; height: 250px; float: left; position: relative
}
- page-Team_Tianjin #loading #landing-container #about-us .our-core .circle
{
opacity: .75; filter: alpha(opacity=75); text-align: center; color: #fff; text-transform: uppercase; font-size: 20px; letter-spacing: 0.4px
}
- page-Team_Tianjin #loading #landing-container #about-us .our-core #circle-1,#page-Team_Tianjin #loading #landing-container #about-us .our-core #circle-4
{
width: 155px; height: 155px; line-height: 155px; background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
}
- page-Team_Tianjin #loading #landing-container #about-us .our-core #circle-2,#page-Team_Tianjin #loading #landing-container #about-us .our-core #circle-3
{
width: 130px; height: 130px; line-height: 130px; background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}
- page-Team_Tianjin #loading #landing-container #about-us .our-core #circle-1
{
position: absolute; top: 0; right: auto; bottom: auto; left: 0; z-index: 10
}
- page-Team_Tianjin #loading #landing-container #about-us .our-core #circle-2
{
position: absolute; top: 0; right: 0; bottom: auto; left: auto; z-index: 8
}
- page-Team_Tianjin #loading #landing-container #about-us .our-core #circle-3
{
position: absolute; top: auto; right: auto; bottom: 0; left: 0; z-index: 7
}
- page-Team_Tianjin #loading #landing-container #about-us .our-core #circle-4
{
position: absolute; top: auto; right: 0; bottom: 0; left: auto; z-index: 9
}
- page-Team_Tianjin #loading #landing-container #about-us .our-slogan
{
width: 50%; float: right; position: relative; overflow: hidden
}
- page-Team_Tianjin #loading #landing-container #about-us .our-slogan h1
{
margin-left: 25px; color: #fff; font-size: 46px; color: #FFFFFF; letter-spacing: 0.24px; line-height: 46px; font-weight: 600
}
- page-Team_Tianjin #loading #landing-container #enter-link
{
cursor: pointer; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: fixed; left: calc(50% - 60px)
}
- page-Team_Tianjin #loading #landing-container #enter-link .enter-link--text
{
font-size: 1.3em; color: rgba(255,255,255,0.87); letter-spacing: 2.67px
}
- page-Team_Tianjin #loading #landing-container #enter-link .enter-link--arrow
{
display: inline-block; width: 60px; height: 4px; background: white; position: relative; vertical-align: middle; margin-left: 1px
}
- page-Team_Tianjin #loading #landing-container #enter-link .enter-link--arrow:after,#page-Team_Tianjin #loading #landing-container #enter-link .enter-link--arrow:before
{
content: ""; position: absolute; top: 0; right: 0; width: 14px; height: 4px; background: white; -webkit-transform-origin: top right; transform-origin: top right
}
- page-Team_Tianjin #loading #landing-container #enter-link .enter-link--arrow:before
{
-webkit-transform: rotate(40deg); transform: rotate(40deg)
}
- page-Team_Tianjin #loading #landing-container #enter-link .enter-link--arrow:after
{
-webkit-transform: rotate(-40deg); transform: rotate(-40deg)
}
- page-Team_Tianjin #loading #landing-container #enter-link:hover .enter-link--text,#page-Team_Tianjin #loading #landing-container #enter-link:focus .enter-link--text
{
-webkit-transform: translateX(100%); transform: translateX(100%); transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; padding-left: 8px
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#page-Team_Tianjin #loading #landing-container #enter-link:hover .enter-link--text,#page-Team_Tianjin #loading #landing-container #enter-link:focus .enter-link--text
{
-webkit-transform: translateX(110%);
transform: translateX(110%);
transition: none;
padding-left: 0
}
}
- page-Team_Tianjin #loading #landing-container #enter-link:hover .enter-link--arrow,#page-Team_Tianjin #loading #landing-container #enter-link:focus .enter-link--arrow
{
transition-delay: 0.1s; -webkit-transform: translateX(-100%); transform: translateX(-100%); transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; margin-left: 0
}
- page-Team_Tianjin .page-container #home-navigation--wrapper
{
-ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center
}
@media (min-width: 601px) {
#page-Team_Tianjin .page-container #home-navigation--wrapper
{
width: 50%
}
}
- page-Team_Tianjin .page-container #home-navigation--wrapper #home-navigation
{
width: 170px; margin-left: auto; margin-right: auto
}
- page-Team_Tianjin .page-container #home-navigation--wrapper #home-navigation a
{
display: block; margin-bottom: 24px
}
- page-Team_Tianjin .page-container #home-navigation--wrapper #home-navigation h3
{
margin: 0; line-height: 1em; font-weight: 400; color:c4d8e1;
}
- page-Team_Tianjin .page-container #home-navigation--wrapper #home-navigation span
{
font-family: "sofia-pro",sans-serif; font-size: 10px; font-weight: 600; line-height: 1em; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-top: 2px; color:#c4d8e1
}
- page-Team_Tianjin .page-container #home-navigation--wrapper #home-navigation span.small
{
font-size: 13px
}
@media (min-width: 601px) {
#page-Team_Tianjin .page-container #home-portfolio-list--wrapper
{
width: 65%;
padding-right:10%;
}
#page-Team_Tianjin .page-container #home-portfolio-list--wrapper .portfolio-list
{
width: 1728px
}
}
@media (max-width: 600px) {
#page-Team_Tianjin .page-container #home-portfolio-list--wrapper
{
display: none
}
}
@media (min-width: 841px) {
#services-graphic
{
width: 940px;
height: 492px;
position: absolute;
top: calc(50% - 246px);
bottom: calc(50% - 246px);
left: calc(50% - 470px);
right: calc(50% - 470px)
}
#services-graphic .area-typo.left,#services-graphic .area-typo.right
{
width: 230px;
float: left
}
#services-graphic .area-typo.left .typo-block,#services-graphic .area-typo.right .typo-block
{
position: relative;
text-transform: uppercase
}
#services-graphic .area-typo.left .typo-block.top
{
padding-bottom: 78px
}
#services-graphic .area-typo.right .typo-block.top
{
padding-top: 150px
}
#services-graphic .area-typo.left .typo-block.bottom,#services-graphic .area-typo.right .typo-block.bottom
{
margin-top: 78px
}
#services-graphic .area-typo.left .typo-block:before
{
border-bottom: 1px solid #979797;
border-left: 1px solid #979797;
border-top: 1px solid #979797;
content: "";
height: 90px;
left: -21px;
position: absolute;
top: 10px;
width: 14px
}
#services-graphic .area-typo.right .typo-block:before { border-bottom: 1px solid #979797;
border-left: 1px solid #979797;
border-top: 1px solid #979797;
content: "";
height: 60px;
left: -21px;
position: absolute;
top: 160px;
width: 14px
}
#services-graphic .area-typo.left .typo-block .typo-line
{
border-top: 1px dashed #979797;
-webkit-transform: scale(1) !important;
transform: scale(1) !important;
width: 38px;
position: absolute;
top: 85px
}
#services-graphic .area-typo.right .typo-block .typo-line { border-top: 1px dashed #979797;
-webkit-transform: scale(1) !important;
transform: scale(1) !important;
width: 38px;
position: absolute;
top: 195px
}
#services-graphic .area-typo.left .typo-block h4,#services-graphic .area-typo.right .typo-block h4
{
line-height: 1em;
margin-top: 0;
margin-bottom: 1em;
color: #004a7c
}
#services-graphic .area-typo.left .typo-block ul li,#services-graphic .area-typo.right .typo-block ul li
{
font-size: 12px;
line-height: 1.5em
}
#services-graphic .area-typo.left
{
text-align: right
}
#services-graphic .area-typo.left .typo-block
{
-webkit-transform: translateX(20px);
transform: translateX(20px)
}
#services-graphic .area-typo.left .typo-block:before
{
border-left: none;
border-right: 1px solid #918f8e;
left: auto;
right: -21px
}
#services-graphic .area-typo.left .typo-line
{
left: auto;
right: -60px
}
#services-graphic .area-typo.right
{
float: right
}
#services-graphic .area-typo.right .typo-block
{
-webkit-transform: translateX(-20px);
transform: translateX(-20px)
}
#services-graphic .area-typo.right .typo-block:before
{
border-right: none;
border-left: 1px solid #918f8e;
left: -21px;
right: auto
}
#services-graphic .area-typo.right .typo-line
{
left: -60px;
right: auto
}
#services-graphic .area-graphic
{
width: 480px;
float: left;
padding-left: 62px;
padding-right: 62px
}
#services-graphic .area-graphic .area-icon
{
position: relative
}
#services-graphic .area-graphic a.icon
{
width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
display: block;
border: 1px solid #979797
}
#services-graphic .area-graphic a.icon.top
{
margin-top: 62px
}
#services-graphic .area-graphic a.icon.bottom
{
margin-top: 280px
}
#services-graphic .area-graphic a.icon:after
{
border-top: 1px dashed #979797;
content: "";
position: absolute;
width: 125px
}
#services-graphic .area-graphic a.icon span
{
font-size: 25px;
color: #004a7c;
display: block;
margin-top: 9px
}
#services-graphic .area-graphic a.icon:hover,#services-graphic .area-graphic a.icon:focus
{
background-color: #004a7c;
border-color: #004a7c
}
#services-graphic .area-graphic a.icon:hover span,#services-graphic .area-graphic a.icon:focus span
{
color: #fff
}
#services-graphic .area-graphic .area-icon.left
{
float: left
}
#services-graphic .area-graphic .area-icon.left .top:after
{
left: 26px;
top: 145px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
#services-graphic .area-graphic .area-icon.left .bottom:after
{
left: 26px;
top: 350px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
#services-graphic .area-graphic .area-icon.right
{
float: right
}
#services-graphic .area-graphic .area-icon.right .top:after
{
right: 26px;
top: 247px;
-webkit-transform:none;
transform: rotate(0deg)
}
#services-graphic .area-graphic .area-icon.right .bottom:after
{
right: 26px;
top: 350px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
#services-graphic .area.area-animate-graphic
{
width: 322px;
height: 312px;
float: left;
margin-left: -28px;
margin-right: -28px;
margin-top: 90px;
position: relative
}
#services-graphic .area.area-animate-graphic .line-drawing path
{
stroke: #979797;
stroke-width: 1
}
#services-graphic .area.area-animate-graphic .spinner-circle
{
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
top: calc(50% - 27px);
left: calc(50% - 30px)
}
#services-graphic .area.area-animate-graphic .spinner-circle,#services-graphic .area.area-animate-graphic .spinner-circle:before,#services-graphic .area.area-animate-graphic .spinner-circle:after
{
position: absolute;
background-color: transparent;
border-radius: 50%;
border-style: solid
}
#services-graphic .area.area-animate-graphic .spinner-circle
{
width: 60px;
height: 60px;
border-width: 6px;
border-color: #004a7c transparent #004a7c transparent;
opacity: .7;
-webkit-animation: spinner-rotate-outer 2s ease-in-out infinite;
animation: spinner-rotate-outer 2s ease-in-out infinite
}
#services-graphic .area.area-animate-graphic .spinner-circle:before
{
content: ;
position: absolute;
width: 25px;
height: 25px;
border-width: 6px;
border-color: rgba(255,255,250,0.5);
background-color: #004a7c;
top: 12px;
left: 12px;
opacity: .9;
-webkit-animation: spinner-rotate-inner 3s linear infinite;
animation: spinner-rotate-inner 3s linear infinite
}
#services-graphic .area.area-animate-graphic .spinner-circle:after
{
content: ;
width: 0;
height: 0;
border-width: 27px;
top: -3px;
left: -3px;
opacity: .6;
-webkit-animation: spinner-rotate-single-2 7s 0s ease-in-out infinite;
animation: spinner-rotate-single-2 7s 0s ease-in-out infinite;
border-color: transparent transparent transparent #004a7c;
box-shadow: 2px 0 2px #004a7c
}
}
@media (max-width: 960px) and (min-width: 841px) {
#services-graphic .typo-context h4
{
font-size: 16px
}
}
@media (max-width: 840px) {
#services-graphic
{
width: 100vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row;
flex-flow: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
#services-graphic .area
{
width: 50%;
padding-left: 8%;
padding-right: 8%
}
#services-graphic .area .typo-block
{
margin-bottom: 2rem
}
#services-graphic .area .typo-block h4
{
color: #004a7c
}
#services-graphic .area-graphic
{
display: none
}
}
@media (max-width: 600px) {
#services-graphic
{
width: 100vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
#services-graphic .area
{
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
#services-graphic .area .typo-block
{
width: 200px;
margin-top: 1rem;
margin-bottom: 1rem
}
#services-graphic .area .typo-block h4
{
color: #004a7c
}
#services-graphic .area-graphic
{
display: none
}
}
- process-canvas
{
max-width: 960px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap
}
@media (min-width: 841px) {
#process-canvas
{
margin-left: auto;
margin-right: auto
}
}
@media (max-width: 840px) {
#process-canvas
{
margin-left: 2rem;
margin-right: 2rem
}
}
@media (max-width: 480px) {
#process-canvas
{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
}
@media (min-width: 841px) {
#process-canvas .process-block
{
width: 33.3333%;
margin-top: 56px;
margin-bottom: 56px
}
}
- process-canvas .process-block .process-step
{
height: 50px
}
- process-canvas .process-block .process-step .process-step-icon
{
float: left; width: 50px; height: 50px; line-height: 50px; border: 1px solid #979797; text-align: center; margin-right: 12px; position: relative
}
- process-canvas .process-block .process-step .process-step-icon span
{
color: #004a7c; font-size: 1.8em; line-height: 50px
}
- process-canvas .process-block .process-step .process-step-icon:after
{
border-right: 1px dashed #979797; content: ""; position: absolute; top: 50px; right: auto; bottom: auto; left: 25px; height: 112px
}
- process-canvas .process-block .process-step .process-step-title
{
color: #004a7c; height: 50px; line-height: 50px
}
- process-canvas .process-block .process-step-list
{
padding-left: 61px
}
- process-canvas .process-block .dev-icon-list
{
padding-left: 61px; margin-top: 15px; position: relative
}
- process-canvas .process-block .dev-icon-list:before
{
border-top: 1px dashed #979797; content: ""; position: absolute; top: 15px; right: auto; bottom: auto; left: 26px; width: 35px
}
- process-canvas .process-block .dev-icon-list .hexagon
{
width: 28px; height: 16px; background: #c5c5c5; position: relative; display: block; text-align: center; float: left; margin: 8px 2px
}
- process-canvas .process-block .dev-icon-list .hexagon:before
{
content: ""; position: absolute; top: -8px; left: 0; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 8px solid #c5c5c5
}
- process-canvas .process-block .dev-icon-list .hexagon:after
{
content: ""; position: absolute; bottom: -8px; left: 0; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 8px solid #c5c5c5
}
- process-canvas .process-block .dev-icon-list .hexagon .icon
{
color: #f2f2f2; font-size: 1.1em; display: block
}
@media (max-width: 840px) {
#process-canvas .process-block
{
width: 33.3333%;
padding-left: 8px;
padding-right: 8px;
margin-top: 2rem;
margin-bottom: 2rem
}
#process-canvas .process-block .process-step-icon,#process-canvas .process-block .dev-icon-list
{
display: none
}
#process-canvas .process-block .process-step-title
{
font-size: 18px
}
#process-canvas .process-block .process-step-list
{
padding-left: 0
}
}
@media (max-width: 600px) {
#process-canvas .process-block
{
width: 50%;
margin-top: 1rem;
margin-bottom: 1rem
}
}
@media (max-width: 480px) {
#process-canvas .process-block
{
width: 200px;
padding: 0;
margin-top: 8px;
margin-bottom: 8px
}
}
.portfolio-list--outline {
border-left: 1px solid rgba(0,0,0,0.12); overflow: hidden
}
.portfolio-list {
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row
}
.portfolio-list .portfolio-item {
width: 1728px; padding-left: 24px; padding-right: 24px
}
@media (min-width: 481px) {
.portfolio-list .portfolio-item
{
border-right: 1px solid rgba(0,0,0,0.12)
}
}
.portfolio-list .portfolio-item .portfolio-item--number {
display: block; width: 100%; font-family: "sofia-pro",sans-serif; font-weight: 300; line-height: 1em; letter-spacing: -0.05em; color: rgba(0,0,0,0.12)
}
@media (min-width: 481px) {
.portfolio-list .portfolio-item .portfolio-item--number
{
font-size: 56px;
margin-bottom: 48px
}
}
@media (max-width: 480px) {
.portfolio-list .portfolio-item .portfolio-item--number
{
font-size: 18px;
margin-bottom: 16px
}
}
.portfolio-list .portfolio-item figure {
margin-bottom: 0
}
.portfolio-list .portfolio-item picture {
display: block; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.06); padding: 8px; background-color: #fff
}
.portfolio-list .portfolio-item figcaption {
text-transform: uppercase; font-weight: 600; letter-spacing: 2px; margin-top: 1rem
}
.portfolio-list .portfolio-item figcaption span {
display: block; width: 100%
}
.portfolio-list .portfolio-item figcaption span.portfolio-category {
font-size: 10px; font-weight: 300; letter-spacing: 3.5px
}
.portfolio-list .portfolio-item a:hover picture,.portfolio-list .portfolio-item a:focus picture {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.24); -webkit-transform: translateY(-1rem); transform: translateY(-1rem); transition: all 0.3s ease-in-out
}
.portfolio-list .portfolio-item a:hover .portfolio-item--number,.portfolio-list .portfolio-item a:focus .portfolio-item--number {
-webkit-transform: translateX(37.5%); transform: translateX(37.5%); transition: all 0.3s ease-in-out
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.portfolio-list .portfolio-item a
{
display: block;
width: 100%
}
.portfolio-list .portfolio-item img
{
width: 100%
}
}
- full-portfolio-list--wrapper
{
width: 100%; overflow: hidden; margin-left: 200px
}
@media (max-width: 1024px) {
#full-portfolio-list--wrapper
{
margin-left: 0
}
}
- full-portfolio-list--wrapper #full-portfolio-list
{
width: 8064px
}
@media (min-width: 481px) {
#full-portfolio-list--wrapper #full-portfolio-list .portfolio-item
{
width: 336px;
border-right: 1px solid rgba(0,0,0,0.12);
padding-left: 48px;
padding-right: 48px
}
}
@media (max-width: 480px) {
#full-portfolio-list--wrapper #full-portfolio-list .portfolio-item
{
padding-left: 16px;
padding-right: 16px
}
}
- full-portfolio-list--wrapper .scroll-bar
{
margin-left: auto; margin-right: auto
}
.portfolio {
width: 100vw; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; overflow: visible
}
.portfolio h1,.portfolio h2,.portfolio h3,.portfolio h4,.portfolio h5,.portfolio h6 {
text-transform: capitalize; margin-bottom: 1rem
}
.portfolio section {
padding-top: 120px; padding-bottom: 120px
}
.portfolio section.small {
padding-top: 64px; padding-bottom: 64px
}
.portfolio section.sub-section {
padding-top: 64px; padding-bottom: 64px
}
@media (max-width: 480px) {
.portfolio section.sub-section
{
padding-top: 16px;
padding-bottom: 16px
}
}
@media (max-width: 840px) {
.portfolio section
{
padding-top: 32px;
padding-bottom: 32px
}
}
.portfolio .portfolio-header {
padding-top: 185px
}
.portfolio .portfolio-header--classic {
text-align: right
}
.portfolio .portfolio-header--classic .article-title,.portfolio .portfolio-header--classic .article-brief {
line-height: 1; margin: 0
}
.portfolio .portfolio-header--classic .article-brief {
font-weight: 300; color: rgba(0,0,0,0.38); margin-bottom: 0
}
.portfolio .portfolio-header--classic .portfolio-label {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0
}
.portfolio .portfolio-header--classic .article-meta {
color: rgba(0,0,0,0.54)
}
.portfolio h3.portfolio-title,.portfolio h3.portfolio-brief {
letter-spacing: 0.2em; font-weight: 300
}
.portfolio h1.portfolio-brief {
letter-spacing: 0.05em; line-height: 70px
}
.portfolio img:not(:last-of-type) {
margin-bottom: 64px
}
.portfolio .tools img {
margin-bottom: 0; margin-left: 8px; margin-right: 8px
}
.portfolio .data * {
line-height: 1em; margin: 0
}
.portfolio .portfolio-navigation {
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 64px; margin-bottom: 64px
}
.portfolio .portfolio-navigation a {
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: "sofia-pro",sans-serif; font-size: 32px; font-weight: 600; line-height: 1em; letter-spacing: 2px
}
.portfolio .portfolio-navigation a .hint {
font-size: 10px; font-weight: 300; letter-spacing: 6.4px; text-transform: uppercase; display: block; height: 1rem
}
.portfolio .portfolio-navigation a .potfolio-title {
margin: 0
}
.portfolio .portfolio-navigation .arrow {
display: inline-block; width: 60px; height: 1px; position: relative; vertical-align: middle; background-color: rgba(0,0,0,0.87)
}
.portfolio .portfolio-navigation .arrow:after,.portfolio .portfolio-navigation .arrow:before {
content: ""; position: absolute; top: 0; width: 8px; height: 1px; background-color: rgba(0,0,0,0.87)
}
.portfolio .portfolio-navigation .arrow.left {
margin-right: 8px
}
.portfolio .portfolio-navigation .arrow.left:after,.portfolio .portfolio-navigation .arrow.left:before {
left: 0; -webkit-transform-origin: top left; transform-origin: top left
}
.portfolio .portfolio-navigation .arrow.right {
margin-left: 8px
}
.portfolio .portfolio-navigation .arrow.right:after,.portfolio .portfolio-navigation .arrow.right:before {
right: 0; -webkit-transform-origin: top right; transform-origin: top right
}
.portfolio .portfolio-navigation .arrow:before {
-webkit-transform: rotate(40deg); transform: rotate(40deg)
}
.portfolio .portfolio-navigation .arrow:after {
-webkit-transform: rotate(-40deg); transform: rotate(-40deg)
}
.portfolio .portfolio-navigation .prev:hover .arrow,.portfolio .portfolio-navigation .prev:hover .arrow:after,.portfolio .portfolio-navigation .prev:hover .arrow:before,.portfolio .portfolio-navigation .prev:focus .arrow,.portfolio .portfolio-navigation .prev:focus .arrow:after,.portfolio .portfolio-navigation .prev:focus .arrow:before,.portfolio .portfolio-navigation .next:hover .arrow,.portfolio .portfolio-navigation .next:hover .arrow:after,.portfolio .portfolio-navigation .next:hover .arrow:before,.portfolio .portfolio-navigation .next:focus .arrow,.portfolio .portfolio-navigation .next:focus .arrow:after,.portfolio .portfolio-navigation .next:focus .arrow:before {
background: #004a7c
}
.portfolio .portfolio-navigation .prev:hover .arrow.left,.portfolio .portfolio-navigation .prev:focus .arrow.left,.portfolio .portfolio-navigation .next:hover .arrow.left,.portfolio .portfolio-navigation .next:focus .arrow.left {
transition-delay: 0.1s; width: 16px; transition: all 0.3s ease-in-out; background: #004a7c
}
.portfolio .portfolio-navigation .next {
text-align: right
}
.portfolio .portfolio-navigation .next:hover .arrow.right,.portfolio .portfolio-navigation .next:focus .arrow.right {
transition-delay: 0.1s; width: 16px; transition: all 0.3s ease-in-out
}
@media (max-width: 480px) {
.portfolio #pricing .row
{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column
}
.portfolio #pricing .row [class^="col-"]
{
width: 100%;
margin-bottom: 1rem
}
}
.portfolio-nav-panel {
display: none; position: fixed; right: 24px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: rgba(203,51,102,0.87); color: white; padding: 1rem 12px 4px 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 50; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5)
}
@media (max-width: 600px) {
.portfolio-nav-panel
{
right: 8px
}
}
- portfolio-nav-toggle
{
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer
}
- portfolio-nav-toggle .hint
{
font-family: "sofia-pro",sans-serif; font-size: 10px; font-weight: 600; line-height: 1em; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 16px
}
- portfolio-nav-toggle .hint.small
{
font-size: 13px
}
- portfolio-nav-toggle #menu-icon
{
height: 8px
}
- portfolio-nav-toggle #menu-icon span,#portfolio-nav-toggle #menu-icon span:before,#portfolio-nav-toggle #menu-icon span:after
{
height: 2px; width: 21px; background: #fff; display: block; content: ; z-index: 50; transition: all 0.25s ease-in-out
}
- portfolio-nav-toggle #menu-icon span
{
position: relative
}
- portfolio-nav-toggle #menu-icon span:before
{
top: -7px; position: absolute
}
- portfolio-nav-toggle #menu-icon span:after
{
bottom: -7px; position: absolute
}
- portfolio-nav-toggle #menu-icon span.active
{
background: transparent
}
- portfolio-nav-toggle #menu-icon span.active:before
{
-webkit-transform: rotate(45deg); transform: rotate(45deg); background-color: #ffffff; top: 0
}
- portfolio-nav-toggle #menu-icon span.active:after
{
-webkit-transform: rotate(-45deg); transform: rotate(-45deg); background-color: #ffffff; bottom: 0
}
.portfolio-nav {
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; font-size: 10px; color: white; margin-right: 1rem; margin-bottom: 8px; padding-left: 0.5em
}
.portfolio-nav a {
font-family: "sofia-pro",sans-serif; font-size: 10px; font-weight: 600; line-height: 1em; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 300; color: white; line-height: 2em; position: relative
}
.portfolio-nav a.small {
font-size: 13px
}
.portfolio-nav a.active:before,.portfolio-nav a:hover:before,.portfolio-nav a:focus:before {
content: "#"; position: absolute; left: -1em
}
.portfolio--classic section {
padding: 0
}
.portfolio--classic .article-content {
width: calc(100vw - 1rem)
}
@media (min-width: 1025px) {
.portfolio--classic .article-content
{
height: calc(100vh - 1rem)
}
}
.portfolio--classic .article-content .article-content-fix {
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center
}
@media (min-width: 1025px) {
.portfolio--classic .article-content .article-content-fix
{
width: 200vw;
height: calc(100vh - 1rem)
}
}
@media (max-width: 1024px) {
.portfolio--classic .article-content .article-content-fix
{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
height: auto
}
}
.portfolio--classic .work-showcase {
height: calc(100vh - 1rem); overflow: hidden
}
@media (min-width: 1025px) {
.portfolio--classic .work-showcase
{
width: calc(50vw - 0.5rem)
}
}
@media (max-width: 1024px) {
.portfolio--classic .work-showcase
{
height: 66.66vw
}
}
.portfolio--classic .work-detail {
color: rgba(0,0,0,0.54); position: relative; overflow: visible; padding: 24px !important; background: #FFFFFF; box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2)
}
@media (min-width: 1025px) {
.portfolio--classic .work-detail
{
width: 30vw;
height: 33.33vw
}
}
@media (max-width: 1024px) {
.portfolio--classic .work-detail
{
width: 100%;
padding-left: 10% !important;
padding-right: 10% !important
}
}
.portfolio--classic .work-detail .work-detail-nav {
margin-bottom: 20px
}
.portfolio--classic .work-detail .work-detail-nav>li {
display: inline; margin-right: 1em
}
.portfolio--classic .work-detail .work-detail-nav>li a.active {
text-decoration: none; padding-bottom: 3px
}
.portfolio--classic .work-detail .content-wrapper {
padding-right: 20px; overflow-y: scroll
}
@media (min-width: 1025px) {
.portfolio--classic .work-detail .content-wrapper
{
height: calc(33.33vw - 140px)
}
}
.portfolio--classic .work-detail .content-wrapper ul {
padding-left: 20px; list-style: disc; margin-bottom: 1.5em
}
.portfolio--classic .work-detail .content-wrapper p {
margin-top: 0; margin-bottom: 1em
}
@media (min-width: 1025px) {
.portfolio--classic .portfolio-header
{
height: 33.33vw;
padding: 0
}
.portfolio--classic .portfolio-header .article-title
{
white-space: nowrap;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
margin: 0;
margin-left: 52px;
line-height: 1
}
}
@media (max-width: 1024px) {
.portfolio--classic .portfolio-header
{
padding-top: 80px;
padding-bottom: 32px;
text-align: center
}
.portfolio--classic .portfolio-header .article-meta
{
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1;
letter-spacing: 0;
color: rgba(0,0,0,0.38)
}
.portfolio--classic .portfolio-header .article-meta .label
{
padding-left: 4px;
padding-right: 4px
}
}
.portfolio--classic .portfolio-footer {
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center
}
@media (min-width: 1025px) {
.portfolio--classic .portfolio-footer
{
position: absolute;
z-index: 50;
width: 100vw;
bottom: 6vh
}
}
@media (max-width: 1024px) {
.portfolio--classic .portfolio-footer
{
margin-top: 24px;
margin-bottom: 24px
}
}
.portfolio--classic .portfolio-footer .wrapper {
width: 960px
}
.portfolio--classic .portfolio-footer .portfolio-navigation {
margin: 0
}
@media (max-width: 640px) {
.portfolio-brief
{
font-size: 31px;
line-height: 1.5 !important
}
}
.price-table--body {
min-height: 420px
}
.page--4ocal-web-ui-kit .color-primary {
color: #92A8D1
}
.page--4ocal-web-ui-kit .bg-color-primary {
background: #92A8D1
}
.page--4ocal-web-ui-kit .color-secondary {
color: #F7CAC9
}
.page--4ocal-web-ui-kit .bg-color-secondary {
background: #F7CAC9
}
.page--4ocal-web-ui-kit .color-success {
color: #79C753
}
.page--4ocal-web-ui-kit .bg-color-success {
background: #79C753
}
.page--4ocal-web-ui-kit .color-warning {
color: #FAE03C
}
.page--4ocal-web-ui-kit .bg-color-warning {
background: #FAE03C
}
.page--4ocal-web-ui-kit .color-alert {
color: #DD4132
}
.page--4ocal-web-ui-kit .bg-color-alert {
background: #DD4132
}
.page--4ocal-web-ui-kit .page-border {
border-color: white
}
.page--4ocal-web-ui-kit .page-container {
background: #F7CAC9; z-index: -2
}
.page--4ocal-web-ui-kit .main:after {
content: ""; width: 50%; position: absolute; top: 0; right: 0; bottom: 0; background: #92A8D1; z-index: -1
}
.page--4ocal-web-ui-kit .portfolio-header {
width: 100%; padding-top: 120px; padding-bottom: 120px
}
@media (max-width: 840px) and (min-width: 481px) {
.page--4ocal-web-ui-kit .portfolio-header h1
{
font-size: 56px
}
.page--4ocal-web-ui-kit .portfolio-header h5
{
font-size: 18px
}
}
@media (max-width: 480px) and (max-width: 361px) {
.page--4ocal-web-ui-kit .portfolio-header h1
{
font-size: 32px
}
.page--4ocal-web-ui-kit .portfolio-header h5
{
font-size: 10px
}
.page--4ocal-web-ui-kit .portfolio-header .portfolio-title
{
text-align: center
}
.page--4ocal-web-ui-kit .portfolio-header .portfolio-brief
{
font-size: 24px;
line-height: 1.4
}
.page--4ocal-web-ui-kit .portfolio-header .layout-space-4
{
height: 2rem
}
}
@media (max-width: 360px) {
.page--4ocal-web-ui-kit .portfolio-header
{
padding-bottom: 60px
}
.page--4ocal-web-ui-kit .portfolio-header h1
{
font-size: 28px
}
.page--4ocal-web-ui-kit .portfolio-header h5
{
font-size: 8px
}
.page--4ocal-web-ui-kit .portfolio-header .color-primary
{
width: 60%
}
.page--4ocal-web-ui-kit .portfolio-header .portfolio-title
{
text-align: center
}
.page--4ocal-web-ui-kit .portfolio-header .portfolio-title img
{
width: 80%
}
.page--4ocal-web-ui-kit .portfolio-header .portfolio-brief
{
font-size: 18px;
line-height: 1.4
}
}
.page--4ocal-web-ui-kit .portfolio-details {
box-shadow: 0 4px 5px 0 rgba(0,0,0,0.04); background-color: #f2f2f2
}
@media (min-width: 1281px) {
.page--4ocal-web-ui-kit .portfolio-details
{
margin-left: 80px;
margin-right: 80px
}
}
@media (min-width: 1025px) and (max-width: 1280px) {
.page--4ocal-web-ui-kit .portfolio-details
{
margin-left: 48px;
margin-right: 48px
}
}
.page--4ocal-web-ui-kit .section-title.combo {
margin-bottom: 80px
}
@media (max-width: 600px) {
.page--4ocal-web-ui-kit .section-title.combo
{
margin-bottom: 48px
}
}
.page--4ocal-web-ui-kit .section-title.combo h1,.page--4ocal-web-ui-kit .section-title.combo h3 {
margin: 0; font-weight: 400
}
.page--4ocal-web-ui-kit .section-title.combo h1 {
text-align: center; color: rgba(0,0,0,0.12)
}
@media (max-width: 840px) and (min-width: 601px) {
.page--4ocal-web-ui-kit .section-title.combo h1
{
font-size: 56px
}
}
@media (max-width: 600px) and (min-width: 361px) {
.page--4ocal-web-ui-kit .section-title.combo h1
{
font-size: 42px
}
}
@media (max-width: 360px) {
.page--4ocal-web-ui-kit .section-title.combo h1
{
font-size: 36px
}
}
.page--4ocal-web-ui-kit .section-title.combo h3 {
margin-top: -0.8em
}
@media (max-width: 840px) and (min-width: 601px) {
.page--4ocal-web-ui-kit .section-title.combo h3
{
font-size: 28px;
margin-top: -1em
}
}
@media (max-width: 600px) and (min-width: 481px) {
.page--4ocal-web-ui-kit .section-title.combo h3
{
font-size: 24px;
margin-top: -1.2em
}
}
@media (max-width: 480px) {
.page--4ocal-web-ui-kit .section-title.combo h3
{
font-size: 18px;
margin-top: -1.2em
}
}
@media (max-width: 360px) {
.page--4ocal-web-ui-kit .section-title.combo .cols
{
width: 100vw;
text-align: center
}
.page--4ocal-web-ui-kit .section-title.combo .col-3
{
width: 0
}
}
.page--4ocal-web-ui-kit .sub-section-title {
text-align: center; color: #F7CAC9
}
.page--4ocal-web-ui-kit .sub-section-title .components-title {
margin-bottom: -0.5rem
}
@media (max-width: 360px) {
.page--4ocal-web-ui-kit .sub-section-title .components-title
{
margin-bottom: -0.2em
}
}
@media (max-width: 600px) and (min-width: 481px) {
.page--4ocal-web-ui-kit .sub-section-title h1
{
font-size: 56px
}
}
@media (max-width: 480px) and (min-width: 361px) {
.page--4ocal-web-ui-kit .sub-section-title h1
{
font-size: 38px
}
}
@media (max-width: 360px) {
.page--4ocal-web-ui-kit .sub-section-title h1
{
font-size: 28px
}
}
.page--4ocal-web-ui-kit .color {
text-align: center
}
.page--4ocal-web-ui-kit .color-1 {
z-index: 50
}
.page--4ocal-web-ui-kit .color-2 {
margin-left: -48px; z-index: 9
}
@media (max-width: 480px) {
.page--4ocal-web-ui-kit .color-2
{
margin-left: -24px
}
}
.page--4ocal-web-ui-kit .color .circle {
width: 200px; height: 200px; border-radius: 50%; margin-bottom: 1rem
}
@media (max-width: 600px) and (min-width: 481px) {
.page--4ocal-web-ui-kit .color .circle
{
width: 150px;
height: 150px
}
}
@media (max-width: 480px) and (min-width: 361px) {
.page--4ocal-web-ui-kit .color .circle
{
width: 100px;
height: 100px;
margin-bottom: 0.5rem
}
}
@media (max-width: 360px) {
.page--4ocal-web-ui-kit .color .circle
{
width: 80px;
height: 80px
}
}
.page--4ocal-web-ui-kit .color .circle.small {
width: 100px; height: 100px
}
@media (max-width: 600px) and (min-width: 481px) {
.page--4ocal-web-ui-kit .color .circle.small
{
width: 70px;
height: 70px
}
}
@media (max-width: 480px) and (min-width: 361px) {
.page--4ocal-web-ui-kit .color .circle.small
{
width: 40px;
height: 40px
}
}
@media (max-width: 360px) {
.page--4ocal-web-ui-kit .color .circle.small
{
width: 30px;
height: 30px
}
}
.page--4ocal-web-ui-kit .color-1 .circle,.page--4ocal-web-ui-kit .color-2 .circle {
opacity: 0.8
}
.page--4ocal-web-ui-kit .color .color-name {
font-weight: 400; margin: 0
}
@media (max-width: 600px) and (min-width: 481px) {
.page--4ocal-web-ui-kit .color .color-name
{
font-size: 18px
}
}
@media (max-width: 480px) and (min-width: 361px) {
.page--4ocal-web-ui-kit .color .color-name
{
font-size: 16px
}
}
@media (max-width: 360px) {
.page--4ocal-web-ui-kit .color .color-name
{
display: none
}
}
.page--4ocal-web-ui-kit .color .color-value {
font-weight: 400; color: rgba(0,0,0,0.54); letter-spacing: 0.1em
}
@media (max-width: 600px) and (min-width: 481px)
{
.page--4ocal-web-ui-kit .color .color-value
{
font-size: 14px
}
}
@media (max-width: 480px) and (min-width: 361px) {
.page--4ocal-web-ui-kit .color .color-value
{
font-size: 10px
}
}
@media (max-width: 360px) {
.page--4ocal-web-ui-kit .color .color-value
{
display: none
}
}
.page--4ocal-web-ui-kit .accent-color {
height: 100%
}
.page--4ocal-web-ui-kit .price-table--body {
min-height: 510px
}
.page--4eeder-web-ui-kit .page-border {
border-color: white
}
.page--4eeder-web-ui-kit .hero--content--mobile {
margin: 0; padding: 0
}
.page--4eeder-web-ui-kit .hero--content {
background: #034F84; color: white; padding: 0; height: 715px; position: relative
}
.page--4eeder-web-ui-kit .hero--content .portfolio-header {
position: absolute; top: calc(50% + 10px); -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 50%; padding-top: 0; padding-left: 20px; padding-right: 20px; text-align: center; background: #034F84; z-index: 50
}
.page--4eeder-web-ui-kit .hero--content .portfolio-title,.page--4eeder-web-ui-kit .hero--content .portfolio-brief {
margin: 0; font-weight: 400; letter-spacing: 0; line-height: 1em
}
.page--4eeder-web-ui-kit .hero--content .button {
background: #B18F6A; box-shadow: none; border-radius: 2px; margin-top: 2rem
}
.page--4eeder-web-ui-kit .hero--content .deco--line {
position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 100%; height: 1px; background: white; z-index: 9
}
.page--4eeder-web-ui-kit .hero--content .portfolio-logo {
position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: calc(50% + 540px); padding: 20px; background: #034F84; z-index: 999
}
@media (max-width: 1280px) {
.page--4eeder-web-ui-kit .hero--content .portfolio-logo
{
display: none
}
}
.page--4eeder-web-ui-kit .hero--content .hero--images {
height: 715px; overflow: hidden; position: relative; z-index: 99
}
.page--4eeder-web-ui-kit .hero--content .hero--images .col--left {
text-align: left; height: 715px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between
}
.page--4eeder-web-ui-kit .hero--content .hero--images .col--right {
text-align: right
}
.page--4eeder-web-ui-kit .hero--content .hero--images img:not(:last-of-type) {
margin-bottom: 24px
}
.page--4eeder-web-ui-kit .hero--content .hero--images .hero--image-1 {
margin-top: -120px
}
.page--4eeder-web-ui-kit .hero--content .hero--images .hero--image-2 {
margin-bottom: -120px
}
.page--4eeder-web-ui-kit #intro {
background: #034F84; color: white; text-align: center; font-size: 20px; font-weight: 300; letter-spacing: 0.067em
}
@media (max-width: 640px) {
.page--4eeder-web-ui-kit #intro
{
font-size: 16px
}
}
.page--4eeder-web-ui-kit #intro .button {
margin-top: 32px; margin-bottom: 24px
}
.page--4eeder-web-ui-kit .section-title {
text-align: center; margin-bottom: 64px
}
.page--4eeder-web-ui-kit .section-title h1 {
font-weight: 200; margin-bottom: 64px
}
@media (max-width: 640px) {
.page--4eeder-web-ui-kit .section-title h1
{
font-size: 32px
}
}
.page--4eeder-web-ui-kit #styles img:not(:last-of-type) {
margin-bottom: 120px
}
@media (max-width: 640px) {
.page--4eeder-web-ui-kit #styles img:not(:last-of-type)
{
margin-bottom: 60px
}
}
.page--4eeder-web-ui-kit .sub-section {
padding-top: 64px
}
.page--4eeder-web-ui-kit .price-table {
-webkit-box-align: center; -ms-flex-align: center; align-items: center
}
.page--4eeder-web-ui-kit .price-table--body {
min-height: auto !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center
}
.page--applemusic-gui {
background-color: #fff
}
.page--applemusic-gui .page-border {
border-style: solid; border-width: 8px; border-image-source: radial-gradient(circle at 25% 100%, #e751be, #eb719d 34%, #9c62ea 67%, #4e54e6); border-image-slice: 1
}
.page--applemusic-gui h1,.page--applemusic-gui h2 {
font-family: "myriad-pro","Helvetica Neue","Helvetica","Arial",sans-serif !important
}
.page--applemusic-gui p {
font-size: 1rem
}
.page--applemusic-gui .container {
margin: 0 auto; padding-top: 120px; padding-bottom: 120px; text-align: center
}
@media (min-width: 961px) {
.page--applemusic-gui .container
{
width: 960px
}
}
@media (max-width: 960px) {
.page--applemusic-gui .container
{
width: 100%;
padding-left: 24px;
padding-right: 24px
}
}
@media (max-width: 480px) {
.page--applemusic-gui .container
{
padding: 3rem 1rem
}
}
.page--applemusic-gui .button {
font-size: 15.75px; line-height: 1.9375; font-weight: 300; letter-spacing: 0em; background-color: #0070c9; background: linear-gradient(#42a1ec, #0070c9); border-color: #07c; border-width: 1px; border-style: solid; border-radius: 4px; color: #fff; cursor: pointer; display: inline-block; min-width: 30px; padding-left: 15px; padding-right: 15px; padding-top: 1px; text-align: center; white-space: nowrap; text-decoration: none; margin-top: 40px; text-transform: capitalize
}
.page--applemusic-gui .button:hover,.page--applemusic-gui .button:focus {
background-color: #147bcd; background: linear-gradient(#51a9ee, #147bcd); border-color: #1482d0; text-decoration: none
}
.page--applemusic-gui section {
padding: 0
}
.page--applemusic-gui section h1,.page--applemusic-gui section h2 {
margin-left: auto; margin-right: auto
}
.page--applemusic-gui section h2 {
font-size: 48px; line-height: 1; font-weight: 300; letter-spacing: 0em; margin-top: 16px
}
@media (min-width: 961px) {
.page--applemusic-gui section h2
{
width: 640px
}
}
@media (max-width: 600px) {
.page--applemusic-gui section h2
{
font-size: 36px
}
}
@media (max-width: 480px) {
.page--applemusic-gui section h2
{
font-size: 28px
}
}
.page--applemusic-gui section p {
margin-left: auto; margin-right: auto
}
@media (min-width: 961px) {
.page--applemusic-gui section p
{
width: 640px
}
}
.page--applemusic-gui section p.update {
font-size: 15.75px; color: #999; margin-top: 8px
}
.page--applemusic-gui section#section-hero {
background-color: #fafafa
}
.page--applemusic-gui section#section-hero .container {
padding-top: 120px
}
.page--applemusic-gui section#section-hero h1 {
font-size: 64px; line-height: 1.0625; letter-spacing: -0.02em; font-weight: 300
}
@media (min-width: 961px) {
.page--applemusic-gui section#section-hero h1
{
width: 864px
}
}
@media (max-width: 600px) {
.page--applemusic-gui section#section-hero h1
{
font-size: 48px
}
}
@media (max-width: 480px) {
.page--applemusic-gui section#section-hero h1
{
font-size: 32px
}
}
.page--applemusic-gui section#section-hero h1 .subhead {
display: block; color: #888888
}
.page--applemusic-gui section#desclaimer {
height: 600px;
background: url("../images/sketch_screen_02.jpg") no-repeat top center;
color: #fff
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.page--applemusic-gui section#desclaimer
{
background: url("../images/sketch_screen_02@2x.jpg") no-repeat top center;
background-size: auto 600px
}
}
.page--applemusic-gui section#desclaimer .container {
padding-top: 170px
}
.page--applemusic-gui section#desclaimer .social-share {
margin-top: 60px
}
.page--applemusic-gui section#desclaimer .social-share>a {
color: #fff; font-size: 15.75px
}
.page--applemusic-gui section#desclaimer .social-share>a .social-icon {
width: 18px; height: 18px
}
.page--applemusic-gui section#desclaimer .social-share>a span {
vertical-align: top; line-height: 20px; margin-left: 4px
}
.page--applemusic-gui section#desclaimer .social-share>a.facebook-share-button {
margin-right: 18px
}
.page--applemusic-gui figure.hero-image {
width: 930px;
height: 532px;
background: url("../images/apple_music_image.jpg") no-repeat center;
margin-left: auto;
margin-right: auto;
position: relative;
margin-top: 120px
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.page--applemusic-gui figure.hero-image
{
background: url("../images/apple_music_image@2x.jpg") no-repeat center;
background-size: 930px 532px
}
}
@media (max-width: 960px) {
.page--applemusic-gui figure.hero-image
{
background-size: contain;
width: 100%
}
}
@media (max-width: 600px) {
.page--applemusic-gui figure.hero-image
{
height: 350px;
margin-top: 64px
}
}
@media (max-width: 480px) {
.page--applemusic-gui figure.hero-image
{
height: 280px
}
}
@media (max-width: 360px) {
.page--applemusic-gui figure.hero-image
{
height: 210px;
margin-top: 48px
}
}
.page--applemusic-gui figure.apple-music-logo {
width: 138px;
height: 35px;
background: url("../images/apple_music_logo.png") no-repeat center;
margin-left: auto;
margin-right: auto
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.page--applemusic-gui figure.apple-music-logo
{
background: url("../images/apple_music_logo@2x.png") no-repeat center;
background-size: 138px 35px
}
}
.page--applemusic-gui figure.sketch-preview {
width: 980px;
height: 620px;
background: url("../images/sketch_screen_01.jpg") no-repeat center;
margin-left: auto;
margin-right: auto;
position: relative;
margin-top: 60px;
box-shadow: 0 4px 5px 0 rgba(0,0,0,0.04)
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.page--applemusic-gui figure.sketch-preview
{
background: url("../images/sketch_screen_01@2x.jpg") no-repeat center;
background-size: 980px 620px
}
}
@media (max-width: 960px) {
.page--applemusic-gui figure.sketch-preview
{
background-size: contain;
width: 100%
}
}
@media (max-width: 840px) {
.page--applemusic-gui figure.sketch-preview
{
height: 485px
}
}
@media (max-width: 600px) {
.page--applemusic-gui figure.sketch-preview
{
height: 336px;
margin-top: 64px
}
}
@media (max-width: 480px) {
.page--applemusic-gui figure.sketch-preview
{
height: 280px
}
}
@media (max-width: 360px) {
.page--applemusic-gui figure.sketch-preview
{
height: 210px;
margin-top: 48px
}
}
.page--applemusic-gui #slides {
width: 930px;
height: 532px;
padding: 39px 121px 62px 119px;
background: url("../images/macbook_mockup.jpg") no-repeat center
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.page--applemusic-gui #slides
{
background: url("../images/macbook_mockup@2x.jpg") no-repeat center;
background-size: 930px 532px
}
}
@media (max-width: 960px) {
.page--applemusic-gui #slides
{
width: 744px;
height: 425.6px;
padding: 31px 96px 34px 94px;
background: url("../images/macbook_mockup.jpg") no-repeat center
}
}
@media screen and (max-width: 960px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 960px) and (min--moz-device-pixel-ratio: 2), screen and (max-width: 960px) and (-moz-min-device-pixel-ratio: 2), screen and (max-width: 960px) and (min-device-pixel-ratio: 2), screen and (max-width: 960px) and (min-resolution: 192dpi), screen and (max-width: 960px) and (min-resolution: 2dppx) {
.page--applemusic-gui #slides
{
background: url("../images/macbook_mockup@2x.jpg") no-repeat center;
background-size: 744px 425.6px
}
}
@media (max-width: 960px) {
.page--applemusic-gui #slides #overflow,.page--applemusic-gui #slides img
{
width: 553px
}
}
@media (max-width: 840px) {
.page--applemusic-gui #slides
{
width: 558px;
height: 319.2px;
padding: 24px 73px 26px 71px;
background: url("../images/macbook_mockup.jpg") no-repeat center
}
}
@media screen and (max-width: 840px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 840px) and (min--moz-device-pixel-ratio: 2), screen and (max-width: 840px) and (-moz-min-device-pixel-ratio: 2), screen and (max-width: 840px) and (min-device-pixel-ratio: 2), screen and (max-width: 840px) and (min-resolution: 192dpi), screen and (max-width: 840px) and (min-resolution: 2dppx) {
.page--applemusic-gui #slides
{
background: url("../images/macbook_mockup@2x.jpg") no-repeat center;
background-size: 558px 319.2px
}
}
@media (max-width: 840px) {
.page--applemusic-gui #slides #overflow,.page--applemusic-gui #slides img
{
width: 414px
}
}
@media (max-width: 600px) {
.page--applemusic-gui #slides
{
width: 418.5px;
height: 239.4px;
padding: 17px 54px 18px 53px;
background: url("../images/macbook_mockup.jpg") no-repeat center
}
}
@media screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 600px) and (min--moz-device-pixel-ratio: 2), screen and (max-width: 600px) and (-moz-min-device-pixel-ratio: 2), screen and (max-width: 600px) and (min-device-pixel-ratio: 2), screen and (max-width: 600px) and (min-resolution: 192dpi), screen and (max-width: 600px) and (min-resolution: 2dppx) {
.page--applemusic-gui #slides
{
background: url("../images/macbook_mockup@2x.jpg") no-repeat center;
background-size: 418.5px 239.4px
}
}
@media (max-width: 600px) {
.page--applemusic-gui #slides #overflow,.page--applemusic-gui #slides img
{
width: 310.5px
}
}
@media (max-width: 480px) {
.page--applemusic-gui #slides
{
width: 353.4px;
height: 202.16px;
padding: 15px 46px 16px 45px;
background: url("../images/macbook_mockup.jpg") no-repeat center
}
}
@media screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 480px) and (min--moz-device-pixel-ratio: 2), screen and (max-width: 480px) and (-moz-min-device-pixel-ratio: 2), screen and (max-width: 480px) and (min-device-pixel-ratio: 2), screen and (max-width: 480px) and (min-resolution: 192dpi), screen and (max-width: 480px) and (min-resolution: 2dppx) {
.page--applemusic-gui #slides
{
background: url("../images/macbook_mockup@2x.jpg") no-repeat center;
background-size: 353.4px 202.16px
}
}
@media (max-width: 480px) {
.page--applemusic-gui #slides #overflow,.page--applemusic-gui #slides img
{
width: 262.2px
}
}
@media (max-width: 360px) {
.page--applemusic-gui #slides
{
width: 279px;
height: 159.6px;
padding: 12px 36px 13px 35px;
background: url("../images/macbook_mockup.jpg") no-repeat center
}
}
@media screen and (max-width: 360px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 360px) and (min--moz-device-pixel-ratio: 2), screen and (max-width: 360px) and (-moz-min-device-pixel-ratio: 2), screen and (max-width: 360px) and (min-device-pixel-ratio: 2), screen and (max-width: 360px) and (min-resolution: 192dpi), screen and (max-width: 360px) and (min-resolution: 2dppx) {
.page--applemusic-gui #slides
{
background: url("../images/macbook_mockup@2x.jpg") no-repeat center;
background-size: 279px 159.6px
}
}
@media (max-width: 360px) {
.page--applemusic-gui #slides #overflow,.page--applemusic-gui #slides img
{
width: 207px
}
}
