/* Fonts */

@font-face {

  src: url(<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">);
}


/* Default styling */

body {
  margin: 0;
}

h1 {
  font-size: 40px;
  text-align: center;
  padding: 10px;
}

.copyright {
  color: #f2f2f2;
  padding: 5px;
}

.formknapp{ /* styler knapper i samtlige forms */
  width: 100%;
  height: 30px;
  border-radius: 10px;
  background-color: #333333;
  color: #FFFFFF;
  font-family: sans-serif;
  cursor: pointer;
}

/* default styling ferdig */


/* Navngir grid-areas */

.main-head {
    grid-area: header;
    background-color: #333333;
    width: 100%;
    height: 75px;
}

.main-nav {
    grid-area: nav;
    width: 100%;
    height: 200px;
	font-family: 'Roboto', sans-serif;
}

.content {
    grid-area: content;
    background-color: #f2f2f2;
    width: 100%;
}

.main-footer {
    grid-area: footer;
    background-color: #333333;
    width: 100%;
    height: 70px;
    /* position: sticky;
    bottom: 0; */
}

/* mobil */
/* mobil */
/* mobil */

.wrapper {
    display: grid;
    grid-gap: 0px;
    grid-template-areas:
    "header"
    "nav"
    "content"
    "footer";
    grid-template-columns: 1fr ;
    grid-template-rows: 75px;
    width: 100%;
}


/* ----- header ------ */

.main-head {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* header slutt*/


/* ------nav ------- */

.main-nav {
    display: none;
    position: sticky;
    top: 75px;
    z-index: 1;
}

.main-nav ul {
    list-style-type: none;
    padding-left: 0px;
    margin-top: 0px;
    float: right;
    width: 100%;
}

.main-nav ul li a {
    display: block;
    border: 1px solid;
    border-radius: 2px;
    padding: 10px;
    text-decoration: none;
    color: #FFFFFF;
    background-color: #333333;
}

.main-nav ul li a:active {
    background-color: #F2F2F2;
    color: #333333;
}

/* nav slutt*/


/* ----- hamburger-meny -----*/

.meny-knapp {
    display: none;
}

.main-head .meny-ikon {
    padding: 25px 10px;
    margin: 10px 15px 5px 0px;
    position: relative;
    float: right;
    cursor: pointer;
}

.main-head .meny-ikon .hamburger {
    background: #F2F2F2;
    display: block;
    border-radius: 5px;
    height: 5px;
    width: 30px;
    position: relative;
}

.main-head .meny-ikon .hamburger:before {
    background: #F2F2F2;
    content: "";
    display: block;
    border-radius: 5px;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 10px;
    transition: all 0.5s ease-out;
}

.main-head .meny-ikon .hamburger:after {
    background: #F2F2F2;
    content: "";
    display: block;
    border-radius: 5px;
    height: 100%;
    width: 100%;
    position: absolute;
    top: -10px;
    transition: all 0.5s ease-out;
}

.main-head .meny-knapp:checked~.meny-ikon .hamburger {
    background: transparent;
}

.main-head .meny-knapp:checked~.meny-ikon .hamburger:before {
    transform: rotate(-45deg);
    top: 0;
}

.main-head .meny-knapp:checked~.meny-ikon .hamburger:after {
    transform: rotate(45deg);
    top: 0;
}

/* hamburger-meny slutt*/

/* ----- Logo ----- */
#ValgappLogo {
   height: 50%;
   width: auto;
   border: none;
   padding: 5px;
}

/* Logo slutt */

/* index info */

.info {
  text-align: center;
  margin: auto;
}

.info a{
  margin: 10px;
  border: solid #333333;
  padding: 10px;
  height: ;
  text-decoration: none;
  border-radius: 5px;
  color: #FFFFFF;
  background-color: #333333;
}

.pilopp{
  width: 20px;
  height: 20px;
  border: none;
}

.info hr{
    width: 80%;
}

/* index info slutt */

/* ----- registrering -----*/

.registreringsform{
  display: block;
  width: 80%;
  margin: 5px auto;
  padding: 15px;
  background-color: #F2F2F2;
  color: #333333;
  border: solid 1px;
  border-radius: 5px;
  z-index: 2;
  box-shadow: 5px 10px 20px 5px#888888;
}

.registreringsform input{
  position: relative;
  padding: 5px;
  margin: 1px;
  border-radius: 5px;
  border: none;
  width: 100%;
  height: 30px;
}

.kandidaterbilde{
  display: block;
  text-align: center;
  margin: 5px auto 5px;
}

.kandidaterbilde img{
  width: 280px;
  height: 280px;
  border-radius: 5px;
  box-shadow: 5px 10px 20px 5px#888888;
}


/* registrering slutt*/


/* ----- nominering ----- */

.kandidatformN {
  width: 50%;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
  background-color: #FFFFFF;
  margin: 5px auto 5px auto;
  padding: 10px;
  box-shadow: 5px 10px 20px 5px#888888;
}

.kandidatform p{
  text-align: left;
}

.kandidatbilde {
  text-align: center;
}

.kandidatbilde img{
  width: 120px;
  padding: 5px;
  border: transparent;
  border-radius: 40px;
}

.nominerKandidatSkjema{
  display: block;
  width: 80%;
  margin: 5px auto;
  padding: 15px;
  background-color: #F2F2F2;
  color: #333333;
  border: solid 1px;
  border-radius: 5px;
  z-index: 2;
  box-shadow: 5px 10px 20px 5px#888888;
}

.nominerKandidatSkjema input{
  position: relative;
  padding: 5px;
  margin: 1px;
  border-radius: 5px;
  border: none;
  width: 100%;
  height: 30px;
}

/* nominering slutt*/

/* ----- Avstemming ----- */

.finnKandidat{
  margin: 5px;
}

#faktultetValg{
  width: 100%;
  margin: 5px auto 5px auto;
  border-radius: 20px;
  box-shadow: 5px 5px 15px#888888;
}

