164 lines
2.2 KiB
CSS
164 lines
2.2 KiB
CSS
@media screen and (max-width: 1023px) {
|
|
#main_title_container h2 {
|
|
margin-top: 15vh;
|
|
}
|
|
|
|
#main_title {
|
|
top: 15rem;
|
|
}
|
|
|
|
|
|
#cover .button {
|
|
top: 7vh;
|
|
}
|
|
|
|
#content_all h2,
|
|
#welcome h2 {
|
|
font-size: 6em;
|
|
line-height: 1em;
|
|
text-align: left;
|
|
}
|
|
|
|
#content_all .columns{
|
|
top: -145vh;
|
|
width: 55vw;
|
|
}
|
|
.columns{
|
|
display:block !important;
|
|
}
|
|
.column {
|
|
width: 100% !important;
|
|
}
|
|
|
|
#open {
|
|
top: 80vh;
|
|
}
|
|
/**
|
|
flipping part
|
|
*/
|
|
#flipping_zone {
|
|
margin-top: -120vh;
|
|
position: static;
|
|
}
|
|
.flip-container{
|
|
position: relative;
|
|
}
|
|
|
|
|
|
|
|
.flip-container + .flip-container{
|
|
margin-top: -5vh;
|
|
}
|
|
.flip-container .container-text{
|
|
z-index: 1;
|
|
left:33vw;
|
|
}
|
|
.flip-container .text-title{
|
|
margin-top:0;
|
|
}
|
|
|
|
.flip-container .phone-container{
|
|
left: 42vw;
|
|
top: 5vh;
|
|
}
|
|
.flip-container.flip-from-left .container-text{
|
|
left: 33vw;
|
|
top: 5vh;
|
|
}
|
|
.flip-container.flip-from-left .phone-container{
|
|
left: 25vw;
|
|
top: 10vh;
|
|
}
|
|
|
|
#content-4{
|
|
margin-top: 25vh;
|
|
}
|
|
#content-5
|
|
{
|
|
margin-top: 15vh;
|
|
}
|
|
|
|
#popover{
|
|
margin-top: 100vh;
|
|
}
|
|
/**
|
|
exemples sliders
|
|
*/
|
|
.slider-screen .text-title{
|
|
margin-top:1em;
|
|
}
|
|
.slider-screen .text,
|
|
.slider-screen .phone-container {
|
|
position: relative;
|
|
width: 412px;
|
|
left: 25vw;
|
|
top: 5vh;
|
|
}
|
|
.bullets{
|
|
top: 28em;
|
|
}
|
|
.arrow-left,
|
|
.arrow-right{
|
|
top: 60vh;
|
|
}
|
|
.slider-screen{
|
|
min-height:100vh;
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 35em) {
|
|
#main_title{
|
|
margin-top: 5vh;
|
|
}
|
|
#main_title_container h2 {
|
|
margin-top: 15vh;
|
|
}
|
|
|
|
#content_all h2, #welcome h2 {
|
|
font-size: 4rem !important;
|
|
}
|
|
#content_all .text{
|
|
padding-right:0;
|
|
}
|
|
.container-text-md{
|
|
width: auto;
|
|
}
|
|
#content_all .columns{
|
|
width:100%;
|
|
margin: 1rem;
|
|
}
|
|
.flip-container .container-text{
|
|
width:100%;
|
|
left:5vw;
|
|
}
|
|
.flip-container .phone-container {
|
|
|
|
position: static;
|
|
margin: 4rem auto;
|
|
}
|
|
.flip-container.flip-from-left .container-text{
|
|
left: 5vw;
|
|
}
|
|
.flip-container .phone-container {
|
|
|
|
margin-top: 7rem;
|
|
}
|
|
.flip-container .text-description{
|
|
max-width: 90vw;
|
|
}
|
|
|
|
#content-4 {
|
|
margin-top: 50vh;
|
|
}
|
|
#content-5 {
|
|
margin-top: 45vh;
|
|
}
|
|
|
|
.slider-screen .text, .slider-screen .phone-container{
|
|
left: 5vw;
|
|
max-width: 90vw;
|
|
}
|
|
|
|
}
|