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

body {
	margin: 0 ;
	padding: 0 ;
	font-family: 'Roboto', sans-serif;
}

#scrolltop {
	display: none;
	height: 50px; width: 50px;
	background:#279627;
	text-align: center ;
	position: fixed;
	bottom: 5%; right: 5%;
	box-shadow: 0px 4px 9px rgba(0,0,0,0.2);
	z-index:990;
	opacity: 0.8;
	margin-right: -30px;
}

#scrolltop:hover {
	opacity: 1;
}

#scrolltop i {
	color: #fff;
	font-size:35px;
	line-height:46px;
	transform: rotate(-90deg);
	margin-right: 1px;
}


::selection {
	background: #2980b9 ;
	color: #fff;
}

::-moz-selection {
	background: #2980b9 ;
	color: #fff;
}

h1 { font-size: 40px;}
h2 { font-size: 30px;}
h3 { font-size: 26px;}
h4 { font-size: 22px;}
h5 { font-size: 20px;}
h6 { font-size: 18px;}

h1,h2,h3,h4,h5,h6 {
	color: #333 ;
	font-weight: 700;
}

p {
	font-size: 14px ;
	color: #333;
}

a {
	text-decoration: none ;
	font-size: 14px;
	font-weight: 600;
}

a:link,
a:visited {
	color: #2980b9 ;
}

a:hover,
a:active {
	color: #257099;
}

img {
	vertical-align: bottom ;
	max-width: 100%;
}

.cf::after,
.container::after {
	display: table;
	content: "" ;
	clear: both ;
}

.clear {
	clear: both ;
}

.feedback {
	float: right;
	color: #868686;
	font-size: 14px;
}

.button {
	text-align: center;
}

.wrapper {
	width: 1080px;
	margin: 0 auto;
	padding: 110px 60px;
}

#respmenu {
	display: none;
	float: right;
	color: #fff;
	line-height: 40px;
	font-size: 22px;
	font-weight:500;
}

#respmenu:hover i,
#respmenu:active i {
	color: rgba(255,255,255,0.5);
}


nav {
	height: 60px;
	background: #2980b9;
	position: fixed;
	width: 100%;
	top: 0px;
	transition: all 400ms ease;
	z-index: 999;
}

nav #logo {
	padding: 12px 0;
	margin-left: 12%;
	float: left;
}

nav #logo img {
	height: 35px;
	transition: all 400ms ease;
	max-width: none;
}

nav #nav-bar {
	float: right;
	margin-right: 12%;
}

nav #nav-bar ul {
	margin: 0;
	padding: 0;
	list-style:none;
}

nav #nav-bar ul li {
	float: left;
}

nav #nav-bar ul li a {
	margin: 13px 0px 12px 55px;
	color: #8bc8d6;
	height: 34px ;
	font-weight: 500;
	line-height: 34px;
	display:block; 
	transition: 0.4s all ease; 
}

nav #nav-bar ul li a:link,
nav #nav-bar ul li a:visited {
	color: #cae4ed;
}

nav #nav-bar ul li a:hover,
nav #nav-bar ul li a:active {
	color: #fff;
}

.scrolled-nav {
	height: 40px;
}

.scrolled-nav #logo {
	padding: 8px 0;
}

.scrolled-nav #logo img {
	height: 24px;
}

.scrolled-nav #nav-bar ul li a {
	margin: 9px 0px 8px 35px;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px !important;
}

.active {
	color: #fff !important;
}

#banner {
	background: #000;
	background-image: url(Images/banner-introducing-broker.jpg);
	background-repeat: no-repeat;
	background-position: 20% 50%;
	background-size: cover;
	height: 570px;
	overflow: hidden;
	padding-top: 65px;
}

#banner .banner-content {
	color: #fff;
	width: 560px;
	float: right;
	margin: 90px 18% 0 0;
}

#banner .banner-content h1,
#banner .banner-content p {
	color: #fff;
}

#banner .banner-content p {
	line-height: 24px;
	font-size: 16px;
}


h2 {
	text-align: center;
	margin-bottom: 90px;
}

section {
	background: #f7f7f7;
}

section .box-wrapper {
	width: 360px;
	float: left;
}

section .box {
	width: 360px;
	float: left;
	height: 60px;
	margin: 0 0 60px 0;
}

section .box .box-number,
section .box img,
section .box .box-name {
	display: block;
	float: left;
}

section .box img {
	height: 60px;
	padding-left: 16px;
	border-left: 1px solid #333;
}

section .box .box-number {
	font-size: 50px;
	margin: 0 15px 0 0;
	font-weight: 300;
}