#instituttValg{
  width: 100%;
  margin: 5px auto 5px auto;
  border-radius: 20px;
  box-shadow: 5px 5px 15px#888888;
}

#kandidatSok{
  width: 100%;
  margin: 5px auto 5px auto;
  border-radius: 20px;
  box-shadow: 5px 5px 15px#888888;
}

.kandidatformA {
    display: block;
    border: 1px solid #dfdfdf;
    padding: 25px;
    margin: 5px auto 5px auto;
    background-color: #FFFFFF;
    box-shadow: 5px 10px 20px 5px#888888;
}

.kandidatSøk {
    width: 150px;
    margin-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 30px;
}


/* Avstemming slutt*/


/* ----- logginn ----- */

.logginn {
  display: block;
  width: 80%;
  margin: 5px auto 5px;
  padding: 15px;
  background-color: #F2F2F2;
  color: #333333;
  border: none;
  border-radius: 5px;
  box-shadow: 5px 10px 20px 5px#888888;
}

.logginn h1{
  font-size: 30px;
}

.logginn label{
  position: relative;
  text-align: left;
}

.logginnBilde {
    width: 100px;
    height: 100px;
    border: none;
    background-color: #F2F2F2;
}

.loginbilde-pos {
    text-align: center;
}

.logginn h1 {
    column-span: none;
    text-align: center;
    font-family: sans-serif;
}

.logginn .logginnKnapp {
    text-align: center;
    padding: 5px;
}

.logginn input {
  position: relative;
  padding: 5px;
  border-radius: 5px;
  border: none;
  width: 100%;
  height: 30px;
}

.logginnKnapp input:hover {
    color: white;
    background-color: black;
    cursor: pointer;
    transition-duration: 1s;
}

.linker {
    font-family: sans-serif;
    text-align: center;
}
.linker a{
  color: blue;
}


/* logginn slutt */

/* registrer bruker form */

.regbruker {
  /*display: none;*/
  width: 80%;
  margin: 5px auto 5px;
  padding: 15px;
  background-color: #F2F2F2;
  color: #333333;
  border: none;
  border-radius: 5px;
  box-shadow: 5px 10px 20px 5px#888888;
}

.regbruker h1{
  font-size: 30px;
}

.regbruker label{
  position: relative;
  text-align: left;
}

 .regbruker input{
  position: relative;
  padding: 5px;
  border-radius: 5px;
  border: none;
  width: 100%;
  height: 30px;
}

.regbruker a{
  color: blue;
  text-align: center;
  margin: auto;
}


.logginnBilde { /* samme bilde i regform */
    width: 80px;
    height: 80px;
    border: none;
    background-color: #F2F2F2;
    padding: 0px;
}
/* registrer bruker slutt */

/* bytt passord */

::placeholder{
  font-size: 8px;
}
.byttpassord{
  text-align: center;
  width: 230px;
  margin: auto;
}

.byttpassord img{
  border-radius: 50px;
  box-shadow: 5px 10px 20px 5px#888888;
  transition: all 2s ease-out;
}

.byttpassord:hover img {
  opacity: 0.3;
  transition: all 2s ease-out;
}

/* bytt passord ferdig */

/* ----- printlogo ----- */
.printknapp{
  float: right;
  background-color: #333333;
  border: none;
  border-radius: 50px;
  cursor: pointer;
}


.printlogo{
  width: 30px;
  height: 30px;
  float: right;
  margin: 10px 10px 10px 10px;
  padding: 5px;
  border: none;
  border-radius: 10px;
  background-color: #dfdfdf;
}

/* printlogo slutt */

/* php stil */
.feilmld{
  text-align: center;
}
/* php stil */

/* mobil slutt */
/* mobil slutt */
/* mobil slutt */


/* Nettbrett */

