@import 'https://fonts.googleapis.com/css?family=Lato';
* {
	box-sizing:border-box;
}
body {
	font-size:16px;
	font-family: 'Lato', sans-serif;
	background-color: #eee;
}

header {
	text-transform: uppercase;
}
header ul li,
header ul {
		display: inline-block;	
		margin-right: 1em
}
a {
	text-decoration: none;
	color: #428bca
}

#logo {
	font-size:1.5em;
	font-weight: bold
}
.wrap-1 {
	max-width: 1200px;
	margin:0 auto;
}
.main.wrap-1 {
	background-color: #fff;
	padding:2em;
	border-radius: 3px
}

.phrase {
	border-bottom: 1px solid #eee
}
.phrase div {
display: inline-block;
vertical-align: middle;
}

.phrase div:first-child{
width: 50px
}
.phrase div:nth-child(2) {
max-width: 85%;
margin:0 1em;
}

.phrase p {
    font-size: 1em;
    line-height: 1.58em;
    letter-spacing: -.003em;
}
.phrase button {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	font-size: 1.5em;
	background-color: #fff;
	border-style: none;
	border:2px solid #428bca;
	cursor: pointer;
}
.phrase button:hover, .phrase.select  button {
	background-color: #428bca;
}
.phrase button:hover .fa-pencil, .phrase.select button .fa-pencil {
	color: #fff!important
}
.phrase.select  button:hover{
	background-color: #fff;
}
.phrase.select button:hover .fa-pencil, .phrase button .fa-pencil{
	color: #428bca!important
}





.btn {
	font-family: 'Lato',sans-serif;
	background-color: #428bca	;
	color: #fff;
	border: none;
	font-size: 1.2em;
	padding: 0.5em 1em;
	border-radius: 3px;
	margin-top: 1em;
	cursor: pointer;
}
.hovertouch p{
		background-color: #fff6ad	;
}

.phrase.paragraphe {
	border-bottom: 2px solid #428bca
}



@media screen and (max-width:960px) {
body {
	font-size: 20px
}	

.phrase div:nth-child(2) {
max-width: 80%;
margin:0 1em;
}

}

@media screen and (max-width:600px) {

.phrase div:nth-child(2) {
max-width: 70%;
margin:0 1em;
}
.phrase div:first-child{
width: 50px
}
.wrap-1.main {
		padding: 0.5em
}

}