.carré1 {
    background-color:#abd19c;
    width:50px;
    height:50px;
}
.carré2 {
    background-color:#FFFF4D;
    width:50px;
    height:50px;
    opacity:0.5;
}
.carré3 {
    background-color:#FFFF00;
    width:50px;
    height:50px;
}
.carré4 {
    background-color:#e5414f;
    width:50px;
    height:50px;
}
.carré5 {
    background-color:#ffc0cb;
    width:50px;
    height:50px;
}
.carré6 {
    background-color:#eb4ea0;
    width:50px;
    height:50px;
}
.carré7 {
    background-color:#222626;
    width:50px;
    height:50px;
}
.carré8 {
    background-color:#a5dbf9;
    width:50px;
    height:50px;
}
.carré9 {
    background-color:dodgerblue;
    width:50px;
    height:50px;
}
.carré10 {
    background-color:#747a72;
    width:50px;
    height:50px;
}

.carré11 {
    background-color:darkgreen;
    width:50px;
    height:50px;
}
.carré12 {
    background-color:#FFFF4D;
    width:50px;
    height:50px;
    opacity:0.5;
}
.carré13 {
    background-color:#FFFF00;
    width:50px;
    height:50px;
}
.carré14 {
    background-color:#ffc0cb;
    width:50px;
    height:50px;
}
.carré15 {
    background-color:#eb4ea0;
    width:50px;
    height:50px;    
}
.carré16{
    background-color:#584ba1;
    width:50px;
    height:50px;        
}
.carré17{
    background-color:#a5dbf9;
    width:50px;
    height:50px;        
}
.carré18{
    background-color:dodgerblue;
    width:50px;
    height:50px;        
}
.carré19{
    background-color:#999ad4;
    width:50px;
    height:50px;        
}
.carré20{
    background-color:#f5a98b;
    width:50px;
    height:50px;        
}
@media all and (max-width:1024px) {
    
    .carré17{
        display:none;
    }
    .carré18{
        display:none;
    }
    .carré19{
        display:none
    }
    .carré20{
        display:none;
    }
}
header {
    background-color:none;
    width:auto%;
    height:150px;
    display:inline-block;
    text-align:center;
    border:1px double black; 
}
h1 {
    color:black; 
    font-family:'silkscreennormal';
}
div {
    background-color:none;
    width:auto; 
    display:inline-block;
    margin-top:2.5px;   
}



/* Navigation */

nav {
    display: inline-block;
    width:61.2%;
    height:40px;
    background-color:black;
    text-align:center; 
}

nav ul {
    list-style-type: none;    
}

nav li {
    display: inline-block;
    margin-right: 50px;
    font-family:verdana;    
}
nav a {
    font-size: 1em;
    color: white;
    padding-bottom: 10px;
    text-decoration:none;
    font-family: 'kontrapunktlight_italic';
}
nav a:visited {
  text-decoration-line:line-through;
  text-decoration-color: #eb4ea0;
}

nav a:hover {
    color:dodgerblue; 
}

.form-group {
    bottom:20px;
    margin-top:-35px;    
}
ul {
    
    margin-top:10px;
}
body {
    font-family:si;
    text-align: center;
}

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

}

@font-face {
    font-family: 'si';
    src: url('Polices/socicon.eot');
    src: url('Polices/socicon.eot?#iefix') format('embedded-opentype'),
         url('Polices/socicon.woff') format('woff'),
         url('Polices/socicon.ttf') format('truetype'),
         url('Polices/socicon.svg#icomoonregular') format('svg');
    font-weight: normal;
    font-style: normal; 
}
@font-face {
    font-family: 'kontrapunktlight_italic';
    src: url('Polices/Kontrapunkt-LightItalic-webfont.eot');
    src: url('Polices/Kontrapunkt-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('PolicesKontrapunkt-LightItalic-webfont.woff') format('woff'),
         url('Polices/Kontrapunkt-LightItalic-webfont.ttf') format('truetype'),
         url('Polices/Kontrapunkt-LightItalic-webfont.svg#kontrapunktlight_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

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

}


@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family:si;
        src: url('Polices/socicon.svg') format(svg);
    }
}
.soc {
    overflow:hidden;
    margin:0; padding:0;
    list-style:none;
    display:inline-block;     
}
.soc li {
    display:inline-block;
    *display:inline;
    zoom:1;
}
.soc li a {
    font-family:si!important;
    font-style:normal;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;

    -o-transition:.1s;
    -ms-transition:.1s;
    -moz-transition:.1s;
    -webkit-transition:.1s;
    transition:.1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    overflow:hidden;
    text-decoration:none;
    text-align:center;
    display:block;
    position: relative;
    z-index: 1;
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 19px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-right: 10px;
    color: black;
    background-color:#ffffff;
}

.soc a:hover {
    z-index: 2;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.soc-icon-last{
    margin:0 !important;
}

.soc-twitter:before {
    content:'a';
}
.soc-vimeo:before {
    content:'s';
}
.soc-github:before {
    content:'Q';
}
.soc-instagram:before {
    content:'x';
}
.soc-facebook:before {
    content:'b';
}
.soc-pinterest:before {
    content:'d';
}
.soc-linkedin:before {
    content:'j';
}
.soc-flickr:before {
    content:'v';
}

aside {
    
    width:61%;
    height:auto;
    background-image:url('noisenoisesurpresqueblanc.png');
    border: 1px double black;
    margin-left:19%;
    margin-right:19%;
    font-family:verdana;
    display:inline-block;
    text-align:center;
}
@media all and (max-width:1024px) {
    aside {
        margin-left:0.2%;
        margin-right:0.2%;
    }
}
.container {
    text-align:center;
    
}

@media all and (max-width:1024px) {
    aside {
        margin-left:0.2%;
        margin-right:0.2%;
    }
}
h2 {
    font-family: 'kontrapunktlight_italic';
    font-weight:normal;
    font-size:20px;
}
h3 {
    font-family: 'bebasregular';
    font-size:20px;
    font-weight:bold;
}
h4 {
    font-size:14px;
}
a {
    text-decoration:none;
    font-size:10px;
    
    
}
.pagetitle {
    font-family:verdana;
    font-size:12px;
    width:50%;
    text-align:center; 
    
}
.divproject1 {
    font-family:verdana;
    font-size:11px;
    font-style: oblique;
}

.imgproject0{
    width:400px;
    height:auto;
}
.imgproject1{
    width:400px;
    height:auto;
}
        
.imgproject2 {
    width:400px;
    height:auto;
}
    
.imgproject3 {
    width:250px;
    height:auto;
}
.imgproject4 {
    width:400px;
    height:auto;
}
.imgproject5 {
    width:400px;
    height:auto;
}
.imgproject6 {
    width:400px;
    height:auto;
}

p {
    width:700px;
    height:auto;
}
.text1 {
    font-family:verdana;
    width:auto;
    font-size:10.5px;
    text-align:center; 
    
}.text2 {
    font-family:verdana;
    width:auto;
    font-size:10.5px;
    text-align:center;   
}