@font-face 
{
        font-family:Gotham, "DTL Nobel T Light", Helvetica, Arial, sans-serif;

 		src : url("../fontm/dtl_nobel_t_light.otf") format('opentype'),
               url("../fontm/dtl_nobel_t_light.ttf") format('truetype');
 		}
@font-face 
{
        font-family:"Gotham";

 		src : url("../fontm/gotham_black.otf") format('opentype'),
               url("../fontm/gotham_black.ttf") format('truetype');
 		}

ul.accordion{
    list-style:none;   
    position:absolute;
	width:100%;    
    top:0px;
    font-family: Cambria, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
	min-height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
ul.accordion li{
    float:right;
    width:33.33%;
   /* height:480px;*/
    display:block;
   /* border-right:2px solid #fff;
    border-bottom:2px solid #fff;*/
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:default;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
}
ul.accordion li.bg1{
    background:url(../imgm/img_after1.jpg); -moz-background-size:cover; -webkit-background-size:cover; background-size:cover;
}
ul.accordion li.bg2{
    background:url(../imgm/img_piece1+.jpg); -moz-background-size:cover; -webkit-background-size:cover;background-size:cover;
}
ul.accordion li.bg3{
    background:url(../imgm/piece_rechange2.jpg); -moz-background-size:cover; -webkit-background-size:cover;background-size:cover;
}
ul.accordion li.bg4{
    background:url(../imgm/4.jpg) top; -moz-background-size:cover; -webkit-background-size:cover;background-size:cover;
}
ul.accordion li.bleft{
    border-left:2px solid #fff;
}
ul.accordion li .heading{
    background-color:rgba(0,0,0,0.26);
	position:relative;
	min-height:100%;
    padding:10px;
    margin-top:0; 
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:18px;
	font-family:'DTL Nobel T Light';
    color:#fff;
    text-align:center;
	z-index:10; 
}
ul.accordion li .heading span{
	padding-top:60%; display:block;
}
ul.accordion li .heading span img{
	width:90px;
}
ul.accordion li .description{
    position:absolute;
    width:100%;
    height:175px;
    top:300px;
    display:none;
	font-family:'DTL Nobel T Light';
    color:#fff;
	z-index:10; 
}

ul.accordion li .infodescs{ display:none; padding-left:0;-webkit-transition: all 500ms ease;  
  -o-transition: all 500ms ease;
  transition: all 500ms ease;}
ul.accordion li:hover .infodescs{  -webkit-animation:zoomIn 0.5s;
  -moz-animation:zoomIn 0.5s;
  -ms-animation:zoomIn 0.5s;
  -o-animation:zoomIn 0.5s;
  animation:zoomIn 0.5s;
  }
  ul.accordion li .infodescs {display:block; padding-left:20px; font-size:1em; width:85%; float:left; text-align:justify;     font-family: 'DTL Nobel T Light';line-height:14px;
    margin:10px 22px;  
    font-style: normal;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.6em; }
ul.accordion li .description h2{
	 font-family: 'Gotham';
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:25px;
	padding-left:30px;    
    text-align:left;
    margin:0px 0px 15px 20px; 
}
/*ul.accordion li .description p{
    line-height:14px;
    margin:10px 22px; 
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.6em;
	display:block;
}
ul.accordion li .description a{
    position:absolute;
    bottom:5px;
    left:20px;
    text-transform:uppercase;
    font-style:normal;
    font-size:11px;
    text-decoration:none;
    color:#888;
}
ul.accordion li .description a:hover{
    color:#333;
    text-decoration:underline;
}*/

ul.accordion li .bgDescription{
    background: rgb(0,174,239);
background: -moz-linear-gradient(0deg, rgba(0,174,239,0.7749474789915967) 18%, rgba(0,219,239,0.758140756302521) 44%, rgba(35,96,178,0.010241596638655426) 100%);
background: -webkit-linear-gradient(0deg, rgba(0,174,239,0.7749474789915967) 18%, rgba(0,219,239,0.758140756302521) 44%, rgba(35,96,178,0.010241596638655426) 100%);
background: linear-gradient(0deg, rgba(0,174,239,0.7749474789915967) 18%, rgba(0,219,239,0.758140756302521) 44%, rgba(35,96,178,0.010241596638655426) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00aeef",endColorstr="#2360b2",GradientType=1);
    height:100%;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    display:none;
}

 #content{
                margin:0 auto;
            }
            .reference{
                clear:both;
                top:300px;
                left:0px;
                position:absolute;
                text-align:right;
                width:400px;
                padding:20px;
                background-color:#fff;
                -moz-box-shadow:1px 3px 15px #ddd;
                -webkit-box-shadow:1px 3px 15px #ddd;
                box-shadow:1px 3px 15px #ddd;
            }
            .reference p a{
                text-transform:uppercase;
                text-shadow:1px 1px 1px #fff;
                color:#666;
                text-decoration:none;
                font-size:10px;
            }
            .reference p a:hover{
                color:#333;
            }