/*
|--------------------------------------------------------------------------
|     Sommaire
|--------------------------------------------------------------------------
/*
* @auteur : Damien Dupont - Portfolio
* @date : 2017, avril
* @version : 1.0
*/

/* == Code couleur & Polices */
/* == General */
/* == header */
/* == Content */
/* == Citation */
/* == Skills */
/* == Interests */
/* == Project Links */
/* == Footer */
/* == Responsive */

/*
|--------------------------------------------------------------------------
| == Code couleur & Polices
|--------------------------------------------------------------------------

orange (ecrit + fond)   : #f3867f
noir (écrit)            : #595968
gris (écrit)			: #777777
noir clair (écrit)		: #595968
noir foncé (écrit)		: #414447

orange (lien) 			: #ff8162
noir (lien)				: #4e4e4e

orange (principal + deg): #ff8162
jaune (principal + deg) : #f8b542
gris (fond, fort)		: #4c4c59
violet (deg)			: #b771bd
violet-bleu (deg)		: #474b91

*/

@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');

/*
|--------------------------------------------------------------------------
| == General
|--------------------------------------------------------------------------
*/

*,
*::after,
*::before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

*::selection {
    background: #ec8c59;
    color: #ffffff;
}


.clearfix::before,
.clearfix::after {
	display: table;
	content: '';
}

.clearfix::after {
	clear: both;
}

main {
	overflow: hidden;
}

body {
	font-family: 'Lato', sans-serif;
	font-size: 1.2rem;
	font-weight: 300;
	color: #414447;
	background: #ffffff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1 {
	margin: 0;
}

a {
	color: #f27069;
	text-decoration: none;
	transition: color .3s ease;
}

a:hover,
a:focus {
	color: #ff3100;
	border-bottom: 1px dotted #f27069;
	transition: color .3s ease;
	text-shadow: 0 0 3px rgba(0,0,0,.1)
}

ul {
    list-style-type: none;
}

.container {
	position: relative;
}

.btn {
	display: inline-block;
	color: #333333;
	font-size: .75rem;
	font-weight: 400;
    text-decoration: none;
	text-transform: uppercase;
	padding-left: 40px;
	padding-right: 40px;
	margin-top: 5px;
	height: 60px;
	line-height: 60px;
	background-color: white;
	border-radius: 3px;
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);
	transition: all .3s ease;
	background-image: linear-gradient(131deg, #ffffff 0%, #ffffff 100%);
}

	.btn:hover {
		color: #FFF;
		background-image: linear-gradient(131deg, #ee6174 0%, #fe9e48 100%);
		transition: all .25s ease;
	}

.btnLight {
	display: inline-block;
	vertical-align: bottom;
	height: 60px;
	padding-left: 40px;
	padding-right: 40px;
	margin-top: 5px;
	border: 2px solid #ffffff;
	color: #ffffff;
	font-size: .75rem;
	font-weight: 400;
    text-decoration: none;
	text-transform: uppercase;
	text-shadow: 0 0 4px rgba(0,0,0,.5);
	line-height: 60px;
	background-color: rgba(255,255,255,0);
	border-radius: 3px;
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);
	transition: all .3s ease;
}

	.btnLight:hover {
		text-decoration: none;
		border: 2px solid #fe9e48;
		color: #fe9e48;
	}

@media (max-width: 767px) {
	.no_mobile {
		display: none;
	}
}

@media (min-width: 768px) {
	.on_mobile {
		display: none;
	}
}

@media (min-width: 1200px) {
	.no_hd {
		display: none;
	}
}

.text-center {
	text-align: center;
}

.modal-body .conclusion {
	background-color: #f7f7f7;
	padding: 1rem;
	font-size: 18px;
}

/*
|--------------------------------------------------------------------------
| == Header
|--------------------------------------------------------------------------
*/

.home_page header {
	padding: 3vmax 0 0 3vmax;
	position: absolute;
	width: 100%;
	z-index: 5;
	pointer-events: none;
}

.home_page header h1 {
	margin: 0;
	letter-spacing: -0.035em;
	font-size: 6.2rem;
	line-height: 1;
	font-weight: 100;
	color: #949494;

	background: linear-gradient(45deg, rgb(255, 94, 0) 0%, rgb(255, 154, 95) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;

	animation-name: headerH1;
	animation-duration: 1s;
}

@keyframes headerH1 {
    from {opacity: 0;}
    to {opacity: 1;}
}

@media (max-width: 767px) {
	.home_page header h1 {
		font-size: 4rem;
	}
}

header .profession::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 440px;
	height: 1px;
	background-color: #595968;
    background: linear-gradient(131deg, rgba(238, 97, 116, 1) 0%, rgba(254, 158, 72, 1) 100%);

	animation-name: headerLine;
	animation-duration: 2s;
}

