@font-face {
    font-family: 'ubuntumedium';
    src: url('../fonts/Ubuntu-Medium-webfont.eot');
    src: url('../fonts/Ubuntu-Medium-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Ubuntu-Medium-webfont.svg#ubuntumedium') format('svg'),
        url('../fonts/Ubuntu-Medium-webfont.woff2') format('woff2'),
        url('../fonts/Ubuntu-Medium-webfont.woff') format('woff'),
        url('../fonts/Ubuntu-Medium-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




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

}




@font-face {
    font-family: 'ubuntubold';
    src: url('../fonts/Ubuntu-Bold-webfont.eot');
    src: url('../fonts/Ubuntu-Bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Ubuntu-Bold-webfont.svg#ubuntubold') format('svg'),
        url('../fonts/Ubuntu-Bold-webfont.woff2') format('woff2'),
        url('../fonts/Ubuntu-Bold-webfont.woff') format('woff'),
        url('../fonts/Ubuntu-Bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    background: url(../fonts/Ubuntu-Light-webfont.ttf)
}




@font-face {
    font-family: 'ubuntulight';
    src: url('../fonts/Ubuntu-Light-webfont.eot');
    src: url('../fonts/Ubuntu-Light-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Ubuntu-Light-webfont.svg#ubuntulight') format('svg'),
        url('../fonts/Ubuntu-Light-webfont.woff2') format('woff2'),
        url('../fonts/Ubuntu-Light-webfont.woff') format('woff'),
        url('../fonts/Ubuntu-Light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'ubuntubold', sans-serif;
	color : #333333;
}

.blanc{color:#ffffff;}

.vert {color:#b1c800;}

.vert2 {color:#94c04d;} 

.turquoise{color:#00a4c0;}

.orange {color:#ee7f00;}
	
	
body {
    font-family: "ubunturegular",sans-serif;
	background-color: #00a4c0;
	color: #333333;
}

.justify {text-align:justify;}

.right {text-align:right;}
.left {text-align:left;}

.caps {text-transform: uppercase;}

.divider {border-left: 2px dotted #666666;}

.container-fluid {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.spacer {height:20px;
background-color: #ffffff;
    -moz-box-shadow: 0px 8px 5px rgba(0, 0, 0,0.3);
    -webkit-box-shadow: 0px 8px 5px rgba(0, 0, 0, .3);
    box-shadow: 0px 8px 5px rgba(0, 0, 0, .3);
	margin-bottom:20px;
}


/*---------------------header--------------*/
.header, .footer-top
{background: #e5e5e5 url("../img/squared_metal.png") repeat scroll left top;
position: relative;
border-bottom:20px solid #ffffff;
padding-bottom:20px;
    -moz-box-shadow: 0px 8px 5px rgba(0, 0, 0,0.3);
    -webkit-box-shadow: 0px 8px 5px rgba(0, 0, 0, .3);
    box-shadow: 0px 8px 5px rgba(0, 0, 0, .3);
}

.trimestre{
	bottom: 60px;
    color: #00a4c0;
    font-family: "ubuntubold",sans-serif;
    font-size: 18px;
    position: relative;
    right: 10px;
    text-align: right;
}

.photo-edito{
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
	border-style: dotted;
	border-color:#ffffff;
	border-width:2px;
}

.edito {
	color: #00a4c0;
    font-size: 50px;
	text-transform: uppercase;
}

/*---------------------fin header--------------*/

.sous-titre, .sous-titre-bold {
	font-family: "ubunturegular", sans-serif;
	font-size:24px;
}
.sous-titre-bold {
	   font-family: "ubuntubold",sans-serif;
}

.columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
	-webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
	margin-top: 20px;
}

.blocs {
	padding : 10px;
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
	}

.bloc-bleu {
	background-color: #dfedf2;	
}

.bloc-vert{
	background-color: #f1f5d9;	
}

a:link, a:visited {
    color: #00a4c0;
	font-family: "ubuntubold", sans-serif;
}

a:hover, a:active{
    color: #ffffff;
}
/*------------------Zoom-------------*/
.medium  {font-family: "ubuntumedium", sans-serif;}

.bold  {font-family: "ubuntubold", sans-serif;}

/*------------------Fin Zoom-------------*/
/*----------------tutoriel-----------*/
.bloc-tutoriel{
	background-color: #333333;
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
	padding-top:5px;
	padding-bottom:20px;
	margin: 20px auto;
    padding-bottom: 20px;
    /*width: 96%;*/
}

.center {
	text-align: center;
}


/*----------fin tutoriel------------*/

/*---------footer---------*/

.footer-top {
	border-bottom:none;	
    -moz-box-shadow: inset 0px -8px 5px rgba(0, 0, 0,0.3);
    -webkit-box-shadow: inset 0px -8px 5px rgba(0, 0, 0, .3);
    box-shadow: inset 0px -8px 5px rgba(0, 0, 0, .3);
}

.footer-bottom {
	background-color: #ffffff;
	padding-top: 20px;
	-moz-box-shadow: 0px -8px 5px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: 0px -8px 5px rgba(0, 0, 0, .5);
    box-shadow: 0px -8px 5px rgba(0, 0, 0, .5);
}

.address {
    font-family: "ubuntubold",sans-serif;
    line-height: 1.42857;
	margin-top:20px;
    margin-bottom: 20px;
    text-align: center;
}


/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
.trimestre{
	bottom: 0;
    font-size: 16px;
    right: 5px;
}
.edito {
	line-height: 40px;
}
.sous-titre, .sous-titre-bold {
	font-size:18px;
	line-height:20px;
}
.columns {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
	-webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
}
.divider {border-top: 2px dotted #666666;
border-left: none;}

.caps {text-transform: uppercase;
font-size: 32px;}

.img-responsive {
    display:inline-block;
}
  
    }

/* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
.trimestre{
	bottom: 0;
    font-size: 16px;
    right: 5px;
}
.edito {
	line-height: 40px;
}
.sous-titre, .sous-titre-bold {
	font-size:18px;
	line-height:20px;
}
.columns {
    -webkit-column-count: 1; 
    -moz-column-count: 1; 
    column-count: 1;
	-webkit-column-gap: 0; 
    -moz-column-gap: 0;
    column-gap: 0;
}
.divider {border-top: 2px dotted #666666;
border-left: none;}

.caps {text-transform: uppercase;
font-size: 32px;}

.img-responsive {
    display:inline-block;
}
    }

/* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
.columns {
    -webkit-column-count: 2; 
    -moz-column-count: 2;
    column-count: 2;
	-webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap:30px;
}

.trimestre{
	bottom: 35px;
    font-size: 18px;
    right: 5px;
}
.divider {border-top: 2px dotted #666666;
border-left: none;}

    }

/* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
.divider {border-top: none;
border-left: 2px dotted #666666;}

.trimestre{
	bottom: 40px;
    font-size: 18px;
    right: 10px;
}

    }

/* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }



/*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
        
    }