@charset "UTF-8";
/* CSS Document */


body {
    margin: 0;
    font-family: 'PT Sans', sans-serif;
    color: #646871;
	text-align: left;
	font-weight: normal;
}

p { font-size: 1rem; line-height: 2rem;}

a { color: #fff; font-weight: bold; text-decoration: none; }

a:hover { text-decoration: underline; }

.navbar {
	padding: 1rem 1rem 1rem 2rem;
}

.navbar-brand {
}

.navbar-toggler {
    padding: .25rem .75rem;
    line-height: 1; 
    background-color: transparent;
    border: 0px solid transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    border-radius: 0rem;
	
	}
	
	.navbar-light .navbar-toggler {
    color:#000;
	}


.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


.nav-link {
	margin: 0 0 0 40px;
	font-size: 1rem;
	padding : 0;
	color: #fff;
	text-align: right;
	
}

.navbar-nav {
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}


.navbar-nav a:hover { color: #FFC400; }

.navbar-light .navbar-nav .nav-link {
	color: #fff;
}


.whitefade { 
	background: url("../img/bg-white-fade.png");
  	background-repeat: repeat-x;
}
	
	
.moving {
  background-image: url(../img/bg-sout-coast-property-header-long.png);
  background-position-x: 50%;
  animation-delay: 0s;
  animation-duration: 45s;
  animation-name: panoramic;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  margin: 0 auto;
  border: 0;
  will-change: background-position-x;
  background-size: auto 100%;
}

@keyframes panoramic {
  0% {
    background-position-x: 0%;
  }

  100% {
    background-position-x: 100%;
  }
}


.intro a {
	color: #646871;
}

.bgblack { background-color: rgba(0,0,0,0.5);}

.space2 { padding-top: 7%;}

.space3 { padding-top: 40px; padding-bottom: 60px }

.spacehead {padding-left: 120px; padding-top: 16%; }



.svg { background-size: contain; }

.blue { background-color: #123C7C; }


.container-fluid {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}

.whiteline { border-top: solid #fff 1px;}


footer a { color: #fff; }

footer a:hover { color: #fff; text-decoration: underline; }

footer p { color: #fff; font-size: 0.7rem; margin-bottom: 0.3rem; }

footer img {  }

.copyright { font-size: 0.8rem;}

.copyright a { color: #fff; }

.copyright a:hover { color: #fff; text-decoration: underline; }


.custom-btn {
  background-color: #123C7C;
  color: #fff;
  border: none;
  padding: 20px 30px;
  border-radius: 40px;
  text-decoration: none; /* removes underline */
}

.custom-btn:hover {
  background-color: #0f3268; /* slightly darker on hover */
  color: #fff;
}



/*  Hover Over */

.wrapper {
	
	width: 100%; 
	display: flex;
	justify-content: center;
	align-items: center;
}

.image {
	width: 100%;
	position: relative;
}

img {
	
}



.content {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	opacity: 0;
	transition: 0.6s;
}

.content:hover {
	opacity: 1;
}

.content h5 {
	color: #fff;
	margin-bottom: 10px;
}

.content p {
	width: 80%;		
	color: #fff;
}

.content > * {
	transform: translateY(25px);
	transition: transform 0.6s;
}

.content:hover > * {
	transform: translateY(0px);
}




/*  Colours  */

.white { color: #fff; }



/*  Fonts  */

h1 { font-family: 'Libre Baskerville', serif; color: #fff; font-size: 3.4rem; font-style: italic;  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);  font-weight: 400; }

h2 { font-family: 'Libre Baskerville', serif; color: #123C7C; font-size: 3.4rem; font-style: italic; font-weight: 400; }

h3 { font-family: 'Libre Baskerville', serif; color: #123C7C; font-size: 1.8rem; font-weight: normal; }

h4 { font-family: 'PT Sans', sans-serif; color: #fff; font-size: 1.2rem; font-style: italic;  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);  font-weight: 400; }

h5 { font-family: 'Libre Baskerville', serif; font-size: 2rem; font-weight: 400; }

h6 { font-family: 'Libre Baskerville', serif; color: #fff; font-size: 1rem; font-weight: 400; }


.bold { font-weight: bold;}




/** fadeInLeft **/

@-webkit-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
@-moz-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
@keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-100px);
        -moz-transform: translatex(-100px);
        -o-transform: translatex(-100px);
        transform: translatex(-100px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
.in-left {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-duration:1s;
    animation-delay: 1s;
}







/* Large desktops and laptops */
@media (min-width: 1200px) {
	
	

}


/* Narrow desktops and laptops */
@media (max-height: 800px) {
	
	

}


/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
	

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

	
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

	
	.space2 { padding-top: 10%;}


}

/* Portrait phones and smaller */
@media (max-width: 480px) {
	
		
	h1 { font-size: 4rem; }

	h2 { font-size: 2rem;}

	h3 { font-size: 1.4rem;}

	h4 { font-size: 2rem; }
	
	h5 { font-size: 2rem; }
	
	.space2 { padding-top: 10%;}
	
	.spacehead {padding-left: 20px; padding-top: 35%; }
	
	
	.moving {
	background-image: url(../img/bg-sout-coast-property-header-long.png);
  	width: 100%;
	height: 100vh;
  	overflow: hidden;
  	margin: 0 auto;
  	border: 0;
  	background-size: cover;
  	background-repeat: no-repeat;
  	background-position: center; 
	}
	
	
	.content {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	opacity: 1;
	transition: 0.6s;
}
	
	
	


}