Trước đây mình cũng đã có 1 bài hướng dẫn các bạn tạo Slider và mình cũng đã giới thiệu qua về slider và những lợi ích mà nó mang lại.
Giới thiệu lại 1 chút: Slide ảnh giúp blog của bạn trông đẹp hơn và PRO hơn, Còn 1 điều nữa mình cũng muốn nói với các bạn là khi bạn có 1 website đẹp và bố cục rõ ràng thì tất nhiên khi khách vào xem họ xẽ cảm thấy rễ ràng hơn, và cản thấy thích thú hơn. Ở bài viết này mình xẽ Hướng dẫn tạo Slider ảnh chuyên nghiệp với nhiều hiệu ứng chữ
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Thêm đoạn code sau vào trước thẻ </head>
<!-- START REVOLUTION SLIDER 4.6.0 fullwidth mode -->
<style type='text/css'>
/*-----------------------------------------------------------------------------
- Revolution Slider 4.1 Captions -
Screen Stylesheet
version: 1.4.5
date: 27/11/13
author: themepunch
email: info@themepunch.com
website: http://www.themepunch.com
-----------------------------------------------------------------------------*/
/*************************
- CAPTIONS -
**************************/
.tp-hide-revslider,.tp-caption.tp-hidden-caption { visibility:hidden !important; display:none !important;}
.tp-caption { z-index:1;}
.tp-caption-demo .tp-caption { position:relative !important; display:inline-block; margin-bottom:10px; margin-right:20px !important;}
.tp-caption.bigtext {
position:absolute;
font-family: 'Roboto', sans-serif;
color:#fff;
font-size: 60px;
font-weight: 100;
text-transform: uppercase;
border: 1px solid #fff;
padding: 30px 20px 28px 20px;
}
.tp-caption.bigtext strong {
color:#fc4242;
font-weight: 100;
}
.tp-caption.smalltext {
position:absolute;
font-family: 'Roboto', sans-serif;
color:#fff;
font-size: 16px;
font-weight: normal;
text-align: center;
line-height: 25px;
}
.tp-caption.slider_but1 a {
position:absolute;
font-family: 'Roboto', sans-serif;
color:#fff;
font-size: 16px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
background-color: #fc4242;
padding: 12px 25px;
margin-left: -155px;
}
.tp-caption.slider_but1 a:hover {
color:#727272;
background-color: #fff;
}
.tp-caption.slider_but2 a {
position:absolute;
font-family: 'Roboto', sans-serif;
color:#727272;
font-size: 16px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
background-color: #fff;
padding: 12px 25px;
margin-left: 10px;
}
.tp-caption.slider_but2 a:hover {
color:#fff;
background-color: #fc4242;
}
.tp-caption.medium_grey {
position:absolute;
color:#fff;
text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5);
font-weight:700;
font-size:20px;
line-height:20px;
font-family:Arial;
padding:2px 4px;
margin:0px;
border-width:0px;
border-style:none;
background-color:#888;
white-space:nowrap;
}
.tp-caption.small_text {
position:absolute;
color:#fff;
font-weight:normal;
font-size:20px;
line-height:20px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.medium_text {
position:absolute;
color:#fff;
text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5);
font-weight:700;
font-size:20px;
line-height:20px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
/*slide2*/
.tp-caption.large_bold_white_25 {
font-size:40px;
line-height:65px;
font-weight:800;
font-family: 'Roboto', sans-serif;
color:#fff;
text-decoration:none;
background-color:transparent;
text-align:center;
border-width:0px;
border-style:none;
text-transform:uppercase;
}
.tp-caption.small_text02 {
position:absolute;
color:#fff;
font-weight:normal;
font-size:14px;
line-height:20px;
font-family:"Open Sans";
text-align:left;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.slider_but3 {
background-color: #fc4242;
padding: 12px 25px;
margin-left: 10px;
}
.tp-caption.slider_but3:hover{
color:#727272;
background-color: #fff;
}
.tp-caption.slider_but3:hover i{
color:#272727;
}
.tp-caption.slider_but3:hover b{
color:#727272;
}
.tp-caption.slider_but3:hover strong{
color:#727272;
}
.tp-caption.slider_but3 i {
color: #fff;
float: left;
font-size: 35px;
margin-right: 8px;
}
.tp-caption.slider_but3 b {
float: left;
color: #fff;
font-size: 12px;
font-weight: normal;
text-transform: none;
margin-top: -5px;
padding: 0px;
text-align: left;
}
.tp-caption.slider_but3 b strong {
margin-top: -5px;
font-size: 16px;
color: #fff;
text-transform: uppercase;
font-weight: 400;
display: block;
}
.tp-caption.slider_but4 {
background-color: #fff;
padding: 12px 25px;
margin-left: 20px;
}
.tp-caption.slider_but4 i {
color: #272727;
float: left;
font-size: 35px;
margin-right: 8px;
}
.tp-caption.slider_but4 b {
float: left;
color: #727272;
font-size: 12px;
font-weight: normal;
text-transform: none;
margin-top: -5px;
padding: 0px;
text-align: left;
}
.tp-caption.slider_but4 b strong {
margin-top: -5px;
font-size: 16px;
color: #727272;
text-transform: uppercase;
font-weight: 400;
display: block;
}
.tp-caption.slider_but4:hover{
color:#fff;
background-color: #fc4242;
}
.tp-caption.slider_but4:hover i{
color:#fff;
}
.tp-caption.slider_but4:hover b{
color:#fff;
}
.tp-caption.slider_but4:hover strong{
color:#fff;
}
/*end slide2*/
/*slider 3*/
.tp-caption.large_bold_white_3 {
font-size:50px;
line-height:65px;
font-weight:100;
font-family: 'Roboto', sans-serif;
color:#272727;
text-decoration:none;
text-align:center;
text-transform:uppercase;
padding:0px 20px 0px 20px;
background-color:#fff;
}
.tp-caption.small_bold_white {
font-size:30px;
line-height:65px;
font-weight:200;
font-family: 'Roboto', sans-serif;
color:#272727;
text-decoration:none;
text-align:center;
padding:0px 20px 0px 20px;
text-transform:uppercase;
background-color:#fff;
}
.tp-caption.slider_but5 a {
position:absolute;
color:#727272;
font-size: 16px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
background-color: #fff;
padding: 12px 25px;
margin-left: -155px;
}
.tp-caption.slider_but5 a:hover {
color:#fff;
background-color: #fc4242;
}
/*end slider 3*/
/*slider 4*/
.tp-caption.small_text03 {
position:absolute;
color:#fff;
font-weight:normal;
font-size:14px;
line-height:20px;
text-align:left;
margin:0px;
border-width:0px;
padding:20px 0px 20px 0px;
border-top:1px solid #6a7374;
border-bottom:1px solid #6a7374;
}
.tp-caption.slider_but6 a {
position:absolute;
color:#fff;
font-size: 16px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
background-color: #fc4242;
padding: 12px 25px;
margin-left: -155px;
border-radius:4px;
}
.tp-caption.slider_but6 a:hover {
color:#727272;
background-color: #fff;
}
.tp-caption.slider_but7 a {
position:absolute;
color:#727272;
font-size: 16px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
background-color: #fff;
padding: 12px 25px;
margin-left: 10px;
border-radius:4px;
}
.tp-caption.slider_but7 a:hover {
color:#fff;
background-color: #fc4242;
}
/*end slider 4*/
/* slider 5*/
.tp-caption.bigtext02 {
position:absolute;
font-family: 'Roboto', sans-serif;
color:#fff;
font-size: 50px;
font-weight: 500;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
}
.tp-caption.bigtext03 {
position:absolute;
font-family: 'Roboto', sans-serif;
color:#fff;
font-size: 50px;
font-weight: 100;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
}
/*end slider 5*/
/* slider 6*/
.tp-caption.bigtext04 {
position:absolute;
font-family: 'Roboto', sans-serif;
color:#fff;
font-size: 50px;
font-weight: 600;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
}
.tp-caption.small_text04{
position:absolute;
color:#fff;
font-weight:normal;
font-size:20px;
line-height:20px;
text-align:center;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.slider_but8 a {
position:absolute;
color:#fff;
font-size: 16px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
padding: 12px 25px;
border:3px solid #fff;
}
.tp-caption.slider_but8 a:hover {
color:#727272;
background-color: #fff;
}
/*end slider 6*/
/*slide 7*/
.tp-caption.bigtext_bold {
position:absolute;
font-family: 'Roboto', sans-serif;
color:#fff;
font-size: 50px;
font-weight: 700;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
}
.tp-caption.bigtext_bold02 {
position:absolute;
font-family: 'Roboto', sans-serif;
color:#fff;
font-size: 50px;
font-weight: 400;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
}
.tp-caption.bigtext_extrathin {
position:absolute;
font-family: 'Roboto', sans-serif;
color:#fff;
font-size: 50px;
font-weight: 100;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
}
/*end slide 7*/
/* slide 8*/
.tp-caption.circle1 {
position:absolute;
width:124px;
height:124px;
border-radius:50%;
text-align:center;
padding: 0px 0px 0px 0px;
border:2px solid #fff;
line-height:148px;
}
.tp-caption.circle1 i {
color:#fff;
line-height:70px;
}
.tp-caption.small_divider {
position:absolute;
width:1px;
height:120px;
background-color:#f5d6c4;
padding: 0px 0px 0px 0px;
}
/*end slide 8*/
/*slide 10*/
.tp-caption.bigtext_bold3 {
position:absolute;
font-family: 'Roboto', sans-serif;
color:#fc4242;
font-size: 50px;
font-weight: 700;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
}
.tp-caption.bigtext_bold04 {
position:absolute;
font-family: 'Roboto', sans-serif;
color:#272727;
font-size: 50px;
font-weight: 400;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
}
.tp-caption.bigtext_extrathin2 {
position:absolute;
font-family: 'Roboto', sans-serif;
color:#727272;
font-size: 50px;
font-weight: 200;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
}
.tp-caption.small_text05{
position:absolute;
color:#727272;
font-weight:normal;
font-size:14px;
line-height:23px;
text-align:left;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
padding:20px 0px 20px 0px;
border-top:1px solid #d8d8d8;
border-bottom:1px solid #d8d8d8;
}
.tp-caption.slider_but9 a {
position:absolute;
color:#fff;
font-size: 16px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
background-color: #fc4242;
padding: 12px 25px;
}
.tp-caption.slider_but9 a:hover {
color:#fff;
background-color: #727272;
}
.tp-caption.slider_but10 a {
position:absolute;
color:#727272;
font-size: 16px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
background-color: #fff;
padding: 10px 25px;
margin-left: 10px;
border:2px solid #727272;
}
.tp-caption.slider_but10 a:hover {
color:#fff;
background-color: #fc4242;
border:2px solid #fc4242;
}
/*end slide 10*/
/*slide 11*/
.tp-caption.large_white {
font-size:50px;
line-height:65px;
font-weight:100;
font-family: 'Roboto', sans-serif;
color:#fc4242;
text-decoration:none;
text-align:center;
text-transform:uppercase;
padding:0px 20px 0px 20px;
background-color:#fff;
}
.tp-caption.large_black {
font-size:30px;
line-height:65px;
font-weight:200;
font-family: 'Roboto', sans-serif;
color:#fff;
text-decoration:none;
text-align:center;
padding:0px 20px 0px 20px;
text-transform:uppercase;
background-color:#000;
}
.tp-caption.slider_but11 a {
position:absolute;
color:#fff;
font-size: 16px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
background:rgba(0,0,0,0.5);
padding: 12px 25px;
border:2px solid #000;
}
.tp-caption.slider_but11 a:hover {
color:#000;
background-color: #fff;
}
.tp-caption.slider_but12 a {
position:absolute;
color:#000;
font-size: 16px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
background:rgba(255,255,255,0.6);
padding: 12px 25px;
border:2px solid #fc4242;
}
.tp-caption.slider_but12 a:hover {
color:#000;
background-color: #fff;
}
/*end slide 11*/
/*slide 12*/
.tp-caption.bigtext_thin {
position:absolute;
font-family: 'Roboto', sans-serif;
color:#fff;
font-size: 50px;
font-weight: 500;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
}
.tp-caption.bigtext_bold4 {
position:absolute;
font-family: 'Roboto', sans-serif;
color:#fff;
font-size: 50px;
font-weight: 700;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
}
.tp-caption.small_text2 {
position:absolute;
font-family: 'Roboto', sans-serif;
color:#fff;
font-size: 22px;
font-weight: 300;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
}
/*end slide 12*/
/*slide 13*/
.tp-caption.circle_small {
position:absolute;
width:38px;
height:38px;
border-radius:50%;
text-align:center;
padding: 0px 0px 0px 0px;
border:2px solid #fff;
line-height:37px;
}
.tp-caption.circle_small i {
color:#fff;
}
.tp-caption.medium_text2 {
position:absolute;
color:#fff;
font-size: 36px;
font-weight: 500;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
}
/*end slide 13*/
.tp-caption.medium_text_shadow {
font-size:25px;
line-height:25px;
font-weight:600;
font-family:"Open Sans";
color:#fff;
text-decoration:none;
background-color:transparent;
text-align:center;
text-shadow:#000 0px 5px 10px;
border-width:0px;
border-color:rgb(255, 255, 255);
border-style:none;
}
.tp-caption.large_text {
position:absolute;
color:#fff;
text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5);
font-weight:700;
font-size:40px;
line-height:40px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.very_large_text {
position:absolute;
color:#fff;
text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5);
font-weight:700;
font-size:60px;
line-height:60px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
letter-spacing:-2px;
}
.tp-caption.very_big_white {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:800;
font-size:60px;
line-height:60px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
padding:0px 4px;
padding-top:1px;
background-color:#000;
}
.tp-caption.very_big_black {
position:absolute;
color:#000;
text-shadow:none;
font-weight:700;
font-size:60px;
line-height:60px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
padding:0px 4px;
padding-top:1px;
background-color:#fff;
}
.tp-caption.modern_medium_fat {
position:absolute;
color:#000;
text-shadow:none;
font-weight:800;
font-size:24px;
line-height:20px;
font-family:"Open Sans", sans-serif;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.modern_medium_fat_white {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:800;
font-size:24px;
line-height:20px;
font-family:"Open Sans", sans-serif;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.modern_medium_light {
position:absolute;
color:#000;
text-shadow:none;
font-weight:300;
font-size:24px;
line-height:20px;
font-family:"Open Sans", sans-serif;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.modern_big_bluebg {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:800;
font-size:30px;
line-height:36px;
font-family:"Open Sans", sans-serif;
padding:3px 10px;
margin:0px;
border-width:0px;
border-style:none;
background-color:#4e5b6c;
letter-spacing:0;
}
.tp-caption.modern_big_redbg {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:300;
font-size:30px;
line-height:36px;
font-family:"Open Sans", sans-serif;
padding:3px 10px;
padding-top:1px;
margin:0px;
border-width:0px;
border-style:none;
background-color:#de543e;
letter-spacing:0;
}
.tp-caption.modern_small_text_dark {
position:absolute;
color:#555;
text-shadow:none;
font-size:14px;
line-height:22px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.boxshadow {
-moz-box-shadow:0px 0px 20px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:0px 0px 20px rgba(0, 0, 0, 0.5);
box-shadow:0px 0px 20px rgba(0, 0, 0, 0.5);
}
.tp-caption.black {
color:#000;
text-shadow:none;
}
.tp-caption.noshadow {
text-shadow:none;
}
/*.tp-caption a {
color:#ff7302;
text-shadow:none;
-webkit-transition:all 0.2s ease-out;
-moz-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
-ms-transition:all 0.2s ease-out;
}
.tp-caption a:hover {
color:#ffa902;
}*/
.tp-caption.thinheadline_dark {
position:absolute;
color:rgba(0,0,0,0.85);
text-shadow:none;
font-weight:300;
font-size:30px;
line-height:30px;
font-family:"Open Sans";
background-color:transparent;
}
.tp-caption.thintext_dark {
position:absolute;
color:rgba(0,0,0,0.85);
text-shadow:none;
font-weight:300;
font-size:16px;
line-height:26px;
font-family:"Open Sans";
background-color:transparent;
}
.tp-caption.medium_bg_red a {
color: #fff;
text-decoration: none;
}
.tp-caption.medium_bg_red a:hover {
color: #fff;
text-decoration: underline;
}
.tp-caption.smoothcircle {
font-size:30px;
line-height:75px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(0, 0, 0);
background-color:rgba(0, 0, 0, 0.498039);
padding:50px 25px;
text-align:center;
border-radius:500px 500px 500px 500px;
border-width:0px;
border-color:rgb(0, 0, 0);
border-style:none;
}
.tp-caption.largeblackbg {
font-size:50px;
line-height:70px;
font-weight:300;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(0, 0, 0);
padding:0px 20px 5px;
text-shadow:none;
border-width:0px;
border-color:rgb(255, 255, 255);
border-style:none;
}
.tp-caption.largepinkbg {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:300;
font-size:50px;
line-height:70px;
font-family:"Open Sans";
background-color:#db4360;
padding:0px 20px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.tp-caption.largewhitebg {
position:absolute;
color:#000;
text-shadow:none;
font-weight:300;
font-size:50px;
line-height:70px;
font-family:"Open Sans";
background-color:#fff;
padding:0px 20px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.tp-caption.largegreenbg {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:300;
font-size:50px;
line-height:70px;
font-family:"Open Sans";
background-color:#67ae73;
padding:0px 20px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.tp-caption.excerpt {
font-size:36px;
line-height:36px;
font-weight:700;
font-family:Arial;
color:#ffffff;
text-decoration:none;
background-color:rgba(0, 0, 0, 1);
text-shadow:none;
margin:0px;
letter-spacing:-1.5px;
padding:1px 4px 0px 4px;
width:150px;
white-space:normal !important;
height:auto;
border-width:0px;
border-color:rgb(255, 255, 255);
border-style:none;
}
.tp-caption.large_bold_grey {
font-size:60px;
line-height:60px;
font-weight:800;
font-family:"Open Sans";
color:rgb(102, 102, 102);
text-decoration:none;
background-color:transparent;
text-shadow:none;
margin:0px;
padding:1px 4px 0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_thin_grey {
font-size:34px;
line-height:30px;
font-weight:300;
font-family:"Open Sans";
color:rgb(102, 102, 102);
text-decoration:none;
background-color:transparent;
padding:1px 4px 0px;
text-shadow:none;
margin:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.small_thin_grey {
font-size:18px;
line-height:26px;
font-weight:300;
font-family:"Open Sans";
color:rgb(117, 117, 117);
text-decoration:none;
background-color:transparent;
padding:1px 4px 0px;
text-shadow:none;
margin:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.lightgrey_divider {
text-decoration:none;
background-color: #c7dce1;
width:590px;
height:1px;
background-position:initial initial;
background-repeat:initial initial;
border-width:0px;
border-style:none;
}
.tp-caption.circle_01 {
color: #fff;
font-size: 27px;
width: 58px;
height: 58px;
border-radius: 100%;
text-align: center;
vertical-align: middle;
line-height: 58px;
background-color: #7ebbb6;
}
.tp-caption.small_circle {
text-decoration:none;
background-color: #c7dce1;
width:10px;
height:10px;
background-position:initial initial;
background-repeat:initial initial;
border-width:0px;
border-style:none;
border-radius: 100%;
}
.tp-caption.large_bold_darkblue {
font-size:58px;
line-height:60px;
font-weight:800;
font-family:"Open Sans";
color:rgb(52, 73, 94);
text-decoration:none;
background-color:transparent;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bg_darkblue {
font-size:20px;
line-height:20px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(52, 73, 94);
padding:10px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bold_red {
font-size:24px;
line-height:30px;
font-weight:800;
font-family:"Open Sans";
color:rgb(227, 58, 12);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_light_red {
font-size:21px;
line-height:26px;
font-weight:300;
font-family:"Open Sans";
color:rgb(227, 58, 12);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bg_red {
font-size:20px;
line-height:20px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(227, 58, 12);
padding:10px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bold_orange {
font-size:24px;
line-height:30px;
font-weight:800;
font-family:"Open Sans";
color:rgb(243, 156, 18);
text-decoration:none;
background-color:transparent;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bg_orange {
font-size:20px;
line-height:20px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(243, 156, 18);
padding:10px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.grassfloor {
text-decoration:none;
background-color:rgba(160, 179, 151, 1);
width:4000px;
height:150px;
border-width:0px;
border-color:rgb(34, 34, 34);
border-style:none;
}
.tp-caption.large_bold_white {
font-size:58px;
line-height:60px;
font-weight: bold;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:transparent;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
text-transform: uppercase;
}
.tp-caption.medium_light_white {
font-size:22px;
line-height:36px;
font-weight:300;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
text-transform: uppercase;
}
.tp-caption.mediumlarge_light_white {
font-size:40px;
line-height:40px;
font-weight:300;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
text-transform: uppercase;
}
.tp-caption.mediumlarge_light_white_center {
font-size:34px;
line-height:40px;
font-weight:300;
font-family:"Open Sans";
color:#ffffff;
text-decoration:none;
background-color:transparent;
padding:0px 0px 0px 0px;
text-align:center;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bg_asbestos {
font-size:20px;
line-height:20px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(127, 140, 141);
padding:10px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_light_black {
font-size:30px;
line-height:36px;
font-weight:300;
font-family:"Open Sans";
color:rgb(0, 0, 0);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.large_bold_black {
font-size:58px;
line-height:60px;
font-weight:800;
font-family:"Open Sans";
color:rgb(0, 0, 0);
text-decoration:none;
background-color:transparent;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.mediumlarge_light_darkblue {
font-size:34px;
line-height:40px;
font-weight:300;
font-family:"Open Sans";
color:rgb(52, 73, 94);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.small_light_white {
font-size:17px;
line-height:28px;
font-weight:300;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.roundedimage {
border-width:0px;
border-color:rgb(34, 34, 34);
border-style:none;
}
.tp-caption.large_bg_black {
font-size:40px;
line-height:40px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(0, 0, 0);
padding:10px 20px 15px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.mediumwhitebg {
font-size:30px;
line-height:30px;
font-weight:300;
font-family:"Open Sans";
color:rgb(0, 0, 0);
text-decoration:none;
background-color:rgb(255, 255, 255);
padding:5px 15px 10px;
text-shadow:none;
border-width:0px;
border-color:rgb(0, 0, 0);
border-style:none;
}
.tp-caption.medium_bg_orange_new1 {
font-size:20px;
line-height:20px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(243, 156, 18);
padding:10px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.boxshadow{
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
.tp-caption.black{
color: #000;
text-shadow: none;
font-weight: 300;
font-size: 19px;
line-height: 19px;
font-family: 'Open Sans', sans;
}
.tp-caption.noshadow {
text-shadow: none;
}
.tp_inner_padding { box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
max-height:none !important; }
/*.tp-caption { transform:none !important}*/
/*********************************
- SPECIAL TP CAPTIONS -
**********************************/
.tp-caption .frontcorner {
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
border-top: 40px solid #00A8FF;
position: absolute;left:-40px;top:0px;
}
.tp-caption .backcorner {
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #00A8FF;
position: absolute;right:0px;top:0px;
}
.tp-caption .frontcornertop {
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
border-bottom: 40px solid #00A8FF;
position: absolute;left:-40px;top:0px;
}
.tp-caption .backcornertop {
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 40px solid transparent;
border-top: 40px solid #00A8FF;
position: absolute;right:0px;top:0px;
}
/******************************
- BUTTONS -
*******************************/
.tp-simpleresponsive .button { padding:6px 13px 5px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; height:30px;
cursor:pointer;
color:#fff !important; text-shadow:0px 1px 1px rgba(0, 0, 0, 0.6) !important; font-size:15px; line-height:45px !important;
background:url(/Content/images/gradient/g30.png) repeat-x top; font-family: arial, sans-serif; font-weight: bold; letter-spacing: -1px;
}
.tp-simpleresponsive .button.big { color:#fff; text-shadow:0px 1px 1px rgba(0, 0, 0, 0.6); font-weight:bold; padding:9px 20px; font-size:19px; line-height:57px !important; background:url(/Content/images/gradient/g40.png) repeat-x top;}
.tp-simpleresponsive .purchase:hover,
.tp-simpleresponsive .button:hover,
.tp-simpleresponsive .button.big:hover { background-position:bottom, 15px 11px;}
@media only screen and (min-width: 1000px) and (max-width: 1169px){
.tp-caption.lightgrey_divider {
width:490px;
}
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
.tp-caption.lightgrey_divider {
width:370px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.tp-simpleresponsive .button { padding:4px 8px 3px; line-height:25px !important; font-size:11px !important;font-weight:normal; }
.tp-simpleresponsive a.button { -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; }
}
@media only screen and (min-width: 0px) and (max-width: 479px) {
.tp-simpleresponsive .button { padding:2px 5px 2px; line-height:20px !important; font-size:10px !important;}
.tp-simpleresponsive a.button { -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; }
}
/* BUTTON COLORS */
.tp-simpleresponsive .button.green, .tp-simpleresponsive .button:hover.green,
.tp-simpleresponsive .purchase.green, .tp-simpleresponsive .purchase:hover.green { background-color:#21a117; -webkit-box-shadow: 0px 3px 0px 0px #104d0b; -moz-box-shadow: 0px 3px 0px 0px #104d0b; box-shadow: 0px 3px 0px 0px #104d0b; }
.tp-simpleresponsive .button.blue, .tp-simpleresponsive .button:hover.blue,
.tp-simpleresponsive .purchase.blue, .tp-simpleresponsive .purchase:hover.blue { background-color:#1d78cb; -webkit-box-shadow: 0px 3px 0px 0px #0f3e68; -moz-box-shadow: 0px 3px 0px 0px #0f3e68; box-shadow: 0px 3px 0px 0px #0f3e68;}
.tp-simpleresponsive .button.red, .tp-simpleresponsive .button:hover.red,
.tp-simpleresponsive .purchase.red, .tp-simpleresponsive .purchase:hover.red { background-color:#cb1d1d; -webkit-box-shadow: 0px 3px 0px 0px #7c1212; -moz-box-shadow: 0px 3px 0px 0px #7c1212; box-shadow: 0px 3px 0px 0px #7c1212;}
.tp-simpleresponsive .button.orange, .tp-simpleresponsive .button:hover.orange,
.tp-simpleresponsive .purchase.orange, .tp-simpleresponsive .purchase:hover.orange { background-color:#ff7700; -webkit-box-shadow: 0px 3px 0px 0px #a34c00; -moz-box-shadow: 0px 3px 0px 0px #a34c00; box-shadow: 0px 3px 0px 0px #a34c00;}
.tp-simpleresponsive .button.darkgrey, .tp-simpleresponsive .button.grey,
.tp-simpleresponsive .button:hover.darkgrey, .tp-simpleresponsive .button:hover.grey,
.tp-simpleresponsive .purchase.darkgrey, .tp-simpleresponsive .purchase:hover.darkgrey { background-color:#555; -webkit-box-shadow: 0px 3px 0px 0px #222; -moz-box-shadow: 0px 3px 0px 0px #222; box-shadow: 0px 3px 0px 0px #222;}
.tp-simpleresponsive .button.lightgrey, .tp-simpleresponsive .button:hover.lightgrey,
.tp-simpleresponsive .purchase.lightgrey, .tp-simpleresponsive .purchase:hover.lightgrey { background-color:#888; -webkit-box-shadow: 0px 3px 0px 0px #555; -moz-box-shadow: 0px 3px 0px 0px #555; box-shadow: 0px 3px 0px 0px #555;}
/****************************************************************
- SET THE ANIMATION EVEN MORE SMOOTHER ON ANDROID -
******************************************************************/
/*.tp-simpleresponsive { -webkit-perspective: 1500px;
-moz-perspective: 1500px;
-o-perspective: 1500px;
-ms-perspective: 1500px;
perspective: 1500px;
}*/
/**********************************************
- FULLSCREEN AND FULLWIDHT CONTAINERS -
**********************************************/
.fullscreen-container {
width:100%;
position:relative;
padding:0;
}
.fullwidthbanner-container{
width:100%;
position:relative;
padding:0;
overflow:hidden;
}
.fullwidthbanner-container .fullwidthbanner{
width:100%;
position:relative;
}
/************************************************
- SOME CAPTION MODIFICATION AT START -
*************************************************/
.tp-simpleresponsive .caption,
.tp-simpleresponsive .tp-caption {
/*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; */
position:absolute;visibility: hidden;
-webkit-font-smoothing: antialiased !important;
}
.tp-simpleresponsive img { max-width:none;}
/******************************
- IE8 HACKS -
*******************************/
.noFilterClass {
filter:none !important;
}
/******************************
- SHADOWS -
******************************/
.tp-bannershadow {
position:absolute;
margin-left:auto;
margin-right:auto;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.tp-bannershadow.tp-shadow1 { background:url(/Scripts/js/revolutionslider/rs-plugin/assets/shadow1.png) no-repeat; background-size:100% 100%; width:890px; height:60px; bottom:-60px;}
.tp-bannershadow.tp-shadow2 { background:url(/Scripts/js/revolutionslider/rs-plugin/assets/shadow2.png) no-repeat; background-size:100% 100%; width:890px; height:60px;bottom:-60px;}
.tp-bannershadow.tp-shadow3 { background:url(/Scripts/js/revolutionslider/rs-plugin/assets/shadow3.png) no-repeat; background-size:100% 100%; width:890px; height:60px;bottom:-60px;}
/********************************
- FULLSCREEN VIDEO -
*********************************/
.caption.fullscreenvideo { left:0px; top:0px; position:absolute;width:100%;height:100%;}
.caption.fullscreenvideo iframe,
.caption.fullscreenvideo video { width:100% !important; height:100% !important; display: none}
.tp-caption.fullscreenvideo { left:0px; top:0px; position:absolute;width:100%;height:100%;}
.tp-caption.fullscreenvideo iframe,
.tp-caption.fullscreenvideo iframe video { width:100% !important; height:100% !important; display: none;}
.fullscreenvideo .vjs-loading-spinner { visibility:none;display:none !important; width:0px;height:0px;}
.fullscreenvideo .vjs-control-bar.vjs-fade-out,
.fullscreenvideo .vjs-control-bar.vjs-fade-in,
.fullscreenvideo .vjs-control-bar.vjs-fade-out.vjs-lock-showing,
.fullscreenvideo .vjs-control-bar.vjs-fade-in.vjs-lock-showing { visibility: hidden !important; opacity: 0 !important;display:none !important;width:0px;height:0px;overflow: hidden;}
.fullcoveredvideo.video-js,
.fullcoveredvideo video { background: transparent !important;}
.fullcoveredvideo .vjs-poster { background-position: center center;background-size: cover;width:100%;height:100%;top:0px;left:0px;}
/********************************
- DOTTED OVERLAYS -
*********************************/
.tp-dottedoverlay { background-repeat:repeat;width:100%;height:100%;position:absolute;top:0px;left:0px;z-index:1;}
.tp-dottedoverlay.twoxtwo { background:url(/Scripts/js/revolutionslider/rs-plugin/assets/gridtile.html)}
.tp-dottedoverlay.twoxtwowhite { background:url(/Scripts/js/revolutionslider/rs-plugin/assets/gridtile_white.html)}
.tp-dottedoverlay.threexthree { background:url(/Scripts/js/revolutionslider/rs-plugin/assets/gridtile_3x3.html)}
.tp-dottedoverlay.threexthreewhite { background:url(/Scripts/js/revolutionslider/rs-plugin/assets/gridtile_3x3_white.html)}
/********************************
- DOTTED OVERLAYS ENDS -
*********************************/
/************************
- NAVIGATION -
*************************/
/** BULLETS **/
.tpclear { clear:both;}
.tp-bullets { z-index:1000; position:absolute;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
-webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; -ms-transition: opacity 0.2s ease-out;-webkit-transform: translateZ(5px);
}
.tp-bullets.hidebullets {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
.tp-bullets.simplebullets.navbar { border:1px solid #666; border-bottom:1px solid #444; background:url(/Scripts/js/revolutionslider/rs-plugin/assets/boxed_bgtile.png); height:40px; padding:0px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px ;}
.tp-bullets.simplebullets.navbar-old { background:url(/Scripts/js/revolutionslider/rs-plugin/assets/navigdots_bgtile.png); height:35px; padding:0px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px ;}
.tp-bullets.simplebullets.round .bullet { cursor:pointer; position:relative; background:url(/Scripts/js/revolutionslider/rs-plugin/assets/bullet.png) no-Repeat top left; width:20px; height:20px; margin-right:0px; float:left; margin-top:0px; margin-left:3px;}
.tp-bullets.simplebullets.round .bullet.last { margin-right:3px;}
.tp-bullets.simplebullets.round-old .bullet { cursor:pointer; position:relative; background:url(/Scripts/js/revolutionslider/rs-plugin/assets/bullets.png) no-Repeat bottom left; width:23px; height:23px; margin-right:0px; float:left; margin-top:0px;}
.tp-bullets.simplebullets.round-old .bullet.last { margin-right:0px;}
/** SQUARE BULLETS **/
.tp-bullets.simplebullets.square .bullet { cursor:pointer; position:relative; background:url(/Scripts/js/revolutionslider/rs-plugin/assets/bullets2.png) no-Repeat bottom left; width:19px; height:19px; margin-right:0px; float:left; margin-top:0px;}
.tp-bullets.simplebullets.square .bullet.last { margin-right:0px;}
/** SQUARE BULLETS **/
.tp-bullets.simplebullets.square-old .bullet { cursor:pointer; position:relative; background:url(/Scripts/js/revolutionslider/rs-plugin/assets/bullets2.png) no-Repeat bottom left; width:19px; height:19px; margin-right:0px; float:left; margin-top:0px;}
.tp-bullets.simplebullets.square-old .bullet.last { margin-right:0px;}
/** navbar NAVIGATION VERSION **/
.tp-bullets.simplebullets.navbar .bullet { cursor:pointer; position:relative; background:url(/Scripts/js/revolutionslider/rs-plugin/assets/bullet_boxed.png) no-Repeat top left; width:18px; height:19px; margin-right:5px; float:left; margin-top:0px;}
.tp-bullets.simplebullets.navbar .bullet.first { margin-left:0px !important;}
.tp-bullets.simplebullets.navbar .bullet.last { margin-right:0px !important;}
/** navbar NAVIGATION VERSION **/
.tp-bullets.simplebullets.navbar-old .bullet { cursor:pointer; position:relative; background:url(/Scripts/js/revolutionslider/rs-plugin/assets/navigdots.png) no-Repeat bottom left; width:15px; height:15px; margin-left:5px !important; margin-right:5px !important;float:left; margin-top:10px;}
.tp-bullets.simplebullets.navbar-old .bullet.first { margin-left:0px !important;}
.tp-bullets.simplebullets.navbar-old .bullet.last { margin-right:0px !important;}
.tp-bullets.simplebullets .bullet:hover,
.tp-bullets.simplebullets .bullet.selected { background-position:top left; }
.tp-bullets.simplebullets.round .bullet:hover,
.tp-bullets.simplebullets.round .bullet.selected,
.tp-bullets.simplebullets.navbar .bullet:hover,
.tp-bullets.simplebullets.navbar .bullet.selected { background-position:bottom left; }
/*************************************
- TP ARROWS -
**************************************/
.tparrows { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
-webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; -ms-transition: opacity 0.2s ease-out; -webkit-transform: translateZ(5px);
}
.tparrows.hidearrows {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
.tp-leftarrow { z-index:100;cursor:pointer; position:relative; background:url(https://lh5.googleusercontent.com/--MXQPPcKYew/VEZgCYvRYDI/AAAAAAAAA1w/EEY1Q2uO-bA/w39-h92-no/large_left.png) no-Repeat top left; width:40px; height:40px; }
.tp-rightarrow { z-index:100;cursor:pointer; position:relative; background:url(https://lh3.googleusercontent.com/-DvgXoXctlW8/VEZgCaNHhRI/AAAAAAAAA10/zXYdUaH6j68/w39-h92-no/large_right.png) no-Repeat top left; width:40px; height:40px; }
.tp-leftarrow.round { z-index:100;cursor:pointer; position:relative; background:url(http://oneoffice.com.vn/Scripts/js/revolutionslider/rs-plugin/assets/small_left.png) no-Repeat top left; width:19px; height:14px; margin-right:0px; float:left; margin-top:0px; }
.tp-rightarrow.round { z-index:100;cursor:pointer; position:relative; background:url(http://oneoffice.com.vn/Scripts/js/revolutionslider/rs-plugin/assets/small_right.png) no-Repeat top left; width:19px; height:14px; margin-right:0px; float:left; margin-top:0px;}
.tp-leftarrow.round-old { z-index:100;cursor:pointer; position:relative; background:url(http://oneoffice.com.vn/Scripts/js/revolutionslider/rs-plugin/assets/arrow_left.png) no-Repeat top left; width:26px; height:26px; margin-right:0px; float:left; margin-top:0px; }
.tp-rightarrow.round-old { z-index:100;cursor:pointer; position:relative; background:url(http://oneoffice.com.vn/Scripts/js/revolutionslider/rs-plugin/assets/arrow_right.png) no-Repeat top left; width:26px; height:26px; margin-right:0px; float:left; margin-top:0px;}
.tp-leftarrow.navbar { z-index:100;cursor:pointer; position:relative; background:url(http://oneoffice.com.vn/Scripts/js/revolutionslider/rs-plugin/assets/small_left_boxed.png) no-Repeat top left; width:20px; height:15px; float:left; margin-right:6px; margin-top:12px;}
.tp-rightarrow.navbar { z-index:100;cursor:pointer; position:relative; background:url(http://oneoffice.com.vn/Scripts/js/revolutionslider/rs-plugin/assets/small_right_boxed.png) no-Repeat top left; width:20px; height:15px; float:left; margin-left:6px; margin-top:12px;}
.tp-leftarrow.navbar-old { z-index:100;cursor:pointer; position:relative; background:url(http://oneoffice.com.vn/Scripts/js/revolutionslider/rs-plugin/assets/arrowleft.png) no-Repeat top left; width:9px; height:16px; float:left; margin-right:6px; margin-top:10px;}
.tp-rightarrow.navbar-old { z-index:100;cursor:pointer; position:relative; background:url(/Scripts/js/revolutionslider/rs-plugin/assets/arrowright.png) no-Repeat top left; width:9px; height:16px; float:left; margin-left:6px; margin-top:10px;}
.tp-leftarrow.navbar-old.thumbswitharrow { margin-right:10px; }
.tp-rightarrow.navbar-old.thumbswitharrow { margin-left:0px; }
.tp-leftarrow.square { z-index:100;cursor:pointer; position:relative; background:url(http://oneoffice.com.vn/Scripts/js/revolutionslider/rs-plugin/assets/arrow_left2.png) no-Repeat top left; width:12px; height:17px; float:left; margin-right:0px; margin-top:0px;}
.tp-rightarrow.square { z-index:100;cursor:pointer; position:relative; background:url(http://oneoffice.com.vn/Scripts/js/revolutionslider/rs-plugin/assets/arrow_right2.png) no-Repeat top left; width:12px; height:17px; float:left; margin-left:0px; margin-top:0px;}
.tp-leftarrow.square-old { z-index:100;cursor:pointer; position:relative; background:url(http://oneoffice.com.vn/Scripts/js/revolutionslider/rs-plugin/assets/arrow_left2.png) no-Repeat top left; width:12px; height:17px; float:left; margin-right:0px; margin-top:0px;}
.tp-rightarrow.square-old { z-index:100;cursor:pointer; position:relative; background:url(/Scripts/js/revolutionslider/rs-plugin/assets/arrow_right2.png) no-Repeat top left; width:12px; height:17px; float:left; margin-left:0px; margin-top:0px;}
.tp-leftarrow.default { z-index:100;cursor:pointer; position:relative; background:url(https://lh5.googleusercontent.com/--MXQPPcKYew/VEZgCYvRYDI/AAAAAAAAA1w/EEY1Q2uO-bA/w39-h92-no/large_left.png) no-Repeat 0 0; width:39px; height:46px;
}
.tp-rightarrow.default { z-index:100;cursor:pointer; position:relative; background:url(https://lh3.googleusercontent.com/-DvgXoXctlW8/VEZgCaNHhRI/AAAAAAAAA10/zXYdUaH6j68/w39-h92-no/large_right.png) no-Repeat 0 0; width:39px; height:46px;
}
.tp-leftarrow:hover,
.tp-rightarrow:hover { background-position:bottom left; }
/****************************************************************************************************
- TP THUMBS -
*****************************************************************************************************
*****************************************************************************************************/
.tp-bullets.tp-thumbs { z-index:1000; position:absolute; padding:3px;background-color:#fff;
width:500px;height:50px; /* THE DIMENSIONS OF THE THUMB CONTAINER */
margin-top:-50px;
}
.fullwidthbanner-container .tp-thumbs { padding:3px;}
.tp-bullets.tp-thumbs .tp-mask { width:500px; height:50px; /* THE DIMENSIONS OF THE THUMB CONTAINER */
overflow:hidden; position:relative;}
.tp-bullets.tp-thumbs .tp-mask .tp-thumbcontainer { width:5000px; position:absolute;}
.tp-bullets.tp-thumbs .bullet { width:100px; height:50px; /* THE DIMENSION OF A SINGLE THUMB */
cursor:pointer; overflow:hidden;background:none;margin:0;float:left;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/*filter: alpha(opacity=50); */
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out;
}
.tp-bullets.tp-thumbs .bullet:hover,
.tp-bullets.tp-thumbs .bullet.selected { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.tp-thumbs img { width:100%; }
/************************************
- TP BANNER TIMER -
*************************************/
.tp-bannertimer { width:100%; height:10px; background:url(/Scripts/js/revolutionslider/rs-plugin/assets/timer.png);position:absolute; z-index:200;top:0px;}
.tp-bannertimer.tp-bottom { bottom:0px;height:5px; top:auto;}
/***************************************
- RESPONSIVE SETTINGS -
****************************************/
@media only screen and (min-width: 0px) and (max-width: 479px) {
.responsive .tp-bullets { display:none}
.responsive .tparrows { display:none;}
}
/******************************
- HTML5 VIDEO SETTINGS -
********************************/
.vjs-tech { margin-top:1px}
.tp-caption .vjs-default-skin .vjs-big-play-button { left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -20px;
width: 40px;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: none;
box-shadow: none;
text-shadow: none;
line-height: 30px;
vertical-align: top;
padding: 0px;
}
.tp-caption .vjs-default-skin .vjs-big-play-button:before {
position:absolute;
top:0px; left:0px;
line-height:40px;
text-shadow: none !important;
color:#fff;
font-size:18px;
}
.tp-caption .vjs-default-skin:hover .vjs-big-play-button, .vjs-default-skin .vjs-big-play-button:focus {
box-shadow:none;
-webkit-box-shadow:none;
}
/*********************************************
- BASIC SETTINGS FOR THE BANNER -
***********************************************/
.tp-simpleresponsive img {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.tp-simpleresponsive a{ text-decoration:none;}
.tp-simpleresponsive ul {
list-style:none;
padding:0;
margin:0;
}
.tp-simpleresponsive >ul >li{
list-stye:none;
position:absolute;
visibility:hidden;
}
/* CAPTION SLIDELINK **/
.caption.slidelink a div,
.tp-caption.slidelink a div { width:3000px; height:1500px; background:url(/Scripts/js/revolutionslider/rs-plugin/assets/coloredbg.png) repeat;}
.tp-loader { background:url(/Scripts/js/revolutionslider/rs-plugin/assets/loader.gif) no-repeat 10px 10px; background-color:#fff; margin:-22px -22px; top:50%; left:50%; z-index:10000; position:absolute;width:44px;height:44px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.tp-transparentimg { content:"url(/Scripts/js/revolutionslider/rs-plugin/assets/transparent.png)"}
.tp-3d { -webkit-transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.tp-caption img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
zoom: 1;
}
@font-face {
font-family: 'revicons';
src: url('../font/revicons90c6.html?5510888');
src: url('../font/revicons90c6.html?5510888#iefix') format('embedded-opentype'),
url('../font/revicons90c6-2.html?5510888') format('woff'),
url('../font/revicons90c6-3.html?5510888') format('truetype'),
url('../font/revicons90c6-4.html?5510888#revicons') format('svg');
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'revicons';
src: url('../font/revicons.svg?5510888#revicons') format('svg');
}
}
*/
[class^="revicon-"]:before, [class*=" revicon-"]:before {
font-family: "revicons";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.revicon-search-1:before { content: '\e802'; } /* '' */
.revicon-pencil-1:before { content: '\e831'; } /* '' */
.revicon-picture-1:before { content: '\e803'; } /* '' */
.revicon-cancel:before { content: '\e80a'; } /* '' */
.revicon-info-circled:before { content: '\e80f'; } /* '' */
.revicon-trash:before { content: '\e801'; } /* '' */
.revicon-left-dir:before { content: '\e817'; } /* '' */
.revicon-right-dir:before { content: '\e818'; } /* '' */
.revicon-down-open:before { content: '\e83b'; } /* '' */
.revicon-left-open:before { content: '\e819'; } /* '' */
.revicon-right-open:before { content: '\e81a'; } /* '' */
.revicon-angle-left:before { content: '\e820'; } /* '' */
.revicon-angle-right:before { content: '\e81d'; } /* '' */
.revicon-left-big:before { content: '\e81f'; } /* '' */
.revicon-right-big:before { content: '\e81e'; } /* '' */
.revicon-magic:before { content: '\e807'; } /* '' */
.revicon-picture:before { content: '\e800'; } /* '' */
.revicon-export:before { content: '\e80b'; } /* '' */
.revicon-cog:before { content: '\e832'; } /* '' */
.revicon-login:before { content: '\e833'; } /* '' */
.revicon-logout:before { content: '\e834'; } /* '' */
.revicon-video:before { content: '\e805'; } /* '' */
.revicon-arrow-combo:before { content: '\e827'; } /* '' */
.revicon-left-open-1:before { content: '\e82a'; } /* '' */
.revicon-right-open-1:before { content: '\e82b'; } /* '' */
.revicon-left-open-mini:before { content: '\e822'; } /* '' */
.revicon-right-open-mini:before { content: '\e823'; } /* '' */
.revicon-left-open-big:before { content: '\e824'; } /* '' */
.revicon-right-open-big:before { content: '\e825'; } /* '' */
.revicon-left:before { content: '\e836'; } /* '' */
.revicon-right:before { content: '\e826'; } /* '' */
.revicon-ccw:before { content: '\e808'; } /* '' */
.revicon-arrows-ccw:before { content: '\e806'; } /* '' */
.revicon-palette:before { content: '\e829'; } /* '' */
.revicon-list-add:before { content: '\e80c'; } /* '' */
.revicon-doc:before { content: '\e809'; } /* '' */
.revicon-left-open-outline:before { content: '\e82e'; } /* '' */
.revicon-left-open-2:before { content: '\e82c'; } /* '' */
.revicon-right-open-outline:before { content: '\e82f'; } /* '' */
.revicon-right-open-2:before { content: '\e82d'; } /* '' */
.revicon-equalizer:before { content: '\e83a'; } /* '' */
.revicon-layers-alt:before { content: '\e804'; } /* '' */
.revicon-popup:before { content: '\e828'; } /* '' */
@media only screen and (min-width: 1000px) and (max-width: 1169px){
.tp-caption.circle1 {
width:100px;
height:100px;
line-height:100px;
}
.tp-caption.slider_but3 {
padding: 12px 18px;
}
.tp-caption.slider_but4 {
padding: 12px 18px;
}
.tp-caption.slider_but8 a {
font-size: 14px;
padding: 10px 20px;
border:2px solid #fff;
}
.tp-caption.circle1 i {
line-height:100px;
}
.tp-caption.slider_but6 a {
margin-left: -120px;
}
.tp-caption.slider_but7 a {
margin-left: 40px;
}
.tp-caption.circle_small {
width:30px;
height:30px;
line-height:30px;
}
.tp-caption.large_white {
margin-left: 100px;
}
.tp-caption.large_black {
margin-left: 100px;
}
.tp-caption.slider_but11 a {
font-size: 16px;
padding: 12px 18px;
margin-left: 90px;
}
.tp-caption.slider_but12 a {
font-size: 16px;
padding: 12px 18px;
margin-left: 100px;
}
.tp-caption.slider_but10 a {
margin-left: 22px;
}
}
@media only screen and (min-width: 768px) and (max-width: 999px){
.tp-caption.circle1 {
width:80px;
height:80px;
line-height:80px;
}
.tp-caption.circle1 i {
line-height:80px;
}
.tp-caption.slider_but8 a {
font-size: 14px;
padding: 5px 10px;
border:2px solid #fff;
}
.tp-caption.slider_but1 a {
font-size: 14px;
padding: 8px 15px;
margin-left: -125px;
}
.tp-caption.slider_but2 a {
font-size: 14px;
padding: 8px 15px;
margin-left: 7px;
}
.tp-caption.slider_but3 {
padding: 12px 10px;
}
.tp-caption.slider_but4 {
padding: 12px 10px;
}
.tp-caption.slider_but3 i {
font-size: 20px;
margin-right: 8px;
}
.tp-caption.slider_but3 b {
font-size: 12px;
margin-top: -5px;
}
.tp-caption.slider_but3 b strong {
margin-top: -3px;
font-size: 14px;
}
.tp-caption.slider_but4 i {
font-size: 20px;
margin-right: 8px;
}
.tp-caption.slider_but4 b {
font-size: 12px;
margin-top: -5px;
}
.tp-caption.slider_but4 b strong {
margin-top: -3px;
font-size: 14px;
}
.tp-caption.slider_but6 a {
margin-left: -80px;
font-size: 14px;
padding: 12px 20px;
}
.tp-caption.slider_but7 a {
margin-left: 50px;
font-size: 14px;
padding: 12px 20px;
}
.tp-caption.circle_small {
width: 25px;
height: 25px;
line-height: 32px;
}
.tp-caption.large_white {
margin-left: 90px;
}
.tp-caption.large_black {
margin-left: 90px;
}
.tp-caption.slider_but11 a {
font-size: 16px;
padding: 12px 18px;
margin-left: 62px;
}
.tp-caption.slider_but12 a {
font-size: 16px;
padding: 12px 18px;
margin-left: 120px;
}
.tp-caption.slider_but10 a {
margin-left: 40px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px){
.tp-caption.circle1 {
width:50px;
height:50px;
line-height:50px;
}
.tp-caption.circle1 i {
line-height:50px;
}
.tp-caption.small_divider {
height: 50px;
}
.tp-caption.slider_but8 a {
font-size: 10px;
padding: 5px 4px;
border:1px solid #fff;
}
.tp-caption.slider_but1 a {
font-size: 12px;
padding: 8px 10px;
margin-left: -110px;
}
.tp-caption.slider_but2 a {
font-size: 12px;
padding: 8px 10px;
margin-left: 7px;
}
.tp-caption.slider_but3 {
padding: 12px 4px;
}
.tp-caption.slider_but4 {
padding: 12px 10px;
}
.tp-caption.slider_but3 i {
font-size: 14px;
margin-right: 5px;
}
.tp-caption.slider_but3 b {
font-size: 10px;
margin-top: -2px;
}
.tp-caption.slider_but3 b strong {
margin-top: 0px;
font-size: 11px;
}
.tp-caption.slider_but4 i {
font-size: 14px;
margin-right: 5px;
}
.tp-caption.slider_but4 b {
font-size: 10px;
margin-top: -2px;
}
.tp-caption.slider_but4 b strong {
margin-top: 0px;
font-size: 10px;
}
.tp-caption.slider_but9 a {
font-size: 14px;
padding: 12px 13px;
}
.tp-caption.slider_but10 a {
font-size: 14px;
padding: 10px 5px;
margin-left: 45px;
}
.tp-caption.slider_but6 a {
margin-left: -60px;
font-size: 12px;
padding: 8px 10px;
}
.tp-caption.slider_but7 a {
margin-left: 40px;
font-size: 12px;
padding: 8px 10px;
}
.tp-caption.circle_small {
width: 14px;
height: 14px;
}
.tp-caption.large_white {
margin-left: 80px;
}
.tp-caption.large_black {
margin-left: 80px;
}
.tp-caption.slider_but11 a {
font-size: 12px;
padding: 8px 10px;
margin-left: 35px;
}
.tp-caption.slider_but12 a {
font-size: 12px;
padding: 8px 10px;
margin-left: 100px;
}
.tp-caption.slider_but5 a {
font-size: 12px;
padding: 8px 10px;
margin-left: -80px;
}
}
@media only screen and (max-width: 479px){
.tp-caption.circle1 {
width:30px;
height:30px;
line-height:30px;
}
.tp-caption.circle1 i {
line-height:30px;
}
.tp-caption.small_divider {
height: 50px;
}
.tp-caption.slider_but8 a {
font-size: 7px;
padding: 5px 3px;
border:1px solid #fff;
}
.tp-caption.slider_but1 a {
font-size: 10px;
padding: 8px 5px;
margin-left: -80px;
}
.tp-caption.slider_but2 a {
font-size: 10px;
padding: 8px 5px;
margin-left: 7px;
}
.tp-caption.slider_but3 {
padding: 12px 4px;
}
.tp-caption.slider_but4 {
padding: 12px 10px;
}
.tp-caption.slider_but3 i {
font-size: 14px;
margin-right: 5px;
}
.tp-caption.slider_but3 b {
font-size: 10px;
margin-top: -1px;
}
.tp-caption.slider_but3 b strong {
margin-top: 2px;
font-size: 11px;
}
.tp-caption.slider_but4 i {
font-size: 14px;
margin-right: 5px;
}
.tp-caption.slider_but4 b {
font-size: 10px;
margin-top: -1px;
}
.tp-caption.slider_but4 b strong {
margin-top: 2px;
font-size: 10px;
}
.tp-caption.slider_but9 a {
font-size: 12px;
padding: 8px 8px;
}
.tp-caption.slider_but10 a {
font-size: 12px;
padding: 6px 5px;
margin-left: 40px;
}
.tp-caption.slider_but6 a {
margin-left: -42px;
font-size: 10px;
padding: 5px 5px;
}
.tp-caption.slider_but7 a {
margin-left: 32px;
font-size: 10px;
padding: 5px 5px;
}
.tp-caption.circle_small {
width: 10px;
height: 10px;
}
.tp-caption.large_white {
margin-left: 80px;
}
.tp-caption.large_black {
margin-left: 80px;
}
.tp-caption.slider_but11 a {
font-size: 12px;
padding: 8px 10px;
margin-left: 20px;
}
.tp-caption.slider_but12 a {
font-size: 12px;
padding: 8px 10px;
margin-left: 100px;
}
.tp-caption.slider_but5 a {
font-size: 10px;
padding: 7px 8px;
margin-left: -65px;
}
}
.container_full {
width: 100%;
max-height: 500px;
overflow: hidden;
}.tp-banner ul{margin:0;}
/*-----------------------------------------------------------------------------
KENBURNER RESPONSIVE BASIC STYLES OF HTML DOCUMENT
Screen Stylesheet
version: 1.0
date: 07/27/11
author: themepunch
email: support@themepunch.com
website: http://www.themepunch.com
-----------------------------------------------------------------------------*/
.boxedcontainer { max-width: 1170px; margin:auto; padding:0px 30px;}
.tp-banner-container{
width:100%;
position:relative;
padding:0;
background-color: #272727;
}
.tp-banner{
width:100%;
position:relative;
}
.tp-banner-fullscreen-container {
width:100%;
position:relative;
padding:0;
}
*/
</style>
<div class='container_full'>
<div class='tp-banner-container'>
<div class='tp-banner'>
<ul>
<!-- SLIDE 1 -->
<li data-masterspeed='1500' data-slotamount='7' data-transition='fade'>
<!-- MAIN IMAGE -->
<img alt='Thiết kế Website đà nẵng' data-bgfit='cover' data-bgposition='center top' data-bgrepeat='no-repeat' src='http://2.bp.blogspot.com/-P05-LV4xlCM/VEZ5ogAjJ9I/AAAAAAAAA2k/IcGyJ5IWIGg/s1600/Bg2.jpg'/>
<div class='tp-caption small_text sfr' data-captionhidden='off' data-easing='Power4.easeOut' data-endeasing='Power1.easeIn' data-endspeed='300' data-hoffset='0' data-speed='800' data-start='1000' data-voffset='-10' data-x='600' data-y='173' style='z-index: 6'>
iChiaSe.Biz Thiết kế Website
</div>
<div class='tp-caption large_bold_white_25 sfl' data-captionhidden='off' data-easing='Power4.easeOut' data-endeasing='Power1.easeIn' data-endspeed='300' data-hoffset='0' data-speed='800' data-start='1000' data-voffset='-10' data-x='600' data-y='218' style='z-index: 6'>
Thiết kế phẳng
</div>
<div class='tp-caption large_bold_white_25 sfl' data-captionhidden='off' data-easing='Power4.easeOut' data-endeasing='Power1.easeIn' data-endspeed='300' data-hoffset='0' data-speed='800' data-start='1000' data-voffset='-10' data-x='600' data-y='273' style='z-index: 6'>
Đơn giản, chuyên nghiệp
</div>
<div class='tp-caption lfb' data-captionhidden='on' data-easing='Back.easeIn' data-endspeed='300' data-speed='800' data-start='1300' data-x='0' data-y='121' style='z-index: 8'>
<img alt='Thiết kế Website đà nẵng' src='http://2.bp.blogspot.com/-r5MyXl0LO_w/VEaG6bRtu0I/AAAAAAAAA3A/-kxoPnG_-Bo/s1600/Untitled-2.png'/>
</div>
</li>
<!-- SLIDE 2 -->
<li data-masterspeed='1500' data-slotamount='7' data-transition='fade'>
<!-- MAIN IMAGE -->
<img alt='Thiết kế Website hà nội' data-bgfit='cover' data-bgposition='center top' data-bgrepeat='no-repeat' src='http://2.bp.blogspot.com/-P05-LV4xlCM/VEZ5ogAjJ9I/AAAAAAAAA2k/IcGyJ5IWIGg/s1600/Bg2.jpg'/>
<div class='tp-caption small_text sfr' data-captionhidden='off' data-easing='Power4.easeOut' data-endeasing='Power1.easeIn' data-endspeed='300' data-hoffset='0' data-speed='800' data-start='1000' data-voffset='-10' data-x='588' data-y='173' style='z-index: 6'>
Thiết kế website
</div>
<div class='tp-caption large_bold_white_25 sfl' data-captionhidden='off' data-easing='Power4.easeOut' data-endeasing='Power1.easeIn' data-endspeed='300' data-hoffset='0' data-speed='800' data-start='1000' data-voffset='-10' data-x='588' data-y='195' style='z-index: 6'>
THÍCH HỢP VỚI MỌI THIẾT BỊ
</div>
<div class='tp-caption lfb' data-captionhidden='on' data-easing='Back.easeIn' data-endspeed='300' data-speed='800' data-start='1300' data-x='0' data-y='76' style='z-index: 8'>
<img alt='Thiết kế Website đà nẵng' src='http://1.bp.blogspot.com/-nwDrdTOk7rQ/VEZ5SSa363I/AAAAAAAAA2Y/Aq0b7JLHKps/s1600/QuanTriWeb.png'/>
</div>
<div class='tp-caption small_text02 sfb' data-captionhidden='off' data-easing='Power4.easeOut' data-endeasing='Power1.easeIn' data-endspeed='300' data-hoffset='0' data-speed='800' data-start='1600' data-voffset='-10' data-x='588' data-y='265' style='z-index: 6'>
Website tương thích mọi trình duyệt, thiết bị Desktop, Laptop, Tablet, Mobile<br/>
Thiết kế chuyên nghiệp, Tốc độ load trang nhanh, Theo chuẩn Seo google.<br/>
Dễ dàng quản trị, Tất cả các khách hàng đều hài lòng.
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- END REVOLUTION SLIDER -->
