/*
# =======================================
# (c) 2022 Forward Thinking BV
#
# All materials in this electronic publication including scripts,
# software, text, graphics, logos and pictures are are protected by copyrights,
# brand rights and/or any other intellectual property rights.
#
#
# Developer(s): Al-Noor Ladhani
#
# =======================================
*/
.wdc_test{
font-size: 0.6em !important;
}
/* ------------------------
START FONTS
------------------------*/
/* ------------------------
END FONTS
------------------------*/
/* ------------------------
START ROOT
------------------------*/
.hideMainDiv {
opacity: 0;
}
.showMainDiv {
opacity: 1;
transition: opacity 150ms ease-in;
}
/* ------------------------
START ROOT
------------------------*/
html, body {width:100%}
body {font-family: 'Arial', sans-serif; font-style: normal; font-size: 1.0em; font-weight: 400; line-height: 1.85; color: #1d1d33; overflow-x: hidden;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom: 0.5rem; font-weight: 300; line-height: 1.5; }
h1, .h1 {
padding-top: 20px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
font-family: 'Arial';
font-size: 1.6em;
font-weight: 600;
text-align: left;
color: #3C4250;
}
.wd_h1_alternate {
padding-left: 20px !important;
font-family: 'Arial';
font-size: 1.5em;
font-weight: 400;
text-align: left;
}
h2, .h2 {
font-family: 'Arial';
font-size: 1.5em;
font-weight: 400;
color: #3C4250;
margin-top: 0.5rem;
padding-top: 20px;
}
.wd_h2_alternate_small {
padding-left: 20px !important;
font-family: 'Arial';
font-size: 1.2em;
font-weight: 400;
text-align: left;
}
h3, .h3 {
font-family: 'Arial';
font-size: 1.1em;
font-weight: 600;
color: #FF687B;
margin-top: 0.5rem;
}
h4, .h4 {
padding-top: 0px;
padding-bottom: 0px;
font-family: 'Arial';
font-weight: 600;
font-size: 1.2em;
text-align: left;
color: #FF687B;
}
h5, .h5 {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
font-family: 'Arial';
font-size: 1.0em;
font-weight: 600;
text-align: left;
color: #3C4250;
}
h5 a:hover {
background-color: #FFFF00;
text-decoration: none !important;
}
h6, .h6 {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
font-family: 'Arial';
font-weight: 600;
text-align: left;
color: #636873;
}
p {
max-width: 900px;
font-size: 0.96em;
font-weight: 500;
color: #8090b5;
line-height: 1.85;
}
a {
color: #FF687B;
text-decoration: underline;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
.h2_smaller{
font-size: 1.25em;
}
section.position-relative{
padding-bottom: 40px;
}
ul {
color: #8090B5;
font-size: 0.95em;
}
ol {
color: #8090B5;
font-size: 0.95em;
}
/** REMOVED BY AL-NOOR FOR NEW TOP MENU
li {
color: #8090B5;
font-size: 0.95em;
padding-left: 0;
padding-right: 50px;
padding-top: 5px;
padding-bottom: 5px;
}
**/
td {
font-family: 'Arial';
font-weight: 400;
font-size: 0.90em;
color: #8090b5;
}
.youtube_container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.youtube_video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.youtube_link{
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
font-family: 'Arial';
font-size: 1.0em;
font-weight: 600;
background-color: #3C4250;
color: #FFFFFF;
}
.youtube_link a{
text-decoration: underline;
}
@media print {
@page {
size: A4 portrait;
margin:1cm;
}
html, body {
width:100%;
height:auto;
margin:auto;
padding:0;
}
.pagebreak {
page-break-before: always;
}
.wdc_button_go_back_print{
visibility: hidden;
}
.wdc_button_print_details_top{
height: 20px !important;
}
}
@media screen {
#id_printer_body {
}
.wdc_button_go_back_print{
visibility: visible;
height: 100vh;
}
}
.page-wrapper {
/** overflow-x: hidden; GIVES ISSUES WITH IPHONE!!! **/
width:100%;
height:100%;
position:relative;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}
.container-fluid.full-width {
padding-left: 0;
padding-right: 0;
overflow-x: hidden;
}
/* ------------------------
ION RANGE SLIDER
------------------------*/
.irs-handle {
z-index: 1;
}
.irs--big .irs-bar {
background-color: #3C4250 !important;
border: 1px solid #3C4250 !important;
background: linear-gradient(to bottom, #FFFFFF 0%, #3C4250 30%, #CCCCCC 100%) !important;
}
.irs--big .irs-handle {
border: 1px solid rgba(0, 0, 0, 0.3);
background-color: #3C4250 !important;
background: linear-gradient(to bottom, #FF687B 0%, #FF687B 80%, #FF687B 100%) !important;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px 1px white;
}
.irs--big .irs-single {
color: white !important;
background-color: #428bca !important;
background: linear-gradient(to bottom, #3C4250 0%, #3C4250 100%) !important;
border-radius: 3px !important;
}
.irs--big .irs-grid-pol {
background-color: #3C4250 !important;
}
.irs--big .irs-grid-text {
color: #3C4250 !important;
}
/* ------------------------
CHARTIST
------------------------*/
.ct-series-a .ct-slice-pie, .ct-series-a .ct-slice-donut-solid, .ct-series-a .ct-area {
fill: #00FF00 !important;
}
.ct-series-b .ct-slice-pie, .ct-series-b .ct-slice-donut-solid, .ct-series-b .ct-area {
fill: #FFFFFF !important;
}
.ct-label {
fill: #3C4250 !important;
color: #3C4250 !important;
font-family: 'Arial';
font-weight: 400;
font-size: 1.0em !important;
line-height: 1 !important;
}
/* ------------------------
BOOTSTRAP4-TOGGLE
------------------------*/
.toggle-on.btn{
background-color: #FF687B !important;
padding-left: 2px !important;
padding-right: 10px !important;
}
/* ------------------------
WEDDING CALCULATOR
------------------------*/
.wdc_printer_body{
width: 100%;
background-color: #FFFFFF;
overflow: hidden;
}
.wedc_navbar_top{
background-color: #3C4250 !important;
border-bottom: 10px solid #FF687B;
}
.wdc_title{
background-color: #FF687B;
}
.wdc_body{
background-color: #4FDECA;
}
.wdc_li_intro {
padding-top: 0px !important;
padding-bottom: 0px !important;
color: #8090B5;
font-size: 1.0em;
}
.wdc_li_intro li{
padding-top: 0.3rem;
padding-bottom: 0.3rem;
list-style-type: hyphen;
}
.wdc_blockquote_intro {
padding-left: 20px !important;
color: #FF687B;
font-size: 1.0em;
font-weight: 600;
text-transform: uppercase;
}
.wdc_share_line{
padding-left: 20px;
color: #FF687B;
font-size: 0.80em;
font-family: 'Arial';
font-weight: 600;
vertical-align: middle;
text-align: left;
}
.wdc_share_line_word{
display: inline-block;
vertical-align: middle;
}
.wdc_calculator_header{
padding-top: 20px;
padding-bottom: 5px;
font-size: 1.0em;
font-family: 'Arial';
font-weight: 600;
text-align: center;
color: #3C4250;
}
.wedc_calculator_budget_header{
background-color: #F8DDF2;
border: 2px solid #E2D1D9;
}
.wedc_calculator_block_header{
background-color: #E1F8F5;
border: 2px solid #B4EDE5;
}
.wedc_calculator_block_part{
font-size: 1.0em;
font-family: 'Arial';
font-weight: 400;
color: #3C4250;
}
.wedc_calculator_settings_header{
font-size: 0.95em;
font-family: 'Arial';
font-weight: 600;
background-color: #E1F8F5;
border: 2px solid #B4EDE5;
}
.wedc_calculator_result{
position: fixed;
top: 5rem;
left: 0%;
right: 0%;
height: 2rem;
width: 100%;
z-index: 101 !important;
background-color: #FFFF66;
color: #3C4250;
font-family: 'Arial';
font-size: 1.1em;
font-weight: 600;
text-align: center;
}
@media (min-width: 991px) {
.wedc_navbar_top{
margin-top: 0px !important;
padding-top: 0px !important;
height: 150px !important;
}
.wedc_calculator_result{
position: fixed;
top: 5.0rem;
left: 25%;
right: 25%;
height: 2rem;
width: 50%;
z-index: 10001;
text-align: center;
background-color: #FFFF00;
}
}
.wedc_calculator_result_hide{
visibility: hidden;
}
.wedc_toggle_header_label_text{
display: inline-block;
width: 65%;
font-family: 'Arial';
font-weight: 400;
font-size: 0.65em !important;
color: #CC0000 !important;
}
.wedc_toggle_header_label_text_w100{
display: inline-block;
width: 100%;
color: #CC0000 !important;
}
.wedc_toggle_header_budget_text
{
display: inline-block;
width: 30%;
padding-top: 5px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 5px;
background-color: #FFFFFF;
border-style: none;
font-size: 0.70em;
text-align: right;
font-family: 'Arial';
font-weight: 600;
color: #3C4250 !important;
}
.wedc_toggle_header_amount_box{
text-align: right;
}
.wedc_toggle_header_amount_text{
display: inline-block;
width: 30%;
max-width: 98%;
padding-top: 5px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 5px;
background-color: #FFFFFF;
border-style: none;
font-family: 'Arial';
font-weight: 400;
font-size: 0.65em;
text-align: right;
color: #3C4250 !important;
}
.wedc_toggle_header_amount_text_active{
font-family: 'Arial';
font-weight: 400;
font-size: 0.65em;
}
.wdc_card_body_block{
}
.wedc_button_slider{
margin-top: 20px;
width: 25%;
max-width: 50px;
padding-left: 0px !important;
padding-right: 0px !important;
background-color: #FFF5F6;
color: #FF687B;
border: 1px solid #FF687B;
font-family: 'Arial';
font-weight: 400;
font-size: 0.65em;
text-align: center;
}
.wedc_button_slider:hover{
background-color: #FF687B;
color: #FFFFFF;
}
.wedc_button_slider_selected{
background-color: #FF687B;
color: #FFFFFF;
}
.wedc_toggle_slider_amount_box{
text-align: right;
}
.wedc_toggle_slider_amount_text{
margin-top: 10px;
font-family: 'Arial';
font-weight: 400;
font-size: 0.75em;
text-align: right;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.wedc_toggle_slider_amount_text_box{
max-width: 80px;
}
.wedc_toggle_alcohol_slider_amount_text_box{
max-width: 50px;
}
.wedc_toggle_cake_slider_amount_text_box{
max-width: 50px;
}
.wedc_toggle_slider_tip_text{
margin-top: 20px;
max-width: 100%;
font-size: 0.76em;
text-align: center;
}
.wdc_block_result{
background-color: #FFFF66;
}
.wdc_block_result_label{
padding-left: 20px;
font-size: 1.05em;
text-align: left;
text-align: left;
}
.wdc_block_result_value{
padding-right: 20px;
font-family: 'Arial';
font-size: 1.05em;
text-align: left;
text-align: right;
}
.wdc_block_result_perc{
margin-left: -20px;
height: 100%;
width: 100%;
display: flex;
align-items: center;
font-family: 'Arial';
font-weight: 400;
font-size: 1.4em;
text-align: left;
}
.wdc_button_collapse {
width: 100%;
border: 0;
outline: none;
border-radius: 0;
margin-top: 5px;
margin-bottom: 5px;
padding-top:5px;
padding-bottom: 5px;
padding-left: 1.5rem;
padding-right: 0px;
font-family: 'Arial';
font-weight: 600;
font-size: 1.0em;
text-align: left;
text-transform: uppercase;
background: #FF687B;
color: #FFFFFF;
display: inline-block;
transition: all 0.3s ease 0s;
cursor: pointer;
}
.wdc_button_collapse:hover {
background-color: #3C4250;
color: #FFFFFF;
}
.wdc_button_go_back {
width: 100%;
border: 0;
outline: none;
border-radius: 0;
margin-top: 5px;
margin-bottom: 5px;
padding-top:5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
font-family: 'Arial';
font-weight: 400;
font-size: 0.9em;
text-align: center;
text-transform: uppercase;
background: #3C4250;
color: #FFFFFF;
display: inline-block;
transition: all 0.3s ease 0s;
cursor: pointer;
}
.wdc_button_go_back:hover {
background-color: #FF687B;
color: #000000;
}
.wdc_button_print {
width: 100%;
border: 0;
outline: none;
border-radius: 0;
margin-top: 5px;
margin-bottom: 5px;
padding-top:5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
font-family: 'Arial';
font-weight: 400;
font-size: 0.9em;
text-align: center;
text-transform: uppercase;
background: #3C4250;
color: #FFFFFF;
display: inline-block;
transition: all 0.3s ease 0s;
cursor: pointer;
}
.wdc_button_print:hover {
background-color: #FF687B;
color: #000000;
}
.wdc_button_print_details {
width: 100%;
border: 0;
outline: none;
border-radius: 0;
margin-top: 5px;
margin-bottom: 5px;
padding-top:5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
border: 1px solid #3C4250;
font-family: 'Arial';
font-weight: 800;
font-size: 1.0em;
text-align: center;
text-transform: uppercase;
background: #FFFF66;
color: #000000;
display: inline-block;
transition: all 0.3s ease 0s;
cursor: pointer;
}
.wdc_button_print_details:hover {
background-color: #FF687B;
color: #000000;
}
.wdc_button_print_details_top{
height: 50px !important;
}
.wdc_printer_table_blocks{
width: 100%;
}
.wdc_printer_table_block_rows{
border: 1px solid black;
}
.wdc_printer_table_padding_left_20{
padding-left: 20px;
}
.wdc_printer_table_blocks_TH1{
width: 25%;
padding-left: 20px;
font-family: 'Arial';
font-weight: 400;
font-size: 1.2em;
text-align: left;
}
.wdc_printer_table_blocks_TH2{
width: 50%;
font-family: 'Arial';
font-weight: 400;
font-size: 1.2em;
text-align: center;
}
.wdc_printer_table_blocks_TH3{
width: 25%;
padding-right: 20px;
font-family: 'Arial';
font-weight: 400;
font-size: 1.2em;
text-align: right;
}
.wdc_printer_table_blocks_TH4{
width: 35%;
padding-left: 20px;
font-family: 'Arial';
font-weight: 400;
font-size: 1.0em;
text-align: left;
}
.wdc_printer_table_blocks_TH5{
width: 15%;
padding-left: 20px;
font-family: 'Arial';
font-weight: 400;
font-size: 1.0em;
text-align: left;
}
.wdc_printer_table_blocks_TH6{
width: 25%;
padding-left: 20px;
font-family: 'Arial';
font-weight: 400;
font-size: 1.0em;
text-align: left;
}
.wdc_printer_table_blocks_TH6R{
width: 50%;
padding-right: 20px;
font-family: 'Arial';
font-weight: 400;
font-size: 1.0em;
text-align: right;
}
.wdc_printer_table_blocks_TH7{
width: 25%;
padding-left: 20px;
font-family: 'Arial';
font-weight: 400;
font-size: 0.8em;
text-align: left;
}
.wdc_printer_table_blocks_TH8{
width: 75%;
padding-left: 20px;
font-family: 'Arial';
font-weight: 400;
font-size: 0.7em;
text-align: left;
}
.wdc_printer_table_blocks_TH9{
width: 25%;
padding-right: 20px;
font-family: 'Arial';
font-weight: 400;
font-size: 0.7em;
text-align: right;
}
.wdc_printer_table_blocks_total_label{
font-family: 'Arial';
font-weight: 400;
font-size: 1.1em;
text-align: right;
}
.wdc_printer_table_blocks_totalR{
padding-right: 20px;
font-family: 'Arial';
font-weight: 400;
font-size: 1.1em;
text-align: right;
}
.wdc_printer_table_blocks_total{
padding-left: 20px;
font-family: 'Arial';
font-weight: 400;
font-size: 1.1em;
text-align: left;
}
.wdc_printer_table_blocks_TD1{
width: 25%;
padding-left: 20px;
font-family: 'Arial' !important;
font-size: 1.0em;
text-align: left;
}
.wdc_printer_table_blocks_TD2{
width: 50%;
font-family: 'Arial' !important;
font-size: 1.0em;
text-align: center;
}
.wdc_printer_table_blocks_TD3{
width: 25%;
padding-right: 20px;
font-family: 'Arial' !important;
font-size: 1.0em;
text-align: right;
}
.wdc_printer_table_parts_TD1{
width: 50%;
font-family: 'Arial' !important;
font-size: 0.8em;
text-align: left;
}
.wdc_printer_table_parts_TD2{
width: 20%;
font-family: 'Arial' !important;
font-size: 0.8em;
text-align: right;
}
.wdc_printer_table_parts_TD3{
width: 30%;
font-family: 'Arial' !important;
font-size: 0.8em;
text-align: right;
}
.wdc_disclaimer_text{
width: 100%;
font-family: 'Arial';
font-weight: 400;
font-size: 0.70em;
text-align: left;
}
.wdc_row_white{
background-color: #FFFFFF;
}
.wdc_col_slider_advanced_settings{
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #CCCCCC;
}
.wdc_col_slider_advanced_settings_lock{
padding-top: 10px;
}
.wdc_row_toggle_switch_label_advanced_settings_lock{
padding-right: 30px;
}
.wdc_row_toggle_switch_col_advanced_settings_lock{
padding-top: 30px;
}
.wdc_row_toggle_switch{
margin-top: 5px;
margin-bottom: 5px;
}
.wdc_row_drinks_label{
text-align: right !important;
}
.wdc_row_drink_needed{
padding-left: 30px;
}
.wdc_col_drink_needed{
font-size: 0.9em;
border: 1px solid #CCCCCC;
}
.wdc_col_drink_needed_amount{
font-family: 'Arial';
font-weight: 800;
font-size: 1.8em;
text-align: center;
color: #CC0000;
}
.wdc_col_drink_needed_label{
font-size: 0.9em;
text-align: center;
}
.wdc_col_drink_needed_label_glasses{
font-family: 'Arial';
font-weight: 400;
font-size: 0.85em;
text-align: center;
}
.wdc_row_drink_budget{
padding-left: 30px;
}
.wdc_col_drink_budget_amount{
font-family: 'Arial';
font-weight: 800;
font-size: 1.8em;
text-align: center;
color: #CC0000;
}
.wdc_col_drink_budget_label{
font-size: 0.9em;
text-align: center;
}
.wdc_col_drink_budget_total{
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Arial';
font-weight: 800;
font-size: 1.5em;
text-align: center;
color: #CC0000;
background-color: #FFFF66;
border: 1px solid #CCCCCC;
}
.wdc_col_drink_budget_total_per_person{
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Arial';
font-weight: 400;
font-size: 1.3em;
text-align: center;
color: #CC0000;
background-color: #FFFF66;
border: 1px solid #CCCCCC;
}
.wdc_prices_radio_button_group .notActive{
padding-left: 10px;
padding-right: 10px;
color: #CC0000 !important;
background-color: #FFFFFF !important;
border: 1px solid #999999 !important;
}
.wdc_prices_radio_button_group .active{
padding-left: 10px;
padding-right: 10px;
color: #FFFFFF !important;
background-color: #FF687B !important;
border: 1px solid #999999 !important;
}
.wdc_wedding_cake_results{
background-color: #4FDECA;
}
.wdc_wedding_cake_details_tier{
font-family: 'Arial';
font-weight: 800;
font-size: 1.1em;
text-align: center;
color: #3C4250;
}
.wdc_wedding_cake_details_tier_print{
font-family: 'Arial';
font-weight: 800;
font-size: 1.5em;
text-align: center;
color: #3C4250;
}
.wdc_wedding_cake_details_servings{
font-family: 'Arial';
font-weight: 800;
font-size: 1.3em;
text-align: center;
color: #3C4250;
}
.wdc_wedding_cake_details_servings_print{
padding-top: 20px;
padding-bottom: 20px;
font-family: 'Arial';
font-weight: 800;
font-size: 1.8em;
text-align: center;
color: #3C4250;
}
.wdc_results_cake_details_table{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
font-family: 'Arial';
font-weight: 400;
font-size: 0.9em;
text-align: right;
color: #3C4250;
border: none !important;
}
.wdc_results_cake_details_table_cell{
padding-top: 5px !important;
padding-bottom: 5px !important;
color: #3C4250 !important;
border: 1px solid #999999 !important;
}
.wdc_button_cake {
width: 100%;
border: 2px solid #3C4250;
outline: none;
border-radius: 0;
margin-top: 5px;
margin-bottom: 5px;
padding-top:5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
font-family: 'Arial';
font-weight: 400;
font-size: 0.9em;
text-align: center;
text-transform: uppercase;
background: #4FDECA;
color: #3C4250;
display: inline-block;
transition: all 0.3s ease 0s;
cursor: pointer;
}
.wdc_button_cake:hover {
background-color: #FF687B;
color: #000000;
}
.wdc_tip_scroll_down{
margin-top: 10px;
margin-bottom: 10px;
padding-top: 5px;
padding-bottom: 5px;
color: #3C4250;
font-family: 'Arial';
font-weight: 400;
font-size: 0.8em;
text-align: center;
border: 1px solid #3C4250 !important;
}
.wdc_label_tier_on_page {
margin-top: 20px;
padding-top:5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
font-family: 'Arial';
font-weight: 400;
font-size: 0.85em;
text-align: center;
background: #FFFFFF;
color: #3C4250;
}
.wdc_label_height_on_page {
padding-top:5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
font-family: 'Arial';
font-weight: 400;
font-size: 0.95em;
text-align: center;
background: #FFFFFF;
color: #3C4250;
}
.wdc_label_servings_on_page {
padding-top:5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
font-family: 'Arial';
font-weight: 400;
font-size: 1.20em;
text-align: center;
background: #FFFFFF;
color: #3C4250;
}
.wdc_table_budget {
max-width: 700px;
}
/* ------------------------
START ALNOOR
------------------------*/
.tp_language_block{
font-family: 'Arial';
font-size: 0.80em !important;
font-weight: 600;
color: #E2D1D9;
padding-left: 5px;
padding-right: 10px;
}
.tp-custom-toggler{
background-color: #FFFFFF !important;
}
.tp-navbar-toggler-icon{
font-size: 0.80em;
}
.tp_no_top_margin{
margin-top: 0px !important;
padding-top: 0px !important;
}
.tp_no_left_margin{
margin-left: 0px !important;
padding-left: 0px !important;
}
.tp_no_left_padding{
padding-left: 0px !important;
}
.tp_left_padding_20px{
padding-left: 20px !important;
}
.tp_first_block{
position: relative !important;
margin-top: 110px;
padding-bottom: 0px !important;
}
@media (min-width: 768px) {
.tp_first_block{
margin-top: 140px;
}
}
@media (min-width: 991px) {
.tp_first_block{
margin-top: 140px;
}
}
.tp_block_basic{
margin-top: 80px;
margin-bottom: 80px;
}
.tp_text_basic{
margin-top: 20px;
margin-bottom: 20px;
}
.tp_text_main p{
margin-top: 20px;
margin-bottom: 20px;
font-size: 0.96em !important;
color: #8090b5 !important;
line-height: 1.85 !important;
}
@media (min-width: 768px) {
.tp_text_main {
max-width: 750px;
}
}
@media (min-width: 992px) {
.tp_text_main {
max-width: 850px;
}
}
.tp_text_2_col{
margin-top: 20px;
margin-bottom: 20px;
}
@media (min-width: 768px) {
.tp_text_2_col {
padding-right: 40px;
}
}
@media (min-width: 992px) {
.tp_text_2_col {
padding-right: 80px;
}
}
.tp_text_3_col{
margin-top: 20px;
margin-bottom: 20px;
padding-right: 20px !important;
}
@media (max-width: 768px) {
.tp_text_3_col {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
}
@media (min-width: 768px) {
.tp_text_3_col {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
}
@media (min-width: 992px) {
.tp_text_3_col {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
}
.tp_image_basic{
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
.tp_page_split{
margin-top: 0px;
margin-bottom: 0px;
}
.tp_start_header{
padding-top: 0px;
padding-bottom: 0px;
font-family: 'Arial';
font-weight: 400;
font-size: 2.2em;
text-align: left;
color: #333333;
}
.tp_start_header_number{
padding-top: 0px;
padding-bottom: 0px;
font-family: 'Arial';
font-weight: 400;
font-size: 3.0em;
text-align: left;
color: #8090B5;
}
.tp_page_header{
padding-top: 20px;
padding-bottom: 5px;
padding-left: 50px;
padding-right: 50px;
font-family: 'Arial';
font-weight: 400;
font-size: 2.0em;
text-align: left;
color: #333333;
}
@media (max-width: 568px) {
.tp_page_header {
padding-left: 0px !important;
padding-right: 0px !important;
}
}
.tp_page_subheader{
padding-top: 5px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
font-family: 'Arial';
font-size: 0.98em;
font-weight: 500;
text-align: left;
color: #8090B5;
}
@media (max-width: 768px) {
.tp_page_subheader {
padding-left: 0px !important;
padding-right: 0px !important;
}
h1{
padding-left: 0px !important;
}
}
.tp_page_footer_header{
padding-top: 20px;
padding-bottom: 0px;
margin-bottom: 0px !important;
font-family: 'Arial';
font-size: 2.5em;
font-weight: 600;
text-align: center;
color: #FFFFFF;
}
.tp_footer_last_line{
padding-top: 0px;
padding-bottom: 20px;
font-family: 'Arial';
font-size: 0.9em;
font-weight: 600;
text-align: center;
color: #3C4250;
}
.tp_footer_last_line a{
color: #3C4250 !important;
}
.alnoor_bg_gradient_dark {
background-image: linear-gradient(to right, #00181A, #1C4D9C, #1C4D9C, #1C4D9C);
}
.alnoor_no_top_padding {
padding-top: 0px !important;
}
.alnoor_pading_left_side_30{
padding-left: 30px;
}
.alnoor_pading_top_bottom_30{
padding-top: 30px;
padding-bottom: 40px;
}
@media (max-width: 568px) {
.tp_logo {
padding-left: 0px;
}
}
@media (min-width: 568px) {
.tp_logo {
padding-left: 40px;
}
}
.tp_standaard_text{
font-family: 'Arial';
font-weight: 400;
color: #8090b5;
font-size: 0.96em;
}
.tp_logo {
padding-right: 0px;
font-family: Arial;
font-size: 2.5em;
font-weight: 600;
}
.tp_logo:hover {
text-decoration: none !important;
}
.tp_logo_payoff {
padding-right: 0px;
font-family: Amethysta;
font-size: 0.96em;
font-weight: 600;
}
.tp_logo_footer {
padding-right: 0px;
font-family: Arial;
font-size: 0.96em !important;
font-weight: 600;
}
.tp_logo_white_part{
color: #FFFFFF !important;
}
.tp_logo_dark_subpart{
color: #3C4250 !important;
}
.tp_logo_dark_part{
color: #3C4250 !important;
}
.tp_logo_blue_part{
font-family: Arial;
font-size: 0.86em;
color: #FFFFFF !important;
font-weight: 600;
}
.tp_logo_red_part{
font-family: Arial;
font-size: 0.66em;
color: #FFFFFF !important;
font-weight: 600;
}
.tp_logo_service_part{
padding-left: 0px;
font-family: Arial;
color: #FF0000 !important;
font-weight: 600;
font-size: 150%;
}
.tp_subheader{
padding-top: 10px;
padding-bottom: 40px;
font-size: 20px;
font-weight: 100;
}
.tp_background {
background-image: linear-gradient(to right, #00181A, #1C4D9C, #1C4D9C, #1C4D9C);
}
.wdc_footer_background {
background-image: linear-gradient(to right, #FF687B, #FF687B, #FF687B, #FF687B, #FF687B, #FF687B, #FF687B);
}
.tp_privacy_link{
color: #FFFFFF !important;
}
.tp_privacy_link:hover{
color: #000000 !important;
}
/* ------------------------
END ALNOOR
------------------------*/
/* ------------------------
START BUTTONS
------------------------*/
.but_home_more_info {
display: block;
margin-left: 0px;
margin-right: 0px;
width: 60%;
height: 40px;
line-height: 1;
font-size: 0.9em;
font-family: sans-serif;
text-decoration: none;
text-align:center;
color: #8090B5;
background: #FFFFFF;
border: 1px solid #1C4D9C;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
@media (max-width: 768px) {
.but_home_more_info {
margin-left: 10%;
margin-right: 10%;
margin-bottom: 40px;
width: 80%;
}
}
.but_home_more_info span{
position: relative;
z-index: 2;
}
.but_home_more_info:hover{
color: #FFFFFF !important;
}
.but_home_more_info:after{
position: absolute;
content: "";
top: 0;
left: 0;
width: 0;
height: 100%;
background: #1C4D9C;
transition: all .35s;
}
.but_home_more_info:hover:after{
width: 100%;
}
.tp_button_explore a{
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 0.9em;
text-decoration: none;
color: #333;
border: 1px solid #333333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
.tp_button_explore a span{
position: relative;
z-index: 2;
}
.tp_button_explore a:after{
position: absolute;
content: "";
top: 0;
left: 0;
width: 0;
height: 100%;
background: #1C4D9C;
transition: all .35s;
}
.tp_button_explore a:hover{
color: #fff;
}
.tp_button_explore a:hover:after{
width: 100%;
}
/* ------------------------
END BUTTONS
------------------------*/
/* ------------------------
START Transition
------------------------*/
/**
a, i, .btn, button, img, span, .dropdown-item, .hover-translate { -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; }
.hover-translate:hover { box-shadow: 0 10px 55px 5px rgba(137, 173, 255, .15); background-color: #fff; -webkit-transform: translate3d(0, -20px, 0); -moz-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); }
a:hover { text-decoration: none; }
**/
/* ------------------------
END Transition
------------------------*/
/* ------------------------
START Header
------------------------*/
header{
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.wdc_fixed_position_at_top {
position: fixed !important;
top: 0px !important;
}
/* ############## START TOP/NAV BAR ############### */
.wdc_container_top_menu{
/* MAIN TOP MENU HOLDER **/
position: fixed;
top: 0;
width: 100%;
/** max-width: 117rem; **/
margin: 0 auto auto 0;
padding-left: 0px;
z-index: 100;
}
nav{
display: flex;
width: 100%;
height: 7rem; /* HEIGHT OF NAV BAR / TOP MENU HOLDER */
background-color: #3C4250;
border-bottom: 0.5rem solid #FF687B; /* BORDER OF NAV BAR / TOP MENU HOLDER */
}
.wdc_hamburger_menu_icons{
/* HOLDER FOR HAMBURGER MENU IN NAV - 2rem from RIGHT SIDE OF PHONE and vertically in center of NAV BAR */
color: #EFEFEF;
font-size: 4rem;
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%);
cursor: pointer;
z-index: 9999;
display: none;
}
.wdc_top_menu_logo{
/* TAG FOR LOGO - 2rem from RIGHT SIDE and vertically in center of NAV BAR */
display: flex;
position: absolute;
top: 50%;
left: 2rem;
transform: translateY(-1.6rem);
width: 24rem;
height: auto;
/* background-color: #00FF00; */
font-size: 1.6rem;
color: #FFFFFF;
font-family: 'Arial';
font-weight: 600;
text-decoration:none;
}
.wdc_top_menu_logo:hover{
color: #FFFFFF;
text-decoration:none; /* do not underline when mouse over LOGO */
}
.wdc_language_block{
position: absolute;
top: 50%;
left: 21.5rem;
transform: translateY(-1.0rem);
font-family: 'Arial';
font-size: 0.77em;
font-weight: 600;
color: #E2D1D9;
padding-left: 5px;
padding-right: 10px;
}
.wdc_language_part{
text-decoration: none;
}
.wdc_language_part:hover{
text-decoration: none;
}
.wdc_language_link{
color: #FFFFFF;
text-decoration: none;
}
.wdc_language_link:hover{
color: #FF687B;
text-decoration: underline;
}
.wdc_language_link_selected{
color: #FF687B;
text-decoration: underline;
}
.wdc_language_link_selected:hover{
color: #FF687B;
text-decoration: underline;
}
/* ############## START TOP MENU ############### */
.wdc_top_menu_nav_list{
/* PART WITH THE MENU BUTTONS IN TOP NAV BAR */
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 26.5rem; /* X-POS START OF MENU BUTTONS IN NAV BAR */
display: flex;
width: 70%; /* MAX WITH OF THIS NAV LIST */
z-index: 200;
--var-is-mobile: 0; /* var used in js to store if in Desktop or mobile */
}
.wdc_top_menu_nav_list li{
/* HEIGHT OF THE MENU BOX FOR THE MENU ITEMS IN THE TOP MENU*/
line-height: 7rem;
position: relative;
list-style-type: none;
}
.wdc_top_menu_nav_list a{
/* FOR ALL MENU LINKS + BUTTONS IN TOP MENU */
display: block;
color: #FFFF00;
margin-left: 1.5rem; /* SPACE BETWEEM THE MENU LINKS AND BUTTONS IN TOP MENU */
font-size: 0.96em;
font-family: 'Arial';
font-weight: 600;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
/** transition: color 500ms; **/
}
.wdc_top_menu_nav_list a:hover{
color: #FFFFFF;
text-decoration: underline; /* SHOW MENU BUTTON UNDERLINE WHEN MOUSE OVER */
}
.wdc_top_menu_nav_list a:visited {
text-decoration: none;
}
.wdc_top_menu_nav_list_item_active{
color: #FF687B !important;
}
.wdc_top_menu_submenu_item_active{
color: #FF687B !important;
}
.wdc_top_menu_button{
/* FOR TOP MENU BUTTONS THAT HAVE A SUB MENU */
color: #FFFF00;
text-decoration:none;
user-select: none;
}
.wdc_top_menu_button a{
text-decoration: none;
}
.wdc_top_menu_button a:hover{
color: #FFFFFF;
text-decoration: underline; /* SHOW MENU BUTTON UNDERLINE WHEN MOUSE OVER */
}
.wdc_top_menu_button a:visited {
text-decoration: none;
}
.wdc_top_menu_button::after{
/* DRAW A CENTERED DOWN TRIANGLE UNDER THE TOP MENU BUTTON */
content: ""; /** place text before the submenu div **/
width: 0;
height: 0;
/* POSITION OF THE TRIANGLE */
position: absolute;
bottom: 1.8rem;
left: 1.55rem;
margin-left: 0rem;
/* DRAW THE DOWN TRIANGLE */
border-top: 0.7rem solid #FF687B;
border-right: 0.7rem solid transparent;
border-left: 0.7rem solid transparent;
}
.wdc_top_menu_nav_list li:hover > .wdc_top_menu_sub_menu{
/* ON MOUSE OVER, SHOW FIRST SUBMENU */
top: 6.3rem; /* END Y POSITION AFTER ANIMATION */
opacity: 1;
visibility: visible;
--var-is-visible: 1; /* var used in js to store if this submenu is visible */
}
.wdc_top_menu_nav_list li:hover > .wdc_top_menu_sub_menu_rightside{
/* ON MOUSE OVER, SHOW FIRST SUBMENU THAT EXPANDS TO THE LEFT */
top: 6.3rem; /* END Y POSITION AFTER ANIMATION */
opacity: 1;
visibility: visible;
--var-is-visible: 1; /* var used in js to store if this submenu is visible */
}
/* ############## END TOP MENU ############### */
/* ############## START (FIRST) SUB MENU ############### */
.wdc_top_menu_sub_menu{
/* THE SUB MENU BLOCK */
margin: 0;
padding: 0;
display: block;
position: absolute;
background-color: #3C4250; /* BACKGROUND COLOR OF THE SUBMENU BLOCK */
z-index: 9998;
width: 15rem; /* WIDTH OF THE SUB MENU BLOCK*/
border-top: 3px solid #FF687B; /* DRAW A BORDER AT THE TOP OF THE FIRST SUBMENU BLOCK */
/** set initials before mouse over hover animation **/
top: 8rem;
transition: all 300ms ease;
/* hide when no mouse over hover **/
opacity: 0;
visibility: hidden;
font-size: 0.80rem;
font-family: 'Arial';
font-weight: 600;
--var-is-visible: 0; /* var used in js to store if this submenu is visible */
}
.wdc_top_menu_sub_menu ul{
}
.wdc_top_menu_sub_menu li{
/* SET HEIGH OF A SUBMENU BUTTON */
padding-top: 0.75rem;
padding-bottom: 0.75rem;
line-height: 1rem;
}
.wdc_top_menu_sub_menu::before{
/* POSITION THE FIRST SUBMENU BLOCK AND DRAW A TOP TRIAGLE */
margin: 0;
padding: 0;
box-sizing: border-box;
content: ""; /** place text before the submenu div **/
width: 0;
height: 0;
/* Position the first submenu block */
position: absolute;
top: -1.0rem;
left: 1.55rem;
/* draw a centered top trangle at the top of the first submenu block */
border-left: 0.7rem solid transparent;
border-right: 0.7rem solid transparent;
border-bottom: 0.7rem solid #FF687B;
}
.wdc_top_menu_sub_menu::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wdc_top_sub_menu_button{
/* FOR SUB MENU BUTTONS THAT HAVE A SUB MENU */
user-select: none;
}
.wdc_top_sub_menu_button::after{
/* DRAW A RIGHT TRIANGLE AT THE RIGHT SIDE OF A SUBMENU LABEL */
content: ""; /** place text before the submenu div **/
width: 0;
height: 0;
/* Position of the triangle */
position: absolute;
top: 0.7rem;
margin-left: 0.5rem;
/* draw a right trangle */
border-top: 0.7rem solid transparent;
border-left: 0.7rem solid #FF687B;
border-bottom: 0.7rem solid transparent;
}
/** on mouse over, show submenu submenu **/
.wdc_top_menu_sub_menu li:hover > .wdc_top_menu_sub_menu{
/* ON MOUSE OVER SUBMENU, SHOW NEXT SUBMENU */
top: 0;
left: 100%;
opacity: 1;
visibility: visible;
}
/* ############## END (FIRST) SUB MENU ############### */
/* ############## START SUB SUB MENU ############### */
.wdc_top_menu_sub_menu .wdc_top_menu_sub_menu::before{
/* DRAW A LEFT TRIANGLE ON THE LEFT SIDE OF THE SUB-SUBMENU BOX */
top: 0.7rem;
left: -1.8rem;
border-top: 0.7rem solid transparent;
border-right: 0.7rem solid #FF687B;
border-bottom: 0.7rem solid transparent;
}
.wdc_top_menu_sub_menu .wdc_top_menu_sub_menu{
/* DRAW A LEFT BORDER ON THE SUB-SUBMENU BOX */
top: 0;
left: 110%; /** for left fly in animation effect **/
width: 18rem; /* WIDTH OF THE SUB SUB MENU BLOCK*/
border-top: none;
border-left: 3px solid #FF687B;
}
.wdc_top_menu_sub_menu .wdc_top_menu_sub_menu li{
/* SET HEIGH OF A SUB-SUBMENU BUTTON */
padding-top: 0.75rem;
padding-bottom: 0.75rem;
line-height: 1rem;
}
/* ############## START SUB SUB MENU ############### */
.wdc_top_menu_sub_menu .wdc_top_menu_sub_menu .wdc_top_menu_sub_menu::before{
/* DRAW A LEFT TRIANGLE ON THE LEFT SIDE OF THE SUB-SUBMENU BOX */
top: 0.45rem;
left: -1.8rem;
border-top: 0.7rem solid transparent;
border-right: 0.7rem solid #FF687B;
border-bottom: 0.7rem solid transparent;
}
.wdc_top_menu_sub_menu .wdc_top_menu_sub_menu .wdc_top_sub_menu_button::after{
/* DRAW A RIGHT TRIANGLE AT THE RIGHT SIDE OF A SUB-SUBMENU LABEL */
content: ""; /** place text before the submenu div **/
width: 0;
height: 0;
/* Position of the triangle */
position: absolute;
top: 0.45rem;
margin-left: 0.5rem;
/* draw a right trangle */
border-top: 0.7rem solid transparent;
border-left: 0.7rem solid #FF687B;
border-bottom: 0.7rem solid transparent;
}
/* ############## END SUB SUB MENU ############### */
/* ############## LEFT EXPAND: START (FIRST) SUB MENU EXPANDING ON THE LEFT SIDE ############### */
.wdc_top_menu_sub_menu_rightside{
/* LEFT EXPAND: THE SUB MENU BLOCK */
margin: 0;
padding: 0;
display: block;
position: absolute;
background-color: #3C4250; /* BACKGROUND COLOR OF THE SUBMENU BLOCK */
z-index: 9998;
width: 15rem; /* WIDTH OF THE SUB MENU BLOCK*/
border-top: 3px solid #FF687B; /* DRAW A BORDER AT THE TOP OF THE FIRST SUBMENU BLOCK */
/** set initial before mouse over hover animation **/
top: 8rem;
transition: all 300ms ease;
/* hide when no mouse over hover **/
opacity: 0;
visibility: hidden;
font-size: 0.80rem;
font-family: 'Arial';
font-weight: 600;
--var-is-visible: 0; /* var used in js to store if this submenu is visible */
}
.wdc_top_menu_sub_menu_rightside li{
/* LEFT EXPAND: SET HEIGH AND LEFT-PADDING OF A SUBMENU BUTTON */
padding-left: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
line-height: 1rem;
}
.wdc_top_menu_sub_menu_rightside::before{
/* LEFT EXPAND: POSITION THE FIRST SUBMENU BLOCK AND DRAW A TOP TRIAGLE */
margin: 0;
padding: 0;
box-sizing: border-box;
content: ""; /** place text before the submenu div **/
width: 0;
height: 0;
/* Position the first submenu block */
position: absolute;
top: -1.0rem;
left: 1.55rem;
/* draw a centered top trangle at the top of the first submenu block */
border-left: 0.7rem solid transparent;
border-right: 0.7rem solid transparent;
border-bottom: 0.7rem solid #FF687B;
}
.wdc_top_menu_sub_menu_rightside::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wdc_top_sub_menu_button_rightside{
/* LEFT EXPAND: FOR SUB MENU BUTTONS THAT HAVE A SUB MENU */
user-select: none;
}
.wdc_top_sub_menu_button_rightside::before{
/* LEFT EXPAND: DRAW A LEFT TRIANGLE AT THE LEFT SIDE OF A SUBMENU */
content: ""; /** place text before the submenu div **/
width: 0;
height: 0;
/* Position of the triangle */
position: absolute; /** draw a trangle ** **/
top: 0.55rem;
left: 1.1rem;
/* draw a right trangle */
border-top: 0.7rem solid transparent;
border-right: 0.7rem solid #FF687B;
border-bottom: 0.7rem solid transparent;
}
.wdc_top_menu_sub_menu_rightside li:hover > .wdc_top_menu_sub_menu_rightside{
/* LEFT EXPAND: ON MOUSE OVER SUBMENU, SHOW SUB-SUBMENU */
top: 0;
left: -18rem;
opacity: 1;
visibility: visible;
}
.wdc_top_menu_sub_menu_rightside .wdc_top_menu_sub_menu_rightside{
/* LEFT EXPAND: DRAW A RIGHT BORDER ON THE SUB-SUBMENU BOX */
top: 0;
left: -20rem; /** for left fly in animation effect **/
width: 18rem; /* WIDTH OF THE SUB SUB MENU BLOCK*/
border-top: none;
border-right: 3px solid #FF687B;
}
.wdc_top_menu_sub_menu_rightside .wdc_top_menu_sub_menu_rightside::before{
/* LEFT EXPAND: DRAW RIGHT TRIANGE ON THE SUB-SUB MENU BOX */
top: 0.55rem;
left: 16.1rem;
border-top: 0.7rem solid transparent;
border-left: 0.7rem solid #FF687B;
border-bottom: 0.7rem solid transparent;
}
.wdc_top_menu_sub_menu_rightside .wdc_top_menu_sub_menu_rightside li{
/* SET HEIGH OF A SUB-SUBMENU BUTTON */
padding-top: 0.75rem;
padding-bottom: 0.75rem;
line-height: 1rem;
}
.wdc_top_menu_sub_menu_rightside .wdc_top_menu_sub_menu_rightside .wdc_top_sub_menu_button_rightside::before{
/* LEFT EXPAND: DRAW A LEFT TRIANGLE AT THE LEFT SIDE OF A SUBMENU */
content: ""; /** place text before the submenu div **/
width: 0;
height: 0;
/* Position of the triangle */
position: absolute; /** draw a trangle ** **/
top: 0.55rem;
left: 1.1rem;
/* draw a right trangle */
border-top: 0.7rem solid transparent;
border-right: 0.7rem solid #FF687B;
border-bottom: 0.7rem solid transparent;
}
.wdc_top_menu_sub_menu_rightside .wdc_top_menu_sub_menu_rightside .wdc_top_menu_sub_menu_rightside::before{
/* LEFT EXPAND: DRAW RIGHT TRIANGE ON THE SUB-SUB-SUB MENU BOX */
top: 0.55rem;
left: 16.1rem;
border-top: 0.7rem solid transparent;
border-left: 0.7rem solid #FF687B;
border-bottom: 0.7rem solid transparent;
}
/* ############## LEFT EXPAND: END (FIRST) SUB MENU EXPANDING ON THE LEFT SIDE ############### */
/* ############## START BUTTON ON THE RIGHT SIDE OF THE TOP BAR ############### */
.wdc_top_menu_right_button{
/* BUTTON ON THE RIGHT SIDE OF THE TOP BAR */
display: inline-block;
margin: auto 2rem auto auto; /* Position of this button */
padding: 1.3rem;
line-height: initial !important;
background-color: #555555;
transition: background-color 500ms;
border: 2px solid #999999;
user-select: none;
}
.wdc_top_menu_right_button:hover{
background-color: rgba(0,0,0,0.2);
}
.wdc_top_sub_menu_button_rightside {
/* FOR SUB MENU BUTTONS THAT HAVE A SUB MENU */
user-select: none;
}
/* ############## END BUTTON ON THE RIGHT SIDE OF THE TOP BAR ############### */
/* ========================= START TOP MENU FOR MOBILE ========================== */
@media screen and (max-width: 968px){
.wdc_container_top_menu{
/* PHOME: MAIN TOP MENU HOLDER **/
position: fixed;
}
/** START HAMBURGER ICON **/
#wdc_hamburger_icon_toggle {
width: 40px;
height: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#wdc_hamburger_icon_toggle input {
position: absolute;
width: 40px;
height: 40px;
cursor: pointer;
opacity: 0; /* hide input */
z-index: 110; /* top of the menu */
}
#wdc_hamburger_icon_toggle span{
width: 40px;
height: 3px;
margin-bottom: 10px;
background: #FFFFFF;
border-radius: 2px;
-webkit-transition: all .5s cubic-bezier(.08,.81,.87,.71);
-moz-transition: all .5s cubic-bezier(.08,.81,.87,.71);
-ms-transition: all .5s cubic-bezier(.08,.81,.87,.71);
-o-transition: all .5s cubic-bezier(.08,.81,.87,.71);
transition: all .5s cubic-bezier(.08,.81,.87,.71);
}
#wdc_hamburger_icon_span1 {
transform-origin: 0px 0px;
}
#wdc_hamburger_icon_span3 {
transform-origin: bottom right;
}
#wdc_hamburger_icon_toggle input:checked ~ #wdc_hamburger_icon_span1 {
background-color: #FF687B;
transform: rotate(45deg) translate(5px);
}
#wdc_hamburger_icon_toggle input:checked ~ #wdc_hamburger_icon_span2 {
background-color: #FF687B;
transform: rotate(495deg) translate(5px);
}
#wdc_hamburger_icon_toggle input:checked ~ #wdc_hamburger_icon_span3 {
background-color: #FF687B;
transform: rotate(45deg);
opacity: 0;
}
/** END HAMBURGER ICON **/
nav{
display: flex;
width: 100%;
height: 5.0rem; /* HEIGHT OF NAV BAR / TOP MENU HOLDER */
border-bottom: 0.5rem solid #FF687B; /* BORDER OF NAV BAR / TOP MENU HOLDER */
}
nav.active .wdc_top_menu_nav_list{
display: flex;
}
.wdc_top_menu_nav_list a{
/* PHONE: FOR ALL MENU LINKS + BUTTONS IN TOP MENU */
width: 70%;
/* background-color: #00FF00; */
}
.wdc_top_menu_logo{
/* PHONE: TAG FOR LOGO - 2rem from RIGHT SIDE OF PHONE and vertically in center of NAV BAR */
position: absolute;
top: 2.0rem;
left: 1.0rem;
width: auto;
height: auto;
font-size: calc(1.1rem + 1.5vw);
color: #FFFFFF;
font-family: 'Arial';
font-weight: 600;
text-decoration:none;
}
.wdc_language_block{
position: absolute;
top: 4.15rem;
left: 0.5rem;
}
.wdc_language_part{
padding-left: 0.4rem;
padding-right: 0.4rem;
font-family: 'Arial';
font-size: 0.80rem;
font-weight: 600;
}
.wdc_hamburger_menu_icons{
display: block;
}
.wdc_body_no_scroll{
overflow: hidden
}
.wdc_top_menu_nav_list{
/* PHONE: PART WITH THE MENU BUTTONS IN TOP NAV BAR */
margin: 0;
margin-top: 5.0rem;
padding: 0;
display: none;
position: fixed;
top: 0;
left: 0; /* X-POS START OF MENU BOX IN NAV BAR */
height: 100%; /* HEIGHT OF MENU BOX IN NAV BAR */
width: 100%;
flex-direction: column;
align-items: initial;
background-color: #3C4250;
z-index: 9997;
overflow:hidden; overflow-y:scroll;
visibility: hidden;
--var-is-mobile: 1;
}
.wdc_top_menu_nav_list > li{
/* PHONE: HEIGHT OF THE MENU BOX FOR THE MENU ITEMS IN THE TOP MENU*/
font-size: 1.1rem !important;
line-height: 3rem;
}
.wdc_top_menu_button{
/* PHONE: FOR TOP MENU BUTTONS THAT HAVE A SUB MENU */
font-size: 1.1rem !important;
color: #E2D1D9;
text-decoration:none !important;
user-select: none;
width: 70%;
/*background-color: #00FF00; */
}
.wdc_top_menu_button a{
text-decoration:none !important;
}
.wdc_top_menu_button::after{
/* PHONE: DRAW A RIGHT TRIANGLE ON LEFT SIDE OF THE TOP MENU BUTTON LABEL */
content: ""; /** place text before the submenu div **/
width: 0;
height: 0;
/* POSITION OF THE TRIANGLE */
position: absolute;
top: 0.7rem;
left: unset;
margin-left: 1rem;
/* DRAW THE RIGHT TRIANGLE */
border-top: 0.8rem solid transparent;
border-left: 0.8rem solid #FF687B;
border-bottom: 0.8rem solid transparent;
}
.wdc_top_menu_nav_list li:hover > .wdc_top_menu_sub_menu{
/* PHONE: ON MOUSE OVER TOP MENU BUTTON, SHOW FIRST SUBMENU */
opacity: 1;
visibility: visible;
max-height: initial;
}
.wdc_top_menu_nav_list li:hover > .wdc_top_menu_sub_menu_rightside{
/* PHONE: ON MOUSE OVER TOP MENU BUTTON, SHOW FIRST SUBMENU THAT EXPANDS TO THE LEFT */
opacity: 1;
visibility: visible;
max-height: initial;
}
.wdc_top_menu_sub_menu{
/* PHONE: THE SUB MENU BLOCK */
margin: 0;
padding: 0;
width: 100%; /* WIDTH OF THE SUBMENU BOX */
margin-left: 1.5rem; /** shift submenu to the right **/
max-height: 0;
font-size: 1.0rem !important;
position: initial; /* RESET POSITION TO DEFAULT */
border: 3px solid transparent;
border-left-color: #FF687B;
}
.wdc_top_sub_menu_button,.wdc_top_sub_menu_button_rightside{
/* PHONE: SUB MENU BUTTON RIGHSIDE AND LEFTSIDE EXPAND*/
font-size: 1.0rem !important;
color: #E2D1D9;
text-decoration:none !important;
user-select: none;
text-decoration:none !important;
width: 80%;
}
.wdc_top_sub_menu_button_rightside::before{
/* PHONE: LEFT EXPAND: REMOVE ANY BORDERS AND TRIANGLE AT THE LEFT SIDE OF A SUBMENU */
content: unset;
width: unset;
height: unset;
position: unset;
top: unset;
left: unset;
border-top: unset;
border-right: unset;
border-bottom: unset;
}
.wdc_top_sub_menu_button_rightside::after{
/* PHONE: SUBMENU RIGHT EXPAND: DRAW A RIGHT TRIANGLE AT THE RIGHT SIDE OF A SUBMENU BUTTON LABEL*/
content: ""; /** place text before the submenu div **/
width: 0;
height: 0;
/* POSITION OF THE TRIANGLE */
position: absolute;
top: 0.4rem;
left: unset;
margin-left: 1rem;
/* DRAW THE RIGHT TRIANGLE */
border-top: 0.8rem solid transparent;
border-left: 0.8rem solid #FF687B;
border-bottom: 0.8rem solid transparent;
}
.wdc_top_menu_sub_menu_rightside{
/* PHONE: THE SUB MENU BLOCK THAT EXPANDS TO THE LEFT*/
margin: 0;
padding: 0;
width: 100% !important; /* WIDTH OF THE SUBMENU BOX */
margin-left: 1.5rem; /** shift submenu to the right **/
max-height: 0;
font-size: 0.90rem !important;
position: initial; /* RESET POSITION TO DEFAULT */
border: 3px solid transparent;
border-left-color: #FF687B;
}
.wdc_top_menu_sub_menu_rightside .wdc_top_menu_sub_menu_rightside{
border-right: none;
}
.wdc_top_menu_sub_menu_rightside .wdc_top_menu_sub_menu_rightside .wdc_top_sub_menu_button_rightside::before{
content: unset;
width: unset;
height: unset;
position: unset;
top: unset;
left: unset;
border-top: unset;
border-right: unset;
border-bottom: unset;
}
.wdc_top_menu_sub_menu_rightside .wdc_top_menu_sub_menu_rightside .wdc_top_sub_menu_button_rightside::after{
/* PHONE: SUBMENU RIGHT EXPAND: DRAW A RIGHT TRIANGLE AT THE RIGHT SIDE OF A SUBMENU BUTTON LABEL*/
content: ""; /** place text before the submenu div **/
width: 0;
height: 0;
/* POSITION OF THE TRIANGLE */
position: absolute;
top: 0.3rem;
left: unset;
margin-left: 1rem;
/* DRAW THE RIGHT TRIANGLE */
border-top: 0.8rem solid transparent;
border-left: 0.8rem solid #FF687B;
border-bottom: 0.8rem solid transparent;
}
.wdc_top_menu_sub_menu_rightside li{
padding-left: 0;
}
.wdc_top_menu_sub_menu::before{
margin: 0;
padding: 0;
box-sizing: border-box;
display: none;
}
.wdc_top_menu_sub_menu_rightside::before{
margin: 0;
padding: 0;
box-sizing: border-box;
display: none;
}
.wdc_top_menu_sub_menu::after{
margin: 0;
padding: 0;
box-sizing: border-box;
display: none;
}
.wdc_top_menu_sub_menu_rightside::after{
margin: 0;
padding: 0;
box-sizing: border-box;
display: none;
}
.wdc_top_menu_right_button{
/* PHONE: BUTTON ON THE RIGHT SIDE OF THE TOP BAR IN DESKTOP. ON PHONE AT THE BOTTOM OF MENU BLOCK*/
margin: 0 auto 0 0;
line-height: initial;
user-select: none;
}
}
/* ========================= END TOP MENU FOR MOBILE ========================== */
/*End nav css*/
/* ------------------------
END Header
------------------------*/