/*
	Theme Name: Magazine Bureau
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
	font-size:100%;
}
body {
	font:300 11px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color:#444;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
}
a {
	color:#444;
	text-decoration:none;
}
a:hover {
	color:#444;
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
	border:1px solid #04A4CC;
}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

/* wrapper */
.wrapper {
	width:100%;
	margin:0 auto;
	position:relative;
}
/* header */
.header {

}
/* logo */
.logo {

}
.logo-img {

}
/* nav */
.nav {

}
/* sidebar */
.sidebar {

}
/* footer */
.footer {

}

/*------------------------------------*\
    PAGES
\*------------------------------------*/



/*------------------------------------*\
    IMAGES
\*------------------------------------*/



/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/

@font-face {
	font-family:'Font-Name';
	src:url('fonts/font-name.eot');
	src:url('fonts/font-name.eot?#iefix') format('embedded-opentype'),
		url('fonts/font-name.woff') format('woff'),
		url('fonts/font-name.ttf') format('truetype'),
		url('fonts/font-name.svg#font-name') format('svg');
    font-weight:normal;
    font-style:normal;
}

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (min-width:320px) {

}
@media only screen and (min-width:480px) {

}
@media only screen and (min-width:768px) {

}
@media only screen and (min-width:1024px) {

}
@media only screen and (min-width:1140px) {

}
@media only screen and (min-width:1280px) {

}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
	   only screen and (min-resolution:144dpi) {

}

/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}
.sticky {

}
.bypostauthor {

}

/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}
}



body {
	text-align: center;
	background-image: url('/wp-content/themes/magazinebureau/img/bg.png');
	background-size: 100%;

}

#personas {
	position: relative;
	max-width:960px;
	width:100%;
	margin: 0px auto;
}

.persona-on, .persona-selected {
	background-image: url('/wp-content/themes/magazinebureau/img/personas-on.png');
	position: absolute;
	top:-1px;
	height: 66.666%;
}

.persona-1 {
	width:9%;
	background-position: 0px 0px;
	left:0;
}
.persona-2 {
	width: 9.5%;
    background-position: 5.9% 0px;
    left: 6.2%;
}
.persona-3 {
	width: 9.1%;
    background-position: 11.8% 0px;
    left: 10.9%;
}
.persona-4 {
	width: 12%;
    background-position: 17% 0px;
    left: 15.2%;
}
.persona-5 {
	width: 6.5%;
    background-position: 23.9% 0;
    left: 23.8%;
}
.persona-6 {
	width: 10%;
    background-position: 28.5% 0px;
    left: 27.3%;
}
.persona-7 {
    width: 6.8%;
    background-position: 34% 0px;
    left: 33%;
}
.persona-8 {
	width: 10.5%;
    background-position: 39.4% 0px;
    left: 35.7%;
}
.persona-9 {
	width: 12%;
    background-position: 46.5% 0px;
    left: 43.5%;
}
.persona-10 {
	width: 13%;
    background-position: 54% 0px;
    left: 45.8%;
}
.persona-11 {
	width: 15%;
    background-position: 62.9% 0px;
    left: 50.8%;
}
.persona-12 {
	width: 10%;
    background-position: 69.95% 0px;
    left: 60.4%;
}
.persona-13 {
	width: 9%;
    background-position: 75.9% 0px;
    left: 68.7%;
}
.persona-14 {
	width: 10.5%;
    background-position: 81.99% 0px;
    left: 73.7%;
}
.persona-15 {
	width: 11%;
    background-position: 88.5% 0px;
    left: 78.9%;
}
.persona-16 {
	width: 10%;
    background-position: 94.6% 0px;
    left: 85.4%;
}
.persona-17 {
	width: 9%;
    background-position: 100% 0px;
    left: 91.5%;
}



.w960 {
	max-width: 960px;
	width: 100%;
	margin: 0px auto;
}


.logo-img {
	width: 260px;
    max-height: 100%;
    margin: 4rem;
}

