@charset "UTF-8";

/*
Theme Name: OSA Images
Author: Estelle Portalès
Author URI: https://mediaflux.ca
Description: Thème custom pour l'Agence OSA Image
Theme URI: https://osaimages.com/
Version: 2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: photography, portfolio, grid-layout, right-sidebar, featured-images
Text Domain: osa-images
*/

/*
-------------------------------------------------------------------------------------------------------------
 BASE - Inspired by Dave Gamache (www.getskeleton.com)
-------------------------------------------------------------------------------------------------------------
*/

/* Table of Content
==================================================
	#Reset
	#Basic
	#Font Face
	#Typography
	#Blockquote
	#Links
	#Lists
	#Table
	#Images - WP alignement + Caption
	#Buttons
	#Forms */

/*
-------------------------------------------------------------------------------------------------------------
RESET (Inspired by E.Meyers)
-------------------------------------------------------------------------------------------------------------
*/

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }


.sticky {}
.gallery-caption {}
.bypostauthor {}


	
/*
-------------------------------------------------------------------------------------------------------------
BASIC #FULL SIZE / DESIGN FOR A WIDTH OF 1020PX
-------------------------------------------------------------------------------------------------------------
*/
	body {
		background: #fff;
		font-size: 16px;
		font-family: 'abelregular';
		text-align: justify;
		color: #222;
		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
		-webkit-text-size-adjust: 100%; } 
	
	#wrap { 
		margin: 0 auto; 
		position:relative; 
		z-index: 2;
		width:994px; }
		
	
	.container {
	 	position:relative;
	 	margin-left: auto;
	 	margin-right: auto;
	  	width: 984px;
	  	padding:0; }
	
	.unit {
	  	display: inline;
	  	float: left;
	  	margin-left: 15px;
	  	margin-right: 15px; }
	
	.unit.alpha { margin-left: 0; }
	.unit.omega { margin-right: 0; }
	
	.row { width:100%; margin-bottom: 30px; }
	
	.container .one.unit { width: 52px; }
	.container .two.unit { width: 134px; }
	.container .three.unit { width: 216px; }
	.container .four.unit { width: 298px; }
	.container .five.unit { width: 380px; }
	.container .six.unit { width: 462px; }
	.container .seven.unit { width: 544px; }
	.container .eight.unit { width: 626px; }
	.container .nine.unit { width: 708px; }
	.container .ten.unit { width: 790px; }
	.container .eleven.unit { width: 872px; }
	.container .twelve.unit { width: 954px; }
	 	
/*
-------------------------------------------------------------------------------------------------------------
FONT FACE
-------------------------------------------------------------------------------------------------------------
*/

