@font-face {
	font-family: 'Nexa Bold Regular';
	font-style: normal;
	font-weight: normal;
	src: local('font/Nexa Bold Regular'), url('font/Nexa Bold.woff') format('woff');
}


@font-face {
	font-family: 'Nexa Light Regular';
	font-style: normal;
	font-weight: normal;
	src: local('font/Nexa Light Regular'), url('font/Nexa Light.woff') format('woff');
}

@font-face {
	font-family: 'Montserrat Regular';
	font-style: normal;
	font-weight: normal;
	src: local('font/montserrat-regular'), url('font/montserrat-regular.woff') format('woff');
}

* {
  box-sizing: border-box;
}

h1
{
	margin:0;
	padding:0;
	display:inline;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
	font-family: "Nexa Light Regular";
}

body {
	background-color: #4A4A4A;
	margin: 0;
	padding: 0;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
}

.wrapper {

}

.header {
	color: #ffffff;
	padding-top: 10px;
	padding-right: 30px;
	padding-bottom: 15px;
	padding-left: 150px;
	position: relative;
}

.row {
	display: flex;
}

.menu {
	display: flex;
}

.menu ul {
	list-style-type: none;
	margin: 0;
	padding: 30px;
	overflow: hidden;
	background-color: #4A4A4A;
}

.menu li {
	float: left;
}

.menu li a {
	display: block;
	color: white;
	text-align: center;
	font-family: "Nexa Bold Regular";
	padding: 14px 16px;
	text-decoration: none;
}

.menu li a.active:after{
	content: "";
	float: left;
	background: #DBCD4A;
	width: 100%;
	height: 5px;
	border-radius: 5px;
	margin-top: 5px;
}

.menu li a:hover:after {
	content: "";
	float: left;
	background: #DBCD4A;
	width: 100%;
	height: 5px;
	border-radius: 5px;
	margin-top: 5px;
}

.big-heading {
	background-color: #4A4A4A;
	color: #ffffff;
	margin-top: 50px;
	margin-left: 250px;
	font-family: "Montserrat Regular";
	text-align: center;
	font-size: 42px;
}

.side-menu {
	background-color: #272727;
	height: 100%;
	width: 5.5em;
	position: absolute;
	padding: 25px;
	color: #ffffff;
	text-align: center;
	font-size: 14px;
	z-index: 9999;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow-x: hidden;
  transition: 0.3s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 120px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover{
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.ham_menu {
	display: block;
	text-indent: -9999px;
	width: 24px;
	height: 24px;
	margin-top: 20px;
	margin-bottom: 350px;
	transition: 0.3s;
	background: url(icons/menu.svg);
	background-size: 24px 24px;
}

.facebook {
	display: block;
	text-indent: -9999px;
	width: 24px;
	height: 24px;
	margin-top: 50px;
	margin-bottom: 50px;
	transition: 0.2s;
	background: url(icons/facebook.svg);
	background-size: 24px 24px;
}

.facebook:hover {
	background: url(icons/facebook-white.svg);
	background-size: 24px 24px;
}

.instagram {
	display: block;
	text-indent: -9999px;
	width: 24px;
	height: 24px;
	margin-top: 50px;
	margin-bottom: 50px;
	transition: 0.2s;
	background: url(icons/instagram.svg);
	background-size: 24px 24px;
}

.instagram:hover {
	background: url(icons/instagram-white.svg);
	background-size: 24px 24px;
}

.twitter {
	display: block;
	text-indent: -9999px;
	width: 24px;
	height: 24px;
	margin-top: 50px;
	margin-bottom: 50px;
	transition: 0.2s;
	background: url(icons/twitter.svg);
	background-size: 24px 24px;
}

.twitter:hover {
	background: url(icons/twitter-white.svg);
	background-size: 24px 24px;
}

.fullwhitelogo {
	display: block;
	text-indent: -9999px;
	padding-right: 500px;
	width: 100px;
	text-align: center;
	height: 100px;
	background: url(icons/fullwhitelogo.svg) no-repeat;
	background-size: 100px 100px;
}

.crousal-image {
	float: right;
	text-indent: -9999px;
	margin-top: 40px;
	margin-left: 250px;
	width: 350px;
	height: 350px;
	background: url(icons/exploration.svg) no-repeat;
	background-size: 350px 350px;
}

.divider {
	width: 200px;
	height: 2px;
	margin-top: 50px;
	margin-left: 250px;
	background: #fff;
}

.headerwithline {  
  padding-left: 120px;
  line-height: 0.5;
}

.headerwithline span {
  display: inline-block;
  position: relative; 
  font-family: "Nexa Bold Regular";
  font-size: 30px;
  font-weight: 900;
}

.headerwithline span:after {
  content: "";
  position: absolute;
  height: 2px;
  border-top: 2px solid #808080;
  top: 5px;
  left: 100%;
  margin-left: 15px;
  width: 800px;
}

.card-row {
	padding-left: 7rem;
}

.card-row .card {
	display: inline-block;
	position: relative;
	width: 330px;
	height: 100px;
	background-color: #EFEFEF;
	border-radius: 10px;
	overflow: hidden;
	margin: 2rem 1rem 2rem 1rem;
	padding: 15px;
}

.card-row .card .avatar{
	display: inline-block;
	position: relative;
	height: 100%;
	height: 70px;
	width: 70px;
	overflow: hidden;
	border: 1px solid #BADA55;
	border-radius: 50%;
	padding: 4px;
}

.card-row .card .avatar img{
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.card-row .card .title-block{
	display: inline-block;
	position: relative;
	height: 100%;
	overflow: hidden;
	font-family: "Nexa Bold Regular";
	margin-left: 1rem;
	text-align: center;
	color: #3A3A3A;
	padding: 10px 0;
}

.card-row .card .title-block h1{
	font-size: 1.4rem;
	margin: 0;
}

.card-row .card .title-block h3{
	font-size: 0.8rem;
	margin: 5px 0 0 0;
}

.card-row .card .ad-on-block{
	display: inline-block;
	position: relative;
	float:  right;
	height: 100%;
	overflow: hidden;
	font-family: "Nexa Bold Regular";
	margin-right: 0.5rem;
	text-align: left;
	color: #808080;
}

.card-row .card .ad-on-block h3{
	display: inline-block;
	position: relative;
	overflow: hidden;
	font-size: 0.8rem;
	margin: 0;
}

.card-row .card .ad-on-block .tabindex {
	margin: 4px 0 4px 0;
}

.icon {
	width: 16px;
	height: 16px;
	margin: 0 10px 0 0;
}

.footer {
	background-color: #4A4A4A;
	color: #ffffff;
	text-align: center;
	font-size: 12px;
	padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
	width: 100%;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

@media only screen and (min-width: 600px) {
	/* For tablets: */
	.col-s-1 {width: 8.33%;}
	.col-s-2 {width: 16.66%;}
	.col-s-3 {width: 25%;}
	.col-s-4 {width: 33.33%;}
	.col-s-5 {width: 41.66%;}
	.col-s-6 {width: 50%;}
	.col-s-7 {width: 58.33%;}
	.col-s-8 {width: 66.66%;}
	.col-s-9 {width: 75%;}
	.col-s-10 {width: 83.33%;}
	.col-s-11 {width: 91.66%;}
	.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
	/* For desktop: */
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}
}