@ charset "utf-8" ;
@ import url ( 'https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i' ) ;
body { font-family : 'Hind Madurai' , sans-serif }
/* new fonts */
/* latin */
@ font-face {
font-family : 'Alegreya Sans' ;
font-style : normal ;
font-weight : 500 ;
font-display : swap ;
src : local ( 'Alegreya Sans Medium' ) , local ( 'AlegreyaSans-Medium' ) , url ( https : / / www . asiahighlights . com / css / fonts / 5aUu9_-1phKLFgshYDvh6Vwt5alOqEp2iw . woff2 ) format ( 'woff2' ) ;
unicode-range : U + 0000-00FF , U + 0131 , U + 0152-0153 , U + 02BB-02BC , U + 02C6 , U + 02DA , U + 02DC , U + 2000-206F , U + 2074 , U + 20AC , U + 2122 , U + 2191 , U + 2193 , U + 2212 , U + 2215 , U + FEFF , U + FFFD ;
}
/* latin */
@ font-face {
font-family : 'Alegreya Sans' ;
font-style : normal ;
font-weight : 400 ;
font-display : swap ;
src : local ( 'Alegreya Sans Regular' ) , local ( 'AlegreyaSans-Regular' ) , url ( https : / / www . asiahighlights . com / css / fonts / 5aUz9_-1phKLFgshYDvh6Vwt7VptvQ . woff2 ) format ( 'woff2' ) ;
unicode-range : U + 0000-00FF , U + 0131 , U + 0152-0153 , U + 02BB-02BC , U + 02C6 , U + 02DA , U + 02DC , U + 2000-206F , U + 2074 , U + 20AC , U + 2122 , U + 2191 , U + 2193 , U + 2212 , U + 2215 , U + FEFF , U + FFFD ;
}
@ font-face {
font-family : 'Alegreya Sans' ;
font-style : normal ;
font-weight : 700 ;
font-display : swap ;
src : local ( 'Alegreya Sans Bold' ) , local ( 'AlegreyaSans-Bold' ) , url ( https : / / www . asiahighlights . com / css / fonts / 5aUu9_-1phKLFgshYDvh6Vwt5eFIqEp2iw . woff2 ) format ( 'woff2' ) ;
unicode-range : U + 0000-00FF , U + 0131 , U + 0152-0153 , U + 02BB-02BC , U + 02C6 , U + 02DA , U + 02DC , U + 2000-206F , U + 2074 , U + 20AC , U + 2122 , U + 2191 , U + 2193 , U + 2212 , U + 2215 , U + FEFF , U + FFFD ;
}
/* latin */
@ font-face {
font-family : 'Hind Madurai' ;
font-style : normal ;
font-weight : 300 ;
font-display : swap ;
src : local ( 'Hind Madurai Light' ) , local ( 'HindMadurai-Light' ) , url ( https : / / www . asiahighlights . com / css / fonts / f0Xu0e2p98ZvDXdZQIOcpqjfXaUXfsEp . woff2 ) format ( 'woff2' ) ;
unicode-range : U + 0000-00FF , U + 0131 , U + 0152-0153 , U + 02BB-02BC , U + 02C6 , U + 02DA , U + 02DC , U + 2000-206F , U + 2074 , U + 20AC , U + 2122 , U + 2191 , U + 2193 , U + 2212 , U + 2215 , U + FEFF , U + FFFD ;
}
/* latin */
@ font-face {
font-family : 'Hind Madurai' ;
font-style : normal ;
font-weight : 400 ;
font-display : swap ;
src : local ( 'Hind Madurai Regular' ) , local ( 'HindMadurai-Regular' ) , url ( https : / / www . asiahighlights . com / css / fonts / f0Xx0e2p98ZvDXdZQIOcpqjX9ocC . woff2 ) format ( 'woff2' ) ;
unicode-range : U + 0000-00FF , U + 0131 , U + 0152-0153 , U + 02BB-02BC , U + 02C6 , U + 02DA , U + 02DC , U + 2000-206F , U + 2074 , U + 20AC , U + 2122 , U + 2191 , U + 2193 , U + 2212 , U + 2215 , U + FEFF , U + FFFD ;
}
/* CSS Document */
# inquiryBox { display : block ; margin : 0 0 35 px ; background-color : #FFF ; padding : 50 px ; border-radius : 4 px ; float : right ; width : 100 % ; }
. wholeWrap { background : url ( https://data.asiahighlights.com/image/inquiry-pc-header.jpg ) no-repeat fixed ; background-size : 100 % ; padding-top : 60 px ; padding-right : 15 % ; width : 100 % ; padding-bottom : 100 px }
. wholeWrap2 { background : url ( https://data.asiahighlights.com/image/tailor-made-pc.jpg ) no-repeat fixed ; background-size : 100 % ; padding-top : 60 px ; padding-right : 15 % ; width : 100 % ; padding-bottom : 100 px }
h3 { font-size : 20 px ;
font-weight : 500 ;
font-family : 'Alegreya Sans' , sans-serif ; margin-bottom : 10px ; margin-top : 40px ; }
h2 { font-family : 'Alegreya Sans' , sans-serif ; font-size : 28 px ; font-weight : 700 ; text-align : center ; margin : 30 px 0 25 px 0 ; }
. settleBlock { padding : 15 px 0 ; width : 100 % ; }
. settleMponey { font-size : 24 px ; font-weight : 700 ; border-top : 1 px dashed #d1d1d1 ; border-bottom : 1 px dashed #d1d1d1 ; padding : 15 px 0 ; font-family : 'Alegreya Sans' , sans-serif ; }
. settleItems { font-size : 18 px }
. totalPrice { color : #ad1818 }
. settlePart { border-top : 1 px dashed #d1d1d1 ; padding : 20 px 0 }
# inquiryBox h1 { font-size : 36 px ; margin : 0 0 15 px ; font-family : 'Alegreya Sans' , sans-serif ; font-weight : 700 ; border : 0 ; text-align : center ; }
# contactInfo { display : block ; box-shadow : 0 0 5 px #999 ; border-radius : 4 px ; margin : 0 0 25 px ; padding : 25 px ; background : #fff ; }
# contactInfo h2 { font-size : 24 px ; border-bottom : 1 px solid #d1d1d1 ; padding-bottom : 20 px ; margin : 0 0 00 px ; }
. labelTitle { display : block ; font-size : 16 px ; font-weight : 400 ; color : #333 ; margin : 30 px 0 15 px ; }
. labelTitle . whatsThis { color : #a31022 ; font-size : 13 px ; }
textarea { font-family : 'Open Sans' , sans-serif !important ; font-size : 16 px ; line-height : 26 px ; padding : 15 px !important ; border : 1 px solid #d1d1d1 ; background : #fff ; width : 100 % ; height : 200 px ; border-radius : 2 px ; margin-top : 10 px ; }
textarea : focus { border : 1 px solid #7D9EC0 ; outline : none }
# contactInfo . subTitle { display : block ; font-size : 16 px ; font-weight : 400 ; color : #333 ; margin : 30 px 0 15 px ; }
# contactInfo input { width : 100 % ; font-size : 14 px ; font-family : 'Open Sans' , sans-serif !important ; border-radius : 2 px !important ; padding : 8 px 15 px ; color : #777 !important ; background : #fff ; border : 1 px solid #d1d1d1 ; }
# inquiryBox label { font-weight : normal ; }
# inquiryBox . checked { background : url ( /pic/checked-icon.png ) no-repeat left ; }
# inquiryBox select { width : 100 % ; font-size : 14 px ; font-family : 'Open Sans' , sans-serif !important ; border-radius : 2 px !important ; padding : 2 px 10 px ; cursor : pointer ; appearance : none ; -moz- appearance : none ; -webkit- appearance : none ; background : url ( /pic/select-tag.png ) no-repeat 96 % center #fff ; background-size : 18 px 10 px ; color : #777 !important ; border : 1 px solid #d1d1d1 ; }
# inquiryBox select option { padding : 5 px 0 5 px 10 px ; }
# contactInfo select { width : 100 % ; font-size : 14 px ; font-family : 'Open Sans' , sans-serif !important ; border-radius : 2 px !important ; padding : 2 px 10 px ; cursor : pointer ; appearance : none ; -moz- appearance : none ; -webkit- appearance : none ; background : url ( /pic/select-tag.png ) no-repeat 96 % center #fff ; background-size : 18 px 10 px ; color : #777 !important ; border : 1 px solid #d1d1d1 ; height : 38 px }
# contactInfo select option { padding : 5 px 0 5 px 10 px ; }
/* selection box */
. optionLable input { display : none ; }
. checkboxGender input [ type = "radio" ] + label { font-size : 18 px ; padding : 15 px 0 ; border : 1 px solid #d1d1d1 ; border-radius : 4 px ; display : block ; margin-top : 10 px ; text-align : center ; color : #999 ; font-family : 'Alegreya Sans' , sans-serif ; height : 60 px ; }
. checkboxGender input [ type = "radio" ] : checked + label { background-color : #ad1818 ; color : #FFF ; border-color : #ad1818 }
. optionLable input [ type = "radio" ] + label { font-size : 18 px ; border : 1 px solid #d1d1d1 ; border-radius : 4 px ; display : block ; text-align : center ; color : #999 ; min-height : 65 px ; font-family : 'Alegreya Sans' , sans-serif ; font-weight : 500 !important ; padding : 10 px }
. optionLable { width : 32 % ; display : inline-block ; margin-top : 10 px ; }
. optionLable input [ type = "radio" ] : checked + label { border : 2 px solid #ad1818 ; color : #ad1818 }
. selectHotl { width : 100 % ; text-align : center }
. optionLable : nth-child ( 3 ) { float : right }
. optionLable : nth-child ( 1 ) { float : left }
. checkboxLabel input [ type = "checkbox" ] + label { font-size : 22 px ; padding : 5 px 0 ; border : 1 px solid #d1d1d1 ; border-radius : 4 px ; display : block ; margin-top : 10 px ; text-align : center ; color : #999 ; height : 65 px ; font-family : 'Alegreya Sans' , sans-serif ; padding-top : 15 px ; }
. checkboxLabel input [ type = "checkbox" ] : checked + label { border : 2 px solid #ad1818 ; color : #ad1818 }
. checkboxLabel { display : block ; width : 100 % ; }
. checkboxLabel input { display : none }
. selectionMemo { font-size : 12 px ; font-style : italic ; font-weight : 300 ; margin-top : 2 px }
# inquiryBox . flexibleDate { display : inline-block ;
margin-bottom : 10px ;
padding : 5px 0 5px 30px ; }
. genderSelection { text-align : center }
. checkboxGender { width : 32 % ; display : inline-block ; }
. checkboxGender label { width : 100 % }
. checkboxGender input { display : none }
. checkboxGender : nth-child ( 3 ) { float : right }
. checkboxGender : nth-child ( 1 ) { float : left }
. optionLable input [ type = "radio" ] + label : hover { border : 1 px solid #ad1818 ; cursor : pointer ; }
. travelTag input [ type = "checkbox" ] + label : hover { border : 1 px solid #ad1818 ; cursor : pointer ; }
. checkboxGender input [ type = "radio" ] + label : hover { border : 1 px solid #ad1818 ; cursor : pointer ; }
. inputTerm label {
display : block ;
width : 100 % ;
font-size : 18px ;
position : absolute ;
left : 20px ;
top : calc ( 50 % - 13px ) ;
transition : all ease-in-out . 5s ;
pointer-events : none ; height : 26px ;
color : # 999 ;
}
. inputTerm {
display : block ;
width : 100 % ;
margin : 15px auto ;
position : relative ;
}
. inputTerm input : focus ~ label , . inputTerm input : valid ~ label { top : 5 px ; font-size : 12 px ; color : #999 ; transition : 0.3 s ; text-transform : uppercase }
. inputTerm input : focus { border : 1 px solid #7D9EC0 ; outline : none }
. inputTerm input {
width : 100 % ;
margin : 0 ;
font-size : 22px ;
border : 1px solid # d1d1d1 ;
height : 60px ;
padding : 15px 15px 0 20px ;
border-radius : 4px ;
color : # 000 ;
}
. checkYes {
display : block ;
width : 100 % ; margin-top : 5px ; margin-bottom : 15px }
. checkBorder : checked {
background-color : # ad1818 ;
border-color : # ad1818 ; margin-right : 5px ;
}
. checkBorder {
background-color : # fff ;
border : 1px solid # c1c1c1 ; position : relative ;
width : 20px ;
height : 20px ;
background-clip : border-box ;
-webkit-appearance : none ;
-moz-appearance : none ;
appearance : none ;
margin : -0 . 15px 0 . 6px 0 0 ;
vertical-align : text-bottom ;
border-radius : 2px ;
-webkit-transition : background-color 0 . 25s ;
transition : background-color 0 . 25s ;
background-color : # fff ;
border : 1px solid # d1d1d1
}
. contactUs { border-top : 1 px solid #d1d1d1 ; }
. contactUs p { margin-top : 15 px ; font-size : 18 px ; font-weight : normal }
p a
input [ type = checkbox ] + label {
color : # 999 ;
font-size : 16px ! important ;
}
input [ type = text ] : focus { border : 1 px solid #7D9EC0 ; outline : none }
. checkYes label {
display : inline ;
font-style : italic ; font-size : 18px ; color : # 999
}
input [ type = checkbox ] : checked + label { color : #000 }
. checkBorder : checked : after {
border-color : # fff ;
}
. checkBorder : checked : after {
content : '' ;
display : block ;
height : 8px ;
width : 14px ;
border : 0 solid # FFF ;
border-width : 0 0 2px 2px ;
-webkit-transform : rotate ( -45deg ) ;
transform : rotate ( -45deg ) ;
position : absolute ;
top : 3px ;
left : 2px ;
}
. formMemo { font-size : 16 px ; color : #999 ; display : block ; margin-top : -10 px }
. chooseothers { font-size : 18 px ; color : #000 ; display : block ; margin-top : 10 px }
. inquiryBtn { display : block ; text-align : center ; font-family : Georgia , "Times New Roman" , Times , serif ; font-size : 24 px }
button { background : linear-gradient ( #ca3c3b , #ad1818 ) ;
text-align : center ;
display : table ;
border-radius : 60px ;
min-width : 38 % ;
margin : 25px auto ;
padding : 8px 30px ; color : # FFF ; font-family : 'Alegreya Sans' , sans-serif ; font-weight : 500 ; font-size : 20px ; border : solid 0px }
input [ type = submit ] : hover { width : 42 % }
i { margin-left : 10 px }
. howWeWork { font-size : 18 px ; margin-top : -15 px ; margin-bottom : 50 px ; text-align : center ; margin : 0 auto ; padding-bottom : 35 px ; }
. preface { font-size : 18 px ; margin-top : -15 px ; margin-bottom : 50 px ; text-align : center ; margin : 0 auto ; }
. interestedRoute { background : url ( https://data.asiahighlights.com/image/fast-nav-backpic.png ) no-repeat top ; background-size : 100 % ; position : relative ; margin : 20 px 0 10 px 0 ; padding : 20 px 0 5 px 0 ; margin-top : 20 px }
. routeName { font-size : 22 px ; text-align : center ; font-weight : 400 ; margin : 0 auto ; font-family : 'Alegreya Sans' , sans-serif ; font-style : italic ; }
. headerText { background-color : #FFF ; margin : 0 auto ; padding : 0 15 px ; text-align : center ; font-weight : 500 ; font-size : 14 px ; height : 22 px ; width : 200 px ; left : calc ( 50 % - 100 px ) ; position : absolute ; top : -8 px ; }
. readMore {
max-height : 0 ;
overflow : hidden ;
transition : max-height . 3s ;
}
: checked ~ . readMore {
max-height : 666px ;
}
. foldDestinations input [ type = "checkbox" ] {
clip : rect ( 0 0 0 0 ) ;
position : absolute ;
}
# check : checked ~ . check-in {
display : none ;
}
# check : checked ~ . check-out {
display : inline-block ;
margin-top : 10px ;
}
. check-out {
display : none ;
text-align : center ;
}
. check-in , . check-out {
color : # ad1818 ;
cursor : pointer ;
font-weight : 300 ;
font-size : 20px ; text-decoration : underline ;
}
# check : checked + . foldDestinations > . readMore {
max-height : 666px ;
}
. formNote { color : #999 ; font-size : 16 px }
. minaddBtn : hover { border : 1 px solid #ad1818 ; background-color : #ad1818 ; color : #fff }
. number , . minaddBtn : focus { border : 1 px solid #ad1818 ; outline : none }
. peopleSelect { width : 45 % ; margin-top : 20 px ; font-size : 24 px ; display : inline-block ; }
. peopleSelect : nth-child ( odd ) { float : right ; }
. minaddBtn { background : #FFF ; border : 1 px solid #d1d1d1 ; border-radius : 4 px ; color : #ad1818 ; height : 65 px ; font-weight : 700 ; width : 28 % ; display : inline-block }
. numberBtn { width : 100 % ; overflow : hidden ; }
. numberBtn : nth-child ( 3 ) { float : right }
. number { width : 35 % ; text-align : center ; border : 1 px solid #d1d1d1 ; border-radius : 4 px ; font-weight : 300 ; height : 65 px }
. kidNum { margin-left : 5 px ; width : 35 % ; text-align : center ; border : 1 px solid #d1d1d1 ; border-radius : 4 px ; font-weight : 300 ; height : 65 px }
# Date_Start { width : 100 % ; font-size : 18 px ; font-family : 'Open Sans' , sans-serif !important ; border-radius : 2 px !important ; padding : 8 px 15 px ; color : #777 !important ; background : url ( /pic/calendar-icon-red.png ) no-repeat 96 % 20 px #fff ; border : 1 px solid #d1d1d1 ; height : 60 px }
. travelStyle input { display : none ; }
. travelStyle input [ type = "checkbox" ] + label {
margin-left : 8px ;
margin-top : 8px ;
font-size : 14px ;
padding : 5px 7px ;
color : # 999 ;
border : 1px solid # d1d1d1 ;
border-radius : 2px ;
}
. travelTag { margin-left : -8 px }
. travelStyle { display : inline-block }
. travelStyle input [ type = "checkbox" ] : checked + label { color : #FFF ; background-color : #ad1818 ; border-color : #ad1818 }
hr { color : #d1d1d1 ; border : 1 px dotted ; margin-top : 25 px ; }
. workingSteps { font-size : 18 px ; color : #FFF ; padding-bottom : 80 px ; overflow : hidden ; position : relative ; }
. stepLogo img { width : 50 px }
. detailedSteps strong { font-weight : 700 }
. stepText { padding-left : 10 px }
. dotted { width : 1 px ; border-left : 2 px dashed #f1f1f1 ; height : 180 px ; position : absolute ; top : 50 px ; left : 40 px ; }
. stpeBlock { padding-top : 60 px }