html {
height: 100%;
width: 100%;
}
body {
background-color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 500;
height: 100%;
margin: 0;
overflow-x: hidden;
padding: 0;
position: relative;
width: 100%;
}
@media screen and (max-width: 300px) {
body {
width: 300px;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #525252;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
margin: 30px 0 10px 0;
padding: 0;
}
h1 {
font-size: 2.8em;
}
h2 {
font-size: 2.4em;
}
h3 {
font-size: 2.0em;
}
h4 {
font-size: 1.6em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1.0em;
}
table {
border-collapse: collapse;
border-color: #cccccc;
}
table tr th {
background-color: #525252;
border-color: #ADADAD;
color: #ffffff;
}
table tr td {
border-color: #ADADAD;
}
img {
border: 0;
}
hr {
background-color: #ADADAD;
border: 0;
height: 1px;
}
iframe {
border: 0;
}
.hide_meta {
display: none;
}
.top_notice {
clear: both;
display: none;
height: auto;
margin: 0 auto;
padding: 5px 0;
position: relative;
width: 100%;
}
.jump_anchor {
display: block;
position: relative;
top: -100px;
visibility: hidden;
}
.red_notice {
background-color: red;
clear: both;
color: #ffffff;
display: table;
font-family: 'Montserrat', sans-serif;
height: auto;
margin: 10px auto;
padding: 10px;
position: relative;
text-align: center;
width: calc(100% - 20px);
}
.spacer_10 {
width: 100%;
height: 10px;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
}
.spacer_20 {
width: 100%;
height: 20px;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
}
.spacer_30 {
width: 100%;
height: 30px;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
}
.gen_btn {
width: auto;
height: auto;
padding: 10px 20px;
margin: 0;
position: relative;
text-align: right;
float: right;
display: table;
border: 0;
background-color: #1585b3;
color: #ffffff;
font-size: 1.2em;
border-radius: 5px;
font-weight: 500;
text-transform: uppercase;
line-height: 1.0em;
background-attachment: scroll;
background-repeat: no-repeat;
background-size: auto 20px;
background-position: left 15px center;
cursor: pointer;
transition: all 0.3s ease-in-out;
text-decoration: none;
}
@media screen and (max-width: 560px) {
.gen_btn {
width: 100%;
text-align: center;
float: none;
clear: both;
font-size: 1.0em;
}
}
@media screen and (max-width: 560px) {
.gen_btn_link {
width: calc(100% - 40px);
}
}
.gen_btn:hover {
background-color: #196188;
}
.key_btn {
background-image: url('../images/key_icon.png');
}
.register_btn {
background-image: url('../images/user_plus_icon.png');
}
.address_btn {
background-image: url('../images/map_icon.png');
margin: 0 0 10px 0;
}
*:focus {
outline: none;
}
.show_560 {
display: none;
}
@media screen and (max-width: 560px) {
.show_560 {
display: block;
}
}
@media screen and (max-width: 560px) {
.hide_560 {
display: none;
}
}
@media screen and (max-width: 1080px) {
.hide_1080 {
display: none;
}
}
/* ACTION NOTICES */
.action_notice {
width: calc(100% - 100px);
height: auto;
padding: 10px 50px;
margin: 0 auto;
position: relative;
clear: both;
display: table;
color: #ffffff;
text-align: center;
font-size: 1.0em;
font-weight: 600;
}
@media screen and (max-width: 1080px) {
.action_notice {
width: calc(100% - 40px);
padding: 10px 20px;
}
}
@media screen and (max-width: 767px) {
.action_notice {
width: calc(100% - 20px);
padding: 10px 10px;
font-size: 0.9em;
}
}
@media screen and (max-width: 560px) {
.action_notice {
font-size: 0.8em;
}
}
.action_notice_green {
background-color: #008040;
}
.action_notice_red {
background-color: #ff0000;
}
.bordered_notice {
width: calc(100% - 20px - 4px);
height: auto;
padding: 10px;
margin: 10px auto;
position: relative;
clear: both;
text-align: center;
color: #525252;
border: 2px solid #525252;
border-radius: 5px;
font-weight: 600;
line-height: 1.0em;
}
/* ADVERT BAR TOP */
.attention_bar {
width: calc(100% - 100px);
height: auto;
padding: 10px 50px;
margin: 0 auto;
position: relative;
clear: both;
display: table;
text-align: center;
font-size: 1.0em;
font-weight: 600;
background-attachment: scroll;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
@media screen and (max-width: 1080px) {
.attention_bar {
width: calc(100% - 40px);
padding: 10px 20px;
}
}
@media screen and (max-width: 767px) {
.attention_bar {
width: calc(100% - 20px);
padding: 10px 10px;
font-size: 0.9em;
}
}
@media screen and (max-width: 560px) {
.attention_bar {
font-size: 0.8em;
}
}
/* INFO BAR TOP */
.info_bar {
width: calc(100% - 100px);
height: 40px;
padding: 0 50px;
margin: 0 auto;
position: relative;
clear: both;
display: table;
background-color: #ffffff;
z-index: 1020;
border-bottom: 1px solid #e1e1e1;
}
@media screen and (max-width: 1080px) {
.info_bar {
width: calc(100% - 40px);
height: auto;
padding: 0 20px 0 20px;
}
}
@media screen and (max-width: 767px) {
.info_bar {
width: calc(100% - 20px);
height: auto;
padding: 10px 10px 0 10px;
}
}
@media screen and (max-width: 440px) {
.info_bar {
width: 100%;
height: auto;
padding: 10px 0 0 0;
}
}
.slogan {
width: auto;
height: auto;
padding: 0;
display: table-cell;
vertical-align: middle;
color: #686868;
font-size: 0.9em;
line-height: 1.0em;
font-weight: 600;
text-transform: uppercase;
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.slogan {
display: table;
margin: 0 auto 5px auto;
position: relative;
text-align: center;
}
}
@media screen and (max-width: 560px) {
.slogan {
display: none;
}
}
.user_bar {
width: 100%;
height: auto;
padding: 0;
display: table-cell;
vertical-align: middle;
white-space: nowrap;
text-align: right;
}
@media screen and (max-width: 767px) {
.user_bar {
display: table;
margin: 0 auto;
position: relative;
text-align: center;
}
}
.user_bar ul {
padding: 0;
margin: 0;
}
.user_bar ul li {
padding: 10px 0;
margin: 0 0 0 15px;
list-style-type: none;
display: inline-block;
}
@media screen and (max-width: 767px) {
.user_bar ul li {
padding: 0 0 10px 0;
margin: 0 0 0 15px;
list-style-type: none;
display: inline-block;
}
}
@media screen and (max-width: 440px) {
.user_bar ul li {
padding: 0 0 10px 0;
margin: 0 5px 0 5px;
list-style-type: none;
display: inline-block;
}
}
.user_bar ul li a,
.user_bar ul li a:visited {
text-decoration: none;
color: #686868;
font-weight: 600;
text-transform: uppercase;
width: 100%;
height: 100%;
font-size: 0.9em;
}
@media screen and (max-width: 440px) {
.user_bar ul li a,
.user_bar ul li a:visited {
font-size: 0.8em;
}
}
.user_bar ul li a:hover,
.user_bar ul li a:visited:hover {
color: #000000;
}
.user_bar ul ul {
display: none;
}
.user_bar ul li:hover ul {
display: block;
position: absolute;
top: 100%;
z-index: 1002;
background-color: #ffffff;
padding: 10px;
width: 200px;
}
@media screen and (max-width: 440px) {
.user_bar ul li:hover ul {
padding: 10px;
width: 100%;
left: 0;
}
}
.user_bar ul ul li {
display: block;
padding: 4px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
text-align: center;
margin: 0 auto;
}
.user_bar ul ul li:last-child {
border-bottom: 0;
}
.user_bar ul ul li a,
.user_bar ul ul li a:visited {
width: 100%;
height: 100%;
display: table;
}
/* HEADER */
.header {
width: calc(100% - 100px);
height: auto;
padding: 5px 50px 10px 50px;
margin: 0 auto;
position: relative;
clear: both;
display: table;
background-color: #ffffff;
background-image: url('../images/header_bg_filler.png');
background-attachment: scroll;
background-repeat: repeat-x;
background-position: center bottom;
background-size: auto 60%;
}
@media screen and (max-width: 1080px) {
.header {
width: calc(100% - 40px);
padding: 5px 20px 10px 20px;
background-size: auto 55%;
}
}
@media screen and (max-width: 767px) {
.header {
width: calc(100% - 20px);
padding: 5px 10px;
}
}
@media screen and (max-width: 560px) {
.header {
background-image: none;
width: 100%;
padding: 5px 0 0 0;
}
}
.logo {
width: auto;
height: auto;
padding: 0;
display: table-cell;
vertical-align: middle;
white-space: nowrap;
}
@media screen and (max-width: 560px) {
.logo {
width: 100%;
display: table;
position: relative;
text-align: center;
margin: 0 auto;
padding: 0;
background-image: url('../images/header_bg_filler.png');
background-attachment: scroll;
background-repeat: repeat-x;
background-position: center bottom;
background-size: auto 55%;
}
}
.logo_main {
width: auto;
height: 160px;
display: table;
}
@media screen and (max-width: 1080px) {
.logo_main {
height: 140px;
}
}
@media screen and (max-width: 767px) {
.logo_main {
height: 110px;
}
}
@media screen and (max-width: 560px) {
.logo_main {
display: none;
}
}
.logo_mobile {
display: none;
}
@media screen and (max-width: 560px) {
.logo_mobile {
width: auto;
height: 90px;
display: block;
margin: 0 0 0 10px;
}
}
.logo_slogan {
width: 100%;
height: 55px;
padding: 0;
margin: 0 auto;
position: absolute;
bottom: 5px;
left: 0;
right: 0;
z-index: 2;
background-image: url('../images/logo_slogan.png');
background-attachment: scroll;
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center center;
}
@media screen and (max-width: 1080px) {
.logo_slogan {
height: 45px;
bottom: 5px;
}
}
@media screen and (max-width: 767px) {
.logo_slogan {
height: 35px;
bottom: 2px;
}
}
@media screen and (max-width: 560px) {
.logo_slogan {
bottom: 40px;
background-size: auto 30px;
background-position: right 10px center;
}
}
@media screen and (max-width: 440px) {
.logo_slogan {
bottom: 40px;
background-size: auto 22px;
background-position: right 10px center;
}
}
.cart_buttons {
width: auto;
height: auto;
padding: 10px 0 0 0;
display: table-cell;
vertical-align: top;
text-align: right;
white-space: nowrap;
}
@media screen and (max-width: 560px) {
.cart_buttons {
display: table;
text-align: center;
position: relative;
margin: 0 auto;
padding: 6px 0 10px 0;
background-color: #1585b3;
width: 100%;
}
}
.cart_buttons a,
.cart_buttons a:visited {
color: #525252;
cursor: pointer;
}
.cart_button_holder {
width: auto;
height: auto;
padding: 0;
margin: 0 0 0 35px;
position: relative;
display: inline-block;
transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 1080px) {
.cart_button_holder {
margin: 0 0 0 20px;
}
}
@media screen and (max-width: 560px) {
.cart_button_holder {
margin: 0 15px 0 15px;
}
}
.cart_button_holder:hover {
transform: scale(1.1, 1.1);
}
@media screen and (max-width: 560px) {
.cart_button_holder:hover {
transform: scale(1.0, 1.0);
}
}
.cart_button_holder i {
font-size: 45px;
color: #525252;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
@media screen and (max-width: 1080px) {
.cart_button_holder i {
font-size: 30px;
}
}
@media screen and (max-width: 767px) {
.cart_button_holder i {
font-size: 25px;
}
}
@media screen and (max-width: 560px) {
.cart_button_holder i {
color: #ffffff;
}
}
.cart_button_holder i:hover {
color: #000000;
}
.cart_count {
width: 25px;
height: 25px;
line-height: 25px;
margin: 0;
padding: 0;
position: absolute;
top: -10px;
left: 35px;
z-index: 2;
background-color: #ff0000;
border-radius: 50%;
border: 2px solid #ffffff;
font-size: 12px;
text-align: center;
color: #ffffff;
font-weight: 600;
}
@media screen and (max-width: 1080px) {
.cart_count {
width: 20px;
height: 20px;
line-height: 20px;
top: -10px;
left: 20px;
z-index: 2;
background-color: #ff0000;
border-radius: 50%;
border: 2px solid #ffffff;
font-size: 12px;
text-align: center;
color: #ffffff;
font-weight: 600;
}
}
@media screen and (max-width: 560px) {
.cart_count {
border: 0;
top: -6px;
}
}
.cart_price {
width: auto;
height: auto;
padding: 5px 0 0 15px;
margin: 0;
position: relative;
clear: none;
float: right;
line-height: 1.0em;
text-transform: uppercase;
}
@media screen and (max-width: 1080px) {
.cart_price {
padding: 2px 0 0 12px;
}
}
@media screen and (max-width: 767px) {
.cart_price {
padding: 2px 0 0 20px;
font-size: 0.8em;
}
}
@media screen and (max-width: 560px) {
.cart_price {
display: none;
}
}
.your_cart_tag {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: both;
font-weight: 700;
font-size: 0.9em;
line-height: 1.0em;
}
@media screen and (max-width: 767px) {
.your_cart_tag {
font-size: 0.8em;
}
}
.cart_price_tag {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: both;
font-size: 0.8em;
font-weight: 600;
line-height: 1.0em;
}
.search_popup {
width: 400px;
height: auto;
padding: 5px;
margin: 0;
position: absolute;
top: 65px;
right: 0;
background-color: #1585b3;
z-index: 1200;
display: none;
}
@media screen and (max-width: 1080px) {
.search_popup {
top: 55px;
}
}
@media screen and (max-width: 767px) {
.search_popup {
top: 50px;
}
}
@media screen and (max-width: 560px) {
.search_popup {
width: calc(100% - 10px);
padding: 5px;
top: 100%;
}
}
.search_popup input[type="text"] {
width: calc(100% - 70px);
height: 30px;
padding: 10px;
margin: 0;
position: relative;
clear: none;
float: left;
background-color: #ffffff;
border: 0;
font-size: 1.1em;
font-family: 'Barlow Condensed', sans-serif;
}
.search_popup input[type="submit"] {
width: 50px;
height: 50px;
padding: 0;
margin: 0;
position: relative;
clear: none;
float: right;
background-color: #196188;
border: 0;
background-image: url('../images/search_icon.png');
background-attachment: scroll;
background-repeat: no-repeat;
background-position: center center;
background-size: auto 30px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search_popup input[type="submit"]:hover {
background-color: #370a25;
}
/* MENU BAR */
.menu_bar {
width: calc(100% - 100px);
height: auto;
padding: 5px 50px;
margin: 0 auto;
position: relative;
clear: both;
display: table;
background-color: #370a25;
z-index: 1001;
}
@media screen and (max-width: 1080px) {
.menu_bar {
width: calc(100% - 40px);
padding: 0 20px;
}
}
@media screen and (max-width: 767px) {
.menu_bar {
width: calc(100% - 20px);
padding: 0 10px;
}
}
.menu_bar.sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
}
.menu_bar.sticky+.content {
padding-top: 110px;
}
.menu_bars_icon img {
width: auto;
height: 50px;
opacity: 0.7;
transition: all 0.4s ease-in-out;
float: right;
}
@media screen and (max-width: 767px) {
.menu_bars_icon img {
height: 40px;
}
}
.menu_bars_icon img:hover {
opacity: 1.0;
}
/* SLIDER IMAGES */
.slider {
clear: both;
display: table;
height: auto;
margin: 5px auto 0 auto;
padding: 0;
position: relative;
width: 100%;
z-index: 0;
overflow: hidden;
border-bottom: 5px solid #196188;
}
.slider_holder {
background: no-repeat scroll;
background-size: cover !important;
clear: both;
display: table-cell;
height: 100%;
padding: 0;
position: relative;
width: 100%;
}
.bxslider {
margin: 0;
padding: 0;
width: 100%;
}
@media screen and (max-width: 767px) {
.bxslider {
padding-bottom: 60% !important;
}
}
@media screen and (max-width: 560px) {
.bxslider {
padding-bottom: 70% !important;
}
}
.slider_info {
width: calc(60% - 70px);
height: auto;
padding: 10px 50px 10px 20px;
margin: 0 auto;
position: absolute;
bottom: 50px;
right: -100%;
background-color: rgba(0, 0, 0, 0.6);
animation: animateSliderInfo 1.5s ease-in-out 0.0s 1 forwards;
}
@media screen and (max-width: 1080px) {
.slider_info {
width: calc(90% - 20px);
height: auto;
padding: 10px;
margin: 0 5%;
position: absolute;
bottom: 50px;
right: -100%;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
animation: animateSliderInfo 1.5s ease-in-out 0.0s 1 forwards;
}
}
@keyframes animateSliderInfo {
0% {
right: -100%;
}
100% {
right: 0;
}
}
.slider_title {
width: 100%;
height: auto;
padding: 0;
margin: 10px 0 0 0;
position: relative;
clear: both;
color: #ffffff;
font-size: 2.5em;
font-weight: 700;
line-height: 1.2em;
text-align: right;
}
@media screen and (max-width: 1200px) {
.slider_title {
font-size: 2.3em;
}
}
@media screen and (max-width: 1080px) {
.slider_title {
font-size: 2.0em;
text-align: center;
}
}
@media screen and (max-width: 767px) {
.slider_title {
font-size: 1.7em;
}
}
@media screen and (max-width: 560px) {
.slider_title {
font-size: 1.4em;
}
}
@media screen and (max-width: 440px) {
.slider_title {
font-size: 1.2em;
}
}
.slider_title_line {
width: 30%;
height: 4px;
padding: 0;
margin: 5px 0 10px 0;
position: relative;
clear: both;
text-align: right;
float: right;
background-color: #1585b3;
}
@media screen and (max-width: 1080px) {
.slider_title_line {
text-align: center;
float: left;
margin: 0 35%;
}
}
@media screen and (max-width: 767px) {
.slider_title_line {
display: none;
}
}
.slider_description {
width: 100%;
height: auto;
padding: 0;
margin: 10px 0;
position: relative;
clear: both;
color: #ffffff;
font-size: 1.1em;
font-weight: 500;
line-height: 1.2em;
text-align: right;
}
@media screen and (max-width: 1080px) {
.slider_description {
font-size: 1.0em;
text-align: center;
}
}
@media screen and (max-width: 767px) {
.slider_description {
display: none;
}
}
.slider_button {
width: auto;
height: auto;
padding: 0;
margin: 15px 0 25px 0;
position: relative;
clear: both;
float: right;
display: table;
}
@media screen and (max-width: 1080px) {
.slider_button {
margin: 20px auto 25px auto;
float: none;
text-align: center;
}
}
@media screen and (max-width: 767px) {
.slider_button {
margin: 15px auto 25px auto;
}
}
.slider_button a,
.slider_button a:visited {
width: auto;
height: auto;
padding: 10px 20px;
margin: 0;
background-color: #1585b3;
color: #ffffff;
text-align: center;
text-transform: uppercase;
font-size: 0.9em;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease-in-out;
border-radius: 5px;
}
@media screen and (max-width: 1080px) {
.slider_button a,
.slider_button a:visited {
font-size: 0.8em;
}
}
.slider_button a:hover,
.slider_button a:visited:hover {
background-color: #196188;
}
/* MAIN CONTENT */
.content {
width: 1000px;
height: auto;
padding: 30px 0;
margin: 0 auto;
position: relative;
clear: both;
display: table;
}
@media screen and (max-width: 1080px) {
.content {
width: calc(100% - 40px);
padding: 30px 20px;
}
}
@media screen and (max-width: 767px) {
.content {
width: calc(100% - 20px);
padding: 30px 10px;
}
}
.sub_content {
width: calc(100% - 100px);
height: auto;
padding: 0 50px;
margin: 0;
position: relative;
clear: both;
display: table;
}
@media screen and (max-width: 1080px) {
.sub_content {
width: calc(100% - 40px);
padding: 0 20px;
}
}
@media screen and (max-width: 767px) {
.sub_content {
width: calc(100% - 20px);
padding: 0 10px;
}
}
.page_left {
width: calc(50% - 20px);
height: auto;
padding: 0 20px 0 0;
margin: 0;
position: relative;
clear: none;
float: left;
}
@media screen and (max-width: 1080px) {
.page_left {
width: 100%;
padding: 0 0 20px 0;
clear: both;
float: none;
}
}
.page_right {
width: calc(50% - 20px);
height: auto;
padding: 0 0 0 20px;
margin: 0;
position: relative;
clear: none;
float: right;
}
@media screen and (max-width: 1080px) {
.page_right {
width: 100%;
padding: 0;
clear: both;
float: none;
}
}
.page_1_3,
.page_2_3,
.page_3_3 {
height: auto;
margin: 0;
position: relative;
clear: none;
float: left;
}
.page_1_3 {
width: calc(30% - 20px);
padding: 0 10px 10px 10px;
}
@media screen and (max-width: 1080px) {
.page_1_3 {
display: none;
}
}
.page_2_3 {
width: calc(40% - 40px);
padding: 10px 20px;
}
@media screen and (max-width: 1080px) {
.page_2_3 {
width: calc(50% - 40px);
padding: 10px 20px;
}
}
@media screen and (max-width: 560px) {
.page_2_3 {
width: 100%;
padding: 0;
float: none;
clear: both;
}
}
.page_3_3 {
width: calc(30% - 20px);
padding: 10px;
}
@media screen and (max-width: 1080px) {
.page_3_3 {
width: calc(50% - 20px);
}
}
@media screen and (max-width: 560px) {
.page_3_3 {
width: 100%;
padding: 0;
clear: both;
float: none;
}
}
.page_3_3_inside {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto 10px auto;
position: relative;
clear: both;
background-color: #e4e4e4;
display: table;
}
.content_h2_header {
width: 100%;
height: auto;
padding: 0 0 10px 0;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
font-weight: 500;
font-size: 2.0em;
line-height: 1.1em;
color: #370a25;
text-transform: uppercase;
}
@media screen and (max-width: 1080px) {
.content_h2_header {
font-size: 1.8em;
}
}
@media screen and (max-width: 767px) {
.content_h2_header {
font-size: 1.6em;
}
}
.content p {
text-align: justify;
line-height: 1.4em;
}
.content img {
max-width: 100%;
height: auto !important;
}
.content li {
padding: 3px 0;
}
/* CONTENT BOXES */
.content_boxes {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
}
.content_box_holder {
width: calc(100% - 30px - 2px);
height: auto;
padding: 15px;
margin: 10px auto;
position: relative;
clear: both;
display: table;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.content_box_photo {
width: 260px;
height: 260px;
padding: 0;
margin: 0;
position: relative;
clear: none;
float: left;
background-attachment: scroll;
background-repeat: no-repeat;
background-size: cover !important;
}
@media screen and (max-width: 767px) {
.content_box_photo {
width: 230px;
height: 230px;
}
}
@media screen and (max-width: 560px) {
.content_box_photo {
display: none;
}
}
.content_box_photo_top {
display: block;
}
.content_box_photo_bottom {
display: none;
}
@media screen and (max-width: 560px) {
.content_box_photo_bottom {
display: block;
width: 100%;
height: auto;
padding-bottom: 50%;
margin: 10px auto 0 auto;
}
}
@media screen and (max-width: 560px) {
.content_box_photo_top {
display: none;
}
}
.content_box_info {
width: calc(100% - 25px - 260px);
height: 260px;
padding: 0 10px 0 15px;
margin: 0;
position: relative;
clear: none;
float: right;
overflow-x: hidden;
overflow-y: scroll;
}
@media screen and (max-width: 767px) {
.content_box_info {
width: calc(100% - 25px - 230px);
height: 230px;
}
}
@media screen and (max-width: 560px) {
.content_box_info {
width: 100%;
height: auto;
overflow: hidden;
padding: 0;
}
}
/* width */
.content_box_info::-webkit-scrollbar {
width: 6px;
}
/* Track */
.content_box_info::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
.content_box_info::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
.content_box_info::-webkit-scrollbar-thumb:hover {
background: #555;
}
.content_box_info_full {
width: calc(100% - 10px);
height: 260px;
padding: 0 10px 0 0;
}
@media screen and (max-width: 560px) {
.content_box_info_full {
height: auto;
}
}
.content_box_main_title {
width: 100%;
height: auto;
padding: 0;
margin: 0 0 5px 0;
position: relative;
clear: both;
font-size: 1.6em;
text-transform: uppercase;
color: #646464;
line-height: 1.1em;
}
@media screen and (max-width: 1080px) {
.content_box_main_title {
font-size: 1.5em;
}
}
@media screen and (max-width: 767px) {
.content_box_main_title {
font-size: 1.4em;
}
}
@media screen and (max-width: 560px) {
.content_box_main_title {
font-size: 1.3em;
text-align: center;
}
}
.content_box_sub_title {
width: 100%;
height: auto;
padding: 0;
margin: 0 0 5px 0;
position: relative;
clear: both;
font-size: 1.2em;
color: #6d6d6d;
line-height: 1.1em;
}
@media screen and (max-width: 1080px) {
.content_box_sub_title {
font-size: 1.1em;
}
}
@media screen and (max-width: 767px) {
.content_box_sub_title {
font-size: 1.0em;
}
}
@media screen and (max-width: 560px) {
.content_box_sub_title {
font-size: 1.0em;
text-align: center;
}
}
.content_box_content {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: both;
}
.content_box_content p {
text-align: justify;
line-height: 1.4em;
font-size: 0.9em;
padding: 0;
margin: 0 0 5px 0;
}
/* MEDIA BOXES GALLERY */
.page_images {
width: 100%;
height: auto;
padding: 10px 0;
margin: 0 auto;
position: relative;
clear: both;
display: table;
}
.page_image_link {
text-decoration: none;
}
.page_images_container {
height: auto;
padding-bottom: calc(100% / 3 / 1.6 - 10px);
margin: 5px;
position: relative;
clear: none;
float: left;
background-color: #c4c4c4;
background-attachment: scroll;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.page_images_container_stretch1 {
width: calc(100% / 3 * 1 - 10px);
}
@media screen and (max-width: 560px) {
.page_images_container_stretch1 {
width: calc(100% / 1 * 1 - 10px);
padding-bottom: calc(100% / 2 - 10px);
}
}
.page_images_container_stretch2 {
width: calc(100% / 3 * 2 - 10px);
padding-bottom: calc(100% / 2.4 - 10px);
}
@media screen and (max-width: 560px) {
.page_images_container_stretch2 {
width: calc(100% / 1 * 1 - 10px);
padding-bottom: calc(100% / 2 - 10px);
}
}
.page_images_container_stretch3 {
width: calc(100% / 3 * 3 - 10px);
padding-bottom: calc(100% / 3 / 2.0 * 3 - 10px);
}
@media screen and (max-width: 560px) {
.page_images_container_stretch3 {
width: calc(100% / 1 * 1 - 10px);
padding-bottom: calc(100% / 3 / 1.6 * 1 - 10px);
padding-bottom: calc(100% / 2 - 10px);
}
}
.page_image_title {
width: calc(100% - 20px);
height: auto;
padding: 0 10px;
margin: 0 auto;
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
display: block;
transition: all 0.4s ease-in-out;
font-weight: 600;
text-transform: uppercase;
color: #ffffff;
z-index: 2;
}
.page_image_link:hover .page_image_title {
display: none;
}
.page_image_filter {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background-color: rgba(0, 0, 0, 0.2);
transition: all 0.4s ease-in-out;
z-index: 1;
}
.page_image_link:hover .page_image_filter {
background-color: rgba(0, 0, 0, 0.0);
}
/* CONTACT DETAILS BLOCKS */
.contact_block_holder {
width: calc(100% - 10px);
height: auto;
padding: 0;
margin: 10px 5px;
position: relative;
clear: none;
float: left;
display: table;
}
.contact_block_info {
width: calc(100% - 36px - 10px);
height: auto;
padding: 0 0 0 10px;
display: table-cell;
vertical-align: top;
}
.contact_block_description {
width: 100%;
height: auto;
padding: 0 0 4px 0;
margin: 0;
clear: both;
display: table;
font-size: 1.0em;
font-weight: 600;
color: #363636;
line-height: 1.0em;
}
@media screen and (max-width: 767px) {
.contact_block_description {
font-size: 0.9em;
}
}
.contact_block_content {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: both;
display: table;
font-size: 0.9em;
font-weight: 500;
color: #000000;
}
@media screen and (max-width: 767px) {
.contact_block_content {
font-size: 0.8em;
}
}
.contact_block_content a,
.contact_block_content a:visited {
color: #000000;
text-decoration: none;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.contact_block_content a:hover,
.contact_block_content a:visited:hover {
color: #000000;
text-decoration: underline;
}
.contact_block_icon {
width: 36px;
height: auto;
padding: 0;
display: table-cell;
vertical-align: top;
font-family: 'FontAwesome', sans-serif;
}
.contact_block_icon .fas {
font-size: 25px;
color: #1585b3;
}
/* INSERTS */
.inserts {
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover !important;
clear: both;
display: table;
height: auto;
margin: 5px auto 0 auto;
padding: 50px 5%;
position: relative;
width: calc(100% - 10%);
overflow: hidden;
}
@media screen and (max-width: 767px) {
.inserts {
padding: 30px 5%;
}
}
@media screen and (max-width: 560px) {
.inserts {
background-image: none !important;
background-color: #196188 !important;
}
}
.insert_header {
clear: both;
color: #ffffff;
display: table;
font-size: 3.0em;
font-weight: 700;
line-height: 1.1em;
height: auto;
margin: 0 auto;
padding: 0 0 10px 0;
position: relative;
text-align: center;
width: 100%;
}
@media screen and (max-width: 1200px) {
.insert_header {
font-size: 2.8em;
}
}
@media screen and (max-width: 1080px) {
.insert_header {
font-size: 2.5em;
}
}
@media screen and (max-width: 767px) {
.insert_header {
font-size: 2.2em;
}
}
@media screen and (max-width: 560px) {
.insert_header {
font-size: 1.8em;
}
}
@media screen and (max-width: 440px) {
.insert_header {
font-size: 1.5em;
}
}
.insert_description {
clear: both;
color: #ffffff;
display: table;
font-size: 1.2em;
line-height: 1.4em;
font-weight: 600;
height: auto;
margin: 0 auto;
padding: 0 0 15px 0;
position: relative;
text-align: center;
width: 100%;
}
@media screen and (max-width: 1080px) {
.insert_description {
font-size: 1.1em;
}
}
@media screen and (max-width: 767px) {
.insert_description {
font-size: 1.0em;
}
}
.insert_button {
clear: both;
display: table;
height: auto;
margin: 10px auto;
padding: 0;
position: relative;
width: auto;
display: table;
}
.insert_button a,
.insert_button a:visited {
border: 2px solid #ffffff;
border-radius: 4px;
clear: both;
color: #ffffff;
display: table;
font-family: 'Montserrat', sans-serif;
font-size: 1.2em;
height: auto;
margin: 0 auto;
padding: 15px 30px;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
width: auto;
}
@media screen and (max-width: 1080px) {
.insert_button a,
.insert_button a:visited {
font-size: 1.1em;
}
}
@media screen and (max-width: 767px) {
.insert_button a,
.insert_button a:visited {
font-size: 1.0em;
padding: 10px 25px;
}
}
.insert_button a:hover,
.insert_button a:visited:hover {
background-color: #ffffff;
border: 2px solid #ffffff;
color: #525252;
}
/* WHY CHOOSE US? */
.wcu {
width: calc(100% - 60px);
height: auto;
padding: 30px 30px;
margin: 5px auto 0 auto;
position: relative;
clear: both;
display: table;
background-color: #e4e4e4;
overflow: hidden;
}
@media screen and (max-width: 1080px) {
.wcu {
width: 100%;
padding: 30px 0;
}
}
@media screen and (max-width: 560px) {
.wcu {
width: calc(100% - 20px);
padding: 30px 10px;
}
}
.wcu_header {
width: 100%;
height: auto;
padding: 0 0 15px 0;
margin: 0 auto;
position: relative;
clear: both;
font-size: 2.0em;
font-weight: 600;
color: #370a25;
text-transform: uppercase;
text-align: center;
}
@media screen and (max-width: 1080px) {
.wcu_header {
font-size: 1.8em;
}
}
@media screen and (max-width: 767px) {
.wcu_header {
font-size: 1.6em;
}
}
@media screen and (max-width: 560px) {
.wcu_header {
font-size: 1.4em;
}
}
.wcu_holder {
width: calc(100% / 3 - 40px);
height: auto;
padding: 0;
margin: 0 20px;
position: relative;
clear: none;
float: left;
}
@media screen and (max-width: 560px) {
.wcu_holder {
width: calc(100% - 20px - 2px);
margin: 0 auto 10px auto;
padding: 10px;
clear: both;
float: none;
border: 1px solid #c4c4c4;
border-radius: 5px;
}
}
.wcu_icon {
width: 80px;
height: 80px;
padding: 0;
margin: 0 auto 15px auto;
position: relative;
clear: both;
text-align: center;
background-attachment: scroll;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
@media screen and (max-width: 1080px) {
.wcu_icon {
width: 60px;
height: 60px;
}
}
@media screen and (max-width: 767px) {
.wcu_icon {
width: 50px;
height: 50px;
}
}
.wcu_title {
width: 100%;
height: 55px;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
font-size: 1.6em;
line-height: 1.0em;
text-transform: uppercase;
color: #252525;
font-weight: 600;
}
@media screen and (max-width: 1080px) {
.wcu_title {
height: 50px;
font-size: 1.5em;
}
}
@media screen and (max-width: 767px) {
.wcu_title {
height: 40px;
font-size: 1.2em;
}
}
@media screen and (max-width: 560px) {
.wcu_title {
height: auto;
padding: 0 0 15px 0
}
}
.wcu_description {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
font-size: 0.8em;
text-align: center;
line-height: 1.3em;
font-weight: 600;
color: #525252;
}
/* POOLS */
.pools {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
display: table;
}
.pool_header_title {
width: 100%;
height: auto;
padding: 0 0 10px 0;
margin: 0 auto;
position: relative;
clear: both;
display: table;
text-align: center;
font-size: 2.2em;
font-weight: 600;
}
@media screen and (max-width: 1080px) {
.pool_header_title {
font-size: 2.0em;
}
}
@media screen and (max-width: 767px) {
.pool_header_title {
font-size: 1.8em;
}
}
@media screen and (max-width: 560px) {
.pool_header_title {
font-size: 1.6em;
}
}
.pools_outer {
width: 100%;
height: auto;
padding: 0 0 40px 0;
margin: 0 auto;
position: relative;
clear: both;
display: table;
}
.pool_holder {
width: calc(100% / 4 - 20px - 10px - 2px);
height: auto;
padding: 10px;
margin: 5px;
position: relative;
clear: none;
float: left;
border: 1px solid #c4c4c4;
border-radius: 5px;
}
@media screen and (max-width: 1200px) {
.pool_holder {
width: calc(100% / 3 - 20px - 10px - 2px);
}
}
@media screen and (max-width: 767px) {
.pool_holder {
width: calc(100% / 2 - 20px - 10px - 2px);
}
}
@media screen and (max-width: 560px) {
.pool_holder {
width: calc(100% / 1 - 20px - 10px - 2px);
}
}
.pool_photo {
width: 100%;
height: auto;
padding-bottom: 60%;
margin: 0 auto 10px auto;
position: relative;
clear: both;
background-attachment: scroll;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
border-radius: 3px;
}
.pool_info {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
display: table;
}
.pool_name {
width: 100%;
height: 50px;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
font-size: 1.4em;
text-transform: uppercase;
color: #196188;
line-height: 1.1em;
}
.pool_price {
width: 100%;
height: auto;
padding: 0 0 10px 0;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
font-size: 1.1em;
color: #ff0000;
text-transform: uppercase;
}
.pool_specs {
width: 100%;
height: auto;
padding: 0 0 10px 0;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
font-size: 0.8em;
color: #525252;
font-weight: 600;
}
.pool_button {
width: 100%;
height: auto;
padding: 10px 0;
margin: 0 auto;
position: relative;
clear: both;
display: table;
background-color: #1585b3;
text-transform: uppercase;
color: #ffffff;
text-align: center;
font-size: 0.9em;
text-decoration: none;
transition: all 0.3s ease-in-out;
border-radius: 3px;
}
.pool_button:hover {
background-color: #196188;
}
/* LOGO SLIDER */
.logo_slider {
background-color: #ffffff;
clear: both;
display: table;
height: auto;
margin: 5px auto 0 auto;
padding: 10px 0;
position: relative;
width: 100%;
overflow: hidden;
border-top: 2px solid #c4c4c4;
border-bottom: 2px solid #c4c4c4;
}
/* MAP */
.mapouter {
text-align: right;
width: 100%;
height: auto;
padding: 0;
margin: 5px auto 0 auto;
position: relative;
clear: both;
overflow: hidden;
}
.gmap_canvas {
background: none !important;
overflow: hidden;
width: 100%;
}
/* FOOTER */
.footer {
background-color: #252525;
clear: both;
display: table;
height: auto;
margin: 5px auto 0 auto;
padding: 20px 50px 110px 50px;
position: relative;
width: calc(100% - 100px);
overflow: hidden;
}
@media screen and (max-width: 1080px) {
.footer {
width: calc(100% - 40px);
padding: 20px 20px 110px 20px;
}
}
@media screen and (max-width: 767px) {
.footer {
width: calc(100% - 20px);
padding: 20px 10px 90px 10px;
}
}
@media screen and (max-width: 560px) {
.footer {
padding: 20px 10px 70px 10px;
}
}
.footer_sitemap {
width: 100%;
height: auto;
padding: 30px 0;
margin: 0 auto;
position: relative;
clear: both;
display: table;
}
.footer_sitemap_holder {
width: calc(100% / 3 - 40px);
height: auto;
padding: 0 20px;
margin: 0 auto;
position: relative;
clear: none;
float: left;
color: #ffffff;
}
@media screen and (max-width: 1080px) {
.footer_sitemap_holder {
width: calc(100% / 1 - 40px);
clear: both;
float: none;
padding: 0 0 20px 0;
}
}
.footer_sitemap_holder:nth-child(1) {
text-align: left;
}
@media screen and (max-width: 1080px) {
.footer_sitemap_holder:nth-child(1) {
text-align: center;
}
}
.footer_sitemap_holder:nth-child(2) {
text-align: center;
}
@media screen and (max-width: 1080px) {
.footer_sitemap_holder:nth-child(2) {
text-align: center;
}
}
.footer_sitemap_holder:nth-child(3) {
text-align: right;
}
@media screen and (max-width: 1080px) {
.footer_sitemap_holder:nth-child(3) {
text-align: center;
}
}
.footer_sitemap_header {
width: 100%;
height: auto;
padding: 0 0 5px 0;
margin: 0;
position: relative;
clear: both;
font-size: 1.0em;
color: #ffffff;
text-transform: uppercase;
font-weight: 600;
}
@media screen and (max-width: 560px) {
.footer_sitemap_header {
font-size: 0.9em;
}
}
.footer_sitemap_holder ul {
padding: 0;
margin: 0;
}
.footer_sitemap_holder ul li {
padding: 2px 0;
margin: 0;
list-style: none;
font-size: 0.8em;
}
@media screen and (max-width: 560px) {
.footer_sitemap_holder ul li {
font-size: 0.7em;
}
}
.footer_sitemap_holder ul li a,
.footer_sitemap_holder ul li a:visited {
color: #ffffff;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
.footer_sitemap_holder ul li a:hover,
.footer_sitemap_holder ul li a:visited:hover {
color: #c4c4c4;
}
.footer_sitemap_group {
width: 100%;
height: auto;
padding: 0;
margin: 0 0 20px 0;
position: relative;
clear: both;
font-size: 0.9em;
}
@media screen and (max-width: 1080px) {
.footer_sitemap_group {
margin: 0;
}
}
@media screen and (max-width: 560px) {
.footer_sitemap_group {
font-size: 0.8em;
}
}
.footer_sitemap_group a,
.footer_sitemap_group a:visited {
color: #ffffff;
text-decoration: none;
}
.footer_sitemap_group a:hover,
.footer_sitemap_group a:visited:hover {
color: #c4c4c4;
text-decoration: none;
}
.footer_sitemap_group_spaced {
padding: 15px 0 0 0;
}
.footer_socials {
display: table;
height: auto;
margin: 0 auto;
padding: 0;
position: relative;
text-align: center;
white-space: nowrap;
width: 100%;
font-family: 'FontAwesome', sans-serif;
}
.footer_socials .fab {
border: 1px solid #ffffff;
color: #ffffff;
display: inline-block;
font-size: 18px;
height: 35px;
line-height: 35px;
margin: 0 5px;
padding: 0;
text-align: center;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
width: 35px;
}
.footer_socials .fab:hover {
background-color: #ffffff;
color: #252525;
}
.footer_payment_logo {
width: auto;
height: 40px;
padding: 0;
margin: 0 auto 20px auto;
position: relative;
clear: both;
text-align: center;
display: table;
}
.credentials {
clear: both;
color: #ffffff;
display: table;
font-family: 'Montserrat', sans-serif;
font-size: 0.8em;
font-weight: 400;
height: auto;
margin: 0 auto;
padding: 0 0 5px 0;
position: relative;
text-align: center;
width: 100%;
}
.credits {
clear: both;
color: #ffffff;
display: table;
font-family: 'Montserrat', sans-serif;
font-size: 0.8em;
font-weight: 400;
height: auto;
margin: 0 auto;
padding: 0;
position: relative;
text-align: center;
width: 100%;
}
.credits a,
.credits a:visited {
color: #c4c4c4;
text-decoration: none;
}
.credits a:hover,
.credits a:visited:hover {
color: #ffffff;
text-decoration: underline;
}
/* WHATSAPP BUTTON */
.whatsapp_button {
width: auto;
padding: 0;
margin: 0;
position: fixed;
bottom: 10px;
right: 10px;
z-index: 1002;
}
.whatsapp_button img {
width: auto;
height: 90px;
display: block;
transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
.whatsapp_button img {
height: 70px !important;
}
}
@media screen and (max-width: 560px) {
.whatsapp_button img {
height: 50px !important;
}
}
.whatsapp_popup {
width: auto;
white-space: nowrap;
height: auto;
padding: 5px 10px;
margin: 0 0 5px 0;
position: absolute;
bottom: 100%;
right: 0;
z-index: 5;
background-color: #ffffff;
border: 2px solid #525252;
border-radius: 6px 6px 0 6px;
text-align: center;
font-weight: 500;
font-size: 0.9em;
color: #525252;
opacity: 0.0;
animation: animateWhatsappPopup 1.5s ease-in-out 5.0s 1 forwards;
}
@keyframes animateWhatsappPopup {
0% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
.whatsapp_link:hover img {
transform: scale(1.1, 1.1);
}
/* FAQs */
.faqs {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: both;
display: table;
}
.faq_holder {
width: calc(100% - 20px - 2px);
height: auto;
padding: 5px 10px;
margin: 5px auto;
position: relative;
clear: both;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.faq_question {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: both;
display: table;
}
.faq_question_txt {
width: calc(100% - 10px - 15px);
height: auto;
padding: 0 10px 0 0;
display: table-cell;
vertical-align: middle;
font-size: 1.2em;
font-weight: 600;
color: #252525;
line-height: 1.2em;
}
@media screen and (max-width: 1080px) {
.faq_question_txt {
font-size: 1.1em;
}
}
@media screen and (max-width: 560px) {
.faq_question_txt {
font-size: 1.0em;
}
}
.faq_question_btn {
width: 15px;
height: auto;
padding: 0;
display: table-cell;
vertical-align: middle;
}
.faq_question_btn .fa {
font-size: 22px;
color: #1585b3;
margin: 5px 0 0 0;
cursor: pointer;
}
.faq_question_btn .fa:hover {
color: #196188;
}
.faq_answer {
width: 100%;
height: auto;
padding: 10px 0 10px 0;
margin: 0;
position: relative;
clear: both;
text-align: justify;
line-height: 1.4em;
display: none;
}
/* PHOTO GALLERY */
.album_gallery,
.photo_gallery {
clear: both;
display: table;
height: auto;
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
}
.album_header_name {
width: calc(100% - 20px - 2px);
height: auto;
padding: 5px 10px;
margin: 0 auto 2px auto;
position: relative;
clear: both;
background-color: #252525;
color: #ffffff;
text-align: center;
font-size: 0.9em;
text-transform: uppercase;
font-family: 'FontAwesome', 'Montserrat', sans-serif;
line-height: 1.0em;
}
.album_header_name a,
.album_header_name a:visited {
color: #ffffff;
text-decoration: none;
}
.album_header_name a:hover,
.album_header_name a:visited:hover {
color: #ffffff;
text-decoration: underline;
}
.album_holder {
background-attachment: scroll;
background-color: #eeeeee;
background-repeat: no-repeat;
background-size: cover !important;
clear: none;
display: table;
float: left;
height: auto;
margin: 2px;
overflow: hidden;
padding-bottom: calc(100% / 3 - 4px);
position: relative;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
width: calc(100% / 3 - 4px);
}
@media screen and (max-width: 1080px) {
.album_holder {
padding-bottom: calc(100% / 2 - 4px);
width: calc(100% / 2 - 4px);
}
}
.album_holder_stretch_1 {
padding-bottom: calc(100% / 3 - 4px);
width: calc(100% / 3 - 4px);
}
@media screen and (max-width: 560px) {
.album_holder_stretch_1 {
padding-bottom: calc(100% / 1 - 4px);
width: calc(100% / 1 - 4px);
}
}
.album_holder_stretch_2 {
padding-bottom: calc(100% / 3 - 4px);
width: calc(100% / 3 * 2 - 4px);
}
@media screen and (max-width: 560px) {
.album_holder_stretch_2 {
padding-bottom: calc(100% / 1 - 4px);
width: calc(100% / 1 - 4px);
}
}
.album_holder_stretch_3 {
padding-bottom: calc(100% / 3 - 4px);
width: calc(100% / 3 * 3 - 4px);
}
@media screen and (max-width: 560px) {
.album_holder_stretch_3 {
padding-bottom: calc(100% / 1 - 4px);
width: calc(100% / 1 - 4px);
}
}
.album_title {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
height: 20px;
left: 0;
margin: 0 auto;
padding: 5px 10px;
font-size: 0.9em;
position: absolute;
right: 0;
text-align: center;
text-transform: uppercase;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
width: calc(100% - 20px);
}
.album_holder:hover .album_title {
height: calc(100% - 10px);
}
.album_icon {
color: #1585b3;
display: none;
font-size: 50px;
height: auto;
margin: 0 auto;
padding: 0;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out;
-o-transition: opacity 0.6s ease-in-out;
-webkit-transition: opacity 0.6s ease-in-out;
width: 100%;
z-index: 3;
font-family: 'FontAwesome', sans-serif;
}
.album_holder:hover .album_icon {
display: table;
opacity: 1.0;
}
.album_button {
clear: both;
display: table;
height: auto;
margin: 0 auto;
padding: 40px 0 20px 0;
position: relative;
text-align: center;
width: auto;
}
.album_button a,
.album_button a:visited {
border: 1px solid #AFB374;
color: #AFB374;
font-family: 'FontAwesome', 'Montserrat', sans-serif;
font-size: 1.2em;
margin: 0 auto;
padding: 10px 20px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.album_button a:hover,
.album_button a:visited:hover {
border: 1px solid #4e502e;
color: #4e502e;
}
/* VIDEO GALLERY */
.video_gallery {
background-color: #ffffff;
clear: both;
display: table;
height: auto;
margin: 0 auto;
padding: 5px 0 0 0;
position: relative;
width: 100%;
}
.video_gallery_holder {
background-color: #eeeeee;
clear: none;
display: table;
float: left;
height: 100%;
margin: 10px;
overflow: hidden;
padding-bottom: calc(100% / 4 - 20px);
position: relative;
width: calc(100% / 2 - 20px);
}
@media screen and (max-width: 767px) {
.video_gallery_holder {
clear: both;
float: none;
padding-bottom: calc(100% / 2 - 20px);
width: calc(100% / 1 - 20px);
}
}
.resp_iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
/* DELIVERY/SHIPPING RATES */
.courier_charges {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: both;
display: table;
}
.courier_charge_holder {
width: calc(100% - 2px);
height: auto;
padding: 0;
margin: 10px auto;
position: relative;
clear: both;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.courier_charge_header {
width: calc(100% - 20px);
height: auto;
padding: 5px 10px 6px 10px;
margin: 0;
position: relative;
clear: both;
background-color: #252525;
font-family: 'Barlow Condensed', serif;
font-size: 1.3em;
color: #ffffff;
text-transform: uppercase;
display: table;
}
@media screen and (max-width: 767px) {
.courier_charge_header {
font-size: 1.2m;
}
}
@media screen and (max-width: 560px) {
.courier_charge_header {
font-size: 1.1em;
}
}
.courier_zone_name {
width: auto;
height: auto;
padding: 0 10px 0 0;
margin: 0;
position: relative;
clear: none;
float: left;
}
@media screen and (max-width: 560px) {
.courier_zone_name {
clear: both;
float: none;
font-size: 1.1em;
}
}
.courier_zone_cost {
width: auto;
height: auto;
padding: 0 0 0 10px;
margin: 0;
position: relative;
clear: none;
float: right;
text-align: right;
}
@media screen and (max-width: 560px) {
.courier_zone_cost {
float: none;
clear: both;
text-align: left;
padding: 0;
font-size: 1.0em;
}
}
.courier_zone_info {
width: calc(100% - 20px);
height: auto;
padding: 10px;
margin: 0;
position: relative;
clear: both;
font-weight: 700;
font-size: 1.0em;
text-align: justify;
line-height: 1.3em;
}
@media screen and (max-width: 560px) {
.courier_zone_info {
font-size: 0.9em;
}
}
.courier_zone_tracking_link {
width: auto;
height: auto;
padding: 10px;
margin: 0;
position: relative;
clear: both;
border: 2px solid #525252;
text-align: center;
font-size: 1.1em;
border-radius: 5px;
}
.courier_zone_tracking_link a,
.courier_zone_tracking_link a:visited {
color: #525252;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
.courier_zone_tracking_link a:hover,
.courier_zone_tracking_link a:visited:hover {
color: #000000;
}
/* ADDRESSES */
.address_holder {
width: calc(100% - 20px - 2px);
height: auto;
padding: 10px;
margin: 10px auto;
position: relative;
clear: both;
display: table;
border: 1px solid rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
}
.address_holder:hover {
border: 1px solid rgba(0, 0, 0, 0.4)
}
.address_info {
width: calc(100% - 150px);
padding: 0 10px 0 0;
margin: 0;
position: relative;
clear: none;
float: left;
}
@media screen and (max-width: 767px) {
.address_info {
width: 100%;
float: none;
clear: both;
}
}
.address_buttons {
width: 140px;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: none;
float: right;
text-align: right;
}
@media screen and (max-width: 767px) {
.address_buttons {
width: 100%;
clear: both;
float: left;
margin: 10px 0 0 0;
}
}
.address_buttons a,
.address_buttons a:visited {
width: 40px;
height: 40px;
line-height: 40px;
padding: 0;
margin: 0 0 0 5px;
background-color: #252525;
float: right;
clear: none;
color: #ffffff;
text-align: center;
font-size: 18px;
transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
.address_buttons a,
.address_buttons a:visited {
float: left;
margin: 0 5px 0 0;
}
}
.address_buttons a:hover,
.address_buttons a:visited:hover {
background-color: #000000;
}
.button_inline {
width: 40px;
height: 40px;
border: 0;
background-color: #252525;
color: #ffffff;
font-family: 'FontAwesome', 'Barlow', serif;
font-size: 18px;
float: right;
cursor: pointer;
margin: 0 0 0 5px;
transition: all 0.3s ease-in-out;
}
.button_inline_bull {
background-image: url('../images/bullseye_icon.png');
background-attachment: scroll;
background-repeat: no-repeat;
-webkit-background-size: auto 60%;
background-size: auto 60%;
background-position: center center;
}
.button_inline_cross {
background-image: url('../images/close_icon.png');
background-attachment: scroll;
background-repeat: no-repeat;
-webkit-background-size: auto 60%;
background-size: auto 60%;
background-position: center center;
}
@media screen and (max-width: 767px) {
.button_inline {
float: left;
margin: 0 5px 0 0;
}
}
.button_inline:hover {
background-color: #000000;
}
/* CART SUMMARY */
.cart_table {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
display: table;
}
.cart_table table {
width: 100%;
}
.cart_table table tr:nth-child(even) {
background-color: #e9e9e9;
}
.cart_table table tr:nth-child(odd) {
background-color: #f4f4f4;
}
.cart_table table tr:hover {
background-color: #fff;
}
.cart_table .table_tr_rightalign {
text-align: right;
}
.cart_table .table_tr_bold {
font-weight: 600;
}
.cart_table .table_tr_darkestbg {
background-color: #000000;
}
.cart_table table tr th {
text-align: left;
padding: 5px;
text-transform: uppercase;
font-size: 0.9em;
}
@media screen and (max-width: 560px) {
.cart_table table tr th {
font-size: 0.8em;
}
}
.cart_table table tr td {
text-align: left;
padding: 5px;
font-size: 0.9em;
}
@media screen and (max-width: 560px) {
.cart_table table tr td {
font-size: 0.8em;
}
}
.cart_table .delete_cart_btn {
width: 30px;
height: 30px;
line-height: 30px;
padding: 0;
margin: 0;
background-color: #ff0000;
border: 0;
border-radius: 50%;
background-image: url('../images/close_icon.png');
background-attachment: scroll;
background-repeat: no-repeat;
background-size: auto 20px;
background-position: center center;
transition: all 0.3s ease-in-out;
}
.cart_table .delete_cart_btn:hover {
transform: rotate(180deg);
background-color: #9b0000;
}
.cart_table .cart_table_product_link {
text-decoration: none;
color: #252525;
font-weight: 600;
transition: all 0.3s ease-in-out;
}
.cart_table .cart_table_product_link:hover {
color: #000000;
}
.cart_table .product_table_options {
padding: 2px 0 0 0;
color: #525252;
}
.cart_table .update_scart {
width: 100%;
height: 30px;
padding: 5px;
margin: 0;
position: relative;
clear: both;
background-color: #252525;
}
@media screen and (max-width: 560px) {
.cart_table .update_scart {
margin: 5px 0 0 0;
}
}
.cart_table .update_scart input[type="number"] {
width: calc(100% - 30px - 20px);
height: 20px;
padding: 5px 10px;
margin: 0;
border: 0;
position: relative;
clear: none;
float: left;
font-size: 1.0em;
font-weight: 600;
}
.cart_table .update_scart input[type="submit"] {
width: 30px;
height: 30px;
padding: 0;
margin: 0;
position: relative;
clear: none;
float: right;
background-color: #1585b3;
border: 0;
background-image: url('../images/cart_plus_icon.png');
background-attachment: scroll;
background-size: auto 20px;
background-repeat: no-repeat;
background-position: center center;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.cart_table .update_scart input[type="submit"]:hover {
background-color: #196188;
}
.cart_table .product_table_price {
font-weight: 700;
}
.product_table_total {
background-color: #252525;
color: #ffffff;
font-weight: 700;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.product_table_total2 {
width: calc(100% - 10px);
height: auto;
padding: 5px;
margin: 0;
position: relative;
clear: both;
background-color: #252525;
color: #ffffff;
font-size: 0.9em;
text-align: right;
font-weight: 600;
}
@media screen and (max-width: 560px) {
.product_table_total2 {
font-size: 0.8em;
}
}
.co_btn {
width: auto;
height: auto;
padding: 10px 15px 10px 35px;
margin: 10px 0 10px 10px;
position: relative;
clear: none;
float: right;
display: table;
background-color: #525252;
color: #ffffff;
text-align: center;
text-decoration: none;
font-size: 0.9em;
line-height: 1.0em;
text-transform: uppercase;
font-weight: 600;
border-radius: 5px;
transition: all 0.3s ease-in-out;
background-attachment: scroll;
background-repeat: no-repeat;
background-position: left 10px center;
background-size: auto 20px;
border: 0;
cursor: pointer;
}
@media screen and (max-width: 560px) {
.co_btn {
padding: 10px 10px 10px 25px;
margin: 10px 0;
clear: both;
float: none;
font-size: 0.8em;
width: 100%;
}
}
@media screen and (max-width: 560px) {
.co_btn_link {
width: calc(100% - 35px);
}
}
.co_btn:hover {
background-color: #000000;
}
.co_btn_eft {
background-image: url('../images/refresh_icon.png');
}
.co_btn_payfast {
background-image: url('../images/payfast_icon.png');
}
/* COOKIES NOTICE */
.cookie_notice {
width: calc(100% - 40px);
height: auto;
padding: 20px;
margin: 0 auto;
position: fixed;
bottom: -100%;
left: 0;
right: 0;
z-index: 1200;
background-color: #e8e8e8;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
animation: animateCookieNotice 5.0s ease-in-out 0.0s 1 forwards;
}
@media screen and (max-width: 300px) {
.cookie_notice {
width: 300px;
}
}
@keyframes animateCookieNotice {
0% {
bottom: -100%;
}
100% {
bottom: 0;
}
}
.cookie_notice_header {
width: 100%;
height: auto;
padding: 0 0 5px 0;
margin: 0;
position: relative;
clear: both;
display: table;
font-weight: 600;
color: #525252;
font-size: 1.2em;
}
@media screen and (max-width: 1080px) {
.cookie_notice_header {
font-size: 1.3em;
}
}
@media screen and (max-width: 767px) {
.cookie_notice_header {
font-size: 1.2em;
}
}
@media screen and (max-width: 560px) {
.cookie_notice_header {
font-size: 1.1em;
}
}
.cookie_notice_text {
width: calc(100% - 20px - 100px);
height: auto;
padding: 0 20px 0 0;
display: table-cell;
vertical-align: middle;
font-size: 0.7em;
font-weight: 600;
}
@media screen and (max-width: 560px) {
.cookie_notice_text {
width: calc(100%);
padding: 0 0 10px 0;
display: table;
position: relative;
clear: both;
}
}
.cookie_notice_buttons {
width: 100px;
height: auto;
padding: 0;
display: table-cell;
vertical-align: middle;
white-space: nowrap;
}
@media screen and (max-width: 560px) {
.cookie_notice_buttons {
width: 100%;
display: table;
position: relative;
clear: both;
}
}
.cookie_notice_buttons input[type="submit"] {
width: 100%;
height: auto;
padding: 10px;
margin: 0;
background-color: #1585b3;
border: 0;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 0.8em;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.cookie_notice_buttons input[type="submit"]:hover {
background-color: #196188;
}
/* CHECKOUT PAGE */
.checkout {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: both;
display: table;
}
.page_src_header {
width: 100%;
height: auto;
padding: 0 0 5px 0;
margin: 0;
position: relative;
clear: both;
font-size: 1.4em;
text-transform: uppercase;
font-weight: 600;
}
@media screen and (max-width: 767px) {
.page_src_header {
font-size: 1.2em;
}
}
@media screen and (max-width: 560px) {
.page_src_header {
font-size: 1.1em;
text-align: center;
}
}
.co_holder {
width: calc(100% - 20px - 2px);
height: auto;
padding: 10px;
margin: 0 auto 10px auto;
position: relative;
clear: both;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.co_holder_header {
width: 100%;
height: auto;
padding: 0 0 4px 0;
margin: 0;
position: relative;
clear: both;
font-size: 1.1em;
font-weight: 600;
}
@media screen and (max-width: 767px) {
.co_holder_header {
font-size: 1.0em;
}
}
@media screen and (max-width: 560px) {
.co_holder_header {
font-size: 0.9em;
}
}
.co_holder_inner select {
width: 100%;
height: 40px;
font-size: 1.1em;
padding: 0 10px;
}
@media screen and (max-width: 767px) {
.co_holder_inner select {
font-size: 1.0em;
}
}
@media screen and (max-width: 560px) {
.co_holder_inner select {
font-size: 0.9em;
}
}
/* ORDER CONFIRMATION SCREEN */
.order_confirmation {
width: calc(100% - 20px - 4px);
height: auto;
padding: 10px;
margin: 0;
position: relative;
clear: both;
display: table;
border: 2px solid #525252;
border-radius: 5px;
}
.order_confirmation_no {
width: 100%;
height: auto;
padding: 0 0 10px 0;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
font-size: 1.6em;
text-transform: uppercase;
font-weight: 600;
color: #525252;
}
@media screen and (max-width: 1080px) {
.order_confirmation_no {
font-size: 1.4em;
}
}
@media screen and (max-width: 767px) {
.order_confirmation_no {
font-size: 1.2em;
}
}
@media screen and (max-width: 560px) {
.order_confirmation_no {
font-size: 1.0em;
}
}
.order_confirmation_no a,
.order_confirmation_no a:visited {
color: #525252;
text-decoration: none;
}
.order_confirmation_instructions {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
font-weight: 600;
}
@media screen and (max-width: 767px) {
.order_confirmation_instructions {
font-size: 0.9em;
}
}
.banking_details_holder {
width: auto;
height: auto;
padding: 20px;
margin: 10px auto;
position: relative;
clear: both;
background-color: #efefef;
font-size: 1.0em;
font-weight: 400;
display: table;
text-align: left;
}
@media screen and (max-width: 560px) {
.banking_details_holder {
width: calc(100% - 40px);
font-size: 0.9em;
text-align: center;
}
}
/* NEWSLETTER */
.newsletter {
width: calc(100% - 20px);
height: auto;
padding: 10px;
margin: 5px auto 0 auto;
position: relative;
clear: both;
display: table;
background-color: #252525;
overflow: hidden;
table-layout: fixed;
}
.newsletter_left {
width: calc(50% - 10px);
height: auto;
padding: 0 10px 0 0;
display: table-cell;
vertical-align: middle;
font-size: 2.2em;
text-transform: uppercase;
color: #ffffff;
font-weight: 600;
line-height: 1.0em;
}
@media screen and (max-width: 1200px) {
.newsletter_left {
font-size: 2.0em;
}
}
@media screen and (max-width: 1080px) {
.newsletter_left {
font-size: 1.8em;
}
}
@media screen and (max-width: 767px) {
.newsletter_left {
width: 100%;
padding: 0 0 10px 0;
display: table;
position: relative;
clear: both;
margin: 0 auto;
text-align: center;
}
}
@media screen and (max-width: 560px) {
.newsletter_left {
font-size: 1.6em;
}
}
@media screen and (max-width: 440px) {
.newsletter_left {
font-size: 1.4em;
}
}
@media screen and (max-width: 300px) {
.newsletter_left {
font-size: 1.2em;
}
}
.newsletter_right {
width: calc(50% - 10px);
height: auto;
padding: 0 0 0 10px;
display: table-cell;
vertical-align: middle;
}
@media screen and (max-width: 767px) {
.newsletter_right {
width: 100%;
padding: 0;
display: table;
position: relative;
clear: both;
margin: 0 auto;
}
}
.newsletter input[type="email"] {
width: calc(100% - 20px - 40px);
height: 30px;
padding: 5px 10px;
margin: 0;
position: relative;
clear: none;
float: left;
border: 0;
font-family: 'Barlow', sans-serif;
text-transform: uppercase;
font-weight: 600;
}
.newsletter input[type="submit"] {
width: 40px;
height: 40px;
padding: 0;
margin: 0;
position: relative;
clear: none;
float: right;
background-color: #196188;
font-family: 'Font Awesome 5 Free', 'Barlow', sans-serif;
font-size: 18px;
color: #ffffff;
border: 0;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.newsletter input[type="submit"]:hover {
background-color: #11445f;
}
#mce-error-response {
width: 100%;
height: auto;
padding: 5px 0 0 0;
margin: 0;
color: #ff0000 !important;
font-size: 0.8em;
display: table;
font-weight: 600;
}
#mce-success-response {
width: 100%;
height: auto;
padding: 5px 0 0 0;
margin: 0;
color: #808040 !important;
font-size: 0.8em;
display: table;
font-weight: 600;
}
/* INVOICE VIEW AND PRINT */
.print {
width: 200mm;
height: 287mm;
padding: 5mm;
margin: 0 auto;
position: relative;
clear: both;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.2);
}
@media print {
.print {
border: 0;
}
}
.print_change_status {
width: calc(100% - 20px);
height: auto;
padding: 10px;
margin: 0 auto 10px auto;
position: relative;
clear: both;
display: table;
background-color: red;
}
@media print {
.print_change_status {
display: none !important;
margin: 0 auto;
}
}
.print_change_status select {
width: calc(100% - 180px);
height: 40px;
padding: 0 10px;
margin: 0;
position: relative;
clear: none;
float: left;
border: 0;
}
.print_change_status input[type="submit"] {
width: 180px;
height: 40px;
padding: 0;
margin: 0;
position: relative;
clear: none;
float: right;
border: 0;
background-color: #252525;
color: #ffffff;
text-transform: uppercase;
font-weight: 500;
font-size: 1.3em;
}
.invoice_admin_status {
width: auto;
height: auto;
padding: 5px 10px;
margin: 0;
position: absolute;
top: 5mm;
right: 5mm;
background-color: #c4c4c4;
color: #ffffff;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
}
.invoice_header {
width: 100%;
height: auto;
padding: 0 0 10px 0;
margin: 0 auto 10px auto;
position: relative;
clear: both;
border-bottom: 1px solid #c4c4c4;
}
.invoice_logo {
width: 80mm;
height: auto;
padding: 0 0 10px 0;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
}
.logo_invoice {
width: 100%;
height: auto;
display: table;
text-align: center;
margin: 0 auto;
}
.invoice_contacts {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
display: table;
text-align: center;
}
.invoice_contact_holder {
width: auto;
height: auto;
padding: 2px 10px;
margin: 0 auto;
text-align: center;
display: inline-block;
font-weight: 600;
font-size: 14px;
}
.invoice_contact_holder a,
.invoice_contact_holder a:visited {
color: #000000;
text-decoration: none;
}
.invoice_contact_holder_clear {
float: none;
clear: both;
display: block;
}
.invoice_no {
width: 100%;
height: auto;
padding: 0;
margin: 0 0 10px 0;
position: relative;
clear: both;
float: right;
font-size: 22px;
text-align: right;
font-weight: 700;
}
.print table {
width: 100%;
font-size: 14px;
}
.print table tr {
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.print table tr th,
.print table tr td {
padding: 5px 10px;
}
.print table tr th {
text-align: left;
}
.table_right_align {
text-align: right !important;
}
.table_bolder {
font-weight: 600;
}
.table_dark_bg {
background-color: #252525;
color: #ffffff;
}
.invoice_stats {
width: 100%;
height: auto;
padding: 10px 0;
margin: 0 auto;
position: relative;
clear: both;
display: table;
font-size: 14px;
}
.invoice_stat_holder {
width: 100%;
height: auto;
padding: 1px 0;
margin: 0;
position: relative;
clear: both;
}
.invoice_coupon {
width: 100%;
height: auto;
padding: 0;
margin: 10px auto 20px auto;
position: relative;
clear: both;
text-align: center;
font-size: 18px;
font-weight: 700;
}
.invoice_banking {
width: calc(100% - 20px - 2px);
height: auto;
padding: 10px;
margin: 0 0 10px auto;
position: relative;
clear: both;
border: 1px solid rgba(0, 0, 0, 0.2);
font-weight: 700;
font-size: 14px;
}
.invoice_note {
width: 100%;
height: auto;
padding: 10px 0 0 0;
margin: 0 auto;
position: relative;
clear: both;
border-top: 4px solid #525252;
font-weight: 600;
font-size: 14px;
color: #525252;
}
/* ORDER HISTORY LIST */
.cart_table .button_bordered a,
.cart_table .button_bordered a:visited {
width: auto;
height: auto;
padding: 6px 20px;
margin: 0;
position: relative;
border: 2px solid #525252;
text-align: center;
color: #525252;
text-transform: uppercase;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease-in-out;
float: right;
border-radius: 5px;
}
@media screen and (max-width: 767px) {
.cart_table .button_bordered a,
.cart_table .button_bordered a:visited {
padding: 6px 8px;
font-size: 0.8em;
}
}
.cart_table .button_bordered a:hover,
.cart_table .button_bordered a:visited:hover {
background-color: #525252;
color: #ffffff;
}
/* PRODUCT CATALOGUE */
.catalogue {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: both;
display: table;
}
.product_ind_link {
text-decoration: none;
}
.product_holder {
width: calc(100% / 5 - 20px - 20px - 2px);
height: auto;
padding: 10px;
margin: 10px;
position: relative;
clear: none;
float: left;
border: 1px solid rgba(0, 0, 0, 0.1);
background-color: #ffffff;
border-radius: 5px;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 1200px) {
.product_holder {
width: calc(100% / 4 - 20px - 20px - 2px);
}
}
@media screen and (max-width: 1080px) {
.product_holder {
width: calc(100% / 3 - 20px - 20px - 2px);
}
}
@media screen and (max-width: 767px) {
.product_holder {
width: calc(100% / 2 - 20px - 20px - 2px);
}
}
@media screen and (max-width: 560px) {
.product_holder {
width: calc(100% / 1 - 20px - 20px - 2px);
}
}
.product_holder:hover {
background-color: #e4e4e4;
}
.product_flag {
width: 240px;
height: auto;
padding: 6px 0 5px 0;
margin: 0 auto;
position: absolute;
top: 50px;
right: -60px;
z-index: 2;
background-color: #ff0000;
color: #ffffff;
font-size: 0.8em;
font-weight: 700;
text-transform: uppercase;
text-align: center;
line-height: 1.0em;
transform: rotate(45deg);
}
.product_image {
width: 100%;
height: auto;
padding-bottom: 100%;
margin: 0 auto 10px auto;
position: relative;
clear: both;
background-attachment: scroll;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.product_info {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: both;
}
.product_header {
width: 100%;
height: 55px;
padding: 0;
margin: 0;
position: relative;
clear: both;
text-align: center;
font-size: 0.9em;
font-weight: 700;
line-height: 1.1em;
color: #252525;
}
@media screen and (max-width: 560px) {
.product_header {
height: auto;
padding: 0 0 10px 0;
font-size: 1.0em;
}
}
.product_price {
width: 100%;
height: 40px;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
color: #ff0000;
font-weight: 700;
text-align: center;
font-size: 0.9em;
line-height: 1.1em;
}
@media screen and (max-width: 560px) {
.product_price {
height: auto;
padding: 0 0 10px 0;
font-size: 1.0em;
}
}
.product_description {
width: 100%;
height: 60px;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
font-size: 0.8em;
line-height: 1.3em;
color: #525252;
font-weight: 600;
}
@media screen and (max-width: 560px) {
.product_description {
height: auto;
padding: 0 0 10px 0;
font-size: 0.9em;
}
}
.product_category {
width: calc(100% - 20px);
height: 30px;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
color: #252525;
font-size: 0.7em;
text-align: center;
line-height: 1.2em;
}
@media screen and (max-width: 560px) {
.product_category {
height: auto;
}
}
.add_to_wishlist {
width: auto;
height: auto;
padding: 0;
margin: 0;
position: absolute;
top: 15px;
left: 15px;
z-index: 3;
}
.add_to_wishlist input[type="submit"] {
width: 30px;
height: 30px;
background-color: transparent;
border: 0;
padding: 10px;
background-image: url('../images/heart_icon.png');
background-repeat: no-repeat;
background-size: auto 20px;
background-position: center center;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
transition: all 0.3s ease-in-out;
}
.add_to_wishlist input[type="submit"]:hover {
background-color: rgba(0, 0, 0, 1.0);
transform: scale(1.2, 1.2);
}
.delete_wishlist {
width: auto;
height: auto;
padding: 0;
margin: 0;
position: absolute;
top: 20px;
left: 20px;
z-index: 4;
}
.delete_wishlist input[type="submit"] {
width: 30px;
height: 30px;
background-color: transparent;
border: 0;
padding: 10px;
background-image: url('../images/heart_close_icon.png');
background-repeat: no-repeat;
background-size: auto 20px;
background-position: center center;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
transition: all 0.3s ease-in-out;
}
.delete_wishlist input[type="submit"]:hover {
background-color: rgba(0, 0, 0, 1.0);
transform: scale(1.2, 1.2);
}
.product_view_btn {
width: calc(100% - 20px);
height: auto;
padding: 10px;
margin: 5px auto 0 auto;
position: relative;
clear: both;
background-color: #525252;
text-align: center;
display: table;
border-radius: 4px;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
line-height: 1.0em;
font-weight: 700;
transition: all 0.3s ease-in-out;
}
.product_view_btn:hover {
background-color: #252525;
}
/* PRODUCT PAGE */
.product_ind_seo_metadata {
display: none;
}
.products_ind_holder {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: both;
display: table;
}
.products_ind_holder_left {
width: calc(50% - 20px);
height: auto;
padding: 0 20px 0 0;
margin: 0;
position: relative;
clear: none;
float: left;
}
@media screen and (max-width: 1080px) {
.products_ind_holder_left {
width: 100%;
padding: 0 0 20px 0;
clear: both;
float: none;
}
}
.product_ind_name {
width: 100%;
height: auto;
padding: 0 0 10px 0;
margin: 0;
position: relative;
clear: none;
font-size: 1.6em;
font-weight: 700;
color: #525252;
}
@media screen and (max-width: 1080px) {
.product_ind_name {
font-size: 1.4em;
}
}
@media screen and (max-width: 767px) {
.product_ind_name {
font-size: 1.2em;
}
}
.product_ind_description {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: both;
font-size: 1.1em;
font-weight: 600;
}
@media screen and (max-width: 1080px) {
.product_ind_description {
font-size: 1.0em;
}
}
.product_ind_content {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: both;
text-align: justify;
line-height: 1.3em;
}
@media screen and (max-width: 1080px) {
.product_ind_content {
font-size: 0.9em;
}
}
.product_ind_download a,
.product_ind_download a:visited {
width: calc(100% - 40px);
height: auto;
padding: 10px 20px;
margin: 10px 0;
position: relative;
clear: both;
text-decoration: none;
font-weight: 600;
background-color: #1585b3;
border-radius: 5px;
color: #ffffff;
text-transform: uppercase;
display: table;
text-align: center;
font-size: 0.9em;
transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 560px) {
.product_ind_download a,
.product_ind_download a:visited {
width: calc(100% - 20px);
padding: 10px 10px;
font-size: 0.8em;
}
}
.product_ind_download a:hover,
.product_ind_download a:visited:hover {
background-color: #196188;
}
.product_ind_category {
width: calc(100% - 20px - 4px);
height: auto;
padding: 5px 10px;
margin: 10px auto;
position: relative;
clear: both;
border: 2px solid #525252;
border-radius: 5px;
font-size: 0.9em;
color: #525252;
}
.product_ind_price {
width: 100%;
padding: 0;
margin: 0;
position: relative;
clear: both;
font-size: 1.1em;
font-weight: 700;
color: #ff0000;
}
@media screen and (max-width: 767px) {
.product_ind_price {
font-size: 1.0em;
}
}
.ind_product_qty_available {
width: 100%;
height: auto;
padding: 5px 0 0 0;
margin: 0;
position: relative;
clear: both;
color: #c4c4c4;
font-weight: 600;
font-size: 0.9em;
}
.images_chg {
width: 100%;
height: auto;
padding: 10px 0 0 0;
margin: 0;
position: relative;
clear: both;
}
.product_ind_toolbar {
width: calc(100% - 20px);
height: auto;
padding: 10px;
margin: 10px 0;
position: relative;
clear: both;
display: table;
background-color: #252525;
}
.product_ind_toolbar .product_option_holder {
width: calc(50% - 5px);
height: auto;
padding: 0;
position: relative;
clear: none;
float: left;
}
@media screen and (max-width: 560px) {
.product_ind_toolbar .product_option_holder {
width: 100%;
clear: both;
float: none;
}
}
.product_ind_toolbar .product_option_holder:nth-child(2n+1) {
margin: 0 5px 0 0;
}
@media screen and (max-width: 560px) {
.product_ind_toolbar .product_option_holder:nth-child(2n+1) {
margin: 0 0 10px 0;
}
}
.product_ind_toolbar .product_option_holder:nth-child(2n+2) {
margin: 0 0 0 5px;
}
@media screen and (max-width: 560px) {
.product_ind_toolbar .product_option_holder:nth-child(2n+2) {
margin: 0 0 10px 0;
}
}
.product_ind_toolbar .product_option_holder .product_option_tag {
width: 100%;
height: auto;
padding: 0 0 2px 0;
margin: 0;
position: relative;
clear: both;
font-size: 1.0em;
font-weight: 600;
color: #ffffff;
}
.product_ind_toolbar .product_option_holder .product_option_val select {
width: 100%;
height: 40px;
padding: 10px;
margin: 0;
position: relative;
font-size: 1.0em;
border: 0;
}
.product_ind_toolbar input[type="number"] {
width: calc(100% - 20px - 50px);
height: 30px;
padding: 10px;
margin: 0;
border: 0;
float: left;
clear: none;
}
.product_ind_toolbar input[type="submit"] {
width: 50px;
height: 50px;
border: 0;
float: right;
clear: none;
margin: 0;
background-color: #1585b3;
background-image: url('../images/cart_plus_icon.png');
background-attachment: scroll;
background-repeat: no-repeat;
background-size: auto 30px;
background-position: center center;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.product_ind_toolbar input[type="submit"]:hover {
background-color: #196188;
}
.products_ind_holder_right {
width: calc(50% - 20px);
height: auto;
padding: 0 0 0 20px;
margin: 0;
position: relative;
clear: none;
float: right;
}
@media screen and (max-width: 1080px) {
.products_ind_holder_right {
width: 100%;
padding: 0;
clear: both;
float: none;
}
}
.product_gallery {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: both;
}
.product_gallery .add_to_wishlist input[type="submit"],
.product_gallery .delete_wishlist input[type="submit"] {
width: 38px;
height: 38px;
padding: 10px;
margin: 0;
position: absolute;
top: -10px;
left: -10px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
background-size: auto 24px;
background-position: center center;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.product_gallery .add_to_wishlist input[type="submit"] {
z-index: 1 !important;
}
.product_gallery .delete_wishlist input[type="submit"] {
z-index: 4 !important;
}
.product_gallery .add_to_wishlist input[type="submit"]:hover,
.product_gallery .delete_wishlist input[type="submit"]:hover {
background-color: rgba(0, 0, 0, 1.0);
transform: scale(1.2, 1.2);
}
.slider_holder i {
width: auto;
height: auto;
padding: 10px;
margin: 0;
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
font-size: 20px;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
transition: all 0.3s ease-in-out;
}
.slider_holder i:hover {
background-color: rgba(0, 0, 0, 1.0);
transform: scale(1.2, 1.2);
}
/* RELATED PRODUCTS */
.related_products_header {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: both;
text-transform: uppercase;
line-height: 1.0em;
font-size: 1.4em;
color: #525252;
font-weight: 600;
}
@media screen and (max-width: 767px) {
.related_products_header {
font-size: 1.2em;
}
}
@media screen and (max-width: 560px) {
.related_products_header {
font-size: 1.1em;
}
}
.related_products {
width: calc(100% - 20px - 2px);
height: auto;
padding: 10px;
margin: 0;
position: relative;
clear: both;
display: table;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.related_product_link {
text-decoration: none;
}
.related_product_holder {
width: calc(100% - 20px);
height: auto;
padding: 10px;
margin: 10px 0;
position: relative;
clear: both;
background-color: #252525;
color: #ffffff;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.related_product_holder:hover {
transform: scale(1.01, 1.01);
z-index: 2;
}
@media screen and (max-width: 560px) {
.related_product_holder:hover {
transform: scale(1.00, 1.00);
}
}
.related_product_flag {
width: 200px;
height: auto;
padding: 4px 0;
margin: 0;
position: absolute;
left: -60px;
top: 30px;
z-index: 2;
transform: rotate(-45deg);
background-color: #ff0000;
font-size: 0.7em;
text-align: center;
font-weight: 600;
text-transform: uppercase;
}
.related_product_image {
width: 100px;
height: 100px;
padding: 0;
display: table-cell;
vertical-align: middle;
white-space: nowrap;
background-attachment: scroll;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.related_product_info {
width: calc(100% - 100px - 10px);
height: auto;
padding: 0 0 0 10px;
display: table-cell;
vertical-align: middle;
}
.related_product_name {
width: 100%;
height: auto;
padding: 0 0 5px 0;
margin: 0;
position: relative;
clear: both;
font-weight: 600;
font-size: 1.0em;
line-height: 1.1em;
}
.related_product_description {
width: 100%;
height: auto;
padding: 0 0 5px 0;
margin: 0;
position: relative;
clear: both;
font-size: 0.9em;
line-height: 1.2em;
}
.related_product_price {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: both;
font-weight: 600;
color: #ff0000;
}
/* PRODUCT FILTER BAR */
.filter_bar_holder {
width: calc(100% - 20px);
height: auto;
padding: 0;
margin: 0 10px 10px 10px;
position: relative;
clear: both;
display: table;
border-radius: 4px;
}
.filter_bar_holder select {
width: calc(100% - 45px);
height: 45px;
padding: 10px 20px;
margin: 0;
float: right;
clear: none;
border: 0;
background-color: #252525;
color: #ffffff;
font-size: 1.1em;
border-radius: 0 3px 3px 0;
}
.filter_bar_holder input[type="submit"] {
width: 45px;
height: 45px;
border: 0;
background-color: #525252;
color: #ffffff;
background-image: url('../images/filter_icon.png');
background-attachment: scroll;
background-repeat: no-repeat;
background-size: auto 20px;
background-position: center center;
float: left;
clear: none;
transition: all 0.3s ease-in-out;
cursor: pointer;
border-radius: 3px 0 0 3px;
}
.filter_bar_holder input[type="submit"]:hover {
background-color: #252525;
}
/* PRODUCT REVIEWS */
.product_ind_reviews_holder {
width: 300px;
height: auto;
padding: 10px;
margin: 0;
position: fixed;
bottom: 0;
left: 0;
z-index: 1005;
background-color: #252525;
}
.product_ind_total_stars {
width: auto;
height: auto;
padding: 0 0 5px 0;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
}
.product_ind_total_stars img {
width: 150px;
height: auto;
display: block;
text-align: center;
margin: 0 auto;
filter: invert(1.0);
}
.product_ind_reviews_header {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto 10px auto;
position: relative;
clear: both;
text-align: center;
font-size: 0.9em;
font-weight: 600;
color: #ffffff;
}
.product_ind_review_btn {
width: auto;
height: auto;
padding: 10px;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
background-color: #1585b3;
border-radius: 5px;
color: #ffffff;
text-transform: uppercase;
line-height: 1.0em;
font-weight: 600;
font-size: 0.8em;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.product_ind_review_btn:hover {
background-color: #196188;
}
.product_reviews_all {
width: 100%;
height: auto;
padding: 0;
margin: 10px 0 0 0;
position: relative;
clear: both;
display: table;
}
.product_reviews_all_header {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
clear: both;
font-size: 1.6em;
font-weight: 600;
}
@media screen and (max-width: 767px) {
.product_reviews_all_header {
font-size: 1.4em;
}
}
@media screen and (max-width: 560px) {
.product_reviews_all_header {
font-size: 1.2em;
text-align: center;
}
}
.product_review_all_holder {
width: calc(100% - 20px - 2px);
height: auto;
padding: 10px;
margin: 10px auto;
position: relative;
clear: both;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.product_review_all_text {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
line-height: 1.3em;
}
.product_review_all_text i {
color: #c4c4c4;
}
.product_review_all_stars {
width: auto;
height: auto;
padding: 5px 0 0 0;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
}
.product_review_all_stars img {
width: 120px;
}
.product_review_all_name {
width: auto;
height: auto;
padding: 5px 0 0 0;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
font-size: 0.9em;
}
@media screen and (max-width: 560px) {
.product_review_all_name {
font-size: 0.8em;
}
}
.add_review_holder {
width: calc(80% - 40px);
height: auto;
padding: 20px;
margin: 0;
position: fixed;
top: 50%;
transform: translateY(-50%);
left: 10%;
background-color: #252525;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
border-radius: 10px;
z-index: 1100;
}
@media screen and (max-width: 767px) {
.add_review_holder {
width: calc(90% - 20px);
padding: 10px;
left: 5%;
}
}
.add_review_holder_header {
width: 100%;
height: auto;
padding: 0 0 10px 0;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
font-size: 1.6em;
font-weight: 600;
color: #ffffff;
}
@media screen and (max-width: 1080px) {
.add_review_holder_header {
font-size: 1.5em;
}
}
@media screen and (max-width: 767px) {
.add_review_holder_header {
font-size: 1.3em;
}
}
@media screen and (max-width: 560px) {
.add_review_holder_header {
font-size: 1.1em;
}
}
.add_review_holder select {
width: 100%;
height: 50px;
padding: 10px;
margin: 0 0 10px 0;
position: relative;
clear: both;
font-size: 1.1em;
border: 0;
}
@media screen and (max-width: 767px) {
.add_review_holder select {
font-size: 1.0em;
}
}
@media screen and (max-width: 560px) {
.add_review_holder select {
font-size: 0.9em;
}
}
.add_review_holder textarea {
width: calc(100% - 20px);
height: 100px;
padding: 10px;
margin: 0 auto 10px auto;
position: relative;
border: 0;
font-family: 'Montserrat', sans-serif;
font-size: 1.1em;
}
@media screen and (max-width: 767px) {
.add_review_holder textarea {
font-size: 1.0em;
}
}
@media screen and (max-width: 560px) {
.add_review_holder textarea {
font-size: 0.9em;
}
}
.add_review_holder input[type="submit"] {
width: auto;
height: 40px;
padding: 10px 20px;
margin: 0;
position: relative;
clear: both;
float: right;
background-color: #1585b3;
color: #ffffff;
border: 0;
font-size: 1.1em;
text-transform: uppercase;
font-weight: 600;
border-radius: 5px;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.add_review_holder input[type="submit"]:hover {
background-color: #196188;
}
@media screen and (max-width: 560px) {
.add_review_holder input[type="submit"] {
width: 100%;
padding: 10px 10px;
margin: 0 auto;
float: none;
font-size: 1.0em;
}
}
.add_review_close {
width: 40px;
height: 40px;
line-height: 40px;
padding: 0;
margin: 0;
position: absolute;
top: -20px;
right: -20px;
z-index: 2;
background-color: #ffffff;
border-radius: 50%;
text-align: center;
font-size: 20px;
border: 4px solid #252525;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.add_review_close:hover {
transform: rotate(180deg);
}
@media screen and (max-width: 767px) {
.add_review_close {
width: 30px;
height: 30px;
line-height: 30px;
top: -15px;
right: -15px;
font-size: 15px;
}
}
/* FORM STYLING */
::-ms-reveal,
::-ms-clear {
display: none !important;
}
.password_toggle {
position: absolute;
top: 11px;
right: 10px;
font-size: 22px;
color: #2828ff;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.password_toggle:hover {
transform: scale(1.2, 1.2);
}
.form_group {
clear: both;
display: table;
height: auto;
margin: 0 0 15px 0;
padding: 0;
position: relative;
width: 100%;
}
.form_group_full {
clear: both;
display: table;
height: auto;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
.form_group_left {
clear: none;
display: table;
float: left;
height: auto;
margin: 0 2% 0 0;
padding: 0;
position: relative;
width: 48%;
}
@media screen and (max-width: 560px) {
.form_group_left {
clear: both;
float: none;
margin: 0 0 15px;
width: 100%;
}
}
.form_group_right {
clear: none;
display: table;
float: right;
height: auto;
margin: 0 0 0 2%;
padding: 0;
position: relative;
width: 48%;
}
@media screen and (max-width: 560px) {
.form_group_right {
clear: both;
float: none;
margin: 0;
width: 100%;
}
}
.form_group_1_3 {
clear: none;
display: table;
float: left;
height: auto;
margin: 0 2% 0 0;
padding: 0;
position: relative;
width: calc(100% / 3 - 2%);
}
@media screen and (max-width: 560px) {
.form_group_1_3 {
margin: 0 0 25px 0;
width: 100%;
}
}
.form_group_2_3 {
clear: none;
display: table;
float: left;
height: auto;
margin: 0 2% 0 2%;
padding: 0;
position: relative;
width: calc(100% / 3 - 4%);
}
@media screen and (max-width: 560px) {
.form_group_2_3 {
margin: 0 0 25px 0;
padding: 0;
width: 100%;
}
}
.form_group_3_3 {
clear: none;
display: table;
float: right;
height: auto;
margin: 0 0 0 2%;
padding: 0;
position: relative;
width: calc(100% / 3 - 2%);
}
@media screen and (max-width: 560px) {
.form_group_3_3 {
margin: 0 0 25px 0;
width: 100%;
}
}
.form_label {
clear: both;
display: table;
height: auto;
margin: 0;
padding: 0 0 2px 0;
position: relative;
width: 100%;
}
.form_label label {
color: #4d4d4d;
font-family: 'Montserrat', sans-serif;
font-size: 1.0em;
font-weight: 600;
}
.inner_form .form_label label {
font-size: 0.8em;
}
label.error {
color: #ff0000;
font-size: 0.7em;
font-weight: 600;
position: relative;
text-align: right;
float: right;
padding: 2px 0 0 0;
}
.form_field {
clear: both;
display: table;
height: auto;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
.form_field input[type="text"],
.form_field input[type="number"],
.form_field input[type="password"] {
background-color: #ffffff;
border: 1px solid #c4c4c4;
font-family: 'Montserrat', sans-serif;
height: 25px;
margin: 0;
outline: none;
padding: 10px 20px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
width: calc(100% - 40px - 2px);
}
.inner_form .form_field input[type="text"],
.inner_form .form_field input[type="number"],
.inner_form .form_field input[type="password"] {
height: 15px;
padding: 10px 20px;
}
.form_field input[type="text"]:hover,
.form_field input[type="text"]:focus,
.form_field input[type="number"]:hover,
.form_field input[type="number"]:focus,
.form_field input[type="password"]:hover,
.form_field input[type="password"]:focus {
background-color: #f2f2f2;
border: 1px solid #c4c4c4;
}
.form_field select {
background-color: #ffffff;
border: 1px solid #c4c4c4;
font-family: 'Montserrat', sans-serif;
height: 47px;
margin: 0;
outline: none;
padding: 10px 20px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
width: 100%;
}
.inner_form .form_field select {
height: 37px;
}
.form_field select:hover,
.form_field select:focus {
background-color: #f2f2f2;
border: 1px solid #c4c4c4;
}
.form_field textarea {
background-color: #ffffff;
border: 1px solid #c4c4c4;
font-family: 'Montserrat', sans-serif;
height: 125px;
margin: 0;
outline: none;
padding: 10px 20px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
width: calc(100% - 40px - 2px);
}
.inner_form .form_field textarea {
height: 100px;
}
.form_field textarea:hover,
.form_field textarea:focus {
background-color: #f2f2f2;
border: 1px solid #c4c4c4;
}
.form_group_full .enquire_btn {
background-color: #ffffff;
border: 1px solid #AFB374;
clear: none;
color: #AFB374;
cursor: pointer;
float: right;
font-family: 'FontAwesome', 'Montserrat', sans-serif;
font-size: 1.5em;
margin: 0;
padding: 15px 30px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.form_group_full .enquire_btn:hover {
border: 1px solid #4e502e;
color: #4e502e;
}
.form_oneliner_label {
display: table-cell;
height: auto;
padding: 0 2% 0 0;
vertical-align: middle;
width: 48%;
}
.form_oneliner_field {
display: table-cell;
height: auto;
padding: 0 0 0 2%;
vertical-align: middle;
width: 48%;
}
.form_note {
clear: both;
color: #c4c4c4;
display: table;
height: auto;
margin: 4px 0 0 0;
padding: 0;
position: relative;
width: 100%;
font-size: 1.0em;
font-weight: 600;
}
@media screen and (max-width: 560px) {
.form_note {
font-size: 0.9em;
}
}
.form_note_right {
text-align: right;
}
.form_note a,
.form_note a:visited {
text-decoration: none;
transition: all 0.3s ease-in-out;
color: #8000ff;
}
.form_note a:hover,
.form_note a:visited:hover {
color: #380071;
}
.red_asterisk {
color: red;
font-size: 1.0em;
font-weight: 800;
vertical-align: super;
}
.hfield {
display: none;
}
/* PAGING */
.paging_current,
.paging_nonactive,
.paging_link {
border: 2px solid #C4C4C4;
color: #8A8A8A;
display: inline-block;
font-size: 14px;
height: 22px;
line-height: 22px;
margin: 0 2px;
padding: 0;
text-align: center !important;
text-decoration: none;
width: 22px;
font-family: 'FontAwesome', sans-serif;
}
.paging_link {
background-color: transparent;
}
.paging_link:hover {
background-color: #686b3e;
color: #ffffff;
}
.paging_current {
background-color: #AFB374;
color: #ffffff;
}
.paging_nonactive {
background-color: #E1E1E1;
}
.paging_holder {
clear: both;
display: table;
height: auto;
margin: 0 auto;
padding: 10px 0;
position: relative;
width: auto;
}