@font-face {
    font-family: Pebble;
    src: url(https://fonts.avaus.fi/telia/Pebble_W_Rg.eot);
    src: url(https://fonts.avaus.fi/telia/Pebble_W_Rg.eot?#iefix) format("embedded-opentype"), url(https://fonts.avaus.fi/telia/Pebble_W_Rg.woff2) format("woff2"), url(https://fonts.avaus.fi/telia/Pebble_W_Rg.woff) format("woff"), url(https://fonts.avaus.fi/telia/Pebble_W_Rg.ttf) format("truetype")
}

body,
html {
    color: #000000;
    background-color: #fff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    margin: 0;
    width: 100%;
position:absolute;
}


/* Headings, text and links */

a,
 :visited {
    color: #990ae3;
    text-decoration: none;
}

a:hover {
    color: #c0f;
    text-decoration: none;
}

h1 {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif!important;
    font-weight: 400;
    font-size: 26px!important;
    line-height: 1;
    letter-spacing: 0;
    color: white;
    margin-top: 25px;
    margin-bottom: 11px
}

h2 {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif!important;
    color: #000000;
    font-weight: 400;
    font-size: 34px;
    margin-top: 0;
    font-weight: bold;
}


h3 {
    font-family: Pebble!important;
 text-transform: uppercase;
    color: #222;
 line-height: 1;
 letter-spacing: -0.08px;
    font-size: 26px!important;
    font-weight: 400;
    margin: 0;
    margin-bottom: 24px;
}

div.text p{
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif!important;
    color: black;
    font-size: 16px!important;
    font-weight: 400;
    margin: 0;
    margin-bottom: 20px;
    text-transform: none;
}

p.subtitle {
    font-family:Pebble, Helvetica Neue, Helvetica, Arial, sans-serif!important;
  
}


.thankyou{
 font-family: Pebble, Helvetica Neue, Helvetica, Arial, sans-serif;
 color: #990ae3;
 font-weight: bold;
 margin-top: 24px;
font-size: 24px;
}

/* Navigation and Header */

.navi {
    position: fixed;
    display: flex;
    align-items: center;
    height: 65px;
    width: 100%;
    background-color: white;
    z-index: 1000;
}

.navi-icon {
    margin-left: 72px;
}

.header {
 top: 25px;
    position: relative;
    height: 150px;
    width: 100%;
    background-color: blueviolet;
    text-align: left;
    background-image: url("https://image.asiakas.telia.fi/lib/fe8b137374640c747d/m/3/2d41cfb9-f31a-48cb-9ffd-e17b9f467ba3.png");
    background-color: #990AE3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.header-text {
    position: absolute;
    width: 50%;
    top: 50%;
    left: 72px;
    transform: translateY(-50%);
}


/* Content */

.base-container {
    top:65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 100%;
    height: auto;
    background-color: white;
    min-height: calc(100vh - 500px);

}

.name-container {
    padding-top: 24px;
    padding-bottom: 24px;
    margin-left: 24px;
}

.form-container {
    margin-left: 48px;
    margin-right: 48px;
    margin-bottom: 24px;
    margin-top: 48px;
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    background-color: #fff;
}

.item-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    background-color: #fff;
    margin: 25px 20px;

}

.email-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}


.button-wrapper {
    margin-bottom: 48px;
}

button:focus {
    outline:none!important;
}


/* Footer lila content */


.footer-lila {
    top: 65px;
    position: relative;
    display: flex;
    justify-content: center;
    height: 170px;
    width: 100%;
    margin-bottom: 50px;
    background-color: #990ae3;
}

.footer__copyright {
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    padding-bottom: 30px;
    text-align: center
}

@media (max-width:830px) {
.footer__copyright {
    padding-bottom: 55px;
    
}
}

@media (max-width:600px) {
.footer__copyright {
    padding: 0px 30px 65px 30px;
    
}
}

.footer__copyright-text {
    position: relative;
    display: inline-block;
    top: 50%;
    margin-left: 10px;
    transform: translateY(-50%);
}

