Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /home/dwebsite/public_html/demos/4/_framework/adodb5/drivers/adodb-mysql.inc.php on line 443
Warning: Cannot modify header information - headers already sent by (output started at /home/dwebsite/public_html/demos/4/_framework/adodb5/drivers/adodb-mysql.inc.php:443) in /home/dwebsite/public_html/demos/4/_modules/styles/controllers/stylesController.class.php on line 41
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
/* #Basic Styles
================================================== */
body {
background: #fff;
font: 12px/17px "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
}
/* #Typography
================================================== */
h1, h2, h3, h4, h5, h6 {
font-family: "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
h5 { font-size: 17px; line-height: 24px; }
h6 { font-size: 14px; line-height: 21px; }
.subheader { color: #777; }
p { margin: 0 0 20px 0; }
p img { margin: 0; }
p.lead { font-size: 21px; line-height: 27px; color: #777; }
em { font-style: italic; }
strong { font-weight: bold; color: #333; }
small { font-size: 80%; }
/* Blockquotes */
blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
blockquote cite { display: block; font-size: 12px; color: #555; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
/* #Links
================================================== */
a, a:visited { color:#444; text-decoration: none; -webkit-transition: color .3s ease-in; -moz-transition: color .3s ease-in; -ms-transition: color .3s ease-in; -o-transition: color .3s ease-in; transition: color .3s ease-in; }
a:hover { color: #289dcc; }
p a, p a:visited { line-height: inherit; }
/* #Lists
================================================== */
ul, ol { margin-bottom: 20px; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol,
ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 6px; }
li { line-height: 18px; margin-bottom: 12px; }
ul.large li { line-height: 21px; }
li p { line-height: 21px; }
/* #Images
================================================== */
img.scale-with-grid {
max-width: 100%;
height: auto; }
/* #Misc
================================================== */
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 10px !important; }
.add-bottom { margin-bottom: 20px !important; }
body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
/*-webkit-backface-visibility: hidden;*/
}
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
.animated-delay-1 {
-webkit-animation-delay: .8s;
-moz-animation-delay: .8s;
animation-delay: .8s;
}
/* Custom Dealy */
.animated-custom-delay-1 {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.animated-custom-delay-2 {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.animated-custom-delay-3 {
-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.animated-custom-delay-4 {
-webkit-animation-delay: 1.45s;
-moz-animation-delay: 1.45s;
animation-delay: 1.45s;
}
.animated-custom-delay-5 {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
}
/* Custom Dealy */
.animated-custom-delay-1a {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.animated-custom-delay-2a {
-webkit-animation-delay: 1.8s;
-moz-animation-delay: 1.8s;
animation-delay: 1.8s;
}
.animated-custom-delay-3a {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
}
.animated-custom-delay-4a {
-webkit-animation-delay: 2.3s;
-moz-animation-delay: 2.3s;
animation-delay: 2.3s;
}
.animated-custom-delay-5a {
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
animation-delay: 2.4s;
}
.animated-custom-delay-6a {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}
.animated-custom-delay-7a {
-webkit-animation-delay: 2.8s;
-moz-animation-delay: 2.8s;
animation-delay: 2.8s;
}
.animated-custom-delay-8a {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
animation-delay: 3s;
}
@-webkit-keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
@-moz-keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
@-o-keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
@keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
.animated.flash {
-webkit-animation-name: flash;
-moz-animation-name: flash;
-o-animation-name: flash;
animation-name: flash;
}
@-webkit-keyframes shake {
0%, 100% {-webkit-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@-moz-keyframes shake {
0%, 100% {-moz-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}
@-o-keyframes shake {
0%, 100% {-o-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}
@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.animated.shake {
-webkit-animation-name: shake;
-moz-animation-name: shake;
-o-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
40% {-moz-transform: translateY(-30px);}
60% {-moz-transform: translateY(-15px);}
}
@-o-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
40% {-o-transform: translateY(-30px);}
60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
.animated.bounce {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce;
}
@-webkit-keyframes tada {
0% {-webkit-transform: scale(1);}
10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
100% {-webkit-transform: scale(1) rotate(0);}
}
@-moz-keyframes tada {
0% {-moz-transform: scale(1);}
10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
100% {-moz-transform: scale(1) rotate(0);}
}
@-o-keyframes tada {
0% {-o-transform: scale(1);}
10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
100% {-o-transform: scale(1) rotate(0);}
}
@keyframes tada {
0% {transform: scale(1);}
10%, 20% {transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
100% {transform: scale(1) rotate(0);}
}
.animated.tada {
-webkit-animation-name: tada;
-moz-animation-name: tada;
-o-animation-name: tada;
animation-name: tada;
}
@-webkit-keyframes swing {
20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
20% { -webkit-transform: rotate(15deg); }
40% { -webkit-transform: rotate(-10deg); }
60% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-5deg); }
100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes swing {
20% { -moz-transform: rotate(15deg); }
40% { -moz-transform: rotate(-10deg); }
60% { -moz-transform: rotate(5deg); }
80% { -moz-transform: rotate(-5deg); }
100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes swing {
20% { -o-transform: rotate(15deg); }
40% { -o-transform: rotate(-10deg); }
60% { -o-transform: rotate(5deg); }
80% { -o-transform: rotate(-5deg); }
100% { -o-transform: rotate(0deg); }
}
@keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
.animated.swing {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
0% { -webkit-transform: translateX(0%); }
15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
30% { -webkit-transform: translateX(20%) rotate(3deg); }
45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
60% { -webkit-transform: translateX(10%) rotate(2deg); }
75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
100% { -webkit-transform: translateX(0%); }
}
@-moz-keyframes wobble {
0% { -moz-transform: translateX(0%); }
15% { -moz-transform: translateX(-25%) rotate(-5deg); }
30% { -moz-transform: translateX(20%) rotate(3deg); }
45% { -moz-transform: translateX(-15%) rotate(-3deg); }
60% { -moz-transform: translateX(10%) rotate(2deg); }
75% { -moz-transform: translateX(-5%) rotate(-1deg); }
100% { -moz-transform: translateX(0%); }
}
@-o-keyframes wobble {
0% { -o-transform: translateX(0%); }
15% { -o-transform: translateX(-25%) rotate(-5deg); }
30% { -o-transform: translateX(20%) rotate(3deg); }
45% { -o-transform: translateX(-15%) rotate(-3deg); }
60% { -o-transform: translateX(10%) rotate(2deg); }
75% { -o-transform: translateX(-5%) rotate(-1deg); }
100% { -o-transform: translateX(0%); }
}
@keyframes wobble {
0% { transform: translateX(0%); }
15% { transform: translateX(-25%) rotate(-5deg); }
30% { transform: translateX(20%) rotate(3deg); }
45% { transform: translateX(-15%) rotate(-3deg); }
60% { transform: translateX(10%) rotate(2deg); }
75% { transform: translateX(-5%) rotate(-1deg); }
100% { transform: translateX(0%); }
}
.animated.wobble {
-webkit-animation-name: wobble;
-moz-animation-name: wobble;
-o-animation-name: wobble;
animation-name: wobble;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulse {
0% { -moz-transform: scale(1); }
50% { -moz-transform: scale(1.1); }
100% { -moz-transform: scale(1); }
}
@-o-keyframes pulse {
0% { -o-transform: scale(1); }
50% { -o-transform: scale(1.1); }
100% { -o-transform: scale(1); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.animated.pulse {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-o-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-webkit-animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-webkit-animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-webkit-animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-webkit-animation-timing-function: ease-in;
}
}
@-moz-keyframes flip {
0% {
-moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-moz-animation-timing-function: ease-out;
}
40% {
-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-moz-animation-timing-function: ease-out;
}
50% {
-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-moz-animation-timing-function: ease-in;
}
80% {
-moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-moz-animation-timing-function: ease-in;
}
100% {
-moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-moz-animation-timing-function: ease-in;
}
}
@-o-keyframes flip {
0% {
-o-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-o-animation-timing-function: ease-out;
}
40% {
-o-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-o-animation-timing-function: ease-out;
}
50% {
-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-o-animation-timing-function: ease-in;
}
80% {
-o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-o-animation-timing-function: ease-in;
}
100% {
-o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-o-animation-timing-function: ease-in;
}
}
@keyframes flip {
0% {
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
animation-timing-function: ease-out;
}
40% {
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
animation-timing-function: ease-out;
}
50% {
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
animation-timing-function: ease-in;
}
80% {
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
animation-timing-function: ease-in;
}
100% {
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
animation-timing-function: ease-in;
}
}
.animated.flip {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flip;
-moz-backface-visibility: visible !important;
-moz-animation-name: flip;
-o-backface-visibility: visible !important;
-o-animation-name: flip;
backface-visibility: visible !important;
animation-name: flip;
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-moz-keyframes flipInX {
0% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-moz-transform: perspective(400px) rotateX(-10deg);
}
70% {
-moz-transform: perspective(400px) rotateX(10deg);
}
100% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-o-keyframes flipInX {
0% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-o-transform: perspective(400px) rotateX(-10deg);
}
70% {
-o-transform: perspective(400px) rotateX(10deg);
}
100% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateX(-10deg);
}
70% {
transform: perspective(400px) rotateX(10deg);
}
100% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.animated.flipInX {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX;
}
@-webkit-keyframes flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@-moz-keyframes flipOutX {
0% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@-o-keyframes flipOutX {
0% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@keyframes flipOutX {
0% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
.animated.flipOutX {
-webkit-animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
-moz-animation-name: flipOutX;
-moz-backface-visibility: visible !important;
-o-animation-name: flipOutX;
-o-backface-visibility: visible !important;
animation-name: flipOutX;
backface-visibility: visible !important;
}
@-webkit-keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@-moz-keyframes flipInY {
0% {
-moz-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-moz-transform: perspective(400px) rotateY(-10deg);
}
70% {
-moz-transform: perspective(400px) rotateY(10deg);
}
100% {
-moz-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@-o-keyframes flipInY {
0% {
-o-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-o-transform: perspective(400px) rotateY(-10deg);
}
70% {
-o-transform: perspective(400px) rotateY(10deg);
}
100% {
-o-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@keyframes flipInY {
0% {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateY(-10deg);
}
70% {
transform: perspective(400px) rotateY(10deg);
}
100% {
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
.animated.flipInY {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInY;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInY;
-o-backface-visibility: visible !important;
-o-animation-name: flipInY;
backface-visibility: visible !important;
animation-name: flipInY;
}
@-webkit-keyframes flipOutY {
0% {
-webkit-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
@-moz-keyframes flipOutY {
0% {
-moz-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-moz-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
@-o-keyframes flipOutY {
0% {
-o-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-o-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
@keyframes flipOutY {
0% {
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
.animated.flipOutY {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipOutY;
-o-backface-visibility: visible !important;
-o-animation-name: flipOutY;
backface-visibility: visible !important;
animation-name: flipOutY;
}
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-o-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.animated.fadeIn {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInUp {
0% {
opacity: 0;
-o-transform: translateY(20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(-20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInDown {
0% {
opacity: 0;
-o-transform: translateY(-20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInLeft {
0% {
opacity: 0;
-o-transform: translateX(-20px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.animated.fadeInLeft {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInRight {
0% {
opacity: 0;
-moz-transform: translateX(20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInRight {
0% {
opacity: 0;
-o-transform: translateX(20px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.animated.fadeInRight {
-webkit-animation-name: fadeInRight;
-moz-animation-name: fadeInRight;
-o-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInUpBig {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInUpBig {
0% {
opacity: 0;
-o-transform: translateY(2000px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInUpBig {
0% {
opacity: 0;
transform: translateY(2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
-moz-animation-name: fadeInUpBig;
-o-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDownBig {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInDownBig {
0% {
opacity: 0;
-o-transform: translateY(-2000px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInDownBig {
0% {
opacity: 0;
transform: translateY(-2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
-moz-animation-name: fadeInDownBig;
-o-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInLeftBig {
0% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInLeftBig {
0% {
opacity: 0;
-o-transform: translateX(-2000px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
transform: translateX(-2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.animated.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
-moz-animation-name: fadeInLeftBig;
-o-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInRightBig {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInRightBig {
0% {
opacity: 0;
-o-transform: translateX(2000px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInRightBig {
0% {
opacity: 0;
transform: translateX(2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.animated.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
-moz-animation-name: fadeInRightBig;
-o-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@-moz-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@-o-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
.animated.fadeOut {
-webkit-animation-name: fadeOut;
-moz-animation-name: fadeOut;
-o-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
}
@-moz-keyframes fadeOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-20px);
}
}
@-o-keyframes fadeOutUp {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(-20px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
.animated.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
}
}
@-moz-keyframes fadeOutDown {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(20px);
}
}
@-o-keyframes fadeOutDown {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(20px);
}
}
@keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
.animated.fadeOutDown {
-webkit-animation-name: fadeOutDown;
-moz-animation-name: fadeOutDown;
-o-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
}
@-moz-keyframes fadeOutLeft {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(-20px);
}
}
@-o-keyframes fadeOutLeft {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(-20px);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-20px);
}
}
.animated.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
-moz-animation-name: fadeOutLeft;
-o-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
}
}
@-moz-keyframes fadeOutRight {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(20px);
}
}
@-o-keyframes fadeOutRight {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(20px);
}
}
@keyframes fadeOutRight {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(20px);
}
}
.animated.fadeOutRight {
-webkit-animation-name: fadeOutRight;
-moz-animation-name: fadeOutRight;
-o-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutUpBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
}
@-moz-keyframes fadeOutUpBig {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
@-o-keyframes fadeOutUpBig {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(-2000px);
}
}
@keyframes fadeOutUpBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
.animated.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
-moz-animation-name: fadeOutUpBig;
-o-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes fadeOutDownBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
}
@-moz-keyframes fadeOutDownBig {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(2000px);
}
}
@-o-keyframes fadeOutDownBig {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(2000px);
}
}
@keyframes fadeOutDownBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(2000px);
}
}
.animated.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
-moz-animation-name: fadeOutDownBig;
-o-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
}
@-moz-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
}
@-o-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(-2000px);
}
}
@keyframes fadeOutLeftBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
.animated.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
-moz-animation-name: fadeOutLeftBig;
-o-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
}
@-moz-keyframes fadeOutRightBig {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(2000px);
}
}
@-o-keyframes fadeOutRightBig {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(2000px);
}
}
@keyframes fadeOutRightBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(2000px);
}
}
.animated.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
-moz-animation-name: fadeOutRightBig;
-o-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.3);
}
50% {
opacity: 1;
-moz-transform: scale(1.05);
}
70% {
-moz-transform: scale(.9);
}
100% {
-moz-transform: scale(1);
}
}
@-o-keyframes bounceIn {
0% {
opacity: 0;
-o-transform: scale(.3);
}
50% {
opacity: 1;
-o-transform: scale(1.05);
}
70% {
-o-transform: scale(.9);
}
100% {
-o-transform: scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.animated.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes bounceInUp {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px);
}
100% {
-moz-transform: translateY(0);
}
}
@-o-keyframes bounceInUp {
0% {
opacity: 0;
-o-transform: translateY(2000px);
}
60% {
opacity: 1;
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px);
}
100% {
-o-transform: translateY(0);
}
}
@keyframes bounceInUp {
0% {
opacity: 0;
transform: translateY(2000px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
.animated.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0);
}
}
@-o-keyframes bounceInDown {
0% {
opacity: 0;
-o-transform: translateY(-2000px);
}
60% {
opacity: 1;
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px);
}
100% {
-o-transform: translateY(0);
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.animated.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes bounceInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateX(30px);
}
80% {
-moz-transform: translateX(-10px);
}
100% {
-moz-transform: translateX(0);
}
}
@-o-keyframes bounceInLeft {
0% {
opacity: 0;
-o-transform: translateX(-2000px);
}
60% {
opacity: 1;
-o-transform: translateX(30px);
}
80% {
-o-transform: translateX(-10px);
}
100% {
-o-transform: translateX(0);
}
}
@keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
.animated.bounceInLeft {
-webkit-animation-name: bounceInLeft;
-moz-animation-name: bounceInLeft;
-o-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes bounceInRight {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
}
60% {
opacity: 1;
-moz-transform: translateX(-30px);
}
80% {
-moz-transform: translateX(10px);
}
100% {
-moz-transform: translateX(0);
}
}
@-o-keyframes bounceInRight {
0% {
opacity: 0;
-o-transform: translateX(2000px);
}
60% {
opacity: 1;
-o-transform: translateX(-30px);
}
80% {
-o-transform: translateX(10px);
}
100% {
-o-transform: translateX(0);
}
}
@keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(2000px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.animated.bounceInRight {
-webkit-animation-name: bounceInRight;
-moz-animation-name: bounceInRight;
-o-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceOut {
0% {
-webkit-transform: scale(1);
}
25% {
-webkit-transform: scale(.95);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
}
100% {
opacity: 0;
-webkit-transform: scale(.3);
}
}
@-moz-keyframes bounceOut {
0% {
-moz-transform: scale(1);
}
25% {
-moz-transform: scale(.95);
}
50% {
opacity: 1;
-moz-transform: scale(1.1);
}
100% {
opacity: 0;
-moz-transform: scale(.3);
}
}
@-o-keyframes bounceOut {
0% {
-o-transform: scale(1);
}
25% {
-o-transform: scale(.95);
}
50% {
opacity: 1;
-o-transform: scale(1.1);
}
100% {
opacity: 0;
-o-transform: scale(.3);
}
}
@keyframes bounceOut {
0% {
transform: scale(1);
}
25% {
transform: scale(.95);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(.3);
}
}
.animated.bounceOut {
-webkit-animation-name: bounceOut;
-moz-animation-name: bounceOut;
-o-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
}
@-moz-keyframes bounceOutUp {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(20px);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
@-o-keyframes bounceOutUp {
0% {
-o-transform: translateY(0);
}
20% {
opacity: 1;
-o-transform: translateY(20px);
}
100% {
opacity: 0;
-o-transform: translateY(-2000px);
}
}
@keyframes bounceOutUp {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(20px);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
.animated.bounceOutUp {
-webkit-animation-name: bounceOutUp;
-moz-animation-name: bounceOutUp;
-o-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes bounceOutDown {
0% {
-webkit-transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
}
@-moz-keyframes bounceOutDown {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(-20px);
}
100% {
opacity: 0;
-moz-transform: translateY(2000px);
}
}
@-o-keyframes bounceOutDown {
0% {
-o-transform: translateY(0);
}
20% {
opacity: 1;
-o-transform: translateY(-20px);
}
100% {
opacity: 0;
-o-transform: translateY(2000px);
}
}
@keyframes bounceOutDown {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(-20px);
}
100% {
opacity: 0;
transform: translateY(2000px);
}
}
.animated.bounceOutDown {
-webkit-animation-name: bounceOutDown;
-moz-animation-name: bounceOutDown;
-o-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
0% {
-webkit-transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
}
@-moz-keyframes bounceOutLeft {
0% {
-moz-transform: translateX(0);
}
20% {
opacity: 1;
-moz-transform: translateX(20px);
}
100% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
}
@-o-keyframes bounceOutLeft {
0% {
-o-transform: translateX(0);
}
20% {
opacity: 1;
-o-transform: translateX(20px);
}
100% {
opacity: 0;
-o-transform: translateX(-2000px);
}
}
@keyframes bounceOutLeft {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(20px);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
.animated.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
-moz-animation-name: bounceOutLeft;
-o-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
0% {
-webkit-transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
}
@-moz-keyframes bounceOutRight {
0% {
-moz-transform: translateX(0);
}
20% {
opacity: 1;
-moz-transform: translateX(-20px);
}
100% {
opacity: 0;
-moz-transform: translateX(2000px);
}
}
@-o-keyframes bounceOutRight {
0% {
-o-transform: translateX(0);
}
20% {
opacity: 1;
-o-transform: translateX(-20px);
}
100% {
opacity: 0;
-o-transform: translateX(2000px);
}
}
@keyframes bounceOutRight {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(-20px);
}
100% {
opacity: 0;
transform: translateX(2000px);
}
}
.animated.bounceOutRight {
-webkit-animation-name: bounceOutRight;
-moz-animation-name: bounceOutRight;
-o-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateIn {
0% {
-moz-transform-origin: center center;
-moz-transform: rotate(-200deg);
opacity: 0;
}
100% {
-moz-transform-origin: center center;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-o-keyframes rotateIn {
0% {
-o-transform-origin: center center;
-o-transform: rotate(-200deg);
opacity: 0;
}
100% {
-o-transform-origin: center center;
-o-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateIn {
0% {
transform-origin: center center;
transform: rotate(-200deg);
opacity: 0;
}
100% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
}
.animated.rotateIn {
-webkit-animation-name: rotateIn;
-moz-animation-name: rotateIn;
-o-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInUpLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-o-keyframes rotateInUpLeft {
0% {
-o-transform-origin: left bottom;
-o-transform: rotate(90deg);
opacity: 0;
}
100% {
-o-transform-origin: left bottom;
-o-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
0% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
.animated.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
-moz-animation-name: rotateInUpLeft;
-o-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInDownLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-o-keyframes rotateInDownLeft {
0% {
-o-transform-origin: left bottom;
-o-transform: rotate(-90deg);
opacity: 0;
}
100% {
-o-transform-origin: left bottom;
-o-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownLeft {
0% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
.animated.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
-moz-animation-name: rotateInDownLeft;
-o-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInUpRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-o-keyframes rotateInUpRight {
0% {
-o-transform-origin: right bottom;
-o-transform: rotate(-90deg);
opacity: 0;
}
100% {
-o-transform-origin: right bottom;
-o-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
0% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
.animated.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
-moz-animation-name: rotateInUpRight;
-o-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInDownRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-o-keyframes rotateInDownRight {
0% {
-o-transform-origin: right bottom;
-o-transform: rotate(90deg);
opacity: 0;
}
100% {
-o-transform-origin: right bottom;
-o-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
0% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
.animated.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
-moz-animation-name: rotateInDownRight;
-o-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateOut {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(200deg);
opacity: 0;
}
}
@-moz-keyframes rotateOut {
0% {
-moz-transform-origin: center center;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: center center;
-moz-transform: rotate(200deg);
opacity: 0;
}
}
@-o-keyframes rotateOut {
0% {
-o-transform-origin: center center;
-o-transform: rotate(0);
opacity: 1;
}
100% {
-o-transform-origin: center center;
-o-transform: rotate(200deg);
opacity: 0;
}
}
@keyframes rotateOut {
0% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: center center;
transform: rotate(200deg);
opacity: 0;
}
}
.animated.rotateOut {
-webkit-animation-name: rotateOut;
-moz-animation-name: rotateOut;
-o-animation-name: rotateOut;
animation-name: rotateOut;
}
@-webkit-keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutUpLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
}
@-o-keyframes rotateOutUpLeft {
0% {
-o-transform-origin: left bottom;
-o-transform: rotate(0);
opacity: 1;
}
100% {
-o-transform-origin: left bottom;
-o-transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
.animated.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
-moz-animation-name: rotateOutUpLeft;
-o-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutDownLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
}
@-o-keyframes rotateOutDownLeft {
0% {
-o-transform-origin: left bottom;
-o-transform: rotate(0);
opacity: 1;
}
100% {
-o-transform-origin: left bottom;
-o-transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutDownLeft {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
}
.animated.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
-moz-animation-name: rotateOutDownLeft;
-o-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutUpRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
}
@-o-keyframes rotateOutUpRight {
0% {
-o-transform-origin: right bottom;
-o-transform: rotate(0);
opacity: 1;
}
100% {
-o-transform-origin: right bottom;
-o-transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
}
.animated.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
-moz-animation-name: rotateOutUpRight;
-o-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
@-webkit-keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutDownRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
}
@-o-keyframes rotateOutDownRight {
0% {
-o-transform-origin: right bottom;
-o-transform: rotate(0);
opacity: 1;
}
100% {
-o-transform-origin: right bottom;
-o-transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
.animated.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
-moz-animation-name: rotateOutDownRight;
-o-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
@-webkit-keyframes hinge {
0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
100% { -webkit-transform: translateY(700px); opacity: 0; }
}
@-moz-keyframes hinge {
0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
100% { -moz-transform: translateY(700px); opacity: 0; }
}
@-o-keyframes hinge {
0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
100% { -o-transform: translateY(700px); opacity: 0; }
}
@keyframes hinge {
0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
100% { transform: translateY(700px); opacity: 0; }
}
.animated.hinge {
-webkit-animation-name: hinge;
-moz-animation-name: hinge;
-o-animation-name: hinge;
animation-name: hinge;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollInRight {
0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}
@-moz-keyframes rollInRight {
0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
}
@-o-keyframes rollInRight {
0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
}
@keyframes rollInRight {
0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}
.animated.rollInRight {
-webkit-animation-name: rollInRight;
-moz-animation-name: rollInRight;
-o-animation-name: rollInRight;
animation-name: rollInRight;
}
@-webkit-keyframes rollInLeft {
0% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); }
100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}
@-moz-keyframes rollInLeft {
0% { opacity: 0; -moz-transform: translateX(100%) rotate(120deg); }
100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
}
@-o-keyframes rollInLeft {
0% { opacity: 0; -o-transform: translateX(100%) rotate(120deg); }
100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
}
@keyframes rollInLeft {
0% { opacity: 0; transform: translateX(100%) rotate(120deg); }
100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}
.animated.rollInLeft {
-webkit-animation-name: rollInLeft;
-moz-animation-name: rollInLeft;
-o-animation-name: rollInLeft;
animation-name: rollInLeft;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg);
}
}
@-moz-keyframes rollOut {
0% {
opacity: 1;
-moz-transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-moz-transform: translateX(100%) rotate(120deg);
}
}
@-o-keyframes rollOut {
0% {
opacity: 1;
-o-transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-o-transform: translateX(100%) rotate(120deg);
}
}
@keyframes rollOut {
0% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
transform: translateX(100%) rotate(120deg);
}
}
.animated.rollOut {
-webkit-animation-name: rollOut;
-moz-animation-name: rollOut;
-o-animation-name: rollOut;
animation-name: rollOut;
}
/* originally authored by Angelo Rohit - https://github.com/angelorohit */
@-webkit-keyframes lightSpeedIn {
0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@-moz-keyframes lightSpeedIn {
0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; }
80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@-o-keyframes lightSpeedIn {
0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; }
80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@keyframes lightSpeedIn {
0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}
.animated.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
-moz-animation-name: lightSpeedIn;
-o-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
.animated.lightSpeedIn {
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
}
/* originally authored by Angelo Rohit - https://github.com/angelorohit */
@-webkit-keyframes lightSpeedOut {
0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
}
@-moz-keyframes lightSpeedOut {
0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
}
@-o-keyframes lightSpeedOut {
0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
}
@keyframes lightSpeedOut {
0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
}
.animated.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
-moz-animation-name: lightSpeedOut;
-o-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
.animated.lightSpeedOut {
-webkit-animation-duration: 0.25s;
-moz-animation-duration: 0.25s;
-o-animation-duration: 0.25s;
animation-duration: 0.25s;
}
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
.slides li {margin: 0;}
/* ------------------------------------------------------------------------ */
/* FlexSlider Necessary Styles
/* ------------------------------------------------------------------------ */
.flexslider {margin: 0; padding: 0; overflow: hidden;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; height:auto; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
/* ------------------------------------------------------------------------ */
/* Clearfix for the .slides element
/* ------------------------------------------------------------------------ */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
/* ------------------------------------------------------------------------ */
/* No JavaScript Fallback
/* ------------------------------------------------------------------------ */
.no-js .slides > li:first-child {display: block;}
/* ------------------------------------------------------------------------ */
/* FlexSlider Style
/* ------------------------------------------------------------------------ */
.flexslider {position: relative; zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom: 1; position: relative;}
.post-gallery .flex-direction-nav .flex-next, #portfolio-slider .flex-direction-nav .flex-next{
right:0px;
}
.post-gallery .flex-direction-nav .flex-prev, #portfolio-slider .flex-direction-nav .flex-prev{
left:0px;
}
.gallery_items_holder .flex-control-nav{
display: none;
}
/* ------------------------------------------------------------------------ */
/* Direction Navigation
/* ------------------------------------------------------------------------ */
.flex-direction-nav a {
width: 35px;
height:35px;
margin: -25px 0 0;
display: block;
background-color: #555555;
background-color: rgba(0,0,0,0.6);
position: absolute;
top: 52%;
cursor: pointer;
text-indent: -9999px;
opacity: 1;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.flex-direction-nav a:hover {
background-color: #444;
}
.flex-direction-nav .flex-next {
right: 0px;
background-image: url(../_images/slider-next.png);
background-repeat: no-repeat;
background-position: 53% 50%;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
position: absolute;
}
.flex-direction-nav .flex-prev {
left: 0px;
background-image: url(../_images/slider-prev.png);
background-repeat: no-repeat;
background-position: 47% 50%;
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
position: absolute;
}
.flexslider:hover .flex-next {opacity: 1; right: 0;}
.flexslider:hover .flex-prev {opacity: 1; left: 0;}
.flex-direction-nav .disabled {opacity: .3 !important; filter:alpha(opacity=30); cursor: default;}
/* ------------------------------------------------------------------------ */
/* Control Navigation
/* ------------------------------------------------------------------------ */
.flex-control-nav {
width: 100%;
text-align: center;
margin-top: -30px;
position: absolute;
z-index: 99;
}
.flex-control-nav li {
margin: 0 0 0 5px;
display: inline-block;
zoom: 1; *display: inline;
}
.flex-control-nav li:first-child {
margin: 0;
}
.flex-control-nav li a {
width: 12px;
height: 12px;
display: block;
background: #000000;
cursor: pointer;
text-indent: -999em;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
opacity: 0.4;
}
.flex-control-nav li a:hover {
background: #000000;
opacity: 0.8;
}
.flex-control-nav li a.flex-active {
background: #000000;
cursor: default;
opacity: 0.8;
}
/* ------------------------------------------------------------------------ */
/* Home-Slider
/* ------------------------------------------------------------------------ */
.slide-image{
}
.slide-caption{
width:380px;
margin-top:100px;
}
.slide-caption .slide-title{
font-size:20px;
font-weight:bold;
margin-bottom:20px;
color:#555555;
}
.slide-caption .slide-longcaption{
}
.slide-caption .slide-shortcaption{
display:none;
}
.slide-caption .slide-longcaption p, .slide-caption .slide-shortcaption {
margin-bottom: 28px;
font-size:14px;
line-height:22px;
}
/* Image Left --------------------------------------- */
.slide-imageleft .slide-image{
float: left;
}
.slide-imageleft .slide-caption{
float: right;
}
/* Image Right --------------------------------------- */
.slide-imageright .slide-image{
float: right;
}
.slide-imageright .slide-caption{
float: left;
}
#main-content { height: 100%; width: 100%; }
header, #main-content, #main-content-contact { background-color: #fff; }
#main-content, #contact-map .contact-holder .contact-form-holder { background-image: -webkit-linear-gradient(bottom, #f0f0f0 0%, #FFFFFF 50px) !important;
background-image: -moz-linear-gradient(bottom, #f0f0f0 0%, #FFFFFF 50px) !important;
background-image: -ms-linear-gradient(bottom, #f0f0f0 0%, #FFFFFF 50px) !important;
background-image: linear-gradient(bottom, #f0f0f0 0%, #FFFFFF 50px) !important; }
.team-member .member-holder { background-image: -webkit-linear-gradient(bottom, #f8f8f8 0%, #FFFFFF 5px) !important;
background-image: -moz-linear-gradient(bottom, #f8f8f8 0%, #FFFFFF 5px) !important;
background-image: -ms-linear-gradient(bottom, #f8f8f8 0%, #FFFFFF 5px) !important;
background-image: linear-gradient(bottom, #f8f8f8 0%, #FFFFFF 5px) !important; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.texture-section{ margin: 50px 0; text-align: center; height: auto; width: 100%; background: transparent url(../_images/patterns/groovepaper.png) repeat; border-top: 1px dashed #d4d3d3; border-bottom: 1px dashed #d4d3d3; }
/*-----------------------------------------------------------------------------------------*/
/* Background Color Transition */
/*-----------------------------------------------------------------------------------------*/
ul.social-list li a { -webkit-transition: background-color .2s ease-in;
-moz-transition: background-color .2s ease-in;
-ms-transition: background-color .2s ease-in;
-o-transition: background-color .2s ease-in;
transition: background-color .2s ease-in; }
/*-----------------------------------------------------------------------------------------*/
/* HEADER */
/*-----------------------------------------------------------------------------------------*/
header { border-top:2px solid #333333; border-bottom:1px solid #dfdfdf; }
header .sixteen { height: auto; }
header .five img { float: left; }
#mainNavigation select{ display:none; border:1px solid #cccccc; width:100%; height:30px; float:left; margin:21px 0; padding:5px; box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); -moz-box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); -webkit-box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
#mainNavigation select option{ padding:1px 0 1px 10px; }
/* STICKY HEADER */
.sticky-header { border-top:1px solid #333333; position: fixed; z-index: 4217; background-color: rgba(253,253,253, 0.92); top:0; width: 100%; border-bottom:1px solid #e1e1e1; }
.sticky-header .sixteen { border-bottom: none; }
.sticky-header .sf-menu li > a { padding: 1.6em 1em; }
.sticky-header .sf-menu li ul a { padding:0.9em 1.5em 0.9em 1.5em; }
.sticky-header .five img { max-height: 53px; }
.sticky-header .sf-arrows .sf-with-ul:after { content: ""; }
.sticky-header .sf-arrows li ul .sf-with-ul:after{ content: "\f105"; font-family: FontAwesome; position: absolute; top: 50%; right: 1em; margin-top: -8px; color:#828a93 !important; font-size: 12px; }
/* PROMO TEXT */
.top-promo-text { background:#fff; padding-top: 40px; }
.top-promo-text h1 { font-size: 23px; line-height: 26px; font-family: 'Open Sans', sans-serif !important; font-weight: 300 !important; }
.top-promo-text p { color:#555; font-size: 13px; padding:0 60px; font-family: 'Open Sans', sans-serif !important; font-weight: 400; }
/*-----------------------------------------------------------------------------------------*/
/* FOOTER */
/*-----------------------------------------------------------------------------------------*/
footer { background: transparent url(../_images/patterns/binding_dark.png) repeat; border-top:2px solid #333333; color:#88898a; }
footer a { color:#88898a !important; text-decoration: none; }
.footer-content { padding: 20px 0; }
.footer-content i.fa { font-size: 14px; color: #fff !important; }
footer h2, h2.footer-title { text-transform: uppercase; font-size: 11px; color: #fff; line-height: 18px; }
h2.footer-title i.fa { margin-right: 8px; }
/* Footer Flickr */
footer .flickrImages-footer { margin-left: -2px; }
footer .flickrImages-footer img{ width: 47px; height: 47px; margin:2px !important; float: left; opacity: 0.8; }
footer .flickrImages-footer img:hover { opacity: 1; }
/* From the blog */
footer .from-blog { margin-top:0px !important; }
footer .from-blog img { width: 47px !important; height: 47px !important;}
footer .from-blog li { margin-bottom: 5px !important; }
footer .from-blog li:hover img { opacity: 1; }
footer .from-blog a { color:#fff !important; }
footer .from-blog span { color:#8e8e8f !important; }
ul.from-blog { float:left; width:100%; margin-top:4px; margin-bottom:0; }
ul.from-blog li { float:left; width:100%; margin-bottom:12px; }
ul.from-blog li:last-child{ margin:0; }
ul.from-blog li .title { margin-top:1px; margin-bottom: 2px; }
ul.from-blog li img { width:55px; height:55px; float:left; margin-right:10px; }
ul.from-blog li span { margin-right:10px; font-size: 10px; }
/* Contact Info */
footer .contact-info { }
footer .contact-info li { margin-bottom: 6px; }
/* Footer Logo */
.footer-logo { padding:18px 0; }
.footer-logo img { margin-bottom: 10px; }
.footer-logo p { margin:0; }
/* Copyright */
#footer-copyright { background-color: #2d2d2d; padding:11px 0; border-top: 2px solid #151515; }
#footer-copyright span { float:left; }
#footer-copyright ul.copyright-menu { float:right; margin:0; }
#footer-copyright ul.copyright-menu li { float: left; margin:0; padding:0 10px 0 10px; border-right:1px solid #414243; }
#footer-copyright ul.copyright-menu li:last-child { border:none; padding-right: 0px; }
/*-----------------------------------------------------------------------------------------*/
/* Bottom,Top Margin & Clear */
/*-----------------------------------------------------------------------------------------*/
.bottom10 { margin-bottom:10px !important; }
.top10 { margin-top:10px !important; }
.bottom20 { margin-bottom:20px !important; }
.top20 { margin-top:20px !important; }
.bottom30 { margin-bottom:30px !important; }
.top30 { margin-top:30px !important; }
.bottom40 { margin-bottom:40px !important; }
.top40 { margin-top:40px !important; }
.bottom50 { margin-bottom:50px !important; }
.top50 { margin-top:50px !important; }
.bottom60 { margin-bottom:60px !important; }
.top60 { margin-top:60px !important; }
.bottom70 { margin-bottom:70px !important; }
.top70 { margin-top:70px !important; }
.bottom80 { margin-bottom:80px !important; }
.top80 { margin-top:80px !important; }
.bottom90 { margin-bottom:90px !important; }
.top90 { margin-top:90px !important; }
.bottom100 { margin-bottom:100px !important; }
.top100 { margin-top:100px !important; }
.clear { clear: both !important; visibility: hidden !important; width: 0 !important; height: 0 !important; }
/*-----------------------------------------------------------------------------------------*/
/* Titles */
/*-----------------------------------------------------------------------------------------*/
/* Maint Title */
.main-title h2{ line-height: 18px; text-align: center; font-family: 'Open Sans', sans-serif !important; font-size: 13px; font-weight: 400 !important; }
.separator-holder { height: 10px; float: left; width: 100%; position: relative; margin-bottom: 25px; }
.separator-holder hr { margin-top: 4px; border-color:#dadada; }
.separator-holder i.fa { position: absolute; left: 49%; top:-5px; font-size: 15px; background-color: #fefefe; padding:2px 6px; }
.separator-holder i.texture { background: transparent url(../_images/patterns/groovepaper.png) no-repeat; }
/* Second Version of Title */
h2.title { font-size: 12px; margin-bottom: 14px; text-transform: uppercase; border-bottom:1px solid #dfdfdf; line-height: 28px; }
/* Widget Title */
h2.title-widget { font-size: 12px; margin-bottom: 14px; text-transform: uppercase; border:none; line-height: 19px; font-family: 'Open Sans', sans-serif !important; }
/*-----------------------------------------------------------------------------------------*/
/* Social List */
/*-----------------------------------------------------------------------------------------*/
ul.social-list { margin:0; }
ul.social-list li { float: left; }
ul.social-list li { float:left; margin:0 7px 7px 0; }
ul.social-list li a { background-position:center; background-repeat:no-repeat; float: left; width: 25px; height: 25px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
ul.social-list li:nth-child(2n) a { background-color: #333333; text-align: center; }
ul.social-list li a:hover{ background-color:#1f1f1f; }
/* List of Social Icons */
ul.social-list a.facebook { background-image:url(../_images/icons/social/facebook.png); }
ul.social-list a.twitter { background-image:url(../_images/icons/social/twitter.png); }
ul.social-list a.twitter_bird { background-image:url(../_images/icons/social/twitterbird.png); }
ul.social-list a.googleplus { background-image:url(../_images/icons/social/googleplus.png); }
ul.social-list a.linkedin { background-image:url(../_images/icons/social/linkedin.png); }
ul.social-list a.rss { background-image:url(../_images/icons/social/rss.png); }
ul.social-list a.vimeo { background-image:url(../_images/icons/social/vimeo.png); }
ul.social-list a.amazon { background-image:url(../_images/icons/social/amazon.png); }
ul.social-list a.aol { background-image:url(../_images/icons/social/aol.png); }
ul.social-list a.appstore { background-image:url(../_images/icons/social/appstore.png); }
ul.social-list a.bebo { background-image:url(../_images/icons/social/bebo.png); }
ul.social-list a.behance { background-image:url(../_images/icons/social/behance.png); }
ul.social-list a.bing { background-image:url(../_images/icons/social/bing.png); }
ul.social-list a.blogger { background-image:url(../_images/icons/social/blogger.png); }
ul.social-list a.devianart { background-image:url(../_images/icons/social/devianart.png); }
ul.social-list a.dribbble { background-image:url(../_images/icons/social/dribbble.png); }
ul.social-list a.flickr { background-image:url(../_images/icons/social/flickr.png); }
ul.social-list a.myspace { background-image:url(../_images/icons/social/myspace.png); }
ul.social-list a.paypal { background-image:url(../_images/icons/social/paypal.png); }
ul.social-list a.pinterest { background-image:url(../_images/icons/social/pinterest.png); }
ul.social-list a.quora { background-image:url(../_images/icons/social/quora.png); }
ul.social-list a.stumbleupon { background-image:url(../_images/icons/social/stumbleupon.png); }
ul.social-list a.tumblr { background-image:url(../_images/icons/social/tumblr.png); }
ul.social-list a.wordpress { background-image:url(../_images/icons/social/wordpress.png); }
ul.social-list a.yahoo { background-image:url(../_images/icons/social/yahoo.png); }
ul.social-list a.youtube { background-image:url(../_images/icons/social/youtube.png); }
ul.social-list a.skype { background-image:url(../_images/icons/social/skype.png); }
ul.social-list a.email { background-image:url(../_images/icons/social/email.png); }
/*-----------------------------------------------------------------------------------------*/
/* SCROLL UP PAGE */
/*-----------------------------------------------------------------------------------------*/
#scrollUp { bottom: 20px; right: 20px; background-color: rgba(0,0,0, 0.2); background-image: url(../_images/arrow-up.png); background-repeat: no-repeat; background-position: center;
color: #fff; font-size: 12px; font-family: sans-serif; text-decoration: none; width: 45px; height: 45px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
-webkit-transition: background 200ms linear; -moz-transition: background 200ms linear; transition: background 200ms linear;
}
#scrollUp:hover { opacity: 1; }
/*-----------------------------------------------------------------------------------------*/
/* REVOLUTION SLIDER */
/*-----------------------------------------------------------------------------------------*/
.tp-banner-container { width:100%; position:relative; padding:0; }
.tp-banner { width:100%; position:relative; }
/*-----------------------------------------------------------------------------------------*/
/* SELECTINO COLOR & SCROLLBAR STYLE */
/*-----------------------------------------------------------------------------------------*/
/* Selection */
::selection { color:#fff; }
::-moz-selection { color:#fff; }
::-webkit-selection { color:#fff; }
/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
::-webkit-scrollbar-thumb { background-color: #999; }
/*-----------------------------------------------------------------------------------------*/
/* PAGE ELEMENTS */
/*-----------------------------------------------------------------------------------------*/
/* Accordions */
.accordions { width: 100%;}
.accordions h2 { margin:0px !important; line-height: 33px !important; padding: 3px 0 !important; font-size: 11px; border-top: 1px dashed #cccccc; cursor: pointer; }
.accordions .first-item, .accordions .active .first-item { border-top: none !important; }
.accordions h2 i.fa { margin-bottom: -5px; margin-right: 12px; color:#fff; background-color: #d1d1d1; padding:6px; border-radius: 2px; }
.accordions h2.active i.fa { background-color: #fff; }
.accordions p { line-height: 20px; margin: 5px 0; }
.accordion-hide { display: none; }
/* Jquery UI General css */
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; }
.ui-helper-clearfix:after { clear: both; }
.ui-helper-clearfix { min-height: 0; }
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; }
.ui-front { z-index: 100; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px dashed #cccccc; }
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; width:16px; height:16px; }
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 2px; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 2px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 2px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 2px; }
/* Tabs */
.ui-tabs { position: relative; }
.ui-tabs .ui-tabs-nav { margin: 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; background:#fafafa; top: 0; margin: 1px 2px 0 0; border-bottom-width: 0; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li:hover { background:#fff; }
.ui-tabs .ui-tabs-nav li i.fa { margin-right: 2px; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .6em 1.6em; text-decoration: none; color:#444; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; background:#fff; border-top: none; }
.ui-tabs-anchor { outline: 0 !important; }
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; border:1px dashed #cccccc; padding: 1em 1.4em; background: none; }
/* Buttons */
.btn-large { padding:8px 15px; font-size:14px; }
.btn-medium { padding:6px 12px; font-size:13px; }
.btn-small { padding:5px 8px; font-size:12px; }
.btn-mini { padding:2px 4px; font-size:11px; }
.btn-dashed { border:1px dashed #fff !important; }
.btn-standard, button.btn-standard, input[type="submit"].btn-standard{ border:none; color:#fff !important; cursor:pointer; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; transition:background-color 0.4s; -webkit-transition:background-color 0.4s; -moz-transition:background-color 0.4s; }
.btn-standard:hover, .btn-standard.green:hover, .btn-standard.blue:hover, .btn-standard.purple:hover,button.btn-standard:hover, button.btn-standard.green:hover, button.btn-standard.purple:hover, input[type="submit"].btn-standard:hover, input[type="submit"].btn-standard.green:hover, input[type="submit"].btn-standard.purple:hover { background-color:#444; }
.btn-standard.green { background-color: #85ca4e; }
.btn-standard.purple { background-color: #9b5eca; }
.btn-standard.orange { background-color: #ff8507; }
.btn-standard.blue { background-color: #289dcc; }
.btn-standard.dark { background-color: #3a3a3a; }
.btn-standard i.fa { margin-right: 4px; }
/* Page Title */
.page-title-holder { border-bottom:1px solid #dfdfdf; background: #fefefe; box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03); -webkit-box-shadow:0px 2px 0px 0px rgba(0, 0, 0, 0.03); -moz-box-shadow:0px 2px 0px 0px rgba(0, 0, 0, 0.03); }
.page-title { padding:25px 0; }
.page-title h2 { margin-bottom: 0; margin-left: 5px; font-size: 24px; line-height: 26px; font-family: 'Open Sans', sans-serif !important; font-weight: 300 !important; }
/* Breadcrumbs */
ul.breadcrumbs { float: right; margin: 0; }
ul.breadcrumbs li { float: left; margin: 5px; color: #777; font-size: 12px; font-family: 'Open Sans', sans-serif !important; font-weight: 300 !important; }
ul.breadcrumbs li i { font-size: 14px; margin-top: 2px; }
/* Team Members */
.team-member { text-align: center; position: relative; }
.team-member .member-holder { border-bottom: 1px solid #dfdfdf; box-shadow: 0 0 2px #dfdfdf; padding-bottom: 10px; }
.team-member .member-social { width: 200px; padding:7px 9px 4px 9px; color:#fff; background-color: rgba(0,0,0, 0.5); position:absolute; top:171px; left:0; display: none; }
.team-member .member-social a { font-size: 16px; margin:0 5px 0 5px; color: #fff; }
.team-member .member-social a:hover { color: #d6d6d6; }
.team-member .member-holder:hover .member-social { display: inline; }
.team-member img { width: 220px; height: 200px; }
.team-member .member-name { font-size: 14px; margin:10px 0 5px 0; font-family: 'Open Sans', sans-serif !important; }
.team-member .member-title { color:#777; font-style: italic; font-size: 11px; }
.team-member .member-description { margin:10px 7px 15px 7px; }
/* Slogan */
.slogan-holder { background:#fff; text-align: center !important; padding-top: 40px; padding-bottom:20px; border-bottom:1px solid #dfdfdf; }
.slogan-holder h1 { font-size: 18px; line-height: 24px; }
.slogan-holder p { color:#828a93; font-size: 13px; padding:0 60px; font-weight: 200; }
/* Dropcaps */
.dropcap-v1 p, .dropcap-v2 p, .dropcap-v3 p { text-align:justify; }
.dropcap-v1 p:first-letter, .dropcap-v2 p:first-letter, .dropcap-v3 p:first-letter { font-size:32px; line-height:32px; float:left; }
.dropcap-v2 p:first-letter { border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; box-shadow:0 0 2px #e0e0e0; -webkit-box-shadow:0 0 2px #e0e0e0; -moz-box-shadow:0 0 2px #e0e0e0; margin-top:6px; }
.dropcap-v1 p:first-letter, .dropcap-v3 p:first-letter { padding-right:10px; }
.dropcap-v2 p:first-letter { padding:4px 10px; margin-right:10px; color:#444; background:#fff; border:1px solid #e0e0e0; }
/* Lists */
.fa-ul i.fa { font-size: 11px; margin-top: 2px; }
/* Blocquote */
blockquote.bq, blockquote.bq p { display:block; float:right; max-width:800px; font-size:12px; line-height:20px; color:#777; font-style:italic; background:#fafafa; }
blockquote.bq p { margin-bottom:0; text-align:left; }
blockquote.bq { padding:15px 20px; }
blockquote.bq cite { display:block; font-size:12px; color:#555; }
blockquote.bq cite:before { content: "\2014 \0020"; }
blockquote.bq cite a, blockquote.bq cite a:visited, blockquote.bq cite a:visited { color:#555; }
/* Tables */
.table-v1, .table-v2, .table-v3 { width:100%; float:left; }
.table-v1 tr td, .table-v2 tr td, .table-v3 tr td { padding:10px 7px; }
.table-v1 tr:first-child, .table-v2 tr:first-child, .table-v3 tr:first-child{ font-weight:bold; font-size:11px; }
.table-v2 tr, .table-v2 td, .table-v3 tr, .table-v3 td { border:1px solid #e0e0e0; border-radius:10px; }
.table-v1 tr { border-bottom:1px solid #e0e0e0; }
.table-v1 tr:last-child { border:none; }
.table-v1 tr:nth-child(2n+2) { background:#fafafa; }
.table-v3 td:nth-child(2n+2){ background:#fafafa; }
/* Notifications */
.notification{ margin:15px 0; width:100%; padding:10px 0; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; box-shadow:inset 0 0 3px #fff; -moz-box-shadow:inset 0 0 3px #fff; -webkit-box-shadow:inset 0 0 3px #fff; }
.notification p { padding:0; margin-left:40px; margin-right:45px; margin-bottom:0; }
.notification i.fa{ float:left; margin-left:15px; font-size: 14px; margin-top: 2px; }
.notification.notice{ border-left:1px solid #e8e7e7; background-color:#fafafa; }
.notification.warning{ border-left:1px solid #f5dc7d; background-color:#fcf7d9; }
.notification.success{ border-left:1px solid #c2d288; background-color:#e3ebc6; }
.notification.error{ border-left:1px solid #f7c7c9; background-color:#f9e5e6; }
.notification.info{ border-left:1px solid #9ac9df; background-color:#d8ecf5; }
.notification.notice { color:#666 !important; }
.notification.warning { color:#c4a21b !important; }
.notification.success { color:#8fa442 !important; }
.notification.error { color:#b3696c !important; }
.notification.info { color:#6f8da9 !important; }
/*-----------------------------------------------------------------------------------------*/
/* BLOG */
/*-----------------------------------------------------------------------------------------*/
.blog-article { float: left; max-width: 100%; width: 100%; }
.blog-article img, .blog-article iframe { width: 680px; height: 280px; float: left; }
.blog-article .slides { width: 680px; }
/* Blog Post Separator */
.blog-separator-holder { height: 10px; float: left; width: 100%; position: relative; margin-bottom: 25px; }
.blog-separator-holder hr { margin-top: 4px; border-color:#efefef; }
.blog-separator-holder .blog-separator-circle { width: 16px; height: 16px; border:1px solid #efefef; position: absolute; left: 49%; top:-5px; background-color: #fff; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; }
.blog-article:hover .blog-separator-holder .blog-separator-circle { border: 1px solid #fff; transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; }
/* Post Item Holder */
.blog-article .post-item-holder { margin-bottom: 25px; float: left; box-shadow: 0px 0px 5px #aaa; -moz-box-shadow: 0px 0px 5px #aaa; -webkit-box-shadow: 0px 0px 5px #aaa; }
.blog-article .post-link-holder { color:#898989; font-size: 12px; margin-bottom: 10px; word-wrap:break-word; }
/* Blog View Hover */
.view { width: 680px; height: 280px; margin-bottom: 25px !important; float: left; overflow: hidden; position: relative; text-align: center; cursor: default; box-shadow: 0px 0px 5px #aaa; -moz-box-shadow: 0px 0px 5px #aaa; -webkit-box-shadow: 0px 0px 5px #aaa; }
article .view{ width: 100%; }
.view .mask, .view .content { width: 680px; height: 280px; position: absolute; overflow: hidden; top: 0; left: 0; }
.view img { display: block; position: relative; width: 100%; height: 100%; }
article .view .mask, article .view .content{width: 100%; }
.view a.info { display: inline-block; text-decoration: none; padding:0; text-indent:-9999px; width:20px; height:20px; }
.view a.info.link { background:url(../_images/link-overlay.png) center no-repeat; }
.view a.info.zoom { background:url(../_images/zoom-overlay.png) center no-repeat; }
.zicer-effect .mask { opacity: 0; overflow:visible; border:0px solid rgba(0,0,0,0.7); -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.zicer-effect a.info { position:relative; top:-10px; opacity:0; -moz-transform:scale(0,0); -webkit-transform:scale(0,0); -o-transform:scale(0,0); -ms-transform:scale(0,0); transform:scale(0,0); -webkit-transition: -webkit-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; -moz-transition: -moz-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; -o-transition: -o-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; -ms-transition: -ms-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; }
.zicer-effect:hover .mask { opacity: 1; border:140px solid rgba(0,0,0,0.7); }
.zicer-effect:hover a.info { opacity:1; -moz-transform:scale(1,1); -webkit-transform:scale(1,1); -o-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1); -moz-transition-delay:0.3s; -webkit-transition-delay:0.3s; -o-transition-delay:0.3s; -ms-transition-delay:0.3s; transition-delay:0.3s; }
/* Post Audio Holder */
.blog-article .post-audio-holder iframe { width: 100% !important; height: 120px !important; float: left !important; margin-bottom: 20px; }
/* Post Audio Holder */
.blog-article .flex-direction-nav { display: none; }
/* Post Gallery Navigation */
ul.flex-direction-nav li { margin-bottom:0 !important; }
/* Post Quote Holder */
.blog-article .post-quote-holder { float: left; padding: 20px; border:1px dashed #cdcbcb; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.blog-article .post-quote-holder a { display: block; color: #898989; font: italic 15px/1.6 'PT Serif', Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; }
.blog-article .post-quote-holder a.quote-source { font-size: 13px; width: 100%; margin-top: 10px; }
/* Post Data Content */
.blog-article .post-content .post-data { float: left; margin-bottom: 0px; margin-top: 6px; }
.blog-article .post-content .post-data li { width: 40px; height: 40px; margin:0; display: table; text-align: center; border:1px dashed #cccccc; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.blog-article .post-content .post-data li a { font-size: 17px; display: table-cell; vertical-align: middle; }
.blog-article .post-content .post-data li a, .blog-article .post-content .post-data li i.fa { color: #898989; }
.blog-article .post-content .post-data li p.post-data-comments { text-align: center; margin-bottom: 10px; font-size: 10px; }
/* Post Data Details Content */
.blog-article .post-content .post-data-details { width: 100%; margin: 0; margin-bottom: 15px; }
.blog-article .post-content .post-data-details li { float: left; margin: 0 6px 0 0; font-style: italic; font-family: arial, sans-serif; }
.blog-article .post-content .post-data-details li i.fa { margin-left: 3px; }
.blog-article .post-content .post-data-details li.light { color: #898989; }
.blog-article .post-content .post-excerpt { width: 100%; }
.blog-article .post-content .post-excerpt h2 { font-size: 16px; line-height: 21px; margin-top:0; font-family: 'Open Sans', sans-serif !important; }
.blog-article .post-content .post-excerpt ul { list-style-type: disc; list-style-position: inside; }
.blog-article .post-content .post-excerpt ol { list-style-type: decimal; list-style-position: inside; }
/* Post Navigation */
.post-navigation { float: left; width: 680px; margin:20px 0 0 0; }
ul.p-navigation { float: right; margin: 0; }
ul.p-navigation li { float: left; padding:1px 7px; margin-left: 4px; margin-bottom: 0; border:1px dashed #cdcbcb; }
ul.p-navigation li.no-border { border: none; }
ul.p-navigation li.current a { color:#fff; }
/* Comments */
.comments-holder { float:left; width:100%; }
.comments-holder
.comments-holder p{ margin:0; }
ol.comment-list { width:100%; margin:0; list-style-type:none; font-size: 11px; }
ol.comment-list li { width:100%; float:left; margin-bottom:4px; }
ol.comment-list .comment { padding:5px 0; float:left; width:100%; border-bottom:1px dashed #efefef; padding:20px 0; }
ol.comment-list .comment .imgHolder { float:left; width:55px; height:55px; }
ol.comment-list .comment img { width:55px; height:55px; }
ol.comment-list .comment-body { margin-left:90px; }
ol.comment-list .comment-body .comment-meta { color:#888; width:100%; margin-bottom:5px; }
ol.comment-list .comment-body .comment-meta span{ margin-right:7px; }
ol.comment-list .comment-body .comment-author { padding: 2px 7px; border:1px dashed #cdcbcb; border-radius: 2px; color: #444; }
ol.comment-list .comment-body a:hover { color:#444 !important; }
ol.comment-list ul.child { float:left; margin-left:80px; margin-bottom:0; font-size: 11px; }
ol.comment-list ul.child li { width:100%; float:left; margin:0; }
ol.comment-list ul.child .comment .imgHolder { width:45px; height:45px; }
ol.comment-list ul.child .comment img { width:45px; height:45px; }
ol.comment-list ul.child .comment-body { margin-left:80px; }
/* Reply Holder */
.reply-holder { float:left; width:100%; margin-top: 10px; }
.reply-holder input[type="text"] { font-size: 11px; color: #777; padding:9px 28px 9px 10px; width:240px; margin:8px 0; float: left; border:1px dashed #cccccc; box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); -moz-box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); -webkit-box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.reply-holder input[type="text"]:focus { outline: 0; }
.reply-holder input[type="text"].name { background: transparent url(../_images/user.png) no-repeat 250px 7px; }
.reply-holder input[type="text"].email { background: transparent url(../_images/envelope.png) no-repeat 250px 7px; }
.reply-holder input[type="text"].website { background: transparent url(../_images/link.png) no-repeat 250px 7px; }
.reply-holder textarea { padding:10px 20px 9px 10px; font-size: 11px; color: #777; width:370px; height:115px; font-family:Helvetica; margin:8px 0; float:left; border:1px dashed #cccccc; box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); -moz-box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); -webkit-box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.reply-holder textarea:focus { outline: 0; }
.reply-holder .buttonHolder { width:100%; float:left; margin:10px 0; }
.reply-holder a{ float:left; }
/* Sidebar */
aside.sidebar { margin-top:40px; }
.sidebar .widget { margin-bottom: 35px; float: left; width: 100%; }
.sidebar .widget p, .sidebar .widget ul { margin-bottom: 0; }
.sidebar .widget ul li { margin: 4px 0; }
/* Search Widget */
.searchw-holder { float: left; border-bottom:1px solid #efefef; border-left: none; border-top: none; border-right:none; }
.searchw-holder .searcw { width:177px; padding:8px 2px 8px 6px; border:none; background-color: #fff; color: #898989; font-size: 11px; float:left; margin:3px 0px 3px 3px; }
.searchw-holder .searcw:focus { outline: 0; }
.searchw-holder button { background-color: transparent; border: none; padding:10px 6px; float: left; cursor:pointer; }
/* Flickr Widget */
.flickrImages { float: left; }
.flickrImages img { width:67px; height:65px; float:left; margin:3px; opacity: 0.9; }
.flickrImages img:hover { opacity: 1; }
/* Sponsor Widget */
.sponsors-holder img { float: left; margin: 5px; }
/* Tags Widget */
.tags { float: left; margin:0; }
.tags li { float: left; margin: 0 !important; }
.tags li a { border: 1px dashed #cccccc; padding:4px 8px; margin:2px; float: left; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
/* Twitter Widget */
.tweet_list a:hover { color:#444; }
.tweet_list li { margin-bottom: 10px !important; }
/*-----------------------------------------------------------------------------------------*/
/* CONTACT US */
/*-----------------------------------------------------------------------------------------*/
.contact-texture-holder { margin-top: -62px; height: 350px; padding:10px 0 25px 0; }
.contact-texture-content { min-height: 350px; background: url(../_images/contact-image.png) no-repeat; width: 940px; }
.contact-texture-text { width: 300px; float: right; margin-top: 100px; margin-right: 40px; text-align: left; }
.contact-texture-text h2 { font-size: 20px; line-height: 21px; font-family: 'Open Sans', sans-serif !important; }
.contact-info-list li { padding:10px 0 10px 45px; position: relative; margin:0; }
.contact-info-list .contact-info-icon { position: absolute; left: 0; top:5px; width: 27px; height: 27px; border:1px dashed #cccccc; display: table; text-align: center; }
.contact-info-list .contact-info-icon i.fa { display: table-cell; vertical-align: middle; color: #474747; font-size: 16px; }
.contact-form-holder input[type="text"] { font-size: 11px; color: #777; padding:9px 28px 9px 10px; width:300px; margin:8px 0; float: left; border:1px dashed #cccccc; box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); -moz-box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); -webkit-box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.contact-form-holder input[type="text"]:focus { outline: 0; }
.contact-form-holder input[type="text"]#name { background: transparent url(../_images/user.png) no-repeat 310px 7px; }
.contact-form-holder input[type="text"]#email { background: transparent url(../_images/envelope.png) no-repeat 310px 7px; }
.contact-form-holder input[type="text"]#subject { background: transparent url(../_images/subject.png) no-repeat 310px 7px; }
.contact-form-holder textarea { padding:10px 20px 9px 10px; font-size: 11px; color: #777; width:500px; height:150px; font-family:Helvetica; margin:8px 0; float:left; border:1px dashed #cccccc; box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); -moz-box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); -webkit-box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.contact-form-holder textarea:focus { outline: 0; }
.contact-form-holder .buttonHolder { margin-top: 15px; }
.contact-form-holder .buttonHolder input[type="submit"] { padding:6px 15px !important; float: left; }
#contact-messages-holder { margin-top: 20px; float: left; }
.gif-holder { float: left; margin:6px 0 0 10px; }
/* Contact map */
.contact-map { height: 400px; margin-top: -58px; border-bottom: 1px dashed #cccccc; box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); -moz-box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); -webkit-box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); }
/*-----------------------------------------------------------------------------------------*/
/* PRICING TABLES */
/*-----------------------------------------------------------------------------------------*/
/* Pricing V1 */
.pricing-v1 { border-right: solid 1px #dddddd; border-top: solid 1px #dddddd; border-bottom: solid 1px #dddddd; margin-left: 0; margin-bottom: 20px; }
.pricing-v1.first-table { border-left: solid 1px #dddddd; }
.pricing-v1-item { width: 235px; float: left; }
.pricing-v1 li { margin:0; }
.pricing-v1 li.colored { background-color: #fdfdfd; }
.pricing-v1 a.btn-standard { font-size: 11px; }
.pricing-v1 * { list-style: none; line-height: 1; }
.pricing-v1 .header-top { height: 30px; width: 100%; margin-top: -30px; color: #fff; text-align: center; font-size: 13px; font-family: arial, sans-serif; display: table; }
.pricing-v1 .header-top.green { background-color: #85ca4e; }
.pricing-v1 .header-top.blue { background-color: #289dcc; }
.pricing-v1 .header-top span { display: table-cell; vertical-align: middle; }
.pricing-v1 .header {
background-image: -webkit-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
background-image: -moz-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
background-image: -ms-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
background-image: linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
border-bottom: solid 1px #dddddd;
height: 135px;
padding: 14px 4px;
text-align: center;
color: #eeeeee;
font-weight: normal;
font-size: 15px;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important; }
.pricing-v1 .header p{ margin:0; }
.pricing-v1 .header p.plan-name { margin:22px 0 15px 0; font-size: 15px; color:#444; }
.pricing-v1 .header p.plan-price { margin:0 0 10px 0; font-size: 40px; color:#777; }
.pricing-v1 .header p.plan-per { font-size: 11px; color:#c0c0c0; }
.pricing-v1 .header.green p.plan-price, .pricing-v1 .header.green p.plan-name{ color: #85ca4e !important; }
.pricing-v1 .header.blue p.plan-price, .pricing-v1 .header.blue p.plan-name{ color: #289dcc !important; }
.pricing-v1 .price {
background-color: #f6f6f6;
padding: 12px 4px;
text-align: center;
color: #333333;
font-weight: normal;
font-size: 25px;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important; }
.pricing-v1 .description {
background-color: white;
padding: 20px 4px;
text-align: center;
color: #777777;
font-weight: normal;
line-height: 1.4;
border-bottom: dotted 1px #dddddd; }
.pricing-v1 .bullet-item {
background-color: white;
padding: 15px;
text-align: center;
color: #333333;
font-size: 12px;
font-weight: normal;
border-bottom: dotted 1px #dddddd; }
.pricing-v1 .cta-button {
background-image: -webkit-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
background-image: -moz-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
background-image: -ms-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
background-image: linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
text-align: center;
padding: 25px 0; }
/* Pricing V2 */
.pricing-v2 { border-right: solid 1px #dddddd; border-top: solid 1px #dddddd; border-bottom: solid 1px #dddddd; margin-left: 0; margin-bottom: 20px; }
.pricing-v2.first-table { border-left: solid 1px #dddddd; margin-top: 164px; }
.pricing-v2.first-table li:last-child { border: none; }
.pricing-v2-item { width: 188px; float: left; }
.pricing-v2 li { margin:0; }
.pricing-v2 li.colored { background-color: #fdfdfd; }
.pricing-v2 a.btn-standard { font-size: 11px; }
.pricing-v2 * { list-style: none; line-height: 1; }
.pricing-v2 .header-top { height: 30px; width: 100%; margin-top: -30px; color: #fff; text-align: center; font-size: 13px; font-family: arial, sans-serif; display: table; }
.pricing-v2 .header-top.green { background-color: #85ca4e; }
.pricing-v2 .header-top.blue { background-color: #289dcc; }
.pricing-v2 .header-top span { display: table-cell; vertical-align: middle; }
.pricing-v2 .header {
background-image: -webkit-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
background-image: -moz-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
background-image: -ms-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
background-image: linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
border-bottom: solid 1px #dddddd;
height: 135px;
padding: 14px 4px;
text-align: center;
color: #eeeeee;
font-weight: normal;
font-size: 15px;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important; }
.pricing-v2 .header.first-header, .pricing-v2 .first-cta-button { border-left: 1px solid #dddddd; }
.pricing-v2 .header p{ margin:0; }
.pricing-v2 .header p.plan-name { margin:22px 0 15px 0; font-size: 15px; color:#444; }
.pricing-v2 .header p.plan-price { margin:0 0 10px 0; font-size: 40px; color:#777; }
.pricing-v2 .header p.plan-per { font-size: 11px; color:#c0c0c0; }
.pricing-v2 .header.green p.plan-price, .pricing-v2 .header.green p.plan-name{ color: #85ca4e !important; }
.pricing-v2 .header.blue p.plan-price, .pricing-v2 .header.blue p.plan-name{ color: #289dcc !important; }
.pricing-v2 .price {
background-color: #f6f6f6;
padding: 12px 4px;
text-align: center;
color: #333333;
font-weight: normal;
font-size: 25px;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important; }
.pricing-v2 .bullet-item {
background-color: white;
padding: 15px;
text-align: center;
color: #333333;
font-size: 12px;
font-weight: normal;
border-bottom: dotted 1px #dddddd; }
.pricing-v2 .cta-button {
background-image: -webkit-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
background-image: -moz-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
background-image: -ms-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
background-image: linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
text-align: center;
padding: 25px 0; }
/* Pricing V3 */
.pricing-v3 { background:url(../_images/patterns/groovepaper.png) repeat; border:1px solid #efefef; margin-bottom: 20px; font-family: arial, sans-serif; display: table; width: 100%; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.pricing-v3 .content-holder { display: table-cell; vertical-align: middle; }
.pricing-v3 .price-circle { box-shadow: 0 0 1px #555; width: 65px; display: table; height: 65px; margin:20px auto 20px auto; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; }
.pricing-v3 .price-circle span { display: table-cell; vertical-align: middle; color:#fff; font-size: 21px; }
.pricing-v3 .price-plan { font-size: 15px; color: #888; margin-bottom: 30px; }
.pricing-v3 a.price-button { float: left; color: #fff !important; border-top: 1px solid #fff; font-size: 15px; width: 100%; padding:14px 0; margin-top: 14px; border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; }
/* Colors */
.pricing-v3.green .price-button, .pricing-v3.green .price-circle { background-color: #85ca4e; }
.pricing-v3.blue .price-button, .pricing-v3.blue .price-circle { background-color: #289dcc; }
.pricing-v3.purple .price-button, .pricing-v3.purple .price-circle { background-color: #9b5eca; }
.pricing-v3.orange .price-button, .pricing-v3.orange .price-circle { background-color: #ff8507; }
/* Hover states */
.pricing-v3:hover { background: #fff; }
.pricing-v3:hover a.price-button { background-color: #444; transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; }
.pricing-v3:hover .price-circle { background-color: #999; transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; }
.pricing-v3 .content-holder:hover .outline-border:before, .pricing-v3 .content-holder:focus:before, .pricing-v3 .content-holder:active:before { border: #e1e1e1 solid 4px; border-radius: 100%; top: -8px; right: -8px; bottom: -8px; left: -8px; }
/*-----------------------------------------------------------------------------------------*/
/* SUPERFISH MENU */
/*-----------------------------------------------------------------------------------------*/
#sf-main-nav { float: right; }
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu li > a { white-space: nowrap; }
.sf-menu > li a { font-size: 11px !important; }
.sf-menu ul li.current > a { color:#fff; }
.sf-menu li ul { border:1px solid #e8e8e8; border-radius:2px; }
.sf-menu li > ul { left:0%; }
.sf-menu li ul::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: -4px;
left: -4px;
border: 4px solid rgba(241, 241, 241, 0.6);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.sf-menu li ul::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 25px;
top: -25px;
}
.sf-menu li ul a { white-space: normal; }
.sf-menu li ul li a{ font-size: 12px !important; }
.sf-menu li {
position: relative;
}
.sf-arrows .fa {
margin-right: 5px;
font-size: 13px;
}
.sf-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 4721;
}
.sf-menu > li {
float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
display: block;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu ul ul {
top: 0;
left: 191px;
}
.sf-menu {
float: left;
}
.sf-menu ul {
width: 185px;
}
.sf-menu li > a {
padding: 3.2em 1.71em;
text-decoration: none;
color:#333;
zoom: 1; /* IE7 */
}
.sf-menu > li > a { font-family: arial, sans-serif; font-weight: bold; }
.sf-menu li ul a { padding:0.9em 1.5em 0.9em 1.5em; }
.sf-menu ul li:hover > a { color:#fff; padding-left: 22px; transition:padding-left 0.17s ease-in; -moz-transition:padding-left 0.17s ease-in; -webkit-transition:padding-left 0.17s ease-in; }
.sf-menu a {
color: #13a;
transition:color 0s;
-moz-transition:color 0s;
-webkit-transition:color 0s;
}
.sf-menu li {
background-color: transparent;
-webkit-transition: background .2s;
transition: background .2s;
}
.sf-menu ul li {
background: #fff;
}
.sf-menu ul ul li {
background: #fff;
}
/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
padding-right: 2.4em;
*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows li ul .sf-with-ul:after{
content: "\f105";
font-family: FontAwesome;
position: absolute;
top: 50%;
right: 1em;
margin-top: -8px;
color:#828a93 !important;
font-size: 12px;
}
.sf-arrows ul li.current > .sf-with-ul:after, .sf-arrows ul li:hover > .sf-with-ul:after { color:#fff !important; }
.sf-arrows .sf-with-ul:after {
content: "\f107";
font-family: FontAwesome;
position: absolute;
font-weight: 400;
top: 50%;
right: 1em;
margin-top: -9px;
color:#828a93 !important;
font-size: 12px;
}
.sf-menu li > ul:after { content: ""; position: absolute; left: 85px; top:-11px; width: 0; height: 0; }
.sf-menu li ul ul:after { content: ""; position: absolute; top:9%; left:-11%; width: 0; height: 0; border-right:0px solid #f6f6f6; border-bottom: 0px solid transparent; border-top: 0px solid transparent; }
/*-----------------------------------------------------------------------------------------*/
/* ANIMATED ELEMENTS */
/*-----------------------------------------------------------------------------------------*/
.anim-fade-in, .anim-fade-in-short, .anim-fade-left, .anim-fade-left-short, .anim-fade-right, .anim-fade-right-short,
.anim-fade-up, .anim-fade-up-short, .anim-fade-down, .anim-fade-down-short, .anim-bounce, .anim-bounce-short,
.anim-shake, .anim-shake-short, .anim-tada, .anim-tada-short, .anim-swing, .anim-swing-short,
.anim-rotateIn, .anim-rotateIn-short, .anim-rollIn-right, .anim-rollIn-right-short, .anim-rollIn-left,
.anim-rollIn-left-short, .anim-bounce-custom-1, .anim-bounce-custom-2, .anim-bounce-custom-3, .anim-bounce-custom-4, .anim-rollIn-right-custom,
.anim-bounce-custom-1a, .anim-bounce-custom-2a, .anim-bounce-custom-3a, .anim-bounce-custom-4a, .anim-bounce-custom-5a, .anim-bounce-custom-6a,
.anim-fadeUp-custom-7a, .anim-fadeUp-custom-8a { opacity: 0; }
/*-----------------------------------------------------------------------------------------*/
/* FEATURES */
/*-----------------------------------------------------------------------------------------*/
/* Laptop Feature */
.laptop-features { padding-bottom: 60px; width: 940px; margin-left: 10px; position: relative; }
.laptop-features img { margin-top: 75px; }
.laptop-features h2 { font-size: 14px !important; font-weight: bold; line-height: 18px; margin-bottom: 7px; font-family: Arial, sans-serif; }
.laptop-features p { font-size: 12px; line-height: 15px; margin-bottom: 0px; }
.laptop-monitor { width: 274px; height: 160px; margin-left: 4px; margin-top: 5px; position: absolute; top:235px; left: 321px; border:1px dashed #5f5f5f; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.laptop-monitor ul.monitor-slide { font-size: 17px; color: #fff; font-family: Arial, sans-serif; }
.laptop-monitor ul.monitor-slide li { width: 100%; padding-top: 75px !important; }
/* Image Slide */
.laptop-monitor.images ul.monitor-slide li { padding-top: 0px !important; background: transparent url(../_images/zoom-overlay.png) center center no-repeat; }
.laptop-monitor.images ul.monitor-slide li img { width: 274px; height: 160px; margin:0; }
.laptop-monitor.images ul.monitor-slide li:hover img { opacity: 0.3; transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; }
/* Items */
.laptop-features .laptop-item-left-one { width: 140px; height: auto; position: absolute; top:190px; left: 82px; text-align: left; }
.laptop-features .laptop-item-left-two { width: 140px; height: auto; position: absolute; top:130px; left: 322px; text-align: left; }
.laptop-features .laptop-item-right-one { width: 120px; height: auto; position: absolute; top:120px; left: 495px; text-align: left; }
.laptop-features .laptop-item-right-two { width: 140px; height: auto; position: absolute; top:80px; left: 720px; text-align: left; }
.laptop-features .laptop-item-right-three { width: 140px; height: auto; position: absolute; top:220px; left: 663px; text-align: left; }
/* Feature v1 */
.feature-v1 { background-color: #fff; text-align: center; }
.feature-v1 h2 { font-size: 12px; line-height: 21px; font-family: arial, sans-serif; font-weight: bold; }
.feature-v1-icon { font-size: 45px; margin-bottom: 7px; }
.feature-v1-link { font-size: 20px; }
/* Feature v2 */
.feature-v2 { position: relative; }
.feature-v2 .circle { color:#fff; font-size: 35px; display: table; width: 80px; height: 80px; position: absolute; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; }
.feature-v2 .circle i { display: table-cell; vertical-align: middle; }
.feature-v2 .circle.first { top:46px; left:160px; background: #289dcc; box-shadow: 0 0 3px #4ebdea; }
.feature-v2 .circle.second { top:45px; left:415px; background: #85ca4e; box-shadow: 0 0 3px #9de861; }
.feature-v2 .circle.third { top:45px; left:665px; background: #9b5eca; box-shadow: 0 0 3px #bf7ff1; }
/* Circle Numbers */
.feature-v2 .circle-num { background: #fff; width: 23px; height: 23px; left: -4px; top:3px; font-size: 12px; position: absolute; display: table; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; }
.feature-v2 .circle-num span { display: table-cell; vertical-align: middle; font-weight: bold; font-family: arial, sans-serif; }
.feature-v2 .circle-num.first { border: 2px solid #289dcc; color: #289dcc; box-shadow: 0 0 2px #289dcc; }
.feature-v2 .circle-num.second { border: 2px solid #85ca4e; color: #85ca4e; box-shadow: 0 0 2px #85ca4e; }
.feature-v2 .circle-num.third { border: 2px solid #9b5eca; color: #9b5eca; box-shadow: 0 0 2px #9b5eca; }
/* Text */
.feature-v2 .circle-text { width: 140px; position: absolute; text-align: center; }
.feature-v2 .circle-text h4 { font-family: Arial, sans-serif; font-size: 15px; font-weight: bold; line-height: 16px; margin-bottom: 10px; margin-top: 3px; }
.feature-v2 .circle-text.first { top:140px; left: 130px; }
.feature-v2 .circle-text.second { top:140px; left: 385px; }
.feature-v2 .circle-text.third { top:140px; left: 637px; }
/* Hover states */
.feature-v2 .circle-item-first:hover .circle-num.first { background:#289dcc; color: #fff; transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; }
.feature-v2 .circle-item-second:hover .circle-num.second { background:#85ca4e; color: #fff; transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; }
.feature-v2 .circle-item-third:hover .circle-num.third { background:#9b5eca; color: #fff; transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; }
/* Feature v3 */
.feature-v3 { float: left; width: 100%; margin:0; text-align: center; }
.feature-v3 li { width: 225px; padding: 20px 30px; float: left; border:1px dashed #dddddd; margin:0 0 20px 20px; box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); -moz-box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); -webkit-box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); }
.feature-v3 li h2 { font-size: 15px; margin: 10px 0 15px 0; font-weight: bold; font-family: Arial, sans-serif; line-height: 16px; }
.feature-v3 li i.fa { font-size: 34px; margin-top: 25px; margin-bottom: 9px; }
/* Feature v4 */
.feature-v4 { position: relative; }
.feature-v4 .circle { color:#fff; font-size: 35px; display: table; width: 80px; height: 80px; position: absolute; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; }
.feature-v4 .circle .arrow-down { position: absolute; bottom:-6px; left:33px; }
.feature-v4 .circle span, .feature-v4 .circle i { display: table-cell; vertical-align: middle; }
.feature-v4 .circle span { font-family: arial, sans-serif; font-weight: bold; }
.feature-v4 .circle.first { top:46px; left:160px; background: #289dcc; box-shadow: 0 0 3px #4ebdea; }
.feature-v4 .circle.second { top:45px; left:415px; background: #85ca4e; box-shadow: 0 0 3px #9de861; }
.feature-v4 .circle.third { top:45px; left:665px; background: #9b5eca; box-shadow: 0 0 3px #bf7ff1; }
/* Circle Icons */
.feature-v4 .circle-icon { background: #fff; width: 23px; height: 23px; left: -4px; top:3px; font-size: 12px; position: absolute; display: table; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; }
.feature-v4 .circle-icon span { display: table-cell; vertical-align: middle; font-weight: bold; font-family: arial, sans-serif; }
.feature-v4 .circle-icon.first { border: 2px solid #289dcc; color: #289dcc; box-shadow: 0 0 3px #289dcc; }
.feature-v4 .circle-icon.second { border: 2px solid #85ca4e; color: #85ca4e; box-shadow: 0 0 3px #85ca4e; }
.feature-v4 .circle-icon.third { border: 2px solid #9b5eca; color: #9b5eca; box-shadow: 0 0 3px #9b5eca; }
/* Text */
.feature-v4 .circle-text { width: 140px; position: absolute; text-align: center; }
.feature-v4 .circle-text h4 { font-family: Arial, sans-serif; font-size: 15px; line-height: 16px; font-weight: bold; margin-bottom: 10px; }
.feature-v4 .circle-text.first { top:140px; left: 130px; }
.feature-v4 .circle-text.second { top:140px; left: 385px; }
.feature-v4 .circle-text.third { top:140px; left: 635px; }
/* Hover states */
.feature-v4 .circle-item-first:hover .circle-icon.first { background:#289dcc; color: #fff; transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; }
.feature-v4 .circle-item-second:hover .circle-icon.second { background:#85ca4e; color: #fff; transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; }
.feature-v4 .circle-item-third:hover .circle-icon.third { background:#9b5eca; color: #fff; transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; }
/* Arrow Down */
.feature-v4 .arrow-down { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; }
.feature-v4 .circle.first .arrow-down { border-top: 7px solid #289dcc; }
.feature-v4 .circle.second .arrow-down { border-top: 7px solid #85ca4e; }
.feature-v4 .circle.third .arrow-down { border-top: 7px solid #9b5eca; }
/* Feature v5 */
.feature-v5 { position: relative; }
.feature-v5 .circle { color:#fff; font-size: 35px; text-align: center; display: table; width: 82px; height: 82px; position: absolute; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; }
.feature-v5 .circle i { display: table-cell; vertical-align: middle; }
/* Positioning Circles */
.feature-v5 .circle.first { top:88px; left:43px; background: #289dcc; box-shadow: 0 0 3px #4ebdea; }
.feature-v5 .circle.second { top:88px; left:234px; background: #85ca4e; box-shadow: 0 0 3px #9de861; }
.feature-v5 .circle.third { top:88px; left:430px; background: #9b5eca; box-shadow: 0 0 3px #bf7ff1; }
.feature-v5 .circle.fourth { top:88px; left:622px; background: #ff8507; box-shadow: 0 0 3px #fca448; }
.feature-v5 .circle.fifth { top:88px; left:815px; background: #fd79a8; box-shadow: 0 0 3px #fea4c4; }
/* Circle Text */
.feature-v5 .top-text-holder { position: absolute; width: 100%; margin-top: 20px; text-align:center; }
.feature-v5 .top-text-holder h2 { font-size: 20px; line-height: 21px; font-family: 'Open Sans', sans-serif !important; font-weight: 300; }
.feature-v5 .circle-text { width: 140px; position: absolute; text-align: center; }
.feature-v5 .circle-text h4 { font-family: Arial, sans-serif; font-size: 15px; line-height: 16px; font-weight: bold; margin-bottom: 10px; margin-top: 3px; }
.feature-v5 .circle-text.first { top:180px; left: 13px; }
.feature-v5 .circle-text.second { top:180px; left: 207px; }
.feature-v5 .circle-text.third { top:180px; left: 400px; }
.feature-v5 .circle-text.fourth { top:180px; left: 595px; }
.feature-v5 .circle-text.fifth { top:180px; left: 785px; }
/* Hover State */
.circle-item-holder:hover .circle { background: #444; transition:background .4s; box-shadow: none; }
.outline-border { display: inline-block; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.outline-border:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: top, right, bottom, left; transition-property: top, right, bottom, left; }
.circle-item-holder:hover .outline-border:before, .circle-item-holder:focus:before, .circle-item-holder:active:before { border: #e1e1e1 solid 4px; border-radius: 100%; top: -8px; right: -8px; bottom: -8px; left: -8px; }
/* Feature v6 */
.feature-v6 { float: left; width: 100%; margin:0; text-align: center; }
.feature-v6 li { width: 311px; float: left; border-bottom:1px dashed #dddddd; border-right:1px dashed #dddddd; margin:0; }
.feature-v6 li.no-border-bottom { border-bottom: none; }
.feature-v6 li.no-border-right { border-right:none; }
.feature-v6 li h2 { font-size: 15px; font-weight: bold; font-family: Arial, sans-serif; line-height: 16px; }
.feature-v6 li i.fa { font-size: 34px; margin-top: 25px; margin-bottom: 9px; }
/* Feature v7 */
.feature-v7 { margin:0 auto; text-align: center; }
.feature-v7 li { position: relative; width: 215px; display: inline-block; border:1px solid #dddddd; margin:0 7px; background: #fff; box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); -moz-box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); -webkit-box-shadow: 0 2px 1px 0 rgba(180, 180, 180, 0.2); border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.feature-v7 li .header { height: 100px; }
.feature-v7 li .header.first { background: #289dcc; }
.feature-v7 li .header.second { background: #85ca4e; }
.feature-v7 li .header.third { background: #9b5eca; }
.feature-v7 li .circle { width: 35px; height: 35px; position: absolute; background: #fff; z-index: 99; border:1px solid #dddddd; border-radius: 100%; display: table; text-align: center; }
.feature-v7 li .circle i.fa { display: table-cell; vertical-align: middle; font-size: 14px; }
.feature-v7 li .circle.first { right: -28px; top:160px; }
.feature-v7 li .circle.second { left: -28px; top:160px; }
.feature-v7 li h2 { font-size: 15px; font-weight: bold; font-family: Arial, sans-serif; line-height: 16px; margin:20px 20px 0px 20px; }
.feature-v7 li p { margin:10px 20px 20px 20px; }
/* Feature v8 */
.feature-v8 { position: relative; }
.feature-v8 .circle { width: 78px; height: 78px; background: #fff; margin-left: 34px; border-radius:100%; }
.feature-v8 .circle .icon-holder { display: table; text-align: center; width: 78px; height: 78px; position: relative; }
.feature-v8 .circle .icon-holder i { display: table-cell; vertical-align: middle; font-size: 40px; }
.feature-v8 .circle-content { margin-top: 40px; }
.feature-v8 .circle-content h4 { font-family: arial, sans-serif; font-weight: bold; font-size: 15px; margin-bottom: 9px; line-height: 16px; }
.feature-v8 .item-holder { width: 160px; position: absolute; }
/* Arrow & Number circle */
.feature-v8 .circle .arrow-down { position: absolute; bottom:-14px; left: 29px; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; }
.feature-v8 .circle .num-circle { width: 17px; height: 17px; font-weight: bold; font-family: arial, sans-serif; position: absolute; left: 29px; bottom:-5px; background: #fff; border-radius: 100%; }
/* Colors & Positions */
.feature-v8 .item-holder.blue { left: 106px; top: 37px; }
.feature-v8 .circle.blue { border:7px solid #289dcc; box-shadow: 0 0 5px #289dcc; }
.feature-v8 .circle.blue .num-circle { color:#289dcc; }
.feature-v8 .circle.blue .icon-holder i { color: #289dcc; }
.feature-v8 .circle.blue .arrow-down { border-top: 9px solid #289dcc; }
.feature-v8 .item-holder.green { left: 293px; top: 37px; }
.feature-v8 .circle.green { border:7px solid #85ca4e; box-shadow: 0 0 5px #85ca4e; }
.feature-v8 .circle.green .num-circle { color:#85ca4e; }
.feature-v8 .circle.green .icon-holder i { color: #85ca4e; }
.feature-v8 .circle.green .arrow-down { border-top: 9px solid #85ca4e; }
.feature-v8 .item-holder.purple { left: 480px; top: 37px; }
.feature-v8 .circle.purple { border:7px solid #9b5eca; box-shadow: 0 0 5px #9b5eca; }
.feature-v8 .circle.purple .num-circle { color:#9b5eca; }
.feature-v8 .circle.purple .icon-holder i { color: #9b5eca; }
.feature-v8 .circle.purple .arrow-down { border-top: 9px solid #9b5eca; }
.feature-v8 .item-holder.orange { left: 667px; top: 37px; }
.feature-v8 .circle.orange { border:7px solid #ff8507; box-shadow: 0 0 5px #ff8507; }
.feature-v8 .circle.orange .num-circle { color:#ff8507; }
.feature-v8 .circle.orange .icon-holder i { color: #ff8507; }
.feature-v8 .circle.orange .arrow-down { border-top: 9px solid #ff8507; }
/* Hover State */
.feature-v8 .item-holder:hover .circle .icon-holder i { color: #444444; transition:color 0.6s; }
/*-----------------------------------------------------------------------------------------*/
/* RECENT POSTS */
/*-----------------------------------------------------------------------------------------*/
.rp-item-holder { width: 220px; margin-top: 10px; }
/* Top Cirlces */
.rp-item-holder .top-circles { margin:0 auto; width: 100%; height: 115px; position: relative; text-align: center; }
.rp-item-holder .top-circles a { color: #fff; display: table-cell; vertical-align: middle; font-size: 30px; }
.rp-item-holder .top-circles .top-first-circle { text-align: center; display: table; width: 85px; height: 85px; border-radius: 100%; position: absolute; left: 60px; }
.rp-item-holder .top-circles .top-second-circle { width: 22px; height: 22px; border-radius: 100%; position: absolute; left: 57px; top:60px; }
.rp-item-holder .top-circles .top-third-circle { width: 10px; height: 10px; border-radius: 100%; position: absolute; left: 75px; top:85px; }
.rp-item-holder .top-circles .top-fourth-circle { width: 5px; height: 5px; border-radius: 100%; position: absolute; left: 70px; top:98px; }
/* Colors */
.rp-item-holder .top-circles .top-first-circle.purple, .rp-item-holder .top-circles .top-second-circle.purple, .rp-item-holder .top-circles .top-third-circle.purple, .rp-item-holder .top-circles .top-fourth-circle.purple { background: #9b5eca; box-shadow: 0 0 2px #9b5eca; }
.rp-item-holder .top-circles .top-first-circle.green, .rp-item-holder .top-circles .top-second-circle.green, .rp-item-holder .top-circles .top-third-circle.green, .rp-item-holder .top-circles .top-fourth-circle.green { background: #85ca4e; box-shadow: 0 0 2px #85ca4e; }
.rp-item-holder .top-circles .top-first-circle.blue, .rp-item-holder .top-circles .top-second-circle.blue, .rp-item-holder .top-circles .top-third-circle.blue, .rp-item-holder .top-circles .top-fourth-circle.blue { background: #289dcc; box-shadow: 0 0 2px #289dcc; }
.rp-item-holder .top-circles .top-first-circle.orange, .rp-item-holder .top-circles .top-second-circle.orange, .rp-item-holder .top-circles .top-third-circle.orange, .rp-item-holder .top-circles .top-fourth-circle.orange { background: #ff8507; box-shadow: 0 0 2px #ff8507; }
.rp-item-holder .top-circles .top-first-circle.pink, .rp-item-holder .top-circles .top-second-circle.pink, .rp-item-holder .top-circles .top-third-circle.pink, .rp-item-holder .top-circles .top-fourth-circle.pink { background: #fd79a8; box-shadow: 0 0 2px #fd79a8; }
.rp-item-holder .top-circles .top-first-circle.brown, .rp-item-holder .top-circles .top-second-circle.brown, .rp-item-holder .top-circles .top-third-circle.brown, .rp-item-holder .top-circles .top-fourth-circle.brown { background: #835f51; box-shadow: 0 0 2px #835f51; }
/* Hover State */
.rp-item-holder .top-circles .top-first-circle a:hover { opacity: 0.4; transition:opacity 0.7s; }
/* Bottom Circles */
.rp-item-holder .bottom-circles { margin:0 auto; width: 100%; height: 55px; position: relative; text-align: center; }
.rp-item-holder .bottom-circles .bottom-first-circle { box-shadow: 0 1px 1px #d6d6d6; border-bottom:1px solid #cbcbcb; background:#fff url(../_images/patterns/groovepaper.png) repeat; width: 22px; height: 22px; border-radius: 100%; position: absolute; left: 95px; top:-15px; }
.rp-item-holder .bottom-circles .bottom-second-circle { box-shadow: 0 0 3px #d6d6d6; border:1px solid #cbcbcb; background:#fff url(../_images/patterns/groovepaper.png) repeat; width: 10px; height: 10px; border-radius: 100%; position: absolute; left: 113px; top:10px; }
.rp-item-holder .bottom-circles .bottom-third-circle { box-shadow: 0 0 3px #d6d6d6; border:1px solid #cbcbcb; background: #fff url(../_images/patterns/groovepaper.png) repeat; width: 5px; height: 5px; border-radius: 100%; position: absolute; left: 107px; top:25px; }
/* Title Holder */
.rp-item-holder .rp-title-holder { text-align: center; }
.rp-item-holder .rp-title-holder h2 { font-size: 14px; margin:6px 16px !important; color: #444; line-height: 16px; font-family: Arial, sans-serif; font-weight: bold; }
/* Content Holder */
.rp-item-holder .rp-content { box-shadow: 0 0 3px #d6d6d6; background:#fff url(../_images/patterns/groovepaper.png) repeat; border:1px solid #d2d2d2; padding:13px; margin-top: 15px; border-radius:5px; }
.rp-item-holder .rp-content p { margin-bottom: 3px; }
.rp-item-holder .rp-thumb { margin-top: 13px; height: 110px; margin-bottom: 3px; background: black url(../_images/link-overlay.png) no-repeat center center; border-radius: 5px; }
.rp-item-holder .rp-thumb img { width: 192px; box-shadow: 0 0 3px #444; height: 110px; border-radius: 5px; }
.rp-item-holder .rp-thumb img:hover { opacity: 0.6; transition:opacity 0.4s; }
/*-----------------------------------------------------------------------------------------*/
/* CLIENT MAP */
/*-----------------------------------------------------------------------------------------*/
.client-map-title { line-height: 18px; text-align: center; font-family: 'Open Sans', sans-serif !important; font-size: 12px; font-weight: 400 !important; padding:7px 15px; border:1px dashed #dadada; position: absolute; top:-17px; left: 410px; background: #fff; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.client-map-holder { margin:50px 0; width: 940px; height: 505px; background: url(../_images/client-world-map.png) no-repeat; position: relative; }
.client-map-holder .clients-names { position:absolute; top:0; left:0; }
h3.map-heading { font-size: 13px; line-height: 18px; text-transform: uppercase; color: #777777; }
/*-----------------------------------------------------------------------------------------*/
/* MAIN SLIDER ELEMENTS */
/*-----------------------------------------------------------------------------------------*/
h2.slider-head { font-size: 100%; font-weight: bold; line-height: 16px; text-align: center; font-family: arial, sans-serif}
i.yellow-star { color: #ffc400; font-size: 15px; }
/*
.skin-box i.fa { display: table; width: 35px; height: 35px; text-align: center; color: #fff; font-size: 21px; display: table-cell; vertical-align: middle; }
.black-box { padding:7px 12px; color: #fff; font-weight: bold; font-family: Arial, sans-serif; background: rgba(0,0,0,0.5); font-size: 14px; }
*/
/*-----------------------------------------------------------------------------------------*/
/* PORTFOLIO */
/*-----------------------------------------------------------------------------------------*/
/* General columns setting */
.c4 li,.c3 li,.c2 li { float: left; text-align: center; margin: 0; }
.c4 li img,.c3 li img, .c2 li img { float:left; }
.c4, .c3, .c2 { float: left; width:958px; }
/* Filter */
.port-group { margin-top:5px; margin-bottom:30px; float: left; width: 100%; text-align: center; }
.port-filter { margin:0 auto; }
.port-filter li { display: inline; }
.port-filter li i.fa { margin-right: 2px; }
.port-filter li.current a { color:#fff; }
.port-filter li a:hover { color:#fff; }
.port-filter a { padding: 4px 7px; border:1px solid #dddddd; margin:2px 1px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
/* Portofolio 4 Columns */
.c4 li { width: 235px; height: 200px; position: relative; }
.c4 li:nth-child(4n) { margin-right: 10; }
.c4 li img { width: 235px; height: 200px; float: left; margin:0; }
/* Hover State */
.c4.da-thumbs li article.da-animate i.fa { margin-top: 90px; }
.c4.da-thumbs li article.da-animate h3 { margin-top:35px; }
/* Portofolio 3 Columns */
.c3 li { width: 313px; height: 266px; position: relative; }
.c3 li:nth-child(4n) { margin-right: 10; }
.c3 li img { width: 313px; height: 266px; float: left; margin:0; }
/* Hover State */
.c3.da-thumbs li article.da-animate i.fa { margin-top: 130px; }
.c3.da-thumbs li article.da-animate h3 { margin-top:70px; }
/* Portofolio 2 Columns */
.c2 li { width: 470px; height: 400px; position: relative; }
.c2 li:nth-child(4n) { margin-right: 10; }
.c2 li img { width: 470px; height: 400px; float: left; margin:0; }
/* Hover State */
.c2.da-thumbs li article.da-animate i.fa { margin-top: 190px; }
.c2.da-thumbs li article.da-animate h3 { margin-top:130px; }
/* Portolio Hover */
.da-thumbs li ,
.da-thumbs li img { display: block; position: relative; }
.da-thumbs li { overflow: hidden; }
.da-thumbs li article { cursor: pointer; position: absolute; background-image:url(../_images/image-hover.png); background-repeat:repeat; width: 100%; height: 100%; }
.da-thumbs li article.da-animate { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.da-thumbs li article.da-animate i.fa { font-size: 27px; color: #edebeb; }
.da-thumbs li article.da-animate h3 { color: #edebeb; font-family:'PT Sans Caption',sans-serif; font-weight: bold; font-size: 13px; }
.da-thumbs li a { color:#e3e3e3; display:block; }
.da-thumbs { text-align:center; }
/* Portfolio Single */
.project-basic-info { height: auto; width: 100%; margin-top: -62px; padding-top: 60px; border-bottom:1px dashed #dadada; text-align: center; background:#fff url(../_images/patterns/groovepaper.png) repeat; }
.project-basic-info i.big-fa { font-size: 35px; }
.project-basic-info h2 { font-size: 25px; line-height: 31px; text-transform: uppercase; margin:20px 0; font-family: 'Open Sans', sans-serif !important; font-weight: 400; }
.project-basic-info p { margin:20px 0; }
.project-basic-info .btn-holder { margin:50px 0 80px 0; }
.project-item-holder { height: 330px; width: 100%; float: left; }
.project-item-holder img, .project-item-holder iframe, .project-item-holder object { width: 100%; height: 100%; float: left; }
.project-details { height: auto; width: 100%; text-align: center; float: left; }
.project-details ul.project-details-list { margin: 0; }
.project-details ul.project-details-list li { display: inline; padding:5px; font-family: arial, sans-serif; }
.project-details ul.project-details-list li i.fa { font-size: 13px; margin-right: 3px; }
.project-details ul.project-details-list li span { font-weight: bold; margin-right: 2px; }
.alignleft { float: left; }
/* Related Project */
.related-projects { float: left; width:958px; }
.related-projects li { float: left; text-align: center; margin: 0; width: 235px; height: 200px; position: relative; }
.related-projects li:nth-child(4n) { margin-right: 10; }
.related-projects li img { width: 235px; height: 200px; float: left; margin:0; }
/* Hover State */
.related-projects.da-thumbs li article.da-animate i.fa { margin-top: 90px; }
.related-projects.da-thumbs li article.da-animate h3 { margin-top:35px; }
/* Slide classes */
.da-slideFromTop { left: 0px; top: -100%; }
.da-slideFromBottom { left: 0px; top: 100%; }
.da-slideFromLeft { top: 0px; left: -100%; }
.da-slideFromRight { top: 0px; left: 100%; }
.da-slideTop { top: 0px; }
.da-slideLeft { left: 0px; }
/*-----------------------------------------------------------------------------------------*/
/* TIPSY PLUGIN */
/*-----------------------------------------------------------------------------------------*/
.tipsy { font-size: 10px; position: absolute; padding: 5px; z-index: 100000; }
.tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }
/* Rounded corners */
.tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
/* Uncomment for shadow */
/*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/
.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
/* Rules to colour arrows */
.tipsy-arrow-n { border-bottom-color: #000; }
.tipsy-arrow-s { border-top-color: #000; }
.tipsy-arrow-e { border-left-color: #000; }
.tipsy-arrow-w { border-right-color: #000; }
.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }
/*-----------------------------------------------------------------------------------------*/
/* ABOUT US */
/*-----------------------------------------------------------------------------------------*/
.about-title h2 { font-size: 19px; line-height: 25px; margin-bottom:18px; font-size: 23px; line-height: 26px; font-family: 'Open Sans', sans-serif !important; font-weight: 300 !important; }
.about-title p { font-size: 12px; }
/*-----------------------------------------------------------------------------------------*/
/* PIE CHART */
/*-----------------------------------------------------------------------------------------*/
.col-sm-3 { text-align: center; }
.col-sm-3 span.chart { position: relative; }
.col-sm-3 span.percent { position: absolute; font-size: 30px; top:-30px; left: 50%; margin-top: -0.2em; margin-left: -0.55em; z-index: 2; font-family: Arial, sans-serif; }
.col-sm-3 h4 { font-size: 15px; font-weight: bold; font-family: Arial, sans-serif; }
/*-----------------------------------------------------------------------------------------*/
/* TESTIMONIALS */
/*-----------------------------------------------------------------------------------------*/
.testimonial-header { position: relative; font-size: 14px; height: 20px; padding: 7px; background: #f5f5f5; border-radius: 2px; font-family: arial, sans-serif; }
.testimonial-name { float: left; margin: 2px 0 0 6px; }
.testimonial-name strong { font-size: 12px; font-style: italic; }
.testimonial-max { float: right; margin: 2px 6px 0 0; }
.testimonial-stars { float: right; margin: 2px 9px 0 0; }
.testimonial-stars li { float: left; margin: 0 2px 0 0; }
.testimonial-stars li i.fa { font-size: 14px; color: #ffcb39; }
.testimonial-header .arrow-down { position: absolute; bottom:-9px; left: 12px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #f5f5f5; }
.testimonial-body p { margin-top: 15px; font-size: 12px; font-style: italic; font-family: arial, sans-serif; margin-bottom: 0; }
/*-----------------------------------------------------------------------------------------*/
/* FAQ */
/*-----------------------------------------------------------------------------------------*/
.faq-links-holder { background:transparent url(../_images/patterns/groovepaper.png) repeat; border:1px dashed #cdcbcb; width:100%; height:100%; padding:30px; width:900px; float:left; margin-bottom: 50px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; box-shadow:inset 0 0 8px #fff; -moz-box-shadow:inset 0 0 8px #fff; -webkit-box-shadow:inset 0 0 8px #fff; }
ol.faq-links { float:left; margin-bottom:0; width:400px; }
ol.faq-links li { text-align: left; font-size: 12px; font-family: arial, sans-serif; }
ol.faq-links.right { float:right; }
.question-item { float:left; width:100%; margin-bottom:20px; }
/* Hover State */
.question-item:hover .answer-content p.answer { color: #444; transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; }
.question-item:hover .arrow-down { border-top: 10px solid #444; transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; }
.question-item:hover .question-num-content { background:#444; transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; }
.question-num-content { width:100%; height:100%; float:left; border-radius:100%; display:table; text-align:center; }
.question-num-content span { font-size:25px; font-weight:bold; display:table-cell; vertical-align:middle; }
.answer-content { min-height:110px; margin-left:95px; background-image:url(../_images/crafted-arrow-right.png); background-repeat:no-repeat; background-position:left 50px; }
.answer-content p { margin:15px; }
.answer-content .text-holder { min-height:110px; margin-left:38px; border:1px dashed #cdcbcb; }
.answer-content p.answer { font-weight:bold; font-size:14px; font-family: arial, sans-serif; }
.answer-content p.answer a{ margin-left:20px; font-size:12px; font-weight:normal; }
.answer-number { position: relative; width:70px; height:70px; margin:22px 0 0 10px; float:left; border-radius:100%; color: #fff; font-family: arial,sans-serif; }
.answer-number .arrow-down { position: absolute; bottom:-7px; left:26px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; }
/*-----------------------------------------------------------------------------------------*/
/* ANIMATED COUNTER */
/*-----------------------------------------------------------------------------------------*/
.cnum-holder { float: left; width: 100%; text-align: center; padding:10px; }
.cnum-holder .fa-icon-holder { font-size: 45px; margin-bottom: 20px; }
.cnum-holder .fa-icon-holder.green { color: #85ca4e; }
.cnum-holder .fa-icon-holder.blue { color: #289dcc; }
.cnum-holder .fa-icon-holder.purple { color: #9b5eca; }
.cnum-holder .fa-icon-holder.red { color: #bf1e2e; }
.cnum-holder span { font-weight: bold; font-size: 28px; font-family: arial, sans-serif; }
.cnum-holder p { margin:7px 0 0 0; }
/*-----------------------------------------------------------------------------------------*/
/* ANIMATINOS SHOWING DESING */
/*-----------------------------------------------------------------------------------------*/
.anim-example { background: url(../_images/patterns/photography.png) repeat; margin:10px 0; color: #666; text-align: center; font-size: 14px; padding:20px 0; font-family: arial,sans-serif; border:1px dashed #cccccc; border-radius: 2px; box-shadow:inset 0 0 5px #fff; }
@media only screen and (min-width: 768px) and (max-width: 959px) {
/* Portfolio */
/* 4 Columns */
.c4 { width: 747px !important; }
.c4 li { width: 186px !important; height: 158px !important; }
.c4 li img { width: 186px !important; height: 158px !important; }
.c4 article.da-animate i.fa { margin-top: 70px !important; }
.c4 article.da-animate h3 { margin-top: 20px !important; }
/* 3 Columns */
.c3 { width: 747px !important; }
.c3 li { width: 249px !important; height: 212px !important; }
.c3 li img { width: 249px !important; height: 212px !important; }
.c3 article.da-animate i.fa { margin-top: 100px !important; }
.c3 article.da-animate h3 { margin-top: 45px !important; }
/* 2 Columns */
.c2 { width: 747px !important; }
.c2 li { width: 373px !important; height: 317px !important; }
.c2 li img { width: 373px !important; height: 317px !important; }
.c2 article.da-animate i.fa { margin-top: 150px !important; }
.c2 article.da-animate h3 { margin-top: 90px !important; }
/* Portfolio Single Page */
.project-item-holder { height: auto !important; }
/* Related Project */
.related-projects { width:747px !important; }
.related-projects li { width: 186px !important; height: 158px !important; }
.related-projects li img { width: 186px !important; height: 158px !important; }
.related-projects.da-thumbs li article.da-animate i.fa { margin-top: 70px !important; }
.related-projects.da-thumbs li article.da-animate h3 { margin-top:22px !important; }
/* Pricing Table v1 */
.pricing-v1-item { width: 187px !important; }
/* Pricing Table v2 */
.pricing-v2-item { width: 149px !important; }
/* Blog */
.view, .view .mask, .blog-article iframe { width: 555px !important; height: 229px !important; }
.zicer-effect:hover .mask { border:120px solid rgba(0,0,0,0.7) !important; }
.blog-article .post-content .post-data-details, .blog-article .post-content .post-excerpt { width: 490px !important; }
.post-navigation { width: 555px !important; }
.blog-article .slides { width: 555px !important; }
.searcw { width:133px !important; }
/* Sponsor Widget */
.sponsors-holder img { width: 70px !important; height: 70px !important; margin: 3px !important; }
/* Comment Reply */
.reply-holder input[type="text"] { width: 190px !important; }
.reply-holder input[type="text"].name { background: transparent url(../_images/user.png) no-repeat 202px 5px !important; }
.reply-holder input[type="text"].email { background: transparent url(../_images/envelope.png) no-repeat 202px 5px !important;; }
.reply-holder input[type="text"].website { background: transparent url(../_images/link.png) no-repeat 202px 5px !important;; }
.reply-holder textarea { width:280px !important; }
/* Contact */
.contact-texture-content { width: 747px !important; }
.contact-texture-text { margin-right: 70px !important; }
.contact-form-holder textarea { width: 390px !important; }
/* Client Map */
.client-map-title { left: 320px !important; }
.client-map-holder { width: 747px !important; height: 401px !important; background-size: 747px !important; }
/* Team Member - Social Networks */
.team-member .member-social { top:126px !important; width: 153px !important; }
.team-member img { width: 170px !important; height: 155px !important; }
/* Laptop Features */
.laptop-features { width: 745px !important; }
.laptop-monitor { left: 224px !important; }
/* Items */
.laptop-features .laptop-item-left-one { width: 120px !important; left: 5px !important; }
.laptop-features .laptop-item-left-two { width: 140px !important; left: 222px !important; }
.laptop-features .laptop-item-right-one { width: 120px !important; left: 400px !important; }
.laptop-features .laptop-item-right-two { width: 130px !important; left: 616px !important; top:70px !important; }
.laptop-features .laptop-item-right-three { width: 140px !important; left: 560px !important; top:230px !important; }
/* Feature v2 */
.feature-v2 .circle.first { left:95px !important; }
.feature-v2 .circle.second { left:345px !important; }
.feature-v2 .circle.third { left:590px !important; }
.feature-v2 .circle-text.first { left: 66px !important; }
.feature-v2 .circle-text.second { left: 315px !important; }
.feature-v2 .circle-text.third { left: 559px !important; }
/* Feature v3 */
.feature-v3 li { width: 160px !important; }
/* Feature v4 */
.feature-v4 .circle.first { left:100px !important; top:37px !important; }
.feature-v4 .circle.second { left:325px !important; top:37px !important; }
.feature-v4 .circle.third { left:550px !important; top:37px !important; }
.feature-v4 .circle-text.first { left: 70px !important; }
.feature-v4 .circle-text.second { left: 295px !important; }
.feature-v4 .circle-text.third { left: 520px !important; }
/* Feature v5 */
.feature-v5 .circle { width: 80px !important; height: 80px !important; }
.feature-v5 .circle.first { top:63px !important; left:26px !important; }
.feature-v5 .circle.second { top:63px !important; left:174px !important; }
.feature-v5 .circle.third { top:63px !important; left:330px !important; }
.feature-v5 .circle.fourth { top:63px !important; left:480px !important; }
.feature-v5 .circle.fifth { top:63px !important; left:642px !important; }
.feature-v5 .top-text-holder { margin-top: 13px !important; }
.feature-v5 .top-text-holder h2 { font-size: 15px !important; }
.feature-v5 .circle-text.first { top:155px !important; left: 0px !important; }
.feature-v5 .circle-text.second { top:155px !important; left: 150px !important; }
.feature-v5 .circle-text.third { top:155px !important; left: 300px !important; }
.feature-v5 .circle-text.fourth { top:155px !important; left: 450px !important; }
.feature-v5 .circle-text.fifth { top:155px !important; left: 608px !important; }
/* Feature v6 */
.feature-v6 li { width: 248px !important; }
/* Feature v8 */
.feature-v8 .circle { margin-left: 18px !important; }
.feature-v8 .item-holder.blue { left: 84px !important; top: 5px !important; }
.feature-v8 .item-holder.green { left: 234px !important; top: 5px !important; }
.feature-v8 .item-holder.purple { left: 382px !important; top: 5px !important; }
.feature-v8 .item-holder.orange { left: 530px !important; top: 5px !important; }
.feature-v8 .item-holder { width: 130px !important; }
/* Recent Posts */
.rp-item-holder { width: 172px !important; }
.rp-item-holder .rp-thumb, .rp-item-holder .rp-thumb img { width: 145px !important; height: 83px !important; }
/* Top Circles */
.rp-item-holder .top-circles .top-first-circle { left: 45px !important; }
.rp-item-holder .top-circles .top-second-circle { left: 42px !important; }
.rp-item-holder .top-circles .top-third-circle { left: 60px !important; }
.rp-item-holder .top-circles .top-fourth-circle { left: 55px !important; }
/* Bottom Circles */
.rp-item-holder .bottom-circles .bottom-first-circle { left: 75px !important; }
.rp-item-holder .bottom-circles .bottom-second-circle { left: 92px !important; }
.rp-item-holder .bottom-circles .bottom-third-circle { left: 87px !important; }
/* FAQ */
.faq-links-holder{ width:685px !important; margin-left: 9px; }
ol.faq-links { width:640px !important; }
ol.faq-links.right { float:left !important; }
.answer-content { width: 660px !important; }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* Portfolio */
/* 4 Columns */
.c4 { width: 420px !important; }
.c4 li { width: 210px !important; height: 179px !important; }
.c4 li img { width: 210px !important; height: 179px !important; }
.c4 article.da-animate i.fa { margin-top: 80px !important; }
.c4 article.da-animate h3 { margin-top: 30px !important; }
/* 3 Columns */
.c3 { width: 420px !important; }
.c3 li { width: 420px !important; height: 357px !important; }
.c3 li img { width: 420px !important; height: 357px !important; }
.c3 article.da-animate i.fa { margin-top: 170px !important; }
.c3 article.da-animate h3 { margin-top: 115px !important; }
/* 2 Columns */
.c2 { width: 420px !important; }
.c2 li { width: 420px !important; height: 357px !important; }
.c2 li img { width: 420px !important; height: 357px !important; }
.c2 article.da-animate i.fa { margin-top: 170px !important; }
.c2 article.da-animate h3 { margin-top: 115px !important; }
/* Portfolio Single Page */
.project-item-holder { height: auto !important; }
/* Related Project */
.related-projects { width:420px !important; }
.related-projects li { width: 418px !important; height: 356px !important; }
.related-projects li img { width: 418px !important; height: 356px !important; }
.related-projects.da-thumbs li article.da-animate i.fa { margin-top: 170px !important; }
.related-projects.da-thumbs li article.da-animate h3 { margin-top:112px !important; }
/* Slider */
.tp-caption.skin-box i.fa { width: 20px !important; height: 20px !important; font-size: 11px !important; }
.tp-caption.medium_light_black { font-size: 8px !important; padding:0px 0px !important; }
/* Style Swithcer */
#style_switcher { display: none; }
/* Header Logo */
header .five img { float: none !important; }
header .five { text-align: center; }
/* Top Promo Text */
.top-promo-text p, .slogan-holder p { padding:0 3px !important; }
/* Responsive Menu */
#mainNavigation ul { display: none; }
#mainNavigation select { display: block !important; }
/* Scroll Top */
#scrollUp { right:24px !important; }
/* Footer */
#footer-copyright ul.copyright-menu { float: left !important; margin-top:10px !important; }
#footer-copyright ul.copyright-menu li:first-child { padding-left: 0 !important; }
footer .four { margin:15px 0 !important; }
.footer-logo { padding-bottom:0px !important; }
/* Pricing Table v1 */
.pricing-v1-item { width: 416px !important; }
.pricing-v1-item.r-bottom { margin-top: 30px; }
.pricing-v1 { border-left: solid 1px #dddddd; }
/* Pricing Table v2 */
.pricing-v2 { border-left: solid 1px #dddddd; }
.pricing-v2 .first-header, .pricing-v2 .first-cta-button { border-left: none !important; }
.pricing-v2.first-table { margin-top: 0px !important; }
.pricing-v2-item { width: 416px !important; }
.pricing-v2-item.r-bottom { margin-top: 30px; }
/* Blog */
.view, .view .mask, .blog-article iframe { width: 420px !important; height: 173px !important; }
.zicer-effect:hover .mask { border:90px solid rgba(0,0,0,0.7) !important; }
.blog-article .post-content .post-data-details, .blog-article .post-content .post-excerpt { width: 360px !important; }
.post-navigation { width: 420px !important; }
.blog-article .slides { width: 420px !important; }
.post-navigation { margin:0 !important; padding-bottom: 40px; border-bottom:1px dotted #dfdfdf; }
.post-navigation ul.p-navigation { float: left !important; }
aside.sidebar { margin-top:0px !important; }
.reply-holder input[type="text"] { width: 80% !important; }
.reply-holder textarea { width: 90% !important; }
.searcw { width:380px !important; }
/* Comment Reply */
.reply-holder input[type="text"] { width:380px !important; }
.reply-holder input[type="text"].name { background: transparent url(../_images/user.png) no-repeat 390px 5px !important; }
.reply-holder input[type="text"].email { background: transparent url(../_images/envelope.png) no-repeat 390px 5px !important;; }
.reply-holder input[type="text"].website { background: transparent url(../_images/link.png) no-repeat 390px 5px !important;; }
.reply-holder textarea { width:388px !important; }
/* Breadcrumbs */
ul.breadcrumbs { float: left !important; margin-top: 8px !important; }
/* Contact */
.contact-texture-content { width: 420px !important; }
.contact-texture-text { margin-right: 55px !important; }
.contact-form-holder input[type="text"] { width: 380px !important; }
.contact-form-holder textarea { width: 388px !important; }
.contact-info-list { margin:20px 0 !important; }
.contact-form-holder input[type="text"]#name { background: transparent url(../_images/user.png) no-repeat 390px 7px !important; }
.contact-form-holder input[type="text"]#email { background: transparent url(../_images/envelope.png) no-repeat 390px 7px !important; }
.contact-form-holder input[type="text"]#subject { background: transparent url(../_images/subject.png) no-repeat 390px 7px !important; }
/* Client Map */
.client-map-title { left: 150px !important; }
.client-map-holder { width: 420px !important; height: 226px !important; background-size: 420px !important; }
/* Team Member - Social Networks */
.team-member .member-social { top:171px !important; left:100px !important; width: 200px !important; }
.team-member img { width: 220px !important; height: 200px !important; }
.team-member .member-holder { width: 220px; float: none; margin-left: 100px; }
/* Laptop Features */
.laptop-features { width: 418px !important; padding:40px 0 20px 0 !important; margin-left: 0px !important; }
.laptop-features img { display: none !important; }
.laptop-features p { margin-bottom: 20px !important; }
.laptop-monitor { display: none !important; }
/* Items */
.laptop-features .laptop-item-left-one, .laptop-features .laptop-item-left-two, .laptop-features .laptop-item-right-one,
.laptop-features .laptop-item-right-two, .laptop-features .laptop-item-right-three { width: 100% !important; position: relative !important; left: 0px !important; top:0px !important; }
/* Recent Posts */
.rp-item-holder { width: 420px !important; }
.rp-item-holder .rp-thumb, .rp-item-holder .rp-thumb img { width: 392px !important; height: 225px !important; }
/* Top Circles */
.rp-item-holder .top-circles .top-first-circle { left: 167px !important; }
.rp-item-holder .top-circles .top-second-circle { left: 164px !important; }
.rp-item-holder .top-circles .top-third-circle { left: 182px !important; }
.rp-item-holder .top-circles .top-fourth-circle { left: 178px !important; }
/* Bottom Circles */
.rp-item-holder .bottom-circles .bottom-first-circle { left: 198px !important; }
.rp-item-holder .bottom-circles .bottom-second-circle { left: 214px !important; }
.rp-item-holder .bottom-circles .bottom-third-circle { left: 209px !important; }
/* Feature v2 */
.feature-v2 { position: relative; float: left; }
.feature-v2 img { display: none; }
.feature-v2 .circle { position: relative !important; left:168px !important; top:0px !important; }
.feature-v2 .circle-text { position: relative !important; left:140px !important; top:10px !important; }
.feature-v2 .circle-item-first, .feature-v2 .circle-item-second, .feature-v2 .circle-item-third { float: left; width: 100%; padding: 30px 0; }
/* Feature v3 */
.feature-v3 li { width: 355px !important; margin-left: 0px !important; }
/* Feature v4 */
.feature-v4 { position: relative; float: left; }
.feature-v4 img { display: none; }
.feature-v4 .circle { position: relative !important; left:168px !important; top:0px !important; }
.feature-v4 .circle-text { position: relative !important; left:140px !important; top:10px !important; }
.feature-v4 .circle-item-first, .feature-v4 .circle-item-second, .feature-v4 .circle-item-third { float: left; width: 100%; padding: 30px 0; }
/* Feature v5 */
.feature-v5 img.scale-with-grid { display: none; }
.feature-v5 { position: relative !important; }
.feature-v5 .circle { position: relative !important; }
.feature-v5 .circle-item-holder { float: left; width: 100%; min-height: 210px; }
.feature-v5 .top-text-holder { margin-bottom: 20px !important; position: relative !important; }
.feature-v5 .circle { top:10px !important; left:170px !important; }
.feature-v5 .circle-text { top:20px !important; left: 140px !important; position: relative !important; }
/* Feature v6 */
.feature-v6 li { width: 100% !important; border-bottom: 1px dashed #dddddd !important; border-top: none !important; border-left: none !important; border-right: none !important; }
.feature-v6 li.last { border-bottom: none !important; }
/* Feature v7 */
.feature-v7 li { margin-bottom: 20px !important; }
.feature-v7 li .circle.first { right: 90px !important; top:262px !important; }
.feature-v7 li .circle.second { left: 90px !important; top:-28px !important; }
.feature-v7 li .circle.second i { transform:rotate(90deg) !important; -ms-transform:rotate(90deg) !important; -webkit-transform:rotate(90deg) !important; }
/* Feature v8 */
.feature-v8 img { display: none; }
.feature-v8 .item-holder { width: 100% !important; margin:30px 0 !important; left: auto !important; top: auto !important; position: relative !important; }
.feature-v8 .circle { margin-left: 166px !important; }
/* FAQ */
.faq-links-holder{ width:355px !important; margin-left: 2px; }
ol.faq-links { width:320px !important; }
ol.faq-links.right { float:left !important; }
.answer-content { width: 320px !important; }
/* Maint Title */
.separator-holder i.fa { left: 197px !important; padding:2px 6px; }
}
@media only screen and (max-width: 479px) {
/* Portfolio */
/* 4 Columns */
.port-filter li { float: left; }
.c4 { width: 300px !important; }
.c4 li { width: 300px !important; height: 255px !important; }
.c4 li img { width: 300px !important; height: 255px !important; }
.c4 article.da-animate i.fa { margin-top: 120px !important; }
.c4 article.da-animate h3 { margin-top: 65px !important; }
/* 3 Columns */
.c3 { width: 300px !important; }
.c3 li { width: 300px !important; height: 255px !important; }
.c3 li img { width: 300px !important; height: 255px !important; }
.c3 article.da-animate i.fa { margin-top: 115px !important; }
.c3 article.da-animate h3 { margin-top: 70px !important; }
/* 2 Columns */
.c2 { width: 300px !important; }
.c2 li { width: 300px !important; height: 255px !important; }
.c2 li img { width: 300px !important; height: 255px !important; }
.c2 article.da-animate i.fa { margin-top: 115px !important; }
.c2 article.da-animate h3 { margin-top: 70px !important; }
/* Portfolio Single Page */
.project-item-holder { height: auto !important; }
/* Related Project */
.related-projects { width:298px !important; }
.related-projects li { width: 298px !important; height: 254px !important; }
.related-projects li img { width: 298px !important; height: 254px !important; }
.related-projects.da-thumbs li article.da-animate i.fa { margin-top: 110px !important; }
.related-projects.da-thumbs li article.da-animate h3 { margin-top:75px !important; }
/* Style Swithcer */
#style_switcher { display: none; }
/* Header Logo */
header .five img { float: none !important; }
header .five { text-align: center; }
/* Responsive Menu */
#mainNavigation ul { display: none; }
#mainNavigation select { display: block !important; }
/* Twitter Feed */
ul.footer-twitter-list li { max-width: 275px !important; }
/* Scroll Top */
#scrollUp { display: none !important; }
/* Footer */
#footer-copyright ul.copyright-menu { float: left !important; margin-top:10px !important; }
#footer-copyright ul.copyright-menu li:first-child { padding-left: 0 !important; }
footer .four { margin:15px 0 !important; }
.footer-logo { padding-bottom:0px !important; }
/* Team Member - Social Networks */
.team-member .member-social { top:171px !important; left:40px !important; }
.team-member img { width: 220px !important; height: 200px !important; }
.team-member .member-holder { width: 220px; float: none; margin-left: 40px; }
/* Pricing Table v2 */
.pricing-v1-item { width: 300px !important; }
.pricing-v1-item.r-bottom { margin-top: 30px; }
.pricing-v1 { border-left: solid 1px #dddddd; }
/* Pricing Table v2 */
.pricing-v2 { border-left: solid 1px #dddddd; }
.pricing-v2 .first-header, .pricing-v2 .first-cta-button { border-left: none !important; }
.pricing-v2.first-table { margin-top: 0px !important; }
.pricing-v2-item { width: 300px !important; }
.pricing-v2-item.r-bottom { margin-top: 30px; }
/* Feature v3 */
.feature-v3 li { width: 237px !important; margin-left: 0px !important; }
/* Blog */
.view, .view .mask, .blog-article iframe { width: 300px !important; height: 124px !important; }
.zicer-effect:hover .mask { border:65px solid rgba(0,0,0,0.7) !important; }
.blog-article .post-content .post-data-details, .blog-article .post-content .post-excerpt { width: 240px !important; }
.post-navigation { width: 300px !important; }
.blog-article .slides { width: 300px !important; }
.post-navigation { margin:0 !important; padding-bottom: 40px; border-bottom:1px dotted #dfdfdf; }
.post-navigation ul.p-navigation { float: left !important; }
aside.sidebar { margin-top:0px !important; }
.reply-holder input[type="text"] { width: 97% !important; }
.reply-holder textarea { width: 95% !important; }
.searcw { width:260px !important; }
/* Comment Reply */
.reply-holder input[type="text"] { width:262px !important; }
.reply-holder input[type="text"].name { background: transparent url(../_images/user.png) no-repeat 273px 7px !important; }
.reply-holder input[type="text"].email { background: transparent url(../_images/envelope.png) no-repeat 273px 7px !important; }
.reply-holder input[type="text"].website { background: transparent url(../_images/link.png) no-repeat 273px 7px !important; }
.reply-holder textarea { width:270px !important; }
/* Breadcrumbs */
ul.breadcrumbs { float: left !important; margin-top: 8px !important; }
/* Contact */
.contact-texture-content { width: 300px !important; }
.contact-texture-text { margin-right: 0px !important; }
.contact-form-holder input[type="text"] { width: 260px !important; }
.contact-form-holder textarea { width: 268px !important; }
.contact-info-list { margin:20px 0 !important; }
.contact-form-holder input[type="text"]#name { background: transparent url(../_images/user.png) no-repeat 390px 7px !important; }
.contact-form-holder input[type="text"]#email { background: transparent url(../_images/envelope.png) no-repeat 390px 7px !important; }
.contact-form-holder input[type="text"]#subject { background: transparent url(../_images/subject.png) no-repeat 390px 7px !important; }
/* Client Map */
.client-map-title { left: 80px !important; }
.client-map-holder { width: 300px !important; height: 161px !important; background-size: 300px !important; }
/* Team Member - Social Networks */
.team-member .member-social { top:171px !important; left:40px !important; }
.team-member img { width: 220px !important; height: 200px !important; }
.team-member .member-holder { width: 220px; float: none; margin-left: 40px; }
/* Laptop Features */
.laptop-features { width: 300px !important; padding:40px 0 20px 0 !important; margin-left: 0px !important; }
.laptop-features img { display: none !important; }
.laptop-features p { margin-bottom: 20px !important; }
.laptop-monitor { display: none !important; }
/* Items */
.laptop-features .laptop-item-left-one, .laptop-features .laptop-item-left-two, .laptop-features .laptop-item-right-one,
.laptop-features .laptop-item-right-two, .laptop-features .laptop-item-right-three { width: 100% !important; position: relative !important; left: 0px !important; top:0px !important; }
/* Slider */
.tp-caption.skin-box i.fa { width: 20px !important; height: 20px !important; font-size: 11px !important; }
.tp-caption.medium_light_black { font-size: 8px !important; padding:0px 0px !important; }
/* Recent Posts */
.rp-item-holder { width: 300px !important; }
.rp-item-holder .rp-thumb, .rp-item-holder .rp-thumb img { width: 272px !important; height: 156px !important; }
/* Top Circles */
.rp-item-holder .top-circles .top-first-circle { left: 108px !important; }
.rp-item-holder .top-circles .top-second-circle { left: 105px !important; }
.rp-item-holder .top-circles .top-third-circle { left: 123px !important; }
.rp-item-holder .top-circles .top-fourth-circle { left: 118px !important; }
/* Bottom Circles */
.rp-item-holder .bottom-circles .bottom-first-circle { left: 138px !important; }
.rp-item-holder .bottom-circles .bottom-second-circle { left: 155px !important; }
.rp-item-holder .bottom-circles .bottom-third-circle { left: 150px !important; }
/* Feature v2 */
.feature-v2 { position: relative; float: left; }
.feature-v2 img { display: none; }
.feature-v2 .circle { position: relative !important; left:107px !important; top:0px !important; }
.feature-v2 .circle-text { position: relative !important; left:77px !important; top:10px !important; }
.feature-v2 .circle-item-first, .feature-v2 .circle-item-second, .feature-v2 .circle-item-third { float: left; width: 100%; padding: 30px 0; }
/* Feature v4 */
.feature-v4 { position: relative; float: left; }
.feature-v4 img { display: none; }
.feature-v4 .circle { position: relative !important; left:107px !important; top:0px !important; }
.feature-v4 .circle-text { position: relative !important; left:77px !important; top:10px !important; }
.feature-v4 .circle-item-first, .feature-v4 .circle-item-second, .feature-v4 .circle-item-third { float: left; width: 100%; padding: 30px 0; }
/* Feature v5 */
.feature-v5 img.scale-with-grid { display: none; }
.feature-v5 { position: relative !important; }
.feature-v5 .circle { position: relative !important; }
.feature-v5 .circle-item-holder { float: left; width: 100%; min-height: 210px; }
.feature-v5 .top-text-holder { margin-bottom: 20px !important; position: relative !important; }
.feature-v5 .circle { top:10px !important; left:120px !important; }
.feature-v5 .circle-text { top:20px !important; left: 90px !important; position: relative !important; }
/* Feature v6 */
.feature-v6 li { width: 100% !important; border-bottom: 1px dashed #dddddd !important; border-top: none !important; border-left: none !important; border-right: none !important; }
.feature-v6 li.last { border-bottom: none !important; }
/* Feature v7 */
.feature-v7 li { margin-bottom: 20px !important; }
.feature-v7 li .circle.first { right: 90px !important; top:262px !important; }
.feature-v7 li .circle.second { left: 90px !important; top:-28px !important; }
.feature-v7 li .circle.second i { transform:rotate(90deg) !important; -ms-transform:rotate(90deg) !important; -webkit-transform:rotate(90deg) !important; }
/* Feature v8 */
.feature-v8 img { display: none; }
.feature-v8 .item-holder { width: 100% !important; margin:30px 0 !important; left: auto !important; top: auto !important; position: relative !important; }
.feature-v8 .circle { margin-left: 105px !important; }
/* FAQ */
.faq-links-holder{ width:236px !important; margin-left: 2px; }
ol.faq-links { width:200px !important; }
ol.faq-links.right { float:left !important; }
.answer-content { width: 205px !important; }
/* Maint Title */
.separator-holder i.fa { left: 137px !important; padding:2px 6px; }
}
/* #Font-Face
================================================== */
/* This is the proper syntax for an @font-face file
Just create a "fonts" folder at the root,
copy your FontName into code below and remove
comment brackets */
/* @font-face {
font-family: 'FontName';
src: url('../fonts/FontName.eot');
src: url('../fonts/FontName.eot?iefix') format('eot'),
url('../fonts/FontName.woff') format('woff'),
url('../fonts/FontName.ttf') format('truetype'),
url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
font-weight: normal;
font-style: normal; }
*/
@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2){
footer { background: transparent url(../_images/patterns/binding_dark%402X.png) repeat !important; }
.texture-section{ background: transparent url(../_images/patterns/groovepaper%402X.png) repeat !important; }
.view a.info.link { background:url(../_images/link-overlay%402x.png) center no-repeat !important; }
.view a.info.zoom { background:url(../_images/zoom-overlay%402x.png) center no-repeat !important; }
.reply-holder input[type="text"].name { background: transparent url(../_images/user%402x.png) no-repeat 250px 7px !important; }
.reply-holder input[type="text"].email { background: transparent url(../_images/envelope%402x.png) no-repeat 250px 7px !important; }
.reply-holder input[type="text"].website { background: transparent url(../_images/link%402x.png) no-repeat 250px 7px !important; }
.contact-form-holder input[type="text"]#name { background: transparent url(../_images/user%402x.png) no-repeat 310px 7px !important; }
.contact-form-holder input[type="text"]#email { background: transparent url(../_images/envelope%402x.png) no-repeat 310px 7px !important; }
.contact-form-holder input[type="text"]#subject { background: transparent url(../_images/subject%402x.png) no-repeat 310px 7px !important; }
.pricing-v3 { background:url(../_images/patterns/groovepaper2x.html) repeat !important; }
.laptop-monitor.images ul.monitor-slide li { background: transparent url(../_images/zoom-overlay%402x.png) center center no-repeat !important; }
.small-callout { background: transparent url(../_images/small-callout-arrows2x.html) no-repeat !important; }
.project-basic-info { background:#fff url(../_images/patterns/groovepaper2x.html) repeat !important; }
.faq-links-holder { background:transparent url(../_images/patterns/groovepaper2x.html) repeat !important; }
.rp-item-holder .rp-content { box-shadow: 0 0 3px #d6d6d6; background:#fff url(../_images/patterns/groovepaper2x.html) repeat !important; }
.answer-content { background-image:url(../_images/crafted-arrow-right%402x.png) !important; }
.client-map-holder { background: url(../_images/client-world-map%402x.png) no-repeat !important; }
}
/* #Base 960 Grid
================================================== */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
.container .one.column,
.container .one.columns { width: 40px; }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 940px; }
.container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; }
/* Offsets */
.container .offset-by-one { padding-left: 60px; }
.container .offset-by-two { padding-left: 120px; }
.container .offset-by-three { padding-left: 180px; }
.container .offset-by-four { padding-left: 240px; }
.container .offset-by-five { padding-left: 300px; }
.container .offset-by-six { padding-left: 360px; }
.container .offset-by-seven { padding-left: 420px; }
.container .offset-by-eight { padding-left: 480px; }
.container .offset-by-nine { padding-left: 540px; }
.container .offset-by-ten { padding-left: 600px; }
.container .offset-by-eleven { padding-left: 660px; }
.container .offset-by-twelve { padding-left: 720px; }
.container .offset-by-thirteen { padding-left: 780px; }
.container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; }
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width: 768px; }
.container .column,
.container .columns { margin-left: 10px; margin-right: 10px; }
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
.alpha.omega { margin-left: 0; margin-right: 0; }
.container .one.column,
.container .one.columns { width: 28px; }
.container .two.columns { width: 76px; }
.container .three.columns { width: 124px; }
.container .four.columns { width: 172px; }
.container .five.columns { width: 220px; }
.container .six.columns { width: 268px; }
.container .seven.columns { width: 316px; }
.container .eight.columns { width: 364px; }
.container .nine.columns { width: 412px; }
.container .ten.columns { width: 460px; }
.container .eleven.columns { width: 508px; }
.container .twelve.columns { width: 556px; }
.container .thirteen.columns { width: 604px; }
.container .fourteen.columns { width: 652px; }
.container .fifteen.columns { width: 700px; }
.container .sixteen.columns { width: 748px; }
.container .one-third.column { width: 236px; }
.container .two-thirds.column { width: 492px; }
/* Offsets */
.container .offset-by-one { padding-left: 48px; }
.container .offset-by-two { padding-left: 96px; }
.container .offset-by-three { padding-left: 144px; }
.container .offset-by-four { padding-left: 192px; }
.container .offset-by-five { padding-left: 240px; }
.container .offset-by-six { padding-left: 288px; }
.container .offset-by-seven { padding-left: 336px; }
.container .offset-by-eight { padding-left: 384px; }
.container .offset-by-nine { padding-left: 432px; }
.container .offset-by-ten { padding-left: 480px; }
.container .offset-by-eleven { padding-left: 528px; }
.container .offset-by-twelve { padding-left: 576px; }
.container .offset-by-thirteen { padding-left: 624px; }
.container .offset-by-fourteen { padding-left: 672px; }
.container .offset-by-fifteen { padding-left: 720px; }
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.container { width: 300px; }
.container .columns,
.container .column { margin: 0; }
.container .one.column,
.container .one.columns,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 300px; }
/* Offsets */
.container .offset-by-one,
.container .offset-by-two,
.container .offset-by-three,
.container .offset-by-four,
.container .offset-by-five,
.container .offset-by-six,
.container .offset-by-seven,
.container .offset-by-eight,
.container .offset-by-nine,
.container .offset-by-ten,
.container .offset-by-eleven,
.container .offset-by-twelve,
.container .offset-by-thirteen,
.container .offset-by-fourteen,
.container .offset-by-fifteen { padding-left: 0; }
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
.container .columns,
.container .column { margin: 0; }
.container .one.column,
.container .one.columns,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 420px; }
}
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
zoom: 1; }
/* You can also use a
to clear columns */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/*---------- COLOR ATTRIBUTE ----------*/
a:hover, .top-promo-text h1, h2.title, h2.title2, .accordions h2.active i.fa, .ui-tabs .ui-tabs-nav li.ui-tabs-active a,
ul.from-blog li span, .nice-carousel .carousel-item-title, .team-member .member-name,.slogan-holder h1,
.feature-v1 h3, .dropcap-v1 p:first-letter, .fa-ul i.colored, .tweet_list a, .c2 li a, .c3 li a, .c4 li a, .prev-next-holder a,
.project-detail ul i.fa,.sf-menu li.current > a, .sf-menu li:hover > a, .faq-title, .comments-holder a,
.blog-article .post-content .post-data li a:hover, .blog-article .post-content .post-data li i.fa:hover,
.icon-first i.fa, .feature-v1-icon, .rp-item-holder h2, .feature-v3 li i.fa, ul.breadcrumbs li a:hover,
ol.faq-links li, .answer-content p.answer { color:#289dcc; }
footer a:hover, h2.title-widget, .accordions h2.active, .feature-v1-link a:hover { color:#289dcc !important; }
/*---------- BACKGROUND COLOR ATTRIBUTE ----------*/
.jcarousel-next:hover,.jcarousel-prev:hover, .btn-standard, button.btn-standard, input[type="submit"].btn-standard,
ul.p-navigation li.current, .filter li.current a, .sf-menu ul li.current > a, .sf-menu ul li:hover > a,
.footer-twitter, ul.social-list li a, #scrollUp:hover, .rp-img-holder .rp-detail-box.middle, .port-filter li.current a,
.port-filter li a:hover, .question-num-content, .blog-article:hover .blog-separator-holder .blog-separator-circle,
.skin-box { background-color:#289dcc; }
/*---------- SELECTION AND SCROLL ----------*/
::selection { background: #289dcc; }
::-moz-selection { background: #289dcc; }
::-webkit-selection { background: #289dcc; }
/*---------- BORDER ATTRIBUTE ----------*/
blockquote.bq { border-left: 1px solid #289dcc; }
.filter li.current a, .port-filter li.current a { border:1px solid #289dcc; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active a { border-top: 1px solid #289dcc; }
.project-panel { border-left: 2px solid #289dcc; }
.answer-number .arrow-down { border-top: 10px solid #289dcc; }
.contact-form-label{
float: left;
position: relative;
width: 250px;
}
.clearboth{
clear: both;
}
.contact-form-error{
clear:right;
color: #ff0000;
}
/* ------------------------------------------------------------------------
BOXED VERSION
* ---------------------------------------------------------------------- */
body{ background:#acacac url('http://www.dwebsite.nl/demos/4/media/image/id/60') no-repeat center center !important; background-size: cover !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; background-attachment: fixed !important; }
#wrapoverall{ margin:0 auto -20px auto; height: 100%; max-width:1024px; width:100%; box-shadow:0 0 4px #444; border:3px solid rgba(255,255,255, 0.2); border-radius:2px; }
header { border-top: none; }
/* STICKY HEADER */
.sticky-header { width: 1024px !important; border-top:1px solid rgba(255,255,255, 0.2) !important; }
/* ------------------------------------------------------------------------
MEDIA SCREEN FOR BOXED VERSION
* ---------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 959px) {
#wrapoverall{ max-width:775px; width:100%; border: none; }
.sticky-header { max-width: 775px; }
}
@media only screen and (max-width: 767px) {
#wrapoverall{ max-width:445px; width:100%; border: none; }
}
@media only screen and (max-width: 479px) {
#wrapoverall{ max-width:325px; width:100%; border: none;}
}
/* END BOXED VERSION */