/*General
---------------------------------------------*/
body {height: 100vh; margin: 0; background-color: #d2f2ff; color: #333;
font-family: "Open Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
 font-style: normal;
 font-variation-settings:
 "wdth" 100;
}
#contents {background-color: #fff; padding: 50px 10px;}

@media screen and (min-width: 800px) {
#contents {max-width: 1200px; justify-content: center; background-color: #fff; margin: auto; padding: 80px 10px;}
}

hr {margin-top: 30px;}

/*Fonts
---------------------------------------------*/
h1 span {color: #4ba7c9;}
a {font-family: "Noto Serif", serif; font-style: italic;}
.semer {background-color: #3498DB; color: #fff; padding: 5px 15px; font-weight: 700; font-size: 130%;}
a.semer {text-decoration: none;}

@media screen and (min-width: 800px) {
 .semer {margin-left: 10px;}
 a.semer {text-decoration: none;}
}

/*header
---------------------------------------------*/
#header {position: fixed; left: auto; width: 100%; margin-left: auto; padding: 0 10px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: #d2f2ff; -webkit-box-shadow: 0 1px 10px 0px #9E9E9E;
box-shadow: 0 1px 10px 0px #9E9E9E;}
#headercontent {display: flex; flex-direction: row; justify-content: space-between; align-items: center;width: 1200px; margin: auto;}
img.runsteen-logo {width: 80%; height: auto;}



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

img.runsteen-logo {width: 700px; height: auto;}
}

/*intro
---------------------------------------------*/
#intro {position: relative; display: inline-block; padding-top: 15px;}

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

@media screen and (min-width: 800px) {
img.selfportrait {position: relative; float: right; margin-left: 30px; width: 30%; height: auto;}
}


/*Meny
---------------------------------------------*/



/*Galleri på startsidan
---------------------------------------------*/
/*.startgalleri {display: flex; flex-direction: column;}*/
.startgalleri img {width: 100%; height: auto; margin: 10px 0px;}

@media screen and (min-width:900px) {
.startgalleri img {width: 33%; height: auto; margin: 10px 0px;}
}

/*Portfolio
---------------------------------------------*/
.column1, .column2 {display: flex; flex-direction: column;}
.column1 img, .column2 img {margin: 10px 0;}

@media screen and (min-width: 800px) {
#portfolio {display: flex; flex-direction: row;}
.column1 {margin-right: 10px;}
.column2 {margin-left: 10px;}
.column1 img, .column2 img {width: 100%; height: auto;}
}

.video {display: flex; flex-direction: row; flex-wrap: wrap;}
.video iframe {margin: 5px;}

/*Footer
---------------------------------------------*/
#footer {background-color: #6da5e6; text-align: center; color: #fff;}
#footer p {font-style: italic; padding: 10px;}