/*
Site: Borås Klätterklubb
URL: http://borasklatterklubb.se
*/


::-moz-selection {
	background:var(--theme-on-primary);
	color:var(--active-light);
	text-shadow: none; }

::selection {
	background:var(--theme-on-primary);
	color:var(--active-light);
	text-shadow: none; }

/* Color
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  	--theme-primary: rgba(255, 255, 255, 1);
  	--theme-primary-hover:  rgba(4, 29, 45, 0.9);
  	--theme-on-primary: rgba(31, 30, 33, 1);
  	--theme-on-secondary: rgba(0, 0, 0, 1);
  	--theme-secondary: rgba(0, 73, 153, 1);
	--theme-secondary-hover: rgba(21, 101, 192, 1);
  	--inactive-dark: rgba(0, 20, 20, 0.4);
  	--regular-dark: rgba(0, 20, 20, 0.6);
  	--active-dark: rgba(0, 20, 20, 0.9);
  	--active-light: rgba(255, 255, 255, 0.9);
  	--regular-light: rgba(255, 255, 255, 0.6);
	--nav: rgba(0, 0, 0, 0.1); }


/*----- Blocks------*/

body, html {
	margin:0;
	width:100%;
	color:var(--regular-dark);
    font-size:1.1em;
    line-height: 1.2em;
	background:var(--theme-primary);
	font-family: new-spirit, serif;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
	text-rendering:optimizeLegibility;
	transition: all .25s ease-in-out;
    	-moz-transition: all .25s ease-in-out;
    	-webkit-transition: all .25s ease-in-out; }


.content {
    width:96%;
    margin:0 auto; }

.container {
    width:100%; }

.outer {
    display:table;
    height:100vh;
    width:100%;
	background-image:url('../img/hero.jpg');
	background-size:cover;
	background-position: center right; }

.middle {
    display:table-cell;
    vertical-align:middle; }

.inner {
    margin:0 auto;
    z-index:20; }

section {
	margin:50px 0;
	padding:50px 0; }

section#s1 {
	margin:0;
	padding:0; }

.about {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
    width:100%;
	margin-top:30px;
    text-align: left;
    text-justify:left; }

.hello {
	margin:0 auto;
	width:fit-content;
	vertical-align:middle; }

.hello img {
	width:200px;
	height:auto; }

img.aboutimage {
	width:100%;
	height:auto; }

/* For devices larger than 680px */
@media (min-width: 680px) {
	body, html {
		line-height: 1.4em; }
	.content {
		max-width:1000px;
		width:100%;
		margin:0 auto; }

	.about {
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count: 2;
		-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
		-moz-column-gap: 30px; /* Firefox */
		column-gap: 30px;
		width:100%;
		text-align: justify;
		text-justify: inter-word; }

	section {
		margin:100px 0;
		padding:100px 0; }

	.hello img {
		width:300px;}
}


/*----- Typography------*/

h1, h2, h3 {
	font-size:1.2em;
	line-height:1.2em;
	margin-bottom:0.5em;
	font-weight:700; }

h1 {
	margin:0;
	vertical-align:super;
	display:inline-block;
	font-size:1.6em;
    color:var(--theme-on-primary); }

h2 {
	margin-top:0;
	font-size:1.2em;
	color:var(--active-dark); }

h3 {
	font-size:1em;
	margin-bottom:0;
	color:var(--active-dark); }

p {
	font-size:0.7em;
    margin:0.5em 0;
	color:var(--regular-dark);
    text-align:left; }

b {
    color:var(--active-dark) !important; }

p i {
	margin-bottom:0; }

i {
	font-size: 0.8em;
	font-style:italic;
	color:var(--inactive-dark);
	margin-bottom: 0.5em;
	clear: both;
	display:block; }

li i {
	color:var(--inactive-dark);
	clear:none;
	display:inline; }

.black {
	color:var(--active-dark) !important; }

/* For devices larger than 680px */
@media (min-width: 680px) {
	h1 {
		font-size:5em; }

	h2 {
		font-size:2em; }

	h3 {
		font-size:1em; }

	p {
		font-size:1em; }

}

/*----- Lists------*/

ul {
	margin:0.5em 0 2em 0;
	padding:0; }

li {
	list-style:none;
	font-size:0.7em;
	line-height:1.6em; }

li.disc {
	list-style:inside; }

/* For devices larger than 680px */
@media (min-width: 680px) {
	li {
		font-size:1em;
		line-height:1.4; }
}

/*----- Table------*/

table {
	margin-bottom:1em;
	font-size:0.7em;
	border-collapse: collapse; }

tr {
	padding-top:6px;
	border-bottom: 1px dotted var(--regular-dark); }

tr:first-child {
	padding-top:0; }

tr:last-child {
	border-bottom: none; }

td {
	padding-top:12px;
	text-align:left;
	border: none; }

td:nth-child(2) {
	text-align:right; }

/* For devices larger than 680px */
@media (min-width: 680px) {
	table {
		font-size:1em; }
}

/*----- SVG------*/
svg.kontakt {
  width:32px;
  height:32px;
  margin-right:1em;
  fill: var(--regular-dark);
  transition: all .1s ease-in-out; }

svg.kontakt:hover {
  cursor: pointer;
  fill: var(--theme-on-primary); }


/*----- Links------*/

a:link {
	color:var(--regular-dark);
	text-decoration:underline;
	transition: all .1s ease-in-out;
    	-moz-transition: all .1s ease-in-out;
    	-webkit-transition: all .1s ease-in-out;}

a:visited {
	color:inherit;
	text-decoration:none; }

a:hover {
	color:var(--active-dark);
	text-decoration:underline; }


/*----- Navigation------*/

nav {
	position:fixed;
	z-index:1000000;
	top:30px;
	left: 50%;
	transform: translateX(-50%);
	border-radius:5px;
	width:fit-content;
	background:var(--theme-on-primary); }

nav ul {
	text-align:center;
	margin:0;
	padding:0;
	width: max-content; }

nav ul li {
    list-style:none;
    display: inline-flex; }

nav ul li a:link,
nav ul li a:visited {
    margin:0;
	padding:10px 20px;
	color: var(--theme-primary);
	text-decoration:none; }

nav ul li a:hover,
nav ul li a:focus {
	color: #b28e3d;
	text-decoration:none; }

nav ul li.active a:link,
nav ul li.active a:visited {
	color: #b28e3d;
	text-decoration:none; }