#landing-div {
background: linear-gradient(to bottom, #186F65 60%, #FFFFFF 100%);
width: 100%;
padding-top: 50px;
display: flex;
}
#text-container, #text-container {
flex: 1;
box-sizing: border-box;
padding: 3%;
}
#text-container {
order: 2;
color: #FFFFFF;
}
#google-play-badge-download {
width: 40%;
float: right;
margin-right: 5%;
margin-top: 10%;
}
#landing-title {
font-size: 3.5em;
}
#landing-subtitle {
margin-top: 3%;
line-height: 1.5;
font-family: 'Open Sans', sans-serif;
}
#image-landing {
max-width: 80%;
max-height: 80%;
display: block;
margin: auto;
vertical-align: middle;
}
.fade-in {
opacity: 0;
transform: translateY(20px);
transition-property: opacity;
transition-duration: 1s;
transition-timing-function: ease;
}
.fade-in.active {
opacity: 1;
transform: translateY(0);
}
.feature-div {
width: 100%;
padding-top: 50px;
display: flex;
}
.feature-div-reverse {
width: 100%;
padding-top: 50px;
display: flex;
flex-direction: row-reverse;
}
.image-feature-div, .text-feature-div {
flex: 1;
box-sizing: border-box;
padding: 3%;
}
.image-feature-div {
order: 1;
}
.image-feature {
width: 40%;
display: block;
margin-right: auto;
margin-left: auto;
}
.text-feature-div {
order: 2;
}
.text-feature-title {
margin-bottom: 7%;
}
#much-more-div {
width: 100%;
text-align: center;
margin-top: 5%;
margin-bottom: 5%;
}
#call-to-action-div {
width: 100%;
text-align: center;
background-color: #186F65;
padding-top: 5%;
padding-bottom: 5%;
padding-left: 5%;
padding-right: 5%;
color: white;
box-sizing: border-box;
}
#call-to-action-text {
font-size: 3.5em;
line-height: 1.5;
margin-top: 0;
}
#google-play-badge-a {
width: 30%;
display: block;
margin-right: auto;
margin-left: auto;
}
#first-line-div {
width: 100%;
background-color: #F0E2AD;
color: black;
box-sizing: border-box;
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
padding-bottom: 5%;
display: flex;
}
#first-line-div a {
color: #114D46;
}
#email-div, #faq-div {
flex: 1;
padding-left: 5%;
padding-right: 5%;
}
#email-div {
border-right: 2px solid black;
}
.first-line-header-text {
margin: 0;
}
.horizontal-divider {
width: 30%;
border-top: 2px solid black;
margin: 10px 0;
opacity: 1;
}
#second-line-div {
width: 100%;
background-color: #186F65;
color: white;
box-sizing: border-box;
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
padding-bottom: 5%;
display: flex;
}
#second-line-div a {
color: white;
}
#teo-coding-div, #copyright-div, #privacy-policy-div {
flex: 1;
}
#copyright-div {
text-align: center;
}
#teo-coding-img {
width: 50%;
display: block;
margin-right: auto;
margin-left: auto;
}
#privacy-policy-div {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 960px) {
#landing-title {
font-size: 3em;
}
#call-to-action-text {
font-size: 2.5em;
margin-top: 0;
}
}
@media screen and (max-width: 800px) {
#landing-div {
flex-direction: column;
padding-top: 20px;
}
#text-container {
margin-bottom: 5%;
text-align: center;
}
#google-play-badge-download {
float: unset;
margin-left: auto;
margin-right: auto;
}
.feature-div {
flex-direction: column;
}
.feature-div-reverse {
width: 100%;
padding-top: 50px;
display: flex;
flex-direction: column;
}
.text-feature-div {
text-align: center;
}
#much-more-div {
width: 100%;
text-align: center;
margin-top: 15%;
margin-bottom: 15%;
}
#call-to-action-div {
padding-top: 10%;
padding-bottom: 10%;
}
#google-play-badge-a {
width: 40%;
display: block;
margin-right: auto;
margin-left: auto;
}
#first-line-div {
flex-direction: column;
padding-top: 10%;
padding-bottom: 10%;
}
#email-div {
border-right: 0 none transparent;
margin-bottom: 50px;
}
#second-line-div {
flex-direction: column;
padding-top: 10%;
padding-bottom: 10%;
}
#teo-coding-div, #copyright-div {
margin-bottom: 50px;
}
}