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



/* /////////////// START FONT ///////////// */
/* START DECLARE CUSTOM FONT */
@font-face {
    font-family: 'kristjan_sansregular';
    src: url('kristjansans-regular-webfont.woff2') format('woff2'),
         url('kristjansans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'kristjan_sanslight';
    src: url('kristjansans-light-webfont.woff2') format('woff2'),
         url('kristjansans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/* END DECLARING CUSTOM FONT */



body {
	font-family: 'kristjan_sanslight','kristjan_sansregular', Verdana, Geneva, sans-serif;
	background-color:#FFF;

}

a:link {
	text-decoration: none;
	border:none;
	color:#060;
}

p, h1, h2, h3, h4, h5, h6 {
	font-family: 'kristjan_sanslight', Arial, Helvetica, sans-serif;
	color:#FFF;
	font-weight:100;
}
p-regular, h1-regular, h2-regular, h3-regular, h4-regular, h5-regular, h6-regular {
	font-family: 'kristjan_sansregular', Arial, Helvetica, sans-serif;
	color:#FFF;
	font-weight:100;
}


#loading {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   display: block;
   background-color:#FFF;
   z-index: 99;
   text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
/*  left: 140px;*/
  z-index: 100;
}

img {flex: none;} /* IE doesn't center the images, but compresses (distorts) them when the width of the browser window is reduced, so this at least fixes them from shrink, but instead they align to left instead of center - only problem in IE */




/* BELOW IS THE FIRST SETTING FOR VERY SMALL SCREENS */

@media screen and (min-width: 280px) {

h1, h1-regular {
	font-size:80px;
	line-height: 80px;
	margin-top:0;
}

h2, h2-regular {
	font-size:60px;
	line-height: 60px;
	margin-top: 0;
	margin-bottom:0;
}
h3, h3-regular {
	font-size:40px;
	line-height:40px;
	margin-top:0px;
	margin-bottom:6px;
	color:#FFF;
}
h4, h4-regular {
	font-size:28px;
	line-height:30px;
	margin-top:0px;
	margin-bottom:6px;
}
h5, h5-regular {
	font-size:20px;
	line-height:20px;
	margin-top:6px;
	margin-bottom:6px;
}
h6, h6-regular{
	font-size:20px;
	line-height:20px;
	margin-top:6px;
	margin-bottom:6px;
}
p, p-regular {
	font-size: 24px;
	line-height: 32px;
	margin-top: 0px; /* If I change this, it affects the image placement also (which is because before image and after a <p> and </p> is used)*/
	margin-bottom: 0px;
}


#container {
	height:auto;
	width: 100%;

	overflow:hidden; /* This is needed otherwise the container could expand to fit the content */
}

.logo_banner_container {
	display: inline_block;
	min-width:350px; /* This keeps the header image/animation from shrinking too much */
	width: 100%;
}

#banner_buttons {
	float:left;
	margin-right:0px; /*fix to keep this button within a small phone screen */
}
#banner_logo {
	float: right;
}

/* Header container is same as chapter container, but has no max width */
.header_container {
	display: inline-block;
	overflow:hidden;
    position: relative;
	justify-content: center;
	width: 100%;
	min-width:1000px; /* This keeps the header image/animation from shrinking too much */
	height: auto;
}

.chapter_container {
	display: inline-block;
	position: relative;
	height: auto;
	width: 100%;
}

.box_container_100, .box_container_60, .box_container_51, .box_container_50, .box_container_40, .box_container_33, .box_container_30,  .box_container_25, .box_container_20, .music_box_container_60, .music_box_container_40 {
	display: flex;
	justify-content: center;
	overflow:hidden;
	position:relative;
	height:490px; /* Here I have made the height fixed so that they don't disappear if empty */
	width:100%;
	margin:0px; /* for the small screen the left and right will not have margin */
	margin-top:5px;
	margin-bottom:5px;
	float:left;
}
.music_box_container_60{height: 400px;}
.music_box_container_40{height: 300px;}

.box_container_100 {height:auto} /* this box_container is only for the header so must not be fixed height} */
/* For the other box container sizes, no need to specify more on style here as they should all be 100% width in the small screen */


