/* FONT FACE */
@import url(https://fonts.googleapis.com/css?family=Open+Sans|Bree+Serif|Courgette);

/*GLOBAL */

*::-moz-selection {
	background-color: rgba(246, 36, 89,0.8);
	color: white;
}

* {
	box-sizing: border-box;
	outline: none;
	-webkit-transition: all 0.3s ease 0s;
	        transition: all 0.3s ease 0s;
}

body {
	font-family: "Bree Serif", Arial;
	font-size: 1.1em;
	line-height: 2;
	margin: 0;
	color: #999;
	background-image: url(../img/fond.png);
}

h1, h2, h3 {
	font-weight: normal;
	color: #f62459;
}

h1:before, h1:after, h2:before, h2:after {
	content: " - "
}

h1 {
	font-size: 2.5em;
	color: white;
}

h2 {
	text-align: center;
	padding-bottom: 15px;
	border-bottom: 2px solid rgba(153,153,153,0.1);
}

a {
	text-decoration: none;
	color: rgba(246, 36, 89,1);
	-webkit-transition: all 0.3s ease 0s;
	        transition: all 0.3s ease 0s;
}

.container {
	max-width: 1100px;
	margin: 0 auto;
}

.clear:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	line-height: 0;
	visibility: hidden;
}

/* HEADER */
header {
	padding: 50px;
}

header > a {
	color: #999;
	font-size: 2em;
}

header a:hover {
	-webkit-transform: translate(0, 10px);
	    -ms-transform: translate(0, 10px);
	        transform: translate(0, 10px);
}

header a:hover {
	color: rgba(246, 36, 89,1);
}

header > a i {
	padding: 25px;
	margin: 10px;
	background-color: rgba(246, 36, 89, 0.1);
	border: 3px solid rgba(246, 36, 89, 0.2);
	border-radius: 50%;
	color: #999;
	-webkit-transition: all 0.3s ease 0s;
	        transition: all 0.3s ease 0s;

}

header img {
	width: 50px;
	margin-right: 10px;
	display: inline-block;
	vertical-align: middle;
}

header > a:hover img {
	-webkit-transform: scale(1.3);
	    -ms-transform: scale(1.3);
	        transform: scale(1.3);
}

nav {
	float: right;
}

nav a {
	display: inline-block;
	color: #999;
	padding: 0 50px;
	text-align: center;
	font-size: 1.2em;
}

nav a i {
	display: block!important;
	padding: 10px;
}

/* MAIN */
section a {
	padding: 10px 20px;
}

canvas {
	display: block;
	margin: 0 auto;
	padding-top: 25px;
	color: #999;
}

.cta, section a:hover {
	background: #ff2d76;
	background: -webkit-linear-gradient(top, #ff2d76 0%,#cd0148 100%);
	background: -webkit-linear-gradient(top, #ff2d76 0%, #cd0148 100%);
	background: linear-gradient(to bottom, #ff2d76 0%,#cd0148 100%);
	color: white;
	-webkit-transition: all 0.3s ease 0s;
	        transition: all 0.3s ease 0s;
	border-radius: 5px;
}

section.container {
	margin: 100px auto;
}

#presentation {
	background-image: url(../img/bg_header.png);
	background-size: cover;
	text-align: center;
	color: white;
	padding: 150px 75px;
}

#presentation p {
	padding-bottom: 50px;
}

.column {
	-webkit-columns: 3 300px;
	   -moz-columns: 3 300px;
	        columns: 3 300px;
	text-align: center;
	padding: 10px 25px;
}

.column i {
	font-size: 1.7em;
	background-color: rgba(153,153,153,0.1);
	border: 2px solid rgba(153,153,153,0.2);
	color: #999;
	text-align: center;
	width: 75px;
	height: 75px;
	line-height: 69px;
	border-radius: 50%;
}

.column i:hover {
	-webkit-animation: bounce 0.35s ease infinite alternate;
	        animation: bounce 0.35s ease infinite alternate;
}

@-webkit-keyframes bounce{
     from {-webkit-transform: translateY(0);transform: translateY(0);}
     to   {-webkit-transform: translateY(-20px);transform: translateY(-20px);}
}

@keyframes bounce{
     from {-webkit-transform: translateY(0);transform: translateY(0);}
     to   {-webkit-transform: translateY(-20px);transform: translateY(-20px);}
}

#contact p, #resume div {
	margin: 25px;
}

#resume div:nth-of-type(even) img {
	float: left;
	width: 50%;
	margin-right: 25px;
	margin-bottom: 15px;
}

#resume div:nth-of-type(odd) img {
	float: right;
	width: 50%;
	margin-left: 25px;
	margin-bottom: 15px;
}

/* Formulaire */

input, textarea {
	padding: 20px 20px 20px 70px;
	margin: 1%;
	color: #666;
	background-color: transparent;
	border-radius: 50px;
	border: 1px solid #ccc;
	font-family: Arial;
	font-size: 0.8em;
}

input {
	width: 48%;
	float: left;
}

input:first-child {
	background-image: url(../img/bg_form_name.svg);
	background-repeat: no-repeat;
	background-size: 40px;
	background-position: 10px;
}

input:nth-of-type(2) {
	background-image: url(../img/bg_form_mail.svg);
	background-repeat: no-repeat;
	background-size: 40px;
	background-position: 10px;
}

textarea {
	width: 98%;
	resize: none;
	background-image: url(../img/bg_form_message.svg);
	background-repeat: no-repeat;
	background-size: 50px;
	background-position: 15px;
	padding-left: 80px;
}