body {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    color: #393a56;
    font-size: 1.8rem;
    scroll-behavior: smooth;
    font-weight: 300;
    background-color: white;
}

@media (min-width: 550px) {
    body {
        font-size: 2.2rem;
    }
}

h1 {
    font-weight: 800
}

h2 {
    font-weight: 800
}

h3 {
    font-weight: 800;
}

p {
}

a {
    color: #1083C6;
}

b, strong {
    font-weight: 800;
}

.hero {
    padding-bottom: 8rem;
    padding-top: 20rem;
    background-color: #E8F5FC;
}

.hero img {
    padding-bottom: 3rem;
}

.hero h2 {
    font-weight: 300;
}

.video {
    background-color: #243742;
    background-image: url(images/videobg@1x.jpg);
 
    background-repeat: no-repeat;
    background-size: cover;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .video {
        background-image: url(images/videobg@2x.jpg);
    }
}

.signup {
    background: #4db2e6;
    background: -moz-linear-gradient(top, #4db2e6 0%, #008bde 100%);
    background: -webkit-linear-gradient(top, #4db2e6 0%,#008bde 100%);
    background: linear-gradient(to bottom, #4db2e6 0%,#008bde 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4db2e6', endColorstr='#008bde',GradientType=0 );
    padding: 4rem;
    box-shadow: 0 6px 12px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    border-radius: 2px;
}

.signup input[type="email"] {
    border-radius: 12px;
    vertical-align: bottom;
    height: 50px;
    padding-left: 2rem;
}

.signup input[type="submit"] {
    border-radius: 12px;
    background-color: #0A2454;
    color: white;
    border: 0px;
    height: 50px;
    text-transform: none;
    font-size: inherit;
}

.signup p, .signup label, .signup h2 {
    color: white
}

.backgroundinfo {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.backgroundinfo h2 {
    color: #1A98E1
}

.roel img {
    padding-right: 2rem;
    padding-bottom: 2rem;
}
@media (max-width: 550px) {
    .roel img {
        width: 160px;
        height: 160px;
    }
}

.quotes {
    padding-top: 4rem;
}

.quotes p {
    border-radius: 12px;
    padding: 2rem;
    position: relative;
    background-color: #E8F4FC;
    font-size: 2rem;
    text-indent: -5rem;
    padding-left: 7rem;
}                      

.quotes .row {
    margin-bottom: 2em;
}

.faq {
    background-color: #E8F5FC;
}
.faq .row {
    border-bottom: 2px solid #E2E7EA;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Features
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.features {
    padding-top: 8rem;
}

.features .img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    min-height: 500px;
}

.features .row {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    margin-bottom: 4rem;
    border-radius: 4px;
    color: white;
}

.features .textColumn {
    padding: 4rem;
}

.phonebackground {
    position: relative
}

.phonecontent {
    left: 0px;
    top: 20px;
}

.notes {
    
    background: #9a5fef;
    background: -moz-linear-gradient(top, #9a5fef 0%, #573ebd 100%);
    background: -webkit-linear-gradient(top, #9a5fef 0%,#573ebd 100%);
    background: linear-gradient(to bottom, #9a5fef 0%,#573ebd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9a5fef', endColorstr='#573ebd',GradientType=0 );
}

.events {

    background: #4db2e6;
background: -moz-linear-gradient(top, #4db2e6 0%, #008bde 100%);
background: -webkit-linear-gradient(top, #4db2e6 0%,#008bde 100%);
background: linear-gradient(to bottom, #4db2e6 0%,#008bde 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4db2e6', endColorstr='#008bde',GradientType=0 );

}

.todos  {

    background: #e05cea;
background: -moz-linear-gradient(top, #e05cea 0%, #873ebd 100%);
background: -webkit-linear-gradient(top, #e05cea 0%,#873ebd 100%);
background: linear-gradient(to bottom, #e05cea 0%,#873ebd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e05cea', endColorstr='#873ebd',GradientType=0 );
}

.notes .img {
    background-image: url('images/notes-rotato.png');
}

.todos .img {
    background-image: url('images/todo-rotato.png');
}

.events .img {
    background-image: url('images/events-rotato.png');
}

.secure {
 
    background: #4db2e6;
background: -moz-linear-gradient(top, #4db2e6 0%, #008bde 100%);
background: -webkit-linear-gradient(top, #4db2e6 0%,#008bde 100%);
background: linear-gradient(to bottom, #4db2e6 0%,#008bde 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4db2e6', endColorstr='#008bde',GradientType=0 );
}

.secure ul {
    list-style: none;
}

.secure li {
    padding-left: 3rem;
    text-indent: -2.7rem;
}

.secure li::before {
    content: "🔐 ";
}

.socialproof {
    padding: 4rem;
    background-color: #E8F5FC;
}

.socialproof .quote {
    background-color: white;
    padding: 2rem;
    border-radius: 12px;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.2);

}

.socialproof .quote em {
    font-size: 1.8rem;
}

.text {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

/* Nav bar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(255,255,255,.9);
    z-index: 100;
    box-shadow: 0 0px 3px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.10);
    display: block;

    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {
    .navbar {
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        background-color: rgba(255, 255, 255, .7)
    }
}

.navbar a {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}

.navbar img {
    margin-top: 8px;
    margin-bottom: 8px;
}

.navbar .app-store-button {
    background-position-y: 2rem;
    margin-left: 1rem;
    overflow:hidden;
    background-image :url(https://linkmaker.itunes.apple.com/assets/shared/badges/en-us/appstore-sm.svg);
    background-repeat: no-repeat;
    width:60px;
    height:15px;
}

.navbar .links {
    float: right;
    padding: 14px 0px;
    letter-spacing: -0.3px;
    display: none;
}

@media (min-width: 550px) {
    .navbar .links {
        display: block;
    }
}

.inline-icon {
    max-width: 50%;
    margin-bottom: 2rem;
}
@media (min-width: 550px) {
    .inline-icon {
        max-width: 100%;
    }
}

.navbar .links a {
    padding: 0px 14px;
}

.footer {
    margin-top: 12rem;
    padding-top: 3rem;
    background-color: #F3F5F7;
    color: #73828C;
}