/* 1 THEME STRUCTURE ------------------------------------------------------- */ /* 1.1 body */ body{ margin:0px; padding:0px; font-family: Open Sans, Verdana, "Microsoft JhengHei UI", "Microsoft JhengHei", "LiHei Pro", "新細明體", sans-serif; word-break: break-word; } /* 1.2 container */ .bc_container{ width:1200px; margin:auto; padding: 0px; } .bc_clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .bc_site{ float: left; width: 100%; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; } .bc_section{ width: 100%; float: left; } /* 1.3 grid */ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12{ padding:15px; float:left; display:inline; box-sizing:border-box; } .grid_1 {width:8.33%;} .grid_2 {width:16.66%;} .grid_3 {width:25%;} .grid_4 {width:33.33%;} .grid_5 {width:41.66%;} .grid_6 {width:50%;} .grid_7 {width:58.33%;} .grid_8 {width:66.66%;} .grid_9 {width:75%;} .grid_10 {width:83.33%;} .grid_11 {width:91.66%;} .grid_12 {width:100%;} .grid_offset_1 {margin-left:8.33%;} .grid_offset_2 {margin-left:16.66%;} .grid_offset_3 {margin-left:25%;} .grid_offset_4 {margin-left:33.33%;} .grid_offset_5 {margin-left:41.66%;} .grid_offset_6 {margin-left:50%;} .grid_offset_7 {margin-left:58.33%;} .grid_offset_8 {margin-left:66.66%;} .grid_offset_9 {margin-left:75%;} .grid_offset_10 {margin-left:83.33%;} .grid_offset_11 {margin-left:91.66%;} /* 2 TEXT ------------------------------------------------------- */ /* 2.1 text rules */ p,h1,h2,h3,h4,h5,h6{ margin:0px; padding:0px; font-weight: normal; } a{ text-decoration: none; } /* 2.2 text color */ h1,h2,h3,h4,h5,h6,.bc_datepicker .ui-datepicker-header .ui-datepicker-title{ color: #454545; } p,input,label,textarea,.bc_datepicker{ color:#595959; } a{ color: #595959; cursor: pointer; } /* 2.3 text size */ h1{ font-size: 30px; line-height: 34px; } h2{ font-size: 25px; line-height: 28px; } h3{ font-size: 20px; line-height: 24px; } h4{ font-size: 17px; line-height: 20px; } h5{ font-size: 15px; line-height: 18px; } h6{ font-size: 13px; line-height: 16px; } p { font-size: 15px; line-height: 25px; } input,label,textarea{ font-size: 15px; } /* 2.4 text font */ h1,h2,h3,h4,h5,h6,.bc_first_font,.bc_datepicker .ui-datepicker-title{ font-family: Open Sans, Verdana, "Microsoft JhengHei UI", "Microsoft JhengHei", "LiHei Pro", "新細明體", sans-serif; } p,a,input,label,.bc_second_font,.bc_datepicker,textarea{ font-family: Open Sans, Verdana, "Microsoft JhengHei UI", "Microsoft JhengHei", "LiHei Pro", "新細明體", sans-serif; } .bc_third_font{ font-family: Open Sans, Verdana, "Microsoft JhengHei UI", "Microsoft JhengHei", "LiHei Pro", "新細明體", sans-serif; } /* 無障礙：原本以 h3／h4 呈現的資料值改為 div，下列規則還原原本的外觀 */ /* 無障礙：調整標題層級時改了標籤的元素，也用下列 a11y-hN 還原原本 hN 的外觀 */ .a11y-h3,.a11y-h4,.a11y-h6{ margin:0px; padding:0px; font-weight: normal; color: #454545; font-family: Open Sans, Verdana, "Microsoft JhengHei UI", "Microsoft JhengHei", "LiHei Pro", "新細明體", sans-serif; } .a11y-h3{ font-size: 20px; line-height: 24px; } .a11y-h4{ font-size: 17px; line-height: 20px; } .a11y-h6{ font-size: 13px; line-height: 16px; } .a11y-h1{ font-size: 30px; line-height: 34px; } .a11y-th-h6{ font-weight: normal; text-align: left; color: #454545; font-size: 13px; line-height: 16px; font-family: Open Sans, Verdana, "Microsoft JhengHei UI", "Microsoft JhengHei", "LiHei Pro", "新細明體", sans-serif; } /* 無障礙：表單開頭的必填說明（* 為必填欄位） */ .a11y-required-note{ margin: 0 0 20px; font-size: 14px; line-height: 20px; color: #454545; } /* 無障礙：原本是純文字的欄位名稱改為 label，下列規則抵銷表單元件（j-forms）對 label 的樣式，維持原本外觀 */ .j-forms label.a11y-plain-label{ display: inline; margin: 0; padding: 0; height: auto; font: inherit; color: inherit; } /* 無障礙：資料表格的欄標題由 td 內的 h5 改為 th，下列規則還原原本 h5 的外觀 */ .a11y-th-h5{ font-weight: normal; text-align: center; color: #454545; font-size: 15px; line-height: 18px; font-family: Open Sans, Verdana, "Microsoft JhengHei UI", "Microsoft JhengHei", "LiHei Pro", "新細明體", sans-serif; } /* 內頁橫幅的頁面標題由 strong 改為 h1：維持原本行內、粗體、行高沿用外層的外觀 */ .a11y-banner-h1{ display: inline; font-weight: bold; line-height: inherit; } /* 3 FORMS ------------------------------------------------------- */ input,textarea { background-color: #f9f9f9; outline: 0; border: 1px solid #f1f1f1; padding: 10px 20px; float: left; width: 100%; box-sizing:border-box; } /* 4 TABLE ------------------------------------------------------- */ table{ border-collapse: collapse; } /* 5 TABS ------------------------------------------------------- */ .bc_tabs .ui-tabs-active.ui-state-active { box-shadow: 0px 2px 0px #68B78C; } /* 6 CALENDAR ------------------------------------------------------- */ .bc_datepicker { float: left; width: 100%; text-align: center; } .bc_datepicker .ui-datepicker { float: left; width: 100%; } .bc_datepicker .ui-datepicker-header { float: left; width: 100%; } .bc_datepicker .ui-datepicker-calendar { display: inline-table; width: 95%; margin-top: 15px; margin-bottom: 15px; } .bc_datepicker .ui-datepicker-prev { display: none; } .bc_datepicker .ui-datepicker-next { display: none; } .bc_datepicker .ui-datepicker-header .ui-datepicker-title { padding-top: 20px; font-size: 20px; font-weight: bolder; } .bc_datepicker .ui-datepicker-calendar { margin-top: 10px; } .bc_datepicker .ui-datepicker-calendar th { color: #727475; } .bc_datepicker .ui-datepicker-calendar th,.bc_datepicker .ui-datepicker-calendar td { padding: 10px 5px; } .bc_datepicker .ui-datepicker-unselectable span { background-color: #fff; } .bc_datepicker a.ui-state-default { background-color: #68B78C; color:#fff; padding: 5px; border-radius: 3px; display: block; max-width: 70%; } /* 7 FRAMEWORK CLASS ------------------------------------------------------- */ /* 7.1 text-align */ .bc_text_align_center { text-align: center; } .bc_text_align_right { text-align: right; } .bc_text_align_left { text-align: left; } /* 7.2 text-transform */ .bc_text_transform_uppercase{ text-transform: uppercase; } /* 7.3 color */ .bc_color_white { color: #fff; } .bc_color_black { color: #333333; } .bc_color_grey { color: #a3a3a3; } .bc_color_greydark { color: #727475; } .bc_color_greydark_hover:hover { color: #727475; } .bc_color_f1f1f1{ color: #f1f1f1; } .bc_color_green{ color: #68B78C; } .bc_color_green_hover:hover{ color: #68B78C; } .bc_color_orange{ color: #ceb28d; } .bc_color_orange_hover:hover{ color: #ceb28d; } /*placeholer*/ .bc_placeholder_color_white::-webkit-input-placeholder { color: #fff; } .bc_placeholder_color_white::-moz-placeholder { color: #fff; } .bc_placeholder_color_white:-ms-input-placeholder { color: #fff; } .bc_placeholder_color_white:-moz-placeholder { color: #fff; } /* 7.4 font-size */ .bc_font_size_80 { font-size: 80px; line-height: 80px; } .bc_font_size_70 { font-size: 70px; line-height: 70px; } .bc_font_size_60 { font-size: 60px; line-height: 60px; } .bc_font_size_50 { font-size: 50px; line-height: 50px; } .bc_font_size_44 { font-size: 44px; line-height: 46px; } .bc_font_size_40 { font-size: 40px; line-height: 45px; } .bc_font_size_30 { font-size: 30px; line-height: 30px; } .bc_font_size_25 { font-size: 25px; line-height: 25px; } .bc_font_size_20 { font-size: 20px; line-height: 20px; } .bc_font_size_18 { font-size: 18px; line-height: 18px; } .bc_font_size_17 { font-size: 17px; line-height: 17px; } .bc_font_size_15 { font-size: 15px; line-height: 15px; } .bc_font_size_14 { font-size: 14px; line-height: 14px; } .bc_font_size_13 { font-size: 13px; line-height: 13px; } .bc_font_size_12 { font-size: 12px; line-height: 12px; } .bc_font_size_11 { font-size: 11px; line-height: 12px; } .bc_font_size_10 { font-size: 10px; line-height: 10px; } .bc_font_size_8 { font-size: 8px; line-height: 8px; } /* 7.5 height */ .bc_height_1000{ height: 1000px; } .bc_height_600{ height: 600px; } .bc_height_570{ height: 570px; } .bc_height_550{ height: 550px; } .bc_height_500{ height: 500px; } .bc_height_450{ height: 450px; } .bc_height_400{ height: 400px; } .bc_height_300{ height: 300px; } .bc_height_250{ height: 250px; } .bc_height_220{ height: 220px; } .bc_height_210{ height: 210px; } .bc_height_200{ height: 200px; } .bc_height_150{ height: 150px; } .bc_height_120{ height: 120px; } .bc_height_100{ height: 100px; } .bc_height_90{ height: 90px; } .bc_height_80{ height: 80px; } .bc_height_70{ height: 70px; } .bc_height_60{ height: 60px; } .bc_height_55{ height: 55px; } .bc_height_50{ height: 50px; } .bc_height_40{ height: 40px; } .bc_height_33{ height: 33px; } .bc_height_30{ height: 30px; } .bc_height_25{ height: 25px; } .bc_height_20{ height: 20px; } .bc_height_15{ height: 15px; } .bc_height_13{ height: 13px; } .bc_height_10{ height: 10px; } .bc_height_5{ height: 5px; } .bc_height_3{ height: 3px; } .bc_height_2{ height: 2px; } .bc_height_1{ height: 1px; } .bc_height_auto{ height: auto; } .bc_height_100_percentage { height: 100%; } /* 7.6 line-height */ .bc_line_height_5 { line-height: 5px; } .bc_line_height_16 { line-height: 16px; } .bc_line_height_17 { line-height: 17px; } .bc_line_height_18 { line-height: 18px; } .bc_line_height_20 { line-height: 20px; } .bc_line_height_23 { line-height: 23px; } .bc_line_height_25 { line-height: 25px; } .bc_line_height_31 { line-height: 31px; } .bc_line_height_30 { line-height: 30px; } .bc_line_height_35 { line-height: 35px; } .bc_line_height_50 { line-height: 50px; } /* 7.7 width */ .bc_width_700 { width: 700px; } .bc_width_300 { width: 300px; } .bc_width_200 { width: 200px; } .bc_width_170 { width: 170px; } .bc_width_150 { width: 150px; } .bc_width_100 { width: 100px; } .bc_width_90 { width: 90px; } .bc_width_70 { width: 70px; } .bc_width_60 { width: 60px; } .bc_width_55 { width: 55px; } .bc_width_33 { width: 33px; } .bc_width_30_hover:hover { width: 30px; } .bc_width_25 { width: 25px; } .bc_width_5 { width: 5px; } .bc_width_100_percentage { width: 100%; } .bc_width_80_percentage { width: 80%; } .bc_width_75_percentage { width: 75%; } .bc_width_72_percentage { width: 72%; } .bc_width_70_percentage { width: 70%; } .bc_width_68_percentage { width: 68%; } .bc_width_66_percentage { width: 66.66%; } .bc_width_65_percentage { width: 65%; } .bc_width_62_percentage { width: 62%; } .bc_width_60_percentage { width: 60%; } .bc_width_55_percentage { width: 55%; } .bc_width_50_percentage { width: 50%; } .bc_width_45_percentage { width: 45%; } .bc_width_40_percentage { width: 40%; } .bc_width_35_percentage { width: 35%; } .bc_width_33_percentage { width: 33.33%; } .bc_width_32_percentage { width: 32%; } .bc_width_30_percentage { width: 30%; } .bc_width_28_percentage { width: 28%; } .bc_width_25_percentage { width: 25%; } .bc_width_20_percentage { width: 20%; } .bc_width_16_percentage { width: 16.66%; } .bc_width_15_percentage { width: 15%; } .bc_width_10_percentage { width: 10%; } .bc_width_5_percentage { width: 5%; } /* 7.8 background-color */ .bc_bg_white { background-color: #ffffff; } .bc_bg_white_hover:hover { background-color: #ffffff; } .bc_bg_blue { background-color: #8AC6D0; } .bc_bg_green { background-color: #68B78C; } .bc_bg_green_hover:hover { background-color: #68B78C; } .bc_bg_grey { background-color: #f9f9f9; } .bc_bg_grey_2 { background-color: #a3a3a3; } .bc_bg_grey_3 { background-color: #e4e4e4; } .bc_bg_grey_4 { background-color: #efefef; } .bc_bg_greydark { background-color: #444444; } .bc_bg_greydark_hover:hover { background-color: #444444; } .bc_bg_orange { background-color: #ceb28d; } .bc_bg_red { background-color: #cb2027; } .bc_bg_red:hover { background-color: #ab1016; } .bc_bg_redlight { background-color: #f4797b; } .bc_bg_redlight:hover { background-color: #f45558; } .bc_bg_yellow { background-color: #FFDA44; } .bc_bg_orangedark { background-color: #c4aa87; } .bc_bg_facebook { background-color: #3B5998; } .bc_bg_blue_alpha { background-color: rgba(138, 198, 208, 0.75); } .bc_bg_green_alpha { background-color: rgba(112, 193, 144, 0.95); } .bc_bg_greydark_alpha { background-color: rgba(101, 100, 96, 0.3); } .bc_bg_greydark_alpha_4 { background-color: rgba(101, 100, 96, 0.4); } .bc_bg_greydark_alpha_5 { background-color: rgba(101, 100, 96, 0.5); } .bc_bg_greydark_alpha_6 { background-color: rgba(101, 100, 96, 0.6); } .bc_bg_greydark_alpha_7 { background-color: rgba(101, 100, 96, 0.7); } .bc_bg_greydark_alpha_8 { background-color: rgba(101, 100, 96, 0.8); } .bc_bg_greydark_alpha_9 { background-color: rgba(101, 100, 96, 0.9); } /* 7.9 background */ .bc_background_none{ background: none; } .bc_background_none_hover:hover{ background: none; } .bc_bg_greydark_alpha_gradient { background: -moz-linear-gradient(top, rgba(101,100,96,0) 0%, rgba(101,100,96,0.1) 60%, rgba(101,100,96,0.65) 100%); background: -webkit-linear-gradient(top, rgba(101,100,96,0) 0%,rgba(101,100,96,0.1) 60%,rgba(101,100,96,0.65) 100%); background: linear-gradient(to bottom, rgba(101,100,96,0) 0%,rgba(101,100,96,0.1) 60%,rgba(101,100,96,0.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00656460', endColorstr='#a6656460',GradientType=0 ); } .bc_bg_greydark_alpha_gradient_2 { background: -moz-linear-gradient(top, rgba(101,100,96,0.8) 0%, rgba(101,100,96,0) 35%, rgba(101,100,96,0) 45%, rgba(101,100,96,0.8) 100%); background: -webkit-linear-gradient(top, rgba(101,100,96,0.8) 0%,rgba(101,100,96,0) 35%,rgba(101,100,96,0) 45%,rgba(101,100,96,0.8) 100%); background: linear-gradient(to bottom, rgba(101,100,96,0.8) 0%,rgba(101,100,96,0) 35%,rgba(101,100,96,0) 45%,rgba(101,100,96,0.8) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99656460', endColorstr='#99656460',GradientType=0 ); } .bc_bg_greydark_alpha_gradient_3 { background: -moz-linear-gradient(top, rgba(101,100,96,0) 0%, rgba(101,100,96,0.65) 100%); background: -webkit-linear-gradient(top, rgba(101,100,96,0) 0%,rgba(101,100,96,0.65) 100%); background: linear-gradient(to bottom, rgba(101,100,96,0) 0%,rgba(101,100,96,0.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00656460', endColorstr='#a6656460',GradientType=0 ); } .bc_bg_greydark_alpha_gradient_4 { background: -moz-linear-gradient(top, rgba(101,100,96,0.65) 0%, rgba(101,100,96,0.1) 60%, rgba(101,100,96,0) 100%); background: -webkit-linear-gradient(top, rgba(101,100,96,0.65) 0%,rgba(101,100,96,0.1) 60%,rgba(101,100,96,0) 100%); background: linear-gradient(to bottom, rgba(101,100,96,0.65) 0%,rgba(101,100,96,0.1) 60%,rgba(101,100,96,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00656460', endColorstr='#a6656460',GradientType=0 ); } .bc_bg_greydark_alpha_gradient_5 { background: -moz-linear-gradient(top, rgba(101,100,96,0.6) 0%, rgba(101,100,96,0.6) 75%, rgba(101,100,96,0) 100%); background: -webkit-linear-gradient(top, rgba(101,100,96,0.6) 0%,rgba(101,100,96,0.6) 75%,rgba(101,100,96,0) 100%); background: linear-gradient(to bottom, rgba(101,100,96,0.6) 0%,rgba(101,100,96,0.6) 75%,rgba(101,100,96,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99656460', endColorstr='#00656460',GradientType=0 ); } .bc_bg_greydark_alpha_gradient6 { background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.65) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 60%,rgba(0,0,0,0.65) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 60%,rgba(0,0,0,0.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); } .bc_bg_gradient_red_to_green{ background: rgb(204,133,133); background: -moz-linear-gradient(left, rgba(204,133,133,1) 0%, rgba(204,133,133,1) 61%, rgba(104,183,140,1) 82%, rgba(104,183,140,1) 100%); background: -webkit-linear-gradient(left, rgba(204,133,133,1) 0%,rgba(204,133,133,1) 61%,rgba(104,183,140,1) 82%,rgba(104,183,140,1) 100%); background: linear-gradient(to right, rgba(204,133,133,1) 0%,rgba(204,133,133,1) 61%,rgba(104,183,140,1) 82%,rgba(104,183,140,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc8585', endColorstr='#68b78c',GradientType=1 ); } .bc_bg_greydark_alpha_gradient_6 { background: -moz-linear-gradient(top, rgba(50,50,50,0) 0%, rgba(50,50,50,0.85) 100%); background: -webkit-linear-gradient(top, rgba(50,50,50,0) 0%,rgba(50,50,50,0.85) 100%); background: linear-gradient(to bottom, rgba(50,50,50,0) 0%,rgba(50,50,50,0.85) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00656460', endColorstr='#a6656460',GradientType=0 ); } .bc_bg_blackdark_alpha_gradient { background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 65%, rgba(0,0,0,0.65) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 65%,rgba(0,0,0,0.65) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 65%,rgba(0,0,0,0.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); } /* 7.10 filter */ .bc_filter_blur_5 { filter:blur(5px); -webkit-filter: blur(5px); } /* 7.11 margin */ /*margin general*/ .bc_margin_0 { margin: 0px; } .bc_margin_5 { margin: 5px; } .bc_margin_10 { margin: 10px; } .bc_margin_15 { margin: 15px; } .bc_margin_20 { margin: 20px; } /*margin bottom*/ .bc_margin_bottom_20 { margin-bottom: 20px; } .bc_margin_bottom_10 { margin-bottom: 10px; } /*margin top*/ .bc_margin_top_30 { margin-top: 30px; } .bc_margin_top_20 { margin-top: 20px; } .bc_margin_top_13 { margin-top: 13px; } .bc_margin_top_10 { margin-top: 10px; } .bc_margin_top_5 { margin-top: 5px; } .bc_margin_top_2 { margin-top: 2px; } /*margin right*/ .bc_margin_right_5 { margin-right: 5px; } .bc_margin_right_10 { margin-right: 10px; } .bc_margin_right_20 { margin-right: 20px; } .bc_margin_right_40 { margin-right: 40px; } .bc_margin_right_50 { margin-right: 50px; } .bc_margin_right_60 { margin-right: 60px; } /*margin left*/ .bc_margin_left_0 { margin-left: 0px; } .bc_margin_left_5 { margin-left: 5px; } .bc_margin_left_10 { margin-left: 10px; } .bc_margin_left_15 { margin-left: 15px; } .bc_margin_left_20 { margin-left: 20px; } .bc_margin_left_40 { margin-left: 40px; } .bc_margin_left_80 { margin-left: 80px; } .bc_margin_left_60 { margin-left: 60px; } .bc_margin_left_70 { margin-left: 70px; } .bc_margin_left_120 { margin-left: 120px; } .bc_margin_left_200 { margin-left: 200px; } .bc_margin_left_220 { margin-left: 220px; } .bc_margin_left_240 { margin-left: 240px; } /*margin left negative*/ .bc_margin_left_negative_15 { margin-left: -15px; } /*margin right negative*/ .bc_margin_right_negative_15 { margin-right: -15px; } /*margin bottom negative*/ .bc_margin_bottom_negative_15 { margin-bottom: -15px; } .bc_margin_bottom_100_negative { margin-bottom: -100px; } .bc_margin_bottom_105_negative { margin-bottom: -105px; } /*margin top negative*/ .bc_margin_top_negative_30 { margin-top: -30px; } .bc_margin_top_negative_225 { margin-top: -225px; } .bc_margin_top_negative_300 { margin-top: -300px; } /* 7.12 padding */ /*padding_general*/ .bc_padding_0 { padding: 0px; } .bc_padding_5 { padding: 5px; } .bc_padding_5_10 { padding: 5px 10px; } .bc_padding_8 { padding: 8px; } .bc_padding_10 { padding: 10px; } .bc_padding_10_20 { padding: 10px 20px; } .bc_padding_20_10 { padding: 20px 10px; } .bc_padding_13_10 { padding: 13px 10px; } .bc_padding_10_13 { padding: 10px 13px; } .bc_padding_13 { padding: 13px; } .bc_padding_15 { padding: 15px; } .bc_padding_20 { padding: 20px; } .bc_padding_28 { padding: 28px; } .bc_padding_20_50 { padding: 20px 50px; } .bc_padding_20_25 { padding: 20px 25px; } .bc_padding_30 { padding: 30px; } .bc_padding_40 { padding: 40px; } .bc_padding_40_20 { padding: 40px 20px; } .bc_padding_50 { padding: 50px; } .bc_padding_60 { padding: 60px; } .bc_padding_80 { padding: 80px; } .bc_padding_90 { padding: 90px; } .bc_padding_100 { padding: 100px; } .bc_padding_1020 { padding: 10px 20px; } .bc_padding_510 { padding: 5px 10px; } /*bottom*/ .bc_padding_bottom_0 { padding-bottom: 0px; } .bc_padding_bottom_5 { padding-bottom: 5px; } .bc_padding_bottom_8 { padding-bottom: 8px; } .bc_padding_bottom_10 { padding-bottom: 10px; } /*top*/ .bc_padding_top_0 { padding-top: 0px; } .bc_padding_top_6 { padding-top: 6px; } .bc_padding_top_8 { padding-top: 8px; } .bc_padding_top_10 { padding-top: 10px; } .bc_padding_top_20 { padding-top: 20px; } .bc_padding_top_30 { padding-top: 30px; } /*left*/ .bc_padding_left_220 { padding-left: 220px; } .bc_padding_left_120 { padding-left: 120px; } .bc_padding_left_100 { padding-left: 100px; } .bc_padding_left_90 { padding-left: 90px; } .bc_padding_left_80 { padding-left: 80px; } .bc_padding_left_70 { padding-left: 70px; } .bc_padding_left_50 { padding-left: 50px; } .bc_padding_left_45 { padding-left: 45px; } .bc_padding_left_40 { padding-left: 40px; } .bc_padding_left_30 { padding-left: 30px; } .bc_padding_left_25 { padding-left: 25px; } .bc_padding_left_20 { padding-left: 20px; } .bc_padding_left_10 { padding-left: 10px; } .bc_padding_left_5 { padding-left: 5px; } .bc_padding_left_3 { padding-left: 3px; } .bc_padding_left_0 { padding-left: 0px; } /*right*/ .bc_padding_right_0 { padding-right: 0px; } .bc_padding_right_5 { padding-right: 5px; } .bc_padding_right_10 { padding-right: 10px; } .bc_padding_right_20 { padding-right: 20px; } .bc_padding_right_40 { padding-right: 40px; } /* 7.13 border */ /*border radius*/ .bc_border_radius_3 { border-radius: 3px; } .bc_border_radius_0_0_3_3 { border-radius: 0px 0px 3px 3px; } .bc_border_radius_3_3_0_0 { border-radius: 3px 3px 0px 0px; } .bc_border_radius_0_0_5_5 { border-radius: 0px 0px 5px 5px; } .bc_border_radius_5_5_0_0 { border-radius: 5px 5px 0px 0px; } .bc_border_radius_10 { border-radius: 10px; } .bc_border_radius_50 { border-radius: 50px; } .bc_border_radius_100_percentage { border-radius: 100%; } /*general border*/ .bc_border_width_2 { border-width: 2px; } .bc_border_0 { border: 0px solid #fff; } .bc_border_1_solid_white { border: 1px solid #fff; } .bc_border_2_solid_white { border: 2px solid #fff; } .bc_border_2_solid_white_hover:hover { border: 2px solid #fff; } .bc_border_1_solid_grey { border: 1px solid #f1f1f1; } .bc_border_1_solid_grey_2 { border: 1px solid #a3a3a3; } .bc_border_1_solid_grey_3 { border: 1px solid #e1e1e1; } .bc_border_3_solid_white { border: 3px solid #fff; } .bc_border_3_dashed_grey { border: 3px dashed #f1f1f1; } .bc_border_1_solid_green { border: 1px solid #68B78C; } .bc_border_1_solid_green_hover:hover { border: 1px solid #68B78C; } .bc_border_2_solid_green { border: 2px solid #68B78C; } .bc_border_1_solid_orange { border: 1px solid #ceb28d; } /*border top*/ .bc_border_top_width_0{ border-top-width: 0px; } .bc_border_top_1_solid_grey { border-top: 1px solid #f1f1f1; } .bc_border_top_1_solid_greydark { border-top: 1px solid #595959; } .bc_border_top_2_solid_grey { border-top: 2px solid #f1f1f1; } /*border bottom*/ .bc_border_bottom_width_0{ border-bottom-width: 0px; } .bc_border_bottom_width_2{ border-bottom-width: 2px; } .bc_border_bottom_1_solid_grey { border-bottom: 1px solid #f1f1f1; } .bc_border_bottom_2_solid_grey { border-bottom: 2px solid #f1f1f1; } .bc_border_bottom_2_solid_greendark { border-bottom: 2px solid #64AB84; } .bc_border_bottom_4_solid_white { border-bottom: 4px solid #fff; } .bc_border_bottom_3_solid_white { border-bottom: 3px solid #fff; } .bc_border_bottom_1_solid_greydark { border-bottom: 1px solid #595959; } /*border left*/ .bc_border_left_width_0{ border-left-width: 0px; } /*border right*/ .bc_border_right_width_0{ border-right-width: 0px; } /* 7.14 box-sizing */ .bc_box_sizing_border_box { box-sizing: border-box; } /* 7.15 list-style */ .bc_list_style_none { list-style: none; } /* 7.16 display */ .bc_display_inline { display: inline; } .bc_display_inline_block { display: inline-block; } .bc_display_block { display: block; } .bc_display_none { display: none; } .bc_display_table { display: table; } .bc_display_table_cell { display: table-cell; } /* 7.17 vertical-align */ .bc_vertical_align_middle { vertical-align: middle; } .bc_vertical_align_top { vertical-align: top; } .bc_vertical_align_bottom { vertical-align: bottom; } /* 7.18 float */ .bc_float_left { float: left; } .bc_float_right { float: right; } /* 7.19 bg size position repeat */ .bc_background_size_cover { background-size: cover; } .bc_background_size_25 { background-size: 25px; } .bc_background_position_center { background-position: center center; } .bc_background_position_center_bottom { background-position: center bottom; } .bc_background_position_center_top { background-position: center top; } .bc_background_repeat_no_repeat { background-repeat: no-repeat; } /* 7.20 position */ .bc_position_absolute { position: absolute; } .bc_position_relative { position: relative; } .bc_position_fixed { position: fixed; } /* 7.21 right left top bottom */ .bc_right_300_negative { right: -300px; } .bc_right_0 { right: 0; } .bc_right_20 { right: 20px; } .bc_left_0 { left: 0; } .bc_left_10 { left: 10px; } .bc_left_15 { left: 15px; } .bc_left_65_negative { left: -65px; } .bc_top_0 { top: 0; } .bc_top_5 { top: 5px; } .bc_top_40_negative { top: -40px; } .bc_top_10_negative { top: -10px; } .bc_top_5_negative { top: -5px; } .bc_top_3_negative { top: -3px; } .bc_top_10 { top: 10px; } .bc_top_17 { top: 17px; } .bc_top_20 { top: 20px; } .bc_bottom_0 { bottom: 0px; } .bc_bottom_10 { bottom: 10px; } .bc_bottom_15 { bottom: 15px; } .bc_bottom_20 { bottom: 20px; } .bc_bottom_30 { bottom: 30px; } .bc_bottom_35_negative { bottom: -35px; } /* 7.22 overflow */ .bc_overflow_hidden { overflow: hidden; } .bc_overflow_x_auto { overflow-x: auto; } .bc_overflow_y_auto { overflow-y: auto; } /* 7.23 cursor */ .bc_cursor_move { cursor: move; } .bc_cursor_pointer { cursor: pointer; } .bc_cursor_zoom_out { cursor: zoom-out; } /* 7.24 outline */ .bc_outline_0{ outline: 0; } /* 7.25 z-index */ .bc_z_index_1_negative{ z-index: -1; } .bc_z_index_9{ z-index: 9; } .bc_z_index_99{ z-index: 99; } .bc_z_index_999{ z-index: 999; } .bc_z_index_9999{ z-index: 9999; } /* 7.26 transition */ .bc_transition_all_08_ease{ -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; } /* 7.27 opacity */ .bc_opacity_0{ opacity: 0; } .bc_opacity_07{ opacity: 0.7; } .bc_opacity_05_hover:hover{ opacity: 0.5; } /* 7.28 zoom */ .bc_zoom_1_1_hover:hover{ zoom: 1.1; } /* 8 CUSTOM FOR THEME ------------------------------------------------------- */ /* 8.1 navigation 1*/ .bc_navigation_1 { margin-left: 70px; } .bc_navigation_1 > ul { list-style: none; margin: 0px; padding: 0px; } .bc_navigation_1 > ul > li { display: inline-block; } .bc_navigation_1 > ul > li:after { content: "|"; display: inline-block; margin: 0px 20px; color: #bda382; } .bc_navigation_1 > ul > li:last-child:after { content: ""; margin: 0px; } .bc_navigation_1 li a { color: #fff; font-size: 16px; font-family: 'Montserrat'; } .bc_navigation_1 > ul li:hover > ul.bc_sub_menu { display: block; } .bc_navigation_1 > ul li > ul.bc_sub_menu { background-color: #B8BB64; position: absolute; margin: 0px; padding: 0px; list-style: none; display: none; } .bc_navigation_1 > ul li > ul.bc_sub_menu > li { padding: 5px 10px; font-size: 13px; border-bottom: 1px solid #000; } .bc_navigation_1 > ul li > ul.bc_sub_menu > li:last-child { border-bottom: 0px solid #000; } /*top header*/ .bc_navigation_top_header_1 > ul { list-style: none; margin: 0px; padding: 0px; } .bc_navigation_top_header_1 > ul > li { display: inline-block; } .bc_navigation_top_header_1 > ul > li:after { content: "|"; display: inline-block; margin: 0px 20px; font-size: 13px; color:#d8d8d8; } .bc_navigation_top_header_1 > ul > li:last-child:after { content: ""; margin: 0px; } .bc_navigation_top_header_1 li a { font-size: 13px; } .bc_navigation_top_header_1 > ul li:hover > ul.bc_sub_menu { display: block; } .bc_navigation_top_header_1 > ul li > ul.bc_sub_menu { background-color: #B8BB64; position: absolute; margin: 0px; padding: 0px; list-style: none; display: none; } .bc_navigation_top_header_1 > ul li > ul.bc_sub_menu > li { padding: 5px 10px; font-size: 13px; border-bottom: 1px solid #000; } .bc_navigation_top_header_1 > ul li > ul.bc_sub_menu > li:last-child { border-bottom: 0px solid #000; } /* 8.2 navigation 2 */ .bc_navigation_2 { margin-left: 70px; } .bc_navigation_2 > ul { list-style: none; margin: 0px; padding: 0px; } .bc_navigation_2 > ul > li { display: inline-block; } .bc_navigation_2 > ul > li:after { content: "|"; display: inline-block; margin: 0px 20px; color: #B7B7B7; } .bc_navigation_2 > ul > li:last-child:after { content: ""; margin: 0px; } .bc_navigation_2 li a { color: #fff; font-size: 16px; font-family: 'Montserrat'; } .bc_navigation_2 > ul li:hover > ul.bc_sub_menu { display: block; } .bc_navigation_2 > ul li > ul.bc_sub_menu { position: absolute; margin: 0px; padding: 0px; list-style: none; display: none; margin-left: -20px; padding-top: 20px; width: 170px; } .bc_navigation_2 > ul li > ul.bc_sub_menu > li { padding: 10px 20px; border-bottom: 1px solid #f1f1f1; text-align: left; background-color: #fff; position: relative; box-shadow: 0px 2px 5px #f1f1f1; } .bc_navigation_2 > ul li > ul.bc_sub_menu > li:hover { background-color: #f9f9f9; } .bc_navigation_2 > ul li > ul.bc_sub_menu > li:last-child { border-bottom: 0px solid #000; } .bc_navigation_2 > ul li > ul.bc_sub_menu li a { color: #727475; font-size: 14px; } .bc_navigation_2 > ul li > ul.bc_sub_menu li > ul.bc_sub_menu { margin-left: 150px; top: 0; padding-top: 0; padding-left: 20px; } /*responsive*/ .bc_navigation_2_sidebar > ul { list-style: none; margin: 0px; padding: 0px; } .bc_navigation_2_sidebar > ul > li { display: inline-block; } .bc_navigation_2_sidebar li a { color: #fff; font-size: 16px; font-family: 'Montserrat'; } .bc_navigation_2_sidebar li > a { padding: 10px 0px; display: inline-block; font-size: 24px; text-transform: lowercase; } .bc_navigation_2_sidebar > ul li > ul.bc_sub_menu { margin: 0px; padding: 0px; list-style: none; } .bc_navigation_2_sidebar > ul li > ul.bc_sub_menu > li { padding: 10px 20px; text-align: left; } .bc_navigation_2_sidebar > ul li > ul.bc_sub_menu li a { color: #fff; font-size: 14px; } .bc_navigation_2_sidebar > ul li > ul.bc_sub_menu li > ul.bc_sub_menu { } /*top header*/ .bc_navigation_top_header_2 > ul { list-style: none; margin: 0px; padding: 0px; } .bc_navigation_top_header_2 > ul > li { display: inline-block; } .bc_navigation_top_header_2> ul > li:after { content: "|"; display: inline-block; margin: 0px 15px; font-size: 13px; color:#5F5F5F; } .bc_navigation_top_header_2 > ul > li:last-child:after { content: ""; margin: 0px; } .bc_navigation_top_header_2 li a { font-size: 13px; } .bc_navigation_top_header_2 > ul li:hover > ul.bc_sub_menu { display: block; } .bc_navigation_top_header_2 > ul li > ul.bc_sub_menu { padding: 10px 0px 0px 15px; position: absolute; margin: 0px; list-style: none; display: none; z-index: 9; } .bc_navigation_top_header_2 > ul li > ul.bc_sub_menu > li { padding: 7px 15px; font-size: 13px; border-bottom: 1px solid #595959; background-color: #444444; } .bc_navigation_top_header_2 > ul li > ul.bc_sub_menu > li:last-child { border-bottom: 0px solid #000; } /* 8.2 navigation 3 */ .bc_navigation_3 { margin-left: 70px; } .bc_navigation_3 > ul { list-style: none; margin: 0px; padding: 0px; } .bc_navigation_3 > ul > li { display: inline-block; } .bc_navigation_3 > ul > li:after { content: "|"; display: inline-block; margin: 0px 20px; color: #f1f1f1; } .bc_navigation_3 > ul > li:last-child:after { content: ""; margin: 0px; } .bc_navigation_3 li a { color: #727475; font-size: 16px; font-family: 'Montserrat'; } .bc_navigation_3 > ul li:hover > ul.bc_sub_menu { display: block; } .bc_navigation_3 > ul li > ul.bc_sub_menu { position: absolute; margin: 0px; padding: 0px; list-style: none; display: none; margin-left: -20px; padding-top: 20px; width: 170px; } .bc_navigation_3 > ul li > ul.bc_sub_menu > li { padding: 10px 20px; border-bottom: 1px solid #f1f1f1; text-align: left; background-color: #fff; position: relative; box-shadow: 0px 2px 5px #f1f1f1; } .bc_navigation_3 > ul li > ul.bc_sub_menu > li:hover { background-color: #f9f9f9; } .bc_navigation_3 > ul li > ul.bc_sub_menu > li:last-child { border-bottom: 0px solid #000; } .bc_navigation_3 > ul li > ul.bc_sub_menu li a { color: #727475; font-size: 14px; } .bc_navigation_3 > ul li > ul.bc_sub_menu li > ul.bc_sub_menu { margin-left: 150px; top: 0; padding-top: 0; padding-left: 20px; } /*responsive*/ .bc_navigation_3_sidebar > ul { list-style: none; margin: 0px; padding: 0px; } .bc_navigation_3_sidebar > ul > li { display: inline-block; } .bc_navigation_3_sidebar li a { color: #fff; font-size: 16px; font-family: 'Montserrat'; } .bc_navigation_3_sidebar li > a { padding: 10px 0px; display: inline-block; font-size: 24px; text-transform: lowercase; } .bc_navigation_3_sidebar > ul li > ul.bc_sub_menu { margin: 0px; padding: 0px; list-style: none; } .bc_navigation_3_sidebar > ul li > ul.bc_sub_menu > li { padding: 10px 20px; text-align: left; } .bc_navigation_3_sidebar > ul li > ul.bc_sub_menu li a { color: #fff; font-size: 14px; } .bc_navigation_3_sidebar > ul li > ul.bc_sub_menu li > ul.bc_sub_menu { } /*top header*/ .bc_navigation_top_header_3 > ul { list-style: none; margin: 0px; padding: 0px; } .bc_navigation_top_header_3 > ul > li { display: inline-block; } .bc_navigation_top_header_3> ul > li:after { content: "|"; display: inline-block; margin: 0px 15px; font-size: 13px; color:#b59974; } .bc_navigation_top_header_3 > ul > li:last-child:after { content: ""; margin: 0px; } .bc_navigation_top_header_3 li a { font-size: 13px; } .bc_navigation_top_header_3 > ul li:hover > ul.bc_sub_menu { display: block; } .bc_navigation_top_header_3 > ul li > ul.bc_sub_menu { padding: 10px 0px 0px 15px; position: absolute; margin: 0px; list-style: none; display: none; z-index: 9; } .bc_navigation_top_header_3 > ul li > ul.bc_sub_menu > li { padding: 7px 15px; font-size: 13px; border-bottom: 1px solid #595959; background-color: #444444; } .bc_navigation_top_header_3 > ul li > ul.bc_sub_menu > li:last-child { border-bottom: 0px solid #000; } /* 8.2 navigation 4 */ .bc_navigation_4 { margin-left: 70px; } .bc_navigation_4 > ul { list-style: none; margin: 0px; padding: 0px; } .bc_navigation_4 > ul > li { display: inline-block; } .bc_navigation_4 > ul > li:after { content: "|"; display: inline-block; margin: 0px 20px; color: #f1f1f1; } .bc_navigation_4 > ul > li:last-child:after { content: ""; margin: 0px; } .bc_navigation_4 li a { color: #727475; font-size: 16px; font-family: 'Montserrat'; } .bc_navigation_4 > ul li:hover > ul.bc_sub_menu { display: block; } .bc_navigation_4 > ul li > ul.bc_sub_menu { position: absolute; margin: 0px; padding: 0px; list-style: none; display: none; margin-left: -20px; padding-top: 20px; width: 170px; } .bc_navigation_4 > ul li > ul.bc_sub_menu > li { padding: 10px 20px; border-bottom: 1px solid #f1f1f1; text-align: left; background-color: #fff; position: relative; box-shadow: 0px 2px 5px #f1f1f1; } .bc_navigation_4 > ul li > ul.bc_sub_menu > li:hover { background-color: #f9f9f9; } .bc_navigation_4 > ul li > ul.bc_sub_menu > li:last-child { border-bottom: 0px solid #000; } .bc_navigation_4 > ul li > ul.bc_sub_menu li a { color: #727475; font-size: 14px; } .bc_navigation_4 > ul li > ul.bc_sub_menu li > ul.bc_sub_menu { margin-left: 150px; top: 0; padding-top: 0; padding-left: 20px; } /*responsive*/ .bc_navigation_4_sidebar > ul { list-style: none; margin: 0px; padding: 0px; } .bc_navigation_4_sidebar > ul > li { display: inline-block; } .bc_navigation_4_sidebar li a { color: #fff; font-size: 16px; font-family: 'Montserrat'; } .bc_navigation_4_sidebar li > a { padding: 10px 0px; display: inline-block; font-size: 24px; text-transform: lowercase; } .bc_navigation_4_sidebar > ul li > ul.bc_sub_menu { margin: 0px; padding: 0px; list-style: none; } .bc_navigation_4_sidebar > ul li > ul.bc_sub_menu > li { padding: 10px 20px; text-align: left; } .bc_navigation_4_sidebar > ul li > ul.bc_sub_menu li a { color: #fff; font-size: 14px; } .bc_navigation_4_sidebar > ul li > ul.bc_sub_menu li > ul.bc_sub_menu { } /*top header*/ .bc_navigation_top_header_4 > ul { list-style: none; margin: 0px; padding: 0px; } .bc_navigation_top_header_4 > ul > li { display: inline-block; } .bc_navigation_top_header_4> ul > li:after { content: "|"; display: inline-block; margin: 0px 15px; font-size: 13px; color:#5F5F5F; } .bc_navigation_top_header_4 > ul > li:last-child:after { content: ""; margin: 0px; } .bc_navigation_top_header_4 li a { font-size: 13px; } .bc_navigation_top_header_4 > ul li:hover > ul.bc_sub_menu { display: block; } .bc_navigation_top_header_4 > ul li > ul.bc_sub_menu { padding: 10px 0px 0px 15px; position: absolute; margin: 0px; list-style: none; display: none; z-index: 9; } .bc_navigation_top_header_4 > ul li > ul.bc_sub_menu > li { padding: 7px 15px; font-size: 13px; border-bottom: 1px solid #595959; background-color: #444444; } .bc_navigation_top_header_4 > ul li > ul.bc_sub_menu > li:last-child { border-bottom: 0px solid #000; } /* 8.2 navigation 5 */ .bc_navigation_5 { margin-left: 70px; } .bc_navigation_5 > ul { list-style: none; margin: 0px; padding: 0px; } .bc_navigation_5 > ul > li { display: inline-block; } .bc_navigation_5 > ul > li:after { content: "|"; display: inline-block; margin: 0px 20px; color: #E1E1E1; position: relative; top: -1px; } .bc_navigation_5 > ul > li:last-child:after { content: ""; margin: 0px; } .bc_navigation_5 li a { color: #fff; font-size: 16px; } .bc_navigation_5 > ul li:hover > ul.bc_sub_menu { display: block; } .bc_navigation_5 > ul li > ul.bc_sub_menu { position: absolute; margin: 0px; padding: 0px; list-style: none; display: none; margin-left: -20px; padding-top: 20px; width: 170px; } .bc_navigation_5 > ul li > ul.bc_sub_menu > li { padding: 10px 20px; border-bottom: 1px solid #f1f1f1; text-align: left; background-color: #fff; position: relative; box-shadow: 0px 2px 5px #f1f1f1; } .bc_navigation_5 > ul li > ul.bc_sub_menu > li:hover { background-color: #f9f9f9; } .bc_navigation_5 > ul li > ul.bc_sub_menu > li:last-child { border-bottom: 0px solid #000; } .bc_navigation_5 > ul li > ul.bc_sub_menu li a { color: #727475; font-size: 14px; } .bc_navigation_5 > ul li > ul.bc_sub_menu li > ul.bc_sub_menu { margin-left: 150px; top: 0; padding-top: 0; padding-left: 20px; } /*responsive*/ .bc_navigation_5_sidebar > ul { list-style: none; margin: 0px; padding: 0px; } .bc_navigation_5_sidebar > ul > li { display: block; } .bc_navigation_5_sidebar li a { color: #fff; font-size: 16px; } .bc_navigation_5_sidebar li > a { padding: 10px 0px; display: inline-block; font-size: 18px; text-transform: lowercase; margin-top: 16px; } .bc_navigation_5_sidebar > ul li:first-child > a { margin-top: 0; } .bc_navigation_5_sidebar > ul li > ul.bc_sub_menu { margin: 0px; padding: 0px; list-style: none; } .bc_navigation_5_sidebar > ul li > ul.bc_sub_menu > li { padding: 10px 20px; text-align: left; } .bc_navigation_5_sidebar > ul li > ul.bc_sub_menu li a { color: #fff; font-size: 14px; margin-top: 0; padding: 6px 0; } .bc_navigation_5_sidebar > ul li > ul.bc_sub_menu li > ul.bc_sub_menu { } /*top header*/ .bc_navigation_top_header_5 > ul { list-style: none; margin: 0px; padding: 0px; } .bc_navigation_top_header_5 > ul > li { display: inline-block; font-size: 13px; color:#b9b9b9; } .bc_navigation_top_header_5> ul > li:after { content: "|"; display: inline-block; margin: 0px 15px; font-size: 13px; color:#b9b9b9; } .bc_navigation_top_header_5 > ul > li:last-child:after { content: ""; margin: 0px; } .bc_navigation_top_header_5 li a { font-size: 13px; color: #c1c1c1; } .bc_navigation_top_header_5 > ul li:hover > ul.bc_sub_menu { display: block; } .bc_navigation_top_header_5 > ul li > ul.bc_sub_menu { padding: 10px 0px 0px 15px; position: absolute; margin: 0px; list-style: none; display: none; z-index: 9; } .bc_navigation_top_header_5 > ul li > ul.bc_sub_menu > li { padding: 7px 15px; font-size: 13px; border-bottom: 1px solid #595959; background-color: #444444; } .bc_navigation_top_header_5 > ul li > ul.bc_sub_menu > li:last-child { border-bottom: 0px solid #000; } /* 8.6 navigation copyright */ .bc_navigation_copyright > ul { list-style: none; margin: 0px; padding: 0px; } .bc_navigation_copyright > ul > li { display: inline-block; } .bc_navigation_copyright > ul > li:after { content: "|"; display: inline-block; margin: 0px 20px; font-size: 14px; color:#5F5F5F; } .bc_navigation_copyright > ul > li:last-child:after { content: ""; margin: 0px; } .bc_navigation_copyright li a { font-size: 14px; } .bc_navigation_copyright > ul li:hover > ul.bc_sub_menu { display: block; } .bc_navigation_copyright > ul li > ul.bc_sub_menu { background-color: #B8BB64; position: absolute; margin: 0px; padding: 0px; list-style: none; display: none; } .bc_navigation_copyright > ul li > ul.bc_sub_menu > li { padding: 5px 10px; font-size: 13px; border-bottom: 1px solid #000; } .bc_navigation_copyright > ul li > ul.bc_sub_menu > li:last-child { border-bottom: 0px solid #000; } /* 9 TYPED PLUGIN ------------------------------------------------------- */ .typed-cursor{opacity: 1;font-size: 50px;color: #fff;font-weight: 100;-webkit-animation: blink 0.7s infinite;-moz-animation: blink 0.7s infinite;-ms-animation: blink 0.7s infinite;-o-animation: blink 0.7s infinite;animation: blink 0.7s infinite;} @-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }} @-webkit-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }} @-moz-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }} @-ms-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }} @-o-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }} .bc_typed { border-bottom: 5px solid #ceb28d; } /* 10 JQUEY UI ------------------------------------------------------- */ .bc_tooltip:hover span { display: block; opacity: 1; } .ui-tooltip{ font-family: Open Sans, Verdana, "Microsoft JhengHei UI", "Microsoft JhengHei", "LiHei Pro", "新細明體", sans-serif; z-index: 99; background-color: #444; border-radius: 3px; padding: 5px 10px; position: absolute; color: #fff; margin: 0px; font-size: 16px; outline: 0; -webkit-appearance: none; border: 0;} .ui-helper-hidden-accessible { display: none; } /* 11 RESPONSIVE ------------------------------------------------------- */ /* 11.1 ipad land*/ @media only screen and (min-width: 960px) and (max-width: 1199px) { .bc_container{width:960px;} .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{ width: 100%; } .grid_offset_1, .grid_offset_2, .grid_offset_3, .grid_offset_4, .grid_offset_5, .grid_offset_6, .grid_offset_7, .grid_offset_8, .grid_offset_9, .grid_offset_10, .grid_offset_11 {margin-left:0;} .bc_width_100_percentage_ipad_land { width: 100%; } .bc_width_90_percentage_ipad_land { width: 90%; } .bc_width_80_percentage_ipad_land { width: 80%; } .bc_width_70_percentage_ipad_land { width: 70%; } .bc_width_60_percentage_ipad_land { width: 60%; } .bc_width_50_percentage_ipad_land { width: 50%; } .bc_width_40_percentage_ipad_land { width: 40%; } .bc_width_30_percentage_ipad_land { width: 30%; } .bc_width_20_percentage_ipad_land { width: 20%; } .bc_width_10_percentage_ipad_land { width: 10%; } } /* 11.2 ipad port*/ @media only screen and (min-width: 768px) and (max-width: 959px) { .bc_container {width:748px;} .bc_width_100_percentage_ipad_port { width: 100%; } .bc_width_90_percentage_ipad_port { width: 90%; } .bc_width_80_percentage_ipad_port { width: 80%; } .bc_width_70_percentage_ipad_port { width: 70%; } .bc_width_60_percentage_ipad_port { width: 60%; } .bc_width_50_percentage_ipad_port { width: 50%; } .bc_width_40_percentage_ipad_port { width: 40%; } .bc_width_30_percentage_ipad_port { width: 30%; } .bc_width_20_percentage_ipad_port { width: 20%; } .bc_width_10_percentage_ipad_port { width: 10%; } .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{ width: 100%; } .grid_offset_1, .grid_offset_2, .grid_offset_3, .grid_offset_4, .grid_offset_5, .grid_offset_6, .grid_offset_7, .grid_offset_8, .grid_offset_9, .grid_offset_10, .grid_offset_11 {margin-left:0;} .bc_font_size_40_ipad_port { font-size: 40px; } .bc_font_size_30_ipad_port { font-size: 30px; } .bc_font_size_20_ipad_port { font-size: 20px; } .bc_font_size_18_ipad_port { font-size: 18px; } .bc_font_size_16_ipad_port { font-size: 16px; } .bc_font_size_10_ipad_port { font-size: 10px; } .bc_line_height_40_ipad_port { line-height: 40px; } .bc_line_height_30_ipad_port { line-height: 30px; } .bc_line_height_20_ipad_port { line-height: 20px; } .bc_line_height_18_ipad_port { line-height: 18px; } .bc_line_height_16_ipad_port { line-height: 16px; } } /* 11.3 iphone land*/ @media only screen and (min-width: 480px) and (max-width: 767px) { body{ -webkit-text-size-adjust:none; } .bc_container {width:460px;} .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{ width: 100%; } .grid_offset_1, .grid_offset_2, .grid_offset_3, .grid_offset_4, .grid_offset_5, .grid_offset_6, .grid_offset_7, .grid_offset_8, .grid_offset_9, .grid_offset_10, .grid_offset_11 {margin-left:0;} } /* 11.4 iphone port*/ @media only screen and (min-width: 320px) and (max-width: 479px){ body{ -webkit-text-size-adjust:none; } /*.bc_container{ width:300px;}*/ .bc_container{ width:94%; } .bc_width_100_percentage_iphone_port { width: 100%; } .bc_text_align_left_iphone_port { text-align: left; } .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{ width: 100%; } .grid_offset_1, .grid_offset_2, .grid_offset_3, .grid_offset_4, .grid_offset_5, .grid_offset_6, .grid_offset_7, .grid_offset_8, .grid_offset_9, .grid_offset_10, .grid_offset_11 {margin-left:0;} } /* 11.5 all responsive*/ @media only screen and (min-width: 320px) and (max-width: 1199px) { .bc_display_none_all_responsive { display: none; } .bc_padding_0_20_responsive { padding: 0px 20px; } .bc_display_block_responsive { display: block; } .bc_width_100_percentage_responsive { width: 100%; } .bc_width_50_percentage_responsive { width: 50%; } .bc_text_align_center_responsive { text-align: center; } .bc_text_align_left_responsive { text-align: left; } .bc_margin_top_5_responsive { margin-top: 5px; } .bc_border_top_1_solid_greydark_responsive { border-top: 1px solid #595959; } .bc_border_top_1_solid_grey_responsive { border-top: 1px solid #f1f1f1; } .bc_border_bottom_1_solid_grey_responsive { border-bottom: 1px solid #f1f1f1; } .bc_border_top_1_solid_orangedark_responsive { border-top: 1px solid #b59974; } .bc_cursor_move_responsive { cursor: move; } .bc_font_size_40_responsive { font-size: 40px; } .bc_line_height_40_responsive { line-height: 40px; } .bc_padding_right_15_responsive { padding-right: 15px; } } /* 11.6 all iphone*/ @media only screen and (min-width: 320px) and (max-width: 767px) { .bc_display_none_all_iphone { display: none; } .bc_display_block_all_iphone { display: block; } .bc_width_100_percentage_all_iphone { width: 100%; } .bc_width_50_percentage_all_iphone { width: 50%; } .bc_width_33_percentage_all_iphone { width: 33.33%; } .bc_width_25_percentage_all_iphone { width: 25%; } .bc_width_50_all_iphone { width: 50px; } .bc_width_250_all_iphone { width: 250px; } .bc_text_align_center_all_iphone { text-align: center; } .bc_text_align_left_all_iphone { text-align: left; } .bc_padding_right_0_all_iphone { padding-right: 0px; } .bc_padding_left_0_all_iphone { padding-left: 0px; } .bc_padding_0_all_iphone { padding: 0px; } .bc_padding_10_all_iphone { padding: 10px; } .bc_padding_20_all_iphone { padding: 20px; } .bc_padding_30_all_iphone { padding: 30px; } .bc_padding_40_all_iphone { padding: 40px; } .bc_font_size_40_all_iphone { font-size: 40px; } .bc_font_size_30_all_iphone { font-size: 30px; } .bc_font_size_26_all_iphone { font-size: 26px; } .bc_font_size_20_all_iphone { font-size: 20px; } .bc_font_size_18_all_iphone { font-size: 18px; } .bc_font_size_16_all_iphone { font-size: 16px; } .bc_font_size_10_all_iphone { font-size: 10px; } .bc_line_height_40_all_iphone { line-height: 40px; } .bc_line_height_30_all_iphone { line-height: 30px; } .bc_line_height_26_all_iphone { line-height: 26px; } .bc_line_height_20_all_iphone { line-height: 20px; } .bc_line_height_18_all_iphone { line-height: 18px; } .bc_line_height_16_all_iphone { line-height: 16px; } .bc_position_relative_all_iphone { position: relative; } .bc_margin_top_10_all_iphone { margin-top: 10px; } .bc_margin_top_20_all_iphone { margin-top: 20px; } .bc_margin_bottom_10_all_iphone { margin-bottom: 10px; } .bc_margin_bottom_20_all_iphone { margin-bottom: 20px; } .bc_border_1_solid_grey_all_iphone { border: 1px solid #f1f1f1; } .bc_border_1_solid_white_alpha_all_iphone { border: 1px solid rgba(255, 255, 255, 0.7); } .bc_height_0_all_iphone { height: 0px; } .bc_height_10_all_iphone { height: 10px; } .bc_height_20_all_iphone { height: 20px; } .bc_height_30_all_iphone { height: 30px; } .bc_height_40_all_iphone { height: 40px; } .bc_height_50_all_iphone { height: 50px; } .bc_height_60_all_iphone { height: 60px; } .bc_height_70_all_iphone { height: 70px; } .bc_height_80_all_iphone { height: 80px; } .bc_height_90_all_iphone { height: 90px; } .bc_height_150_all_iphone { height: 150px; } .bc_width_260_all_iphone { width: 260px; } .bc_left_negative_60_all_iphone { left: -60px; } .bc_left_negative_80_all_iphone { left: -80px; } .bc_right_negative_110_all_iphone { right: -110px; } .bc_opacity_01_all_iphone { opacity: 0.1; } .bc_opacity_015_all_iphone { opacity: 0.15; } .bc_opacity_02_all_iphone { opacity: 0.2; } .bc_overflow_hidden_all_iphone { overflow: hidden; } .bc_bg_white_alpha_all_iphone { background-color: rgba(255,255,255,0.15); } } p.bigletter:first-letter { font-weight: bold; font-size: 55px; float: left; margin-left: -6px; line-height: 65px; color: #454545; margin-right: 5px; } .aboutimage_1 { display: block; float: right; margin-left: 20px; max-width: 90% !important; } .service_block a { color: #ffffff; } .service_block a.border_bottom { border-bottom: 1px #ffffff solid; } .service_block a:hover { color: #f39800; } .service_block a.border_bottom:hover { border-bottom: 1px #f39800 solid; } .service_block:nth-of-type(2n+1) + * { clear: both; } .event_3n_block:nth-of-type(3n) + * { clear: both; } .join_block .bc_width_25_percentage { height: 260px; } @media only screen and (min-width: 960px) and (max-width: 1199px) { .join_block .bc_width_25_percentage { height: 220px; } .join_block .bc_width_25_percentage p { font-size: 15px; } } @media only screen and (min-width: 768px) and (max-width: 959px) { .join_block .bc_width_25_percentage { width: 33.33%; height: 220px; } .join_block .bc_width_25_percentage p { font-size: 15px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .join_block .bc_width_25_percentage { width: 50%; height: 200px; } .join_block .bc_width_25_percentage p { font-size: 14px; } } @media only screen and (min-width: 320px) and (max-width: 479px){ .join_block .bc_width_25_percentage { width: 100%; height: 240px; } .join_block .bc_width_25_percentage p { font-size: 15px; } } /* TEXT WITH ICON BLOCK 1 */ .text_icon_block-1 { margin: 30px 0 19px 0; text-align: center; display: block; text-decoration: none; } .text_icon_block-1 .tib_icon_wrapper { margin: 19px 0; display: block; } .text_icon_block-1 .tib_icon { display: inline-block; width: 64px; height: 64px; line-height: 64px; font-size: 24px; border-width: 1px; border-style: solid; border-color: #c4c4c4; color: #7b7b7b; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-box-shadow: 0 0 0 2px #f0f0f0; -moz-box-shadow: 0 0 0 2px #f0f0f0; box-shadow: 0 0 0 2px #f0f0f0; -webkit-border-radius: 999px; -moz-border-radius: 999px; -ms-border-radius: 999px; -o-border-radius: 999px; border-radius: 999px; } .text_icon_block-1 .tib_title { margin: 10px 0; font-size: 15px; line-height: 20px; font-weight: 700; color: #272727; display: block; } .text_icon_block-1 .tib_content { margin: 10px 0; display: block; color: #666666; } /* TEXT WITH ICON BLOCK 2 */ .text_icon_block-2 { margin: 30px 0 19px 0; padding: 0 0 1px 0; text-align: center; display: block; text-decoration: none; border: 1px solid transparent; position: relative; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .text_icon_block-2_inner { padding: 7px 16px 11px 16px; margin: -1px -1px 0 -1px; display: block; border: 1px solid #e8e8e8; position: relative; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } .text_icon_block-2, .text_icon_block-2_inner { -webkit-transition: border-color 0.1s ease-out, box-shadow 0.1s ease-out; -moz-transition: border-color 0.1s ease-out, box-shadow 0.1s ease-out; -o-transition: border-color 0.1s ease-out, box-shadow 0.1s ease-out; transition: border-color 0.1s ease-out, box-shadow 0.1s ease-out; } .text_icon_block-2:hover { border-color: #e3e3e3; -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); } .text_icon_block-2:hover .text_icon_block-2_inner { border-color: #e3e3e3; -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); } .text_icon_block-2 .tib_icon_wrapper { margin: 19px 0 18px 0; display: block; } .text_icon_block-2 .tib_icon { display: inline-block; width: 24px; height: 24px; line-height: 24px; font-size: 24px; color: #020202; } .text_icon_block-2 .tib_title { margin: 13px 0 13px 0; font-size: 15px; line-height: 20px; font-weight: 700; color: #272727; display: block; } .text_icon_block-2 .tib_content { margin: 10px 0; display: block; color: #666666; } /* TEXT WITH ICON BLOCK 3 */ .text_icon_block-3 { margin: 52px 0 22px 0; padding: 0 0 1px 0; text-align: center; display: block; text-decoration: none; border: 1px solid transparent; position: relative; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .text_icon_block-3_inner { padding: 7px 16px 8px 16px; margin: -1px -1px 0 -1px; display: block; border: 1px solid #e8e8e8; position: relative; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } .text_icon_block-3, .text_icon_block-3_inner { -webkit-transition: border-color 0.1s ease-out, box-shadow 0.1s ease-out; -moz-transition: border-color 0.1s ease-out, box-shadow 0.1s ease-out; -o-transition: border-color 0.1s ease-out, box-shadow 0.1s ease-out; transition: border-color 0.1s ease-out, box-shadow 0.1s ease-out; } .text_icon_block-3:hover { border-color: #e3e3e3; -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); } .text_icon_block-3:hover .text_icon_block-3_inner { border-color: #e3e3e3; -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); } .text_icon_block-3 .tib_icon_wrapper { margin: -31px 0 19px 0; display: block; } .text_icon_block-3 .tib_icon { display: inline-block; width: 48px; height: 48px; line-height: 48px; font-size: 20px; color: #ffffff; -webkit-border-radius: 999px; -moz-border-radius: 999px; -ms-border-radius: 999px; -o-border-radius: 999px; border-radius: 999px; -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out; -o-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out; } .text_icon_block-3:hover .tib_icon { background-color: #3d4345; } .text_icon_block-3 .tib_title { margin: 13px 0 13px 0; font-size: 15px; line-height: 20px; font-weight: 700; color: #272727; display: block; } .text_icon_block-3 .tib_content { margin: 10px 0; display: block; color: #666666; } /* TEXT WITH ICON BLOCK 4 */ .text_icon_block-4 { margin: 24px 0 30px 0; } .text_icon_block-4 .tib_icon { text-align: center; float: left; width: 54px; height: 54px; line-height: 54px; font-size: 24px; border-width: 2px; border-style: solid; border-color: #d9d9d9; color: #404547; margin: 2px 0 0 0; -webkit-border-radius: 999px; -moz-border-radius: 999px; -ms-border-radius: 999px; -o-border-radius: 999px; border-radius: 999px; } .text_icon_block-4 .tib_content_wrapper { margin: 0 0 0 74px; } .text_icon_block-4 h3.tib_title { font-size: 14px; text-transform: uppercase; line-height: 16px; margin: 0; } .text_icon_block-4 .tib_content { margin: -10px 0 0 0; } /* TEXT WITH ICON EXPAND */ .text_icon_expand_item_wrapper { position: relative; height: 140px; z-index: 100; /*margin-top: -53px;*/ margin-top: -81px; } .text_icon_expand_item { position: absolute; right: 0; bottom: 0; left: 0; text-align: center; display: block; text-decoration: none; background-color:#f5f5f5; /*background-color: #ffffff;*/ margin: 0; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); -webkit-transition: height 0.3s ease-out; -moz-transition: height 0.3s ease-out; -o-transition: height 0.3s ease-out; transition: height 0.3s ease-out; -webkit-transition: box-shadow 0.3s ease-out; -moz-transition: box-shadow 0.3s ease-out; -o-transition: box-shadow 0.3s ease-out; transition: box-shadow 0.3s ease-out; -webkit-transition: margin 0.3s ease-out; -moz-transition: margin 0.3s ease-out; -o-transition: margin 0.3s ease-out; transition: margin 0.3s ease-out; } .text_icon_expand_image_wrapper { display: block; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #d2d5d6; overflow: hidden; height: 0; -webkit-transition: border 0.3s ease-out; -moz-transition: border 0.3s ease-out; -o-transition: border 0.3s ease-out; transition: border 0.3s ease-out; -webkit-transition: height 0.3s ease-out; -moz-transition: height 0.3s ease-out; -o-transition: height 0.3s ease-out; transition: height 0.3s ease-out; } .text_icon_expand_image { display: block; min-width: 100%; } .text_icon_expand_item .tie_icon_wrapper { /*margin: -37px 0 10px 0;*/ margin: -37px 0 0px 0; display: block; } .text_icon_expand_item .tie_icon { display: inline-block; width: 64px; height: 64px; line-height: 64px; font-size: 24px; border-width: 3px; border-style: solid; background-color: #ffffff; color: #4f4f4f; -webkit-border-radius: 999px; -moz-border-radius: 999px; -ms-border-radius: 999px; -o-border-radius: 999px; border-radius: 999px; -webkit-transition: height 0.3s ease-out; -moz-transition: height 0.3s ease-out; -o-transition: height 0.3s ease-out; transition: height 0.3s ease-out; -webkit-transition: color 0.3s ease-out; -moz-transition: color 0.3s ease-out; -o-transition: color 0.3s ease-out; transition: color 0.3s ease-out; } .text_icon_expand_item .tie_content { margin: 0 0 0 0; display: block; color: #666666; line-height: 18px; padding: 0 26px; overflow: hidden; height: 0; -webkit-transition: height 0.3s ease-out; -moz-transition: height 0.3s ease-out; -o-transition: height 0.3s ease-out; transition: height 0.3s ease-out; } .text_icon_expand_item .tie_text { color: #51585b; padding: 14px 0 25px 0; display: inline-block; opacity: 0; -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } .text_icon_expand_item .sc_button { display: inline-block; margin: 0 0 0 0; padding-right: 20px; padding-left: 19px; line-height: 19px; opacity: 0; -webkit-transition: opacity 0.1s ease-out; -moz-transition: opacity 0.1s ease-out; -o-transition: opacity 0.1s ease-out; transition: opacity 0.1s ease-out; } .text_icon_expand_item .tie_subtitle { display: block; color: #6b6b6b; margin: 0 0 2px 0; padding: 0 26px; } .text_icon_expand_item .tie_title { margin: 0; font-size: 15px; line-height: 20px; /*font-weight: 700;*/ color: #272727; display: block; padding: 0 26px 25px 26px; -webkit-transition: color 0.2s linear; -moz-transition: color 0.2s linear; -o-transition: color 0.2s linear; transition: color 0.2s linear; font-family: Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif !important; font-weight:normal !important; } .text_icon_expand_item:hover { background-color:#FFF; } .text_icon_expand_item_wrapper:hover .text_icon_expand_item { margin: 0 -6px; } .text_icon_expand_item_wrapper:hover .text_icon_expand_image_wrapper { height: 150px; } .text_icon_expand_item_wrapper:hover .tie_content { height: 150px; } .text_icon_expand_item_wrapper:hover .text_icon_expand_item { -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.24); -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.24); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.24); } .text_icon_expand_item_wrapper:hover .tie_icon { color: #58bbdf; } .text_icon_expand_item_wrapper:hover .tie_text { opacity: 1; -webkit-transition: opacity 0.3s ease-out; -webkit-transition-delay: 0.2s; -moz-transition: opacity 0.3s ease-out 0.2s; -o-transition: opacity 0.3s ease-out 0.2s; transition: opacity 0.3s ease-out 0.2s; } .text_icon_expand_item_wrapper:hover .sc_button { opacity: 1; -webkit-transition: opacity 0.3s ease-out, color 0.2s linear, background-color 0.2s linear; -webkit-transition-delay: 0.2s, 0s, 0s; -moz-transition: opacity 0.3s ease-out 0.2s, color 0.2s linear, background-color 0.2s linear; -o-transition: opacity 0.3s ease-out 0.2s, color 0.2s linear, background-color 0.2s linear; transition: opacity 0.3s ease-out 0.2s, color 0.2s linear, background-color 0.2s linear; } /* TEXT WITH ICON BLOCK 1 */ .text_icon_block-1:hover .tib_icon { color: #0093cf; border-color: #68b0cd; -webkit-box-shadow: 0 0 0 2px #cff1ff; -moz-box-shadow: 0 0 0 2px #cff1ff; box-shadow: 0 0 0 2px #cff1ff; } /* TEXT WITH ICON BLOCK 3 */ .text_icon_block-3 .tib_icon { background-color: #f64747; } /* TEXT WITH ICON EXPAND */ .text_icon_expand_item_wrapper:hover .text_icon_expand_image_wrapper { border-bottom-color: #cecece; } .text_icon_expand_item .tie_icon { border-color: #cecece; } .text_icon_expand_item_wrapper:hover .tie_title { color: #f64747; } .environment_box { } .environment_item_image { -webkit-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; } .environment_item { -webkit-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; } .environment_item_1 { -webkit-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; bottom: -25px; } .environment_box:hover .environment_item_image { opacity:.45; } .environment_box:hover .environment_item { /* background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 20%, rgba(0,0,0,0.65) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 20%,rgba(0,0,0,0.65) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 20%,rgba(0,0,0,0.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); */ } .environment_box:hover .environment_item_1 { bottom: 30px; } /*Home*/ .homeparallax { background-attachment: fixed; background-size:cover; } @media only screen and (min-width: 320px) and (max-width: 1199px) { .homeparallax { background-attachment: initial; } } /* Home Parallax Background Slider Controls */ .slides-navigation{ width: 100%; position: absolute; height: 70px; top:50%; margin-top:-35px; z-index: 4; } .slides-navigation a{ width: 35px; height: 100%; display: block; top:0; background-color:rgba(255,255,255,0.35); color:rgba(255,255,255,0.8); text-align: center; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .slides-navigation a i{ line-height: 70px; font-size:20px; } .slides-navigation a:hover{ background-color:rgba(255,255,255,0.3); color:rgba(255,255,255,0.6); } .slides-navigation a:first-child{ float:left; } .slides-navigation a:last-child{ float:right; } .home-inner { width:calc(100% - 70px); height: auto; margin-left: 35px; position: absolute !important; top: 32%; z-index: 5; } .inline-block { display: inline-block; } .fullwidth { width: 100%; max-width: 100%; } .tipthemeflatdark { font-family: Open Sans, Verdana, "Microsoft JhengHei UI", "Microsoft JhengHei", "LiHei Pro", "新細明體", sans-serif !important; font-size: 16px !important; background-color: rgba(0, 0, 0, 0.6) !important; letter-spacing: -1px; font-weight: 300; -webkit-border-radius: 5px; border-radius: 5px; } .tipthemeflatdark.bigger { font-size: 26px !important; } .tipthemeflatdark.smaller { font-size: 14px !important; line-height: 24px !important; } .tipthemeflatblue { font-family: Open Sans, Verdana, "Microsoft JhengHei UI", "Microsoft JhengHei", "LiHei Pro", "新細明體", sans-serif !important; font-size: 16px !important; background-color: rgba(41, 128, 185, 0.85) !important; letter-spacing: -1px; font-weight: 300; -webkit-border-radius: 5px; border-radius: 5px; } .tipthemeflatblue.bigger { font-size: 26px !important; } .tipthemeflatgreen { font-family: Open Sans, Verdana, "Microsoft JhengHei UI", "Microsoft JhengHei", "LiHei Pro", "新細明體", sans-serif !important; font-size: 16px !important; background-color: rgba(155, 187, 89, 0.85) !important; letter-spacing: -1px; font-weight: 300; -webkit-border-radius: 5px; border-radius: 5px; } .tipthemeflatgreen.bigger { font-size: 26px !important; } .tipthemeflatred { font-family: Open Sans, Verdana, "Microsoft JhengHei UI", "Microsoft JhengHei", "LiHei Pro", "新細明體", sans-serif !important; font-size: 16px !important; background-color: rgba(199, 52, 53, 0.85) !important; letter-spacing: -1px; font-weight: 300; -webkit-border-radius: 5px; border-radius: 5px; } .tipthemeflatred.bigger { font-size: 26px !important; } .tipthemeflatdark.map { background-color: rgba(0, 0, 0, 1) !important; padding: 8px !important; } .wordflip1 { color: #fff; font-weight: 400; text-transform: uppercase; overflow: hidden; padding: 0 0 10px; } .wordflip1 span { display: inline-block; position: relative; -webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg); transform: perspective(1000px) rotate3d(0,1,0,0deg); -webkit-transition: -webkit-transform 0.5s, color 0.5s; transition: transform 0.5s, color 0.5s; } .wordflip1:hover span { -webkit-transform: perspective(1000px) rotate3d(0,1,0,360deg); transform: perspective(1000px) rotate3d(0,1,0,360deg); } .wordflip1 span:nth-child(4), .wordflip1:hover span:first-child { -webkit-transition-delay: 0s; transition-delay: 0s; } .wordflip1 span:nth-child(3), .wordflip1:hover span:nth-child(2) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .wordflip1 span:nth-child(2), .wordflip1:hover span:nth-child(3) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .wordflip1 span:first-child, .wordflip1:hover span:nth-child(4) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .wordflip2 { color: #fff; font-weight: 400; text-transform: uppercase; overflow: hidden; padding: 0 0 10px; } .wordflip2 span { display: inline-block; position: relative; -webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg); transform: perspective(1000px) rotate3d(0,1,0,0deg); -webkit-transition: -webkit-transform 0.5s, color 0.5s; transition: transform 0.5s, color 0.5s; } .wordflip2:hover span { -webkit-transform: perspective(1000px) rotate3d(0,1,0,360deg); transform: perspective(1000px) rotate3d(0,1,0,360deg); } .wordflip2 span:nth-child(40), .wordflip2:hover span:first-child { -webkit-transition-delay: 0s; transition-delay: 0s; } .wordflip2 span:nth-child(39), .wordflip2:hover span:first-child(2) { -webkit-transition-delay: 0s; transition-delay: 0s;} .wordflip2 span:nth-child(38), .wordflip2:hover span:nth-child(3) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .wordflip2 span:nth-child(37), .wordflip2:hover span:nth-child(4) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .wordflip2 span:nth-child(36), .wordflip2:hover span:first-child(5) { -webkit-transition-delay: 0s; transition-delay: 0s; } .wordflip2 span:nth-child(35), .wordflip2:hover span:nth-child(6) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .wordflip2 span:nth-child(34), .wordflip2:hover span:nth-child(7) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .wordflip2 span:nth-child(33), .wordflip2:hover span:first-child(8) { -webkit-transition-delay: 0s; transition-delay: 0s; } .wordflip2 span:nth-child(32), .wordflip2:hover span:nth-child(9) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .wordflip2 span:nth-child(31), .wordflip2:hover span:nth-child(10) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .wordflip2 span:nth-child(30), .wordflip2:hover span:first-child(11) { -webkit-transition-delay: 0s; transition-delay: 0s; } .wordflip2 span:nth-child(29), .wordflip2:hover span:nth-child(12) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .wordflip2 span:nth-child(28), .wordflip2:hover span:nth-child(13) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .wordflip2 span:nth-child(27), .wordflip2:hover span:nth-child(14) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .wordflip2 span:nth-child(26), .wordflip2:hover span:first-child(15) { -webkit-transition-delay: 0s; transition-delay: 0s; } .wordflip2 span:nth-child(25), .wordflip2:hover span:nth-child(16) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .wordflip2 span:nth-child(24), .wordflip2:hover span:nth-child(17) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .wordflip2 span:nth-child(23), .wordflip2:hover span:first-child(18) { -webkit-transition-delay: 0s; transition-delay: 0s; } .wordflip2 span:nth-child(22), .wordflip2:hover span:nth-child(19) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .wordflip2 span:nth-child(21), .wordflip2:hover span:nth-child(20) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .wordflip2 span:nth-child(20), .wordflip2:hover span:nth-child(21) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .wordflip2 span:nth-child(19), .wordflip2:hover span:first-child(22) { -webkit-transition-delay: 0s; transition-delay: 0s; } .wordflip2 span:nth-child(18), .wordflip2:hover span:nth-child(23) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .wordflip2 span:nth-child(17), .wordflip2:hover span:nth-child(24) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .wordflip2 span:nth-child(16), .wordflip2:hover span:first-child(25) { -webkit-transition-delay: 0s; transition-delay: 0s; } .wordflip2 span:nth-child(15), .wordflip2:hover span:nth-child(26) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .wordflip2 span:nth-child(14), .wordflip2:hover span:nth-child(27) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .wordflip2 span:nth-child(13), .wordflip2:hover span:nth-child(28) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .wordflip2 span:nth-child(12), .wordflip2:hover span:first-child(29) { -webkit-transition-delay: 0s; transition-delay: 0s; } .wordflip2 span:nth-child(11), .wordflip2:hover span:nth-child(30) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .wordflip2 span:nth-child(10), .wordflip2:hover span:nth-child(31) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .wordflip2 span:nth-child(9), .wordflip2:hover span:first-child(32) { -webkit-transition-delay: 0s; transition-delay: 0s; } .wordflip2 span:nth-child(8), .wordflip2:hover span:nth-child(33) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .wordflip2 span:nth-child(7), .wordflip2:hover span:nth-child(34) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .wordflip2 span:nth-child(6), .wordflip2:hover span:nth-child(35) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .wordflip2 span:nth-child(5), .wordflip2:hover span:first-child(36) { -webkit-transition-delay: 0s; transition-delay: 0s; } .wordflip2 span:nth-child(4), .wordflip2:hover span:nth-child(37) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .wordflip2 span:nth-child(3), .wordflip2:hover span:nth-child(38) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .wordflip2 span:nth-child(2), .wordflip2:hover span:first-child(39) { -webkit-transition-delay: 0s; transition-delay: 0s; } .wordflip2 span:first-child, .wordflip2:hover span:nth-child(40) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } /* Home Extra Note */ .home-button{ width: auto; height: auto; margin:0 auto; padding:8px 22px; position: relative; display: inline-block; letter-spacing: 1px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .home-extra-note{ top:calc(100% - 125px); z-index:2; } .home-extra-note a{ display:inline-block; } .home-circle-button{ width:30px; height: 30px; border-radius: 100%; padding:0 !important; line-height: 30px; font-size:20px; color:rgba(255,255,255,0.6); border:1px solid rgba(255,255,255,0.6); margin:10px auto; } .home-extra-note a:hover .home-circle-button{ background:rgba(76,76,76,0.5); border:1px solid rgba(255,255,255,0.3); color:rgba(255,255,255,0.3); } /* Home Boxes Version */ .home_boxes{ width: 97%; width: calc(100% - 20px); max-width: 1170px; height: auto; margin:0 auto; } .home_boxes h2{ font-size:30px; padding:0 0 0 5px; } .home_boxes h1{ font-size:80px; padding:0; margin:5px 0 13px; } .home_boxes h3{ font-size: 25px; } .home_boxes p{ font-size:15px; letter-spacing: 0.5px; padding:0 0 0 5px; } .home_boxes .boxes{ margin-top:27px; padding:0; } .home_boxes .box{ padding:25px 16px 27px 20px; margin-right: 26px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .home_boxes .boxes.white-boxes .box{ /*background-color:rgba(255,255,255,0.2);*/ background-color:rgba(255,255,255,0.35); } .home_boxes .boxes.dark-boxes .box{ background-color:rgba(25,25,25,0.2); } .home_boxes .boxes.transparent-boxes .box{ padding-left:0 !important; } .home_boxes .box h2{ font-size:37px; margin: 0 0 9px; padding:0; line-height: 36.5px; } .home_boxes .box h2.oswald{ font-size:25px; } .home_boxes .box p{ font-size:13px; margin: 0; padding:0; } .home_boxes .box.socials p{ max-height: 18px; } .home_boxes .boxes.dark-boxes .box.socials, .home_boxes .boxes.white-boxes .box.socials{ background-color:rgba(25,25,25,0.7) !important; } .home_boxes .box a.social{ width: 25px; height: 25px; font-size: 10px; line-height: 25px; text-align: center; margin-right: 3px; background-color:rgba(255,255,255,0.2); border-radius: 100%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } /* Home Boxes Navs */ .home_boxes .boxes .owl-controls{ height: auto; text-align: left; margin-top: 22px; } .home_boxes .owl-controls .owl-buttons{ height: auto; width: auto; text-align: left; } .home_boxes .owl-controls .owl-buttons div{ display: inline-block; margin-right: 10px; width: 20px; height: 34px; position: relative; background-position: left top; background-repeat: no-repeat; opacity: 0.2; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; background-size: cover; } .home_boxes .owl-controls .owl-buttons div.owl-prev{ background-image:url(../img/strong-arrow-left.png); } .home_boxes .owl-controls .owl-buttons div.owl-next{ background-image:url(../img/strong-arrow-right.png); } .home_boxes .owl-controls .owl-buttons div:hover{ opacity: 0.4; } .home_boxes .boxes.white-boxes .box:hover { background-color: #f35050; } /*Home END*/ .image-pgn-slider span.item_label { width: auto; height: auto; position: absolute; left: 12px; top: 12px; display: block; padding: 4px 8px 4px; border-radius: 3px; cursor: default; font-size: 14px; z-index: 5; color: white; background-color: #f35050; } .image-pgn-slider ul.slides{ width: 100%; } .image-pgn-slider ul.slides li img{ width: 100%; height: auto; } .flex-control-thumbs{ margin:0; } .flex-control-thumbs li{ margin:3px 3px 0 0; width:calc(20% - 2.5px); display: inline-block; } .flex-control-thumbs li:last-child{ margin-right: 0; } .flex-control-thumbs li img{ vertical-align: middle; opacity: 0.5; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .flex-control-thumbs li img.flex-active, .flex-control-thumbs li img:hover{ opacity: 1; } .flex-direction-nav a { top: 40%; color: rgba(255,255,255,0.4); text-shadow: none; } .booking_flow { } .booking_flow .booking_flow_item img { max-width: 120px; display: inline-block; width: 100%; margin-bottom: 6px; } .booking_flow .booking_flow_item { display: inline-block; cursor: pointer; -webkit-filter: opacity(.36) grayscale(100%); filter: opacity(.36) grayscale(100%); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .booking_flow .booking_flow_item:hover { -webkit-filter: opacity(1) grayscale(0%); filter: opacity(1) grayscale(0%); } .booking_flow .booking_flow_item { cursor: pointer; -webkit-filter: opacity(.7) grayscale(0%); filter: opacity(.7) grayscale(0%); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .booking_flow .booking_flow_item:hover { -webkit-filter: opacity(1) grayscale(0%); filter: opacity(1) grayscale(0%); } @media only screen and (max-width: 767px) { .booking_flow .booking_flow_item:nth-of-type(2) + * { clear: both; } } .space_list_content .equipment_item { display: inline-block; margin-right: 8px; margin-bottom: 8px; width: 37px; height: auto; cursor: pointer; -webkit-filter: opacity(.6) grayscale(0%); filter: opacity(.6) grayscale(0%); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .space_list_content .equipment_item:hover { -webkit-filter: opacity(1) grayscale(0%); filter: opacity(1) grayscale(0%); } .space_display_content .equipment_item { cursor: pointer; -webkit-filter: opacity(.7) grayscale(0%); filter: opacity(.7) grayscale(0%); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .space_display_content .equipment_item:hover { -webkit-filter: opacity(1) grayscale(0%); filter: opacity(1) grayscale(0%); } .space_display_content .equipment_item img { margin-bottom: 6px; } @media only screen and (min-width: 768px) { .space_display_content .equipment_item:nth-of-type(6n) + * { clear: both; } } @media only screen and (max-width: 767px) { .space_display_content .equipment_item:nth-of-type(3n) + * { clear: both; } } .space_display_content .category_title { box-shadow: 0px 2px 0px #f1f1f1; } .space_display_content .category_title strong { box-shadow: 0px 2px 0px #68B78C; display: inline-block; padding: 0 3px 8px 3px; } .custom_content { color: #595959; /*padding: 10px;*/ font-size: 15px; line-height: 25px; } .custom_content .category_title { box-shadow: 0px 2px 0px #f1f1f1; } .custom_content .category_title strong { box-shadow: 0px 2px 0px #68B78C; display: inline-block; padding: 0 3px 8px 3px; } .custom_content img { max-width: 100% !important; height: auto !important; display: block !important; } /*booking*/ body .calendarSavingState, body #data-ajax-url { display: none; } body .bookedClearFix:after { content: ""; display: table; clear: both; } body table.booked-calendar { box-sizing:border-box; text-shadow:none !important; box-shadow:none !important; /*font-family: oswald, 'arial narrow', "Microsoft JhengHei UI", "Microsoft JhengHei", "LiHei Pro", "新細明體", sans-serif;*/ } body table.booked-calendar thead th .page-right, body table.booked-calendar thead th .page-left { color:#777777 !important; } body table.booked-calendar thead th { background:none !important; text-align:center !important; color:#777777 !important; border-top: 1px solid #F7F7F7; border-right: 1px solid #F7F7F7; } body table.booked-calendar tbody td { padding:0; text-align:center; } /* CALENDAR STYLES */ body .booked-calendar-wrap { } body table.booked-calendar { padding:0; background:#ffffff; border-spacing: 0; border-collapse: collapse; width:100%; border-left: 1px solid #F7F7F7; border-bottom: 1px solid #F7F7F7; } body table.booked-calendar thead { color:#fff; text-transform:uppercase; } body table.booked-calendar th { text-align:center; position:relative; font-size:17px; width:14.285%; padding:21px 0; line-height:1; } body table.booked-calendar tr.days { color:#9e9e9e; text-transform:uppercase; } body table.booked-calendar tr.days th { padding:7px 0 6px; font-size:14px; border-top: 1px solid #F7F7F7; border-right: 1px solid #F7F7F7; } body table.booked-calendar tr.days th:last-child { /*border-right: none;*/ } body table.booked-calendar th .monthName a { font-size:12px; position:relative; /*top:-3px;*/ padding-left:10px; text-decoration:none; text-transform:none; color:rgba(0,0,0,0.25); } body table.booked-calendar th .monthName a:hover { color:rgba(0,0,0,0.50); } body table.booked-calendar th .page-left { font-size:24px; color:#fff; position:absolute; left:20px; top:19px; } body table.booked-calendar th .page-right { font-size:24px; color:#fff; position:absolute; right:20px; top:19px; } body table.booked-calendar th .page-left:hover { left:19px; } body table.booked-calendar th .page-right:hover { right:19px; } body table.booked-calendar td { text-align:center; overflow:hidden; position:relative; font-size:14px; color:#ffffff; padding:0; border-top: 1px solid #F7F7F7; border-right: 1px solid #F7F7F7; } body table.booked-calendar td:last-child { /*border-right: none;*/ } body table.booked-calendar td .date { background:#68b78c; display:block; width:100%; } body table.booked-calendar td .date .number { display:block; -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; min-width: 36px; min-height: 40px; line-height: 40px; } body table.booked-calendar td .date a.number { color: #fff; } body table.booked-calendar td .date a.number:hover { color: #fff; } body table.booked-calendar td.today .date { /*background:#e3f2f9; color:#000;*/ } body table.booked-calendar td.today .date:before { content: ""; background-color: #333333; height: 4px; width: 100%; display: inline-block; position: absolute; top: 0px; left: 0; margin-top: -1px; } body table.booked-calendar td:hover .date { background:#f35050; cursor:pointer; color:#ffffff; } body table.booked-calendar td.today:hover .date { /*background:#eff7fb;*/ } body table.booked-calendar tr.week td.active { border-bottom-color:#ddd; } body table.booked-calendar tr.week td.active .date { background:#ddd; color:#555; } body table.booked-calendar tr.week td.active .date .number { /*border:none; background:#fff;*/ color:#fff; } body table.booked-calendar tr.week td.active { background:#ddd; } body table.booked-calendar tr.entryBlock { background:#ddd; color:#fff; } body table.booked-calendar tr.entryBlock td { padding:8px; text-align:left; color:#fff; border-bottom-color:#ddd; } body table.booked-calendar tr.entryBlock.loading td { height:132px; } body table.booked-calendar td.prev-date .date, body table.booked-calendar td.prev-date:hover .date { cursor:default; background:#f1f1f1; color:#d1d1d1; } body table.booked-calendar td.blur .date, body table.booked-calendar td.blur:hover .date { cursor:default; background:#fff; color:#d1d1d1; } body table.booked-calendar td.booked .date, body table.booked-calendar td.booked:hover .date { cursor:default; background:#d1d1d1; color:#ffffff; } body table.booked-calendar tr.week td.active .date, body table.booked-calendar tr.week td.active:hover .date { background:#f76563; } body table.booked-calendar .booked-appt-list { transform:scale(0.95); display:none; color:#000; background:#fff; padding:30px 35px 10px; font-size:15px; line-height:1.7; } body table.booked-calendar .booked-appt-list.shown { transform:scale(1); } body table.booked-calendar .booked-appt-list h2, body table.booked-calendar .booked-appt-list h3 { color:#555; font-size:20px; margin:0 0 10px; } /* 無障礙：月曆的時段標題由 h2 改為 h3，行高沿用原本 h2 的 28px */ body table.booked-calendar .booked-appt-list h3 { line-height:28px; } body table.booked-calendar .booked-appt-list p { font-family:Open Sans, Verdana, "Microsoft JhengHei UI", "Microsoft JhengHei", "LiHei Pro", "新細明體", sans-serif; color:#888; font-weight:400; margin:0 0 20px; } body table.booked-calendar .booked-appt-list .timeslot { box-sizing:border-box; line-height:1.8; font-family:Open Sans, Verdana, "Microsoft JhengHei UI", "Microsoft JhengHei", "LiHei Pro", "新細明體", sans-serif; color:#888; border-top:1px solid #ddd; } body table.booked-calendar .booked-appt-list .timeslot.faded { opacity:0.25; } body table.booked-calendar .booked-appt-list .timeslot:hover { background:#f9f9f9; } body table.booked-calendar .booked-appt-list .timeslot:last-child { margin:0 0 20px; } body table.booked-calendar .booked-appt-list .timeslot .timeslot-time { padding:13px 0 13px 15px; box-sizing:border-box; float:left; } body table.booked-calendar .booked-appt-list .timeslot .timeslot-time i.fa { color:#aaa; } body table.booked-calendar .booked-appt-list .timeslot .timeslot-count { padding:13px 0; box-sizing:border-box; float:left; } body table.booked-calendar .booked-appt-list .timeslot .timeslot-people { padding:10px 10px 10px 0; box-sizing:border-box; float:right; } body table.booked-calendar .booked-appt-list .timeslot .timeslot-time { width:70%; font-weight: 600; color: #555; font-size: 14px; } body table.booked-calendar .booked-appt-list .timeslot .timeslot-count { padding-left:15px; border-left:1px solid #ddd; width:40%; } body table.booked-calendar .booked-appt-list .timeslot .timeslot-count.count-wide { width:70%; } body table.booked-calendar .booked-appt-list .timeslot .spots-available { text-transform:uppercase; font-size:11px; display:block; line-height:2.7; color:#aaa; } body table.booked-calendar .booked-appt-list .timeslot .spots-available.empty { color:#E35656; } body table.booked-calendar .booked-appt-list .timeslot .timeslot-people { width:30%; } body table.booked-calendar .booked-appt-list .timeslot .timeslot-people button { float:right; margin:0 0 0 10px } body table.booked-calendar .booked-appt-list .timeslot .timeslot-people button .button-timeslot { display:none; } body table.booked-calendar .booked-appt-list .timeslot a { font-weight:600; text-decoration:none; } body table.booked-calendar .booked-appt-list .timeslot .timeslot-people button { color:#fff; border:1px solid; } body table.booked-calendar .booked-appt-list .timeslot .timeslot-people button:hover { border:1px solid; } body table.booked-calendar .booked-appt-list .timeslot .timeslot-people button[disabled], body table.booked-calendar .booked-appt-list .timeslot .timeslot-people button[disabled]:hover { cursor:default !important; background:#eee !important; border-color:#ddd !important; color:#aaa !important; } body table.booked-calendar .timeslot-count strong { display:block; text-transform:uppercase; margin:20px 0 10px; } body table.booked-calendar .appt-block { width:80%; border-top:1px solid #ddd; display:block; padding:10px 0; } body table.booked-calendar .timeslot-count button { float:right; margin:0 0 0 10px; } body table.booked-calendar .timeslot-count a.delete { float:left; margin:0 10px 0 0; font-size:20px; line-height:1.3; color:#F59E9E; } body table.booked-calendar .timeslot-count a.delete:hover { color:#E35656; } body table.booked-calendar tr.week td.active:hover .count { top:-40px; } body #booked-calendarSwitcher { box-sizing:border-box; display:inline-block; margin:0; padding:8px 10px 9px 12px; background:#2D3A40; color:#fff; -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; } body #booked-calendarSwitcher p { line-height:1; margin:0; } body #booked-calendarSwitcher p i.fa { font-size:14px; margin:0 5px 0 0; position:relative; color:#fff; } body #booked-calendarSwitcher select { font-size:14px; min-width:200px; border:none; background:#2D3A40; color:#fff; } body #booked-calendarSwitcher select:active, body #booked-calendarSwitcher select:focus { -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; outline:none; } /* SMALL CALENDAR */ body .booked-calendar-wrap.small table.booked-calendar thead th { font-size:16px; padding:13px 0 10px; } body .booked-calendar-wrap.small table.booked-calendar thead tr.days th { font-size:11px; padding:7px 0 5px; } body .booked-calendar-wrap.small table.booked-calendar td { font-size:13px; } body .booked-calendar-wrap.small table.booked-calendar thead th .page-left { left:10px; top:11px; font-size:15px; } body .booked-calendar-wrap.small table.booked-calendar thead th .page-right { right:10px; top:11px; font-size:15px; } body .booked-calendar-wrap.small table.booked-calendar thead th .page-left:hover { left:9px; } body .booked-calendar-wrap.small table.booked-calendar thead th .page-right:hover { right:9px; } body .booked-calendar-wrap.small table.booked-calendar th .monthName a { top:-2px; font-size:10px; } body .booked-calendar-wrap.small table.booked-calendar td .count { display:none; } body .booked-calendar-wrap.small table.booked-calendar td .date { height:100%; } body .booked-calendar-wrap.small table.booked-calendar td .date .number { border:none; display:inline-block; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; transform:scale(1); width:auto; height:auto; line-height:100%; } body .booked-calendar-wrap.small table.booked-calendar td.blur .date, body .booked-calendar-wrap.small table.booked-calendar td.blur:hover .date { cursor:default; background:#EEEEEE; color:#ccc; } body .booked-calendar-wrap.small table.booked-calendar td.booked .date, body .booked-calendar-wrap.small table.booked-calendar td.booked:hover .date { cursor:default; background:#FFE4DF; color:#F15934; } body .booked-calendar-wrap.small table.booked-calendar td.today .date { background:#e3f2f9; color:#555; } body .booked-calendar-wrap.small table.booked-calendar td.today:hover .date { background:#eff7fb; color:#555; } body .booked-calendar-wrap.small table.booked-calendar td:hover .date { background:#f9f9f9; cursor:pointer; color:#000; } body .booked-calendar-wrap.small table.booked-calendar tr.week td.active .date .number { border:none; transform:scale(1.5); background:none; color:#000; } body .booked-calendar-wrap.small table.booked-calendar tr.entryBlock td { padding:5%; } body .booked-calendar-wrap.small table.booked-calendar .booked-appt-list { max-height:170px; overflow-y: scroll; overflow-x: hidden; padding:15px 20px 10px; } body .booked-calendar-wrap.small table.booked-calendar .booked-appt-list h2, body .booked-calendar-wrap.small table.booked-calendar .booked-appt-list h3 { text-align:center; margin:0 0 15px; font-size:12px; } body .booked-calendar-wrap.small table.booked-calendar .booked-appt-list .timeslot { border-top:0; margin:0 0 10px; } body .booked-calendar-wrap.small table.booked-calendar .booked-appt-list .timeslot .timeslot-time, body .booked-calendar-wrap.small table.booked-calendar .booked-appt-list .timeslot .timeslot-count { display:none; } body .booked-calendar-wrap.small table.booked-calendar .booked-appt-list .timeslot .timeslot-people { width:100%; padding:0; } body .booked-calendar-wrap.small table.booked-calendar .booked-appt-list .timeslot .timeslot-people button { float:none; margin:0; width:100%; text-align:center; } body .booked-calendar-wrap.small table.booked-calendar .booked-appt-list .timeslot .timeslot-people button .button-timeslot { display:block; font-weight:600; font-size:13px; } body .booked-calendar-wrap.small table.booked-calendar .booked-appt-list .timeslot .timeslot-people button .button-text { display:none; } body .booked-calendar-wrap.small table.booked-calendar td.prev-date .date, body .booked-calendar-wrap.small table.booked-calendar td.prev-date:hover .date { cursor:default; background:#f9f9f9; color:#bbb; } body .booked-calendar-wrap.small table.booked-calendar td.blur .date, body .booked-calendar-wrap.small table.booked-calendar td.blur:hover .date { cursor:default; background:#eee; color:#ddd; } body .booked-calendar-wrap.small table.booked-calendar td.booked .date, body .booked-calendar-wrap.small table.booked-calendar td.booked:hover .date { cursor:default; background:#ffeae7; color:#f0b1a1; } body .booked-calendar-wrap.small table.booked-calendar tr.week td.active .date, body .booked-calendar-wrap.small table.booked-calendar tr.week td.active:hover .date { background:#ddd; } /*booking END*/ .boxes.steps-type{ padding-top:0; } .boxes.steps-type .box{ position: relative; min-height: 1px; float: left; width: 22%; padding: 0 0; } .boxes.steps-type .midbox{ position: relative; min-height: 1px; float: left; width: 4%; padding: 35px 0 0 0; font-size: 22px; color: #b1b1b1; } .boxes.steps-type .box-icon a.changeable-icon{ width:100px; height: 100px; display: inline-block; border-radius: 100%; position: relative; font-size:18px; line-height: 100px; position: relative; } .boxes.steps-type .box-icon a.changeable-icon:after{ width:100%; height: 100%; display: block; position: absolute; left:0; top:0; border-width: 1px; content:''; opacity: 0; border-style: solid; background:transparent; border-radius: 100%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .boxes.steps-type .box:hover .box-icon a.changeable-icon:after{ opacity: 1; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .boxes.steps-type .box-header{ font-size:24px; } .boxes.steps-type .box-icon a.lock-icon{ background-color:#c1c1c1; } .boxes.steps-type .box-icon a.lock-icon { width: 100px; height: 100px; display: inline-block; border-radius: 100%; position: relative; font-size: 18px; line-height: 100px; position: relative; } @media only screen and (max-width: 640px){ .boxes.steps-type .box-icon a.lock-icon{ width: 70px; height: 70px; font-size: 13px; line-height: 80px; } .boxes.steps-type .box-icon a.changeable-icon{ width: 70px; height: 70px; font-size: 13px; line-height: 80px; } .boxes.steps-type .midbox{ padding-top: 26px; } } .j-forms input, .j-forms textarea { background-color: initial; outline: initial; border: initial; padding: initial; float: initial; width: initial; box-sizing: initial; } .paging2_list_item a { display: inline-block; width: 20px; height: 20px; background-image: url('../img/icons/icon-grid-grey.svg'); background-size: 20px 20px; background-repeat: no-repeat; } .paging2_prev_item a { display: inline-block; width: 20px; height: 20px; background-image: url('../img/icons/icon-prev-grey.svg'); background-size: 20px 20px; background-repeat: no-repeat; } .paging2_prev_item a.disabled { background-image: url('../img/icons/icon-prev-lightgrey.svg'); } .paging2_next_item a { display: inline-block; width: 20px; height: 20px; background-image: url('../img/icons/icon-next-grey.svg'); background-size: 20px 20px; background-repeat: no-repeat; } .paging2_next_item a.disabled { background-image: url('../img/icons/icon-next-lightgrey.svg'); } .paging2_item .disabled { display: none; } /*-------------------------------------------------------------------------------------------------------------------------------*/ /* 02 - GLOBAL SETTINGS */ /*-------------------------------------------------------------------------------------------------------------------------------*/ /*main*/ #content-block{position: relative; overflow: hidden; left: 0;} /* .container{max-width: 100%; position: relative;} .container-fluid{position: relative;} */ .content-margins{position: relative; border-left: 50px transparent solid; border-right: 50px transparent solid;} @media (max-width: 991px) { .content-margins{border-width: 0 15px;} } .content-margins.grey{border-color: #f7f7f7;} .overflow-hidden{overflow: hidden;} html.overflow-hidden body{overflow: hidden;} .page-height{min-height: 500px;} body.mobile .swiper-container.page-height, body.mobile .swiper-container.page-height .swiper-wrapper, body.mobile .swiper-container.page-height .swiper-slide{height: auto!important;} body.mobile .swiper-container.page-height .swiper-wrapper{transform: none!important; -webkit-transform: none!important;} body.mobile .swiper-container.page-height .swiper-pagination{display: none;} .grey-background{background: #f7f7f7;} @media (min-width: 992px) { .visible-rd{display: none!important;} } .image-thumbnail{display: block; max-width: 100%; height: auto; margin: 0 auto;} @media (min-width: 992px) { .row.vertical-aligned-columns{font-size: 0; white-space: nowrap;} .row.vertical-aligned-columns > div[class*="col"]{float: none; display: inline-block; vertical-align: middle; white-space: normal;} } /*table*/ .table-view{height: 100%; width: 100%; display: table;} .row-view{display: table-row;} .cell-view{display: table-cell; vertical-align: middle; width: 10000px;} .cell-view.page-height{position: relative; z-index: 1;} .cell-view.simple-banner-height{height: 600px;} .cell-view.simple-banner-height.middle{height: 700px;} .cell-view.simple-banner-height.big{height: 800px;} /* Tablets (>=768px)*/ @media (max-width: 991px) { .cell-view.page-height{height: 500px!important} .swiper-container.page-height{height: 500px!important;} .cell-view.simple-banner-height, .cell-view.simple-banner-height.big, .cell-view.simple-banner-height.middle{height: auto;} } /*Phones (<768px)*/ @media (max-width: 767px) { .cell-view.page-height{height: auto!important} .swiper-container.page-height, .swiper-container.page-height .swiper-wrapper, .swiper-container.page-height .swiper-slide{height: auto!important;} .swiper-container.page-height .swiper-wrapper{transform: none!important; -webkit-transform: none!important;} .swiper-container.page-height .swiper-pagination{display: none;} } /*body selection*/ body ::selection {color: #b8cd06; background: #343434;} body ::-moz-selection {color: #b8cd06; background: #343434;} /*helper classes*/ .nopadding, .nopadding>*[class*="col"]{padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0;} .line-through{display: inline-block; position: relative; padding: 0 5px;} .line-through:after{position: absolute; width: 100%; height: 1px; left: 0; top: 50%; background: currentColor; content: "";} .clearfix:after{content: ""; display: block; clear: both;} .valign-middle { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; } .valign-middle-content{width: 100%; position: relative;} .full-size{position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .fixed-background{background-size: cover; background-position: center top; background-attachment: fixed;} body.mobile .fixed-background{background-attachment: scroll;} .align-inline{display: inline-block; vertical-align: middle;} .align-inline.spacing-1{margin-right: 20px; margin-bottom: 10px;} .block{display: block;} .rounded-image{border-radius: 10px; -webkit-border-radius: 10px;} .block-image{display: block; max-width: 100%; height: auto; margin: 0 auto;} .uppercase{text-transform: uppercase;} .row-background{position: absolute; width: 50%; bottom: 0; height: 100%;} .row-background.big{height: 112%;} .row-background img{position: absolute; max-height: 100%; max-width: 100%; bottom: 0; left: 50%; transform: translateX(-50%)!important; -webkit-transform: translateX(-50%)!important;} .row-background.left{left: 0;} .row-background.right{right: 0;} .block-entry{background-size: cover; background-position: center center; background-repeat: no-repeat;} .notransition, .notransition *{transition: none!important; -webkit-transition: none!important;} /*hovers*/ .simple-mouseover{display: block; overflow: hidden;} .simple-mouseover, .simple-mouseover *{position: relative;} .simple-mouseover:after, .simple-mouseover:before{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(184,205,6,.8); content: ""; opacity: 0; transition: all .3s; -webkit-transition: all .3s; border-radius: inherit; -webkit-border-radius: inherit;} .simple-mouseover:before{background: url(../img/icon-11.png) center center no-repeat; z-index: 1; transform: rotate(180deg); -webkit-transform: rotate(180deg);} .simple-mouseover:hover:after{opacity: 1;} .simple-mouseover:hover:before{opacity: 1; transform: rotate(0); -webkit-transform: rotate(0);} .simple-mouseover img{display: block; max-width: 100%; height: auto;} /*loader*/ #loader-wrapper{position: fixed; left: 0; top: -100px; right: 0; bottom: -100px; background: #fff; z-index: 12;} /**/ .simple-article{color: #888;} .simple-article.grey, .grey{color: #555;} .simple-article.dark, .dark{color: #343434;} .simple-article.light{color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.1);} .simple-article.light.transparent, .light.transparent{color: rgba(255,255,255,.8);} .simple-article.light.fulltransparent, .light.fulltransparent{color: rgba(255,255,255,.5);} .simple-article.color, .color{color: #b8cd06;} .simple-article a {color: #888;} .simple-article a:hover {color: #333;} .simple-article.size-1{font-size: 11px; line-height: 18px;} .simple-article.size-2{font-size: 13px; line-height: 20px;} .simple-article.size-3{font-size: 14px; line-height: 22px;} .simple-article.size-4{font-size: 16px; line-height: 24px;} .simple-article.size-5{font-size: 18px; line-height: 24px;} .simple-article p, .simple-article ul, .simple-article ol, .simple-article img, .simple-article *[class*="col"], .simple-article h1, .simple-article h2, .simple-article h3, .simple-article h4, .simple-article h5, .simple-article h6, .simple-article .embed-responsive, .simple-article .swiper-container{margin-bottom: 22px;} .simple-article *:last-child{margin-bottom: 0;} .simple-article img{max-width: 100%; height: auto; display: inline-block; vertical-align: bottom;} .blog-article img{display: block;} .blog-article p, .blog-article ul, .blog-article ol, .blog-article img, .blog-article *[class*="col"]{margin-bottom: 1em;} .simple-article ol{counter-reset: number;} .simple-article ol li{padding-left: 0; margin-bottom: 8px;} .simple-article ol li:before{counter-increment: number; content: "#" counter(number); color: #b8cd06; margin-right: 5px;} .simple-article ul li{padding-bottom: 4px; padding-top: 4px; position: relative;} .simple-article ul li:before{content: ""; width: 17px; height: 13px; display: inline-block; vertical-align: middle; background: url(../img/icon-20.png); position: relative; margin-right: 12px;} .simple-article.light ul li:before{background-image: url(../img/icon-21.png);} .simple-article ul, .simple-article ol {list-style: none; margin: 0 0 22px 0; padding: 0 0 0 15px;} .simple-article ol.customstyle1 { padding: 8px 0 0 45px; } .simple-article ol.customstyle1 li { position: relative; width: 100% } .simple-article ol.customstyle1 li:before{ position: absolute; left: -38px; color: #888; } .simple-article h1, .h1, .simple-article h2, .h2, .simple-article h3, .h3, .simple-article h4, .h4, .simple-article h5, .h5, .simple-article h6, .h6{color: #343434; font-weight: 600; text-transform: uppercase;} .simple-article.light h1, .simple-article.light .h1, .h1.light, .simple-article.light h2, .simple-article.light .h2, .h2.light, .simple-article.light h3, .simple-article.light .h3, .h3.light, .simple-article.light h4, .simple-article.light .h4, .h4.light, .simple-article.light h5, .simple-article.light .h5, .h5.light, .simple-article.light h6, .simple-article.light .h6, .h6.light{color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.1);} .simple-article h1 a, .h1 a, .simple-article h2 a, .h2 a, .simple-article h3 a, .h3 a, .simple-article h4 a, .h4 a, .simple-article h5 a, .h5 a, .simple-article h6 a, .h6 a{transition: all .15s; -webkit-transition: all .15s;} .simple-article h1 a:hover, .h1 a:hover, .simple-article h2 a:hover, .h2 a:hover, .simple-article h3 a:hover, .h3 a:hover, .simple-article h4 a:hover, .h4 a:hover, .simple-article h5 a:hover, .h5 a:hover, .simple-article h6 a:hover, .h6 a:hover{color: #b8cd06;} .simple-article h1, .h1{font-size: 70px; line-height: 70px;} .simple-article h2, .h2{font-size: 40px; line-height: 46px;} .simple-article h3, .h3{font-size: 30px; line-height: 34px;} .simple-article h4, .h4{font-size: 18px; line-height: 24px;} .simple-article h5, .h5{font-size: 16px; line-height: 22px;} .simple-article h6, .h6{font-size: 13px; line-height: 18px;} .simple-article a:not(.button):hover{text-decoration: underline;} .simple-article br{line-height: 1em;} .title-underline{padding: 20px 0; color: #ffffff; height: 21px;} .title-underline.light{color: #fff;} .title-underline span{width: 55px; height: 1px; background: currentColor; display: inline-block; vertical-align: top; position: relative;} .title-underline span:before, .title-underline span:after{width: 4px; height: 1px; background: inherit; position: absolute; content: ""; top: 0; left: -9px;} .title-underline span:after{left: auto; right: -9px;} .title-underline.left{margin-left: 9px;} .title-underline.left span:after{display: none;} .title-underline.right{margin-right: 9px;} .title-underline.right span:before{display: none;} /*Desktops (>=992px)*/ @media (max-width: 1199px) { .simple-article h1, .h1{font-size: 46px; line-height: 46px;} } /* Tablets (>=768px)*/ @media (max-width: 991px) { .simple-article h1, .h1{font-size: 46px; line-height: 46px;} } /*Phones (<768px)*/ @media (max-width: 767px) { .simple-article h1, .h1{font-size: 34px; line-height: 40px;} .simple-article h2, .h2{font-size: 34px; line-height: 40px;} } /**/ .button{display: inline-block; vertical-align: bottom; text-align: center; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.1); box-shadow: 1px 1px 2px rgba(0,0,0,.1); text-transform: uppercase; font-weight: 700; position: relative; cursor: pointer;} .button.noshadow{box-shadow: none; -webkit-box-shadow: none; border: 1px #eee solid;} .button.block{display: block;} .button input{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0;} .button span{display: block; position: relative; left: 0;} .button span.icon{transition: all .15s; -webkit-transition: all .15s;} .button span.text{transition: all .3s .05s; -webkit-transition: all .3s .05s;} .button.size-1{font-size: 11px; line-height: 18px; border-radius: 20px; -webkit-border-radius: 20px;} .button.size-2{font-size: 11px; line-height: 18px; border-radius: 25px; -webkit-border-radius: 25px;} .button.size-6{font-size: 13px; line-height: 18px; } .button.size-7{font-size: 12px; line-height: 18px; } .button.size-1 .text{padding: 12px 20px 10px 20px;} .button.size-2 .text{padding: 17px 30px 15px 30px;} .button.size-6 .text{padding: 12px 25px 10px 25px;} .button.size-7 .text{padding: 8px 21px 6px 21px;} .button.style-1{background: #fff; color: #555;} .button.style-2{background: #343434; color: #fff;} .button.style-3{background: #b8cd06; color: #fff;} .button.style-4{color: #fff;} .button.style-5{border: 1px #eee solid; color: #888; box-shadow: none; -webkit-box-shadow: none;} .button.facebook-button{background: #3b5998;} .button.twitter-button{background: #5ea9dd;} .button.google-button{background: #dd4d42;} .button-wrapper{display: block; overflow: hidden; border-radius: inherit; -webkit-border-radius: inherit; position: relative;} .button:before{position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; -webkit-border-radius: inherit; background: inherit; content: ""; opacity: .3;} .button:hover:before{transform: scale(1.5); -webkit-transform: scale(1.5); opacity: 0; visibility: hidden; transition: transform .5s, opacity .5s, visibility 0s .5s; -webkit-transition: transform .5s, opacity .5s, visibility 0s .5s;} .button .icon{width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 20px; position: absolute; left: -50px; top: 50%; margin-top: -15px; margin-left: -15px; color: #b8cd06;} .button:hover .icon{left: 50%;} .button.style-3 .icon, .button.style-4 .icon{color: #fff;} .button.style-5 .icon{color: #888;} .button .icon img{display: block; max-width: 30px; height: auto;} .button .icon .fa{display: block; line-height: inherit;} .button:hover .text{left: 100%;} .button-close{display: inline-block; vertical-align: middle; background: url(../img/icon-5.png) 50% 50% no-repeat; width: 40px; height: 40px; cursor: pointer; position: relative;} .button-close:before{position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; border-radius: 50%; -webkit-border-radius: 50%; transform: scale(0); -webkit-transform: scale(0); pointer-events: none; background: #000; opacity: .5;} .button-close:hover:before{transform: scale(1.5); -webkit-transform: scale(1.5); opacity: 0; transition: transform .5s, opacity .5s, visibility 0s .5s; -webkit-transition: transform .5s, opacity .5s, visibility 0s .5s;} .buttons-wrapper{font-size: 0; margin: 0 -5px;} .buttons-wrapper .button{margin: 0 5px 10px 5px;} .buttons-wrapper .button:last-child{margin-right: 0;} .buttons-wrapper:after{display: block; content: ""; margin-top: -10px;} .buttons-wrapper .simple-article{line-height: 24px; margin: 13px 30px 10px 0; display: inline-block; vertical-align: top;} .play-button{width: 50px; height: 50px; background: #b8cd06; border-radius: 50px; -webkit-border-radius: 50px; position: relative; position: absolute; left: 50%; top: 50%; margin: -25px 0 0 -25px;} .play-button:before{position: absolute; left: -5px; top: -5px; right: -5px; bottom: -5px; background: rgba(184,205,6,.3); content: ""; border-radius: inherit; -webkit-border-radius: inherit; transition: all .3s; -webkit-transition: all .3s;} .play-button:hover:before{transform: scale(.9); -webkit-transform: scale(.9);} .play-button:after{width: 0; height: 0; border-style: solid; border-width: 6.5px 0 6.5px 9px; border-color: transparent transparent transparent #fff; position: absolute; left: 50%; top: 50%; margin: -6.5px 0 0 -3px; content: "";} /* Tablets (>=768px)*/ @media (max-width: 991px) { .buttons-wrapper .simple-article{display: block;} } /*Phones (<768px)*/ @media (max-width: 767px) { .button{display: block;} .button.mobile-icon .text{display: none;} .button.mobile-icon .icon{position: relative; left: auto; top: auto; margin: 0; display: block; width: auto; height: auto; line-height: inherit;} .button.mobile-icon.size-1{width: 40px; height: 40px; line-height: 40px;} .button.mobile-icon.size-2{width: 50px; height: 50px; line-height: 50px;} .buttons-wrapper .button{margin-right: 0;} } /**/ .simple-input, .SumoSelect > .CaptionCont{font-size: 14px; color: #555; height: 50px; line-height: 48px; padding: 0 30px; width: 100%; border: 1px #eee solid; border-radius: 26px; -webkit-border-radius: 26px; transition: all .15s; -webkit-transition: all .15s;} .simple-input.small{height: 40px; line-height: 38px; font-size: 11px; padding: 0 18px;} .simple-input{background: #fff;} .simple-input.style-1{border-radius: 0; -webkit-border-radius: 0; border-left: none; border-top: none; border-right: none; padding-left: 0;} .SumoSelect > .CaptionCont{font-size: 14px;} .SumoSelect > select.small+.CaptionCont{padding: 0 15px; font-size: 10px; text-transform: uppercase;} .SumoSelect > select.small+.CaptionCont > label{width: 40px;} .SumoSelect > select.small+.CaptionCont > span{padding-right: 20px;} .SlectBox.small+.CaptionCont{height: 42px; line-height: 40px; border-radius: 21px; -webkit-border-radius: 21px;} .simple-input:focus, .SumoSelect.open > .CaptionCont{border-color: #b8cd06;} .simple-input.invalid{border-color: #dd4d42!important;} .SumoSelect > .CaptionCont > span.placeholder {color: #888;} input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color: #888; opacity: 1;} input:-moz-placeholder, textarea:-moz-placeholder{color: #888; opacity: 1;} input::-moz-placeholder, textarea::-moz-placeholder{color: #888; opacity: 1;} input:-ms-input-placeholder, textarea:-ms-input-placeholder{color: #888; opacity: 1;} textarea.simple-input{padding-top: 10px; padding-bottom: 10px; line-height: 22px; height: 140px;} .simple-input.light{border-color: rgba(255,255,255,.5); color: #fff; background: transparent;} .simple-input.light:focus{border-color: #fff;} .SumoSelect select.light+.CaptionCont > span.placeholder {color: rgba(255,255,255,.8);} input.light::-webkit-input-placeholder, textarea.light::-webkit-input-placeholder, select.light+.CaptionCont input::-webkit-input-placeholder{color: rgba(255,255,255,.8); opacity: 1;} input.light:-moz-placeholder, textarea.light:-moz-placeholder, select.light+.CaptionCont input:-moz-placeholder{color: rgba(255,255,255,.8); opacity: 1;} input.light::-moz-placeholder, textarea.light::-moz-placeholder, select.light+.CaptionCont input::-moz-placeholder{color: rgba(255,255,255,.8); opacity: 1;} input.light:-ms-input-placeholder, textarea.light:-ms-input-placeholder, select.light+.CaptionCont input:-ms-input-placeholder{color: rgba(255,255,255,.8); opacity: 1;} select.light+.CaptionCont{background: transparent; border-color: rgba(255,255,255,.5); color: #fff;} .SumoSelect.open select.light+.CaptionCont{border-color: #fff;} .single-line-form{position: relative;} .single-line-form .button{position: absolute; top: 0; right: 0;} .input-file-wrapper{position: relative;} .input-file-wrapper .simple-input{color: #888; padding-right: 50px;} .input-file-wrapper.active .simple-input{color: #555;} .input-file-wrapper .simple-input.light{color: rgba(255,255,255,.8);} .input-file-wrapper.active .simple-input.light{color: #fff;} .input-file-wrapper .file-remove{position: absolute; top: 0; right: 0; width: 50px; height: 50px; background: url(../img/icon-5.png) center center; cursor: pointer; z-index: 1; opacity:.5; display: none;} .input-file-wrapper .file-remove.light{background-image: url(../img/icon-19.png);} .input-file-wrapper .file-remove:hover{opacity: 1;} .input-file-wrapper.active .file-remove{display: block;} form{position: relative;} .submit-icon{position: absolute; right: 0; top: 0; height: 100%; width: 50px; text-align: center; color: #888; cursor: pointer; transition: all .3s; -webkit-transition: all .3s;} .submit-icon:hover{color: #343434;} .submit-icon .fa{position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%);} /**/ .checkbox-entry{display: inline-block; cursor: pointer; margin: 0; padding: 0; min-width: 20px; min-height: 20px;} .checkbox-entry input{display: none;} .checkbox-entry span{position: relative; font-size: 11px; line-height: 20px; padding-left: 30px; display: block; color: #888; text-transform: uppercase;} .checkbox-entry:hover span{color: #555;} .checkbox-entry span:before{content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border: 1px #eee solid; border-radius: 2px; -webkit-border-radius: 2px; background: url(../img/icon-6.png) 100px center no-repeat #fff;} .checkbox-entry input:checked+span:before{border-color: #b8cd06; background-color: #b8cd06; background-position: center center;} .checkbox-entry.radio span:before{border-radius: 10px; -webkit-border-radius: 10px; background: none;} .checkbox-entry.radio input:checked+span:before{border-color: #b8cd06; background-color: #fff; border-width: 7px;} .checkbox-entry a:hover{text-decoration: underline;} .checkbox-entry.light span{color: rgba(255,255,255,.8);} .checkbox-entry.light:hover span{color: #fff;} .checkbox-entry.light.radio input:checked+span:after{content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border: 2px #eee solid; border-radius: 10px; -webkit-border-radius: 10px;} .checkbox-entry.checkbox-toggle-title span{color: #343434; font-weight: 900; text-transform: uppercase; font-size: 18px;} .checkbox-toggle-wrapper{display: none;} /**/ .ClassyCountdown-wrapper{margin: 0 -5px;} .ClassyCountdown-wrapper > div {display: inline-block; position: relative; width: 25%; padding: 0 5px;} .ClassyCountdown-wrapper .ClassyCountdown-value {width: 100%; line-height: 1em; position: absolute; top: 50%; text-align: center; left: 0; display: block;} .ClassyCountdown-wrapper .ClassyCountdown-value span{display: block;} .countdown.light .ClassyCountdown-wrapper .ClassyCountdown-value span, .countdown.light-green .ClassyCountdown-wrapper .ClassyCountdown-value span{color: rgba(255,255,255,.8)!important;} .countdown.max-width{max-width: 400px;} /**/ .follow{font-size: 0; margin-bottom: -7px;} .follow .title, .tags .title{font-weight: 700; font-size: 13px; color: #fff; text-transform: uppercase; display: inline-block; line-height: 35px; vertical-align: top; margin-right: 20px;} .follow.light .title, .tags.light .title{color: #343434;} .follow .entry{width: 35px; height: 35px; line-height: 35px; display: inline-block; vertical-align: bottom; border-radius: 50%; -webkit-border-radius: 50%; background: #424242; color: #888; font-size: 14px; margin: 0 7px 7px 7px; cursor: pointer; position: relative; text-align: center;} .follow.light .entry{background: #f7f7f7;} .follow .entry:hover{color: #fff;} .follow .entry .fa{display: block; line-height: inherit; position: relative;} .follow .entry:before{position: absolute; left: -1px; top: -1px; right: -1px; bottom: -1px; content: ""; border-radius: 50%; -webkit-border-radius: 50%; background: #b8cd06; transform: scale(0); -webkit-transform: scale(0);} .follow .entry:hover:before{transform: scale(1); -webkit-transform: scale(1);} .follow .entry, .follow .entry:before{transition: all .15s; -webkit-transition: all .15s;} /*Phones (<768px)*/ @media (max-width: 767px) { .follow .title, .tags .title{margin: 0 0 10px 0; display: block; line-height: 18px;} } /*.swiper-wrapper{cursor:url(../img/drag.png) 16 9, ew-resize;}*/ /*.swiper-container-vertical .swiper-wrapper{cursor:url(../img/drag-vertical.png) 8 16, ns-resize;}*/ .swiper-button-disabled+.swiper-button-disabled+.swiper-wrapper, .swiper-button-disabled+.swiper-button-disabled+.swiper-container > .swiper-wrapper{transform: none!important; -webkit-transform: none!important; cursor: auto; justify-content: center;} .swiper-button-disabled+.swiper-button-disabled+.swiper-wrapper .swiper-slide:last-child, .swiper-button-disabled+.swiper-button-disabled+.swiper-container > .swiper-wrapper .swiper-slide:last-child{margin-right: 0!important;} .swiper-button-disabled+.swiper-button-disabled+.swiper-wrapper+.swiper-pagination-bullets, .swiper-button-disabled+.swiper-button-disabled+.swiper-container > .swiper-pagination-bullets{display: none!important;} .swiper-container-horizontal{overflow-x: hidden; overflow-y: visible;} .swiper-button-prev.style-1{left: 0;} .swiper-button-next.style-1{right: 0;} .swiper-button-prev.style-1, .swiper-button-next.style-1{background-color: transparent;} .swiper-button-prev.style-1:before, .swiper-button-next.style-1:before, .swiper-button-prev.style-1:after, .swiper-button-next.style-1:after{display: none;} .swiper-container.arrows-align-top>.swiper-button-next{top: -5px; margin: 0; width: 30px; height: 30px; background-position: -75px -15px;} .swiper-container.arrows-align-top>.swiper-button-next:hover{background-position: -15px -15px;} .swiper-container.arrows-align-top>.swiper-button-prev{top: -5px; margin: 0; left: auto; right: 45px; width: 30px; height: 30px; background-position: -15px -15px;} .swiper-container.arrows-align-top>.swiper-button-prev:hover{background-position: -75px -15px;} .swiper-title{margin-right: 80px;} .swiper-container.rounded{border-radius: 10px; -webkit-border-radius: 10px;} .swiper-container.rounded-top{/*border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0;*/} .swiper-container[data-touch="0"]:after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: 1;} .content-margins .swiper-button-prev:not(.style-1), .container .swiper-button-prev:not(.style-1){left: -30px;} .content-margins .swiper-button-next:not(.style-1), .container .swiper-button-next:not(.style-1){right: -30px;} .swiper-slide{background-size: cover; background-position: center center;} .our-team-slider .swiper-button-next, .our-team-slider .swiper-button-prev{margin-top: -88px;} .popup-wrapper{position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; left: -100%; transition-delay: .3s; -webkit-transition-delay: .3s;} .popup-wrapper.active{left: 0; transition-delay: 0s; -webkit-transition-delay: 0s;} .popup-wrapper .bg-layer{position: absolute; left: 0; top: -100px; right: 0; bottom: -100px; background: rgba(0,0,0,.8); transition: all .3s ease-out; -webkit-transition: all .3s ease-out; opacity: 0;} .popup-wrapper.active .bg-layer{opacity: 1;} .popup-content{position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: auto; -webkit-overflow-scrolling: touch; font-size: 0; text-align: center; transition: all .3s ease-out; -webkit-transition: all .3s ease-out; transform: scale(1.2); -webkit-transform: scale(1.2); opacity: 0; visibility: hidden; padding: 15px;} .popup-content.active{transform: scale(1); -webkit-transform: scale(1); opacity: 1; visibility: visible;} .popup-content:after{display: inline-block; vertical-align: middle; height: 100%; content: "";} .popup-container{display: inline-block; vertical-align: middle; width: 100%; position: relative; text-align: left; background: #fff; /*-webkit-border-radius: 5px; border-radius: 5px;*/ -webkit-box-shadow: 3px 4px 20px rgba(0,0,0,.2); box-shadow: 3px 4px 20px rgba(0,0,0,.2);} .popup-container.size-1{max-width: 570px;} .popup-container.size-2{max-width: 1170px;} .popup-container.size-3{max-width: 970px;} .popup-container.size-4{background: #000; max-width: 80%; padding: 50px 5px 5px 5px; background: #fff;} .popup-content .layer-close{position: absolute; left: 0; bottom: 0; right: 0; height: 10000px;} .popup-align{padding: 80px 100px; overflow: hidden;} .simple-link{font-size: 11px; line-height: 18px; color: #555; display: inline-block; font-weight: 700; text-transform: uppercase; transition: all .15s; -webkit-transition: all .15s;} .simple-link:hover{color: #b8cd06;} .popup-container .button-close{position: absolute; right: 5px; top: 5px; z-index: 2;} .popup-or{height: 140px; position: relative;} .popup-or:before{position: absolute; left: 0; top: 50%; width: 100%; background: #eee; content: ""; height: 1px;} .popup-or span{width: 60px; height: 60px; border: 5px #eee solid; border-radius: 30px; -webkit-border-radius: 30px; text-align: center; line-height: 50px; position: absolute; left: 50%; top: 50%; margin: -30px 0 0 -30px; background: #fff; font-size: 11px; color: #888; font-weight: 700; text-transform: uppercase;} /* Tablets (>=768px)*/ @media (max-width: 991px) { .popup-container.size-2 .popup-align{padding: 40px 15px 40px 15px;} } /*Phones (<768px)*/ @media (max-width: 767px) { .popup-container.size-1 .popup-align{padding: 40px 30px;} .popup-container.size-4{max-width: 100%;} } .full-size { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } /*grid->cgrid*/ .cgrid-sizer{width: 25%;} .cgrid{position: relative; margin: -15px -15px 0 -15px;} .cgrid-item.w25{width: 25%;} .cgrid-item.w50{width: 50%;} .gallery-cgrid-item{overflow: hidden; position: relative; cursor: pointer;} .gallery-cgrid-item:after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; /*border: 15px #fff solid;*/} .gallery-cgrid-item img{display: block; width: 100%; transition: all .3s; -webkit-transition: all .3s;} .gallery-cgrid-item.style-1:hover img{transition: all .3s .15s; -webkit-transition: all .3s .15s; transform: translateY(100px); -webkit-transform: translateY(100px);} .gallery-cgrid-item.style-1 .gallery-title{position: absolute; left: 15px; top: 15px; right: 15px; background: #b8cd06; padding: 22px 30px; transform: translateY(-100%); -webkit-transform: translateY(-100%); transition: all .3s; -webkit-transition: all .3s; min-height: 100px;} .gallery-cgrid-item.style-1:hover .gallery-title{transform: translateY(0%); -webkit-transform: translateY(0%);} .gallery-cgrid-link{z-index: 1;} .gallery-cgrid-item.style-2 .gallery-title{position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(247,247,247,.85); opacity: 0; transition: all .3s .15s; -webkit-transition: all .3s .15s;} .gallery-cgrid-item.style-2 .gallery-title .left{position: absolute; left: 45px; right: 45px; top: 50%; margin-top: -20px; opacity: 0; transition: all .3s; -webkit-transition: all .3s; transform: translateX(-100%); -webkit-transform: translateX(-100%);} .gallery-cgrid-item.style-2 .gallery-title .right{position: absolute; top: 35px; right: 45px; left: 45px; text-align: right; opacity: 0; transition: all .3s; -webkit-transition: all .3s; transform: translateX(100%); -webkit-transform: translateX(100%);} .gallery-cgrid-item.style-2:hover .gallery-title{opacity: 1; transition: all .3s; -webkit-transition: all .3s;} .gallery-cgrid-item.style-2:hover .gallery-title .left, .gallery-grid-item.style-2:hover .gallery-title .right{opacity: 1; transform: translateX(0%); -webkit-transform: translateX(0%); transition: all .3s .15s; -webkit-transition: all .3s .15s;} /* Tablets (>=768px)*/ @media (max-width: 991px) { .cgrid-item.w25{width: 50%;} } /*Phones (<768px)*/ @media (max-width: 767px) { .cgrid{margin: 0;} .gallery-cgrid-item .gallery-title{display: none;} .gallery-cgrid-item.style-1:hover img{transform: none; -webkit-transform: none;} } /*Phones (<768px)*/ @media (max-width: 450px) { .cgrid-item.w25{width: 100%;} .cgrid-item.w50{width: 100%;} .gallery-cgrid-item:after{display: none;} .gallery-cgrid-item{margin-bottom: 15px;} } /*masonry popup*/ .popup-content .slider-wrapper{background: transparent;} .gallery-big-preview-entry{padding-bottom: 61%; background-size: cover; background-position: center center;} .gallery-small-preview-entry img{display: block; width: 100%; height: auto; opacity: .2; transition: all .3s; -webkit-transition: all .3s;} .swiper-slide-active .gallery-small-preview-entry img{opacity: .5;} @media (min-width: 1200px) { .gallery-popup-slider-wrapper .swiper-button-prev{left: -100px;} .gallery-popup-slider-wrapper .swiper-button-next{right: -100px;} } .gallery-popup-description{padding: 40px 50px;} /*Phones (<768px)*/ @media (max-width: 767px) { .gallery-popup-description{padding: 30px 15px;} } .row.nopadding .swiper-container{padding-top: 1px; margin-top: -1px;} .row.nopadding .cgrid-products-4-items{margin-left: -1px; margin-top: -1px; clear: both;} .row.nopadding .cgrid-products-2-items{margin-left: -1px; margin-top: -1px; clear: both;} .product-shortcode{display: block; margin-left: auto; margin-right: auto; position: relative;} .product-shortcode .animate-to-green, .product-shortcode .animate-to-fulltransparent{transition: all .3s; -webkit-transition: all .3s;} .animate-to-green *{transition: none; -webkit-transition: none!important;} .product-shortcode:hover .animate-to-green{color: #b8cd06;} .product-shortcode:hover .animate-to-fulltransparent{color: rgba(255,255,255,.5);} .swiper-slide .product-shortcode:not(:first-child){margin-top: -1px;} .swiper-slide:not(:first-child) .product-shortcode{border-left: none!important;} .row.nopadding .product-shortcode{margin-left: -1px; margin-top: -1px;} .product-shortcode .product-label{position: absolute; left: 30px; top: 30px; z-index: 3;} .product-shortcode.style-7 .product-label{left: 10px; top: 0;} .product-label{-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.1); box-shadow: 1px 1px 2px rgba(0,0,0,.1); color: #fff; line-height: 24px; font-size: 10px; font-weight: 700; border-radius: 12px; -webkit-border-radius: 12px; padding: 0 10px; text-transform: uppercase;} .product-label.green{background: #b8cd06;} .product-label.red{background: #d80505;} .small-items-line{overflow: hidden;} .small-items-line>.row{margin-bottom: -31px;} .small-items-line>.row>*[class*="col"]{margin-bottom: 60px;} .small-items-line>.row>*[class*="col"]:after{position: absolute; left: 0; bottom: -30px; right: 0; height: 1px; background: #eee; content: "";} .slider-wrapper.hidden-pixel-y:before, .slider-wrapper.hidden-pixel-y:after{position: absolute; left: 0; top: 0; width: 1px; background: #fff; height: 100%; content: ""; z-index: 2;} .slider-wrapper.hidden-pixel-y:after{left: auto; right: 0;} .slider-wrapper.hidden-pixel-x .product-shortcode{border-top: none; border-bottom: none;} .slider-wrapper.side-borders:before{position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: #f7f7f7; border-right: 1px #fff solid; content: ""; z-index: 2;} .slider-wrapper.side-borders:after{position: absolute; right: 0; top: 0; width: 2px; height: 100%; background: #f7f7f7; border-left: 1px #fff solid; content: ""; z-index: 2;} .product-shortcode.noframe{border: none!important;} /*Phones (<768px)*/ @media (max-width: 767px) { .row.nopadding .product-shortcode{margin-left: 0;} } /*shortcode 1*/ .product-shortcode.style-1{border: 1px #f7f7f7 solid; padding: 25px 30px 5px 30px; background: #fff; overflow: hidden;} .product-shortcode.style-1 .title{height: 60px; margin-bottom: 10px;} .product-shortcode.style-1 .description{height: 60px; overflow: hidden; position: relative;} .product-shortcode.style-1 .description .text{transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-1 .description .icons{position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 0; opacity: 0; transform: translateY(100%); -webkit-transform: translateY(100%); transition: all .3s; -webkit-transition: all .3s;} .product-shortcode .icons .entry{width: 30px; height: 30px; border: 1px #eee solid; border-radius: 50%; -webkit-border-radius: 50%; display: inline-block; vertical-align: bottom; text-align: center; line-height: 28px; color: #979797; transition: all .15s; -webkit-transition: all .15s; font-size: 16px; margin: 0 5px 5px 0;} .product-shortcode .icons .entry:hover{background: #b8cd06; border-color: #b8cd06; color: #fff; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.1); box-shadow: 1px 1px 2px rgba(0,0,0,.1);} .product-shortcode .icons .entry .fa{display: block; line-height: inherit;} .product-shortcode.style-1 .price{height: 36px; overflow: hidden; position: relative;} .product-shortcode.style-1 .price .simple-article{line-height: 18px;} .product-shortcode.style-1 .preview{position: relative; margin-bottom: 30px;} .product-shortcode.style-1 .preview img{max-width: 100%; height: auto; display: block; margin: 0 auto;} .product-shortcode.style-1 .preview-buttons, .product-shortcode.style-7 .preview-buttons{position: absolute; left: 50%; margin-left: -100px; top: 0; width: 200px; height: 100%; text-align: center; transition: all .3s; -webkit-transition: all .3s; background: rgba(255,255,255,.9); opacity: 0;} .product-shortcode.style-1 .preview-buttons .button, .product-shortcode.style-7 .preview-buttons .button{min-width: 135px; margin-bottom: 10px; transition: opacity .3s, left 0s .3s; transform: translateY(-30px); -webkit-transform: translateY(-30px); transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-1 .preview-buttons .button:nth-child(2), .product-shortcode.style-7 .preview-buttons .button:nth-child(2){transform: translateY(30px); -webkit-transform: translateY(30px);} .color-selection{font-size: 0;} .color-selection .entry{cursor: pointer; display: inline-block; width: 12px; height: 12px; vertical-align: bottom; margin: 0 3px 3px 0; position: relative; background: currentColor;} .color-selection .entry:before{position: absolute; left: -2px; top: -2px; right: -2px; bottom: -2px; border: 1px currentColor solid; content: ""; opacity:0;} .color-selection .entry.active:before{opacity: 1;} .color-selection:after{content: ""; display: block; margin-top: -3px;} .product-shortcode.style-1 .price .color-selection{position: absolute; right: 0; top: 3px;} .product-shortcode.style-1 .color-selection+*{margin-right: 80px;} .color-selection.size-1 .entry{width: 16px; height: 16px; margin: 0 10px 10px 0;} .color-selection.size-1 .entry:before{left: -3px; top: -3px; right: -3px; bottom: -3px;} .color-selection.size-1:after{margin-top: -10px;} /**/ .product-shortcode.style-1.big{padding: 60px 50px 30px 50px; border-color: #f7f7f7;} .product-shortcode.style-1.big .preview{margin-bottom: 60px;} .product-shortcode.style-1.big .title{margin-bottom: 0;} /**/ @media (min-width: 768px) { .products-wrapper .product-shortcode.style-1{border-bottom: none; border-top: none; margin-bottom: 60px; padding-top: 0; padding-bottom: 0;} .products-content{overflow: hidden; margin-bottom: 10px;} .products-wrapper{margin: 0 -3px;} .products-content.view-inline{margin-bottom: 70px;} .products-content.view-inline .row > *[class*="col"]{width: 100%;} .products-content.view-inline .product-shortcode.style-1{padding: 25px 0 30px 269px; margin-bottom: 0; border-bottom: 1px #eee solid; min-height: 201px; margin-top: 0;} .products-content.view-inline .product-shortcode.style-1 .preview{position: absolute; left: 0; top: 0;} .products-content.view-inline .product-shortcode.style-1 .title{height: auto;} .products-content.view-inline .product-shortcode.style-1 .price{height: auto; margin-bottom: 15px;} .products-content.view-inline .product-shortcode.style-1 .description{height: auto;} .products-content.view-inline .product-shortcode.style-1 .description .text{opacity: 1; margin-bottom: 10px; transition: none; -webkit-transition: none;} .products-content.view-inline .product-shortcode.style-1 .description .icons{opacity: 1; transform: none; -webkit-transform: none; position: relative; transition: none; -webkit-transition: none;} } /*Phones (<768px)*/ @media (max-width: 767px) { .product-shortcode.style-1.big{padding: 25px 30px 5px 30px;} .product-shortcode.style-1.big .preview{margin-bottom: 30px;} } /**/ .product-shortcode.style-1.small{border-color: #eee;} .product-shortcode.style-1.small .title{margin-bottom: 30px; height: 41px;} .product-shortcode.style-1.small .preview{margin-bottom: 30px;} /*hover*/ .product-shortcode.style-1:hover .preview-buttons, .product-shortcode.style-7:hover .preview-buttons{opacity: 1;} .product-shortcode.style-1:hover .preview-buttons .button, .product-shortcode.style-7:hover .preview-buttons .button{transform: translateY(0px); -webkit-transform: translateY(0px);} .product-shortcode.style-1:hover .description .icons{transform: translateY(0px); -webkit-transform: translateY(0px); opacity: 1;} .product-shortcode.style-1:hover .description .text, .product-shortcode.style-7:hover .description .text{opacity: 0;} /*shortcode 2*/ .product-shortcode.style-2{border: 1px #f7f7f7 solid; background: #fff; overflow: hidden; text-align: center; transition: all .3s; -webkit-transition: all .3s; padding-bottom: 100%; padding: 5px 15px 10px 15px;} .product-shortcode.style-2 span{display: block;} .product-shortcode.style-2 .preview{height: 145px; margin-bottom: 5px;} .product-shortcode.style-2 .preview img{display: inline-block; vertical-align: bottom; max-width: 100%; max-height: 100%;} .product-shortcode.style-2 .description{height: 50px; overflow: hidden;} /*hover*/ .product-shortcode.style-2:hover{background: #343434;} /*shortcode 3*/ .product-shortcode.style-3{border: 1px #f7f7f7 solid; padding: 40px 50px 50px 50px; text-align: center; background: #fff; overflow: hidden;} .product-shortcode.style-3 .swiper-container{margin-left: -50px; margin-right: -50px;} .product-shortcode.style-3 .swiper-container img{display: inline-block; max-width: 100%; height: auto; vertical-align: bottom;} .product-shortcode.style-3 .products-line .line{height: 5px; background: #f7f7f7; position: relative; border-radius: 3px; -webkit-border-radius: 3px;} .product-shortcode.style-3 .products-line .line .fill{position: absolute; left: 0; top: 0; height: 100%; background: #b8cd06; border-radius: inherit; -webkit-border-radius: inherit;} .product-shortcode.style-3 .description{height: 40px; overflow: hidden;} .product-shortcode.style-3 .preview-buttons{position: absolute; left: 15px; right: 15px; bottom: 65px; padding-top: 15px;} .product-shortcode.style-3 .countdown{max-width: 350px; margin: 0 auto;} .product-shortcode.style-3.big{padding-top: 0; border: 1px #f7f7f7 solid;} .cgrid-products-4-items{background: #fff;} .cgrid-products-4-items .swiper-pagination{background: #fff; margin-top: 0!important; padding-bottom: 41px; padding-top: 11px; border-bottom: 1px #f7f7f7 solid; bottom: 0!important;} .cgrid-products-4-items .product-shortcode{border-bottom: none!important;} /*hover*/ @media (min-width: 992px) { .product-shortcode.style-3 .preview-buttons .button{opacity: 0; transform: translateX(-30px); -webkit-transform: translateX(-30px); transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-3 .preview-buttons .button:nth-child(2){transform: translateX(30px); -webkit-transform: translateX(30px);} .product-shortcode.style-3 .countdown-wrapper{opacity: 1; transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-3 .swiper-button-prev{transform: translateX(-100%); -webkit-transform: translateX(-100%);} .product-shortcode.style-3 .swiper-button-next{transform: translateX(100%); -webkit-transform: translateX(100%);} .product-shortcode.style-3:hover .preview-buttons .button{opacity: 1; transform: translateX(0); -webkit-transform: translateX(0);} .product-shortcode.style-3:hover .countdown-wrapper{opacity: 0;} .product-shortcode.style-3:hover .swiper-button-prev, .product-shortcode.style-3:hover .swiper-button-next{transform: translateX(0%); -webkit-transform: translateX(0%);} } /* Tablets (>=768px)*/ @media (max-width: 991px) { .product-shortcode.style-3{padding: 15px;} .product-shortcode.style-3 .swiper-container{margin-left: -15px; margin-right: -15px;} .product-shortcode.style-3 .swiper-button-prev, .product-shortcode.style-3 .swiper-button-next{transform: translateX(0%); -webkit-transform: translateX(0%);} .product-shortcode.style-3 .preview-buttons{position: relative; left: auto; right: auto; bottom: auto;} } /*shortcode 4*/ .product-shortcode.style-4 .preview{float: left; width: 85px; position: relative;} .product-shortcode.style-4 .preview:after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px #b8cd06 solid; content: ""; transition: all .3s; -webkit-transition: all .3s; opacity: 0;} .product-shortcode.style-4 .preview:hover:after{opacity: 1;} .product-shortcode.style-4 .preview img{display: block; max-width: 100%; height: auto;} .product-shortcode.style-4 .description{margin-left: 105px; padding-top: 10px; padding-bottom: 10px;} .product-shortcode.style-4.rounded{border: none;} .product-shortcode.style-4.rounded .preview:after{display: none;} .product-shortcode.style-4.rounded .preview img{border-radius: 5px; -webkit-border-radius: 5px; border: 1px #eee solid; transition: all .15s; -webkit-transition: all .15s;} .product-shortcode.style-4.rounded .preview:hover img{border-color: #b8cd06;} .product-shortcode.style-4.light{background: #fff; border-bottom: 1px #f7f7f7 solid; padding: 10px;} .product-shortcode.style-4.light .preview{width: 90px;} /*shortcode 5*/ .product-shortcode.style-5{text-align: center; padding: 60px 30px 30px 30px; background: #fff; border-left: 1px #eee solid; border-right: 1px #eee solid;} .product-shortcode.style-5 .content{max-width: 305px; margin: 0 auto;} .product-shortcode.style-5 .swiper-container{margin-left: -30px; margin-right: -30px;} .product-shortcode.style-5 .title{margin-bottom: 10px; text-transform: uppercase; transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-5 .preview{position: relative; margin-bottom: 50px;} .product-shortcode.style-5 .preview img{max-width: 100%; height: auto; display: block; margin: 0 auto;} .product-shortcode.style-5 .description{height: 60px; overflow: hidden; transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-5 .price{transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-5 .shortcode-rate-wrapper{text-align: center; margin-bottom: 5px; transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-5:hover .shortcode-rate-wrapper{opacity: 0;} .product-shortcode.style-5 .preview-buttons{position: absolute; left: 0; right: 0; bottom: 0; padding-top: 15px;} .product-shortcode.style-5 .preview-buttons .button{opacity: 0; transform: translateX(-30px); -webkit-transform: translateX(-30px); transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-5 .preview-buttons .button:nth-child(2){transform: translateX(30px); -webkit-transform: translateX(30px);} .product-shortcode.style-5 .swiper-button-prev{transform: translateX(-100%); -webkit-transform: translateX(-100%);} .product-shortcode.style-5 .swiper-button-next{transform: translateX(100%); -webkit-transform: translateX(100%);} .product-shortcode.style-5:hover .preview-buttons .button{opacity: 1; transform: translateX(0); -webkit-transform: translateX(0);} .product-shortcode.style-5:hover .swiper-button-prev, .product-shortcode.style-5:hover .swiper-button-next{transform: translateX(0%); -webkit-transform: translateX(0%);} .product-shortcode.style-5 .content-animate{transition: all .3s; -webkit-transition: all .3s; position: relative;} .product-shortcode.style-5:hover .content-animate{transform: translateY(-50px); -webkit-transform: translateY(-50px);} .product-shortcode.style-5 .icons{position: absolute; left: 0; right: 0; text-align: center; top: 10px; opacity: 0; transition: all .3s; -webkit-transition: all .3s; z-index: 3;} .product-shortcode.style-5:hover .icons{top: 0; opacity: 1;} /**/ .product-shortcode.style-5.small{padding-top: 50px; padding-bottom: 25px; border: 1px #eee solid;} .product-shortcode.style-5.small .product-label{left: 20px; top: 20px;} .product-shortcode.style-5.small .preview{margin-bottom: 30px;} .product-shortcode.style-5.small:hover .description{opacity: 0;} .product-shortcode.style-5.small:hover .price{opacity: 0;} .product-shortcode.style-5.small:hover .title{transform: translateY(-15px); -webkit-transform: translateY(-15px);} .product-shortcode.style-5.small .preview-buttons .button{float: left; width: 50%; border-radius: 0; -webkit-border-radius: 0; margin: 0;} .product-shortcode.style-5.small .preview-buttons .button:before{display: none;} .product-shortcode.style-5.small .preview-buttons .button .text{padding-left: 0; padding-right: 0;} .product-shortcode.style-5.small .icons{top: auto; bottom: 50px;} .product-shortcode.style-5.small:hover .icons{bottom: 80px; opacity: 1;} /*shortcode 6*/ .product-shortcode.style-6{text-align: center; padding: 50px 30px; background: #fff; border: 1px #eee solid; overflow: hidden;} .product-shortcode.style-6 .content{max-width: 315px; margin: 0 auto;} .product-shortcode.style-6 .title{text-transform: uppercase; margin-bottom: 10px; position: relative; z-index: 1;} .product-shortcode.style-6 .description{margin-bottom: 20px; height: 60px; overflow: hidden; position: relative; z-index: 1;} .product-shortcode.style-6 .preview{margin-bottom: 40px;} .product-shortcode.style-6 .preview img {max-width: 100%; height: auto; display: block; margin: 0 auto;} .product-shortcode.style-6 .price{text-transform: uppercase; position: relative; z-index: 1;} .product-shortcode.style-6:after{background: rgba(0,0,0,.8); position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; transition: all .3s; -webkit-transition: all .3s; opacity: 0;} .product-shortcode.style-6:hover:after{opacity: 1;} .product-shortcode.style-6 .preview-button{position: absolute; left: 30px; right: 30px; text-align: center; top: 50%; margin-top: 15px; z-index: 1; opacity: 0; transform: scale(.7); -webkit-transform: scale(.7); transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-6:hover .preview-button{opacity: 1; transform: scale(1); -webkit-transform: scale(1);} /*shortcode 7*/ .product-shortcode.style-7{text-align: center; padding: 20px 15px 0 15px; background: #fff; border-left: 1px #eee solid; border-right: 1px #eee solid; overflow: hidden;} .product-shortcode.style-7 .title{text-transform: uppercase; margin-bottom: 10px; transition: all .3s; -webkit-transition: all .3s; } .product-shortcode.style-7 .title > *{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .product-shortcode.style-7:hover .title{transform: translateY(-20px); -webkit-transform: translateY(-20px);} .product-shortcode.style-7 .preview{margin-bottom: 15px; position: relative;} .product-shortcode.style-7 .preview img {max-width: 100%; height: auto; display: block; margin: 0 auto;} .product-shortcode.style-7 .price{transition: all .3s; -webkit-transition: all .3s; opacity: 1;} .product-shortcode.style-7:hover .price{opacity: 0;} .product-shortcode.style-7 .icons{position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-7:hover .icons{opacity: 1;} /*shortcode 8*/ .product-shortcode.style-8{text-align: center;} .product-shortcode.style-8 .content{max-width: 200px; margin: 0 auto;} .product-shortcode.style-8 .preview{margin-bottom: 20px; position: relative; display: block;} .product-shortcode.style-8 .preview img{display: block; max-width: 100%; height: auto; margin: 0 auto; transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-8 .preview img:nth-child(2){position: absolute; max-width: 100%; max-height: 100%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) scale(1.2); -webkit-transform: translateX(-50%) translateY(-50%) scale(1.2); opacity: 0;} .product-shortcode.style-8:hover .preview img:nth-child(1){opacity: 0; transform: scale(.7); -webkit-transform: scale(.7);} .product-shortcode.style-8:hover .preview img:nth-child(2){opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1); -webkit-transform: translateX(-50%) translateY(-50%) scale(1);} .product-shortcode.style-8 .title{margin-bottom: 5px;} .product-shortcode.style-8 .description{margin-bottom: 15px;} .product-shortcode.style-8 .price{margin-bottom: 20px;} /*shortcode 9*/ .product-shortcode.style-9{text-align: center; border: 1px #eee solid;} .product-shortcode.style-9 .preview{border-bottom: 1px #eee solid;} .product-shortcode.style-9 .preview img{display: block; max-width: 100%; margin: 0 auto; height: auto; -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-9:hover .preview img{-webkit-filter: grayscale(0%); filter: grayscale(0%);} .product-shortcode.style-9 .title{margin-bottom: 10px; max-width: 250px; margin-left: auto; margin-right: auto; padding: 0 15px; transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-9 .description{max-width: 250px; margin-left: auto; margin-right: auto; padding: 0 15px; transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-9 .content{position: relative; margin: 0 -1px -1px -1px; background: #fff; padding-top: 25px; min-height: 116px;} .product-shortcode.style-9 .follow{position: absolute; left: 0; right: 0; top: 25%; transition: all .3s; -webkit-transition: all .3s; opacity: 0;} .product-shortcode.style-9:hover .follow{top: 50%; opacity: 1;} .product-shortcode.style-9:hover .title, .product-shortcode.style-9:hover .description{opacity: 0; transform: scale(.7); -webkit-transform: scale(.7);} /*shortcode 10*/ .product-shortcode.style-10{text-align: left; padding: 60px 30px 30px 30px; background: #fff; border-left: 1px #eee solid; border-right: 1px #eee solid;} .product-shortcode.style-10 .content{max-width: 305px; margin: 0 auto;} .product-shortcode.style-10 .swiper-container{margin-left: -30px; margin-right: -30px;} .product-shortcode.style-10 .title{margin-bottom: 10px; text-transform: uppercase; transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-10 .preview{position: relative; margin-bottom: 50px;} .product-shortcode.style-10 .preview img{max-width: 100%; height: auto; display: block; margin: 0 auto;} .product-shortcode.style-10 .description{height: 90px; overflow: hidden; transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-10 .price{transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-10 .shortcode-rate-wrapper{text-align: center; margin-bottom: 5px; transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-10 .preview-buttons{position: absolute; left: 0; right: 0; bottom: 0; padding-top: 15px;} .product-shortcode.style-10 .preview-buttons .button{opacity: 0; transform: translateX(-30px); -webkit-transform: translateX(-30px); transition: all .3s; -webkit-transition: all .3s;} .product-shortcode.style-10 .preview-buttons .button:nth-child(2){transform: translateX(30px); -webkit-transform: translateX(30px);} .product-shortcode.style-10 .swiper-textdesc{position: absolute; bottom: 0; text-align: center; width: 100%; color: #fff; padding: 5px; background-color: rgba(0,0,0,.5);} .product-shortcode.style-10 .swiper-button-prev{background-color: rgba(255,255,255,.25); transform: translateX(-100%); -webkit-transform: translateX(-100%);} .product-shortcode.style-10 .swiper-button-next{background-color: rgba(255,255,255,.25); transform: translateX(100%); -webkit-transform: translateX(100%);} .product-shortcode.style-10:hover .swiper-button-prev, .product-shortcode.style-10:hover .swiper-button-next{transform: translateX(0%); -webkit-transform: translateX(0%);} .product-shortcode.style-10 .content-animate{transition: all .3s; -webkit-transition: all .3s; position: relative;} .product-shortcode.style-10 .icons{position: absolute; left: 0; right: 0; text-align: center; top: 10px; opacity: 0; transition: all .3s; -webkit-transition: all .3s; z-index: 3;} /**/ .product-shortcode.style-10.small{padding-top: 50px; padding-bottom: 25px; border: 1px #eee solid;} .product-shortcode.style-10.small .product-label{left: 0px; top: 20px; font-size: 13px; font-weight: 300; border-radius: 0; -webkit-border-radius: 0;} .product-shortcode.style-10.small .preview{margin-bottom: 30px;} .product-shortcode.style-10.small .preview-buttons .button{float: left; width: 50%; border-radius: 0; -webkit-border-radius: 0; margin: 0;} .product-shortcode.style-10.small .preview-buttons .button:before{display: none;} .product-shortcode.style-10.small .preview-buttons .button .text{padding-left: 0; padding-right: 0;} .product-shortcode.style-10.small .icons{top: auto; bottom: 50px;} /*shortcode 1 float content*/ @media (min-width: 992px) { .product-shortcode.style-1.float{min-height: 428px; padding-left: 260px; padding-top: 140px;} .product-shortcode.style-1.float .preview{position: absolute; left: 30px; top: 50%; margin-top: -100px;} .product-shortcode.style-1.float .title{height: auto;} } .banner-shortcode.text-center .valign-middle-content{margin: 0 auto;} /*shortcode 1*/ .banner-shortcode.style-1{padding-bottom: 40%; position: relative; overflow: hidden;} .banner-shortcode.style-1 .background{background-position: left center; background-size: cover; position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .banner-shortcode.style-1 .banner-title{font-size: 30px; line-height: 32px; margin-bottom: 10px; text-transform: uppercase;} @media (min-width: 768px) { .banner-shortcode.style-1 .description{position: absolute; height: 100%; width: 35%; text-align: center; right: 15px; background: none!important;} } /*Phones (<768px)*/ @media (max-width: 767px) { .banner-shortcode.style-1{padding-bottom: 0;} .banner-shortcode.style-1 .background{position: relative; padding-bottom: 40%;} .banner-shortcode.style-1 .description{padding: 20px 15px; background: #2c2c2c; text-align: center; border-top: 1px #555 solid; display: block;} } /*shortcode 2*/ .banner-shortcode.style-2{position: relative; overflow: hidden; text-align: center; max-width: 270px;} .banner-shortcode.style-2 .content{padding-bottom: 155%;} .banner-shortcode.style-2 .background{background-position: center bottom; background-size: cover; position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .banner-shortcode.style-2 .banner-title{font-size: 20px; line-height: 32px; text-transform: uppercase;} .banner-shortcode.style-2 .description{position: absolute; left: 15px; right: 15px; top: 15px; height: 30%;} /*shortcode 3*/ .banner-shortcode.style-3{background-size: cover; background-position: right top; position: relative;} .banner-shortcode.style-3 .angle-left{width: 0; height: 0; border-style: solid; border-width: 15px 15px 15px 0; border-color: transparent #fff transparent transparent; position: absolute; right: 0; top: 50%; margin-top: -7px;} .banner-shortcode.style-3 .angle-right{width: 0; height: 0; border-style: solid; border-width: 15px 0 15px 15px; border-color: transparent transparent transparent #fff; position: absolute; left: 0; top: 50%; margin-top: -7px;} .banner-shortcode.style-3 .valign-middle-cell{height: 480px; padding: 30px 40px; display: table-cell; width: 10000px; vertical-align: middle;} .banner-shortcode.style-3 .valign-middle-content{max-width: 390px;} .banner-shortcode.style-3 .slider-product-preview+.valign-middle-content{max-width: 50%;} /*Desktops (>=1200px)*/ @media (min-width: 1200px) { .banner-shortcode.style-3.wide .valign-middle{padding-left: 100px; padding-right: 100px;} } /*Phones (<768px)*/ @media (max-width: 767px) { .banner-shortcode.style-3 .valign-middle-cell{height: 0; padding-left: 30px; padding-right: 30px;} .banner-shortcode.style-3 .slider-product-preview+.valign-middle-content{max-width: 100%;} } /*shortcode 4*/ .banner-shortcode.style-4{background-size: cover; background-position: center top; position: relative;} .banner-shortcode.style-4 .valign-middle-cell{height: 650px; padding: 30px 15px; display: table-cell; vertical-align: middle; width: 10000px;} .banner-shortcode.style-4 .valign-middle-content{max-width: 390px; margin: 0 auto;} /* Tablets (>=768px)*/ @media (max-width: 991px) { .banner-shortcode.style-4 .valign-middle-cell{height: 0;} } /*shortcode 5*/ .banner-shortcode.style-5{background-size: cover; background-position: center top; position: relative;} .banner-shortcode.style-5 .valign-middle{min-height: 225px; padding: 30px 50px;} .banner-shortcode.style-5 .valign-middle-content{max-width: 260px;} /*shortcode 6*/ .banner-shortcode.style-6{padding: 50px 30px 50px 15px; background: #fff;} .banner-shortcode.style-6:after{display: block; content: ""; clear: both;} .banner-shortcode.style-6 .image{float: left; max-width: 250px; width: 100%; height: auto;} .banner-shortcode.style-6 .content{margin-left: 270px;} .banner-shortcode.style-6 .cell-view{height: 250px;} /*Desktops (>=1200px)*/ @media (max-width: 1199px) { .banner-shortcode.style-6 .image{max-width: 190px;} .banner-shortcode.style-6 .content{margin-left: 210px;} } /*Phones (<768px)*/ @media (max-width: 767px) { .banner-shortcode.style-6{padding: 30px 15px;} .banner-shortcode.style-6 .image{float: none; margin: 0 auto 30px auto; display: block;} .banner-shortcode.style-6 .content{margin-left: 0;} .banner-shortcode.style-6 .cell-view{height: 0;} } .hide { display: none !important; } .header-style-1:after { background-color: #9d9d9d; position: relative; content: ''; width: 60px; height: 1px; margin: 20px auto 10px; display: block; } table.simplebordered { border-collapse: collapse; } table.simplebordered.white, table.simplebordered.white th, table.simplebordered.white td { border: 1px solid #ffffff; padding: 3px 8px; font-family: Open Sans, Verdana, "Microsoft JhengHei UI", "Microsoft JhengHei", "LiHei Pro", "新細明體", sans-serif !important; font-size: 14px; } .partner_list { } .partner_list > .grid { margin-bottom: 10px; } .partner_list > .grid_4 { width: 33.33%; } .partner_list > .grid_4:nth-of-type(3n) + * { clear: both; } .partner_list > .grid_4 h2 { font-size: 24px; } @media only screen and (max-width: 959px) and (min-width: 768px){ .partner_list > .grid_4 { width: 50%; } .partner_list > .grid_4 h2 { font-size: 21px; } .partner_list > .grid_4:nth-of-type(3n) + * { clear: initial; } .partner_list > .grid_4:nth-of-type(2n) + * { clear: both; } } @media only screen and (max-width: 767px) and (min-width: 320px){ .partner_list > .grid_4 { width: 100%; } } .pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}.pagination>li{display:inline}.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;line-height:1.42857143;text-decoration:none;color:#428bca;background-color:#fff;border:1px solid #ddd;margin-left:-1px}.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-bottom-left-radius:4px;border-top-left-radius:4px}.pagination>li:last-child>a,.pagination>li:last-child>span{border-bottom-right-radius:4px;border-top-right-radius:4px}.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus{color:#2a6496;background-color:#eee;border-color:#ddd}.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus{z-index:2;color:#fff;background-color:#428bca;border-color:#428bca;cursor:default}.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus{color:#999;background-color:#fff;border-color:#ddd;cursor:not-allowed}.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-bottom-left-radius:6px;border-top-left-radius:6px}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-bottom-right-radius:6px;border-top-right-radius:6px}.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px}.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-bottom-left-radius:3px;border-top-left-radius:3px}.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-bottom-right-radius:3px;border-top-right-radius:3px} .pagination { margin: 0; border-radius: 0; font-size: 0; } .pagination > li { display: inline-block; margin-left: 1px; font-size: 12px; } .pagination > li:first-child { margin-left: 0; } .pagination > li > a, .pagination > li > span { float: none; margin-left: 0; border: 0; display: block; color: #333; font-weight: 600; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .pagination > li:first-child > a, .pagination > li:first-child > span, .pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span, .pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span, .pagination > li:last-child > a, .pagination > li:last-child > span, .pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span, .pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span { border-radius: 2px; } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { background-color: #ceb28d; color: #fff; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { background-color: #444444; cursor: default; } .bc_btn_map1_return { background-color: #d9dada; color: #808080; } .bc_btn_map1_return:hover { background-color: #a6a6a6; color: #ffffff; } .bc_btn_map1 { background-color: #06aeb2; } .bc_btn_map1:hover { background-color: #007580; } .bc_icon_map1 svg { width: 30px; height: auto; fill: #06aeb2; } .bc_icon_map1 svg:hover { fill: #007580; } .bc_label_map1 { border: 1px solid #06aeb2; background-color: #ffffff; color: #06aeb2; } .bc_btn_map2_return { background-color: #d9dada; color: #808080; } .bc_btn_map2_return:hover { background-color: #a6a6a6; color: #ffffff; } .bc_btn_map2 { background-color: #e9af62; } .bc_btn_map2:hover { background-color: #df935a; } .bc_icon_map2 svg { width: 30px; height: auto; fill: #e9af62; } .bc_icon_map2 svg:hover { fill: #df935a; } .bc_label_map2 { border: 1px solid #e9af62; background-color: #ffffff; color: #e9af62; } .bc_btn_map3_return { background-color: #d9dada; color: #808080; } .bc_btn_map3_return:hover { background-color: #a6a6a6; color: #ffffff; } .bc_btn_map3 { background-color: #b5d45f; } .bc_btn_map3:hover { background-color: #96b04f; } .bc_icon_map3 svg { width: 30px; height: auto; fill: #b5d45f; } .bc_icon_map3 svg:hover { fill: #96b04f; } .bc_label_map3 { border: 1px solid #b5d45f; background-color: #ffffff; color: #b5d45f; } .bc_btn_map4_return { background-color: #d9dada; color: #808080; } .bc_btn_map4_return:hover { background-color: #a6a6a6; color: #ffffff; } .bc_btn_map4 { background-color: #1fa4be; } .bc_btn_map4:hover { background-color: #1a8ba1; } .bc_icon_map4 svg { width: 30px; height: auto; fill: #1fa4be; } .bc_icon_map4 svg:hover { fill: #1a8ba1; } .bc_label_map4 { border: 1px solid #1fa4be; background-color: #ffffff; color: #1fa4be; } .bc_bg_no1 { background-color: #eb942b; } .bc_bg_no1:hover { background-color: #d38527; } .bc_bg_no2 { background-color: #9966ff; } .bc_bg_no2:hover { background-color: #8c5eea; } /* 無障礙：視覺隱藏、報讀軟體可讀的文字 */ .a11y-sr { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } /* 無障礙：以 button 取代連結式按鈕時，還原與連結相同的外觀 */ .a11y-btn-plain { border:0; font-size:inherit; line-height:normal; cursor:pointer; } /* 無障礙：鍵盤操作 */ /* 下拉子選單原本只有滑鼠移入才展開，鍵盤聚焦到該選單項目時也展開 */ .bc_navigation_5 > ul li:focus-within > ul.bc_sub_menu { display: block; } /* 手機側邊選單收合時（移到畫面外）不進入 Tab 順序；a11y.js 於開啟／關閉時切換 */ .bc_navigation_5_sidebar_content.a11y-closed { visibility: hidden; transition: all 0.8s ease, visibility 0s linear 0.8s; } /* 開啟時立刻可見（才能把焦點移到關閉鈕）；收合時等滑出動畫結束才隱藏 */ .bc_navigation_5_sidebar_content:not(.a11y-closed) { transition: all 0.8s ease, visibility 0s; } /* 只有圖示的按鈕：去掉 button 的預設外觀 */ .a11y-icon-btn { background: none; border: 0; padding: 0; margin: 0; line-height: 0; cursor: pointer; } /* 鍵盤聚焦外框（滑鼠點擊不會出現） */ a:focus-visible, button:focus-visible, select:focus-visible, [tabindex]:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible, input[type="submit"]:focus-visible, input[type="button"]:focus-visible { outline: 3px solid #ff6a00; outline-offset: 2px; } /* 連結內的圖片是絕對定位時（頁首 logo），連結本身沒有面積，外框改畫在圖片上 */ a:focus-visible > img.bc_position_absolute { outline: 3px solid #ff6a00; outline-offset: 2px; } /* 無障礙：跳到主要內容與定位點（U 上方功能區塊、C 中央內容區塊、Z 下方功能區塊）。平常移出畫面，鍵盤聚焦時才顯示 */ .a11y-skip, .a11y-acc { position: absolute; left: -10000px; top: auto; z-index: 100000; padding: 4px 10px; background: #fff; color: #000; font-size: 16px; line-height: 24px; text-decoration: none; transition: none; } .a11y-skip:focus { position: fixed; left: 10px; top: 10px; outline: 3px solid #ff6a00; } .a11y-acc { scroll-margin-top: 20px; } .a11y-acc:focus { left: 0; white-space: nowrap; outline: 3px solid #ff6a00; } /* C 放在內容區塊內（首頁：主視覺內容區塊；內頁：橫幅之後的麵包屑列），不用像素位移 */ /* 網站導覽頁 */ .a11y-sitemap h2 { margin: 30px 0 10px; } .a11y-sitemap p, .a11y-sitemap li { line-height: 28px; } .a11y-sitemap li { color: #595959; font-size: 15px; } .a11y-sitemap ul, .a11y-sitemap ol { margin: 0 0 10px 1.6em; padding: 0; } .a11y-sitemap a { text-decoration: underline; } /* 首頁站名標語外層的 h1：不帶任何樣式，外觀由內層 span 決定 */ .home_boxes h1.a11y-home-h1 { margin: 0; padding: 0; font: inherit; color: inherit; } /* 無障礙：首頁主視覺輪播的暫停／播放鈕 */ .a11y-slide-toggle { position: absolute; right: 20px; bottom: 20px; z-index: 20; padding: 6px 14px; border: 1px solid #fff; border-radius: 3px; background: rgba(0,0,0,0.55); color: #fff; font-size: 14px; line-height: 20px; cursor: pointer; } /* 無障礙：圖片輪播（flexslider）的上一張／下一張箭頭平常在畫面外且透明，鍵盤聚焦時顯示 */ .image-pgn-slider .flex-direction-nav a:focus { opacity: 1; } .image-pgn-slider .flex-direction-nav .flex-prev:focus { left: 10px; } .image-pgn-slider .flex-direction-nav .flex-next:focus { right: 10px; } /* 無障礙：圖片輪播的暫停鈕放在圖片右下角 */ .image-pgn-slider .a11y-slide-toggle { right: 10px; bottom: 10px; } /* 無障礙：首頁四個方塊連結是行內元素包著區塊內容，聚焦外框畫不出來 → 改為區塊，外框畫在內側（外層 overflow:hidden） */ .box-carousel-dragable .owl-item > a { display: block; } .box-carousel-dragable a:focus-visible { outline-offset: -3px; } /* 無障礙：資料庫內文裡的連結與文字同色，加底線讓連結可辨識。範圍是定位點 C 之後的內容區塊，只選沒有 class 的連結（樣板的按鈕、選單、分頁都有 class 或在清單內） */ #C ~ * p a:not([class]), #C ~ * span a:not([class]), #C ~ * pre a:not([class]), #C ~ * strong a:not([class]), #C ~ * .grid_12 > a:not([class]), #C ~ * p a.a_href, #C ~ * td .a11y-h4 a:not([class]) { text-decoration: underline; } /* 無障礙：文創地圖的圖釘是透明的連結，鍵盤聚焦時顯示外框（平常維持透明） */ .mapplic-element .mapplic-pin:focus-visible { opacity: 1 !important; background-color: transparent !important; border-color: transparent !important; outline: 3px solid #ff6a00; outline-offset: 2px; } /* 地圖外掛把連結與按鈕的外框關掉（.mapplic-element a:focus、button），放大／縮小／還原按鈕也補回聚焦外框 */ .mapplic-element .mapplic-button:focus-visible { outline: 3px solid #ff6a00; outline-offset: 2px; }