You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
4.9 KiB
CSS
74 lines
4.9 KiB
CSS
/*basic*/
|
|
h1 {color: #333;font-weight: 300;border: 0;font-size: 40px; margin-bottom:10px; text-align:center}
|
|
h2 { font-weight:300; font-size:30px; text-align:center; position:relative;}
|
|
h3 { font-size:24px;}
|
|
a { text-decoration:none;}
|
|
.text-center { text-align:center}
|
|
.font30 { font-size:30px;}
|
|
.thumbnailbox { padding:50px 0;}
|
|
.bg-gary { background:#f1f1f1;}
|
|
/*banner*/
|
|
.daytours-banner { position:relative;min-height:600px; overflow:hidden; background:url(/image/daytours/daytour-banner.jpg) no-repeat center; background-size:cover; padding:50px; color:#fff; text-align:center;}
|
|
.daytours-banner p { color:#fff; text-align:center; font-size:20px;}
|
|
.daytours-banner p.banner-title { font-size:48px; font-weight:300; margin-top:70px; line-height:1.2em; margin-bottom:15px;}
|
|
@media (max-width:768px) {
|
|
.daytours-banner { padding:30px 5px; min-height:auto}
|
|
.daytours-banner p.banner-title { font-size:30px; font-weight:600; margin-top:30px;}
|
|
}
|
|
/**/
|
|
.daytours-list { position:relative; margin-bottom:30px;}
|
|
.daytours-list img { border-radius:6px;}
|
|
.tours-caption{position: absolute;bottom: 0;left: 0;right: 0;}
|
|
.opacity-bg {position: absolute;top: auto; bottom: 0;left: 0;right: 0; background: #000; filter: alpha(Opacity=70); -moz-opacity: 0.70; opacity: 0.70; width: 100%; height: 100%; border-radius: 0 0 6px 6px}
|
|
.caption-info {color: #f9f9f9; position: relative; padding: 20px 20px 10px; z-index: 2; text-shadow: 5px 5px 5px #000;}
|
|
.caption-title { font-size:36px; text-transform:uppercase; color:#fff; text-align:center; z-index:9; position:absolute; width:100%; top:-150px;text-shadow: 5px 5px 5px #000;}
|
|
.caption-info li { position:relative; padding-left:20px; margin-bottom:8px;}
|
|
.caption-info li i { font-size:8px; position:absolute; left:0; top:6px;}
|
|
.daytours-list:hover .tours-caption { top:0;}
|
|
.daytours-list:hover .tours-caption .opacity-bg { border-radius:6px;}
|
|
.daytours-list:hover .tours-caption .caption-title { position:relative; top:50px;}
|
|
.daytours-list:hover .caption-info { position:absolute; bottom:0px;}
|
|
.caption-price { display:none;}
|
|
.daytours-list:hover .tours-caption .caption-info .caption-price { display:block; border-top: dashed 1px #f9f9f9; margin-top:15px; padding-top:10px; text-align:right;}
|
|
@media ( max-width: 1068px ) and (min-width: 768px) {
|
|
.tours-caption { position: relative; background:#fff; margin-top:-80px;}
|
|
.opacity-bg { display:none;}
|
|
.caption-info { color:#545454; text-shadow: 0px 0px 0px #fff;}
|
|
.caption-title { font-size:24px; text-transform: none; color:#333; text-align:center; z-index:9; position: static; width:100%; top:0px;text-shadow: 0px 0px 0px #fff; margin-bottom:0; padding-top:20px;}
|
|
.daytours-list:hover .tours-caption { top:auto;}
|
|
.daytours-list:hover .tours-caption .caption-title { position:relative; top:auto;}
|
|
.daytours-list:hover .caption-info { position: static; bottom:0px;}
|
|
.caption-price { display:block; border-top: dashed 1px #ccc; margin-top:15px; padding-top:10px; text-align:right;}
|
|
.daytours-list:hover .tours-caption .caption-info .caption-price { border-top: dashed 1px #ccc; padding-top:10px;}
|
|
}
|
|
/**/
|
|
.daytoursbox { text-align:center; font-size:24px; color:#555; position:relative;}
|
|
.daytoursbox p { font-size:18px; line-height:1.7em;}
|
|
.daytours-caption { min-height:400px; padding:60px 0 30px; background-size: auto 100%;}
|
|
.tourtypesbox{ background:url(/image/daytours/tour-types.png) no-repeat right bottom; background-size: auto 98%;}
|
|
.tourtypes {background:url(/image/daytours/tour-types-bg.png) no-repeat center top #f2f2f2;}
|
|
.schedulesbox { background:url(/image/daytours/schedules.png) no-repeat left bottom;background-size: auto 98%;}
|
|
.schedules {background:url(/image/daytours/schedules-bg.png) no-repeat center bottom ;}
|
|
.cancellationbox{ background:url(/image/daytours/cancellation.png) no-repeat 95% center;background-size: auto 90%; }
|
|
.cancellation {background:url(/image/daytours/cancellation-bg.png) repeat; background-size:auto auto;}
|
|
.servicebox { background:url(/image/daytours/service.png) no-repeat top right;background-size: auto 98%;}
|
|
.service {background:url(/image/daytours/service-bg.png) no-repeat center center #f2f2f2;background-size: auto 95%;}
|
|
@media ( max-width: 1068px ) and (min-width: 768px) {
|
|
.tourtypesbox,.schedulesbox,.service {background-size: auto 70%;}
|
|
.cancellationbox {background-size: auto 50%;}
|
|
}
|
|
@media (max-width:768px) {
|
|
.daytours-caption{background-size: 60% auto; color:#333; padding:50px 0 30px;}
|
|
.daytoursbox{ background-position:center center;min-height:auto;background-size: 100%;}
|
|
.white-bg {background:rgba(255, 255, 255, 0.65);position: absolute; top:0; bottom:0; left:0; right:0;}
|
|
}
|
|
@media (min-width:768px){
|
|
.col-sm-offset-5 { margin-left: 20.833333333333336% }
|
|
}
|
|
@media (min-width:992px){
|
|
.col-md-offset-7 { margin-left: 29.166666666666668% }
|
|
}
|
|
.code-title { font-size:30px; font-weight:600px; color:#333; line-height:1.1em;}
|
|
.code-text { font-size:24px; font-weight:300; margin-bottom:10px; color:#333;}
|
|
.code-pic { max-width: 100%; height: auto }}
|