@keyframes headerLine {
    from {width: 0px;}
    to {width: 440px;}
}

	@media (max-width: 767px) {
		header .profession::before {
			width: 225px;
			animation: none;
		}
	}

header p {
	font-weight: 300;

	animation-name: headerText;
	animation-duration: 4s;
}

header .profession {
	position: relative;
	padding-top: .5rem;
	margin: 1.5rem 0 .5rem .3rem;
    font-size: 1.95rem;
	font-weight: 600;
	text-transform: uppercase;
    color: #777777;

	/*background: linear-gradient(45deg, rgb(255, 94, 0) 0%, rgb(255, 228, 95) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;*/
}

	@media (max-width: 767px) {
		header .profession {
			font-size: 1rem;
		}
	}

header .presentation {
	padding-top: 2rem;
	max-width: 30%;
	margin: 1rem 0 1rem .3rem;
	font-size: 1.2rem;
	font-weight: 300;
	color: #414447;
}

@keyframes headerText {
    from {opacity: 0;}
    to {opacity: 1;}
}

@media (max-width: 769px) {
	header .presentation {
		max-width: 80%;
		padding-top: 0;
	}
}

/*
|--------------------------------------------------------------------------
| == Content
|--------------------------------------------------------------------------
*/

.section {
	overflow: hidden;
	position: relative;
	height: 100vh;
	min-height: 800px;
	max-height: 1200px;
	padding: 7vmax 7vmax 0 7vmax;
}

