@font-face {
  font-family: 'Karrik-Regular', sans-serif;
 src: url(Karrik-Regular.ttf);
}

 * { box-sizing: border-box;
        cursor: url(
          cursor.png
          ),
          auto;
      }
      
.icon {margin-top: 21px; width: 30px; float: right; margin-right: 6px;}
.icon2 {margin-top: 17px; float: left; height: 42px;}
#graphic { 
margin-right: 3px;}

.titlar {
  font-family: 'Karrik-Regular', sans-serif;

font-size: 15px;
}
.topnav {
overflow: hidden;
background-color: #ffffff;
margin-left: 50px;
margin-right: 50px;
}


@media screen and (max-width: 499px) {
.topnav {
position: relative;
  margin-left: 5%;
  margin-right: 5%;
}
}


body {
margin-top: 0px;
margin-left: 20.5px;
margin-right: 20.5px;
padding-bottom: 100px;
}
body (max-width: 400px) {
margin-top: 0px;
margin-left: 15px;
margin-right: 15px;
padding-bottom: 100px;
}




.column img {
margin-top: 37px;

}


@media screen and (max-width: 500px) {#everything {display: none; } #illustrations {display: none; }
  #graphic {display: none; }
  #video {display: none; }}

@media screen and (max-width: 200px) {.icon {display: none; } }


.column img:hover {
filter: opacity(80%)
}


#pandemic {
display: block;
margin-left: auto;
margin-right: auto;
float: block;
position: relative;
}
#sund {
display: block;
margin-left: auto;
margin-right: auto;
float: block;
position: relative;
}
#thesis {
display: block;
margin-left: auto;
margin-right: auto;
float: block;
position: relative;
}

#domesticating {
display: block;
margin-left: auto;
margin-right: auto;
float: block;
position: relative;
}

#foam {
display: block;
margin-left: auto;
margin-right: auto;
float: block;
}

@media screen and (min-width: 800px) {
#foam {
top: 0%;
  position: relative;
}
}
@media screen and (max-width: 800px) {
#foam {
position: relative;
    top: -50px;
}
}
@media screen and (max-width: 600px) {
#foam {
position: relative;
    top: 10px;
}
}


@media screen and (max-width: 600px) {
#empty2 {
display: none;
height: 1px;
}
}

@media screen and (max-width: 600px) {
#empty {
display: none;
height: 2px;
}
}

@media screen and (min-width: 800px) {
#specimen {
top: 0.5%;
position: relative;
}
}
@media screen and (max-width: 800px) {
#specimen {
top: 10px;
position: relative;
}
}
@media screen and (max-width: 600px) {
#specimen {
margin-top: 40px;
position: relative;
}
}
@media screen and (max-width: 400px) {
#specimen {
margin-top: 0px;
position: relative;
}
}
@media screen and (min-width: 600px) {
#corpo {
top: 30px;
position: relative;
}
}
@media screen and (max-width: 600px) {
#corpo{
top: 40px;
position: relative;
}
}
@media screen and (min-width: 800px) {
#bus {
top: 31px;
position: relative;
width: 73%;
}
}
@media screen and (max-width: 800px) {
#bus {
width: 70%;
padding-top: 40px;
position: relative;
}
}
@media screen and (max-width: 600px) {
#bus {
width: 70%;
top: 35px;
position: relative;
}
}
@media screen and (max-width: 400px) {
#bus {
width: 70%;
top: 30px;
position: relative;
}
}
@media screen and (min-width: 800px) {
#ethics {
top: 48px;
position: relative;
}
}
@media screen and (max-width: 800px) {
#ethics {
padding-top: 30px;
position: relative;
}
}
@media screen and (max-width: 600px) {
#ethics {
top: 0px;
}
}
@media screen and (max-width: 400px) {
#ethics {
top: 0px;
}
}

@media screen and (min-width: 800px) {
#pandemic {
top: 90px;
height: auto;
position: relative;
}
}
@media screen and (max-width: 800px) {
#pandemic {
top: 80px;
position: relative;
}
}
@media screen and (max-width: 600px) {
#pandemic {
top: 60px;
position: relative;
}
}
@media screen and (min-width: 800px) {
#gardina {
position: relative;
top: 100px;
}
}
@media screen and (max-width: 800px) {
#gardina {
position: relative;
top: 100px;
}
}
@media screen and (max-width: 600px) {
#gardina {
position: relative;
top: 75px;
}
}
@media screen and (min-width: 800px) {
#helgi {
top: 110px;
position: relative;
}
}
@media screen and (max-width: 800px) {
#helgi {
top: 130px;
position: relative;
}
}
@media screen and (max-width: 600px) {
#helgi {
position: relative;
top: 90px;
}
}

