/*
Theme Name:enfant
Description:child theme of XXXXX
Author:L Cazaubon
Version:1.0.0
Template:twentyseventeen
Text Domain: enfant
*/

/* 
linear-gradient     ok dès IE 10 - edge et autre
box-shadow          idem
text-shadow         idem
transition          => -webkit-transition -moz-transition
animation           ok dès IE 10   moins supporté ? (can isue))
@keyframes
transform
color               pas de #xxyyzzTT mais rgba(xx,yy,zz,TT)

*/

@import url("../twentyseventeen/style.css");

/*------------------ correction bota ---------------------------------------*/

*,*:before,*:after {
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
}

body {
    font-size: 1.4em;
}


body, button, input, select, textarea {
    font-weight:500;
    color:#212121; 
    position:relative;
}


p:empty { /* pour les <p></p> vides générés automatiquement */
    display:none
}

p {
    margin-bottom:10px;
}


/* https://stackoverflow.com/questions/8554043/what-is-a-clearfix */

.clear,.clearfix {
    content: ""; 
    /* Older browser do not support empty content */
    visibility: hidden;
    display:table;
    line-height: 0; height: 0;width:0;font-size: 0px;
    overflow:hidden;
    clear:both;
}


a, a:visited {
    transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
}


.table {
    display: table;
    width: 100%;
}
.table .tr {
    display: table-row;
}
.table .tr .td, .table .tr .th {
    display: table-cell;
}



/* Headings */
h1,h2,h3,h4,h5,h6 {
    margin:0.6em 0;
}
h1 {
}
h2 {
}
h3 {
}
h4 {
}
h5 {
}
h6 {
}

#main {
	margin:0;
	margin-right:10px;
	width:70%;
}

#liens {
	width:27%;
	vertical-align:top;
}

#liens,#main {
	display:inline-block!important;
}

#liens a {
    margin-bottom:-12px;
    display: block;
}

.wrap {
	max-width: 1440px!important;
	padding-left:0;
	padding-right:0;
}

#masthead {
    height: 100px;
}

.site-content {
	padding:0;
	padding-left:20px;
}

/*-----------------------------------------------------   breakpoints ---------------------------------------------------*/

/*-----------------------------------------------------   breakpoints ---------------------------------------------------*/

@media screen and (max-width : 1500px){
    html.FRONT::after {content:'max-width:1500px'!important}
    
}


@media screen and (max-width : 1300px){
    html.FRONT::after {content:'max-width:1300px'!important}
    
    body { 
        font-size: 1.27em;
    }     
    
}


@media screen and (max-width : 1200px){
    html.front::after {content:'max-width:1200px'}
    
    body { 
        font-size: 1.25em;
    }
    
    
}

@media screen and (max-width : 1100px){
    html.front::after {content:'max-width:1100px'!important}
    
    body { 
        font-size: 1.23em;
    }  
    
}

/* --------- SUR UNE SEULE COLONNE -------------- */

@media screen and (max-width: 980px){
    html.front::after {content:'max-width: 980px'!important}

    body { 
        font-size: 1.21em;
    }
}

/*   MODE MOBILE : largeur à partir de laquelle le menu responsive apparait, et menu prinpcipal masthead n'est plus en fixed */

@media screen and (max-width : 860px){
    html.front::after {content:'max-width:860px'}
    
    body { 
        font-size: 1.2em;
    }
}

/* 760->740   ---------  MOBILES -  SUR UNE SEULE COLONNE ---------------  */

@media screen and (max-width : 740px){
    html.front::after {content:'max-width:740px'!important}

    body { 
        font-size: 1.15em;
    }
}



@media screen and (max-width : 550px){
    html.front::after {content:'max-width:550px'!important}
   
}