400 lines
7.7 KiB
CSS
400 lines
7.7 KiB
CSS
|
|
||
|
|
/* -----------------------------------
|
||
|
|
|
||
|
|
6. Sliders
|
||
|
|
|
||
|
|
------------------------------------- */
|
||
|
|
|
||
|
|
.revolution_slider{
|
||
|
|
width:100%;
|
||
|
|
position:relative;
|
||
|
|
padding:0;
|
||
|
|
}
|
||
|
|
.slider_title{
|
||
|
|
font-size: 20px;
|
||
|
|
line-height:20px;
|
||
|
|
}
|
||
|
|
.slide_check{
|
||
|
|
font-size: 18px;
|
||
|
|
line-height:20px;
|
||
|
|
}
|
||
|
|
.slider_title p{
|
||
|
|
line-height: 3em;
|
||
|
|
color: #fff;
|
||
|
|
letter-spacing: 0.3em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
.title_top{
|
||
|
|
font-size: 20px;
|
||
|
|
line-height:20px;
|
||
|
|
}
|
||
|
|
.title_none{
|
||
|
|
font-size: 40px;
|
||
|
|
line-height:30%;
|
||
|
|
}
|
||
|
|
.slider_title p:after{
|
||
|
|
content: '';
|
||
|
|
display: inline-block;
|
||
|
|
width: 5px;
|
||
|
|
height: 2px;
|
||
|
|
background: #fff;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
margin-left: -5px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.slider_title p:before{
|
||
|
|
content: '';
|
||
|
|
display: inline-block;
|
||
|
|
width: 5px;
|
||
|
|
height: 2px;
|
||
|
|
background: #fff;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide_check{
|
||
|
|
/* background: #97d8bd;
*/
|
||
|
|
background: #393184;
|
||
|
|
|
||
|
|
padding:24px 38px;
|
||
|
|
color: #fff;
|
||
|
|
letter-spacing: 0.3em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
font-weight: 700;
|
||
|
|
border-radius: 35px;
|
||
|
|
}
|
||
|
|
.slide_check:hover{
|
||
|
|
background: #333;
|
||
|
|
color:#fff;
|
||
|
|
}
|
||
|
|
.ui-slider{
|
||
|
|
height:12px;
|
||
|
|
border:2px solid #e2e6e7;
|
||
|
|
position:relative;
|
||
|
|
background:#f5f7f8;
|
||
|
|
}
|
||
|
|
.ui-slider:after{
|
||
|
|
content:"";
|
||
|
|
position:absolute;
|
||
|
|
display:block;
|
||
|
|
top:0px;
|
||
|
|
height:8px;
|
||
|
|
width:33%;
|
||
|
|
right:0;
|
||
|
|
}
|
||
|
|
.ui-slider-handle{
|
||
|
|
width:12px;
|
||
|
|
height:22px;
|
||
|
|
-webkit-border-radius:4px;
|
||
|
|
-moz-border-radius:4px;
|
||
|
|
border-radius:4px;
|
||
|
|
top:50%;
|
||
|
|
display:inline-block;
|
||
|
|
margin-top:-11px;
|
||
|
|
position:absolute;
|
||
|
|
z-index:1;
|
||
|
|
}
|
||
|
|
.caption .slider-top{
|
||
|
|
letter-spacing: 0.5em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: #fff;
|
||
|
|
margin-top: 30%;
|
||
|
|
display: inline-block;
|
||
|
|
|
||
|
|
}
|
||
|
|
.caption .slider-top:after{
|
||
|
|
content: '';
|
||
|
|
display: inline-block;
|
||
|
|
width: 5px;
|
||
|
|
height: 2px;
|
||
|
|
background: #fff;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
margin-left: -4px;
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
.caption .slider-top:before{
|
||
|
|
content: '';
|
||
|
|
display: inline-block;
|
||
|
|
width: 5px;
|
||
|
|
height: 2px;
|
||
|
|
background: #fff;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
margin-right: 5px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.caption h2{
|
||
|
|
color: #fff;
|
||
|
|
margin-top: 15%;
|
||
|
|
}
|
||
|
|
.range_values input[type="text"]{
|
||
|
|
padding:0;
|
||
|
|
width:50%;
|
||
|
|
height:auto;
|
||
|
|
border:none;
|
||
|
|
background:transparent;
|
||
|
|
}
|
||
|
|
.custom_thumb{
|
||
|
|
position:absolute;
|
||
|
|
width:310px;
|
||
|
|
background:#fff;
|
||
|
|
-webkit-border-radius:4px;
|
||
|
|
-moz-border-radius:4px;
|
||
|
|
border-radius:4px;
|
||
|
|
position:absolute;
|
||
|
|
bottom:100%;
|
||
|
|
left:50%;
|
||
|
|
margin:0 0 13px -155px;
|
||
|
|
padding:6px;
|
||
|
|
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
|
||
|
|
-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
|
||
|
|
-o-box-shadow:0 1px 2px rgba(0,0,0,.2);
|
||
|
|
-ms-box-shadow:0 1px 2px rgba(0,0,0,.2);
|
||
|
|
box-shadow:0 1px 2px rgba(0,0,0,.2);
|
||
|
|
-webkit-transform:translateY(-35px);
|
||
|
|
-moz-transform:translateY(-35px);
|
||
|
|
-o-transform:translateY(-35px);
|
||
|
|
-ms-transform:translateY(-35px);
|
||
|
|
transform:translateY(-35px);
|
||
|
|
opacity:0;
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
.custom_thumb img{
|
||
|
|
max-width:100% !important;
|
||
|
|
}
|
||
|
|
.custom_thumb.active{
|
||
|
|
-webkit-transform:translateY(0px);
|
||
|
|
-moz-transform:translateY(0px);
|
||
|
|
-o-transform:translateY(0px);
|
||
|
|
-ms-transform:translateY(0px);
|
||
|
|
transform:translateY(0px);
|
||
|
|
opacity:1;
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
.custom_thumb:after{
|
||
|
|
content:"";
|
||
|
|
width:0;
|
||
|
|
height:0;
|
||
|
|
border-left:8px solid transparent;
|
||
|
|
border-top:8px solid #fff;
|
||
|
|
border-right:8px solid transparent;
|
||
|
|
position:absolute;
|
||
|
|
left:50%;
|
||
|
|
bottom:-8px;
|
||
|
|
margin-left:-8px;
|
||
|
|
}
|
||
|
|
[class*="camera_caption_"]{
|
||
|
|
position:absolute;
|
||
|
|
height:100%;
|
||
|
|
top:0;
|
||
|
|
}
|
||
|
|
[class*="camera_caption_"] img{
|
||
|
|
max-width:100% !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tp-leftarrow,.tp-rightarrow,.flex-direction-nav a{
|
||
|
|
z-index:100;cursor:pointer; position:relative; width:60px; height:60px;
|
||
|
|
-webkit-border-radius:4px;
|
||
|
|
-moz-border-radius:4px;
|
||
|
|
border-radius:4px;
|
||
|
|
text-align: center;
|
||
|
|
-webkit-transform:translateX(-40px);
|
||
|
|
-moz-transform:translateX(-40px);
|
||
|
|
-o-transform:translateX(-40px);
|
||
|
|
-ms-transform:translateX(-40px);
|
||
|
|
transform:translateX(-40px);
|
||
|
|
opacity:0;
|
||
|
|
background:rgba(41,47,56,.5);
|
||
|
|
-webkit-transition:background-color .4s ease,opacity .4s ease,-webkit-transform .4s ease;
|
||
|
|
-moz-transition:background-color .4s ease,opacity .4s ease,transform .4s ease;
|
||
|
|
-o-transition:background-color .4s ease,opacity .4s ease,transform .4s ease;
|
||
|
|
-ms-transition:background-color .4s ease,opacity .4s ease,transform .4s ease;
|
||
|
|
transition:background-color .4s ease,opacity .4s ease,transform .4s ease;
|
||
|
|
border-radius: 50%;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.tp-leftarrow{
|
||
|
|
line-height: 60px;
|
||
|
|
display: inline-block;
|
||
|
|
|
||
|
|
}
|
||
|
|
.tp-leftarrow:before{
|
||
|
|
content: '\f053';
|
||
|
|
color: #fff;
|
||
|
|
display: inline-block;
|
||
|
|
font-family: 'FontAwesome';
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
.tp-rightarrow{
|
||
|
|
line-height: 60px;
|
||
|
|
display: inline-block;
|
||
|
|
|
||
|
|
}
|
||
|
|
.tp-rightarrow:after{
|
||
|
|
content: '\f054';
|
||
|
|
color: #fff;
|
||
|
|
display: inline-block;
|
||
|
|
font-family: 'FontAwesome';
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
.tp-rightarrow,.flex-direction-nav .flex-next{
|
||
|
|
-webkit-transform:translateX(40px);
|
||
|
|
-moz-transform:translateX(40px);
|
||
|
|
-o-transform:translateX(40px);
|
||
|
|
-ms-transform:translateX(40px);
|
||
|
|
transform:translateX(40px);
|
||
|
|
}
|
||
|
|
.ie9 .tp-leftarrow,.ie9 .tp-rightarrow{
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
.revolution_slider:hover .tp-leftarrow,.revolution_slider:hover .tp-rightarrow,
|
||
|
|
.flexslider:hover .flex-direction-nav a{
|
||
|
|
-webkit-transform:translateX(0px);
|
||
|
|
-moz-transform:translateX(0px);
|
||
|
|
-o-transform:translateX(0px);
|
||
|
|
-ms-transform:translateX(0px);
|
||
|
|
transform:translateX(0px);
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
.ie9 .revolution_slider:hover .tp-leftarrow,.ie9 .revolution_slider:hover .tp-rightarrow,
|
||
|
|
.ie9 .flexslider:hover .flex-direction-nav a{
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.simple_s_caption{
|
||
|
|
position:absolute;
|
||
|
|
bottom:0;
|
||
|
|
left:0;
|
||
|
|
width:100%;
|
||
|
|
padding:15px 20px;
|
||
|
|
background:rgba(41,47,56,.7);
|
||
|
|
-webkit-transform:translateY(100%);
|
||
|
|
-moz-transform:translateY(100%);
|
||
|
|
-o-transform:translateY(100%);
|
||
|
|
transform:translateY(100%);
|
||
|
|
}
|
||
|
|
.sub_sideshow,.sub_video{
|
||
|
|
width:555px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@media (max-width: 991px){
|
||
|
|
.caption .slider-top:after{
|
||
|
|
width: 7px;
|
||
|
|
height: 1px;
|
||
|
|
background: #fff;
|
||
|
|
margin-bottom: 3px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.caption .slider-top:before{
|
||
|
|
width: 7px;
|
||
|
|
height: 1px;
|
||
|
|
background: #fff;
|
||
|
|
margin-bottom: 3px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.slider_title p::before {
|
||
|
|
height: 1px;
|
||
|
|
margin-bottom: 3px;
|
||
|
|
margin-right: 2px;
|
||
|
|
}
|
||
|
|
.slider_title p::after {
|
||
|
|
height: 1px;
|
||
|
|
margin-bottom: 3px;
|
||
|
|
margin-right: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
@media (max-width: 767px){
|
||
|
|
|
||
|
|
.revolution_slider {
|
||
|
|
margin-top: 37px;
|
||
|
|
}
|
||
|
|
.slider_title p {
|
||
|
|
line-height: 4em;
|
||
|
|
}
|
||
|
|
.slider-check {
|
||
|
|
padding: 12px 10px;
|
||
|
|
margin-left: 2px;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (max-width: 675px){
|
||
|
|
.caption h2 {
|
||
|
|
margin-top: 13%;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
@media (max-width: 575px){
|
||
|
|
.caption h2 {
|
||
|
|
margin-top: 11%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (max-width: 480px){
|
||
|
|
.caption h2 {
|
||
|
|
margin-top: 16%;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
.slider_title p {
|
||
|
|
line-height: 4em;
|
||
|
|
}
|
||
|
|
.caption .slider-top:after{
|
||
|
|
height: 1px;
|
||
|
|
width: 3px;
|
||
|
|
margin-bottom: 0px;
|
||
|
|
margin-left:0px;
|
||
|
|
}
|
||
|
|
.caption .slider-top:before{
|
||
|
|
height: 1px;
|
||
|
|
width: 3px;
|
||
|
|
margin-bottom: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slider_title p::before {
|
||
|
|
height: 1px;
|
||
|
|
margin-bottom: 0px;
|
||
|
|
margin-right: 0px;
|
||
|
|
width: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slider_title p::after {
|
||
|
|
width: 3px;
|
||
|
|
height: 1px;
|
||
|
|
margin-bottom: 0px;
|
||
|
|
margin-left: 0px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.tp-leftarrow, .tp-rightarrow, .flex-direction-nav a {
|
||
|
|
width: 35px;
|
||
|
|
height: 35px;
|
||
|
|
}
|
||
|
|
.tp-rightarrow {
|
||
|
|
line-height: 32px;
|
||
|
|
}
|
||
|
|
.tp-leftarrow {
|
||
|
|
line-height: 32px;
|
||
|
|
}
|
||
|
|
.tp-rightarrow:after{
|
||
|
|
font-size: 10px;
|
||
|
|
}
|
||
|
|
.tp-leftarrow:before{
|
||
|
|
font-size: 10px;
|
||
|
|
}
|
||
|
|
.tp-rightarrow, .flex-direction-nav a {
|
||
|
|
margin-right: -15px;
|
||
|
|
}
|
||
|
|
.tp-leftarrow, .flex-direction-nav a {
|
||
|
|
margin-left: -15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
@media (max-width: 360px){
|
||
|
|
.caption h2 {
|
||
|
|
margin-top: 18%;
|
||
|
|
font-size: 10px;
|
||
|
|
}
|
||
|
|
}
|