* { box-sizing: border-box; }

.row:after { content: ""; clear: both; display: table; }

[class*="col-"] { float: left; padding: 2%; }

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; text-align: justify; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }


.head { background-color: #FFFFFF; text-align: center; }

.nav { background-color: #CCCCCC; padding: 0; border-radius: 15px; text-align: center; }

.side { margin-top: 10px; text-align: center; }

.logo { width: 100%; /*animation: rotate 5s linear 1s 1 alternate;*/ }

a { text-decoration: none; color: #000000;	}

a:hover { text-decoration: underline; }

a[class*="active"] { padding: 10px 0px; margin: auto; text-decoration: none; color: #000000; width: 20%; font-family: "Lucida Console", Monaco, monospace; font-variant: small-caps; font-size: 120%; float: left; text-align: center; }

.first { border-radius: 15px 0px 0px 15px; }

.last { border-radius: 0px 15px 15px 0px; }

a.active { background-color: #BABABA; }

a.inactive { background-color: #CCCCCC; }

a.inactive:hover { animation: pulse 0.75s linear 0s infinite alternate; }

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

    [class*="col-"] { width: 100%; }
    
    a[class*="active"] { display: block; text-align: center; width: 100%; }
    
    .logo { width: 50%; }
    
    .side { border-radius: 10px; background-color: #CCCCCC; }
    
    .first { border-radius: 10px 10px 0px 0px; }
    
	.last { border-radius: 0px 0px 10px 10px; }

}

@keyframes pulse {
	from { background-color: #CCCCCC; }
	to { background-color: #BABABA; }
}

@keyframes rotate {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(90deg); }
	50% { transform: rotate(180deg); }
	75% { transform: rotate(270deg); }
	100% { transform: rotate(360deg); }
}