.thumbbox_top {height:86px; width:100%; margin:0px; margin-bottom:4px; background-color:#4f4f4e; position:absolute;}
.thumbbox_bottom {height:400px; width:100%; top:90px; background-color:#4f4f4e; overflow: hidden; position:absolute; 	display: flex; 	justify-content: center;}

.text_column_a {
	text-align:left;
	overflow: hidden;
	position:absolute;
	left: 10px;
	right: 30px;
	top:10px;
	height: auto;
	width: auto;
	color:#FFF;
}

}

/* BELOW IS THE SETTING FOR NORMAL SCREENS (APPLE USES three sizes: below 750px for mobiles, then steps up 1075px, and  above that is for largest screen sizes) */

@media screen and (min-width: 780px) {
body {
background-color:#FFF;
margin:0px;
}


h1, h1-regular {
	font-size:140px;
	line-height: 140px;
	margin-top:0;
}
h2, h2-regular {
	font-size:70px;
	line-height: 70px;
	margin-top: 0;
	margin-bottom:0;
}
h3, h3-regular {
	font-size:50px;
	line-height:50px;
	margin-top:0px;
	margin-bottom:6px;
	color:#FFF;
}
h4, h4-regular {
	font-size:28px;
	line-height:30px;
	margin-top:0px;
	margin-bottom:6px;
}
h5, h5-regular {
	font-size:20px;
	line-height:20px;
	margin-top:6px;
	margin-bottom:6px;
}
h6, h6-regular{
	font-size:20px;
	line-height:20px;
	margin-top:6px;
	margin-bottom:6px;
}
p, p-regular {
	font-size: 24px;
	line-height: 32px;
	margin-top: 0px; /* If I change this, it affects the image placement also (which is because before image and after a <p> and </p> is used)*/
	margin-bottom: 0px;
}


#container {
	height:100%;
	width: 100%; /* 'auto' seems to produce the same result */
	overflow:hidden; /* This is needed otherwise the container could expand to fit the content */
}

/* Header container is same as chapter container, but has no max width */

.logo_banner_container {
	display: inline-block;
	overflow:hidden;
    position: relative;
	justify-content: center;
	overflow: hidden;
	width: 100%;
	min-width:700px; /* This keeps the header image/animation from shrinking too much */
	height: auto;
	max-width: 1390px;
}


#banner_logo {
	float: right;
}
#banner_buttons {
	float:left;
}

.header_container {
	display: flex;
	overflow:hidden;
    position: relative;
	justify-content: center;
	overflow: hidden;
	width: 100%;
	min-width:1000px; /* This keeps the header image/animation from shrinking too much */
	height: auto;
}

.chapter_container { /* This is the group box containing the three image boxes */
	display: flex;
	justify-content: center;
	position: relative;
	overflow:hidden;
	position: relative;
	height: auto;
	width: 100%;
	max-width: 1560px; /* Here I want to limit the width of the site */

}

.box_container_100, .box_container_60, .box_container_51, .box_container_50, .box_container_40, .box_container_33, .box_container_30,  .box_container_25, .box_container_20, .music_box_container_60, .music_box_container_40 {
	display: flex;
	justify-content: center;
	overflow:hidden;
	position:relative;
	height:490px; /* Was Auto before, but I have made the height fixed so they don't disappear if empty */
	width:100%;
	margin:5px;
	margin-top:5px;
	margin-bottom:5px;
	float:left;
}
.box_container_100 {height:auto} /* this box_container is only for the header so must not be fixed height because the image must be able to get larger than the usual fixed height} */
.box_container_60 {	width:60%;} /* Use when two of these boxes are together */

.box_container_51 {	width:50.7%;} /* This is a temporary fix to keep white borders aligned - use when with other smaller boxes*/
.box_container_50 {	width:50%;} /* Use when two of these boxes are together */
.box_container_40 {	width:40%;}
.box_container_33 {	width:33.33%;}	
.box_container_30 {	width:30%; min-width:250px;} 
.box_container_25 {	width:25%; min-width:170px;} 
.box_container_20 {	width:20%; min-width:200px;} /*I make minimum width because Box Container 20 iss the smallest and can look too cramped if small windows size */

.music_box_container_60{width:60%; height: 400px; min-width: 600px;}
.music_box_container_40{width:40%; height: 300px; min-width: 400px;}




.thumbbox_top {height:86px; width:100%; margin:0px; margin-bottom:4px; background-color:#4f4f4e; position:absolute;}
.thumbbox_bottom {height:400px; width:100%; top:90px; background-color:#4f4f4e; overflow: hidden; position:absolute; 	display: flex; 	justify-content: center;}

.text_column_a {
	text-align:left;
	overflow: hidden;
	position:absolute;
	left: 10px;
	right: 30px;
	top:10px;
	height: auto;
	width: auto;
	color:#FFF;
}

}