/*-- custom elsjekk --*/

body {
	background: #FEFCF8;
}

.grid-container, .page-main {
    max-width: 100rem !important;
    font-size: 16px;
}

/*--Header--*/

.logo-contain img {
    max-width: 180px;
    padding: 3em 0;
}

/*--Headings--*/

.image-area h1, .skjema-bestilling h3 {
    color: #143C6E;
}

/*--El-img--*/

.img-Container {
    position: relative;
}

.img_bg {
    width: 270px;
    height: 270px;
    background: #B8DDE1;
    border-radius: 50%;
    margin: auto;
}

.page-icon {
    position: absolute;
    top: 40%;
    left: 49.4%;
    transform: translate(-50%, -50%);
}

.img-Container img {
    max-width: 230px;
}

.image-area h1 {
    text-align: center;
    font-size: 2em;
    margin: 1em 0;
}

/*--Takk-img--*/

.takk-contain img {
    max-width: 345px;
}

.page-icon.takk-img {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.takk-seksjon h1 {
    margin-bottom: 0;
}

.takketekst p {
    text-align: center;
    font-size: 18px;
    margin-top: 1em;
    max-width: 45%;
    margin: 1em auto 3em;
}

@media screen and (max-width: 910px) {
    .takketekst p {
    max-width: 100%;
    }
}

/*--Pris-boks--*/

.pris-boks {
    border: 12px solid #FED36C;
    box-sizing: border-box;
}

/*-- Form container --*/

.form-column {
    border: 12px solid #EDEDED;
    box-sizing: border-box;
    padding: 2em;
    align-self: flex-start;
    margin-top: 5em;
}

/*-- Form styles --*/

.skjema-bestilling h3 {
    text-align: center;
    margin-bottom: 2em;
    margin-top: 1em;
    font-weight: 600;
}

.skjema-bestilling form {

}

.skjema-bestilling form .row.grid-x {
    margin-left: 0;
    margin-right: 0;
}

.skjema-bestilling .grid-margin-x > .medium-6 {
    width: calc(50%);
}

.skjema-bestilling .grid-margin-x > .medium-12 {
    width: calc(100%);
}

/*form headings*/

h4.sectionHeading {
    margin-top: 1em;
}

/*radio btns*/

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

    .radio label {
        cursor: pointer;
        padding-left: 35px;
        position: relative;
    }

    .radio-container.radio {
    padding-left: 6%;
    }

}

/*--Form spacing--*/

.two-columns .columns:first-child {padding-right: .4em;}
.two-columns .columns:last-child {padding-left: .4em;}
.two-columns, .one-columns {margin-bottom: .8em;}

/*--Input-styling--*/

.floating-label-wrap {
    background: #F5F5F5;
}

.floating-label {
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
    z-index: 1500;
}

/* Reset browser-specific focus styles */
.floating-label-field {
    color: #FFF;
    border-width: 0;
    z-index: 2000;
}
.floating-label-field:focus {
    outline: 0;
    box-shadow: none;
}
.floating-label-field::placeholder {
    color: rgba(44, 62, 80, .5);
}

/* Så label og field er identiske i alle browsere */
.floating-label,
.floating-label-field {
    font: inherit;
    line-height: 1; 
    display: block;
    width: 100%;
}

.floating-label-field,
.floating-label-wrap {
    position: relative;
}

.floating-label-field--s3 {
    padding: 1.9em;
    box-shadow: none;
    transition: border-color .25s ease-in-out;
    color: #4F4F4F;
    font-weight: 600;
    border-bottom: 1px solid #CCCED3;
    border-radius: 2px 2px 0 0;
    background-color: transparent;
    margin-bottom: 0;
}

.floating-label-field--s3 ~ .floating-label {
    position: absolute;
    top: .75em;
    left: .75em;
    display: inline-block;
    width: auto;
    margin: 0;
    padding: .75em;
    transition: transform .25s, opacity .25s, padding .25s ease-in-out;
    transform-origin: 0 0;
    color: #545454;
    z-index: 2500;
}
.floating-label-field--s3 ~ .floating-label span {
  color:#CA2B3A;
}

.floating-label-field--s3:focus {
    border: 0;
    border-bottom: 2px solid #00205B;
    padding: 1.85em 1.3em !important;
}
.floating-label-field--s3:focus ~ .floating-label,
.floating-label-field--s3:not(:placeholder-shown) ~ .floating-label {
    z-index: 2500;
    padding: .85em .8em;
    transform: translate(0, -1em) scale(.8);
    color: #525252;
}

/* Vendor input resets - så alt ser likt ut i alle browsere */
.floating-label-field--s3:not(textarea) {
    max-height: 60px;
}

.floating-label-field--s3:not(textarea):active,.floating-label-field--s3:not(textarea):focus, .floating-label-field--s3.not-empty {
    padding: 1.9em 1.5em 1.8em 1.3em;
}

.floating-label-field--s3::placeholder {
    color: transparent;
}

div.mage-error {
    background: #fff;
    font-size: 12px;
    color: #f00;
}

input.mage-error:not(:focus) {
    border-color: #cc4b37;
    background-color: #f9ecea;
}

input.mage-error:not(:focus) ~ .floating-label {
    color: #e1958a;
}

/*radiobuttons*/

