/*
Theme Name: Wopi
Author: julie chaumard
Author URI: http://juliechaumard.paris/Design/
Description: Theme pour le site web de l'orchestre de Picardie. Creer en 2018
Version: 1.0
Tags: theme, wordpress, musique, orchestre, picardie
Text Domain: wopi
*/

@charset "UTF-8";

/*-------------------------------------------------
BASE
-------------------------------------------------*/

/*-------------------------------------------------
Polices de caractères
-------------------------------------------------*/
@font-face {font-family: 'ubuntu_light_300'; src:url('assets/fonts/ubuntu_light.ttf')format('truetype');}
@font-face {font-family: 'ubuntu_lightitalic_300'; src:url('assets/fonts/ubuntu_lightitalic.ttf')format('truetype');}

@font-face {font-family: 'ubuntu_regular_400'; src:url('assets/fonts/ubuntu_regular.ttf')format('truetype');}
@font-face {font-family: 'ubuntu_italic_400'; src:url('assets/fonts/ubuntu_italic.ttf')format('truetype');}

@font-face {font-family: 'ubuntu_medium_500'; src:url('assets/fonts/ubuntu_medium.ttf')format('truetype');}
@font-face {font-family: 'ubuntu_mediumitalic_500'; src:url('assets/fonts/ubuntu_mediumitalic.ttf')format('truetype');}

@font-face {font-family: 'ubuntu_bold_700'; src:url('assets/fonts/ubuntu_bold.ttf')format('truetype');}
@font-face {font-family: 'ubuntu_bolditalic_700'; src:url('assets/fonts/ubuntu_bolditalic.ttf')format('truetype');}

/*
---------------------------------------------------
MISE A ZERO
*/

body, img, p, a, ul, ol, li, h1, h2, h3, h4, button, input, optgroup, select, textarea, article, main, aside, footer, header, nav, section, div, figcaption, figure, fieldset, legend {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
	list-style-type:none;
    color: inherit;
	font-size: 1em;
}

/*---------------------------------------------------
FORMAT GENERAL
---------------------------------------------------*/


/*---------------------------------------------------
PLACEMENT / TAILLE des BOITES
MARGES
---------------------------------------------------*/
/*-----BASE----------------------------------------*/
/*-----DISPLAY----------------------------------------*/
.d_none {
	display: none;
}
.line {
	display: inline-block;
}

/*-----FLEX----------------------------------------*/
.flex {
	display: flex;
}
.flex_wrap {
	display: flex;
	flex-wrap: wrap;
}
.flex_jcenter {
	justify-content: center;
}
.flex_jbetween {
	justify-content: space-between;
}
.flex_acent {
	align-items: center;
}
.flex_aend {
	align-items: flex-end;
}

/*-----POSITION----------------------------------------*/
.p_relative {
	position: relative;
}
.p_absolute {
	position: absolute;
}
/*-----z-INDEX----------------------------------------*/
.firstplan {
	z-index: 999;
}
/*-----WIDTH----------------------------------------*/
.full {
	width: 100%;
}
.w30 {
	width: 30%;
}
/*-----CONTAINER WIDTH MEDIA QUERIES-------------------*/
@media screen and (max-width: 449px){
 .container_w {
 	width: 100%;
 }}
@media screen and (min-width: 450px) and (max-width: 649px){
 .container_w {
 	width: 97%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
 }}
@media screen and (min-width: 650px) and (max-width: 849px){
 .container_w {
 	width: 97%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
 }}
@media screen and (min-width: 850px) and (max-width: 1199px){
 .container_w {
  	width: 90%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
 }}
@media screen and (min-width: 1200px) and (max-width: 1399px){
 .container_w {
  	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
 }}
 @media screen and (min-width: 1400px){
 .container_w {
  	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
 }}
 
/*-- PHOTO-------------------------------------*/

.image {
	width: 100%;
	height: auto;
}

/*--MARGIN / PADDING -------------------------------------*/

.mar_b8p {
	margin-bottom: 8%;
}
.mar_auto {
	margin-left: auto;
	margin-right: auto;
}
.pad_10 {
	padding: 10px 10px 10px 10px;
}
.pad_h10 {
	padding-top: 10px;
	padding-bottom: 10px;
}
.pad_v10 {
	padding-left: 10px;
	padding-right: 10px;
}
/*--RETOUR -------------------------------------*/
.back_container {
	margin: 1% 0 3% 0;
}
.fa {
	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.fa-arrow-circle-left::before {
	content: "\f0a8";
}
/*--fin RETOUR -------------------------------------*/
/*--Ordinateur ou mobile -------------------------------------*/

@media screen and (min-width: 1px) and (max-width: 1024px) {
    .navigateur {
        display: none;
    }
    .application {
        display: inherit;
    }
}
@media screen and (min-width: 1024px) and (max-width: 10000px)  {
    .navigateur {
        display: inherit;
    }
    .application {
        display: none;
    }	
}
/*--Ordinateur ou mobile-------------------------------------*/


/*---------------------------------------------------*/


/*---------------------------------------------------
BORDURES / COULEURS
---------------------------------------------------*/
/*-----BASE----------------------------------------*/
.black { color: #333; }
.brique { color: #b65742; }
.bleu { color: #74b6d7; }
.marron { color: #8c6b53; }
.blanc { color: white; }

.b_black {background-color: #333;}
.b_brique {background-color: #b65742;}
.b_brique_clair {background-color: #cc897a;}
.b_brique_tresclair {background-color: #e2bcb3;}
.b_bleu {background-color: #74b6d7;}
.b_bleu_clair {background-color: #9dcce3}
.b_bleu_tresclair {background-color: #c7e2ef}
.b_marron { background-color: #8c6b53; }
.b_marron_clair {background-color: #ae9786}
.b_marron_tresclair {background-color: #d1c4ba}
.b_blanc { background-color: white; }
.b_bandeau { background-color: #EBF4FA; }

.b_brique_o {background-color: rgba(182, 87, 66, 0.75);}
.b_bleu_o {background-color: rgba(116, 182, 215, 0.75);}
.b_marron_0 { background-color: rgba(140, 107, 83, 0.75);}

/*----TITRE-----------------------------------------------*/
.titre_souligne_marron {
	border-bottom: 2px solid #8c6b53;
	padding: 0 5px 0 5px;
}


/*----lien retour arrière-----------------------------------------------*/
.back a:hover {
    color: red;
}
/*---- fin lien retour arrière-----------------------------------------------*/


/*----fin button-----------------------------------------------*/


/*---------------------------------------------------
TEXTES
---------------------------------------------------*/
/*-----BASE----------------------------------------*/
/*--POLICES -------------------------------------*/
.ubuntu_l {
    font-family: ubuntu_light_300, arial;
	font-weight: 300;
}
.ubuntu_li {
    font-family: ubuntu_lightitalic_300, arial;
	font-weight: 300;
}
.ubuntu_r {
    font-family: ubuntu_regular_400, arial;
	font-weight: 400;
}
.ubuntu_ri {
    font-family: ubuntu_italic_400, arial;
	font-weight: 400;
}
.ubuntu_m {
    font-family: ubuntu_medium_500, arial;
	font-weight: 500;
}
.ubuntu_b {
    font-family: ubuntu_bold_700, arial;
	font-weight: 700;
}


/*--RETOUR -------------------------------------*/
.back {
    font-family: ubuntu_regular_400, arial;
	font-weight: 400;
	font-size: 12px;
}
/*---------------------------------------------------*/