﻿.grid { margin: 0; float:none; clear:both }

.grid figure 		{ position: relative;  float: left; overflow: hidden; margin:0 0 20px 0; width: 100%; height: 7em; background: #000; cursor: pointer;}

.grid figure img 	{ position: relative; display: block;  opacity: 1;  }

.grid figure figcaption {padding: 8px 60px 8px 25px; color: #000; text-transform: uppercase; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.grid figure figcaption .titol_area {font-size:1.6em;}

.grid figure figcaption::before, 
.grid figure figcaption::after { pointer-events: none; }

.grid figure figcaption, 
.grid figure figcaption > a { position: absolute; bottom: 0; left: 0; width: auto; height: auto; background:#000;}

h2.titol_area{ font-size:1.5em; text-transform: uppercase;}
	figure.effect-duke {margin-bottom:25px;}
	figure.effect-duke img {height:100%; width:auto; overflow: hidden}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */

.grid figure figcaption .titol_area { font-weight: 700 !important;  text-transform:none; text-align: left; font-size: 1.5em; color:#fff; }
.grid figure figcaption p { text-align:right; display:none;/*display:inline-block;*/ font-size: 1.5em; margin-top: 3em; font-weight:700}

figure.effect-duke 				{ /*padding:0 !important; margin:0 !important*/  border-bottom:10px solid #000; margin-bottom:45px; }
figure.effect-duke-office 		{ /*padding:0 !important; margin:0 !important*/  }

figure.effect-duke img, 
figure.effect-duke p 			{ -webkit-transition: opacity 0.9, -webkit-transform 0.35s; transition: opacity 2s, transform 2s; }

figure.effect-duke:hover img 	{ opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); }

figure.effect-duke h2 			{ -webkit-transition: -webkit-transform 0.35s; transition: transform 3s; -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; }

figure.effect-duke p 			{ position: absolute; bottom: -1em; left: -1.4em; text-transform: none; font-size: 90%; opacity: 0; -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); -webkit-transform-origin: 50% -100%; transform-origin: 50% -100%; }

figure.effect-duke:hover h2, 

figure.effect-duke:hover p 		{ opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }


/* Media queries */
@media screen and (min-width: 400px) {
	h2.titol_area{ font-size:1.5em}
	
	figure.effect-duke-office 		{ height: 9em!important }
}

@media screen and (min-width: 600px) {
	h2.titol_area{ font-size:1.6em}
	
	figure.effect-duke img {height:auto; width:100%; overflow: hidden}
	}


@media screen and (min-width: 800px) {
	h2.titol_area{ font-size:1.8em}
	.grid figure figcaption .titol_area {font-size:1.8em;}
	.grid figure { height: 8em }
	
	figure.effect-duke-office 		{ height: 12em!important }
	}

@media screen and (min-width: 1100px) {
	figure.effect-duke img {height:auto; width:100%; overflow: hidden}
	.effect-duke {margin-top: 100px}
	figure.effect-duke img {height:auto; width:100%; overflow: hidden; }
	h2.titol_area{ font-size:2.5em}
	.grid figure { height: 9em }
		
	figure.effect-duke-office 		{ height: 18em!important }
	}

.capinstitut { background-color="#f18969"}