.footer__copyright-link {
    position: relative;
    display: inline-block;
    top: 50%;
    margin: 10px;
    transition: color .2s;
    transform: translateY(-50%);
}

.footer__copyright-link:link {
    color: rgba(255, 255, 255, .7)
}

.footer__copyright-link:active,
.footer__copyright-link:visited {
    color: #fff
}

.footer__copyright-link:hover {
    color: #fff
}


/* Footer some content */

.footer-white {
    top: 65px;
    position: relative;
    display: flex;
    justify-content: center;
    height: 200px;
    width: 100%;
    ;
}

.footer-social-media {
    width: 100%;
    text-align: center;
}

.somebutton {
    position: relative;
    display: inline-flex;
    margin-right: 10px;
    margin: 15px;
}

@media(max-width: 600px) {
    .somebutton {
        margin: 5px;
    }
}

svg .some path {
    transition: 200ms;
    transition-timing-function: ease-in-out;
    -webkit-transition: 200ms;
    -webkit-transition-timing-function: ease-in-out;
}

.somebutton:hover svg path,
.somebutton:hover {
    fill: #c0f;
}

svg .some_inline:hover path {
    fill: #c0f;
}

.heading-small {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.55px;
    line-height: 16px;
    margin-bottom: 20px;
}


/* Other elements */


/*button*/

button {
    font-size: 16px!important;
    letter-spacing: .8px;
    line-height: 18px!important;
    font-weight: 700!important;
    white-space: nowrap;
    padding: 0 2em;
    height: 40px;
    border: 2px solid transparent;
    color: #fff;
    background-color: #990ae3;
    border-radius: 999px!important;
    text-transform: uppercase;
    transition: all .2s;
    cursor: pointer;
}

.button:hover {
    color: #fff;
    background-color: #c0f
}



.col-sm {
    padding-left: 0!important;
    padding-right: 30px!important;
}

label {
    margin-bottom: 0!important;
}
div.checkbox-label {
    margin-bottom: 10px;
    font-size: 16px!important;
}

div.mdl-textfield {
    width: 500px;
}

.mdl-checkbox {
 height: auto!important;
}

.info-icon{
    position: absolute;
    top: 25;
    font-size: 18px!important;
    color: deepskyblue;
    right: 10;
    cursor:pointer;
}

.info-icon:focus{
   outline:none;
}

/* Mobile */

@media (max-width:650px) {
    h1 {
        font-size: 1.8em;
    }
}


    @media (max-width:650px) {

        .form-container {
            margin: 12px 24px;
        }
        .footer__copyright-text {
            position: relative;
            display: inline-block;
            top: 45%;
            margin-left: 10px;
            transform: translateY(-55%);
        }
        .footer__copyright-link {
            position: relative;
            display: inline-block;
            top: 45%;
            margin-left: 10px;
            transition: color .2s;
            transform: translateY(-55%);
        }
        .item-container {
            margin-left: 24px;
            margin-right: 24px;
   margin-bottom: 24px;
   margin-top: 24px;


 
        }
        .header-text {
            margin-left: 0px;
   left: 24px;
        }
        .navi-icon {
            margin-left: 24px;
        }
    }

/* Heading in wider screen */

@media (min-width:650px) and (max-width: 800px) {
    h1 {}
}

@media (min-width:1200px) and (max-width: 2600px) {
    h1 {}
}

 .iconit {
        display: inline-flex;
        text-align: center;
        width: 100%;
        justify-content: center;
        padding-bottom: 24px;
        z-index: 2;
    }
    
    .iconit img {
        max-width: 46px;
        max-height: 46px;
    }
    
    .iconihover {
        border-radius: 50%;
        width: 46px;
        height: 46px;
        margin: 4px;
        transition: all .2s;
    }
    
    .iconihover:hover {
        border-radius: 50%;
        width: 46px;
        height: 46px;
        background-color: #cc00ff;
    }
    
    a {
        cursor: pointer;
    }