/*==========  Desktop First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (min-width : 993px) {
	.nav_button_mobile {
		display: none;
	}
	.nav_button {
		display: block;
	}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	.open {
    display: block;
  }
  .nav {
    display: none;
  }
  .nav_button {
  	display: none;
  }	
  .nav_button_mobile {
  	display: block;
		text-align: center;
		margin: 0;
		margin-top: 20px;
	}
	.mymagicoverbox {
		margin: 0;
	}
	.workshop_month {
		text-align: center;
		margin-bottom: 10px;
	}
	.workshop_month img {
		margin: 0 0 10px 0;
	}
	.workshop_place {
		margin-bottom: 10px;
	}
	.btn_fb {
		padding-bottom: 0;
	}
	.workshop_photo img{
		margin-bottom: 15px;
	}
	footer .logo {
 	 	margin-right: 20px;
  }
  .connectoo p {
  	padding-bottom: 20px;
  }
	.what_needed_info {
		top: 10px;
	}
	.arrow {
		padding-left: 25px;
	}
	.what_we_did_text {
		padding: 0 40px; 
	}
	.what_we_did_img img {
		float: right;
		top: 0;
	}
	.how_we_did h2{
		text-align: center;
	}
	.how_we_did_img {
		height: 70px;
	}
	.calibr, .time, .platform {
		padding-bottom: 20px;
	}
	.what_we_did h2 {
		text-align: center;
	}
	.what_we_did_text {
		padding: 0 25px;
	}
	.buttons button {
		margin-bottom: 20px;
	}

	#modal_close{
		top: 0;
		right: 30px;
	}
	.mymagicoverbox_fenetre p {
		font-size: 14px;
		margin: 50px 0 40px 0;
		padding: 0 10px;
	}
	.mymagicoverbox_fenetre {
		width: 500px;
		left: -250px;
		z-index: 9999;
		position: fixed;
		margin-left: 50%;
	}
	.mymagicoverbox_fenetreinterieur	{
		height: 350px;
	}
	.mymagicoverbox_fenetreinterieur input {
		text-align: center;
		font-size: 16px;
		width: 90%;
		margin-bottom: 20px;
	}
	.mymagicoverbox_fenetreinterieur textarea {
		font-size: 16px;
		width: 90%;
		min-height: 60px;
	}
	.btn_form {
		text-align: center;
		text-transform: uppercase;
		font-weight: 800;
		font-size: 16px;
		padding: 20px 55px;
		margin-top: 25px;
	}

	.workshop_month	span{
		margin: 0;
	}
	.workshop_month	img{
		margin: 0;
	}

 }

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	footer .logo {
  	margin-right: 20px;
  }
  footer .contacts p {
  	font-size: 13px;
  	margin: 0;
  	padding: 0;
  }
  footer .contacts {
 	 	padding-top: 20px;
  }
  .what_we_did_text img {
  	display: none;
  }
  .buttons button {
		margin-left: 270px;
	}

	#modal_close{
		top: 0;
		right: 40px;
	}
	.mymagicoverbox_fenetre p {
		font-size: 10px;
		margin: 50px 0 40px 0;
		padding: 0 10px;
	}
	.mymagicoverbox_fenetre {
		width: 316px;
		left: -158px;
		z-index: 9999;
		position: fixed;
		margin-left: 50%;
	}
	.mymagicoverbox_fenetreinterieur	{
		height: 350px;
	}
	input {
		text-align: center;
		padding-top: 10px;
		margin-bottom: 30px;
		font-size: 14px;
		width: 90%;
	}
	textarea {
		font-size: 14px;
		width: 90%;
		min-height: 60px;
	}
	.btn_form {
		text-align: center;
		text-transform: uppercase;
		font-weight: 800;
		font-size: 15px;
		padding: 20px 55px;
		margin-top: 25px;
	}

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 525px) {
	.open {
    display: block;
  }
  .nav {
    display: none;
  }
  .nav ul li {
    margin-left: 20px;
    font-size: 18px;
  }
  .nav {
    padding-top: 0;
  }
  .what_needed_text img {
		height: 55px;
		width: 310px;
	}
	h2 {
		padding: 0 20px;
	}
	p {
		padding: 0 10px;
	}

	   
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 450px) {
	.nav ul {
    padding-left: 5px;
  }
  .nav ul li {
    font-size: 20px;
  }
  .nav ul {
    padding-top:35px;
    padding-left: 5px;
  }
	.what_we_did_img img {
		height: 504px;
		width: 250px;
	}
	.what_needed_text img {
		height: 45px;
		width: 275px;
	}
	.what_needed h2, .connectoo_text h2, .how_we_did h2, .what_we_did h2 {
		font-size: 16px;
	}
	footer .social {
		padding-top: 10px;
  	text-align: center;
  }
  footer .social i {
  	font-size: 25px;
  	padding: 0 10px;
  }

}

@media only screen and (max-width : 375px) {
	.nav ul li {
    font-size: 13px;
    margin-left: 10px;
  }
  .nav ul li {
    font-size: 13px;
    margin-left: 10px;
  }
  footer .contacts {
  	padding-top: 20px;
  }
  footer .contacts p {
  	font-size: 12px;
  }
  .buttons button {
		margin-left: 80px;
	}
	
}

@media only screen and (max-width : 320px) {
	.buttons button {
		margin-left: 60px;
	}
}

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
	p {
		padding: 0 20px;
	}
	h2 {
		padding: 0 20px;
	}
	.arrow {
		padding-left: 35px;
	}
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	.what_we_did_text img {
		height: 100px;
		width: 450px;
		top: 400px;
		left: 10px;
	}

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	.nav_button_mobile {
		display: none;
	}
	.nav_button {
		display: block;
	}
	.what_we_did_text img {
		height: 141px;
		width: 540px;
		top: -115px;
		left: -90px;
	}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
	.what_we_did_text img {
		height: 141px;
		width: 611px;
		top: -95px;
		left: -80px;
	}	

}