* {
    margin:0;
    padding:0;
    font-size: 18px;
    color:#000000;
    font-family: 'Jura', sans-serif;
}

body{
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-text-stroke:1px transparent;
}

::selection {
    color:white;
    background: #ef4469;
  }

  ::-webkit-scrollbar {
    width: 10px;
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
  
  ::-webkit-scrollbar-thumb {
    background: #ff5252; 
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #ff5252; 
  }

h1{
    font-size:300%;
    color:#47525E;
}
h2{
    font-size:300%;
    color:#47525E;
}
h3{
    font-size:200%;
    color:#47525E;
}

h4{
    font-size:100%;
    color:#47525E;
}

h5{
    font-size:150%;
    color:#47525E;
}

h6{
    font-size:100%;
    color: #47525E;
    font-weight: 700;
    line-height: 50px;
}

p{
    line-height: 30px;
}

a{
    text-decoration: none;
    opacity: 1;
}

a:hover{
    opacity: 0.5;  
}

.white-font{
    color:white;
}

.light-font{
    font-weight: 300;
}
.shadow{
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.bottom-line{
    border-bottom: 1px solid rgb(231, 231, 231);
}

.top-line{
    border-top: 1px solid rgb(231, 231, 231);
}

.grid{
    display: grid;
    justify-items: center;
    grid-template-columns:0px 1fr 0px;
    grid-template-rows: 10vh 100vh 460px 460px 460px 460px 460px 460px minmax(min-content, max-content) minmax(min-content, max-content) minmax(min-content, max-content) minmax(min-content, max-content) minmax(min-content, auto);
    grid-row-gap: 20px;
    grid-template-areas:
    ". title ."
    ". header ."
    ". usecase1 ."
    ". usecase2 ."
    ". usecase3 ."
    ". usecase4 ."
    ". usecase5 ."
    ". usecase6 ."
    ". reason-list ."
    ". refcase1 ."
    ". refcase2 ."
    ". refcase3 ."
    ". contact ."
    ". footer .";
}


.title {
    grid-area: title;
    display: grid;
    grid-template-columns: 20px 1fr 20px;
    grid-template-rows: auto auto;
    grid-template-areas:
    ". title-logo ."
    ". title-text .";
    z-index: 2;
}

.title-logo{
    grid-area: title-logo;
}

.title-text{
    grid-area: title-text;
}

.header {
    grid-area: header;
    display: grid;
    justify-items: center;
    /* background-image: linear-gradient(to right, #1A2980 0%, #26D0CE 100%); */
    grid-template-columns: 20px 1fr 20px;
    grid-template-rows: auto auto auto auto;
    grid-row-gap: 20px;
    grid-template-areas:
    ". subslogan ."
    ". slogan ."
    ". test ."
    ". go-down .";
}

.slogan{
    grid-area: slogan;
    z-index: 2;
}

.subslogan{
    grid-area: subslogan;
    z-index: 2;
}

.test{
    grid-area: test;
    z-index: 2;
    position:relative;
}

.go-down{
    grid-area: go-down;
    z-index: 2;
    position:relative;
}

.test-button{
    background-image: linear-gradient(white, white), radial-gradient(circle at top left, #ef446d,#f04e38);
    border-image-slice: 1;
    font-weight: 600;
    background-color: transparent;
    cursor: pointer;
    border: double 4px transparent;
    border-radius: 25px;
    outline: none;
    opacity: 1;
    background-origin: border-box;
    background-clip: content-box, border-box;
    width: 300px;
    height: 80px;
}
.submit-button{
    background-image: linear-gradient(white, white), radial-gradient(circle at top left, #ef446d,#f04e38);
    border-image-slice: 1;
    font-weight: 600;
    background-color: transparent;
    cursor: pointer;
    border: double 4px transparent;
    border-radius: 25px;
    outline: none;
    opacity: 1;
    background-origin: border-box;
    background-clip: content-box, border-box;
    width: 300px;
    height: 80px;

}


.gradient-text {
    background: linear-gradient(to left, #f04e38 0%, #ef446d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.test-button:hover{
    opacity: 0.5;
}

.submit-button:hover{
    opacity: 0.5;
}

.go-down-button{
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
    opacity: 1;
    display: none;
}

.svg-go-down{
    display: inline-block;
    width: 152px;
    height: 152px;
}


.usecase1{
    grid-area: usecase1;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 150px 50px 155px;
    grid-row-gap: 50px;
    margin:20px;
}

.usecase2{
    grid-area: usecase2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 150px 50px 155px;
    grid-row-gap: 50px;
    margin:20px;
}

.usecase3{
    grid-area: usecase3;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 150px 50px 155px;
    grid-row-gap: 50px;
    margin:20px;
}

.usecase4{
    grid-area: usecase4;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 150px 50px 155px;
    grid-row-gap: 50px;
    margin:20px;

}

.usecase5{
    grid-area: usecase5;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 150px 50px 155px;
    grid-row-gap: 50px;
    margin:20px;

}

.usecase6{
    grid-area: usecase6;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 150px 50px 155px;
    grid-row-gap: 50px;
    margin:20px;

}

.usecase-img{
    height:200px;
    object-fit: cover;
}

.refcase1{
        grid-area: refcase1;
        display: grid;
        grid-template-columns:20px 1fr 20px;
        grid-template-rows: minmax(50px, auto) minmax(50px, auto) minmax(100px, auto) minmax(min-content, auto);
        grid-row-gap: 20px;
        grid-template-areas:
        ". refcase-category ."
        ". refcase-customer ."
        ". refcase-img ."
        ". refcase-description .";
}
    
.refcase2{
    grid-area: refcase2;
    display: grid;
    grid-template-columns:20px 1fr 20px;
    grid-template-rows: minmax(50px, auto) minmax(50px, auto) minmax(100px, auto) minmax(min-content, auto);
    grid-row-gap: 20px;
    grid-template-areas:
    ". refcase-category ."
    ". refcase-customer ."
    ". refcase-img ."
    ". refcase-description .";
}

.refcase3{
    grid-area: refcase3;
    display: grid;
    grid-template-columns:20px 1fr 20px;
    grid-template-rows: minmax(50px, auto) minmax(50px, auto) minmax(100px, auto) minmax(min-content, auto);
    grid-row-gap: 20px;
    grid-template-areas:
    ". refcase-category ."
    ". refcase-customer ."
    ". refcase-img ."
    ". refcase-description .";
}

.refcase-category{
    grid-area: refcase-category;
}

.refcase-customer{
    grid-area: refcase-customer;
}

.refcase-description{
    grid-area: refcase-description;
}

.refcase-img{
    grid-area: refcase-img;
    width: 100%;
    max-width: 400px;
    height: auto;
}

.refcase-imgs{
    padding-top:20px;
}

li{
    display: inline-block;
}

.contact{
    grid-area: contact;
    display: grid;
    grid-template-columns:20px 1fr 20px;
    grid-template-rows: minmax(150px, auto) minmax(min-content, auto);
    grid-row-gap: 20px;
    grid-template-areas:
    ". contact-title ."
    ". contact-form ."
}

.contact-title{
    grid-area: contact-title;
}

.contact-form{
    grid-area: contact-form;
}

.reason-list{
    grid-area: reason-list;
    display: grid;
    grid-template-columns:20px 1fr 20px;
    grid-template-rows: minmax(150px, auto) minmax(min-content, auto) minmax(min-content, auto);
    grid-row-gap: 20px;
    grid-template-areas:
    ". reason-list-title ."
    ". reason-list-bullets ."
    ". reason-list-icon ."
}

.reason-list-title{
    grid-area: reason-list-title;
}

.reason-list-bullets{
    grid-area: reason-list-bullets;
    line-height:200%;
}

.reason-list-icon{
    grid-area:reason-list-icon;
}

.pricing-list{
    grid-area: pricing-list;
    display: grid;
    grid-template-columns:20px 1fr 20px;
    grid-template-rows: minmax(150px, auto) minmax(min-content, auto);
    grid-row-gap: 20px;
    grid-template-areas:
    ". pricing-list-title ."
    ". pricing-list-table ."
}

.pricing-list-title{
    grid-area: pricing-list-title;
}

.pricing-list-table{
    grid-area: pricing-list-table;
}
.footer {
    grid-area: footer;
    width:100%;
    display: grid;
    justify-items: center;
    background-color: #E5E9F2;
    grid-template-columns:20px 1fr 20px;
    grid-template-rows: minmax(200px, auto) minmax(200px, auto);
    grid-template-areas:
    ". footer-company-logo ."
    ". footer-contact ."
}

.footer-company-logo{
    grid-area: footer-company-logo;
}

.footer-contact{
    grid-area: footer-contact;
}

.logo{
    width: 70%;
    max-width: 100%;
    height: auto;
    margin: 20px;
}

.relay-logo{
    max-width: 90%;
    max-height: 100px;
    height: auto;
    width: auto\9; /* ie8 */
    display:block;
    margin:auto;

}

.vertical-center{
    align-self: center;
}

.horizontal-center{
    justify-self: center;
}




.contact-form input[type="text"],
.contact-form input[type="date"],
.contact-form input[type="datetime"],
.contact-form input[type="email"],
.contact-form input[type="number"],
.contact-form input[type="search"],
.contact-form input[type="time"],
.contact-form input[type="url"],
.contact-form textarea,
.contact-form select 
{
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
	background: #fff;
	margin-bottom: 4%;
    border: none;
    padding:3%;
    resize: none;

}
.contact-form input[type="text"]:focus,
.contact-form input[type="date"]:focus,
.contact-form input[type="datetime"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="number"]:focus,
.contact-form input[type="search"]:focus,
.contact-form input[type="time"]:focus,
.contact-form input[type="url"]:focus,
.contact-form textarea:focus,
.contact-form select:focus
{
 
}

.contact-form input[type="submit"],


.contact-form input[type="submit"]:hover,
.contact-form input[type="button"]:hover{
    opacity: 0.5;
}


/* .grid div:nth-child(even) {
    background-color: #ff5252;
}

.grid div:nth-child(odd) {
    background-color: #f5f5f5;
}  */



.gradient-background{
    background: linear-gradient(270deg, #ef446d, #f04e33);
    background-size: 200% 200%;
    
    -webkit-animation: gradientanimation 10s ease infinite;
    -moz-animation: gradientanimation 10s ease infinite;
    animation: gradientanimation 10s ease infinite;
    }

.gradient-underline{
    background-position: 0 1.4em;
    background-repeat: repeat-x;
    background-size: 2px 6px;
    background-image: linear-gradient(to left, #f04e38 0%, #ef446d 100%);
}

/*
blå: #1a2980
turkos: #26d0ce

orange:#f04e33
rosa: #ef446d
*/
#particles-js canvas {
    display: block;
    vertical-align: bottom;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
    transition: opacity .8s ease, transform 1.4s ease
}

#particles-js {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

@-webkit-keyframes gradientanimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes gradientanimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes gradientanimation { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.icons {
    width: 152px;
    height: 152px;
  }

.reason-icons{
    width: 252px;
    height: 252px;
}
  .icon {
    display: inline-block;
  }

  .icon-shadow {
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .3));
    filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .3));
    /* Similar syntax to box-shadow */
  }



  /* The sidebar menu */
.nav {
    grid-area: nav;
    position: sticky;
    z-index: 100;
    left: 0;
    top: 0;
    background-color:transparent;
    overflow-x: hidden;
    margin: 0;
    font-weight: 600;
    display: none;
  }
  
  /* The navigation menu links */
  .nav a {
    padding: 14px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    cursor: pointer;
    float: left;
    text-align: center;
  }
  
  .nav a:hover {
    opacity: 0,5;
  }
  


@media only screen and (min-width: 1082px) and (max-width: 1824px) {
    .grid{
        display: grid;
        grid-template-columns:20px 1fr 1fr 20px;
        grid-template-rows: 8vh 10vh 90vh 500px 500px 500px 500px 1300px 1300px 1300px minmax(min-content, max-content) 400px;
        /* grid-row-gap: 20px; */
        grid-template-areas:
        ". nav nav ."
        "title title title title"
        "header header header header"
        ". usecase1 usecase2 ."
        ". usecase3 usecase4 ."
        ". usecase5 usecase6 ."
        ". reason-list reason-list ."
        ". refcase1 refcase1 ."
        ". refcase2 refcase2 ."
        ". refcase3 refcase3 ."
        ". contact contact ."
        "footer footer footer footer";
    }

     h1{
        font-size:600%;
    }
    h2{
        font-size:200%;
    }
    h3{
        font-size:200%;
    }
    h4{
        font-size:120%;
    }
    h5{
        font-size:300%;
    }

    .header {
        grid-area: header;
        display: grid;
        /* background-color: #E5E9F2; */
        grid-template-rows: auto auto auto;
        grid-template-columns: 200px 1fr 200px;
        grid-row-gap: 20px;
        grid-template-areas:
        ". subslogan ."
        ". slogan ."
        ". test ."
        ". go-down .";
        }
        
    .usecase1{
        grid-area: usecase1;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 150px 50px 200px;
        grid-row-gap: 50px;
        margin:20px;
    }

    .usecase2{
        grid-area: usecase2;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 150px 50px 200px;
        grid-row-gap: 50px;
        margin:20px;
    }

    .usecase3{
        grid-area: usecase3;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 150px 50px 200px;
        grid-row-gap: 50px;
        margin:20px;
    }

    .usecase4{
        grid-area: usecase4;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 150px 50px 200px;
        grid-row-gap: 50px;
        margin:20px;

    }

    .usecase5{
        grid-area: usecase5;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 150px 50px 200px;
        grid-row-gap: 50px;
        margin:20px;

    }

    .usecase6{
        grid-area: usecase6;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 150px 50px 200px;
        grid-row-gap: 50px;
        margin:20px;

    }

    .refcase1{
        grid-area: refcase1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 50px 50px 1200px;
        /* grid-row-gap: 20px; */
        grid-column-gap: 40px;
        grid-template-areas:
        "refcase-category refcase-img"
        "refcase-customer refcase-img"
        "refcase-description refcase-img";
    }
    .refcase2{
        grid-area: refcase2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 50px 50px 1200px;
        /* grid-row-gap: 20px; */
        grid-template-areas:
        "refcase-img refcase-category"
        "refcase-img refcase-customer"
        "refcase-img refcase-description";
    }
    .refcase3{
        grid-area: refcase3;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 50px 50px 1200px;
        /* grid-row-gap: 20px; */
        grid-template-areas:
        "refcase-category refcase-img"
        "refcase-customer refcase-img"
        "refcase-description refcase-img";
    }

    .reason-list{
        grid-area: reason-list;
        display: grid;
        grid-template-columns:1fr 1fr 5fr;
        grid-template-rows: 100px minmax(min-content, max-content);
        grid-row-gap: 20px;
        grid-template-areas:
        "reason-list-icon reason-list-icon reason-list-title"
        "reason-list-icon reason-list-icon reason-list-bullets"
    }

    .contact{
        grid-area: contact;
        display: grid;
        grid-template-columns:1fr 3fr 1fr;
        grid-template-rows: 50px 500px;
        grid-row-gap: 20px;
        
        grid-template-areas:
        ". contact-title ."
        ". contact-form ."
    }

    .pricing-list{
        grid-area: pricing-list;
        display: grid;
        grid-template-columns: 0px 1fr 0px;
        grid-template-rows: 50px 400px;
        grid-row-gap: 20px;
        grid-template-areas:
        ". pricing-list-title ."
        ". pricing-list-table ."
    }

    
.footer {
    grid-area: footer;
    width:100%;
    display: grid;
    justify-items: center;
    background-color: #E5E9F2;
    grid-template-columns:1fr 1fr;
    grid-template-rows: minmax(200px, auto) minmax(200px, auto);
    grid-template-areas:
    "footer-company-logo footer-contact"
    "footer-company-logo footer-contact"
}

.footer-company-logo{
    grid-area: footer-company-logo;
}

.footer-contact{
    grid-area: footer-contact;
}

.go-down-button{
    display: inline-block;
}
.nav{
    display: inline-block;
}
  }

  @media only screen and (min-width: 1825px) {
    .grid{
        display: grid;
        grid-template-columns: 300px 1fr 1fr 1fr 300px;
        grid-template-rows: 8vh 10vh 90vh 500px 500px 500px 1300px 1300px 1300px minmax(min-content, max-content) 400px;
        grid-column-gap: 20px;
        /* grid-row-gap: 20px; */
        grid-template-areas:
        "nav nav nav nav nav"
        "title title title title title"
        "header header header header header"
        ". usecase1 usecase2 usecase3 ."
        ". usecase4 usecase5 usecase6 ."
        ". reason-list reason-list reason-list ."
        ". refcase1 refcase1 refcase1 ."
        ". refcase2 refcase2 refcase2 ."
        ". refcase3 refcase3 refcase3 ."
        ". contact contact contact ."
        "footer footer footer footer footer";
    }
    h1{
        font-size:550%;
    }
    h2{
        font-size:300%;
    }
    h3{
        font-size:200%;
    }
    h4{
        font-size:120%;
    }
    h5{
        font-size:300%;
    }

    .header {
    grid-area: header;
    display: grid;
    grid-template-columns: 400px 1fr 400px;
    grid-template-rows: 0.2fr auto auto auto;
    grid-row-gap: 20px;
    grid-template-areas:
    ". . ."
    ". subslogan ."
    ". slogan ."
    ". test ."
    ". go-down .";
    }

    
    .usecase1{
        grid-area: usecase1;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 150px 50px 200px;
        grid-row-gap: 50px;
        margin:20px;
    }

    .usecase2{
        grid-area: usecase2;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 150px 50px 200px;
        grid-row-gap: 50px;
        margin:20px;
    }

    .usecase3{
        grid-area: usecase3;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 150px 50px 200px;
        grid-row-gap: 50px;
        margin:20px;
    }

    .usecase4{
        grid-area: usecase4;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 150px 50px 200px;
        grid-row-gap: 50px;
        margin:20px;

    }

    .usecase5{
        grid-area: usecase5;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 150px 50px 200px;
        grid-row-gap: 50px;
        margin:20px;

    }

    .usecase6{
        grid-area: usecase6;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 150px 50px 200px;
        grid-row-gap: 50px;
        margin:20px;

    }

    .refcase1{
        grid-area: refcase1;
        display: grid;
        grid-template-columns:1fr 50px 1fr;
        grid-template-rows: 50px 50px 1200px;
        grid-column-gap: 20px;
        /* grid-row-gap: 20px; */
        grid-template-areas:
        "refcase-category . refcase-img"
        "refcase-customer . refcase-img"
        "refcase-description . refcase-img";
    }
    .refcase2{
        grid-area: refcase2;
        display: grid;
        grid-template-columns:1fr 50px 1fr;
        grid-template-rows: 50px 50px 1200px;
        grid-column-gap: 20px;
        /* grid-row-gap: 20px; */
        grid-template-areas:
        "refcase-img . refcase-category"
        "refcase-img . refcase-customer"
        "refcase-img . refcase-description";
    }
    .refcase3{
        grid-area: refcase3;
        display: grid;
        grid-template-columns:1fr 50px 1fr;
        grid-template-rows: 50px 50px 1200px;
        grid-column-gap: 20px;
        /* grid-row-gap: 20px; */
        grid-template-areas:
        "refcase-category . refcase-img"
        "refcase-customer . refcase-img"
        "refcase-description . refcase-img";
    }

    .reason-list{
        grid-area: reason-list;
        display: grid;
        grid-template-columns:1fr 1fr 2fr 1fr;
        grid-template-rows: 100px minmax(min-content, max-content);
        grid-row-gap: 20px;
        width:100%;
        grid-template-areas:
        ". reason-list-icon reason-list-title ."
        ". reason-list-icon reason-list-bullets ."
    }

    .contact{
        grid-area: contact;
        display: grid;
        grid-template-columns:1fr 2fr 1fr;
        grid-template-rows: 100px minmax(min-content, max-content);
        grid-row-gap: 20px;
        padding-bottom: 40px;
        width:100%;
        grid-template-areas:
        ". contact-title ."
        ". contact-form ."
    }

    .pricing-list{
        grid-area: pricing-list;
        display: grid;
        grid-template-columns:1fr 2fr 1fr;
        grid-template-rows: 50px minmax(min-content, max-content);
        grid-row-gap: 20px;
        width:100%;
        grid-template-areas:
        ". pricing-list-title ."
        ". pricing-list-table ."
    }

    .footer {
        grid-area: footer;
        width:100%;
        display: grid;
        justify-items: center;
        background-color: #E5E9F2;
        grid-template-columns:0px 1fr 1fr 0px;
        grid-template-rows: minmax(200px, auto) minmax(200px, auto);
        grid-template-areas:
        ". footer-company-logo footer-contact ."
        ". footer-company-logo footer-contact. "
    }
    
    .footer-company-logo{
        grid-area: footer-company-logo;
    }
    
    .footer-contact{
        grid-area: footer-contact;
    }
    .go-down-button{
        display: inline-block;
    }
    .nav{
        display: inline-block;
    }

      
  }