@font-face {
  font-family: 'FontAwesome';
  src: url('library/fonts/font-awesome/fontawesome-webfont.eot?v=4.0.3');
  src: url('library/fonts/font-awesome/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('library/fonts/font-awesome/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('library/fonts/font-awesome/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('library/fonts/font-awesome/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

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

/*
-------------------------------------------------------------------------------------------------------------
TYPOGRAPHY
-------------------------------------------------------------------------------------------------------------
*/
	h1, h2, h3, h4 {
		color: #181818;
		font-weight: normal;
		text-transform: uppercase;
		text-align: left; }
		
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 41px; line-height: 30px; margin-bottom: 20px; letter-spacing: 3px; }
	h2 { font-size: 24px; line-height: 24px; margin-bottom: 20px; letter-spacing: 1px; }
	h3 { font-size: 20px; line-height: 30px; margin-bottom: 20px; letter-spacing: 1px; border-bottom: solid #ddd 1px; }
	h4 { font-size: 16px; line-height: 30px; margin-bottom: 10px; letter-spacing: 1px; font-weight: 600; }
	
	h5 {
		color: #181818;
		font-weight: normal;}
		
	h5 { font-size: 1.2em; line-height: 24px; margin-bottom: 8px;}
	
	
	h6 { font-size: 1em; line-height: 21px; margin-bottom: 8px; text-transform: uppercase;}
	.subheader { color: #777; }

	p { margin: 0 0 20px 0; }
	p img { margin: 0; }
	p.lead { font-size: 21px; line-height: 27px; color: #777;  }

	em { font-style: italic; }
	strong { font-weight: bold; }
	small { font-size: 90%; }

/*
-------------------------------------------------------------------------------------------------------------
BLOCKQUOTES
-------------------------------------------------------------------------------------------------------------
*/
	blockquote{
		font-family: "Brush Script MT", cursive;
		clear:both;
		font-size:1.6em;
		line-height:1.4em;
		margin:10px 0 10px 54px;
		quotes:"\201C""\201D";
		position: relative;
		margin-bottom: 40px; }
	
	blockquote:before{
		content:open-quote;
		font-size:5em;
		line-height:.1em;
		margin-right:.25em;
		vertical-align:-0.5em;
		display:block;
		position: absolute;
		top: 40px;
		left: -54px;
		opacity: 0.5;
		width: 50px;
		font-family: Georgia, Times, "Times New Roman", serif; }
	
	blockquote p{position: relative; padding:5px 0; margin:0; }
	blockquote cite:before { content: "\2014 \0020"; padding:0px 3px; }
	blockquote small, blockquote cite, blockquote small a, blockquote cite a, blockquote a small, blockquote a cite{font-size: 12px;}

	hr { border: solid #ccc; border-width: 1px 0 0; clear: both; height: 0; }

/*
-------------------------------------------------------------------------------------------------------------
LINKS
-------------------------------------------------------------------------------------------------------------
*/
	a, a:visited { color: #333; text-decoration:none; }
	a:hover, a:focus { color: #105d81; }
	p a, p a:visited { line-height: inherit; }

/*
-------------------------------------------------------------------------------------------------------------
LISTS
-------------------------------------------------------------------------------------------------------------
*/
	ul, ol { margin-bottom: 10px; }
	ul { list-style: none outside; }
	ol { list-style: decimal; }
	ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
	ul.square { list-style: square outside; }
	ul.circle { list-style: circle outside; }
	ul.disc { list-style: disc outside; }
	ul ul, ul ol,
	ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 100%;  }
	ul ul li, ul ol li,
	ol ol li, ol ul li { margin-bottom: 2px; }
	li { line-height: 18px; margin-bottom: 0px; }
	ul.large li { line-height: 21px; }
	li p { line-height: 21px; }

/*
-------------------------------------------------------------------------------------------------------------
TABLE
-------------------------------------------------------------------------------------------------------------
*/
	table {
		width: 100%;
		padding: 0;
		margin: 0 0 20px 0;
		border-top-style: solid;
		border-top-width: 1px; }
	
	table caption {
		padding: 0 0 5px 0;
		width: auto;	 
		font-style:italic;
		text-align: right; }
	
	th {
		font-weight:bold;
		letter-spacing: 1.5px;
		line-height: 1.5em;
		text-transform: uppercase;
		text-align: left;
		padding: 6px 15px 6px 15px;
		border-style: solid;
		border-width: 1px;
		border-left:none;
		border-top:none }
	
	td {
		padding: 6px 15px 6px 15px;
		border-style: solid;
		border-width: 1px;
		border-left:none;
		border-top:none; }
	
	tr th:first-child, tr td:first-child { border-left-style: solid; border-left-width: 1px; }
	#top th.nobg { background: none; border-top: 0; }

/*
-------------------------------------------------------------------------------------------------------------
IMAGES - WP ALIGNEMENT + WP CAPTIONS
-------------------------------------------------------------------------------------------------------------
*/
	img.scale-with-grid {
		max-width: 100%;
		height: auto; }
		
	img {  }

	.alignright { float: right; margin: 0px 0px 10px 15px; }
	.alignleft { float: left; margin: 0px 15px 10px 0px; }
	.aligncenter { display:block; margin:0 auto; }
	
	.wp-caption {
		text-align: center;
		padding: 5px;
		margin: 10px auto; }
	
	.wp-caption {
		border: 1px solid #fff;
		background-color: #f6f6f6;
		color: #666;
		text-shadow: 1px 1px 0px #fff;
		-webkit-box-shadow:1px 1px 6px #ddd;
		-moz-box-shadow:1px 1px 6px #ddd;
		box-shadow:1px 1px 6px #ddd;
		position: relative; }
	
	.wp-caption img {
		margin: 0;
		padding: 0;
		border: 0 none; }
	
	.wp-caption p.wp-caption-text {
		font-size: 11px;
		line-height: 17px;
		padding: 5px 0 0px 0;
		margin: 0; }
	
	.wp-caption.alignleft { margin: 0px 10px 0px 0px; }
	.wp-caption.alignright { margin: 0px 0px 0px 10px; }

/*
-------------------------------------------------------------------------------------------------------------
BUTTONS
-------------------------------------------------------------------------------------------------------------
*/
	.button,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		background-color: #222;
		border:none;
		border-radius:2px;
		padding: 10px;
		margin:5px 0 20px 0;
		font-size: 1em;
		font-family: Tahoma, Verdana, Segoe, sans-serif;
		color: #fff;
		font-style: normal;
		letter-spacing: 1px; }

	.button:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover {
		background-color: #666; }

	.button:active,
	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active {
		box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); }

	.button.full-width,
	button.full-width,
	input[type="submit"].full-width,
	input[type="reset"].full-width,
	input[type="button"].full-width {
		width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: center; }

	/* Fix for odd Mozilla border & padding issues */
	button::-moz-focus-inner,
	input::-moz-focus-inner {
	    border: 0;
	    padding: 0; }
	
/*
-------------------------------------------------------------------------------------------------------------
FORMS
-------------------------------------------------------------------------------------------------------------
*/
	form {
		margin-bottom: 20px; }
	fieldset {
		margin-bottom: 20px; }
	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="date"],
	textarea,
	select {
		border: 1px solid #ccc;
		padding: 6px 4px;
		outline: none;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		color: #666;
		margin: 0;
		max-width: 97%;
		display: block;
		margin-bottom: 20px;
		background: #fff; }
		
	input[type="date"] {max-width: 95%;}	
		
	select {
		padding: 7px; 
		font-size: 14px;
		margin-top: 4px;
		width: 100%;
		opacity: 0.8; }
		
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	textarea:focus {
		border: 1px solid #aaa;
 		color: #444;
 		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
		box-shadow:  0 0 3px rgba(0,0,0,.2); }
	textarea {
		min-height: 60px; }
	label,
	legend {
		display: block;
		font-weight: bold;
		font-size: 13px;  }
	select {}
	input[type="checkbox"],
	input[type="radio"] {
		display: inline; }
	label span,
	legend span {
		font-weight: normal;
		font-size: 16px;
		color: #222; }
		
	
		
	.wpcf7-list-item label { margin-top: -15px; }	
	.wpcf7-list-item input[type="radio"]  { width: 20px; float: left; background-color: red;}	
	.wpcf7-list-item-label { float: left; }
		
	.wpcf7-form-control-wrap input  { width:100%; }
	.wpcf7-form-control-wrap textarea  { width:100%; }


/* Table of Content
==================================================
	#Header
	#Main Content
	#Navigation
	#Sidebar
	#Footer
	#Media Queries (dont le passage de la navigation en liste déroulante)

*/
/*
-------------------------------------------------------------------------------------------------------------
HEADER
-------------------------------------------------------------------------------------------------------------
*/
	header {
		padding-top:20px;
		margin-bottom: 40px;
		height: 134px; }
		
	#logo { float: right; margin-top: 20px; }
	
	#description { display:none; }
	
/*
-------------------------------------------------------------------------------------------------------------
MAIN CONTENT
-------------------------------------------------------------------------------------------------------------
*/
	section { line-height: 1.2em;}
	
	.page-content { margin-top: -60px; }
	
	h1.page-title { padding-bottom: 60px; margin-bottom: 30px; border-bottom: solid #ddd 1px; font-weight: 800; }
	
	.extrait { text-align:justify; }
	.thumbnail { margin-top: 8px; }
	
	#grid { margin-left: 10px; }

/*
-------------------------------------------------------------------------------------------------------------
NAVIGATION
-------------------------------------------------------------------------------------------------------------
*/	
	nav#mobile {
		margin-top:40px;
		display:none;
		margin-left:auto;
		margin-right:auto;
		width: 240px;
		height: 34px;
		overflow: hidden;
		background: transparent; }
		
	nav#mobile select {
		background: url(../images/down_arrow_select.jpg) no-repeat right #ddd;
	   -webkit-appearance: none;
	   -moz-appearance: none;
	   width: 268px;
	   padding: 5px;
	   font-size: 16px;
	   border: 1px solid #ccc;
	   height: 34px; }
	
	.sf-menu { text-transform: uppercase; }
	
	.sf-menu a { 	
		text-decoration:none;
		zoom: 1; /* IE7 */
		color: #222;
		font-size: 17px; }
	
	.sf-menu ul { width: 800px; }
	
	.sf-menu li {
		padding: 30px 40px 10px 0;
		white-space: nowrap; /* no need for Supersubs plugin */
		*white-space: normal; /* ...unless you support IE7 (let it wrap) */ }
	
	.sf-menu li:hover,
	.sf-menu li.sfHover {
		-webkit-transition: none;
		transition: none; }
		
	.sf-menu li li {
		background-color: #fff;
		padding: 10px 0; }
		
	.sf-menu li li:last-child {
		padding-bottom: 20px; }
		
	.sf-menu li li a { color:#000;}

/*
-------------------------------------------------------------------------------------------------------------
SIDEBAR + WIDGETS
-------------------------------------------------------------------------------------------------------------
*/
	aside { line-height: 1.2em; }		
			
	.widget-container{} 
	
	.widget-container ul{
		margin-left:0px;
		padding-left:5px;
		padding-right:5px;
		font-size:13px; } 
	
	.widget-container ul ul { margin-left:5px; }	
	
	ul li.widget{
		margin-left:0px;
		padding-left:5px; }
		
	.widget-container h3 { border-bottom: solid #ddd 1px; }	
		 
	/* POPULAR */
	ul.popular{} 
	ul.popular li{} 
	ul.popular li a {} 
	
	/* TAG */
	.widget_tag_cloud a { text-align: center; padding:10px; }
	.tagcloud a { text-align: center; padding:10px; }
	.tag_cloud a:hover { color:#0FF; }
	
	/* RSS */
	.custom-rss-formatting .content-padding { padding-left: 10px !important; }
	
	/* RECENT COMMENT */
	ul#recentcomments { }
	#recentcomments a { }
	#recentcomments li { }
	.home-cont-box #recentcomments li { }
	#recentcomments li span { }
	#recentcomments li a, #recentcomments .current_page_item ul a { }
	#recentcomments .current_page_item a, #recentcomments .current a { }
	#recentcomments li a:hover{ }
	
	/* CUSTOM TEXT */
	.textwidget {
		line-height: 1.2em;
		padding-right:3px;
		padding-left:3px;
	    width:100%; }
	
	/* ARCHIVE */
	.widget_archive li { text-transform:capitalize; }
	
	/* CALLENDAR */
	.widget_calendar { margin:auto; padding-top:20px; max-width:100%; }
	.widget_calendar h3 { display:none; }
	#wp-calendar{ margin:auto; border:none; }
	#wp-calendar caption { text-align:center; text-transform:uppercase; color: #333; font-size: 12px; margin-top: 10px; margin-bottom: 5px; }
	#wp-calendar thead { font-size: 10px; }
	#wp-calendar thead th { display:none; }
	#wp-calendar tbody { color: #aaa; }
	#wp-calendar tbody td { background: #f5f5f5; border: 1px solid #ccc; text-align: center; padding:4px;}
	#wp-calendar tbody td:hover { }
	#wp-calendar tbody .pad { background: none; }
	#wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; }
	#wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; }
	
	/* SEARCH */
	#searchform { display:block; padding-top:20px; }
	.screen-reader-text { display:none; }
	#searchsubmit, #send, #sidebarSubnav #submit { float:right; margin-top:-50px; }
	#searchsubmit:hover, #send:hover, #sidebarSubnav #submit:hover {}
	

/*
-------------------------------------------------------------------------------------------------------------
FOOTER
-------------------------------------------------------------------------------------------------------------
*/
	footer { margin-top: 20px; }
	footer p { padding-top:20px; color:#999; font-size:16px; text-align: right; }
	footer i {padding-left: 8px; font-size: 18px;}

/*
CUSTOM
-------------------------------------------------------------------------------------------------------------
*/		
	.scroll { width : 100%; overflow-y:hidden;  }
	.scroll img { max-height: 400px; width: auto;  }
	.scroll .content { overflow : auto; white-space : nowrap; overflow-y:hidden; }
	
	
	/* IE6 */
	html .scroll .content { width : 100%; }
	.scroll .left {}
	.scroll .right {}

	.gauche { background-color: #fff; opacity: 0; position: fixed; left:0; width: 200px; height: 610px; margin-bottom: -600px; z-index: 10;  }
	.droite { background-color: #fff; opacity: 0; position: fixed; right: 0; width: 200px; height: 610px; margin-bottom: -600px; z-index: 10; }

	.leftcol ul {
		float:left;
		line-height:17px;
		text-align:left;
		width: 310px; }

	.type-clients ul li {
		color:#74777A;
		font-size: 15px;
		line-height:28px;
		text-align:left;
		text-transform:uppercase;
		padding: 0; }

	.caption {
		display: inline-block;
		position: relative; }
	
	.caption img { display: block; }
	
	.caption::after { display: none; content: normal; word-wrap: break-word !important; }
		 
	.caption:hover::after {
		content: attr(data-description);
		position: absolute;
		display: block;
		overflow: hidden;
		width: 170px;
		margin-left: 20px;
		margin-top: -400px;
		height: 400px;
		color: #000;
		background-color:#fff; 
		opacity: 0.7;
		padding-top: 15px;
		text-align: center; }
		
	.video-frame {
		display: inline-block;
		position: relative; }		
		
	.logo-client { 
		border: 1px solid #ddd;
		width:141px; 
		height: 100px; 
		line-height: 100px;
		text-align: center;
		float: left; 
		margin: 8px;
		filter: grayscale(1);
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -o-filter: grayscale(1);
        -ms-filter: grayscale(1);
        opacity:  0.9; }
	
	.logo-client img { 
		max-width: 100px; 
		max-height:80px;  
		vertical-align: middle; }
        
    .logo-client:hover {
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -o-filter: grayscale(0);
        -ms-filter: grayscale(0);
        opacity: 1; }
/*
-------------------------------------------------------------------------------------------------------------
MISC
-------------------------------------------------------------------------------------------------------------
*/
	.remove-bottom { margin-bottom: 0 !important; }
	.half-bottom { margin-bottom: 10px !important; }
	.add-bottom { margin-bottom: 20px !important; }

	.clear {
	  clear: both;
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0; }

	.clearfix:before,
	.clearfix:after,
	.container:before,
	.container:after {
	  content: '.';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  font-size: 0;
	  line-height: 0;
	  width: 0;
	  height: 0; }
	
	.clearfix:after,
	.container:after { clear: both; }

	.clearfix,
	.container { zoom: 1; }