1545 lines
40 KiB
CSS
1545 lines
40 KiB
CSS
@font-face {
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-family: 'feathericons';
|
|
src:url('../fonts/feathericons/feathericons.eot?-8is7zf');
|
|
src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),
|
|
url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),
|
|
url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),
|
|
url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg');
|
|
}
|
|
|
|
.grid {
|
|
overflow: hidden;
|
|
margin: 0;
|
|
padding: 3em 0 0 0;
|
|
width: 100%;
|
|
list-style: none;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Common style */
|
|
.grid figure {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
margin: -0.135em;
|
|
width: 33.333%;
|
|
height: 400px;
|
|
background: #3085a3;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.grid figure img {
|
|
position: relative;
|
|
display: block;
|
|
min-height: 100%;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.grid figure figcaption {
|
|
padding: 2em;
|
|
color: #fff;
|
|
text-transform: uppercase;
|
|
font-size: 1.25em;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.grid figure figcaption::before,
|
|
.grid figure figcaption::after {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.grid figure figcaption,
|
|
.grid figure a {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Anchor will cover the whole item by default */
|
|
/* For some effects it will show as a button */
|
|
.grid figure a {
|
|
z-index: 1000;
|
|
text-indent: 200%;
|
|
white-space: nowrap;
|
|
font-size: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.grid figure h2 {
|
|
word-spacing: -0.15em;
|
|
|
|
font-weight: 300;
|
|
}
|
|
|
|
.grid figure h2 span {
|
|
font-weight: 800;
|
|
}
|
|
|
|
.grid figure h2,
|
|
.grid figure p {
|
|
margin: 0;
|
|
}
|
|
|
|
.grid figure p {
|
|
letter-spacing: 1px;
|
|
font-size: 68.5%;
|
|
}
|
|
|
|
/* Individual effects */
|
|
|
|
/*---------------*/
|
|
/***** Lily *****/
|
|
/*---------------*/
|
|
|
|
figure.effect-lily img {
|
|
width: -webkit-calc(100% + 50px);
|
|
width: calc(100% + 50px);
|
|
opacity: 0.7;
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
-webkit-transform: translate3d(-40px,0, 0);
|
|
transform: translate3d(-40px,0,0);
|
|
}
|
|
|
|
figure.effect-lily figcaption {
|
|
top: auto;
|
|
bottom: 0;
|
|
height: 50%;
|
|
text-align: left;
|
|
}
|
|
|
|
figure.effect-lily h2,
|
|
figure.effect-lily p {
|
|
-webkit-transform: translate3d(0,40px,0);
|
|
transform: translate3d(0,40px,0);
|
|
}
|
|
|
|
figure.effect-lily h2 {
|
|
-webkit-transition: -webkit-transform 0.35s;
|
|
transition: transform 0.35s;
|
|
}
|
|
|
|
figure.effect-lily p {
|
|
color: rgba(255,255,255,0.6);
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
|
|
transition: opacity 0.2s, transform 0.35s;
|
|
}
|
|
|
|
figure.effect-lily:hover img,
|
|
figure.effect-lily:hover p {
|
|
opacity: 1;
|
|
}
|
|
|
|
figure.effect-lily:hover img,
|
|
figure.effect-lily:hover h2,
|
|
figure.effect-lily:hover p {
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
figure.effect-lily:hover p {
|
|
-webkit-transition-delay: 0.05s;
|
|
transition-delay: 0.05s;
|
|
-webkit-transition-duration: 0.35s;
|
|
transition-duration: 0.35s;
|
|
}
|
|
|
|
/*---------------*/
|
|
/***** Sadie *****/
|
|
/*---------------*/
|
|
|
|
figure.effect-sadie figcaption::before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
|
|
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
|
|
content: '';
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0,50%,0);
|
|
transform: translate3d(0,50%,0);
|
|
}
|
|
|
|
figure.effect-sadie h2 {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
width: 100%;
|
|
color: #484c61;
|
|
-webkit-transition: -webkit-transform 0.35s, color 0.35s;
|
|
transition: transform 0.35s, color 0.35s;
|
|
-webkit-transform: translate3d(0,-50%,0);
|
|
transform: translate3d(0,-50%,0);
|
|
}
|
|
|
|
figure.effect-sadie figcaption::before,
|
|
figure.effect-sadie p {
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
}
|
|
|
|
figure.effect-sadie p {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 2em;
|
|
width: 100%;
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0,10px,0);
|
|
transform: translate3d(0,10px,0);
|
|
}
|
|
|
|
figure.effect-sadie:hover h2 {
|
|
color: #fff;
|
|
-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
|
|
transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
|
|
}
|
|
|
|
figure.effect-sadie:hover figcaption::before ,
|
|
figure.effect-sadie:hover p {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
/*---------------*/
|
|
/***** Roxy *****/
|
|
/*---------------*/
|
|
|
|
figure.effect-roxy {
|
|
background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
|
|
background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
|
|
}
|
|
|
|
figure.effect-roxy img {
|
|
width: -webkit-calc(100% + 60px);
|
|
width: calc(100% + 60px);
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
-webkit-transform: translate3d(-50px,0,0);
|
|
transform: translate3d(-50px,0,0);
|
|
}
|
|
|
|
figure.effect-roxy figcaption::before {
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 30px;
|
|
bottom: 30px;
|
|
left: 30px;
|
|
border: 1px solid #fff;
|
|
content: '';
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
-webkit-transform: translate3d(-20px,0,0);
|
|
transform: translate3d(-20px,0,0);
|
|
}
|
|
|
|
figure.effect-roxy figcaption {
|
|
padding: 3em;
|
|
text-align: left;
|
|
}
|
|
|
|
figure.effect-roxy h2 {
|
|
padding: 30% 0 10px 0;
|
|
}
|
|
|
|
figure.effect-roxy p {
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
-webkit-transform: translate3d(-10px,0,0);
|
|
transform: translate3d(-10px,0,0);
|
|
}
|
|
|
|
figure.effect-roxy:hover img {
|
|
opacity: 0.7;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
figure.effect-roxy:hover figcaption::before,
|
|
figure.effect-roxy:hover p {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
/*---------------*/
|
|
/***** Bubba *****/
|
|
/*---------------*/
|
|
|
|
figure.effect-bubba {
|
|
background: #9e5406;
|
|
}
|
|
|
|
figure.effect-bubba img {
|
|
opacity: 0.7;
|
|
-webkit-transition: opacity 0.35s;
|
|
transition: opacity 0.35s;
|
|
}
|
|
|
|
figure.effect-bubba:hover img {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
figure.effect-bubba figcaption::before,
|
|
figure.effect-bubba figcaption::after {
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 30px;
|
|
bottom: 30px;
|
|
left: 30px;
|
|
content: '';
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
}
|
|
|
|
figure.effect-bubba figcaption::before {
|
|
border-top: 1px solid #fff;
|
|
border-bottom: 1px solid #fff;
|
|
-webkit-transform: scale(0,1);
|
|
transform: scale(0,1);
|
|
}
|
|
|
|
figure.effect-bubba figcaption::after {
|
|
border-right: 1px solid #fff;
|
|
border-left: 1px solid #fff;
|
|
-webkit-transform: scale(1,0);
|
|
transform: scale(1,0);
|
|
}
|
|
|
|
figure.effect-bubba h2 {
|
|
padding-top: 30%;
|
|
-webkit-transition: -webkit-transform 0.35s;
|
|
transition: transform 0.35s;
|
|
-webkit-transform: translate3d(0,-20px,0);
|
|
transform: translate3d(0,-20px,0);
|
|
}
|
|
|
|
figure.effect-bubba p {
|
|
padding: 20px 2.5em;
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
-webkit-transform: translate3d(0,20px,0);
|
|
transform: translate3d(0,20px,0);
|
|
}
|
|
|
|
figure.effect-bubba:hover figcaption::before,
|
|
figure.effect-bubba:hover figcaption::after {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
figure.effect-bubba:hover h2,
|
|
figure.effect-bubba:hover p {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
/*---------------*/
|
|
/***** Romeo *****/
|
|
/*---------------*/
|
|
|
|
figure.effect-romeo {
|
|
-webkit-perspective: 1000px;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
figure.effect-romeo img {
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
-webkit-transform: translate3d(0,0,300px);
|
|
transform: translate3d(0,0,300px);
|
|
}
|
|
|
|
figure.effect-romeo:hover img {
|
|
opacity: 0.6;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
figure.effect-romeo figcaption::before,
|
|
figure.effect-romeo figcaption::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 80%;
|
|
height: 1px;
|
|
background: #fff;
|
|
content: '';
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
-webkit-transform: translate3d(-50%,-50%,0);
|
|
transform: translate3d(-50%,-50%,0);
|
|
}
|
|
|
|
figure.effect-romeo:hover figcaption::before {
|
|
opacity: 0.5;
|
|
-webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
|
|
transform: translate3d(-50%,-50%,0) rotate(45deg);
|
|
}
|
|
|
|
figure.effect-romeo:hover figcaption::after {
|
|
opacity: 0.5;
|
|
-webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
|
|
transform: translate3d(-50%,-50%,0) rotate(-45deg);
|
|
}
|
|
|
|
figure.effect-romeo h2,
|
|
figure.effect-romeo p {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
width: 100%;
|
|
-webkit-transition: -webkit-transform 0.35s;
|
|
transition: transform 0.35s;
|
|
}
|
|
|
|
figure.effect-romeo h2 {
|
|
-webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
|
|
transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
|
|
}
|
|
|
|
figure.effect-romeo p {
|
|
padding: 0.25em 2em;
|
|
-webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
|
|
transform: translate3d(0,-50%,0) translate3d(0,150%,0);
|
|
}
|
|
|
|
figure.effect-romeo:hover h2 {
|
|
-webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
|
|
transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
|
|
}
|
|
|
|
figure.effect-romeo:hover p {
|
|
-webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
|
|
transform: translate3d(0,-50%,0) translate3d(0,100%,0);
|
|
}
|
|
|
|
/*---------------*/
|
|
/***** Layla *****/
|
|
/*---------------*/
|
|
|
|
figure.effect-layla {
|
|
background: #18a367;
|
|
}
|
|
|
|
figure.effect-layla img {
|
|
min-width: 100%;
|
|
height: -webkit-calc(100% + 40px);
|
|
height: calc(100% + 40px);
|
|
}
|
|
|
|
figure.effect-layla figcaption {
|
|
padding: 3em;
|
|
}
|
|
|
|
figure.effect-layla figcaption::before,
|
|
figure.effect-layla figcaption::after {
|
|
position: absolute;
|
|
content: '';
|
|
opacity: 0;
|
|
}
|
|
|
|
figure.effect-layla figcaption::before {
|
|
top: 50px;
|
|
right: 30px;
|
|
bottom: 50px;
|
|
left: 30px;
|
|
border-top: 1px solid #fff;
|
|
border-bottom: 1px solid #fff;
|
|
-webkit-transform: scale(0,1);
|
|
transform: scale(0,1);
|
|
-webkit-transform-origin: 0 0;
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
figure.effect-layla figcaption::after {
|
|
top: 30px;
|
|
right: 50px;
|
|
bottom: 30px;
|
|
left: 50px;
|
|
border-right: 1px solid #fff;
|
|
border-left: 1px solid #fff;
|
|
-webkit-transform: scale(1,0);
|
|
transform: scale(1,0);
|
|
-webkit-transform-origin: 100% 0;
|
|
transform-origin: 100% 0;
|
|
}
|
|
|
|
figure.effect-layla h2 {
|
|
padding-top: 26%;
|
|
-webkit-transition: -webkit-transform 0.35s;
|
|
transition: transform 0.35s;
|
|
}
|
|
|
|
figure.effect-layla p {
|
|
padding: 0.5em 2em;
|
|
text-transform: none;
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0,-10px,0);
|
|
transform: translate3d(0,-10px,0);
|
|
}
|
|
|
|
figure.effect-layla img,
|
|
figure.effect-layla h2 {
|
|
-webkit-transform: translate3d(0,-30px,0);
|
|
transform: translate3d(0,-30px,0);
|
|
}
|
|
|
|
figure.effect-layla img,
|
|
figure.effect-layla figcaption::before,
|
|
figure.effect-layla figcaption::after,
|
|
figure.effect-layla p {
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
}
|
|
|
|
figure.effect-layla:hover img {
|
|
opacity: 0.7;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
figure.effect-layla:hover figcaption::before,
|
|
figure.effect-layla:hover figcaption::after {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
figure.effect-layla:hover h2,
|
|
figure.effect-layla:hover p {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
figure.effect-layla:hover figcaption::after,
|
|
figure.effect-layla:hover h2,
|
|
figure.effect-layla:hover p,
|
|
figure.effect-layla:hover img {
|
|
-webkit-transition-delay: 0.15s;
|
|
transition-delay: 0.15s;
|
|
}
|
|
|
|
/*---------------*/
|
|
/***** Honey *****/
|
|
/*---------------*/
|
|
|
|
figure.effect-honey {
|
|
background: #4a3753;
|
|
}
|
|
|
|
figure.effect-honey img {
|
|
opacity: 0.9;
|
|
-webkit-transition: opacity 0.35s;
|
|
transition: opacity 0.35s;
|
|
}
|
|
|
|
figure.effect-honey:hover img {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
figure.effect-honey figcaption::before {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 10px;
|
|
background: #fff;
|
|
content: '';
|
|
-webkit-transform: translate3d(0,10px,0);
|
|
transform: translate3d(0,10px,0);
|
|
}
|
|
|
|
figure.effect-honey h2 {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 1em 1.5em;
|
|
width: 100%;
|
|
text-align: left;
|
|
-webkit-transform: translate3d(0,-30px,0);
|
|
transform: translate3d(0,-30px,0);
|
|
}
|
|
|
|
figure.effect-honey h2 i {
|
|
font-style: normal;
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
-webkit-transform: translate3d(0,-30px,0);
|
|
transform: translate3d(0,-30px,0);
|
|
}
|
|
|
|
figure.effect-honey figcaption::before,
|
|
figure.effect-honey h2 {
|
|
-webkit-transition: -webkit-transform 0.35s;
|
|
transition: transform 0.35s;
|
|
}
|
|
|
|
figure.effect-honey:hover figcaption::before,
|
|
figure.effect-honey:hover h2,
|
|
figure.effect-honey:hover h2 i {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
/*---------------*/
|
|
/***** Oscar *****/
|
|
/*---------------*/
|
|
|
|
figure.effect-oscar {
|
|
background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
|
|
background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
|
|
}
|
|
|
|
figure.effect-oscar img {
|
|
opacity: 0.9;
|
|
-webkit-transition: opacity 0.35s;
|
|
transition: opacity 0.35s;
|
|
}
|
|
|
|
figure.effect-oscar figcaption {
|
|
padding: 3em;
|
|
background-color: rgba(58,52,42,0.7);
|
|
-webkit-transition: background-color 0.35s;
|
|
transition: background-color 0.35s;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
figure.effect-oscar figcaption::before {
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 30px;
|
|
bottom: 30px;
|
|
left: 30px;
|
|
border: 1px solid #fff;
|
|
content: '';
|
|
}
|
|
|
|
figure.effect-oscar h2 {
|
|
margin: 20% 0 10px 0;
|
|
-webkit-transition: -webkit-transform 0.35s;
|
|
transition: transform 0.35s;
|
|
-webkit-transform: translate3d(0,100%,0);
|
|
transform: translate3d(0,100%,0);
|
|
}
|
|
|
|
figure.effect-oscar figcaption::before,
|
|
figure.effect-oscar p {
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
}
|
|
|
|
figure.effect-oscar:hover h2 {
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
figure.effect-oscar:hover figcaption::before,
|
|
figure.effect-oscar:hover p {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
figure.effect-oscar:hover figcaption {
|
|
background-color: rgba(58,52,42,0);
|
|
}
|
|
|
|
figure.effect-oscar:hover img {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/*---------------*/
|
|
/***** Marley *****/
|
|
/*---------------*/
|
|
|
|
figure.effect-marley figcaption {
|
|
text-align: right;
|
|
}
|
|
|
|
figure.effect-marley h2,
|
|
figure.effect-marley p {
|
|
position: absolute;
|
|
right: 30px;
|
|
left: 30px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
|
|
figure.effect-marley p {
|
|
bottom: 30px;
|
|
line-height: 1.5;
|
|
-webkit-transform: translate3d(0,100%,0);
|
|
transform: translate3d(0,100%,0);
|
|
}
|
|
|
|
figure.effect-marley h2 {
|
|
top: 30px;
|
|
-webkit-transition: -webkit-transform 0.35s;
|
|
transition: transform 0.35s;
|
|
-webkit-transform: translate3d(0,20px,0);
|
|
transform: translate3d(0,20px,0);
|
|
}
|
|
|
|
figure.effect-marley:hover h2 {
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
figure.effect-marley h2::after {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 4px;
|
|
background: #fff;
|
|
content: '';
|
|
-webkit-transform: translate3d(0,40px,0);
|
|
transform: translate3d(0,40px,0);
|
|
}
|
|
|
|
figure.effect-marley h2::after,
|
|
figure.effect-marley p {
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
}
|
|
|
|
figure.effect-marley:hover h2::after,
|
|
figure.effect-marley:hover p {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
/*---------------*/
|
|
/***** Ruby *****/
|
|
/*---------------*/
|
|
|
|
figure.effect-ruby {
|
|
background-color: #17819c;
|
|
}
|
|
|
|
figure.effect-ruby img {
|
|
opacity: 0.7;
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
-webkit-transform: scale(1.15);
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
figure.effect-ruby:hover img {
|
|
opacity: 0.5;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
figure.effect-ruby h2 {
|
|
margin-top: 20%;
|
|
-webkit-transition: -webkit-transform 0.35s;
|
|
transition: transform 0.35s;
|
|
-webkit-transform: translate3d(0,20px,0);
|
|
transform: translate3d(0,20px,0);
|
|
}
|
|
|
|
figure.effect-ruby p {
|
|
margin: 1em 0 0;
|
|
padding: 3em;
|
|
border: 1px solid #fff;
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
-webkit-transform: translate3d(0,20px,0) scale(1.1);
|
|
transform: translate3d(0,20px,0) scale(1.1);
|
|
}
|
|
|
|
figure.effect-ruby:hover h2 {
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
figure.effect-ruby:hover p {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0,0,0) scale(1);
|
|
transform: translate3d(0,0,0) scale(1);
|
|
}
|
|
|
|
/*---------------*/
|
|
/***** Milo *****/
|
|
/*---------------*/
|
|
|
|
figure.effect-milo {
|
|
background: #2e5d5a;
|
|
}
|
|
|
|
figure.effect-milo img {
|
|
width: -webkit-calc(100% + 60px);
|
|
width: calc(100% + 60px);
|
|
opacity: 1;
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
-webkit-transform: translate3d(-30px,0,0) scale(1.12);
|
|
transform: translate3d(-30px,0,0) scale(1.12);
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
figure.effect-milo:hover img {
|
|
opacity: 0.5;
|
|
-webkit-transform: translate3d(0,0,0) scale(1);
|
|
transform: translate3d(0,0,0) scale(1);
|
|
}
|
|
|
|
figure.effect-milo h2 {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 1em 1.2em;
|
|
}
|
|
|
|
figure.effect-milo p {
|
|
padding: 0 10px 0 0;
|
|
width: 50%;
|
|
border-right: 1px solid #fff;
|
|
text-align: right;
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
-webkit-transform: translate3d(-40px,0,0);
|
|
transform: translate3d(-40px,0,0);
|
|
}
|
|
|
|
figure.effect-milo:hover p {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
/*---------------*/
|
|
/***** Dexter *****/
|
|
/*---------------*/
|
|
|
|
figure.effect-dexter {
|
|
background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
|
|
background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(104,60,19,1) 100%);
|
|
}
|
|
|
|
figure.effect-dexter img {
|
|
-webkit-transition: opacity 0.35s;
|
|
transition: opacity 0.35s;
|
|
}
|
|
|
|
figure.effect-dexter:hover img {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
figure.effect-dexter figcaption::after {
|
|
position: absolute;
|
|
right: 30px;
|
|
bottom: 30px;
|
|
left: 30px;
|
|
height: -webkit-calc(50% - 30px);
|
|
height: calc(50% - 30px);
|
|
border: 7px solid #fff;
|
|
content: '';
|
|
-webkit-transition: -webkit-transform 0.35s;
|
|
transition: transform 0.35s;
|
|
-webkit-transform: translate3d(0,-100%,0);
|
|
transform: translate3d(0,-100%,0);
|
|
}
|
|
|
|
figure.effect-dexter:hover figcaption::after {
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
figure.effect-dexter figcaption {
|
|
padding: 3em;
|
|
text-align: left;
|
|
}
|
|
|
|
figure.effect-dexter p {
|
|
position: absolute;
|
|
right: 60px;
|
|
bottom: 60px;
|
|
left: 60px;
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
-webkit-transform: translate3d(0,-100px,0);
|
|
transform: translate3d(0,-100px,0);
|
|
}
|
|
|
|
figure.effect-dexter:hover p {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
/*---------------*/
|
|
/***** Sarah *****/
|
|
/*---------------*/
|
|
|
|
figure.effect-sarah {
|
|
background: #42b078;
|
|
}
|
|
|
|
figure.effect-sarah img {
|
|
width: -webkit-calc(100% + 20px);
|
|
width: calc(100% + 20px);
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
-webkit-transform: translate3d(-10px,0,0);
|
|
transform: translate3d(-10px,0,0);
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
figure.effect-sarah:hover img {
|
|
opacity: 0.4;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
figure.effect-sarah figcaption {
|
|
text-align: left;
|
|
}
|
|
|
|
figure.effect-sarah h2 {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 0.5em 0;
|
|
}
|
|
|
|
figure.effect-sarah h2::after {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
background: #fff;
|
|
content: '';
|
|
-webkit-transition: -webkit-transform 0.35s;
|
|
transition: transform 0.35s;
|
|
-webkit-transform: translate3d(-100%,0,0);
|
|
transform: translate3d(-100%,0,0);
|
|
}
|
|
|
|
figure.effect-sarah:hover h2::after {
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
figure.effect-sarah p {
|
|
padding: 1em 0;
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
-webkit-transform: translate3d(100%,0,0);
|
|
transform: translate3d(100%,0,0);
|
|
}
|
|
|
|
figure.effect-sarah:hover p {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
/*---------------*/
|
|
/***** Zoe *****/
|
|
/*---------------*/
|
|
|
|
figure.effect-zoe figcaption {
|
|
top: auto;
|
|
bottom: 0;
|
|
padding: 1em;
|
|
height: 3.75em;
|
|
background: #fff;
|
|
color: #3c4a50;
|
|
-webkit-transition: -webkit-transform 0.35s;
|
|
transition: transform 0.35s;
|
|
-webkit-transform: translate3d(0,100%,0);
|
|
transform: translate3d(0,100%,0);
|
|
}
|
|
|
|
figure.effect-zoe h2 {
|
|
float: left;
|
|
}
|
|
|
|
figure.effect-zoe figcaption > span {
|
|
float: right;
|
|
}
|
|
|
|
figure.effect-zoe p {
|
|
position: absolute;
|
|
bottom: 8em;
|
|
padding: 2em;
|
|
color: #fff;
|
|
text-transform: none;
|
|
font-size: 90%;
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.35s;
|
|
transition: opacity 0.35s;
|
|
}
|
|
|
|
figure.effect-zoe h2,
|
|
figure.effect-zoe figcaption > span {
|
|
-webkit-transition: -webkit-transform 0.35s;
|
|
transition: transform 0.35s;
|
|
-webkit-transform: translate3d(0,200%,0);
|
|
transform: translate3d(0,200%,0);
|
|
}
|
|
|
|
figure.effect-zoe figcaption > span::before {
|
|
display: inline-block;
|
|
padding: 8px 10px;
|
|
font-family: 'feathericons';
|
|
speak: none;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.icon-eye::before {
|
|
content: '\e000';
|
|
}
|
|
|
|
.icon-paper-clip::before {
|
|
content: '\e001';
|
|
}
|
|
|
|
.icon-heart::before {
|
|
content: '\e024';
|
|
}
|
|
|
|
figure.effect-zoe h2 {
|
|
display: inline-block;
|
|
}
|
|
|
|
figure.effect-zoe:hover p {
|
|
opacity: 1;
|
|
}
|
|
|
|
figure.effect-zoe:hover figcaption,
|
|
figure.effect-zoe:hover h2,
|
|
figure.effect-zoe:hover figcaption > span {
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
|
|
figure.effect-zoe:hover h2 {
|
|
-webkit-transition-delay: 0.05s;
|
|
transition-delay: 0.05s;
|
|
}
|
|
|
|
figure.effect-zoe:hover figcaption > span:nth-child(4) {
|
|
-webkit-transition-delay: 0.1s;
|
|
transition-delay: 0.1s;
|
|
}
|
|
|
|
figure.effect-zoe:hover figcaption > span:nth-child(3) {
|
|
-webkit-transition-delay: 0.15s;
|
|
transition-delay: 0.15s;
|
|
}
|
|
|
|
figure.effect-zoe:hover figcaption > span:nth-child(2) {
|
|
-webkit-transition-delay: 0.2s;
|
|
transition-delay: 0.2s;
|
|
}
|
|
|
|
/*---------------*/
|
|
/***** Chico *****/
|
|
/*---------------*/
|
|
|
|
figure.effect-chico img {
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
-webkit-transform: scale(1.12);
|
|
transform: scale(1.12);
|
|
}
|
|
|
|
figure.effect-chico:hover img {
|
|
opacity: 0.5;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
figure.effect-chico figcaption {
|
|
padding: 3em;
|
|
}
|
|
|
|
figure.effect-chico figcaption::before {
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 30px;
|
|
bottom: 30px;
|
|
left: 30px;
|
|
border: 1px solid #fff;
|
|
content: '';
|
|
-webkit-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
figure.effect-chico figcaption::before,
|
|
figure.effect-chico p {
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
|
transition: opacity 0.35s, transform 0.35s;
|
|
}
|
|
|
|
figure.effect-chico h2 {
|
|
padding: 20% 0 20px 0;
|
|
}
|
|
|
|
figure.effect-chico p {
|
|
margin: 0 auto;
|
|
max-width: 200px;
|
|
-webkit-transform: scale(1.5);
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
figure.effect-chico:hover figcaption::before,
|
|
figure.effect-chico:hover p {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
@media screen and (max-width: 69.5em) {
|
|
.grid figure {
|
|
width: 50%;
|
|
}
|
|
|
|
.grid figure figcaption {
|
|
font-size: 90%;
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 41.5em) {
|
|
|
|
.grid figure {
|
|
width: 100%;
|
|
}
|
|
}
|
|
/*********************/
|
|
/* Height */
|
|
.height-5 { height: 5px !important; }
|
|
.height-10 { height: 10px !important; }
|
|
|
|
/* Margin */
|
|
.margin-0 { margin: 0px !important; }
|
|
.margin-5 { margin: 5px !important; }
|
|
.margin-10 { margin: 10px !important; }
|
|
.margin-15 { margin: 15px !important; }
|
|
.margin-20 { margin: 20px !important; }
|
|
.margin-25 { margin: 25px !important; }
|
|
.margin-30 { margin: 30px !important; }
|
|
.margin-35 { margin: 35px !important; }
|
|
.margin-40 { margin: 40px !important; }
|
|
.margin-45 { margin: 45px !important; }
|
|
.margin-50 { margin: 50px !important; }
|
|
.margin-55 { margin: 55px !important; }
|
|
.margin-60 { margin: 60px !important; }
|
|
.margin-65 { margin: 65px !important; }
|
|
.margin-70 { margin: 70px !important; }
|
|
.margin-75 { margin: 75px !important; }
|
|
.margin-80 { margin: 80px !important; }
|
|
.margin-85 { margin: 85px !important; }
|
|
.margin-90 { margin: 90px !important; }
|
|
.margin-95 { margin: 95px !important; }
|
|
.margin-100 { margin: 100px !important; }
|
|
|
|
/* Margin top */
|
|
.margin-top-0 { margin-top: 0px !important; }
|
|
.margin-top-5 { margin-top: 5px !important; }
|
|
.margin-top-10 { margin-top: 10px !important; }
|
|
.margin-top-15 { margin-top: 15px !important; }
|
|
.margin-top-20 { margin-top: 20px !important; }
|
|
.margin-top-25 { margin-top: 25px !important; }
|
|
.margin-top-30 { margin-top: 30px !important; }
|
|
.margin-top-35 { margin-top: 35px !important; }
|
|
.margin-top-40 { margin-top: 40px !important; }
|
|
.margin-top-45 { margin-top: 45px !important; }
|
|
.margin-top-50 { margin-top: 50px !important; }
|
|
.margin-top-55 { margin-top: 55px !important; }
|
|
.margin-top-60 { margin-top: 60px !important; }
|
|
.margin-top-65 { margin-top: 65px !important; }
|
|
.margin-top-70 { margin-top: 70px !important; }
|
|
.margin-top-75 { margin-top: 75px !important; }
|
|
.margin-top-80 { margin-top: 80px !important; }
|
|
.margin-top-85 { margin-top: 85px !important; }
|
|
.margin-top-90 { margin-top: 90px !important; }
|
|
.margin-top-95 { margin-top: 95px !important; }
|
|
.margin-top-100 { margin-top: 100px !important; }
|
|
.margin-top--70 { margin-top: -70px !important;}
|
|
.margin-top--140 { margin-top: -140px !important;}
|
|
.margin-top--100 { margin-top: -100px !important;}
|
|
.margin-top--110 { margin-top: -110px !important;}
|
|
|
|
/* Margin bottom */
|
|
.margin-bottom-0 { margin-bottom: 0px !important; }
|
|
.margin-bottom-5 { margin-bottom: 5px !important; }
|
|
.margin-bottom-10 { margin-bottom: 10px !important; }
|
|
.margin-bottom-15 { margin-bottom: 15px !important; }
|
|
.margin-bottom-20 { margin-bottom: 20px !important; }
|
|
.margin-bottom-25 { margin-bottom: 25px !important; }
|
|
.margin-bottom-30 { margin-bottom: 30px !important; }
|
|
.margin-bottom-35 { margin-bottom: 35px !important; }
|
|
.margin-bottom-40 { margin-bottom: 40px !important; }
|
|
.margin-bottom-45 { margin-bottom: 45px !important; }
|
|
.margin-bottom-50 { margin-bottom: 50px !important; }
|
|
.margin-bottom-55 { margin-bottom: 55px !important; }
|
|
.margin-bottom-60 { margin-bottom: 60px !important; }
|
|
.margin-bottom-65 { margin-bottom: 65px !important; }
|
|
.margin-bottom-70 { margin-bottom: 70px !important; }
|
|
.margin-bottom-75 { margin-bottom: 75px !important; }
|
|
.margin-bottom-80 { margin-bottom: 80px !important; }
|
|
.margin-bottom-85 { margin-bottom: 85px !important; }
|
|
.margin-bottom-90 { margin-bottom: 90px !important; }
|
|
.margin-bottom-95 { margin-bottom: 95px !important; }
|
|
.margin-bottom-100 { margin-bottom: 100px !important; }
|
|
|
|
/* Margin left */
|
|
.margin-left-0 { margin-left: 0px !important; }
|
|
.margin-left-5 { margin-left: 5px !important; }
|
|
.margin-left-10 { margin-left: 10px !important; }
|
|
.margin-left-15 { margin-left: 15px !important; }
|
|
.margin-left-20 { margin-left: 20px !important; }
|
|
.margin-left-25 { margin-left: 25px !important; }
|
|
.margin-left-30 { margin-left: 30px !important; }
|
|
.margin-left-35 { margin-left: 35px !important; }
|
|
.margin-left-40 { margin-left: 40px !important; }
|
|
.margin-left-45 { margin-left: 45px !important; }
|
|
.margin-left-50 { margin-left: 50px !important; }
|
|
.margin-left-55 { margin-left: 55px !important; }
|
|
.margin-left-60 { margin-left: 60px !important; }
|
|
.margin-left-65 { margin-left: 65px !important; }
|
|
.margin-left-70 { margin-left: 70px !important; }
|
|
.margin-left-75 { margin-left: 75px !important; }
|
|
.margin-left-80 { margin-left: 80px !important; }
|
|
.margin-left-85 { margin-left: 85px !important; }
|
|
.margin-left-90 { margin-left: 90px !important; }
|
|
.margin-left-95 { margin-left: 95px !important; }
|
|
.margin-left-100 { margin-left: 100px !important; }
|
|
|
|
/* Margin right */
|
|
.margin-right-0 { margin-right: 0px !important; }
|
|
.margin-right-5 { margin-right: 5px !important; }
|
|
.margin-right-10 { margin-right: 10px !important; }
|
|
.margin-right-15 { margin-right: 15px !important; }
|
|
.margin-right-20 { margin-right: 20px !important; }
|
|
.margin-right-25 { margin-right: 25px !important; }
|
|
.margin-right-30 { margin-right: 30px !important; }
|
|
.margin-right-35 { margin-right: 35px !important; }
|
|
.margin-right-40 { margin-right: 40px !important; }
|
|
.margin-right-45 { margin-right: 45px !important; }
|
|
.margin-right-50 { margin-right: 50px !important; }
|
|
.margin-right-55 { margin-right: 55px !important; }
|
|
.margin-right-60 { margin-right: 60px !important; }
|
|
.margin-right-65 { margin-right: 65px !important; }
|
|
.margin-right-70 { margin-right: 70px !important; }
|
|
.margin-right-75 { margin-right: 75px !important; }
|
|
.margin-right-80 { margin-right: 80px !important; }
|
|
.margin-right-85 { margin-right: 85px !important; }
|
|
.margin-right-90 { margin-right: 90px !important; }
|
|
.margin-right-95 { margin-right: 95px !important; }
|
|
.margin-right-100 { margin-right: 100px !important; }
|
|
|
|
/* Padding */
|
|
.padding-0 { padding: 0px !important; }
|
|
.padding-5 { padding: 5px !important; }
|
|
.padding-10 { padding: 10px !important; }
|
|
.padding-15 { padding: 15px !important; }
|
|
.padding-20 { padding: 20px !important; }
|
|
.padding-25 { padding: 25px !important; }
|
|
.padding-30 { padding: 30px !important; }
|
|
.padding-35 { padding: 35px !important; }
|
|
.padding-40 { padding: 40px !important; }
|
|
.padding-45 { padding: 45px !important; }
|
|
.padding-50 { padding: 50px !important; }
|
|
.padding-55 { padding: 55px !important; }
|
|
.padding-60 { padding: 60px !important; }
|
|
.padding-65 { padding: 65px !important; }
|
|
.padding-70 { padding: 70px !important; }
|
|
.padding-75 { padding: 75px !important; }
|
|
.padding-80 { padding: 80px !important; }
|
|
.padding-85 { padding: 85px !important; }
|
|
.padding-90 { padding: 90px !important; }
|
|
.padding-95 { padding: 95px !important; }
|
|
.padding-100 { padding: 100px !important; }
|
|
|
|
/* Padding top */
|
|
.padding-top-0 { padding-top: 0px !important; }
|
|
.padding-top-5 { padding-top: 5px !important; }
|
|
.padding-top-10 { padding-top: 10px !important; }
|
|
.padding-top-15 { padding-top: 15px !important; }
|
|
.padding-top-20 { padding-top: 20px !important; }
|
|
.padding-top-25 { padding-top: 25px !important; }
|
|
.padding-top-30 { padding-top: 30px !important; }
|
|
.padding-top-35 { padding-top: 35px !important; }
|
|
.padding-top-40 { padding-top: 40px !important; }
|
|
.padding-top-45 { padding-top: 45px !important; }
|
|
.padding-top-50 { padding-top: 50px !important; }
|
|
.padding-top-55 { padding-top: 55px !important; }
|
|
.padding-top-60 { padding-top: 60px !important; }
|
|
.padding-top-65 { padding-top: 65px !important; }
|
|
.padding-top-70 { padding-top: 70px !important; }
|
|
.padding-top-75 { padding-top: 75px !important; }
|
|
.padding-top-80 { padding-top: 80px !important; }
|
|
.padding-top-85 { padding-top: 85px !important; }
|
|
.padding-top-90 { padding-top: 90px !important; }
|
|
.padding-top-95 { padding-top: 95px !important; }
|
|
.padding-top-100 { padding-top: 100px !important; }
|
|
.padding-top-200 { padding-top: 200px !important; }
|
|
.padding-top-300 { padding-top: 300px !important; }
|
|
|
|
/* Padding bottom */
|
|
.padding-bottom-0 { padding-bottom: 0px !important; }
|
|
.padding-bottom-5 { padding-bottom: 5px !important; }
|
|
.padding-bottom-10 { padding-bottom: 10px !important; }
|
|
.padding-bottom-15 { padding-bottom: 15px !important; }
|
|
.padding-bottom-20 { padding-bottom: 20px !important; }
|
|
.padding-bottom-25 { padding-bottom: 25px !important; }
|
|
.padding-bottom-30 { padding-bottom: 30px !important; }
|
|
.padding-bottom-35 { padding-bottom: 35px !important; }
|
|
.padding-bottom-40 { padding-bottom: 40px !important; }
|
|
.padding-bottom-45 { padding-bottom: 45px !important; }
|
|
.padding-bottom-50 { padding-bottom: 50px !important; }
|
|
.padding-bottom-55 { padding-bottom: 55px !important; }
|
|
.padding-bottom-60 { padding-bottom: 60px !important; }
|
|
.padding-bottom-65 { padding-bottom: 65px !important; }
|
|
.padding-bottom-70 { padding-bottom: 70px !important; }
|
|
.padding-bottom-75 { padding-bottom: 75px !important; }
|
|
.padding-bottom-80 { padding-bottom: 80px !important; }
|
|
.padding-bottom-85 { padding-bottom: 85px !important; }
|
|
.padding-bottom-90 { padding-bottom: 90px !important; }
|
|
.padding-bottom-95 { padding-bottom: 95px !important; }
|
|
.padding-bottom-100 { padding-bottom: 100px !important; }
|
|
|
|
/* Padding left */
|
|
.padding-left-0 { padding-left: 0px !important; }
|
|
.padding-left-5 { padding-left: 5px !important; }
|
|
.padding-left-10 { padding-left: 10px !important; }
|
|
.padding-left-15 { padding-left: 15px !important; }
|
|
.padding-left-20 { padding-left: 20px !important; }
|
|
.padding-left-25 { padding-left: 25px !important; }
|
|
.padding-left-30 { padding-left: 30px !important; }
|
|
.padding-left-35 { padding-left: 35px !important; }
|
|
.padding-left-40 { padding-left: 40px !important; }
|
|
.padding-left-45 { padding-left: 45px !important; }
|
|
.padding-left-50 { padding-left: 50px !important; }
|
|
.padding-left-55 { padding-left: 55px !important; }
|
|
.padding-left-60 { padding-left: 60px !important; }
|
|
.padding-left-65 { padding-left: 65px !important; }
|
|
.padding-left-70 { padding-left: 70px !important; }
|
|
.padding-left-75 { padding-left: 75px !important; }
|
|
.padding-left-80 { padding-left: 80px !important; }
|
|
.padding-left-85 { padding-left: 85px !important; }
|
|
.padding-left-90 { padding-left: 90px !important; }
|
|
.padding-left-95 { padding-left: 95px !important; }
|
|
.padding-left-100 { padding-left: 100px !important; }
|
|
|
|
/* Padding right */
|
|
.padding-right-0 { padding-right: 0px !important; }
|
|
.padding-right-5 { padding-right: 5px !important; }
|
|
.padding-right-10 { padding-right: 10px !important; }
|
|
.padding-right-15 { padding-right: 15px !important; }
|
|
.padding-right-20 { padding-right: 20px !important; }
|
|
.padding-right-25 { padding-right: 25px !important; }
|
|
.padding-right-30 { padding-right: 30px !important; }
|
|
.padding-right-35 { padding-right: 35px !important; }
|
|
.padding-right-40 { padding-right: 40px !important; }
|
|
.padding-right-45 { padding-right: 45px !important; }
|
|
.padding-right-50 { padding-right: 50px !important; }
|
|
.padding-right-55 { padding-right: 55px !important; }
|
|
.padding-right-60 { padding-right: 60px !important; }
|
|
.padding-right-65 { padding-right: 65px !important; }
|
|
.padding-right-70 { padding-right: 70px !important; }
|
|
.padding-right-75 { padding-right: 75px !important; }
|
|
.padding-right-80 { padding-right: 80px !important; }
|
|
.padding-right-85 { padding-right: 85px !important; }
|
|
.padding-right-90 { padding-right: 90px !important; }
|
|
.padding-right-95 { padding-right: 95px !important; }
|
|
.padding-right-100 { padding-right: 100px !important; }
|
|
|
|
/* Align */
|
|
.align-center { text-align: center !important; }
|
|
.align-left { text-align: left !important; }
|
|
.align-right { text-align: right !important; }
|
|
|
|
/* Font size */
|
|
.font-size-8 { font-size: 8px !important; }
|
|
.font-size-9 { font-size: 9px !important; }
|
|
.font-size-10 { font-size: 10px !important; }
|
|
.font-size-11 { font-size: 11px !important; }
|
|
.font-size-12 { font-size: 12px !important; }
|
|
.font-size-13 { font-size: 13px !important; }
|
|
.font-size-14 { font-size: 14px !important; }
|
|
.font-size-15 { font-size: 15px !important; }
|
|
.font-size-16 { font-size: 16px !important; }
|
|
.font-size-17 { font-size: 17px !important; }
|
|
.font-size-18 { font-size: 18px !important; }
|
|
.font-size-19 { font-size: 19px !important; }
|
|
.font-size-20 { font-size: 20px !important; }
|
|
.font-size-21 { font-size: 21px !important; }
|
|
.font-size-22 { font-size: 22px !important; }
|
|
.font-size-23 { font-size: 23px !important; }
|
|
.font-size-24 { font-size: 24px !important; }
|
|
.font-size-25 { font-size: 25px !important; }
|
|
.font-size-26 { font-size: 26px !important; }
|
|
.font-size-27 { font-size: 27px !important; }
|
|
.font-size-28 { font-size: 28px !important; }
|
|
.font-size-29 { font-size: 29px !important; }
|
|
.font-size-30 { font-size: 30px !important; }
|
|
.font-size-31 { font-size: 31px !important; }
|
|
.font-size-32 { font-size: 32px !important; }
|
|
.font-size-33 { font-size: 33px !important; }
|
|
.font-size-34 { font-size: 34px !important; }
|
|
.font-size-35 { font-size: 35px !important; }
|
|
.font-size-36 { font-size: 36px !important; }
|
|
.font-size-37 { font-size: 37px !important; }
|
|
.font-size-38 { font-size: 38px !important; }
|
|
.font-size-39 { font-size: 39px !important; }
|
|
.font-size-40 { font-size: 40px !important; }
|
|
|
|
/* Opacity */
|
|
.opacity-0 { opacity: 0 !important; }
|
|
.opacity-10 { opacity: 10 !important; }
|
|
.opacity-20 { opacity: 20 !important; }
|
|
.opacity-30 { opacity: 30 !important; }
|
|
.opacity-40 { opacity: 40 !important; }
|
|
.opacity-50 { opacity: 50 !important; }
|
|
.opacity-60 { opacity: 60 !important; }
|
|
.opacity-70 { opacity: 70 !important; }
|
|
.opacity-80 { opacity: 80 !important; }
|
|
.opacity-90 { opacity: 90 !important; }
|
|
.opacity-100 { opacity: 100 !important; }
|
|
|
|
/* Font weight */
|
|
.font-lighter { font-weight: lighter !important; }
|
|
.font-bold { font-weight: bold !important; }
|
|
.font-normal { font-weight: normal !important; }
|
|
|
|
/* Forn style */
|
|
.font-italic { font-style: italic; }
|
|
|
|
/* Font transform */
|
|
.text-capitalize { text-transform: capitalize !important; }
|
|
.text-uppercase { text-transform: uppercase !important; }
|
|
.text-lowercase { text-transform: lowercase !important; }
|
|
|
|
/* Positioning */
|
|
.relative { position: relative; width: 100%; float: left !important; }
|
|
|
|
/* Width */
|
|
.width-auto { width: auto !important; }
|
|
.width-100 { width: 100% !important; }
|
|
.width-10 { width: 10% !important; }
|
|
.width-20 { width: 20% !important; }
|
|
.width-25 { width: 25% !important; }
|
|
.width-30 { width: 30% !important; }
|
|
.width-33 { width: 33.33333333333333333% !important; }
|
|
.width-40 { width: 40% !important; }
|
|
.width-50 { width: 50% !important; }
|
|
.width-66 { width: 66.66666666666666666% !important; }
|
|
.width-75 { width: 75% !important; }
|
|
.width-80 { width: 80% !important; }
|
|
|
|
/* MD width */
|
|
@media (min-width: 768px) and (max-width: 992px) {
|
|
.md-width-50 {
|
|
width: 50% !important;
|
|
}
|
|
.md-width-100 {
|
|
width: 100% !important;
|
|
}
|
|
.md-margin-bottom-0 { margin-bottom: 0px !important; }
|
|
.md-margin-bottom-10 { margin-bottom: 10px !important; }
|
|
.md-margin-bottom-20 { margin-bottom: 20px !important; }
|
|
.md-margin-bottom-30 { margin-bottom: 30px !important; }
|
|
.md-margin-bottom-40 { margin-bottom: 40px !important; }
|
|
.md-margin-bottom-50 { margin-bottom: 50px !important; }
|
|
.md-margin-bottom-60 { margin-bottom: 60px !important; }
|
|
.md-margin-bottom-70 { margin-bottom: 70px !important; }
|
|
.md-margin-bottom-80 { margin-bottom: 80px !important; }
|
|
.md-margin-bottom-90 { margin-bottom: 90px !important; }
|
|
.md-margin-bottom-100 { margin-bottom: 100px !important; }
|
|
.md-margin-top-0 { margin-top: 0px !important; }
|
|
.md-margin-top-10 { margin-top: 10px !important; }
|
|
.md-margin-top-20 { margin-top: 20px !important; }
|
|
.md-margin-top-30 { margin-top: 30px !important; }
|
|
.md-margin-top-40 { margin-top: 40px !important; }
|
|
.md-margin-top-50 { margin-top: 50px !important; }
|
|
.md-margin-top-60 { margin-top: 60px !important; }
|
|
.md-margin-top-70 { margin-top: 70px !important; }
|
|
.md-margin-top-80 { margin-top: 80px !important; }
|
|
.md-margin-top-90 { margin-top: 90px !important; }
|
|
.md-margin-top-100 { margin-top: 100px !important; }
|
|
}
|
|
|
|
/* SM width */
|
|
@media (max-width: 768px) {
|
|
.sm-width-100 {
|
|
width: 100% !important;
|
|
}
|
|
.sm-margin-bottom-0 { margin-bottom: 0px !important; }
|
|
.sm-margin-bottom-10 { margin-bottom: 10px !important; }
|
|
.sm-margin-bottom-20 { margin-bottom: 20px !important; }
|
|
.sm-margin-bottom-30 { margin-bottom: 30px !important; }
|
|
.sm-margin-bottom-40 { margin-bottom: 40px !important; }
|
|
.sm-margin-bottom-50 { margin-bottom: 50px !important; }
|
|
.sm-margin-bottom-60 { margin-bottom: 60px !important; }
|
|
.sm-margin-bottom-70 { margin-bottom: 70px !important; }
|
|
.sm-margin-bottom-80 { margin-bottom: 80px !important; }
|
|
.sm-margin-bottom-90 { margin-bottom: 90px !important; }
|
|
.sm-margin-bottom-100 { margin-bottom: 100px !important; }
|
|
.sm-margin-top-0 { margin-top: 0px !important; }
|
|
.sm-margin-top-10 { margin-top: 10px !important; }
|
|
.sm-margin-top-20 { margin-top: 20px !important; }
|
|
.sm-margin-top-30 { margin-top: 30px !important; }
|
|
.sm-margin-top-40 { margin-top: 40px !important; }
|
|
.sm-margin-top-50 { margin-top: 50px !important; }
|
|
.sm-margin-top-60 { margin-top: 60px !important; }
|
|
.sm-margin-top-70 { margin-top: 70px !important; }
|
|
.sm-margin-top-80 { margin-top: 80px !important; }
|
|
.sm-margin-top-90 { margin-top: 90px !important; }
|
|
.sm-margin-top-100 { margin-top: 100px !important; }
|
|
}
|
|
|
|
/* Floating */
|
|
.float-left { float: left !important; }
|
|
.float-right { float: right !important; }
|
|
|
|
/* Color */
|
|
.text-color-white { color: #fff !important; }
|
|
|
|
/* Box sizing */
|
|
.box-sizing-border { box-sizing: border-box !important; }
|
|
|
|
.relative { position: relative; }
|
|
|
|
/* Z index */
|
|
.z-100 { z-index: 100 !important; } |