@media screen and (min-width: 800px) {
#deer {
top: 1px;
height: auto;
}
}
@media screen and (max-width: 800px) {
#deer {
padding-top: 60px;
position: relative;
}
}
@media screen and (max-width: 600px) {
#deer {
top: 0px;
}
}
@media screen and (max-width: 400px) {
#deer {
top: -30px;
}
}
@media screen and (min-width: 800px) {
#klifur {
top: 130px;
position: relative;
}
}
@media screen and (max-width: 800px) {
#klifur {
top: 150px;
position: relative;
}
}
@media screen and (max-width: 600px) {
#klifur {
position: relative;
top: 100px;
  padding-bottom: 80px;
}
}


#yearbook {
display: block;
margin-left: auto;
margin-right: auto;
float: block;
}

@media screen and (min-width: 800px) {
#yearbook {
top: 10px;
}
}
@media screen and (max-width: 800px) {
#yearbook {
position: relative;
  top: 30px;
}
}
@media screen and (max-width: 600px) {
#yearbook {
position: relative;
  top: 30px;
}
}
@media screen and (max-width: 400px) {
#yearbook {
position: relative;
  top: 20px;
}
}
@media screen and (min-width: 800px) {
#popup {
top: 100px;
}
}
@media screen and (max-width: 800px) {
#popup {
position: relative;
  top: 60px;
}
}
@media screen and (max-width: 600px) {
#popup {
position: relative;
  top: 60px;
}
}
@media screen and (min-width: 800px) {
#prishtina {
position: relative;
}
}
@media screen and (max-width: 800px) {
#prishtina {
top: -30px;
position: relative;
}
}
@media screen and (max-width: 600px) {
#prishtina {
top: 10px;
position: relative;
}
}
@media screen and (min-width: 800px) {
#sund {
position: relative;
top: 1%;
}
}
@media screen and (max-width: 800px) {
#sund {
top: -20px;
position: relative;
}
}
@media screen and (max-width: 600px) {
#sund {
top: 10px;
position: relative;
}
}
@media screen and (min-width: 800px) {
#thesis {
top: 1%;
position: relative;
}
}
@media screen and (max-width: 800px) {
#thesis {
top: 0px;
}
}
@media screen and (max-width: 600px) {
#thesis {
top: 20px;
}
}
@media screen and (max-width: 400px) {
#thesis {
top: 30px;
}
}
@media screen and (min-width: 800px) {
#sewn {
top: 130px;
position: relative;
}
}
@media screen and (max-width: 800px) {
#sewn {
top: 70px;
position: relative;
}
}
@media screen and (max-width: 600px) {
#sewn {
top: 55px;
position: relative;
}
}
@media screen and (max-width: 400px) {
#sewn {
top: 60px;
position: relative;
}
}

@media screen and (min-width: 800px) {
#domesticating {
top: 40px;
position: relative;
}
}

@media screen and (max-width: 800px) {
#domesticating {
top: 60px;
}
}

@media screen and (min-width: 800px) {
#pixels {
top: 60px;
  width: 63%;
}
}
@media screen and (max-width: 800px) {
#pixels {
top: 70px;
   width: 70%;
}
}



@media screen and (max-width: 600px) {
#pixels {
top: 60px;
  width: 63%;
position: relative;
}
}

.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 0px;
}
@media screen and (max-width: 800px) {
.row {
display: flex;
position: relative;
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}

@media screen and (max-width: 239px) 
  {
.row {margin-top: -50px;
}
}


/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 10px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
@media screen and (min-width: 800px) {
#biblio {
float: right;
position: relative;
right: 26%;
margin-top: 12%;
}
}

@media screen and (max-width: 800px) {
#biblio {
-ms-flex: 160%;
flex: 160%;
max-width: 160%;
right: 82%;
position: relative;
  margin-top: 0px;
}
}

@media screen and (max-width: 600px) {
#biblio {
-ms-flex: 100%;
-webkit-flex: 100%;
flex: 100%;
max-width: 100%;
padding: 10 0px;
right: 0px;
margin-top: 1px;
}
}
@media screen and (max-width: 400px) {
#biblio {
-ms-flex: 100%;
-webkit-flex: 100%;
flex: 100%;
max-width: 100%;
padding: 10 0px;
right: 0px;
margin-top: 0px;
}
}


@media screen and (min-width: 800px) {
#rikk {
float: right;
position: relative;
right: 26%;
margin-top: 1%;
}
}

@media screen and (max-width: 800px) {
#rikk {
-ms-flex: 160%;
flex: 160%;
max-width: 160%;
right: 82%;
position: relative;
  margin-top: 0px;
}
}

@media screen and (max-width: 600px) {
#rikk {
-ms-flex: 100%;
-webkit-flex: 100%;
flex: 100%;
max-width: 100%;
padding: 10 0px;
right: 0px;
margin-top: 1px;
}
}
@media screen and (max-width: 400px) {
#rikk {
-ms-flex: 100%;
-webkit-flex: 100%;
flex: 100%;
max-width: 100%;
padding: 10 0px;
right: 0px;
margin-top: 0px;
}
}



@media screen and (min-width: 800px) {
.center {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
}
}