body, html {
	background: url(../images/bg.jpg) top left no-repeat fixed #f1f0ee;
	font-family: 'Inter', sans-serif;
  font-size: 15px;
	letter-spacing: 0.1em;
	color: #1b1614;
    height: 100%;
  font-weight: 300;
}

a,
a:visited {
	color: #cb213d;
	font-weight: 500;
	text-decoration: underline;
	-webkit-transition-duration: 0.25s;
  	transition-duration: 0.25s;
  text-decoration: none;
}

a:hover { 
	color: #fc0000; 
  	-webkit-transform: scale(1.015);
  	transform: scale(1.015);
}

.container-fluid {
	max-width: 1600px;
	padding: 0px 40px 0px 40px;
}

h1 {font-size: 1.8em; font-weight: 200;}

h2 {font-size: 3.8em; line-height: 1em; font-weight: 800; letter-spacing: -0.015em;}

h3 {font-size: 2.2em; line-height: 1.5em; font-weight: 600; letter-spacing: 0em; margin: 15px 0 0 0;}

small {line-height: 0.35em;}

.header {
	position: absolute;
  	left: 50px;
  	right: 50px;
  	top: 0;
	z-index: 10;
	padding: 30px 10px 60px 30px;
	margin: 0 auto;
	max-width: 1520px;
}

.logo {font-size: 8em; padding: 8px 8px 8px 8px;}

.description {
	padding: 8px 0px 0px 25px;
	font-size: 1.1em;
	font-weight: 200;
	letter-spacing: 0.015em;
	line-height: 1.3em;
  color: #fff;
}

.lake {
	position: relative;
	width: 100%;
	overflow: hidden;
    -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.7);
	-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.7);
	box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.7);
	padding-bottom: 130px;
	background-color: #170f19;
}

.heavy {
  background: rgb(56,39,31);
  background: linear-gradient(0deg, rgba(56,39,31,0.96) 60%, rgba(0,0,0,0) 90%);
  text-align: left;
  font-weight: 200;
  line-height: 1em;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0px 30px 10px 30px;
  position: absolute;
  overflow: hidden;
  color: #fff;
}

.heavy h2 {font-size: 2.4em;}

#lastfmrecords {margin-left: 0px;}

ol {padding: 4px 0 0 0;}

#lastfmrecords img {
  padding: 5px 5px 5px 5px;
  max-width: 8.325%;
  max-height: 8.325%;
  }

.portfolio {
	padding: 40px 15px 20px 15px;
	font-size: 0.9em;
	min-height: 100%;
}

.design {
	background: #e3e2df; 
	padding: 10px 30px 30px 30px;
}

.portfolio-item{
	padding: 0 0 0 0;
}

.portfolio-image {
  display: block;
  width: 100%;
  height: auto;
}

.portfolio-image:hover {opacity: 0.95;}

.portfolio-image a {opacity: 0;
  z-index: 10;
  color: black;
  background: #fff;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  font-size: 16px;
  position: absolute;
  top: 48%;
  left: 0%;
  text-align: center;
}

.portfolio-image:hover a {
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  opacity: 1;
}

.front:hover {
  transform: rotateY(180deg);
  transition: 1s ease;
}

.gallery-hide {display:none;}

.modal-content {
  margin: 150px 0 0 130px;
  background: none;
  max-width: 650px;
  padding: 0px;
}

.music {
background: rgb(252,251,247);
background: linear-gradient(0deg, rgba(252,251,247,0.6) 100%, rgba(0,0,0,0) 100%); 
padding: 10px 30px 30px 30px;
}

.tracknfeel {padding: 0 22px 15px 0px;}

