@import (optional, reference) "init.less"; html.openmenu{ overflow: hidden; position: relative; } body{ font-size: 14px; line-height: 25px; font-family: @font_01; color: @color_text_333; } #vnt-wrapper{ width: 100%; } #vnt-container{ width: 100%; margin: 0 auto; position: relative; } .wrapper{ width: 100%; padding: 0 15px; max-width: 1180px; margin: 0 auto; } a{ font-size: 14px; line-height: 25px; color: @color_text_333; -webkit-transition:color 0.5s ease; -moz-transition:color 0.5s ease; -o-transition:color 0.5s ease; transition:color 0.5s ease; } a:hover{ color:@color1; } a:focus, a:active{ outline: none; text-decoration: none; } /*==BEGIN: HEADER==*/ #vnt-header{ width: 100%; position: relative; } #vnt-header::after { content: ''; position: absolute; width: 100%; height: 5px; bottom: -5px; background: rgba(0, 0, 0, 0.2); opacity: .6; z-index: 9998; } .vnt-headerTop{ color: @color_white; position: relative; z-index:9998; padding: 10px 0px; border-top: 0px solid @color_c; } .vnt-headerTop .vnt-logo{ width: 500px; float: left; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; margin-bottom: 5px; } .vnt-headMain .vnt-logo-mobile .logo{ margin-right: 10px; padding-top: 5px; padding-left: 10px; } .vnt-headMain .vnt-logo-mobile .logo a{ display: block; } .vnt-headerTop .vnt-logo .logo .title_logo{ font-family: 'Roboto Mideum'; font-weight: 600; font-size: 12px; text-transform: uppercase; color: @color_text_333; } .vnt-logo-mobile .logo .title_logo{ font-family: 'Roboto Mideum'; font-weight: 600; font-size: 8px; text-transform: uppercase; color: @color_text_333; } .vnt-headerTop .vnt-logo .logo{ width: 20%; float: left; } .vnt-headerTop .vnt-logo .slogan { width: -moz-calc(100% - 20%); width: -webkit-calc(100% - 20%); width: -o-calc(100% - 20%); width: calc(100% - 20%); float: left; } .vnt-headerTop .vnt-logo .slogan .s_addess ul li, .vnt-headMain .vnt-logo-mobile .slogan .s_addess ul li{ /*padding-left: 25px;*/ position: relative; font-size: 24px; color: @color1; font-family: 'Roboto Bold'; font-weight: 600; text-transform: uppercase; } .vnt-headerTop .vnt-logo .slogan .s_addess ul li.swebsite{ margin-bottom: 5px; } .vnt-headerTop .vnt-logo .slogan .s_addess ul li.swebsite:before{ content: ''; position: absolute; width: 90%; border-bottom: 1px solid @color1; left: 0; bottom: -3px; /*transform: translateX(-50%);*/ } .vnt-headerTop .vnt-logo .slogan .s_addess ul li.semail{ text-transform: none; font-family: 'Roboto Italic'; color: @color_text_333; font-weight: normal; font-size: 18px; } .vnt-headMain .vnt-logo-mobile .slogan .s_addess ul li.swebsite{ font-size: 14px; margin-bottom: 5px; } .vnt-headMain .vnt-logo-mobile .slogan .s_addess ul li.swebsite:before{ content: ''; position: absolute; width: 90%; border-bottom: 1px solid @color1; left: 0; bottom: -3px; /*transform: translateX(-50%);*/ } .vnt-headMain .vnt-logo-mobile .slogan .s_addess ul li.semail{ text-transform: none; font-family: 'Roboto Italic'; color: @color_text_333; font-weight: normal; font-size: 12px; } /*.vnt-headerTop .vnt-logo .slogan .s_addess ul li::after, .vnt-headMain .vnt-logo-mobile .slogan .s_addess ul li::after{ font-family: "Fontawesome"; position: absolute; font-size: 18px; color: @color_text_bbb; top: 0px; left: 0px; text-align: center; }*/ /*.vnt-headerTop .vnt-logo .slogan .s_addess ul li.saddress::after{ content: '\f015'; } .vnt-headerTop .vnt-logo .slogan .s_addess ul li.sphone::after{ content: '\f095'; } .vnt-headerTop .vnt-logo .slogan .s_addess ul li.semail::after, .vnt-headMain .vnt-logo-mobile .slogan .s_addess ul li.semail::after{ content: '\f0e0'; } .vnt-headerTop .vnt-logo .slogan .s_addess ul li.swebsite::after, .vnt-headMain .vnt-logo-mobile .slogan .s_addess ul li.swebsite::after{ content: '\f0ac'; }*/ .vnt-headerTop .vnt-logo img{ max-width: 375px; } .vnt-headerTop .info_header{ float: right; .width_calc(100%,500px); } .vnt-headerTop .topHotline{ font-size: 18px; line-height: 22px; padding: 5px 0; padding-left: 35px; position: relative; text-align: right; /*display:inline-block;*/ float: right; } .vnt-headerTop .topHotline:before{ content: '\f2a0'; font-family: "Fontawesome"; position: absolute; font-size: 18px; color: @red; top: 7px; left: 0px; width: 30px; height: 30px; text-align: center; line-height: 30px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; } .vnt-headerTop .topHotline span{ line-height: 30px; } .vnt-headerTop .topHotline span.name{ color:@color_black; text-transform: uppercase; font-size: 14px; } .vnt-headerTop .topHotline span.phone{ font-size: 18px; color: @red; position: relative; padding-left: 15px; font-weight: 600; } .vnt-headerTop .header-user{ padding: 5px 15px; background: @color_c0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; float: right; margin-right: 15px; } .vnt-headerTop .header-user .icon-user{ padding-left:25px; padding-right: 25px; position: relative; color: @color_white; } .vnt-headerTop .header-user .icon-user.user_login::before{ content: '\f090'; font-family: "FontAwesome"; position: absolute; font-size: 16px; color: @color_white; top: 50%; left: 0; .transform_translate(0,-50%); } .vnt-headerTop .header-user .icon-user.user_registry::before{ content: '\f007'; font-family: "FontAwesome"; position: absolute; font-size: 16px; color: @color_white; top: 50%; left: 0; .transform_translate(0,-50%); } .vnt-headerTop .header-user .icon-user.user_login:after { content: ' '; width: 1px; height: 5px; border-right: 1px solid #c2c4c6; margin-left: 15px; } .vnt-headerTop .header-user .icon-user:hover{ color:@color1; } .vnt-headerTop .header-user a { color: #eafb07} .vnt-headerTop .header-user.active, .vnt-headerTop .header-user.active a{ color: @color1; } .vnt-headerTop .top_tool{ /*display:inline-block;*/ float: right; } .vnt-headerTop .vnt-search{ position: relative; width: 38px; height: 30px; float: right; } .vnt-headerTop .vnt-search .formsearch{ position: absolute; top: 100%; right: 0; width: 270px; margin-top: 1px; border: 1px solid #cccccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; background: #ffffff; visibility: hidden; opacity:0; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; z-index: 250; } .vnt-headerTop .vnt-search.show .formsearch{ visibility: visible; opacity: 1; } .vnt-headerTop .vnt-search .formsearch .form-control{ border: none; outline: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; -ms-box-shadow: none; box-shadow: none; } .vnt-headerTop .vnt-search .formsearch button.btn{ width: 34px; height: 34px; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; -ms-box-shadow: none; box-shadow: none; background: none; position: relative; } .vnt-headerTop .vnt-search .formsearch button.btn:after{ position: absolute; top: 50%; left: 50%; font-family: "fontawesome"; content: '\f002'; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); color: #585858; } .vnt-headerTop .vnt-search .div_title{ width: 30px; height: 30px; position: relative; cursor: pointer; border-radius: 100%; background: @color1; } .vnt-headerTop .vnt-search .div_title:after{ position: absolute; font-family: "fontawesome"; content: '\f002'; top: 50%; left: 50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); font-size: 18px; line-height: 20px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; color: @color_white; } .vnt-headerTop .vnt-search.active .div_title, .vnt-headerTop .vnt-search:hover .div_title:after{ color: @red; } .vnt-headerTop .vnt-langues{ float: right; position: relative; margin-right:10px; } .vnt-langues .vl_title{ border: 1px solid #dedede; border-radius: 4px; display: inline-block; font-family: Arial; line-height: 25px; padding: 4px 33px; } .vnt-langues .vl_title:after{ position: absolute; font-family: FontAwesome; content: '\f0d7'; top: 50%; right: 10px; font-size: 12px; color : #acacac; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } .vnt-langues .vl_title:before{ position: absolute; font-family: FontAwesome; content: '\f0ac'; top: 50%; left: 10px; font-size: 18px; color : #acacac; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } .vnt-langues .vl_title img{ max-height: 13px; display: inline-block; vertical-align: middle; margin-right: 5px; } .vnt-langues .vl_content{ position: absolute; top: 100%; right: 0; background: #ececec; min-width: 100%; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; text-align:left; } .vnt-langues.active .vl_content{ opacity: 1; z-index:100; visibility: visible; } .vnt-langues .vl_content ul li{ border-bottom: 1px solid #ffffff; } .vnt-langues .vl_content ul li a{ display: block; font-size: 12px; line-height: 17px; padding: 4px 5px; min-width: 100px; color: #333333; position: relative; cursor: pointer; } .vnt-langues .vl_content ul li a:hover{ color:#de001d; } .vnt-langues .vl_content ul li a img{ max-height: 13px; display: inline-block; vertical-align: middle; margin-right: 5px; } .vnt-headerTop .vnt-menutop{ float: left; padding-top: 5px; } .vnt-headerTop .vnt-menutop ul:after{ display: block; content: ''; clear: both; } .vnt-headerTop .vnt-menutop ul li{ float: left; font-size: 12px; line-height: 20px; text-transform: uppercase; } .vnt-headerTop .vnt-menutop ul li a{ font-size: 12px; line-height: 20px; display: block; padding: 5px 13px; text-transform: uppercase; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; color: @color_text_333; } .vnt-headerTop .vnt-menutop ul li.current a, .vnt-headerTop .vnt-menutop ul li:hover a{ color: @color3; } /*---------------------*/ .vnt-headMain{ position: relative; z-index:9997; background: @color1; } .vnt-headMain .fixed_menu{ background: @color1; position: relative; top: 0; left: 0; width: 100%; z-index: 200; padding: 0px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; } .vnt-headMain .fixed_menu.active{ position: fixed; -webkit-box-shadow:0 3px 3px rgba(0,0,0,0.1); -moz-box-shadow:0 3px 3px rgba(0,0,0,0.1); -o-box-shadow:0 3px 3px rgba(0,0,0,0.1); -ms-box-shadow:0 3px 3px rgba(0,0,0,0.1); box-shadow:0 3px 3px rgba(0,0,0,0.1); } .vnt-headMain .vnt-logo-mobile { float: left; display: none; } .vnt-headMain .vnt-menuMain{ width: 100%; float: none; position: relative; } .vnt-headMain .vnt-menuMain > ul:after{ clear: both; content: ''; display: block; } .vnt-headMain .vnt-menuMain > ul{ display: table; width: 100%; } .vnt-headMain .vnt-menuMain > ul > li{ display: table-cell; text-align: center; font-size: 18px; line-height: 30px; text-transform: uppercase; position: relative; } .vnt-headMain .vnt-menuMain > ul > li:first-child{ /*border-left: 1px solid rgba(255, 255, 255, 0.3);*/ } .vnt-headMain .vnt-menuMain > ul > li > a{ display: block; padding: 5px 0px; line-height: 30px; font-size: 15px; color: #ffffff; } .vnt-headMain .fixed_menu.active .vnt-menuMain > ul > li > a{ /* padding: 4px 18px; */ } .vnt-headMain .vnt-menuMain > ul > li:hover > a, .vnt-headMain .vnt-menuMain > ul > li.current > a{ background: @color_c0; } .vnt-headMain .div_mobile{ float: right; display: none; } /*===========sub menu==========================*/ .vnt-menuMain > ul .sub_menu { position:absolute; z-index:9999; top:130%; left:0; width: auto; min-width: 200px; opacity:0; visibility:hidden; //opacity:1; transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; border: none; list-style: none; background: @color1; } .vnt-menuMain > ul li:hover > .sub_menu { opacity:1; visibility:visible; top: 100%; } .vnt-menuMain > ul .sub_menu li { position:relative; border-bottom:none; float:left; padding:0px; height: auto; text-align: left; width: 100%; background: @color1; } .vnt-menuMain > ul .sub_menu li + li{ border-top: 1px solid rgba(255, 255, 255, 0.3); } .vnt-menuMain > ul .sub_menu li a { font-size:12px; white-space:nowrap; display:block; color: @color_white !important; height: 33px; line-height: 33px; padding-left: 29px; outline: none; padding-right: 40px; position: relative; padding-top: 0; padding-bottom: 0; } .vnt-menuMain > ul .sub_menu li a::before{ content: '\f105'; font-family: 'FontAwesome'; position: absolute; top: 0; left: 13px; color: #ffffff; font-size: 14px; font-weight: normal; } .vnt-menuMain > ul .sub_menu li:hover { background: @color3; } .vnt-menuMain > ul .sub_menu li:hover a{ background: @color_c0; color: @color_white !important; text-decoration: none; } .vnt-menuMain > ul .sub_menu li:hover a::before , .vnt-menuMain > ul .sub_menu li.current a::before{ color: @color_white; } .vnt-menuMain > ul .sub_menu .sub_menu { position:absolute; z-index:9999; top:0 !important; left: 101.5%; opacity:0; visibility:hidden; transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; } .vnt-menuMain > ul .sub_menu .sub_menu li:first-child { border-top:none; } .vnt-menuMain > ul .sub_menu .sub_menu:before { font-family:FontAwesome; content:''; } /*==END: HEADER==*/ /*==BEFIN: CONTENT==*/ #vnt-content{ margin-bottom: 30px; } .box-template{ margin-bottom: 20px; } .box-template .box-template-title{ height: 50px; background: @nen_tieu_de; position: relative; } .box-template .box-template-title:after{ position: absolute; content: ""; top: 100%; left: 25px; border-top: 10px solid @nen_tieu_de; border-left: 10px solid transparent; border-right: 10px solid transparent; } .box-template .box-template-title .box-template-title-cont{ font-size:25px; line-height: 35px; padding: 7px 15px; overflow: hidden; white-space: nowrap; -webkit-text-overflow: ellipsis; -moz-text-overflow: ellipsis; text-overflow: ellipsis; position: relative; color: @color_text_nen_tieu_de; text-transform: uppercase; } .box-template .box-template-title .box-template-title-cont:before{ padding-right:15px; font-size: 30px; line-height:35px; font-family: "fontawesome"; color: @color_text_nen_tieu_de; } .box-template .box-template-title .box-template-title-cont.icon-booking, .box-template .box-template-title .box-template-title-cont.icon-info{ padding-left:60px; } .box-template .box-template-title .box-template-title-cont.icon-info:before{ position: absolute; content: ""; width: 30px; height:30px; top:10px; left: 10px; background: url(../images/icon-info.svg); background-size: 30px 30px; } .box-template .box-template-title .box-template-title-cont.icon-booking:before{ position: absolute; content: ""; width: 30px; height:23px; top:14px; left: 10px; background: url(../images/icon-booking.svg); background-size: 30px 23px; } .box-template .box-template-content{ padding: 20px 15px; border: 1px solid #e5e5e5; border-top: none; } .vnt-banner{ position: relative; min-height: 320px; } .vnt-banner .banner_img{ width: 100%; height: 320px; background-repeat: no-repeat; /*background-position: 50% 50%;*/ -webkit-background-size: cover; background-size: cover; } .box-search-ticket{ position: absolute; width: 100%; bottom: 30px; right: 0; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; /*display: none;*/ } .box-search-ticket::after{ content: ''; display: block; clear: both; } .box-search-ticket .info-note{ -webkit-pointer-events: auto; -moz-pointer-events: auto; pointer-events: auto; margin-bottom: 30px; width: 450px; background: #ffffff; } .box-search-ticket .info-note .ul_info{ padding:15px 20px; border-bottom: 1px solid #d5d5d5; } .box-search-ticket .info-note .ul_info ul li{ position: relative; padding-left: 30px; font-size: 16px; line-height: 25px; color: #454545; } .box-search-ticket .info-note .ul_info ul li:after{ position: absolute; top: 0; left: 0; font-family:"fontawesome"; content: '\f00c'; font-size: 20px; line-height: 25px; color: #949290; } .box-search-ticket .hotline_book_ticket{ padding: 15px 20px; } .box-search-ticket .hotline_book_ticket .title{ font-size: 16px; line-height: 25px; font-style: italic; color: #454545; padding-left: 30px; margin-bottom: 5px; } .box-search-ticket .info-note .ul_hotline ul li{ position: relative; padding-left: 30px; font-size: 25px; line-height: 25px; margin-bottom: 7px; color: #454545; } .box-search-ticket .info-note .ul_hotline ul li a{ color: #f58120; font-weight: bold; font-size: 25px; line-height: 25px; } .box-search-ticket .info-note .ul_hotline ul li:after{ position: absolute; top: 0; left: 0; font-family:"fontawesome"; content: '\f095'; font-size: 20px; line-height: 25px; color: #949290; } .form-search-ticket{ -webkit-pointer-events: auto; -moz-pointer-events: auto; pointer-events: auto; } .form-search-ticket .form-search-link ul:after{ content: ''; display: block; clear: both; } .form-search-ticket .form-search-link ul li{ float: left; margin-right: 8px; text-align:center; } .form-search-ticket .form-search-link ul li:last-child{ margin-right: 0; } .form-search-ticket .form-search-link ul li a{ display: inline-block; font-size: 18px; line-height: 25px; padding: 8px 25px 2px 50px; color: @color_white; font-weight: bold; text-transform: uppercase; background-color: @color1; background-repeat: no-repeat; background-position: 20px 50%; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; position: relative; } .form-search-ticket .form-search-link ul li a.inland::after{ position: absolute; top: 50%; left: 18px; font-family: "fontawesome"; content: '\f1d8'; font-size: 22px; line-height: 30px; .transform_translate(0,-50%); color: @color_white; font-weight: normal; width: 25px; text-align: center; } .form-search-ticket .form-search-link ul li a.international:after{ position: absolute; top: 50%; left: 18px; font-family: "fontawesome"; content: '\f0ac'; font-size: 22px; line-height: 30px; .transform_translate(0,-50%); color: @color_white; font-weight: normal; width: 25px; text-align: center; } .form-search-ticket .form-search-link ul li.current a, .form-search-ticket .form-search-link ul li a:hover{ background-color: @color_c0; } .form-search-ticket .form-search-content{ background-color: rgba(0, 168, 89, 0.85); color: @color_text_333; border: 2px solid @color1; } .form-search-ticket .form-search-content .ticket-way{ padding: 6px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .form-search-ticket .form-search-content .ticket-way ul li{ float: left; margin-right: 15px; color: @color_white; } .form-search-ticket .form-search-content .ticket-way ul li label{ font-weight: normal; margin-bottom: 0; font-size:16px; } .form-search-ticket .form-search-content .form-input{ padding: 10px 20px; } .form-search-ticket .form-search-content .form-input .w-form-input{ width: 100%; display: table; } .form-search-ticket .form-search-content .form-input .w-form-input .f-time, .form-search-ticket .form-search-content .form-input .w-form-input .f-address{ padding-right: 30px; display: table-cell; vertical-align: top; } .form-search-ticket .form-search-content .form-input .w-form-input .f-person{ padding-right: 15px; display: table-cell; vertical-align: top; } .form-search-ticket .form-search-content .form-input .w-form-input .f_button{ width: 160px; display: table-cell; padding-top: 25px; } .f-row-security_code .form-control{ //width: 68px; // width: calc(~'100% - 92px'); .width_calc(100%,92px); float: left; margin-right: 9px; } .form-search-ticket .form-search-content .form-input .f-title{ font-size: 14px; line-height: 20px; height: 20px; margin-bottom: 10px; overflow: hidden; white-space: nowrap; -ms-text-overflow: ellipsis; text-overflow: ellipsis; font-weight: bold; text-transform: uppercase; color: @color_white; } .form-search-ticket .form-search-content .form-input .bgdatePicker{ position: relative; } .form-search-ticket .form-search-content .form-input .bgdatePicker:after{ position: absolute; right: 8px; top: 50%; .transform_translate(0,-50%); pointer-events: none; font-family: "fontawesome"; content: "\f073"; font-size: 18px; line-height: 24px; color: @color_white; z-index:2; } .form-search-ticket .form-search-content .form-input .bgdatePicker:before{ content:''; background : @color_c0; height: 100%; width:35px; position: absolute; right:0; top:0; z-index:1; } .form-search-ticket .form-search-content .form-input .form-control{ .border-radius(0); margin-bottom: 12px; border: 1px solid @color_boder_c8c; outline: 0; box-shadow:none; position: relative; } .form-search-ticket .form-search-content .form-input .w-form-input .f-address .f-row{padding-right:35px;} .form-search-ticket .form-search-content .form-input .w-form-input .f-address .f-row .form-control{border-right: none;} .form-search-ticket .form-search-content .form-input .w-form-input .f-address .f-row::before{ content:''; background : @color_c0; height: 100%; width:35px; position: absolute; right:0; top:0; } .form-search-ticket .form-search-content .form-input .w-form-input .f-address .f-row::after{ content: '\f041'; font-family: "FontAwesome"; position: absolute; font-size: 15px; color: @color_white; top: 50%; right: 9px; .transform_translate(-50% , -50%); } .form-search-ticket .form-search-content .form-input select.form-control{ -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; padding-right: 30px; background-image: url('data:image/svg+xml;utf8,Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.'); background-size: 35px 35px; background-position: right 0px center; background-repeat: no-repeat; z-index:2; } .form-search-ticket .form-search-content .form-input .table-cell{position: relative;} .form-search-ticket .form-search-content .form-input .table-cell:before{ content:''; background : @color3; height: 34px; width:35px; position: absolute; right:15px; top:0; z-index:1; } .form-search-ticket .form-search-content .form-input button.btn{ width: 100%; height: auto; padding: 10px 0px; background: @color_c0; .border-radius(0); text-align: center; font-size: 15px; line-height: 20px; color: @color_white; position: relative; font-weight: bold; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; -ms-box-shadow: none; box-shadow: none; outline:0; border: none; text-transform: uppercase; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; margin-bottom: 5px; } .form-search-ticket .form-search-content .form-input button.btn:hover{ background: @color3_hover; } .form-search-ticket .form-search-content .form-input button.btn span{ font-size: 16px; line-height: 20px; color: inherit; padding-left: 30px; position: relative; font-weight: bold; } .form-search-ticket .form-search-content .form-input button.btn span:after { position: absolute; font-family: "fontawesome"; content: '\f002'; top: 50%; left: 0; font-size:20px; .transform_translate(0%,-50%); } .form-search-ticket .form-search-content .form-input .f_link a{ font-size: 13px; line-height: 20px; color: @color_white; position: relative; padding-left: 20px; } .form-search-ticket .form-search-content .form-input .f_link a:hover{ color: @color2; } .form-search-ticket .form-search-content .form-input .f_link a:before{ position: absolute; top: -2px; left: 0; width: 18px; text-align: center; font-family: "fontawesome"; font-weight: normal; } .input-table{ width: 100%; display: table; } .table-cell{ width:33%; padding-right: 15px; display: table-cell; } .table-cell:last-child{ padding-right:0; } .table-cell .div_text{ font-size: 13px; line-height: 20px; font-weight: normal; color: @color_text_333; } .table-cell .div_text span:first-child{text-transform: uppercase; font-size:14px;} .table-cell .div_text span{ display: block; color: @color_white; } .style_radio{ display: inline-table; margin-right: 5px; width: 14px; height: 14px; position: relative; vertical-align: top; margin-top: 4px; pointer-events: none; } .style_radio input[type=radio]{ width: 14px; height: 14px; margin-top: 0; opacity: 0; pointer-events: auto; z-index: 1; position: relative; } .style_radio .style_icon{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:2px solid @color_white; .border-radius(100%); } .style_radio input[type=radio]:checked ~ .style_icon:after{ position: absolute; content: ''; top: 50%; left: 50%; .transform_translate(-50%,-50%); width: 6px; height: 6px; .border-radius(100%); background: @color_white; } .style_radio_checkbox{ display: inline-table; margin-right: 5px; width: 40px; height: 40px; position: relative; vertical-align: top; margin-top: 4px; pointer-events: none; } .style_radio_checkbox input[type=radio]{ width: 40px; height: 40px; margin-top: 0; opacity: 0; pointer-events: auto; z-index: 1; position: relative; } .style_radio_checkbox .style_icon{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .style_radio_checkbox .style_icon:after{ position: absolute; top: 0; left: 0; font-family:"fontawesome"; content: '\f096'; color: @color_text_333; font-size: 50px; line-height: 50px; } .style_radio_checkbox input[type=radio]:checked ~ .style_icon:after{ content: '\f046'; } .style_checkbox{ display: inline-table; margin-right: 5px; width: 20px; height: 20px; position: relative; vertical-align: top; margin-top: 4px; pointer-events: none; } .style_checkbox input[type=checkbox]{ width: 20px; height: 20px; margin-top: 0; opacity: 0; pointer-events: auto; z-index: 1; position: relative; } .style_checkbox .style_icon{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .style_checkbox .style_icon:after{ position: absolute; top: 0; left: 0; font-family:"fontawesome"; content: '\f096'; font-size: 16px; line-height: 20px; color: @mau_nen_icon; } .style_checkbox input[type=checkbox]:checked ~ .style_icon:after{ content: '\f046'; } /*--------------------------------------*/ .vnt-category{ width: 100%; border-bottom: 1px solid #e5e5e5; text-align: center; margin-bottom: 30px; } .vnt-category ul{ display: inline-block; } .vnt-category ul:after{ clear: both; content: ''; display: block; } .vnt-category ul li{ float: left; margin: 0 17px; font-size: 14px; line-height: 23px; color: #666666; text-transform: uppercase; } .vnt-category ul li a{ font-size: 14px; line-height: 23px; padding:22px 0; display: block; position: relative; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; color: #555555; } .vnt-category ul li a.current, .vnt-category ul li a:hover{ color: @color1; } .vnt-category ul li a.current{font-weight: bold;} .vnt-category ul li a:after{ position: absolute; content: ''; bottom: -1px; left: 0; width: 0; height: 2px; background-color: @color1; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; } .vnt-category ul li a.current:after, .vnt-category ul li a:hover:after{ width: 100%; } .vnt-category .title_active{ border: 1px solid #e2e2e2; padding: 8px 40px 8px 10px; font-size: 16px; line-height: 24px; overflow: hidden; height: 42px; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; position: relative; cursor: pointer; text-align: left; text-transform: uppercase; display: none; color: @color_text_333; } .vnt-category .title_active:after{ position: absolute; font-family: "fontawesome"; content: '\f107'; top: 50%; right: 10px; color: @color_text_333; font-size: 35px; line-height: 45px; .transform_translate(0,-50%); } .mod-content{ margin-bottom: 30px; } #vnt-main{ float: left; width: 100%; .width_calc(100%,300px); } #vnt-sidebar{ width: 270px; float: right; } /*==END: CONTENT==*/ /*==BEGIN: FOOTER==*/ /*-------------Mail list-------------------*/ .receive_email{ background: @color_c0; } .receive_email .wrapper{ position: relative; padding: 20px 15px; } /*.receive_email .wrapper:after{ position: absolute; content: ''; bottom: -10px; right: 100%; background: url("../images/icon-email.png")no-repeat 0 0; width: 86px; height: 83px; }*/ .receive_email .div_table{ display: table; width: 100%; font-size: 18px; line-height: 24px; color: @color_white; } .receive_email .div_table .div_cell{ display: table-cell; vertical-align: middle; line-height: 30px; font-size:16px; color: @color_white; } .receive_email .div_table .div_cell .text1{ font-size: 16px; text-transform: uppercase; line-height: 1.5em; color: @color_white; span{ color:@color_white; font-weight: bold; } } .receive_email .div_table .div_cell .text2{ font-size: 14px; } .receive_email .div_table .div_form{ width: 440px; display: table-cell; padding-top: 5px; } .receive_email .input-group{ background: @color_white; .border-radius(23px); } .receive_email .input-group .form-control{ height: 40px; border: none; outline:0; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; -ms-box-shadow: none; box-shadow: none; background: none; font-size: 14px; color: @color_white; } .receive_email .input-group button.btn{ position: relative; right: 2px; width: 70px; height: 35px; .border-radius(23px); color: @color_white; font-size: 20px; line-height: 30px; background: @color1; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; -ms-box-shadow: none; box-shadow: none; outline: none; border:none; overflow: hidden; text-transform: uppercase; } .receive_email .input-group button.btn:before{ position: absolute; width: 100%; height: 100%; top: 0; left: 100%; font-family: "fontawesome"; content: '\f0e0'; text-align: center; font-size: 18px; line-height: 35px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; } .receive_email .input-group button.btn:hover:before{ left: 0; } .receive_email .input-group button.btn span{ position: absolute; z-index: 1; font-size: 16px; line-height: 22px; color: inherit; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; .transform_translate(0px,0px); left: 50%; transform: translateX(-50%); top: 7px; width: 30px; height: 30px; } .receive_email .input-group button.btn:hover span{ .transform_translate(-80px,0); } .footer_link{ padding: 35px 0; background: url("../images/bg-footer.jpg")no-repeat 50% 0 #f8f8f8; } .footer_link .a_info{ font-size: 14px; line-height: 22px; margin-bottom: 20px; color: #777777; } .footer_link .a_info .d_title{ font-size: 16px; line-height: 25px; margin-bottom: 10px; font-weight: bold; color: #555555; } .footer_link .a_info .d_title span{ color: #555555; } .gs_item .node_title{ font-size: 16px; line-height: 25px; padding: 0 30px 5px 0; border-bottom: 1px solid #d9d9d9; text-transform: uppercase; font-weight: bold; color: #555555; cursor: pointer; overflow: hidden; white-space: nowrap; -ms-text-overflow: ellipsis; text-overflow: ellipsis; position: relative; margin-bottom: 10px; } .gs_item .node_title:after{ position: absolute; font-family: "fontawesome"; content: '\f0fe'; top: 0; right: 0; color: #989898; } .gs_item.active .node_title:after{ content: '\f146'; } .ul_link_footer{ margin-bottom: 20px; } .ul_link_footer ul:after{ display: block; content: ''; clear: both; } .ul_link_footer ul li{ float: left; width: 25%; padding-right: 30px; white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; } .ul_link_footer ul li a{ display: block; position: relative; padding: 0 10px 0 15px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; color: #555555; } .ul_link_footer ul li a:after{ position: absolute; top: 0; left: 0; content: '•'; font-size: 12px; color: #949494; font-weight: bold; } .ul_link_footer ul li a:hover{ padding: 0 0 0 25px; color: #c71d22; } .copyright_social{ background: @color1; } .copyright_social .copyright{ padding: 12px 20px 13px 0; font-size: 14px; line-height: 20px; color: @color_white; font-style: italic; float: left; } .copyright_social .copyright a{ font-size: 14px; line-height: 20px; color: @color_white; font-style: italic; } .copyright_social .copyright span{ font-weight: bold; color: @color_white; font-style: normal; } .copyright_social .copyright strong a{ color: @color_white; font-style: normal; } .copyright_social .social{ float: right; } .copyright_social .social ul:after{ display: block; clear: both; content: ''; } .copyright_social .social ul li{ width: 65px; height: 65px; float: left; } .copyright_social .social ul li a{ display: block; width: 100%; height: 100%; position: relative; color: #ffffff; border-right: 1px solid rgba(255, 255, 255, 0.3); border-top: 1px solid transparent; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; } .copyright_social .social ul li:first-child a{ border-left: 1px solid rgba(255, 255, 255, 0.3); } .copyright_social .social ul li a:hover{ color: #03afef; background: #ffffff; border-top: 1px solid #03afef; } .copyright_social .social ul li a i{ font-size: 24px; line-height: 30px; position: absolute; top: 50%; left: 50%; text-align: center; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .footer_main{ padding: 40px 0; background: url('../images/bg_footer.png') left bottom -50px no-repeat; } .footer_main .wrapper{ position: relative; } .footer_main .node1{ width: 380px; float: left; } .footer_main .node2{ width: 500px; float: left; } .footer_main .node3{ width: 270px; float: right; } #vnt-footer .footer_tool{display: none;} .footer_main .node_link{ margin-bottom: 20px; float: left; width: 50%; } .footer_main .node_link .div_title{ font-size: 20px; line-height: 30px; font-weight: bold; padding-bottom: 10px; text-transform: uppercase; color: @color1; position: relative; } .footer_main .ul_link ul li{ margin-bottom: 5px; } .footer_main .ul_link ul li a{ display: inline-block; position: relative; padding: 0 10px 0 25px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; } .footer_main .ul_link ul li a:after{ position: absolute; font-family: "fontawesome"; content: '\f105'; top: 0; left: 0; color: #333333; } .footer_main .ul_link ul li a:hover{ padding: 0 0 0 35px; } .info_company{ margin-bottom: 20px; } .footer_main .info_company .node_link { float: none; width: 100%; } .footer_main .info_company .div_title{ font-size: 20px; line-height: 30px; padding-bottom: 10px; text-transform: uppercase; color: @color1; position: relative; } .info_company .info_img{ margin-bottom: 15px; padding-bottom: 5px; position: relative; } .info_company .info_img:after{ position: absolute; content: ''; top: 100%; left: 0; width: 40px; height: 2px; background-color: #cfcfcf; } .info_company .before{ padding-left: 25px; margin-bottom: 5px; position: relative; } .info_company .before:before{ position: absolute; top: 3px; left: 0; font-family: "fontawesome"; font-size: 15px; line-height: 20px; color: @color_text_999; } .box-eveluate{ padding: 3px; background: url("../images/bg-eveluate.png") repeat 0 0; margin-bottom: 20px; } .box-eveluate .wrap-eveluate{ background: #ffffff; padding: 15px 17px; } .box-eveluate .wrap-eveluate .left-eveluate{ width: 230px; float: left; } .box-eveluate .wrap-eveluate .div_title{ color: #c71d22; font-size: 14px; line-height: 20px; margin-bottom: 8px; text-transform: uppercase; } .ul-eveluate ul li label{ font-weight: normal; } .ul-eveluate ul li label input[type=radio]{ margin-right: 8px; margin-top: 0; } .box-eveluate .wrap-eveluate .right-eveluate{ width: 110px; float: right; padding-top: 10px; } .box-eveluate button.btn{ width: 100%; background: #ffffff; margin-bottom: 10px; height: 35px; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; -ms-box-shadow: none; box-shadow: none; outline: 0; font-size: 12px; line-height: 20px; border: 2px solid #cecece; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; color:#333333; } .box-eveluate button.btn span{ font-size: 14px; line-height: 20px; color:#333333; text-transform: inherit; font-weight: normal; } .box-eveluate button.btn:hover{ border: 2px solid @color3; } .span_color1{ color: @red; font-weight: bold; } .span_color2{ color: #e81f1f; } .size_lagre{ font-size: 25px; line-height: 35px; } .span_color3{ color:#a2a2a2; } .vnt-success{ font-size: 25px; line-height:35px; text-align: center; font-style: italic; color: #555555; } .nodes.node01, .nodes.node02{display: none} .nodes.node03 .nodes_title{display: none} #pull{ height: 50px; border-bottom: 1px solid #ffffff; display: block; width: 100%; text-align: center; line-height: 50px; font-size: 18px; text-transform: uppercase; background: @color_c0; font-weight: bold; color: #ffffff; } #pull span i{ padding: 0 10px; } #pull:active , .vnt-searchTour #pull:focus{ text-decoration: none; } .box_bocongthuong{padding: 15px;} .box_bocongthuong .wrapper::after{ content: ''; display: block; clear: both; } .box_bocongthuong .logo_bct{ float: left; width: 180px; padding-right: 15px; } .box_bocongthuong .info_register_bct{ float: left; width: -webkit-calc(~'100% - 180px'); width: -o-calc(~'100% - 180px'); width: calc(~'100% - 180px'); font-size: 13px; color: #888888; line-height: 1.5em; padding-top: 10px; } /*==END: FOOTER==*/ .phone-map{ display: none; } .phone-map .w-phone{ width: 50%; float: left; } .phone-map .w-map{ width: 50%; float: right; } .phone-map .w-map a, .phone-map .w-phone a{ display: block; padding:15px 6px 15px 6px; text-align: center; font-size: 20px; line-height: 28px; color: @color_white; position: relative; background-color: #f58120; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; border-left: 1px solid #104872; text-transform: uppercase; font-weight: bold; overflow: hidden; white-space: nowrap; -ms-text-overflow: ellipsis; text-overflow: ellipsis; } .phone-map .w-map a:before, .phone-map .w-phone a:before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; } .phone-map .w-map a:hover:before, .phone-map .w-phone a:hover:before{ background-color: rgba(0, 0, 0, 0.2); } .phone-map .w-map a span, .phone-map .w-phone a span{ position: relative; z-index: 1; padding-left: 40px; } .phone-map .w-map a span:after, .phone-map .w-phone a span:after{ position: absolute; font-family: "fontawesome"; content: '\f095'; top: 50%; left: 0; .transform_translate(0,-50%); width: 30px; height: 30px; font-size: 30px; line-height: 30px; } .phone-map .w-map a span:after{ content: '\f041'; } /*------------------*/ .box_bocongthuong{padding: 15px;} .box_bocongthuong .wrapper::after{ content: ''; display: block; clear: both; } .box_bocongthuong .logo_bct{ width: 180px; } .box_bocongthuong .info_register_bct{ float: left; .width_calc(100%,180px); font-size: 13px; color: #888888; line-height: 1.5em; padding-top: 10px; } /*--------------*/ .vnt-hotline{ position: relative; float: left; z-index: 1000; } .vnt-hotline .vh-title{ position: relative; font-size: 12px; line-height: 20px; color: #cacaca; padding: 8px 0 8px 20px; cursor: pointer; } .vnt-hotline .vh-title .visibleMB{ text-transform: uppercase; display: none; } .vnt-hotline .vh-title:after{ position: absolute; top: 8px; left: 0; font-family: 'Fontawesome'; content: '\f098'; font-size: 12px; line-height: 20px; color: #ffd101; } .vnt-hotline .vh-content{ position: absolute; width: 320px; top: 100%; left: 0; background: @color_white; -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); -o-box-shadow: 0 0 10px rgba(0,0,0,0.1); -ms-box-shadow: 0 0 10px rgba(0,0,0,0.1); box-shadow: 0 0 10px rgba(0,0,0,0.1); visibility: hidden; opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; margin-top: 20px; } .vnt-hotline.active .vh-content{ margin-top: 0; visibility: visible; opacity: 1; } .vnt-hotline .vh-content .vh-top{ color: @color_white; font-size: 20px; line-height: 30px; text-transform: uppercase; padding: 5px 10px; background: @color_text_333; } .vnt-hotline .vh-content .vh-bottom a{ text-align: center; display: block; font-size: 14px; line-height: 20px; text-transform: uppercase; color: @color_text_333; padding:12px 10px; background: #e5e5e5; border: none; } .vnt-hotline .vh-content .vh-bottom a:after{ font-family: 'Fontawesome'; content: '\f00d'; font-size: 15px; line-height: 20px; margin-left: 10px; } .vnt-hotline .vh-content .vh-center .hotline1 a{ display: block; background: #1068B0; border: none; border-bottom: 1px solid @color_white; color: @color_white; font-size: 23px; line-height: 30px; font-weight: bold; padding: 10px 10px; } .vnt-hotline .vh-content .vh-center .hotline1 a:before{ font-family: 'Fontawesome'; padding-right: 15px; padding-left: 1px; font-size: 25px; line-height: 30px; font-weight: normal; content: '\f098'; } .vnt-hotline .vh-content .vh-center .hotline2{ padding: 10px 10px; border-bottom: 1px solid #e0e0e0; } .vnt-hotline .vh-content .vh-center .hotline2 .text{ font-size: 13px; line-height: 20px; margin-bottom: 5px; color: #999999; } .vnt-hotline .vh-content .vh-center .hotline2 .contact-name{ float: left; font-size: 16px; line-height: 26px; font-weight: bold; color: @color_text_333; } .vnt-hotline .vh-content .vh-center .hotline2 .contact-phone{float: right} .vnt-hotline .vh-content .vh-center .hotline2 .contact-phone a{ font-size: 18px; line-height: 26px; font-weight: bold; float: right; color: @color_white; background: #1068B0; display: inline-block; border: 1px solid #1068B0; float: left; font-family: @font_03; font-size: 16px; font-weight: bold; height: 42px; line-height: 20px; margin-bottom: 12px; outline: 0 none; padding: 10px 20px; position: relative; text-align: left; text-decoration: none; text-transform: uppercase; } .vnt-hotline .vh-content .vh-center .note{ text-align: right; padding: 15px 10px; font-size: 13px; line-height: 20px; font-style: italic; color: #999999; } .vnt-hotline .vh-title .visibleMB{ display: inline; } .vnt-hotline .vh-title .hiddenMB{ display: none; } .vnt-hotline .vh-content{ position: fixed; width: 100%; height: 100%; height: -webkit-calc(~'100% - 0px'); height: -o-calc(~'100% - 0px'); height: calc(~'100% - 0px'); top: 0px; left: 0; background: @color_white; z-index: 100; margin-top: 0; .transform_translate(-100%,0); } .vnt-hotline.active .vh-content{ .transform_translate(0,0); } .vnt-hotline .vh-content .vh-top{ position: absolute; width: 100%; height: 40px; overflow: hidden; white-space: nowrap; -ms-text-overflow: ellipsis; text-overflow: ellipsis; } .vnt-hotline .vh-content .vh-center{ position: absolute; top: 40px; bottom: 44px; width: 100%; overflow: auto; } .vnt-hotline .vh-content .vh-bottom{ position: absolute; bottom: 0; left: 0; width: 100%; height: 44px; } /*---------------------*/ .go_top{ position: fixed; width: 45px; height: 45px; border: none; background: @color1; bottom: 30px; right: 10px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; z-index: 9999; } .go_top:after{ position: absolute; top: 60%; left: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); content: 'top'; text-transform: uppercase; color: @color_white; } .go_top:before{ position: absolute; top: 30%; left: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); font-family: 'Fontawesome'; content: '\f106'; font-size: 14px; color: @color_white; } .ticketing_guide { text-align: right; } .ticketing_guide a { color: @color_white; } .ticketing_guide a:hover{ color: @color_c0; } .ticketing_guide a.info:before { content: "\f05a"; font-family: "fontawesome"; color: @color_white; margin-right: 5px; font-size: 16px; } @-webkit-keyframes bounce1 { 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 40% {transform: translateY(-6px);} 60% {transform: translateY(-3px);} } @-moz-keyframes bounce1 { 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} 40% {transform: translateY(-6px);} 60% {transform: translateY(-3px);} } @-o-keyframes bounce1 { 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);} 40% {transform: translateY(-6px);} 60% {transform: translateY(-3px);} } @keyframes bounce1 { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-6px);} 60% {transform: translateY(-3px);} } @keyframes kenBurnsEast { from { transform: scale(1) translateX(0px); -webkit-transform: scale(1) translateX(0px); } to { transform: scale(1.2) translateX(100px); -webkit-transform: scale(1.2) translateX(100px); } } @-moz-keyframes kenBurnsEast { from { transform: scale(1) translateX(0px); -webkit-transform: scale(1) translateX(0px); } to { transform: scale(1.2) translateX(100px); -webkit-transform: scale(1.2) translateX(100px); } } @-webkit-keyframes kenBurnsEast { from { transform: scale(1) translateX(0px); -webkit-transform: scale(1) translateX(0px); } to { transform: scale(1.2) translateX(100px); -webkit-transform: scale(1.2) translateX(100px); } } @keyframes kenBurnsWest { from { transform: scale(1) translateX(0px); -webkit-transform: scale(1) translateX(0px); } to { transform: scale(1.2) translateX(-100px); -webkit-transform: scale(1.2) translateX(-100px); } } @-moz-keyframes kenBurnsWest { from { transform: scale(1) translateX(0px); -webkit-transform: scale(1) translateX(0px); } to { transform: scale(1.2) translateX(-100px); -webkit-transform: scale(1.2) translateX(-100px); } } @-webkit-keyframes kenBurnsWest { from { transform: scale(1) translateX(0px); -webkit-transform: scale(1) translateX(0px); } to { transform: scale(1.2) translateX(-100px); -webkit-transform: scale(1.2) translateX(-100px); } }