﻿body { font-family: 'Montserrat', sans-serif; background: #181619; color: #fff; overflow-x: hidden; }

/* GENERAL */
section { width: 100%; overflow: hidden; }
.btn-custom { background: #004b96; color: #fff; text-transform: uppercase; font-weight: bold; padding: .5rem 1.5rem; }
.btn-custom i { margin-left: 8px; }
.btn-custom:hover { color: #fff; background: #06488a; }
.btn-black { background: #0c0c0c; color: #fff; padding: .5rem 1.25rem; }
.btn-black:hover { background: #000; }
.dropdown-menu { background: #000; border: 1px solid #4e555b; }
.dropdown-item { color: #fff; padding: .375rem .75rem; }
.page { padding: 5rem 0; position: relative; }
.page h2 { color: #daad69; margin-bottom: 1.5rem; font-weight: 600; text-transform: uppercase; }
.page h2:first-letter { font-size: 2.8rem; }
.page p { line-height: 1.7; margin-bottom: 1.4rem; }
.hide { display: none; }
a { color: #daad69; }
a:hover { color: #cca160; }
.go-to-top { display: none; position: fixed; bottom: 20px; right: 20px; background: rgba(255,255,255,.3); border: #daad69; border-radius: 50%; padding: 8px 15px; cursor: pointer; }
.go-to-top:hover { background: rgba(255,255,255,.4); }

/* HEADER */
header { background: #181619; }
.logo { width: 100%; max-width: 160px; }
nav { position: fixed; background: #0c0c0c; width: 100vw; height: 100%; top: 90px; left: 0; max-height: calc(100vh - 120px); overflow-y: scroll; }
nav ul { list-style-type: none; margin: 0; padding: 0; }
nav ul li { display: block; text-align: center; }
nav ul li a { position: relative; display: block; padding: 20px 16px; text-decoration: none; color: #fff; font-weight: bold; text-transform: uppercase; }
.lang_mobile { text-align: center; margin: 30px 0; }

header h1 { position: absolute; top: 60px; right: 15px; font-size: .7rem; text-transform: uppercase; color: #daad69; font-weight: bold; }
header .header-section { display: none; }
header .langnav { display: block; }
header .langnav>.btn-secondary.dropdown-toggle { background: none; }
header .cta-contact span { padding-left: 10px; padding-right: 5px; font-weight: bold; }
header .mobile-nav { float: right; border: 1px solid #fff; border-radius: 3px; padding: 3px 5px; margin-top: 15px; cursor: pointer; }

.mobileNavShown header { position: fixed; top: 0; left: 0; width: 100vw; height: 100%; z-index: 10; }

/* FOOTER */
footer { font-size: .85rem; background: #000; padding-top: 1rem; }
footer span { color: #daad69; white-space: pre; }
footer span.sepr { padding: 0 5px; }
footer a { color: #fff; }
footer .telnr, footer .telnr:hover { color: #daad69; text-decoration: none; white-space: pre; }

footer .social-media { margin-bottom: 1rem; }
footer .social-media a { display: inline-block; padding: 10px 14px; margin-right: 4px; background: #181619; border-radius: 50%; }
footer .social-media a i { width: 13px; height: 13px; text-align: center; }
footer .social-media a:hover { text-decoration: none; }
footer .social-media .fb-like { display: inline-block; position: relative; top: 4px; }

/* HOME - Page 0 */
.home { height: 70vh; position: relative; overflow: visible; }
.homevideo { width: 100%; height: 70vh; position: absolute; top: 0; z-index: -1; overflow: hidden; }
.homevideo video { min-height: 100%; min-width: 100%; }
/*.home:after { content: ''; position: relative; display: block; background-image: linear-gradient(to bottom, rgba(255,255,255, 0) 0, #181619 100%); margin-top: -200px; height: 200px; width: 100%; }*/
.homecta { padding-top: 21vh; }
.homecta h3 { font-size: 2.4rem; font-weight: bold; text-transform: uppercase; text-shadow: 1px 1px rgba(0,0,0,.5); }

.startYourAdventure { position: absolute; bottom: -70px; left: calc(50% - 100px); text-align: center; color: #daad69; cursor: pointer; z-index: 2; }
.startYourAdventure span { display: block; }
.startYourAdventure i { position: relative; animation-name: arrowDownAnimation; animation-duration: .8s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease; }

/* IMAGES */
.page1 .page_img { position: relative; bottom: 60px; float: right; /*-webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%); clip-path: polygon(100% 0, 100% 100%, 0 50%);*/ }
.page2 .page_img { float: left; /*-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);*/ margin-bottom: 50px; }
.page4 .page_img { float: none; border-radius: 50%; }

/* Pages */
.page1 { padding: 5rem 0 2rem; }
.page2, .page4 { background: #0c0c0c; }

.page .page_img { width: 100%; margin: 0 auto; display: block; }

.page3 h2, .page3 p { text-align: center; }
.page3 p { margin-bottom: 2.8rem; }
.property { background: #0c0c0c; margin-bottom: 30px; }
.property .property_img { width: 100%; }
.property_info { padding: 15px; }
.property_info h3 { text-transform: uppercase; font-size: 1.6rem; font-weight: 600; margin-bottom: .8rem; }
.property_info h3 span { font-size: .8rem; }
.property_info p { text-align: left; margin-bottom: .8rem; }
.property_info p img { display: inline-block; padding: 0 8px 0 15px; position: relative; top: -3px; }
.property_info p span { font-size: .7rem; padding-left: 3px; }

.properties div[class*="prop_"] { display: none; }
.properties div[class*="prop_0"] { display: block; }

.owl-theme .owl-nav { position: absolute; top: 0; width: 100%; height: 100%; font-size: 3rem; margin: 0; }
.owl-theme .owl-nav [class*=owl-] { position: absolute; height: 100%; margin: 0; transition: all ease .3s; }
.owl-theme .owl-nav [class*=owl-]:hover { background: rgba(0,0,0,.1); }
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev { padding: 5px !important; }
.owl-theme button:focus { outline: none; }
.owl-theme .owl-prev { left: 0; }
.owl-theme .owl-next { right: 0; }
.owl-theme .owl-dots { position: absolute; bottom: 0; width: 100%; }
.owl-theme .owl-dots .owl-dot span { background: rgba(255,255,255,.6); height: 7px; width: 7px; }
.owl-theme .owl-dots .owl-dot:hover span { background: rgba(255,255,255,1); }
.owl-theme .owl-dots .owl-dot.active span { background: rgba(255,255,255,1); height: 10px; width: 10px; }

/* Adembenemend Zuid-Afrika */
.page5 { background-image: url('/imgsite/backgroundimg.jpg'); background-size: cover; min-height: 100vh; }
.page5 h2 { text-align: center; text-shadow: 1px 1px rgba(0,0,0,.5); }
.page5 p { color: #0c0c0c; text-align: center; font-weight: 600; }

.info { filter: drop-shadow(0px 1px 3px #333); display: block; margin-bottom: 30px; text-align: center; }
.info_img { width: 100%; max-width: 435px; height: auto; background-size: cover; -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); filter: brightness(40%); transition: all ease .4s; }
.info_txt { position: absolute; top: 0; width: 100%; height: 100%; padding-top: 50%; text-align: center; text-transform: uppercase; color: #daad69; }
.info_txt i { border: 4px solid #daad69; border-radius: 50%; padding: 8px 11px; font-size: 2rem; margin-bottom: 15px; }
.info_txt h4 { font-weight: 600; font-size: 1.2rem; }

/* Contact */
.page6 { padding: 5rem 0 2rem; }
.page6 h2, .page6 p { text-align: center; }
.contact .form-control[type="text"], .contact .form-control[type="email"] { background: none; border: none; border-bottom: 1px solid #daad69; border-radius: 0; padding: .375rem 0; margin-bottom: 1.5rem; color: #fff; }
.contact .form-control[type="text"]::-webkit-input-placeholder, .contact .form-control[type="text"]::-moz-placeholder, .contact .form-control[type="text"]:-ms-input-placeholder, .contact .form-control[type="text"]:-moz-placeholder, .contact .form-control[type="email"]::-webkit-input-placeholder, .contact .form-control[type="email"]::-moz-placeholder, .contact .form-control[type="email"]:-ms-input-placeholder, .contact .form-control[type="email"]:-moz-placeholder { color: #fff; }
.contact .form-control[type="text"]:focus,.contact .form-control[type="email"]:focus { box-shadow: none; border-bottom-width: 2px; }
.contact p span { color: #daad69; }

.form-check_label { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.form-check_label input { position: absolute; opacity: 0; cursor: pointer; }
.checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; border: 1px solid #daad69; }
.form-check_label:hover input ~ .checkmark { background-color: rgba(218, 173, 105, .1); }
.form-check_label input:checked ~ .checkmark { background-color: #daad69; }
.checkmark:after { content: ""; position: absolute; display: none; }
.form-check_label input:checked ~ .checkmark:after { display: block; }
.form-check_label .checkmark:after { left: 7px; top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

.ads { border-top: 1px solid #fff; margin-top: 50px; padding-top: 15px; }
.ads p { color: #666; }
.ad { text-align: center; margin-bottom: 15px; }
.ad img { border-radius: 50%; width: 50px; height: 50px; margin-right: 20px; }
.ad a { color: #daad69; }

.contact_msg { width: 100%; background: #daad69; text-align: left; padding: 8px 15px; border-radius: 3px; color: #333; }
.contact_err { background: #F44336; }

.trustpilot-widget { margin-top: 50px; }

/* Textpage */
.grid-img { height: 50vh; background-position: center center; background-size: cover; position: relative; }
.grid-img h2 { position: absolute; bottom: 20px; background: rgba(0,0,0,0.5); padding: 6px 12px; text-transform: uppercase; font-size: 2.2rem; font-weight: 600; color: #daad69; }
.umb-grid { margin: 5rem 0; }
.umb-grid img { max-width: 100%; margin-bottom: 3rem; }
.umb-grid h2 { color: #daad69; font-size: 2rem; font-weight: 600; text-transform: uppercase; margin-bottom: 15px; }
.umb-grid h3 { color: #daad69; font-size: 1.6rem; font-weight: 600; text-transform: uppercase; margin-bottom: 15px; }

/* Cookiebar */
.cookiebar { position: fixed; bottom: 0; width: 100%; background: rgba(255,255,255,0.9); padding: 8px; box-shadow: 0 -1px 18px rgba(0,0,0,.2); z-index:9999;}
.cookiebar button, .cookiebar a { float: left; display: inline-block; color: #000; position: relative; top: 5px; }
.cookiebar button { background: #333; color: #fff; }
.cookiebar a { margin-left: 20px; margin-top: 7px; color: #333; }
.cookiebar p { margin: 0; color: #333; }

/*Animations*/
@keyframes arrowDownAnimation {
	from {top: 0px;}
    to {top: 5px;}
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .page .page_img { width: 50%; }

    /* PROPERTY */
    .property { height: 423px; }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
    .cookiebar button { float: right; }
    .cookiebar a { float: right; margin-right: 20px; margin-top: 7px; }

    /* PROPERTY */
    .property { height: 330px; }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    /* PROPERTY */
    .property { height: 382px; }
}

@media (min-width: 1024px) {
    /* HEADER */
    header .header-section { display: block; position: absolute; top: 0; right: 0; padding: 6px; background: #000; color: #fff; }
    header h1 { position: static; text-align: left; font-size: 1rem; padding: 15px 12px; }
    header .btn, header .cta-contact span { font-size: .8rem; }
    header .lang, header .langnav, header .cta-contact { display: inline-block; }
    .mobile-nav { display: none; }
    .navigation { float: right; }
    nav { text-align: right; position: static; width: auto; height: auto; max-height: none; float: right; overflow: auto; margin-top: 5px; }
    nav ul { list-style-type: none; margin: 0; padding: 0; float: right; }
    nav ul li { display: inline-block; }
    nav ul li a { position: relative; display: block; padding: 8px 12px; text-decoration: none; color: #fff; font-weight: bold; font-size: .65rem; text-transform: uppercase; }
    nav ul li a, nav ul li a:after { transition: all .4s; }
    nav ul li a:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 0%; background: #daad69; height: 1px; }
    nav ul li a:hover { text-decoration: none; color: #daad69; }
    nav ul li a:hover:after { width: 50%; }
}

@media (min-width: 1025px) {
    /* Info Zuid-Arika */
    .info_txt i { font-size: 3rem; }
    .info_txt h4 { font-weight: 600; font-size: 1.6rem; width: 80%; margin-left: auto; margin-right: auto; }
    /*.info .info_img { filter: brightness(100%); }
    .info_txt { opacity: 0; transition: all ease .4s; }   
    .info:hover .info_img { filter: brightness(40%); }
    .info:hover .info_txt { opacity: 1; }*/
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
    .page { padding: 8rem 0; }
    .page5 { padding: 5rem 0; }
    .page6 { padding: 8rem 0 3rem; }
    .homecta h3 { font-size: 2.7rem; }

    /* IMAGES */
    .page1 .page_img { position: absolute; top: 4%; right: 0; width: auto; /*-webkit-clip-path: polygon(100% 0, 100% 100%, 0 63%); clip-path: polygon(100% 0, 100% 100%, 0 63%);*/ margin-bottom: 50px; }
    .page2 .page_img { position: absolute; top: 10%; left: -20px; width: auto; /*-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);*/ margin-bottom: 50px; }
    .page4 .page_img { position: absolute; top: 30%; right: -20px; width: auto; border-radius: 50%; margin-bottom: 50px; }

    .page4 { padding-bottom: 10rem; overflow: hidden; }

    /* HEADER */
    header h1 { font-size: 1.6rem; }
    header .btn, header .cta-contact span { font-size: 1rem; }
    nav { margin: 0; }
    nav ul li a { font-size: .8rem; }

    /* PROPERTY */
    .property { height: 343px; }
}

@media (min-width: 1366px) {
    /* HEADER */
    header h1 { padding: 15px 16px; }
    nav ul li a { font-size: .89rem; padding: 8px 16px; }

    /* PROPERTY */
    .property { height: 343px; }
}

@media (min-width: 1490px) {
    /* GENERAL */
    .container { max-width: 1400px; }

    /* HEADER */
    nav ul li a { font-size: 1rem; }

    /* PROPERTY */
    .property { height: 373px; }
}