h1, h2 {
	font-family: 'Gotham';
	margin:0;
	font-weight:800;
	font-size: 3.5rem;
	color: black;
	line-height: 4rem;
	margin:0px 15%;
	text-align: center;
	text-transform: uppercase;
}

h2 {
	font-size: 2.5rem;
	line-height: 2.8rem;
}

h3 {
	text-transform: uppercase;
	font-family: 'Gotham';
	font-weight:600;
	color:black;
	text-align: center;
	font-size:1.4rem;
}

h4 {
	font-family: 'Merriweather';
	font-size: 1.4rem;
	text-align: center;
	font-weight: normal;
	color:black;
}

p {
	color:black;
	font-size:1rem;
	font-family: 'Merriweather';
	width:66%;
	margin: 0px auto;
}

hr {
	background-color: #1B70AD;
	border: none;
	width: 100px;
	height:4px;
	margin:4rem auto;
}


a.action, .wpcf7-submit {
	background-color: #1C85B6;
	display: inline-block;
	padding: 1rem 2rem;
	text-transform: uppercase;
	font-family: 'Gotham';
	font-size: 1.4rem;
	letter-spacing: 6px;
	font-weight: 600;
	color:white;
	border: none;
}

.selected-persona {
	display: none;
}

.wpcf7-submit {
	margin-top:3rem;
	margin-bottom: 6rem;
}

.wpcf7-response-output, div.wpcf7-validation-errors {
    font-size: 1rem;
    top: -4rem;
    position: relative;
    border:none;
}

div.wpcf7 .ajax-loader {
	position: absolute;
	top: 65px;

}

form p {
	position: relative;
}

@font-face {
  font-family: 'Gotham';
  src: url("fonts/GOTHAM-BOLD.TTF") format("truetype");
  font-weight: 600;
  font-style: normal; 
}
@font-face {
  font-family: 'Gotham';
  src: url("fonts/GOTHAM-BLACK.TTF") format("truetype");
  font-weight: 800;
  font-style: normal; 
}

a.action {
	margin-bottom:100px;
}

.campaign {
	display: none;
}

.campaign h3 {
	letter-spacing: 5px;
    margin-bottom: 1rem;
    margin-top: 3rem;
    font-size: 1.2rem;
}

.hide {
	display: none;
}

.results {
	overflow: hidden;
}

#label {
	font-family: 'Gotham';
	color: #9D4939;
	text-transform: uppercase;
	font-size:1.2rem;
}

form {
	margin-top:3rem;
}

footer {
	background: #4c4c4c;
	padding-bottom: 3rem;
}

 footer p,  footer a {
	color: white;
	font-family: Gotham;

 }

h2 strong {
	color: #37aece;
}

.wpcf7-text, .wpcf7-textarea {
	border-radius: 5px;
    margin: .5rem;
    padding: .5rem;
    border: 1px solid #ccc;
    font-family: gotham;
    color: #666;
    width: 55%;
}

.wpcf7-text::placeholder, .wpcf7-textarea::placeholder {
	color: #bbb;
}

@media (max-width: 900px) {
	.campaign h2 br {
		display:none;
	}
}

@media (max-width: 786px) {
	h1, h2 {
	    font-size: 2.0rem;
	    line-height: 2.5rem;
	    margin:0;
	}
	p, .wpcf7-text, .wpcf7-textarea {
		width: 95%;
	}
	h4 {
		font-size: 1.2rem;
	}
	h2 {
		font-size: 1.5rem;
    	line-height: 1.8rem;
	}
	.campaign h3 {
		letter-spacing: 3px;
	    margin-bottom: 1rem;
	    margin-top: 3rem;
	    font-size: 1rem;
	}
}

.logo-block img {
	display: inline-block;
    height: 38px;
    width: auto;
}

.logo-block img.logo-large {
	height:35px;
}

.logo-block br {display:none;}

.logo-block p {width:85%}

.logo-block img.big {height:48px;}