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

    
  :root {
  --background: #191919;
  --color: #fff1db;
  --navbar: #c9081e;
  --hover: #e8122a; 
  --active: #3d3a3a;
  }
  
html, body {
	margin:0;
	padding:0;
	height:100%;
	font-family: 'Oswald', sans-serif;
	background: var(--background);
	/* background-color: #1e1e1e;  IE taa pitaa vaihtaa kaikkiin
	vanha punanen #af4207;*/ 
	}

#containerindex {
	min-height:100%;
	position:relative;
	padding-bottom: 50px;
	}

#containerabout {
	min-height:100%;
	position:relative;
	background-image: url("images/about-background.jpg");
	background-size: cover;
	background-attachment: fixed;
	padding-bottom: 50px;
	}

#containerwork {
	min-height:100%;
	position:relative;
	background-image: url("images/work-background.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	padding-bottom: 50px;
	}

#containerstudio {
	min-height:100%;
	position:relative;
	background-image: url("images/studio-background.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	padding-bottom: 50px;
	}

#containercontact {
	min-height:100%;
	position:relative;
	background-image: url("images/contact-background.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	padding-bottom: 50px;
	}

#header {
	
	}

#body {
	padding-bottom: 50px; /* Height of the footer */
	margin: 0 auto;	
	}
	
#footer {
	position:absolute;
	bottom: 0;
	width:100%;
	height: 50px; /* Height of the footer */
	background: var(--active);
	text-align: center;
	}

#footer p {
	margin:0;
	padding:10px;
	}

