@import url('https://fonts.googleapis.com/css?family=Raleway:200,200i,300,300i,400,400i,600,600i');

body {
    width: 100%
}

.logo{
    padding-left: 15px;
}

.header{
    white-space      : pre-line;
    background-color : #00abc9;
    background-image : linear-gradient(to left, #0a3574, #0c5396, #0c72b7, #1193d8, #1db5f8);
    background-size  : cover;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 71%, 0% 100%);
    clip-path        : polygon(0 0, 100% 0, 100% 71%, 0% 100%);
  
}

.header::after {
    content        : "";
    background     : url('../img/header.jpg');
    background-size: cover;
    opacity        : 0.3;
    top            : 0;
    left           : 0;
    bottom         : 0;
    right          : 0;
    position       : absolute;
    z-index        : -1;
  }

.header > div > .slogan > h1 {
    
    font-size  : calc(25px + 5vw);
    font-weight: 200;
    font-family: 'Raleway' sans-serif !important;
}


.slogan{
    color: white;

}


.benefits > div {
    text-align: center;
}

.benefits > div > span {
    font-size    : 4rem;
    margin-bottom: 20px;
}

.textfield{
    background-color: #ededed;
}

.product-image > img{
    width     : 100%;
    height    : auto;
    object-fit: cover;
}

.spacer {
    height: 10rem;
    width : 100%;
}

.spacer-small {
    height: 4rem;
    width : 100%;
}

.desc{
    padding: 50px;
}

.shoplink {
    background-color: #00abc9;
    background-image: linear-gradient(to left, #0a3574, #0c5396, #0c72b7, #1193d8, #1db5f8);
    color           : white;
    font-wight      : 100;
}

.shoplink-upper {
    background-color: rgba(255,255,255,0);
    color           : #0c72b7;
    font-wight      : 100;
}