section .box .box-name {
	font-size: 18px;
	margin: 10px 0 0 15px;
}


#contact {
	padding-top: 100px;
	background:#FBFBFB;
}

#contact .wrapper {
	background: #fff;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.14) ;
	padding-top: 50px;
	margin-bottom: -100px;
	position: relative;
	z-index: 5;
}

#contact .contact-left {
	width:420px;
	float: left;
	margin-right: 20px;
}

#contact .contact-right {
	width:640px;
	float: left;
}

#contact .contact-left input {
	width: 405px ;
	height: 50px;
	background: #f9f9f9;
	border: 0;
	border-top: 1px solid #e2e2e2;
	margin-bottom: 20px;
	padding-left: 15px;
	outline: none;
	font-size: 16px;
	font-weight: 500;
	transition: 400ms all ease;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  box-shadow: 0 0 0px 1000px rgba(0,0,0,0.00) inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #9e9e9e;
	font-size: 14px;
	font-weight: 300;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #9e9e9e;
	font-size: 14px;
	font-weight: 300;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #9e9e9e;
	font-size: 14px;
	font-weight: 300;
}
:-moz-placeholder { /* Firefox 18- */
  color: #9e9e9e;
	font-size: 14px;
	font-weight: 300;
}

#contact .contact-right textarea {
	width: 625px ;
	height: 255px;
	background: #f9f9f9;
	border: 0;
	border-top: 1px solid #e2e2e2;
	margin-bottom: 20px;
	padding:15px 0 0 15px;
	outline: none;
	font-size: 16px;
	font-weight: 500;
	transition: 400ms all ease;
	float: left;
}

#contact .contact-left input:focus,
#contact .contact-right textarea:focus {
	border-top: 1px solid #2980b9;
}

#contact .contact-right input {
	height:50px;
	width: 320px;
	background: #2980b9;
	color: #fff;
	border: 0;
	transition: 400ms all ease;
	float: right;
	cursor: pointer;
}

#contact .contact-right input:hover {
	background: #276b91;
}

#contact .g-recaptcha {
	display: block;
	float: left;
}


footer {
	background: #f7f7f7;
	background-image: url(Images/footer-photo.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	padding: 20px 0 20px;
}

footer .wrapper {
	padding-bottom: 0;
}

footer p {
	color: #fff;
}

footer .contact-info  {
	width: 210px;
	margin: 0 0 20px 0;
	overflow: hidden;
	float: left;
}

footer .contact-info:first-of-type  {
	margin-right: 55px;
}

footer .contact-info .contact-content {
	float: left;
	width: 190px;
}

footer .contact-info .contact-content p {
	margin: 3px 0 0 12px;
	opacity: 0.7;
}

footer .fa {
	color: #fff;
	font-size: 18px;
	display: block;
	float: left;
	margin-top:5px;
}

.map {
	float: right;
	margin-bottom: 40px;
}

footer .copy {
	clear: both;
	text-align: center;
	opacity: 0.5;
	font-weight: 200;
}



@media screen and (min-width:1024px) and (max-width:1400px) {
	
	.wrapper {
		width: 880px;
		margin: 0 auto;
		padding: 100px 40px;
	}

	#banner .banner-content {
		margin: 4% 6% 0 0;
		width: 40%;
	}
	
	section .box-wrapper {
		width: 293px;
	}
	
	section .box {
		width: 293px;
		float: left;
	}
	
	section .box img {
		height: 40px;
		padding-left: 12px;
	}

	section .box .box-number {
		font-size: 40px;
		margin: 0 12px 0 0;
	}

	section .box .box-name {
		font-size: 16px;
		margin: 2px 0 0 12px;
	}
	
	#contact .contact-left {
		width:320px;
		float: left;
		margin-right: 20px;
	}

	#contact .contact-right {
		width:515px;
		float: left;
	}

	#contact .contact-left input {
		width: 305px ;
	}
	
	#contact .contact-right textarea {
		width: 500px ;
	}
	
	#contact .contact-right input {
		width: 200px;
	}

	footer .contact-info  {
		float: none;
	}
	
	.map {
		margin-top: 0;
	}
	
}

