/*banner */
/* Height control */
.banner {
margin-top: 100px;
padding: 0;
/overflow: hidden;/
background-color: rgb(2, 117, 216);
}
.banner__container,
.banner__row {
min-height: 100%;
}
/* --- paragraphs --- */
.paragraphs__subtitle {
font-size: 'Open Sans';
color: #ffffff;
font-size: 30px;
}
.banner__paragraphs {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/*banner */
/* Height control */
.banner {
margin-top: 100px;
padding: 0;
/*overflow: hidden;*/
background-color: rgb(2, 117, 216);
}
.banner__container,
.banner__row {
min-height: 100%;
}
/* --- paragraphs --- */
.paragraphs__subtitle {
font-size: 'Open Sans';
color: #ffffff;
font-size: 30px;
}
.banner__paragraphs {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
}
.paragraphs__title,
.paragraphs__subtitle {
text-align: center;
}
/* --- media ---*/
.banner__media {
min-height: 530px;
padding: 0; /* rid bootstrap padding*/
width: 100%;
}
.banner__images {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.images__phone {
position: absolute;
z-index: 200;
height: 130%;
width: 100%;
}
.paragraphs__title,
.paragraphs__subtitle {
text-align: center;
}
/* --- media ---*/
.banner__media {
min-height: 530px;
padding: 0; /* rid bootstrap padding*/
width: 100%;
}
.banner__images {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.images__phone {
position: absolute;
z-index: 200;
height: 130%;
width: 100%;
background-image: url('../images/iphone.png');
background-size: cover;
animation-name: slideInUp;
animation-delay: 0.4s;
animation-duration: 0.75s;
}
.images__capture {
position: absolute;
z-index: 100;
height: 135%;
width: 100%;
background-image: url('../images/admin.png');
background-size: cover;
animation-name: slideInUp;
animation-delay: 0.2s;
animation-duration: 0.75s;
}
.images__phone,
.images__capture {
top: 25px;
}
@media (min-width: 700px) {
}
.images__capture {
position: absolute;
z-index: 100;
height: 135%;
width: 100%;
background-image: url('../images/admin.png');
background-size: cover;
animation-name: slideInUp;
animation-delay: 0.2s;
animation-duration: 0.75s;
}
.images__phone,
.images__capture {
top: 25px;
}
@media (min-width: 700px) {
.images__phone,
.images__capture {
left: 20vw;
}
}
@media (min-width: 800px) {
}
@media (min-width: 800px) {
.images__phone,
.images__capture {
left: 30vw;
}
}
@media (min-width: 992px) {
}
@media (min-width: 992px) {
.banner {
margin-top: 60px;
max-height: calc(100vh - 60px)
}
.banner__paragraphs,
.banner__media {
max-height: calc(100vh - 60px);
}
.paragraphs__title,
.paragraphs__subtitle {
text-align: left;
}
.images__capture {
height: 130%;
}
.images__phone,
.images__capture {
top: 25px;
left: 0;
}
.banner__paragraphs {
align-items: flex-start;
}
}
@media (min-width: 1200px) {
}
@media (min-width: 1200px) {
.images__capture {
height: 135%;
}
.images__capture,
.images__phone {
left: 10%;
}
}
@media (min-width: 1300px) {
.images__capture,
.images__phone {
left: 20%;
}
}
@media (min-width: 1600px) {
.images__capture,
.images__phone {
left: 40%;
}
.paragraphs__title,
.paragraphs__subtitle {
margin: 0;
padding: 0;
}
}
/*banner*/
}
@media (min-width: 1300px) {
.images__capture,
.images__phone {
left: 20%;
}
}
@media (min-width: 1600px) {
.images__capture,
.images__phone {
left: 40%;
}
.paragraphs__title,
.paragraphs__subtitle {
margin: 0;
padding: 0;
}
}
/banner/
/CSS/