digital-theory/css/7-responsive.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;
	}

}