@media screen and (min-width:768px) and (max-width:1023px) {
	
	.wrapper {
		width: 680px;
		margin: 0 auto;
		padding: 60px 20px;
	}
	
	.feedback {
		float: none;
		text-align: center;
	}

	#banner .banner-content {
		padding: 15px 30px;
		background: rgba(40,44,49,0.8);
		text-align: center;
		margin: 6% auto;
		width: 60%;
		float: none;
	}
	
	section .box-wrapper {
		width: 226px;
	}
	
	section .box {
		width: 226px;
		float: left;
		margin-bottom: 40px;
	}
	
	section .box img {
		height: 24px;
		padding-left: 12px;
	}

	section .box .box-number {
		font-size: 28px;
		margin: -5px 6px 0 0;
	}

	section .box .box-name {
		font-size: 14px;
		margin: -4px 0 0 6px;
	}
	
	#contact .wrapper {
		padding-left:40px;
		padding-right:40px;
	}
	
	#contact .contact-left {
		width:auto;
		float: none;
		margin-right: 0;
	}

	#contact .contact-right {
		width:auto;
		float: none;
	}

	#contact .contact-left input {
		box-sizing: border-box;
		width: 100% ;
		float: none;
	}
	
	#contact .contact-right textarea {
		box-sizing: border-box;
		width: 100% ;
	}
	
	#contact .contact-right input {
		box-sizing: border-box;
		width: 100%;
	}
	
	#contact .g-recaptcha {
		margin-bottom: 20px;
	}
	
	footer .wrapper {
		padding-top: 100px;
	}
	
	footer .contact-info  {
		float: none;
	}
	
	.map {
		margin-top: -185px
	}
	
}



@media screen and (max-width:767px) {
	
	#respmenu {
		display:block;
		float: right;
	}
	
	.wrapper {
		width: auto;
		margin: 0 5%;
		padding: 60px 5%;
	}
	
	.feedback {
		float: none;
		text-align: center;
	}
	
	nav {
		height: auto;
	}
	
	nav #logo {
		float: none;
		width: auto;
		margin: 0 6%;
		height: auto;
		padding: 10px 0;
	}
	
	nav #nav-bar {
		float:none;
		margin-right: 0;
	}
	
	nav #nav-bar ul li {
		float: none;
	}
	
	nav #nav-bar>ul {
		display:none;
	}
	
	nav #nav-bar ul li a {
		text-align: center;
		margin: 10px 0 ;
		height: auto ;
		line-height: 65px;
	}
	
	nav #nav-bar ul li:last-of-type a {
		margin-bottom: 15px ;
	}
	
	#banner {
		height: auto;
		background-image: url(Images/banner-introducing-broker-mobile.jpg);
		background-position: 50% 50%;
	}
	
	#banner .banner-content {
		padding: 15px 30px;
		background: rgba(40,44,49,0.8);
		text-align: center;
		margin: 6% auto;
		width: 60%;
		float: none;
	}
	
	
	#banner .banner-content p {
		line-height: 21px;
		font-size: 15px;
	}
	
	section .box-wrapper {
		float: none;
		margin-left:auto;
		margin-right:auto;
		width: 90%;
	}

	section .box {
		float: none;
		width: 90%;
		margin-bottom: 40px;
		margin-right: 0;
		height: auto;
	}
	
	section .box .box-number,
	section .box img,
	section .box .box-name {
		display: block;
		float: none;
		text-align: center;
	}
	
	section .box img {
		width:100%;
		padding-top: 14px;
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid #333;
	}

	section .box .box-number {
		font-size: 55px;
		margin: 0 0 4px 0;
	}

	section .box .box-name {
		font-size: 14px;
		margin: 10px 0 0 0;
	}
	
	#contact .wrapper {
		padding-left:40px;
		padding-right:40px;
	}
	
	#contact .contact-left {
		width:auto;
		float: none;
		margin-right: 0;
	}

	#contact .contact-right {
		width:auto;
		float: none;
	}

	#contact .contact-left input {
		box-sizing: border-box;
		width: 100% ;
		float: none;
	}
	
	#contact .contact-right textarea {
		box-sizing: border-box;
		float: none;
		width: 100% ;
	}
	
	#contact .contact-right input {
		box-sizing: border-box;
		float: none;
		width: 100%;
	}
	
	#contact .g-recaptcha {
		float: none;
		margin-bottom: 10px;
		width: 100%;
		transform:scale(0.80);
    	transform-origin:0 0;
	}
	
	footer .wrapper {
		padding-top: 100px;
	}
	
	footer .contact-info  {
		width: 210px;
		margin: 0 auto 15px;
		overflow: hidden;
		float: none;
	}

	footer .contact-info:first-of-type  {
		margin-right: auto;
	}

	footer .contact-info .contact-content {
		float: none;
		width: 210px;
		padding-left: 10px;
	}

	footer .fa {
		color: #fff;
		font-size: 18px;
		display: block;
		float: left;
		margin-top:5px;
	}

	.map {
		float: none;
		display: block;
		margin: 40px auto;
	}
}