body {
    background: #ffffff;
    color: #15498E;
}


@keyframes fadeIn {
    from {top: 20%; opacity: 0;}
    to {top: 100; opacity: 1;}

}

@-webkit-keyframes fadeIn {
    from {top: 20%; opacity: 0;}
    to {top: 100; opacity: 1;}

}

.wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    animation: fadeIn 1000ms ease;
    -webkit-animation: fadeIn 1000ms ease;

}

h1 {
    font-size: 40px;
    font-family: 'roboto', sans-serif;
    margin-bottom: 0;
    line-height: 1;
    font-weight: 700;
}

.dot {
    color: #3A3A3A;
}

p {
    text-align: center;
    margin: 18px;
    font-family: 'roboto', sans-serif;
    font-weight: normal;

}

.icons {
    text-align: center;
    margin: 20px;

}

.icons i {
    color: #15498E;
    background: #fff;
    transition: all 200ms ease;
    text-decoration: none;
    position: relative;
    padding: 10px;
    width: auto;
    font-size: 26px;
}

.icons i:hover, .icons i:active {
    cursor: pointer !important;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    text-decoration: none;

}

.icon-opware {
    height: 200px;
    width: auto;
}

.text-opware {
    height: 40px;
    width: auto;
}

.btn {
    background-color: #2884C4FF;
    border-color: #2884C4FF;
    padding: 10px;
    border-radius: 5px;
    color: white !important;
    text-decoration: none;
}

.btn:hover {
    background-color: #15498EFF;
    border-color: #15498EFF;
}

.text-center {
    text-align: center;
}

a {
    text-decoration: none !important;
    font-family: Roboto, sans-serif;
}