@media (min-width: 600px) {
    .wrapper {
        grid-template-columns: 1fr 3fr 1fr ;
        grid-template-areas:
        "header  header header"
        "nav     nav    nav"
        "content content content"
        "content content content"
        "footer  footer  footer";
    }

    /* header */

    .main-head {
      position: sticky;
      top:0;
      text-align: center;
    }

    .meny-ikon {
        /* mobilmeny borte */
        display: none;
    }

    /* header slutt*/

    /* nav */

    .main-nav {
        display: block;
        background-color: #333333;
        font-family: 'Roboto', sans-serif;
        height: 40px;

    }

    nav ul {
        display: flex;
        justify-content: space-between;
        margin:0;
        background-color:#333333;

    }

    .main-nav ul li a{
    display: block;
    border: 0px solid;
    padding: 10px;
    text-decoration: none;
    color: #FFFFFF;
    background-color: #333333;
  }
    /* nav slutt*/

  /* ----- registrering -----*/

  .registreringsform{
    display: block;
    float: left;
    width: 50%;
    margin: 5px auto 5px auto;
    z-index: 2;
  }

  .kandidaterbilde{
    display: block;
    float: right;
    margin-right: 10px;
  }

  .kandidaterbilde img{
    width: 300px;
    height: 300px;
    border-radius: 5px;
  }

  /* registrering slutt */

  /* ----- nominering ----- */

  .nominerKandidatSkjema{
    width: 50%;
    margin-bottom: 10px;
  }

  .nFormer{ /* pakker alle nomineringsformer og sentrerer */
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .kandidatformN {
      width: 32%;
  }

  .kandidatform p{
    text-align: center;
  }

  .kandidatbilde {
    text-align: center;
  }

  .kandidatbilde img{
    width: 180px;
    border: transparent;
    border-radius: 40px;
  }


  /* nominering slutt*/

  /* ----- Avstemming ----- */
  .finnKandidat{
    margin: 5px auto 10px auto;
    width: 50%;
  }

  #faktultetValg{
    height: 40px;
  }

  #instituttValg{
    height: 40px;
  }

  #kandidatSok{
    height: 40px;
  }

  .aFormer{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .kandidatformA { /* pakker alle avstemmingsformer og sentrerer */
      width: 27%;
  }
  /* Avstemming slutt*/

  /* logginn */
  .logginn{
    width: 50%;
  }
  /* logginn slutt */

/* registrer bruker */
.regbruker {
  width: 50%;
}
/* registrer bruker slutt*/

}

/* Større skjerm */

@media (min-width: 850px) {
  .wrapper {
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "header header  header"
    "nav    nav     nav"
    "content content content"
    "content content  content"
    "footer footer  footer"
    ;
  grid-template-rows: 75px 75px;
}

/* ----- registrering -----*/

.registreringsform{
  width: 40%;
  margin: 5px auto 5px 50px;
}

.kandidaterbilde{
  display: block;
  float: right;
  margin-right: 70px;
}

.kandidaterbilde img{
  width: 450px;
  height: 400px;
  border-radius: 5px;
}

/* registrering slutt */

/* ----- nominering ----- */

.nominerKandidatSkjema{
  width: 30%;
}

.nFormer{ /* pakker alle nomineringsformer og sentrerer */
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.kandidatformN {
    width: 29%;
}

/* nominering slutt*/

.aFormer{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.kandidatformA { /* pakker alle avstemmingsformer og sentrerer */
    width: 27%;
}
/* Avstemming slutt*/

/* logginn */
.logginn{
  width: 40%;
}
/* logginn slutt */

/* registrer bruker */
.regbruker{
    width: 40%;
}
/* registrer bruker slutt */
::placeholder{
  font-size: 15px;
}

}

@media (min-width: 2000px){
  /* ----- registrering -----*/

  .registreringsform{
    float: left;
    width: 30%;
    margin: 5px auto 10px 20px;
  }

  .kandidaterbilde{
    display: block;
    float: left;
    margin-left: 20px;
  }

  .kandidaterbilde img{
    width: 500px;
    height: 500px;
    border-radius: 5px;
  }

  /* registrering slutt */

  /* ----- nominering ----- */

  .nominerKandidatSkjema{
    width: 30%;
  }

  .nFormer{ /* pakker alle nomineringsformer og sentrerer */
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .kandidatformN {
      width: 15%;
  }

  /* nominering slutt*/

/* Avstemming */
.aFormer{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.kandidatformA { /* pakker alle avstemmingsformer og sentrerer */
    width: 27%;
}
  /* Avstemming slutt*/

  /* logginn */
  .logginn{
    width: 30%;
  }
  /* logginn slutt */

  /* registrer bruker */
  .regbruker{
      width: 30%;
  }
  /* registrer bruker slutt */

  /* footer */
  .main-footer{
    position: fixed;
    bottom: 0;
  }
  /* footer ferdig */

}

/* Denne siden er utviklet av Alf Almen, sist gang endret 16.10.2020
 Denne siden er utviklet av Redjo Husanovic, sist gang endret 16.10.2020
Denne siden er utviklet av Sindre Olsen, sist gang endret 16.10.2020 */

/* Denne siden er kontrollert av Alf Almen, sist gang endret 16.10.2020
 Denne siden er kontrollert av Redjo Husanovic, sist gang endret 16.10.2020
Denne siden er kontrollert av Sindre Olsen, sist gang endret 16.10.2020 */