/************
********
Style pour le pitchator 2016
Avec amour, par MK
********
************/



/**********/
/* Global */
/**********/

*{font-family:  'Snippet', Futura, Myriad Pro, Arial, Verdana, Sans-Serif; font-size:100%; border:0; margin:0; padding:0; box-sizing: border-box;}

body{
    border: 15px solid whitesmoke;
    background: url("../medias/points03.png");
}

#corps{ width: 100%; max-width: 800px; margin: 0 auto;}

img{ width: auto; height: 95%; position:absolute; margin:-10px; z-index:0;}

p, b, a, i, q, em {font-size: 1em; z-index:1;position:relative;}
p{
    overflow:hidden;
	width:100%; min-height:100px; padding:10px;
	font-weight:bold; font-size:1.3em;
	color:darkgrey; border:2px dashed white;
	background: url('../medias/points01.png');
	background-size: 70%;
}
p:hover{background: none;}
p img{opacity: 0.3;}

b{
    color: teal; margin: 10px; position:absolute; bottom:0; right:0;
    font-size:2em; line-height:35px;
}

a{ text-decoration: none; color: #f4d61a;}
a:hover{color: #2b2c4a;}

h1, h2, h3, h4, h5, h6{color: #2b2c4a;}

h1, h2, h3{font-family: 'Andika', Futura, Myriad Pro, Arial, Verdana, Sans-Serif;}
h4, h5, h6{font-family: 'Poppins', Futura, Myriad Pro, Arial, Verdana, Sans-Serif;}

h1, h2, h3 {font-size: 2.5em;}
h4, h5, h6{font-size: 1.8em;}


/*****************/
/* Titre et menu */
/*****************/

header{
    height: 200px;
    margin: 0 auto 20px;
    position: relative;
    width: 100%;
}

header img{
    height: auto;
    margin: 0 auto;
    max-width: 700px;
    width: 100%;
}

#lang{
    z-index: 3;
    background: white; position: fixed;
    top: 0; right: 0; color: darkgray;
    width: 100px; height: auto;
    padding: 5px; text-align: center;
}
#lang a{color: darkgray;}
#lang a:hover{color: #f4d61a;}

#menu{
    height: 100px; z-index: 2;
    left: 0;
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100%;
}
#accesMenu{
    position: absolute; top:50px; right: 50px;
    width: 100px; height: 100px;
    border: 4px solid darkgrey;
    box-sizing: content-box;
    padding: 20px 5px 0;
}
#accesMenu:hover{border: 4px solid yellow;}
#accesMenu:hover{color: darkgrey;}
#menu a{
    display: block;
    font-size: 2em;
    text-align: center;
    text-shadow: 1px 1px 1px darkslategrey;
    line-height: 30px;
}

#menu div{
    background: white; border-bottom:2px solid yellow;
    width:100%; min-height:65px;
    position:fixed; top:0; left:0;
}
#menu div li{list-style-type:none;margin-bottom: 5px;}
#menu div li a{color:darkgrey; font-size: 1.5em; }
#menu div li a:hover{color:#f4d61a;}


/****************/
/* Presentation */
/****************/

.presentation{padding:60px; overflow:scroll-x;}
.presentation h1,.presentation h2, .presentation h3, .presentation h4, .presentation h5, .presentation p  {max-width:800px; color:teal; overflow:auto; background:inherit; min-height:auto; height:auto;}

.presentation h1, .presentation h2, .presentation h3{font-size:1.8em;}

.presentation p, .presentation a{font-size: 1em;}

#menu .presentation li a{
    display: block; max-width: 400px;
    text-align: left;
    text-shadow: none;
    line-height: inherit;
}

/**************/
/* Etiquettes */
/**************/

article{
    max-width: 800px; margin: 0 auto;
    overflow: hidden;
    border:2px solid yellow;
    background: #B2ECE7;
}

.etiquettes{
	display:inline-block; float:left;
    width: 100%; overflow:hidden;
}

.clear{clear: both;}
.big{height: 150px;}
.big img{width:90%; height:auto;}
.big b{font-size:2.4em;}
.demi{width:50%;display: inline-block; float: left;}
.demi img{width:95%; height:auto;}
.demi b, .quart b{font-size:1.3em; line-height: 20px;}
.quart{width:25%; display: inline-block; float: left;}
.quart img{width:95%; height:auto;}

#blocRegles{width:100%;}
#blocPitchator{width:100%;}

#pitchregles button, #pitchregles p{ display: inline-block; float: left;}
#pitchregles button + p{display: inline-block; width: 50%;}

#pitchregles b{ font-size: 2.4em; margin: 20px;}

#pitchcara, #pitchlieux{ width: 50%;}


/**********/
/* Footer */
/**********/

footer{padding: 20px;}
footer p, footer a { background: inherit; color: teal; text-align:center; height: auto;}
footer p{font-size: 0.8em;}
footer a:hover { color: #f4d61a;}


/************/
/* Bouttons */
/************/

button{
    width: 100%; height: 100px;
    padding: 10px;
    background-color: whitesmoke;
    color: teal; font-size: 2em;
    border:4px solid white;
}
button:hover{ border-color: yellow; color: #B2ECE7; text-shadow:none; background: url("../medias/points03.png"),white;}
#pitchregles button{height: 200px; width: 50%;}


/****************/
/* MediaQueries */
/****************/

@media screen and (max-width: 960px){
    #accesMenu{
        height: 50px;
        padding: 15px;
        right: 100px;
        top: 0;
        width: 100px;
    }
    #menu a{line-height: 20px;}
}

@media screen and (max-width: 660px){

	*{font-size:110%;}

	header{height:270px;margin-top:30px;}
	header img{width:100%;margin: 80px auto;}

	#lang{
    width: 200px; padding:10px;
    }
	#lang a{font-size:1.4em;}

    #accesMenu{
        border: 6px solid darkgrey;
        height: 50px;
        line-height: inherit;
        padding: 15px;
        right: 200px;
        top: 0;
        width: 300px;
    }
    #accesMenu:hover{border: 6px solid yellow;}
    #menu a{
        font-size: 2.5em;
        line-height: 40px;
    }

    article{border:10px solid yellow;}

    #corps, article{max-width:100%;margin:0;}

    button{font-size:3em;}

    button, #pitchregles button, .big, .demi, .quart, p
    {width:100%; clear:both; display:block; height:300px;}


    p img, .big img,.demi img,.quart img{width:100%; height:auto;}

    .big b,.demi b,.quart b, p b{
        font-size:2.5em; line-height: 60px;
        margin: 0; padding: 20px; width: 100%;
    }

    .etiquettes{display:block; clear:both;}
    #pitchcara, #pitchlieux{ width: 100%;}
    #pitchregles button + p{display: block;clear:both; width: 100%;}

}