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/5/_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/5/_framework/adodb5/drivers/adodb-mysql.inc.php:443) in /home/dwebsite/public_html/demos/5/_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; }