.trackandfeel {
 background: rgb(227,226,223);
background: linear-gradient(180deg, rgba(227,226,223,0.8043418050814075) 100%, rgba(255,255,255,0.7315126734287465) 100%); 
    padding: 25px 25px 25px 25px;
    border-radius: 25px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.trackandfeel p {padding: 5px 5px 5px 5px;}

.gear {font-size: 0.7em; line-height: 0.9em; padding: 0 0 0 0; letter-spacing: 0em;}

.social {padding-top: 20px;}

@font-face {
    font-family: 'si';
    src: url('../fonts/socicon.eot');
    src: url('../fonts/socicon.eot?#iefix') format('embedded-opentype'),
         url('../fonts/socicon.woff') format('woff'),
         url('../fonts/socicon.ttf') format('truetype'),
         url('../fonts/socicon.svg#icomoonregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family:si;
        src: url(fonts/socicon.svg) format(svg);
    }
}

.soc {
    overflow:hidden;
    margin:0; padding:0;
    list-style:none;
    padding-left:  30px;
}

.soc li {
    display:inline-block;
    *display:inline;
    zoom:1;
}

.soc li a {
    font-family:si!important;
    font-style:normal;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;

    -o-transition:.1s;
    -ms-transition:.1s;
    -moz-transition:.1s;
    -webkit-transition:.1s;
    transition:.1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    overflow:hidden;
    text-decoration:none;
    text-align:center;
    display:block;
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    line-height: 38px;
    font-size: 20px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    margin-right: 11px;
    color: #ffffff;
    background-color: none;
    border: 2px solid #fff;
    padding: 0px 0 5px 2px;
}

.soc a:hover {
    z-index: 10;
    -webkit-transform: scale(1.015);
    transform: scale(1.015);
    opacity: 0.9;
}

.soc-icon-last{
    margin:0 !important;
}

.soc-twitter {
}
.soc-twitter:before {
    content:'\e040';
}
.soc-instagram {
}
.soc-instagram:before {
    content:'\e057';
}
.soc-mail {
}
.soc-mail:before {
    content:'\e01f';
}


.btn {
	font-size: 1em;
	background: #dd0000; 
	border-radius: 0px 0px 0px 0px;
	padding: 12px 0px 12px 0px;
	}

.socials a {
	color:#fff;
	text-decoration: none;
	border-right: 1px solid #000;
}

.socials a:hover {color:#000;}


table {
	font-size: 1em; 
	line-height: 1em;
	margin: 15px 0px 5px 0px;
}

footer {
	font-size: 1em;
	color: #000;
	padding: 5px 30px 15px 30px;
	margin: 5px 0px 50px 0px;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (max-width: 1280px) {

body, html {font-size: 14px;}

.header {
  	left: 30px;
  	right: 30px;
  	top: 0;
	z-index: 10;
	padding: 30px 20px 60px 40px;
}

.description {
	padding: 6px 10px 0px 25px;
	font-size: 1.35em;
	line-height: 1.3em;
}

	.lake {
	padding-bottom: 80px;
}

h1 {font-size: 1.3em;}
h3 {font-size: 1.3em;}

	.soc li a {
    width: 35px;
    height: 35px;
    line-height: 31px;
    font-size: 16px;
    margin-right: 5px;
}

footer {
	font-size: 1em;
	}


}

@media (max-width: 1024px) {

	.header {padding: 30px 10px 30px 20px;}

	.header-page {padding: 30px 10px 30px 20px;}

	.description {
		padding: 0px 0px 0px 15px;
		font-size: 1.2em;
		line-height: 1.3em;
	}

	.carousel-indicators {
    position: absolute;
   	right: 0;
   	bottom: 15px;
   	left: 75%;
   	width: 25%;
   }

	.carousel-caption {
  	font-size: 0.85em;
  	line-height: 1em;
  	padding: 30px 110px 20px 20px;
}


footer {
	font-size: 0.825em;
	}


@media (max-width: 992px) {

	.description {
		padding: 0px 0px 0px 0px;
		font-size: 1.3em;
		line-height: 1.2em;
	}

.soc li a {
    width: 30px;
    height: 30px;
    line-height: 25px;
    font-size: 14px;
    margin-right: 0px;
    padding: 0px 0px 5px 0px;
}

footer {
	font-size: 0.825em;
	}

}

@media (max-width: 850px) {
	.description {
		font-size: 1.15em;
		padding: 0px 0px 0px 05px;
	}
}

@media (max-width: 768px) {

html, body {
  background: url(../images/bg.jpg) #000  repeat top center;
  background-size: 800px 450px;
  }

.container-fluid {
	padding: 0px 15px 0px 15px;
	}

	.header {
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 20px 0px;
		left: 30px;
  		right: 10px;
	}

	.header-page {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;

	}

	.logo {
		padding: 25px 15px 0px 0px;
	}

	.description {
		font-size: 0.95em;
		padding: 0px 5px 0px 15px;
	}

	.soc li a {
    width: 24px;
    height: 24px;
    line-height: 21px;
    font-size: 11px;
    margin-right: 0px;
    margin-bottom: 5px;
    padding: 0px 0px 5px 2px;
}

	.lake {
	position: relative;
	width: 100%;
	overflow: hidden;
    -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.7);
	-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.7);
	box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.7);
	padding-bottom: 165px;
	padding-top: 0px;
	background-color: #dbdbdb;
}

.heavy {
  background: linear-gradient(to bottom, rgba(56,39,31,0), rgba(56,39,31,1) 10%);
  font-size: 0.65em;
  line-height: 1.4em;
  letter-spacing: 0.05em;
  width: 100%;
  padding: 0px 15px 5px 15px;
}

#lastfmrecords img {
  padding: 5px 5px 5px 5px;
  max-width: 16.6%;
  max-height: 16.6%;
  }

h2 {font-size: 1.8em;}

.portfolio {
	padding: 15px 15px 20px 15px;
	font-size: 0.8em;
	line-height: 1.2em;
	letter-spacing: 0.05em;
	min-height: 100%;
}

.portfolio-item{
	padding: 0 0 0 0;
}

.design {
	background: #e3e2df; 
	padding: 5px 15px 20px 15px;
}

.music {
	background: #fcfbf7; 
	padding: 5px 15px 20px 15px;
}


table, thead, tbody, th, td, tr { 
	display: block; 
	font-size: 0.95em;
	letter-spacing: 0.05em;
	padding: 0px 0px 0px 0px !important;
	border-top: none !important;
}

tr {margin-bottom: 20px;}

footer {
		padding: 15px 0px 15px 0px;
		font-size: 0.75em;
		letter-spacing: 0.15em;
		line-height: 1.45em;
		text-align: center;
		margin-bottom: 30px;
	}
	
}

@media (max-width: 667px) {
	
.description {font-size: 0.65em; padding: 2px 0px 0px 0px;}

}