/*----------------------------- FRONT PAGE NAV BAR STYLING-----------------------------*/
* {
	box-sizing: border-box;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.frontpage {
    float: left;
    padding: 0 7px;
    height: 700px;
}

.frontsides {
	width: 20%;
}

.columncenter {
	width: 15%;
	position: relative;
	text-align: center;
}

.square {
    float: left;
    padding: 7px;
}

.squarecenter {
	width: 40%;
	position: relative;
	text-align: center;
}

.squaresides {
	height: 40px;
	width: 10%;
}

.navimage {
	display: inline;
	border: 0;
	width: 100%;
    height: auto;
	max-width: 275px;
}

.text {
	position: absolute;
    top: 8px;
	font-size: 3.6vw;
	color:var(--color);
	text-transform: uppercase;
	font-weight: 600;
	width: 90%;
}

.text-square {
	position: absolute;
    top: 17px;
	font-size: 10vw;
	color:var(--color);
	text-transform: uppercase;
	font-weight: 600;
	width: 93%;
}

/*-----------------------------NAV BAR STYLING-----------------------------*/
nav {
	width: 100%;
	margin: 0 auto;
	}
  
.topnav {
	overflow: hidden;
}

.topnav a {
	float: left;
	display: block;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 25px;
	text-transform: uppercase;
}

.active {
	background-color: rgba(0,0,0,0.7);
}

.topnav .icon {
	display: none;
}

.topnav a:hover {
	color: var(--hover);
}

/*-----------------------MAIN CONTENT COLUMN ON EVERY PAGE----------------------*/

.column {
    float: left;
    padding: 0 7px; 
}

.columnsides {
	height: 200px;
	width: 20%;
}
/*-----------------------------ABOUT-PAGE COLUMNS-----------------------------*/

.about {
	width: 60%;
}

/*-----------------------------STUDIO-PAGE COLUMNS-----------------------------*/

.studio {
	width: 60%;
	background-color: rgba(0, 0, 0, .7);
}

/*-----------------------------WORK-PAGE COLUMNS-----------------------------*/

.prod {
    float: left;
    padding: 6px;
	background-color: rgba(0, 0, 0, .7);
	margin: 0 5px;
}

.content {
	width: 59%;
}

.prodsides {
	height: 200px;
	width: 20%;
}

.youtube {
	height: 400px;
	width: 100%;
}

.video {
	height: auto;
	width: 100%;
}

.spotify { /*------IF NEEDED------*/
	width: 100%;
	margin: 0 auto;
}

iframe {
	border: 0;
	align-self: center;
	padding-bottom: 10px;
	margin-bottom: 30px;
}

/*-----------------------------CONTACT-PAGE COLUMNS-----------------------------*/

.contact {
	width: 23%;
	height: 450px;
    padding: 7px;
	background-color: rgba(0, 0, 0, .7);
	margin: 0 5px;
}

.map {
	width: 35%;
}

.contactsides {
	width: 20%;
	height: 200px;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

#map {
	width: 100%;
}
  /*-----------------------------TEXT STYLING-----------------------------*/
h1 {
	color: var(--color);
	text-transform: uppercase;
	font-size: 11vw;
	text-align: center;
	padding: 20px 0;
	margin: 0 auto;
}
  
h2 {
	color: var(--color);
	text-transform: uppercase;
	font-size: 70px;
	font-weight: 500;
	text-align: center;
	padding: 80px 0 60px 0;
	margin: 0 auto;
}
  
h3 {
	color: var(--navbar);
	text-transform: uppercase;
	font-size: 35px;
	font-weight: 500;
	text-align: center;
	margin: 0 auto;
}

h4 {
	color: var(--navbar);
	text-transform: uppercase;
	font-size: 35px;
	font-weight: 500;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 30px;
}
 
p {
	color: var(--color);
	font-size: 20px;
	font-weight: 200;
	letter-spacing: 1.5px;
	padding: 10px 20px;
	margin: 0 auto;
}

.aboutp {
	background-color: rgba(0, 0, 0, .7);
	padding-bottom: 50px;
}

.address {
	font-size: 20px;
	color: var(--color);
	text-align: center;
}

ul {
	color: var(--color);
	list-style-type: none;
	text-transform: uppercase;
	text-align: center;
	font-size: 25px;
	padding: 0 40px 50px 40px;
	margin: 0 auto;
}

a:link { 
    color: var(--color);
    text-decoration: none;
}

a:visited {
    color: var(--color);
    text-decoration: none;
}

a:hover {
    color: var(--hover);
    text-decoration: none;
}

a:active {
    color: var(--navbar);
    text-decoration: none;
}

/*-----------------------------RESPONSIVITY-----------------------------*/

@media screen and (min-width: 1250px) {
	
	h1 {
		font-size: 140px;
	}
	
}

@media screen and (max-width: 1200px) {
	

	.content {
		width: 60%;
	}
	
	.contactsides {
		width: 2%;
	}
	
	.contact {
		width: 30%;
	}
	
	.map {
		width: 65%;
	}
}

@media screen and (min-width: 800px) {
	.square {
		display: none;
	}
} 

@media screen and (max-width: 800px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
	  display: none;
	}
	
	.topnav a.icon {
		float: right;
		display: block;
	}
	
	.topnav.responsive {
		position: relative;
	}
	
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	
	h1 {
		font-size: 17vw;
		padding: 20px 5px;
		line-height: 90%;
	}
	
	h2 {
		font-size: 45px;
		margin: -60px 0 0 0;
	}
	
	h3 {
		font-size: 30px;
		margin: 0;
		padding: 2px 0 0 0;
	}
	
	p {
		padding: 10px 40px;
		font-size: 17px;
	}
	
	ul {
		font-size: 18px;
		padding: 0 10px 10px 10px;
		margin: 0;
	}
	
	.frontpage {
		display: none;
	} 
	
	.columnsides {
		display: none;
	}
	
	.about {
		width: 100%;
	}
	
	.studio {
		width: 100%;
	}
	
	.content {
		width: 100%;
	}
	
	.spotify {
		width: 100%;
		height: 80px;
	}
	
	.prod {
		margin: 0;
	}
	
	.prodsides {
		display: none;
	}
	
	.contactsides {
		display: none;
	}
	.map {
		width: 92%;
		margin: 0 4%;
	}
	
	#map {
		height: 250px;
	}
	
	.contact {
		width: 90%;
		margin: 0 5% 10px 5%;
		height: auto;
	}
	.center {
		width: 40%;
}
	#containerwork {
		background-image: url("images/work.jpg")
	}

}