@font-face {
    font-family: chopshop;
    src: url(../fontovi/Chopshop-Regular.ttf);
}
@font-face {
    font-family: monkey;
    src: url(../fontovi/monkey.ttf);
}

/*******************************************************************************************************/
html, body, div, header, footer, p, main, section {
	display: block;
	margin: 0;
	padding: 0;
}

body {
	background-image: url(../img/BG_Pattern-1.png);
	margin-top: 10em;
	}
body{
    -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-image: url(../img/Header_BG.jpg);
	background-repeat: no-repeat;
	background-position: center center;
    background-attachment: fixed;
}
	

header {
	margin-top: -10em;
	width: 100%;
    font-family: chopshop, Amatic, sans serif;
    padding-top: 15px;
}

	
.allheader {

	background-color: rgba(180,180,180, .75);
	height:50px;
	width: 70%;
	margin: 0 0;
    padding: 0 15%;
	#page-wrap {
     width: 800px;
     margin: 0 auto;
}
}
	
.social {
    margin-right: 50px;
    padding-top: 15px;
}

.social ul li { 
    display: block;
    width: 30px;
    height: 30px;
	float: right;
    margin: 0;
    padding: 0;
	margin-left: 15px;
}
.social ul li a { 
    display: block;
    height: 100%;
    text-indent: -900000px;
    background: transparent url(../img/facebook.png) center center no-repeat;
    background-size: 100%;
}

.social ul li:nth-child(1) a { 
    background-image: url(../img/facebook.png);
}

.social ul li:nth-child(1) a:hover { 
   background-color:orange;
}

.social ul li:nth-child(2) a { 
    background-image: url(../img/twitter.png);
}

.social ul li:nth-child(2) a:hover { 
    background-color:orange;
}

.social ul li:nth-child(3) a { 
    background-image: url(../img/jubito.png);
}

.social ul li:nth-child(3) a:hover { 
    background-color:orange;
}
.social ul li:nth-child(4) a { 
    background-image: url(../img/instagram.png);
}

.social ul li:nth-child(4) a:hover { 
    background-color:orange;
}

nav ul li{ 
    display: inline;
    margin-left: 15px;
}
b { text-align:right;
	color: orange;
}
.logo{
	padding-left: 60px;
    background: transparent url(../img/logo.png) top left no-repeat;
    background-size: auto 100%;
	height:50px;
	width:480px;
	float:left;
    font-size: 45px;
	}

video{
	display: block;
	margin: 50px auto;
	}

ul { margin: 0; }
nav ul li {
    display: inline;
    margin-left: 15px;
}
b{ color: orange;
}

nav, #shop , #discography {
	width: 60%;
	margin: 0 auto;
	background: rgba(0,0,0, .5);
	padding: 1em;
}
nav {
	padding: 0;
	background: transparent;
	min-width: 800px;
	}

header nav a {
	font-family: chopshop;
	color: white;
	font-size: 1.75em;
	text-decoration: none;
}
#discography h1:first-of-type {
	font-family: chopshop;
	color: white;
	font-size:46px;
	text-decoration:underline;
}

p {
	font-family: monkey;
	font-size:20px;
	color: white;
	}
.headline{
	font-size:46px;
	font-family: chopshop;
	color:white;
	text-decoration:underline;
	}
	
.header_2 {
	width:100%;
	height:50px;
	background: rgba(60, 60, 60, .6);
	opacity:0.8;
	}

.header_2 nav, .header_2 , .header_2 li {
	height: 100%;
}
.section_real_header{
	width:960px;
	margin:0px auto;
	}
	
.section_real_header a:hover{
	color:orange;
	}

nav ul li {
	display:inline;
	margin-left:65px;
	}

a{
	text-decoration:none;
	}

#container_2, #container_3, #bio{	
	margin:0px auto;
	background:rgba(0,0,0, .5);
	opacity:0.8;
	padding:20px 1em;
	}

b{
	color:orange;
	}	

#triangles{
	background: transparent url(../img/BG_Pattern-1.png) top left repeat;
	padding: 0 15%;
	}
#container_1{	
	margin:20px auto;
	width:70%;
	}
#container_1 h1 {
    clear: both;
    text-align: center;
    font-size: 2em;
    min-width: 500px;
}

.header_3{
	width:100%;
	height:100px;
	background:lightgray;
	opacity:0.8;
	}
#container_3{	
	padding-bottom: 50px;
	}
footer {
		display: block;
		height: 100px;
		padding: 1em 15%;
		background: rgba(0,0,0, 1);
		margin-top: calc(32px - 2em);
		position:static;
		z-index: 100000;
	}
#partneri {
		display: block;
		width: 270px;
		margin: auto;
	}
.album_pikule{
	font-family: chopshop;
	font-size:28px;
    padding-top:10px;
	margin:0px auto;
	width: 960;
	text-align:center;
	}
	
	
.album_button {
	color: orange;
	height:40px;
	width:100px;
}

	
.album_button:hover {
	color:white;
	background-color:orange;
	height:40px;
	width:100px;
}
	
.biography p, #headline2 {

	margin-left:auto;
	margin-right:auto;
}

.biography {	
	margin:0px auto;
	background:#424242;
	opacity:0.8;
	padding:20px 1em;
	}
	
#headline2 {
	color: white;
	font-size:46px;
	font-family: chopshop;
	text-decoration:underline;
	
}

#text {
	margin-left:auto;
	margin-right:auto;
}
	
/* Biography slider */

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
figure { 
  margin: 20px auto; background: #101010;
  font-family: chopshop;
  font-weight: 100;
}
div#captioned-gallery { 
  width: 960px; overflow: hidden;
  margin: 20px auto;
  margin-bottom: 80px;

}
figure.slider { 
  position: relative; width: 500%;
  font-size: 0; 
  animation: 15s slidy infinite; 
}
figure.slider figure { 
  width: 20%; height: auto;
  display: inline-block;  position: inherit; 
}
figure.slider img { width: 960px; height: auto; }
	
	}
	
	
	
/* Back to top button */


.cd-container {
  width: 90%;
  max-width: 768px;
  margin: 2em auto;
}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: orange url(../img/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}
.tim h1 {
	font-family: chopshop;
	font-size: 40px;
	text-decoration:underline;
	color: orange;
}
.tim {
	padding-bottom:60px;
}

#ime1 {
	float:left;
  width: calc(12% - 2em);
  margin-left: 2em;
}

#uloga1 {
	color: orange;
	float:left;
  width: calc(12% - 2em);
  margin-left: 2em;
}