#product {    color: #ffffff;    text-align: center;    margin: 10rem auto;}#product .card-intro {    min-height: 20rem;    text-align: left;    border-radius: 0.6rem;    background-color: rgba(82, 69, 165, 0.5);    box-shadow: 1rem 1rem 1rem rgba(21, 16, 45, 0.15);    -webkit-appearance: none;    -webkit-box-shadow: 1rem 1rem 1rem rgba(21, 16, 45, 0.15);    -moz-box-shadow: 1rem 1rem 1rem rgba(21, 16, 45, 0.15);    margin-bottom: 1rem;}#product .card-intro:hover, #product .card-left:hover {    border: 0.2rem solid #ffffff;    cursor: pointer;}#product .card-left {    margin-right: 1.5rem;}#product .card-left.card-third {    margin-right: 0;}#product .card-img {    padding: 1.3rem 1.5rem;}#product .card-img img {    width: 4.8rem;    height: 4.8rem;}#product .card-img img.long-img {    width: 12rem;    height: 1.2rem;    padding: 1.8rem 0;}#product .card-title {    font-size: 1.8rem;    color: #ffffff;    font-family: HelveticaNeue-Medium;    padding: 0 1.5rem;}#product .card-title p {    margin: 0px;}#product .card-paragraph {    font-size: 1.4rem;    color: #d9d6d6;    padding: 1.5rem;    line-height: 2.1rem;}#product .card-paragraph span {    font-weight: 100;}#product .products-card {    display: flex;    justify-content: flex-start;    flex-wrap: wrap;}#product .product-img-holder {    width: 60%;    padding-bottom: calc(56.25% * 0.6); /* 16:9 */    margin: 1.5rem auto;    position: relative;}#product .product-img-holder img {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;}#product .product-slide {    display: none;}#product .product-summary {    color: #ffffff;    width: 70%;    padding: 3rem 0;    margin: 0 auto;}#product p.product-title {    font-size: 2.4rem;    position: relative;    display: inline-block;    margin: 2rem;}#product p.product-title:before,#product p.product-title:after {    content: "";    position: absolute;    border-bottom: 1px solid rgba(255,255,255,0.5);    top: 1.3rem;    width: 18rem;}#product p.product-title:before {    right: 100%;    margin-right: 1.5rem;}#product p.product-title:after {    left: 100%;    margin-left: 1.5rem;}#product .product-list {    list-style-type: disc;    padding: 4rem 1.9rem;    font-size: 1.6rem;}#product .schedule-demo {    margin-top: 4rem;    text-align: center;    padding: 1rem;}#product .schedule-demo-text {    margin-bottom: 2.5rem;    line-height: 2.4rem;    font-size: 1.6rem;}#product a.schedule-demo-button {    background: #9b00ff;    color: #ffffff;    margin: 2rem auto;    /*border-radius: 2.4rem;*/    border: none;    display: block;    width: 15rem;    padding: 1.5rem 2rem;    font-size: 1.4rem;}#product ul li {    line-height: 3.8rem;}@media only screen and (min-width: 1281px) {    .navbar, .main-div, .dropdown-div, .footer {        width: 70%;        max-width: 200rem;        margin: 0 auto;    }    #product .product-title {        margin: 0.8rem auto 0.8rem;    }    #product .product-summary {        margin: 0 auto;    }    #product .card-intro, #product .card-left {        /* Note: width / cards - card-left margin + card-left margin / cards */        /* Note: this should create cards with equal width and correct margin inbetween cards */        width: calc(100% / 3 - 1.5rem + (1.5rem / 3));    }    #product .card-intro:hover, #product .card-left:hover {        /* Note: width / cards - card-left margin + card-left margin / cards - border width * 2 */        /* Note: this should create cards with equal width and correct margin inbetween cards */        width: calc(100% / 3 - 1.5rem + (1.5rem / 3) - 0.4rem);    }}@media only screen and (min-width: 992px) and (max-width: 1280px) {    .navbar, .main-div, .dropdown-div, .footer {        width: 80%;        margin: 0 auto;    }    #product .product-summary {        width: 80%;        margin: 0 auto;    }    #product .product-title {        margin: 0.8rem auto 0.8rem;    }    #product .card-intro, #product .card-left {        /* Note: width / cards - card-left margin + card-left margin / cards */        /* Note: this should create cards with equal width and correct margin inbetween cards */        width: calc(100% / 3 - 1.5rem + (1.5rem / 3));    }    #product .card-intro {        min-height: 15rem;    }    #product .card-intro:hover, #product .card-left:hover {        /* Note: width / cards - card-left margin + card-left margin / cards - border width * 2 */        /* Note: this should create cards with equal width and correct margin inbetween cards */        width: calc(100% / 3 - 1.5rem + (1.5rem / 3) - 0.4rem);    }    #product .card-paragraph {        padding: 1.2rem 1.5rem;        line-height: 1.8rem;    }    #product .product-img-holder {        width: 70%;        padding-bottom: calc(56.25% * 0.7); /* 16:9 */    }    #product img {        height: 33rem;    }}@media only screen and (min-width: 768px) and (max-width: 991px) {    .navbar, .main-div, .dropdown-div, .footer {        width: 90%;        margin: 0 auto;    }    #product .product-summary {        width: 90%;        padding: 2.8rem 0;        margin: 0 auto;    }    #product .product-title {        margin: 0.8rem auto 0.8rem;    }    #product .card-intro, #service .card-left {        width: calc(100% / 2 - 1.5rem);    }    #service .card-left {        margin-right: 1.5rem;    }    #product .card-left.card-third {        margin-right: 1.5rem;    }    #product .card-intro:hover, #service .card-left:hover {        width: calc(100% / 2 - 1.5rem - 0.4rem);    }    #product .product-img-holder {        width: 80%;        padding-bottom: calc(56.25% * 0.8); /* 16:9 */    }    #product img {        padding: 0;        height: 30rem;    }    #product a.schedule-demo-button {        margin: 0 auto;    }}@media only screen and (min-width: 415px) and (max-width: 767px) {    .navbar, .main-div, .dropdown-div, .footer {        width: 80%;        margin: 0 auto;    }    #product .product-summary {        width: 80%;        padding: 0 0 1.5rem 0;        margin: 0 auto;    }    #product p.product-title {        font-size: 2.1rem;        margin: 0.8rem auto 0.8rem;    }    #product p.product-title:before,    #product p.product-title:after {        top: 1rem;        width: 8rem;    }    #product .card-intro, #product .card-left {        width: 100%;        margin: 1rem 0;    }    #product .card-intro:active, #product .card-left:active {        width: calc(100% - 0.4rem);        margin: 1rem 0;    }    #product .card-intro {        min-height: 15rem;    }    #product .card-img {        padding: 1rem 1.5rem;    }    #product .card-title {        font-size: 1.6rem;    }    #product .card-paragraph {        font-size: 1.2rem;        padding: 1rem 1.5rem;    }    #product .product-img-holder {        width: 90%;        padding-bottom: calc(56.25% * 0.9); /* 16:9 */    }    #product img {        height: 19.2rem;    }    #product a.schedule-demo-button {        margin: 0 auto;    }}@media only screen and (max-width: 414px) {    .navbar, .main-div, .dropdown-div, .footer {        width: 80%;        margin: 0 auto;    }    #product .product-summary {        width: 100%;        padding: 0 0 1.6rem 0;        margin: 0 auto;    }    #product p.product-title {        font-size: 1.8rem;        margin: 0.8rem auto 0.8rem;    }    #product p.product-title:before,    #product p.product-title:after {        top: 0.8rem;        width: 5rem;    }    #product .card-intro, #product .card-left {        width: 100%;        margin: 1rem 0;    }    #product .card-intro:active, #product .card-left:active {        width: calc(100% - 0.4rem);        margin: 1rem 0;    }    #product .card-intro {        min-height: 15rem;    }    #product .card-img {        padding: 1rem 1.5rem;    }    #product .card-title {        font-size: 1.6rem;    }    #product .card-paragraph {        font-size: 1.2rem;        padding: 1rem 1.5rem;    }    #product .product-img-holder {        width: 90%;        padding-bottom: calc(56.25% * 0.9); /* 16:9 */    }    #product img {        height: 19.2rem;    }    #product a.schedule-demo-button {        margin: 0 auto;    }}