section{

    width: 95%;
    padding: 10px;
    padding-bottom: 20px;
    margin: 25px auto;
    box-shadow: 0px 0px 10px #bbb;
    background-color: #fff;
}

section h2 {
    text-align: center;
    margin-bottom: 5px;
}


section iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width : 710px;
    height : 400px;

}

/*LIEN*/
/*Couleur lien*/
a:link {
    color: black;
}
a:visited{
    color: black;
}


/*filter*/
.row {
	margin: 10px -10px;
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
    color : black;
}
.row h4 {
    text-align: center;
}
.row img {
    margin-left:auto;
    margin-right:auto;
    display: block;
}
.column {
	float: left;
	width: 33.33%;
	display: none;
}
.row:after {
	colcol: "";
	display: table;
	clear: both;
}
.colcol {
	background-color: white;
	padding: 10px;
}
.show {
	display: block;
}
.btn {
	border: none;
	outline: none;
	padding: 12px 16px;
	background-color: white;
	cursor: pointer;
}
.btn:hover {
	background-color: gray;
}
.btn.active {
	background-color: orange;
	color: white;
}

@media screen and (max-width: 800px) {
    .column {      
        width: 100%;       
    }  
}

.logogithub {
    width : 100px;
}

@media screen and (max-width: 552px){
    .logogithub {
        width : 60px;
    }
}



/*MEDIA QUERIES*/

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

    .interet {
        text-align: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .interet img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        box-shadow: 0px 0px 15px #555;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

}