/* Global CSS that are applied for all screen sizes */

.tut ul {
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.5em;
	font-weight: 100;
}

.tut li {
    border: 1px solid white;
}

.tut li span {
	display: block;
}

.tut a {
	display: block;
	color: rgba(249, 249, 249, .9);
	text-decoration: none;
	}

/* Adding some background color to the different menu items */

.tut li:nth-child(12n+1) { background: #eb7601;}
.tut li:nth-child(12n+2) { background: #2228ba;}
.tut li:nth-child(12n+3) { background: #f4b712;}
.tut li:nth-child(12n+4) { background: #cc0008;}
.tut li:nth-child(12n+5) { background: #eb01ac;}
.tut li:nth-child(12n+6) { background: #eb3d01;}
.tut li:nth-child(12n+7) { background: #eb3d01;}
.tut li:nth-child(12n+8) { background: #eb3d01;}
.tut li:nth-child(12n+9) { background: #eb3d01;}
.tut li:nth-child(12n+10) { background: #2a3740;}
.tut li:nth-child(12n+11) { background: #f4b712;}
.tut li:nth-child(12n+12) { background: #8e8e8e;}

/*++++++++++++++++++++ 4 colummns-version +++e36000+++++++f4b712+++++++++++*/
@media (min-width:44em) {

.tut li {
    display: block;
    border: 3px solid white;
	float: left;
	width: 25%;    /* 4 columns */
    font-size: 1.1em;
    height: 120px;
}
	
.tut a {
		padding: 0.5em;		
}

.tut img {
        height: 40px;
        width: auto;
}
.container > header {
		font-size: 1.1em;
	} 
}

/*++++++++++++++++++++ 3 colummns-version ++++++++++++++++++++++*/
@media (max-width: 44.99em) {


.tut li {
    display: block;
    border: 2px solid white;
	float: left;
	width: 33.3%;    /* 4 columns */
    font-size: 1.0em;
    height: 100px;
}
    
.tut a {
		padding: 0.5em;		
}   
    
.tut img {
        height: 35px;
        width: auto;
}
.container > header {
		font-size: 0.9em;
	}    
}

/*++++++++++++++++++++ 2 colummns-version ++++++++++++++++++++++*/
@media (max-width: 36em) {


.tut li {
    display: block;
    border: 2px solid white;
	float: left;
	width: 50%;    /* 4 columns */
    font-size: 1.0em;
    height: 100px;
}
    
.tut a {
		padding: 0.5em;		
}
    
.tut img {
        height: 30px;
        width: auto;
}
.container > header {
		font-size: 0.7em;
	}
}

/*++++++++++++++++++++ 1 colummns-version ++++++++++++++++++++++*/
@media (max-width: 20em) {


.tut li {
    display: block;
    border: 1px solid white;
	float: left;
	width: 100%;    /* 1 column */
    font-size: 1.0em;
    height: 30px;
}
    
.tut a {
	padding-left: 0.5em;
    padding-top: 0.2em;
}

.image  {
    display: none;  /*Bild wird auf kleinen Displays entfernt */
}
.container > header {
		font-size: 0.6em;
	}
}