* { margin: 0; padding: 0; }

html { font-size: 62.5%; }

@media (min-width: 75em) { html { font-size: 68.75%; } }

@media (min-width: 112.5em) { html { font-size: 87.5; } }

section { padding: 3rem; }

@media (min-width: 93.75em) { section { padding: 6rem 3rem; } }

body { font-family: 'Averia Sans Libre', sans-serif; font-size: 1.6rem; }

.heading-primary { font-size: 5rem; font-weight: 700; }

.heading-secondary { font-size: 2.2rem; font-weight: 300; }

.paragraph { font-size: 1.6rem; font-weight: 400; }

@media (min-width: 75em) { .paragraph { font-size: 1.5rem; } }

.slideshow { height: 60rem; width: 30.28188rem; position: relative; background-image: url("./img/screenshots met iphone/iphone_screenshot.png"); background-size: cover; }

@media (max-width: 25em) { .slideshow { height: 50rem; width: 25.2349rem; } }

.slideshow__item { transition: opacity .5s; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; }

.slideshow__item--showing { opacity: 1; z-index: 2; }

.dots { display: flex; justify-content: center; align-items: center; margin-top: 2rem; }

.dots .dot { height: .8rem; width: .8rem; background-color: #eee; border-radius: 50%; border: 1.2px solid #999; }

.dots .dot:not(:last-child) { margin-right: 1rem; }

.dots .dot--showing { background-color: #999; }

.nav { height: 6rem; }

@media (min-width: 75em) { .nav { max-width: 1200px; margin: 0 auto; } }

@media (min-width: 112.5em) { .nav { max-width: 1500px; margin: 0 auto; } }

.nav__list { display: flex; justify-content: flex-end; height: 100%; margin: 0 2rem; }

.nav__list-item { display: flex; align-items: center; margin: 0 1rem; }

.nav__list-item:nth-child(1) { margin-right: auto; }

.nav__link { color: #fff; font-weight: 700; text-decoration: none; }

.nav__logo { height: 3rem; margin-top: 1rem; }

.header { height: 100vh; min-height: 75rem; background: linear-gradient(#000, #2ec4b6); margin-top: -6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }

@media (min-width: 56.25em) { .header { flex-direction: row; } }

.header__left-box { display: flex; flex-direction: column; align-items: center; }

@media (min-width: 56.25em) { .header__left-box { align-items: flex-start; width: 30rem; } }

.header__iPhone-box { display: none; }

@media (min-width: 56.25em) { .header__iPhone-box { display: block; height: 50rem; } }

@media (min-width: 93.75em) { .header__iPhone-box { height: 60rem; } }

@media (min-width: 112.5em) { .header__iPhone-box { height: 65rem; } }

.header__iPhone { height: 100%; }

.header__logo-box { height: 20rem; width: 20rem; overflow: hidden; border-radius: 3.5rem; margin-bottom: 4rem; }

@media (min-width: 56.25em) { .header__logo-box { height: 15rem; width: 15rem; border-radius: 2.625rem; margin: 0 0 2rem 3rem; } }

@media (min-width: 93.75em) { .header__logo-box { height: 20rem; width: 20rem; border-radius: 3.5rem; margin: 0 0 3rem 3rem; } }

@media (min-width: 112.5em) { .header__logo-box { height: 20rem; width: 20rem; border-radius: 3.5rem; margin: 0 0 3rem 3rem; } }

.header__logo { height: 100%; width: 100%; }

.header__info { text-align: center; color: #fff; margin: 0 3rem; }

@media (min-width: 56.25em) { .header__info { text-align: left; } }

.header__info .paragraph { margin-top: 1.5rem; }

.header__download { height: 5rem; margin-top: 2.5rem; }

.about { display: flex; align-items: center; background-color: #2ec4b6; flex-direction: column; }

.about__box-container { display: flex; justify-content: center; flex-direction: column; margin-top: 3rem; }

@media (min-width: 75em) { .about__box-container { max-width: 1200px; margin-left: auto; margin-right: auto; flex-direction: row; } }

@media (min-width: 112.5em) { .about__box-container { max-width: 1500px; margin-left: auto; margin-right: auto; } }

.about__box { background-color: #fff; text-align: center; font-weight: 300; padding: 2rem; border-radius: .5rem; }

.about__box:not(:last-child) { margin-bottom: 2rem; }

@media (min-width: 75em) { .about__box:not(:last-child) { margin: 0 2rem 0 0; } }

.about__hyperlink { text-decoration: none; }

.about__hyperlink:link, .about__hyperlink:visited { color: #666; }

.about__hyperlink:hover, .about__hyperlink:active { color: #2ec4b6; }

.about .icon { height: 8rem; margin: 1rem 0; }

.about .heading-primary { color: #fff; }

.about .paragraph { margin-top: 2rem; font-family: sans-serif; line-height: 1.5; }

.about .heading-secondary { margin-top: 1rem; text-transform: capitalize; color: #2ec4b6; }

.contact { background-color: #eee; display: flex; align-items: center; flex-direction: column; padding-bottom: 4rem; }

.contact .heading-primary { text-transform: capitalize; }

.contact__social-box { display: flex; justify-content: center; }

.contact__link { padding-top: 5rem; }

.contact__link:not(:last-child) { margin-right: 3rem; }

.contact__social-icon { width: 5rem; }

.contact__email { margin-top: 5rem; padding: 2rem 3rem; color: #fff; border-radius: 10rem; text-decoration: none; }

.contact__email:link, .contact__email:visited { background-color: #2ec4b6; }

.contact__email:hover, .contact__email:active { background-color: #29afa3; }

.contact__company-logo { height: 10rem; margin-top: 5rem; margin-bottom: 2rem; }

.screenshots { background-color: #eee; display: flex; flex-direction: column; align-items: center; }

.screenshots .slideshow { margin-top: 3rem; }

.footer { height: 30rem; background-color: #000; }