input::-ms-clear {
  display: none;
}

.radio label {
  cursor: pointer;
  padding-left: 35px;
  position: relative;
}
.form-group.is-focused .radio label {
  color: rgba(0,0,0, 0.26);
}
.form-group.is-focused .radio label:hover, .form-group.is-focused .radio label:focus {
  color: rgba(0,0,0, .54);
}
fieldset[disabled] .form-group.is-focused .radio label {
  color: rgba(0,0,0, 0.26);
}
.radio label span {
  display: block;
  position: absolute;
  left: 10px;
  top: 0px;
  margin-top: 2px;
  transition-duration: 0.2s;
}
.radio label .circle {
    border: 2px solid #3A3A3A;
    height: 20px;
    width: 20px;
    border-radius: 100%;
}
.radio label .check {
    height: 20px;
    width: 20px;
    border-radius: 100%;
    background-color: #3A3A3A;
    transform: scale3d(0, 0, 0);
}
.radio label .check:after {
  display: block;
  position: absolute;
  content: "";
  background-color: rgba(0,0,0, 0.87);
  left: -18px;
  top: -18px;
  height: 50px;
  width: 50px;
  border-radius: 100%;
  z-index: 1;
  opacity: 0;
  margin: 0;
  transform: scale3d(1.5, 1.5, 1);
}
.radio label input[type=radio]:not(:checked) ~ .check:after {
  animation: rippleOff 500ms;
}
.radio label input[type=radio]:checked ~ .check:after {
  animation: rippleOn 500ms;
}
.radio input[type=radio] {
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}
.radio input[type=radio]:checked ~ .check, .radio input[type=radio]:checked ~ .circle {
  opacity: 1;
}
.radio input[type=radio]:checked ~ .check {
    background-color: #3A3A3A;
}
.radio input[type=radio]:checked ~ .circle {
  border-color: #3A3A3A;
}
.radio input[type=radio]:checked ~ .check {
    transform: scale3d(0.45, 0.45, 1);
}
.radio input[type=radio][disabled] ~ .check, .radio input[type=radio][disabled] ~ .circle {
  opacity: 0.26;
}
.radio input[type=radio][disabled] ~ .check {
  background-color: #000000;
}
.radio input[type=radio][disabled] ~ .circle {
  border-color: #000000;
}

@keyframes rippleOn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rippleOff {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}

/*checkbox edit*/

#checkbox-adrTrigger {
    margin: 7px 0 0 5px;
    vertical-align: top;
    transform: scale(1.4);
}

/*submitBTN*/

button.button.expanded[type="submit"] {
    margin-top: 1em;
    font-weight: 600;
    margin: 1em auto;
    padding: 1.3em 1em;
    font-size: 16px;
}

/*modalTrigger*/

.modal-vilkaar {
    text-align: center;
    margin-top: 1em;
}

.modal-vilkaar a {
    color: #295993;
    font-weight: bold;
    text-decoration: underline;
}

/*--Modal-edits--*/

#vilkaarModal h3 {
    padding-right: 1.4em;
}

#vilkaarModal button.close-button {
    position: absolute;
    top: 1em;
    right: 1em;
}

#vilkaarModal button.close-button span {
    font-size: 32px;
}

/*--Responsiv--*/

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

    .form-column {
        margin-top: 1em;
    }

}

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

    .form-column {
    padding: 1em;
    }

    .two-columns .columns:first-child {padding-right: 0em;}
    .two-columns .columns:last-child {padding-left: 0em;}
    .one-columns, .two-columns {margin: 0;}
    .skjema-bestilling .grid-margin-x > .medium-6 {width: 100%;}
    .floating-label-wrap {margin-bottom: .8em;}

    /*input#checkbox-adrTrigger {
    vertical-align: top;
    margin: 6px 0 0;
    }*/
    label[for="checkbox-adrTrigger"] {
    width: 80%;
    margin-right: 0rem;
    }

}

/*--IE og Edge edits+fixes--*/

@supports (-ms-ime-align: auto) {
    /* Edge styles */

    .floating-label-field--s3::placeholder {
    color: transparent;
    }

    .floating-label-field--s3 + .floating-label {
        font-size: 14px;
        top: 0px;
        margin: 0;
        padding: 8px .75em 0;
        z-index: 100000;
    }

    .floating-label-field--s3 {
        padding: 2em 1.3em 1em !important;
    }

    .radio-container.radio {
        padding-left: 0px;
    }

}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10 & IE11 CSS styles */
    .floating-label-field--s3:-ms-input-placeholder {
    color: #878787;
    }

    .floating-label-field--s3 + .floating-label {
        font-size: 14px;
        top: 0px;
        margin: 0;
        padding: 8px .75em 0;
        z-index: 100000;
    }

    .floating-label-field--s3 {
        padding: 2em 1.3em 1em !important;
    }

    .radio-container.radio {
        padding-left: 0px;
    }
}

.message-error {
    background: #ffcccc;
    padding: 10px 25px;
    margin: 10px 0;
    color: #f00;
}
.message-error:before {
    font-size: 1.5rem;
    left: 2.2rem;
    margin-top: -1rem;
}

.modals-wrapper {
    display: none;
}

.copyright {
    display: block;
    text-align: center;
    padding: 40px 60px;
}