/***************
MEDIA QUERIES
***************/

@media handheld and (max-width: 1024px),
       screen and (max-device-width: 1024px),
       screen and (max-width: 1024px){

/*******************************
INDEX PAGE
********************************/

#img_project1_text {
  margin-top: -12%;
} 

.w3 {
  margin-left: 10%;
  margin: 10px;
  width: 100%;
}   

.logo_text3 {
  margin-top: 30px; 
  }   

/*******************************
TEST PAGE
********************************/

#img_test1_text {
  margin-top: -13%;
  font-size: 2em;
} 


/*******************************
BASE class
********************************/

.column_project {
  margin-bottom: 20px;
}

/*******************************
CAMERA PAGE
********************************/

.column_project_cam {
  margin-bottom: 20px;
  margin-top: 17%;
}

#video {
  margin-left: 20%;
  margin-top: -25%;
  width: 50%;
}  

#canvas {
  margin-left: 20%;;
  width: 50%;
} 

#photo {
  margin-left: 20%;;
  width: 50%;
}  

}

/*******************************
GEOLOCATION PAGE
********************************/

.column_project_geo {
  margin-bottom: 20px;
  margin-top: 17%;
}

img#karta {
  margin-left: 20%;
  margin-top: -25%;
  width: 50%;
} 

#information {
  margin: 0px;
  padding: 5%;
}

}
/*END MEDIA 1024px*/

@media handheld and (max-width: 600px),
       screen and (max-device-width: 480px),
       screen and (max-width: 700px) {

/*******************************
INDEX PAGE
********************************/

#img_project1_text {
  margin-top: -13%;
} 

/*******************************
TEST PAGE
********************************/

#img_test1_text {
  margin-top: -13%;
  font-size: 1.8em;
} 

}
/*END MEDIA 600px*/

@media handheld and (max-width: 480px),
       screen and (max-device-width: 480px),
       screen and (max-width: 600px) {

.wrapper {

 
}

/****************************
HEADER
****************************/

body {
 
}

h1 {
  
}

.header_text {
  margin-bottom: 20px;
}

aside {
  display: none;
}

.logo_text2 {
  display: none;
}

/********************************
NAVIGATION
*********************************/

nav { 
  display: inline-block;
  float: left;
  padding-top: 20px;
  margin-bottom: 0px;
  margin-left: 0%;
  width: 100%;
  
}
/*Här anger jag min-width så att inte länkarna går ihop*/
 ul {
  width: 100%;
 }

 li {
  display: inline;
  float: left;
  text-align: center;
  width: 100%;
 } 
/*texten på länkarna*/
 a {
  display:inline-block;
  float: left;
  letter-spacing: 5px;
  margin-right:auto;
  width: 100%;
}

li a:hover {
  background-color: #79797f;
  border-top: 1px solid #001;
  border-bottom: 1px solid #001;
  color: #fff;
  padding-bottom: 5px;
}

/*Id link används för att kontrollera texten på länkarna*/

#link1, #link2, #link3 {
   border-right: none;
   margin-bottom: 10px;
}

.last1 {
  margin-top: 5px;
  display: none;
}

.last2 {
  display: block;
}

#link5 {
   margin-bottom: 20px;
   margin-top: 10px;
}

/***************
INDEX PAGE 
***************/

.content {
  display: inline-block;
  width: 100%;
}

#img_project1 {
  border-radius: 0.2em;
  margin-left: 18%;
  width: 56%;
}

#img_project1_text {
  margin-top: -16%;
  margin-left: 18%;
  width: 56%;
}


/***************
CAMERA PAGE 
***************/

#video {
  border-radius: 0.2em;
  margin-left: 6%;
  width: 80%;
}

.booth-capture-button {
  border-radius: 0.1em;
}

#canvas {
  border-radius: 0.2em;
  margin-left: 6%;
  width: 80%;
}

#photo {
  border-radius: 0.2em;
  margin-left: 6%;
  width: 80%;
}  

/*******************************
GEOLOCATION PAGE
********************************/

img#karta {
  border-radius: 0.2em;
  margin-left: 6%;
  width: 80%;
}

#information {
  margin: 0px;
  padding: 5%;
}

/*******************************
TEST PAGE
********************************/

#img_test1 {
  border-radius: 0.2em;
  margin-left: 18%;
  width: 56%;
}

#img_test1_text {
  font-size: 1.3em;
  margin-top: -16%;
  margin-left: 18%;
  width: 56%;
}

}

/*END MEDIA 600px*/

/***************
MEDIA PRINT
***************/

@media print {
img { 
  display: none; 
}

nav {
  display: none;
}

header {
  display: none;
}
}