/*
--------------------------------------------------------------
FONTS
--------------------------------------------------------------
*/
@font-face
{
	font-family: 	Hind;
	src: 			url("../Fonts/Hind-Regular.ttf") ;
}

@font-face
{
	font-family: 	Hind-Bold;
	src: 			url("../Fonts/Hind-Bold.ttf") ;
}

/*
--------------------------------------------------------------
GLOBAL
--------------------------------------------------------------
*/
body
{
    padding:            0;
    margin:             0;
	background:			#e0e0e0;
	color:				#000;
	font-family: 		'Hind', sans-serif;
}

a
{
    color:                  #000;
}

h1, p
{
    padding:                10px;
    margin:                 0;
}

.container-vignettes
{
    display:                grid;
    box-sizing:             border-box;
    padding:                10px;
    grid-template-columns:  repeat(4, 1fr);
    grid-gap:               10px;
}

.vignette
{
    background-color:       #FFF;
    grid-column:            span 1;
}

.vignette img
{
    max-width:              100%;
    height:                 auto;
}

.vignette .title
{
    box-sizing:             border-box;
    padding:                5px;
    border-top: #000 solid 1px;
}

.vignette-axidraw
{
    width:                  100%;
    margin-bottom:          10px;
}

.vignette-axidraw img
{
    background-color: #FFF;
}

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

    .container-vignettes
    {
        grid-template-columns:  repeat(2, 1fr);
    }    
}