@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');



* {

  box-sizing: border-box;



}



body {

  font-family: Arial, Helvetica, sans-serif;

  margin: 0;

  background-color: #222;

}



#toppen {

  color: white;

  height: 1em;

  font-family: 'Montserrat';

  font-size: 1.2em;

}



/*header*/

.header {

  padding: 0.02% 3% 0.02% 3%;

  background-color: #1c386f;

  text-align: center;

  color: rgb(255, 255, 255);

  font-family: Arial;

}



/*navigering*/

.navbar {

  display: flex;

  background-color:  #4781c6;

  justify-content: space-around;

  font-size: 1em;

  color: rgb(255, 255, 255);

}



.navbar a {

  color: #fff;

  padding: 14px 20px;

  text-decoration: none;

  text-align: center;

}



.navbar a:hover {

  background-color: #ddd;

  color: black;

}



/*content*/

.main {

  display: flex;

  flex-direction: row;

}



h2{

padding-bottom: 0;

padding-top: 2%;

}



h1 {

  text-align: center;

}



.side {

  flex-direction: column;

  flex: 30%;

  background-color:  #739ccedc;

  padding: 20px;

}



.products {

  flex-direction: column;

  flex: 70%;

  background-color: #95b0d2;

  padding: 1em;

}



.item {

  display: flex;

  flex-direction: row;

  padding: 2% 0 2% 0;

}



.item_image {

  flex: 30%;

  background-color: #739ccedc;

  margin-right: 1em;

  padding-top: 3%;

}



.item_image img {

  min-width: 100%;

  min-height: 100%;

  max-width: 100%;

  max-height: 100%;

}



.item_info {

  flex-direction: column;

  flex: 70%;

  min-width: 70%;

}



.text_right, .back {

  text-align: right;

  padding: 0 3% 0 0;

}



.form {

  float: right;

}



.form select,

.form button {

  width: 15rem;

}



.form select {

  margin-bottom: 1rem;

}

.text_right {

  font-weight: bold;

  color:#1c386f;

  font-size: 1.2em;

}



.erbjud {

  color: rgb(255, 0, 0);

}





/*side förmular*/

.regform {

  width: 100%;

  margin: auto;

  margin-top: 1em;

  padding-bottom: 0;

}



fieldset,

dl {

  position: relative;

  border-radius: 3em;

  padding: 5% 12% 5% 12%;

  background: #ecf0f3;

  list-style-type: none;

  box-shadow: 14px 14px 20px #01366b;

}



.h2form {

  margin-top: 0.5em;

  margin-bottom: 1em;

}



.typetext label,

.typetext input,

button,

.typeselect label,

select {

  display: block;

  width: 100%;

  padding: 0;

  border: none;

  outline: none;

  box-sizing: border-box;

  margin-bottom: 5%;

}



legend {

  font-size: 1.5em;

  text-align: initial;

  background-color: #11456ffa;

  border-radius: 5px;

  color: #ffffff

}



.typetext label,

.typeselect label,

.typecb,

.typerb {

  margin-bottom: 4px;

  text-align: center;

  font-weight: 700;

  color: #1c386f;

}



.typeradio label.container,

.typecheckbox label.container {

  text-align: left;

}



label:nth-of-type(2) {

  margin-top: 5px;

}



input::placeholder {

  color: gray;

}



.typetext input {

  background: #ecf0f3;

  padding: 10px;

  padding-left: 20px;

  height: 50px;

  font-size: 14px;

  box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;

  border-radius: 20px;

}



select {

  background: #ecf0f3;

  color: #06487d;

  padding: 10px;

  padding-left: 20px;

  padding-right: 20px;

  height: 50px;

  font-size: 14px;

  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(210, 206, 206, 0.2) 0px -3px 0px inset;

  border-radius: 5px;

}



.container {

  /* The checkboxcontainer */

  display: block;

  position: relative;

  padding-left: 35px;

  margin-bottom: 12px;

  cursor: pointer;

  font-size: 1em;

}



.container input {

  /* Hide the browser's default checkbox */

  position: absolute;

  opacity: 0;

  cursor: pointer;

}



.ccheckmark {

  /* Create a custom checkbox */

  position: absolute;

  top: 0;

  left: 0;

  height: 25px;

  width: 25px;

  background-color: #eee;

  color: #1c386f;

}



.rcheckmark {

  /* Create a custom radio button */

  position: absolute;

  top: 0;

  left: 0;

  height: 25px;

  width: 25px;

  background-color: #eee;

  border-radius: 50%;

  color: #1c386f;

}



.container:hover input~.ccheckmark,

.container:hover input~.rcheckmark {

  /* On mouse-over, add a grey background color */

  background-color: #ccc;

}



.container input:checked~.ccheckmark,

.container input:checked~.rcheckmark {

  /* When the checkbox is checked, add a blue background */

  background-color: #06487d;

}



.ccheckmark:after,

.rcheckmark:after {

  /* Create the checkmark/indicator (hidden when not checked) */

  content: "";

  position: absolute;

  display: none;

}



.container input:checked~.ccheckmark:after,

.container input:checked~.rcheckmark:after {

  /* Show the checkmark when checked */

  display: block;

}



.container .ccheckmark:after {

  /* Style the checkmark/indicator */

  left: 9px;

  top: 5px;

  width: 5px;

  height: 10px;

  border: solid white;

  border-width: 0 3px 3px 0;

  transform: rotate(45deg);

}



.container .rcheckmark:after {

  /* Style the radio/indicator */

  left: 6.5px;

  top: 6.5px;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  border: solid white;

}



.checkboxradio {

  display: flex;

  flex-direction: row;

  justify-content: space-around;

  margin-left: auto;

}



button {

  color: white;

  margin-top: 0.5em;

  margin-bottom: 1em;

  background: #1c386f;

  height: 40px;

  border-radius: 20px;

  cursor: pointer;

  box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px white;

  transition: 0.5s;

  font-size: 1em;

}



button:hover {

  box-shadow: none;

  background: #4781c6;

}



footer {

  color: white;

  text-align: center;

  padding: 0;

  position: relative;

  bottom: 0;

  width: 100%;

  background-color: black !important;

  font-size: 0.55em;

  font-family:'Montserrat';

  

 

}





.betalning {

    margin: 0;

    padding: 10px;

    text-align: center;



}

.shop-footer {

    background-color: gray;

    display: flex;

    justify-content: center;

    padding: 33px 0 33px 0;

}

.betalning ul {

    list-style-type: none;

    padding: 0;

}

.betalning ul li {

    display: inline-block;

    margin: 0 15px;

}

.betalning ul li img {

    width: 60px; 

    height: 40px; 

    object-fit: contain; 

    

}



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



  .navbar,

  .main,

  .product,

  .item {

    flex-direction: column;

  }

}





@media screen and (max-width: 700px) {



  .navbar,

  .main,

  .product,

  .item {

    flex-direction: column;

  }



   footer {

    width: 100%;

  }

}