.interval {
	position: relative;
	overflow: hidden;
	padding-top: 10rem;
}

	.interval:after {
		font-weight: 100;
	    opacity: 0.5;
	    color: #e4eae8;
	    font-size: 22vw;
	    letter-spacing: 1vw;
	    text-align: center;
	    position: absolute;
	    left: 50%;
	    -webkit-transform: translateX(-50%);
	    -moz-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	    -o-transform: translateX(-50%);
	    transform: translateX(-50%);
		z-index: 0;
	}

	.interval .container_text_organized > h1,
	.interval > .container > h1 {
		display: inline-block;
		font-size: 3rem;
		font-weight: 300;

		background: linear-gradient(45deg, rgb(255, 94, 0) 0%, rgb(255, 154, 95) 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
	}

	@media (max-width: 769px) {
		.interval .container_text_organized h1,
		.interval > .container > h1 {
			display: block;
			text-align: center;
		}
	}

.cv,
.linkedIn {
	position: fixed;
	display: inline-block;
    top: 15px;
    z-index: 6;
	text-align: center;
	background: #ffffff;
	width: 50px;
	height: 50px;
	border-radius: 100%;
	box-shadow: 0px 0px 7px 0px rgba(000, 000, 000, 0.2);
	transition: all .25s ease;
}

	.cv:hover,
	.linkedIn:hover {
		color: #ffffff;
	    background-color: #9c9c9c;
		background: linear-gradient(45deg, rgb(238, 97, 116), rgb(254, 158, 72));
		transition: all .25s ease;
	}

.cv {
	right: 100px;
	padding-top: 10px;
	color: #bcbcbc;
	font-weight: 700;
	font-size: 1.3rem;

	animation-name: cv;
	animation-duration: 2s;
}

@media (max-width: 767px) {
	.cv {
		right: 88px;
	}
}

@keyframes cv {
    from {top: -75px;}
    to {top: 15px;}
}

.linkedIn {
	right: 34px;
	animation-name: linkedIn;
	animation-duration: 2s;
}

@media (max-width: 767px) {
	.linkedIn {
		right: 22px;
	}
}

@keyframes linkedIn {
    from {top: -50px;}
    to {top: 15px;}
}

	.linkedIn svg {
	    height: 20px;
	    fill: #bcbcbc;
	    position: absolute;
	    top: 50%;
	    left: 50%;

	    -webkit-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	    -o-transform: translate(-50%,-50%);
	    transform: translate(-50%,-50%);

	    transition: all .25s ease;
	}

		.linkedIn:hover svg {
		    fill: #ffffff;
			transition: all .25s ease;
		}

/*
|--------------------------------------------------------------------------
| == intro
|--------------------------------------------------------------------------
*/

.section--intro a,
.section--intro a:hover {
	text-decoration: none;
	border: none;
}

.section--intro {
	transition: all 1s ease;
}


/*
|--------------------------------------------------------------------------
| == Citation
|--------------------------------------------------------------------------
*/

.citation {
	padding-top: 30vh;
	padding-bottom: 30vh;
	background : #f7f7f7;
	box-shadow: 0px -5px 5px rgba(0,0,0,.2);
}

	.citation .finding {
		line-height: 1.5;
		font-size: 1.5rem;
	}


/*
|--------------------------------------------------------------------------
| == Skills
|--------------------------------------------------------------------------
*/

.section--skills.interval {
	overflow: visible;
}

.section--skills:after {
	top: 0rem;
    content: 'MAITRISES';
}

.section--skills .col-xs-12 {
	z-index: 1;
}

.description_organized {
	display: inline-block;
	background-color: #f7f7f7;
}

@media (max-width: 767px) {
	.description_organized {
		text-align: center;
	}
}

.description_organized h1 {
	padding: .3rem;
	color: #777777;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	display: block;
	text-align: center;
	background-color: #d9d9d9;
}

	.description_organized .softwares {
		margin-top: 5px;
		display: inline-block;
	}

	.description_organized figure {
		display: inline-block;
		/*width: 20%;*/
		margin: 5px;
		text-align: center;
		vertical-align: middle;
	}


		.description_organized figure img {
			width: 60px;
		}

		.description_organized figure figcaption {
			display: inline-block;
			font-size: .9rem;
		}

.organized
{
	width: 100%;
	position: relative;
}
.organized .ha-waypoint
{
	position: absolute;
	top: 60%;
}
.container_text_organized
{
	width: 40%;
	vertical-align: middle;
	display: inline-block;
}
.bar_organized
{
	width: 4vw;
	height: 1px;
	background-color: #7e5ea7;
	margin-bottom: 5%;
}
.description_organized
{
	margin-top: 50px;
	font-size: 1.5rem;
	color: #595968;
}
.container_img_organized {
	width: 60%;
	height: 100%;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}

.position_img_organized {
	position: absolute;
  	top: 50%;
  	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.container_img_organized img
{
	position: absolute;
	top: 50%;
  	left: 50%;
}
.c_organized_1
{
	opacity: 0;
	-webkit-transform: translate(-50%,-60%);
	-ms-transform: translate(-50%,-60%);
	-o-transform: translate(-50%,-60%);
	transform: translate(-50%,-60%);
	width: 50vw;
	max-width: 820px;
	-webkit-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	   -moz-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	     -o-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	        transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
}
.position_img_organized.anim_on .c_organized_1
{
	opacity: 1;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.c_organized_2
{
	opacity: 0;
	-webkit-transform: translate(-40%,-65%);
	-ms-transform: translate(-40%,-65%);
	-o-transform: translate(-40%,-65%);
	transform: translate(-40%,-65%);
	width: 45vw;
	max-width: 748px;
	-webkit-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	   -moz-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	     -o-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	        transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	-webkit-transition-delay: 0.25s;
    transition-delay: 0.25s;
}
.position_img_organized.anim_on .c_organized_2
{
	opacity: 1;
	-webkit-transform: translate(-40%,-55%);
	-ms-transform: translate(-40%,-55%);
	-o-transform: translate(-40%,-55%);
	transform: translate(-40%,-55%);
}
.c_organized_3
{
	opacity: 0;
	-webkit-transform: translate(-50%,-110%);
	-ms-transform: translate(-50%,-110%);
	-o-transform: translate(-50%,-110%);
	transform: translate(-50%,-110%);
	width: 25vw;
	max-width: 460px;
	-webkit-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	   -moz-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	     -o-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	        transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	-webkit-transition-delay: 0.35s;
    transition-delay: 0.35s;
}
.position_img_organized.anim_on .c_organized_3
{
	opacity: 1;
	-webkit-transform: translate(-50%,-90%);
	-ms-transform: translate(-50%,-90%);
	-o-transform: translate(-50%,-90%);
	transform: translate(-50%,-90%);
}
.c_organized_4
{
	opacity: 0;
	-webkit-transform: translate(-10%,-100%);
	-ms-transform: translate(-10%,-100%);
	-o-transform: translate(-10%,-100%);
	transform: translate(-10%,-100%);
	width: 25vw;
	max-width: 460px;
	-webkit-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	   -moz-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	     -o-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	        transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	-webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.position_img_organized.anim_on .c_organized_4
{
	opacity: 1;
	-webkit-transform: translate(-10%,-60%);
	-ms-transform: translate(-10%,-60%);
	-o-transform: translate(-10%,-60%);
	transform: translate(-10%,-60%);
}
.c_organized_5
{
	opacity: 0;
	-webkit-transform: translate(35%,-90%);
	-ms-transform: translate(35%,-90%);
	-o-transform: translate(35%,-90%);
	transform: translate(35%,-90%);
	width: 21.5vw;
	max-width: 410px;
	-webkit-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	   -moz-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	     -o-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	        transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	-webkit-transition-delay: 0.45s;
    transition-delay: 0.45s;
}
.position_img_organized.anim_on .c_organized_5
{
	opacity: 1;
	-webkit-transform: translate(35%,-30%);
	-ms-transform: translate(35%,-30%);
	-o-transform: translate(35%,-30%);
	transform: translate(35%,-30%);
}
.c_organized_6
{
	opacity: 0;
	-webkit-transform: translate(410%,110%);
	-ms-transform: translate(410%,-110%);
	-o-transform: translate(410%,-110%);
	transform: translate(410%,-110%);
	width: 5vw;
	max-width: 72%;
	-webkit-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	   -moz-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	     -o-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	        transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	-webkit-transition-delay: 0.7s;
    transition-delay: 0.7s;
}
.position_img_organized.anim_on .c_organized_6
{
	-webkit-transform: translate(310%,10%);
	-ms-transform: translate(-310%,-10%);
	-o-transform: translate(-310%,-10%);
	transform: translate(-310%,-10%);
	opacity: 1;
}
.c_organized_7
{
	opacity: 0;
	-webkit-transform: translate(100%,-320%);
	-ms-transform: translate(100%,-320%);
	-o-transform: translate(100%,-320%);
	transform: translate(100%,-320%);
	width: 6vw;
	max-width: 187px;
	-webkit-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	   -moz-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	     -o-transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	        transition: all 1s cubic-bezier(0.500, -0.010, 0.000, 1.005);
	-webkit-transition-delay: 0.35s;
    transition-delay: 0.35s;
}
.position_img_organized.anim_on .c_organized_7
{
	opacity: 1;
	-webkit-transform: translate(100%,-250%);
	-ms-transform: translate(100%,-250%);
	-o-transform: translate(100%,-250%);
	transform: translate(100%,-250%);
}

@media screen and (max-width: 800px) {
	.container_title {
	 font-size: 19vw;
	 margin-top: 0;
	}

	.organized {
	 overflow-x: hidden;
	 padding-bottom: 0px;
	}

	.container_text_organized,
	.container_img_organized {
	 display: block;
	 width: 100%;
	}

	.container_text_organized {
	 text-align: center;
	}

	 .bar_organized {
		 width: 56px;
	 }

 	.container_img_organized {
		 height: 30vw;
		 margin-top: 100px;
	 }

	 .title_organized {
		 font-size: 15vw;
	 }

	 .description_organized {
		 font-size: 1rem;
	 }

	 .c_organized_1 {
		 width: 100vw;
	 }

	 .c_organized_2 {
		 width: 90vw;
	 }

	.c_organized_3,
	.c_organized_4 {
	 width: 50vw;
	}

	.c_organized_5 {
	 width: 43vw;
	}

	.c_organized_6 {
	 width: 10vw;
	}

	.c_organized_7 {
	 width: 12vw;
	}
}

/*
|--------------------------------------------------------------------------
| == Interests
|--------------------------------------------------------------------------
*/


.section--interests a,
.section--interests a:hover {
	text-decoration: none;
	border: none;
}

.section--interests:after {
	top: 0rem;
    content: 'INTERETS';
}

	@media (min-width: 768px) {
		.section--interests .row {
			margin: 15px -15px;
		}
	}

	@media (max-width: 767px) {
		.section--interests > .container > .row {
			padding-top: 2rem;
		}
	}

	.section--interests .row .col-sm-4 {
		z-index: 1;
	}

/*
|--------------------------------------------------------------------------
| == Project Links
|--------------------------------------------------------------------------
*/

.section--projects:after {
	top: 0;
    content: 'PROJETS';
}

	.section--projects > .container > h1 {
		margin-bottom: 15px;
	}

	@media (min-width: 768px) {
		.section--projects .container .row {
			margin: 0px -15px;
		}
	}

	@media (max-width: 767px) {
		.section--projects > .container > .row {
			padding-top: 2rem;
		}
		.section--projects .col-xs-12 {
			padding: 0;
		}
		.section--projects .container {
			padding-left: 0;
			padding-right: 0;
		}
	}

	.section--projects .row .col-xs-12 {
		margin-bottom: 15px;
		z-index: 1;
	}

		.section--projects .project {
			background-color: #444444;
		    background-repeat: no-repeat;
		    background-position: center center;
		    -webkit-background-size: cover;
		    background-size: cover;
		    padding: 7rem 3rem 6rem 3rem;
			z-index: 1;
		}


			@media (max-width: 767px) {
				.section--projects .project .btn,
				.section--projects .project .btnLight {
					display: block;
					margin: 1rem .2rem;
					padding: 1rem;
					text-align: center;
					height: auto;
					line-height: 1.8rem;
				}
			}

		.section--projects .project.teamrank {
			background-image: url('../img/teamrankCover.jpg');
		}

		.section--projects .project.hopyjama {
			background-image: url('../img/hopyjamaCover.jpg');
		}

		.section--projects .project.hardpulz {
			background-image: url('../img/hardpulzCover.png');
		}

		.section--projects .project.bn {
			background-image: url('../img/bnCover.jpg');
		}

		@media (max-width: 767px) {
			.section--projects .project  {
				padding: 2rem 1rem;
			}

			.section--projects .project .row {
				background-color: #333333;
				background-color: rgba(51,51,51,.8);
				padding: 10px;
			}
		}

		.section--projects .project p {
			color: #ffffff;
			font-weight: 300;
			text-shadow: 0 0 10px #000000;
		}


			.section--projects .project h1 {
				color: #ffffff;
				font-size: 3rem;
				font-weight: 100;
				color: #ffffff;
				text-shadow: 0 0 5px #000000;
			}

				@media (max-width: 767px) {
					.section--projects .project h1 {
						font-size: 2.2rem;
					}
				}

				.section--projects .project h1 small {
					display: block;
					text-transform: uppercase;
					font-size: 1rem;
					font-weight: 600;
					text-shadow: 0 0 5px #000000;
				}

					@media (max-width: 767px) {
						.section--projects .project h1 small {
							margin-top: 1rem;
						}
					}

/*
|--------------------------------------------------------------------------
| == Footer
|--------------------------------------------------------------------------
*/

main {
	padding-bottom: 125px;
	margin-bottom: 255px;
	background-color: #ffffff;
}

@media (max-width: 767px) {
	main {
		padding-bottom: 0;
		margin-bottom: 0;
	}
}

footer {
	position: fixed;
	z-index: -1;
	bottom: 0;
	right: 0;
	left: 0;
	height: 255px;
	background-image: linear-gradient(131deg, rgba(238, 97, 116, 1) 0%, rgba(254, 158, 72, 1) 100%);
}

	@media (max-width: 767px) {
		footer {
			position: relative;
			height: 300px;
			z-index: 0;
		}
	}

	footer p {
		text-align: center;
		padding-top: 100px;
		text-transform: uppercase;
		color: #ffffff;
	}

	@media (max-width: 767px) {
		footer p {
			margin-top: 70px;
		}
	}

		footer p a {
			font-size: 3.6rem;
			color: #ffffff;
		}

			footer p a:hover {
				color: #6d6d6d;
			}

	footer .back_to_top {
		position: absolute;
		right: 20px;
		bottom: 70px;
		width: 75px;
		opacity: .5;
		transition: all .3s ease;
	}

	@media (max-width: 767px) {
		footer .back_to_top {
			width: 74px;
			bottom: 5px;
			right: 50%;
			margin-right: -37px;
		}
	}

	footer .back_to_top:hover {
		border: none;
		opacity: .8;
		transition: all .2s ease;
	}

		footer .back_to_top img {
			width: 100%;
		}

#contact_me p {
	font-size: 1.5rem;
}

#contact_me p img {
	width: 75px;
	margin: 1rem 1rem 1rem 0;
}

@media (max-width: 767px) {
	#contact_me p {
		font-size: 1rem;
	}

	#contact_me p img {
		width: 50px;
		margin: .5rem .5rem .5rem 0;
	}

	#contact_me p .btn {
	color: #FFF;
	background-color: #ee6174;
	background-image: linear-gradient(131deg, #ee6174 0%, #fe9e48 100%);
	}
}

/*
|--------------------------------------------------------------------------
| == Responsive
|--------------------------------------------------------------------------
*/
@media screen and (max-width: 50em) {
	.home_page header {
		width: 80%;
	}
	header h1 {
		font-size: 2.5em;
	}
	header p {
		font-size: 0.85em;
	}
	.interval {
		padding: 2.5rem 1rem;
	}
	.interval__text {
		font-size: 1.25em;
		padding: 0 0 3em 0;
	}
	.section__heading {
		font-size: 2.5em;
	}
	.button-menu {
		top: 0.75em;
		right: 0.75em;
		width: 30px;
		height: 20px;
	}
	.isolayer.isolayer--scroll1 {
		top: -38vh;
	}
	.pater {
		position: relative;
		display: block;
		background: none;
		margin: 0 0 0 auto;
		padding: 0;
		width: 100%;
	}
}