* { box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;}

p{font-size: 13px; line-height: 17px;font-weight: 400;}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
body {
	font-family: 'Tahoma', Trebuchet, Arial, sans-serif;
	font-size: 12px;
	color: #888;
	padding:0;
	position: relative;
	background: url("../images/noise-b.png"), #161616;
	background-repeat: repeat;
}
section{
	padding: 15px 0 0 0;
	float: left;
	width: 100%;
}
.wrapper {
	width: 100%;
	margin: 0px auto;
	position:relative;
	overflow: hidden;
	background-color: rgba(0,0,0,0);
	padding: 0 ;
	height:auto;
	-webkit-transition: 0.5s ease-in-out all;
    -moz-transition: 0.5s ease-in-out all;
    -ms-transition: 0.5s ease-in-out all;
    -o-transition: 0.5s ease-in-out all;
    transition: 0.5s ease-in-out all;
}
.wrapper-section{
    width: 100%;
    overflow: hidden
}
/*FADE-IN*/
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}
/*▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒HEADER▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒*/
header{
	width: 100%;
	margin: 0 auto;
	height: 180px;
    background: rgba(0,0,0,0.5);
/*	background: -webkit-linear-gradient(top,rgba(255,255,255,0.85),rgba(255,255,255,1)); /*Safari 5.1-6*/
/*  	background: -o-linear-gradient(top,rgba(255,255,255,0.85),rgba(255,255,255,1)); /*Opera 11.1-12*/
/*  	background: -moz-linear-gradient(top,rgba(255,255,255,0.85),rgba(255,255,255,1)); /*Fx 3.6-15*/
/*  	background: linear-gradient(to top, rgba(255,255,255,0.85), rgba(255,255,255,1)); /*Standard*/
/*
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);*/
}
header .wrapper{
	height: 180px;
	width: 90%;
	max-width: 1180px;
}
.logo{
	height:64px;
	width: 188px;
	margin: 55px 0 0 0;
	background-image: url('../images/logo-NSS.png');
	background-repeat:no-repeat;
	background-size: 90%;
	background-position: left center;
	cursor: pointer;
	-webkit-filter: brightness(0.7);
	-webkit-transition: 0.5s ease-in-out all;
    -moz-transition: 0.5s ease-in-out all;
    -ms-transition: 0.5s ease-in-out all;
    -o-transition: 0.5s ease-in-out all;
    transition: 0.5s ease-in-out all;
}
.logo:hover{
	-webkit-filter: brightness(1.1);
}
.wrapper .title{
	font-size: 28px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 300;
	text-shadow: 0px 0px 0px;
	float: right;
	margin: 68px 0 0 0;
	color:#d0d0d0;
}
.div_hor{
	width: 100%;
	height: 1px;
	float: left;
	background: #333;
}
.contact{
	width: 100%;
	margin: 30px 0 0;
	float: left;
	text-align: right;
}
.contact input[type="submit"]{
	color:#6d91b2;
	background: none;
	border: none;
	text-align: center;
}
.contact input[type="submit"]:hover{
	color:#84c5ff;
}
/**//**//**//**//**//**//**//**//*buttons*//**//**//**//**//**//**//**//**/
a{
	overflow: hidden;
	color:#fff;
	text-decoration: none;
	float: left;
}
/**//**//**//**//**//**//**//**//*TRANSITIONS*//**//**//**//**//**//**//**//**/
.tran{
	-webkit-transition: 0.5s ease-in-out all;
    -moz-transition: 0.5s ease-in-out all;
    -ms-transition: 0.5s ease-in-out all;
    -o-transition: 0.5s ease-in-out all;
    transition: 0.5s ease-in-out all;
}
/**//**//**//**//**//**//**//**//*sections*//**//**//**//**//**//**//**//**/
section.main {
	padding: 50px 0;
}
section.main .wrapper{
	padding:0 ;
}
.block{
	border-radius: 3px;
	background-color: #fff;
	box-shadow: 0px 0px 1px 0.5px rgba(0,0,0,0.2);
}
footer>.block{
		box-shadow: 0px 0px 1px 0.5px rgba(0,0,0,0.4);
}
/**//**//**//**//**//**//**//**//*GRID STRUCTURE/gallery-five-col*//**//**//**//**//**//**//**//**/
.gal-five {
	margin: 0;
	float: left;
	padding: 1px;
	-webkit-transition: 0.5s ease-in-out all;
    -moz-transition: 0.5s ease-in-out all;
    -ms-transition: 0.5s ease-in-out all;
    -o-transition: 0.5s ease-in-out all;
    transition: 0.5s ease-in-out all;
    cursor: pointer;
    position: relative
}
.gal-five .box-2 {
	height: auto;
    position: relative;
    align-items: center;
    display: flex;
    overflow:hidden
}
.gal-five .box-2 img {
    width: 100%;
    height: 100%;
    max-width: 240px;
    max-height: 240px;
    display:block;
    float: left;
    position: relative;
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}
.gal-five:hover>.box-2 img{
    -webkit-animation-name: anim-fade; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: forwards;
    animation-name: anim-fade;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
@keyframes anim-fade {
    0%   {}
    25%  {
	   opacity: 0.3;
       filter: alpha(opacity=30); /* For IE8 and earlier */
    }
    50%  {}
    100% {
	   opacity: 1;
       filter: alpha(opacity=100); /* For IE8 and earlier */
    }
}
.an-grow:hover>a>img
{
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: 0.3s ease-in-out all;
    -moz-transition: 0.3s ease-in-out all;
    -ms-transition: 0.3s ease-in-out all;
    -o-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all;
}
.gal-five:hover>.box-2 .gal-text{
	display: block;
}
.flashPlayer{
    position: absolute;
    bottom: 0px;
    background: rgba(0,0,0,0.35);
    color:#fff;
    padding:5px;
    text-align: center
}
.gal-five.box-A{
    background-color:#88062c;
    cursor:auto;
    color:rgba(255,255,255,0.75)
}
.gal-five.box-B{
    background:#172d40;
    cursor:auto;
    color:rgba(255,255,255,0.75)
}
.gal-five.box-C{
    background:#14454a;
    cursor:auto;
    color:rgba(255,255,255,0.75)
}
.gal-five.box-A, .gal-five.box-B, .gal-five.box-C{
    border: 1px solid #161616
}
.gal-five .box-X{
    background:#271b19;
    cursor:auto;
}
.gal-five .box-Y{
    background:#0d1b27;
    cursor:auto;
}
.gal-five .box-Z{
    background:#0a2326;
    cursor:auto;
}
.titleproject{
	font-size: 28px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 100%;
    height: auto;
    text-align: center;
}
.titleproject .project{
    width:70%;
    margin-left:15%;
    margin-right:15%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
/*****/
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;

}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    opacity:0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
    width: 100%;
    background: rgba(0,0,0,0.35);/* For browsers that do not support gradients */
    /*background: -webkit-linear-gradient(top,rgba(0,0,0,0.6)50%,rgba(0,0,0,0)); /*Safari 5.1-6*/
  	/*background: -o-linear-gradient(top,rgba(0,0,0,0.6)50%,rgba(0,0,0,0)); /*Opera 11.1-12*/
 	/*background: -moz-linear-gradient(top,rgba(0,0,0,0.6)50%,rgba(0,0,0,0)); /*Fx 3.6-15*/
  	/*background: linear-gradient(to top, rgba(0,0,0,0.6)50%, rgba(0,0,0,0)); /*Standard*/
    color: #fff;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 300;
    font-size:20px;
    line-height:20px;
    text-align: center;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    padding: 20px 5% 0px;
    bottom:0;
    z-index: 1;
    text-shadow: 0 0 3px #000;
    -webkit-transition: 0.3s ease-in-out all;
    -moz-transition: 0.3s ease-in-out all;
    -ms-transition: 0.3s ease-in-out all;
    -o-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    padding: 20px 5% 20px;
    opacity:1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
/*▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒FOOTER▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒*/
footer {
	width:100%;
	position:relative;
	z-index:1;
	height: 180px;
	clear: both;
	text-align: center;
	bottom: 0px;
	color: #666;
	padding-top: 20px;
}
div.copyright {
	line-height: 20px;
	width:48%;
	height:100px;
	float: left;
	margin: 0 0 0 26%;
}
footer a.webnss{
	margin: 0;
}
.nss-fav{
	float: left;
	margin: 0 20px 0 20px;
	width: 80px;
	height: 16px;
	text-align: center;
	line-height: 20px;
	background-image: url("../images/nss-fav.png");
	background-position: right center;
	background-repeat: no-repeat;
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
	color:#999;
}
.nss-fav:hover{
	opacity:1;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}
.nav_container {
    height: 60px!important;
}
.piro_prev, .piro_next{
    display:none!important;
}
/*▒▒▒▒▒▒▒RESPONSIVE▒▒▒▒▒▒▒*/
@media screen and (max-width: 3200px){
	.gal-five {
    	width: 5%;
    }
}
@media screen and (max-width: 2799px){
	.gal-five {
    	width: 7.142857%;
    }
}
@media screen and (max-width: 2399px){
	.gal-five {
    	width: 8.33333333%;
    }
}
@media screen and (max-width: 1999px){
	.gal-five {
    	width: 10%;
    }
}
@media screen and (max-width: 1679px){
	.gal-five {
    	width: 12.5%;
    }
    .gal-five:nth-child(n+73){
        display:none
    }
}
@media screen and (max-width: 1399px){
	.gal-five {
    	width: 14.28571428%;
    }
    .gal-five:nth-child(n+73){
        display:none
    }
}
@media screen and (max-width: 1159px){
	.gal-five {
    	width: 16.666666%;
    }
    .gal-five .box-2 img {
    max-height: 200px;
}
    .gal-five:nth-child(n+73){
        display:none
    }
}
@media screen and (max-width: 899px){
	.gal-five {
    	width: 20%;
    }
    .gal-five .box-2 img {
        max-height: 200px;
    }
    .wrapper .titleproject{
        font-size:25px;
    }
    .gal-five:nth-child(-n+20){
        display:inherit
    }
    .gal-five:nth-child(n+73){
        display:none
    }
}
@media screen and (max-width: 699px){
	.gal-five {
        width: 25%;
    }
	.gal-five .box-2 img {
    max-height: 200px;
    }
    .gal-five:nth-child(n+73){
        display:none
    }
}
@media screen and (max-width: 499px){
	.gal-five {
        width: 33.3333333%;
    }
	.gal-five .box-2 img {
    /*max-height: 170px;*/
    }
    .gal-five:nth-child(n+73){
        display:none
    }
	header{
	height: 240px;
	}
	header .wrapper{
	height: 240px;
	position: relative;
}
	header .wrapper a{
	width: 100%;
	position: relative;
}
	.logo{
	position: relative;
	margin: 48px auto 20px;
	background-size: 100%;
	background-position: center center;
}
	header .wrapper .title{
	width: 100%;
	margin: 0px auto;
	position: relative;
	text-align: center;
	}
	.contact{
	width: 80%;
	margin: 20px 0 0 10%;
	float: left;
	text-align: center;
}
	footer{
	height: 220px;
	}
	footer a{
	width: 100%;
	position: relative;
	}
	div.copyright {
	width:86%;
	height:70px;
	margin: 0 0 0 7%;
}
	footer a.webnss{
	margin: 20px 0;
}
	footer a .nss-fav{
	width: 80px;
	margin: 0px auto 20px;
	position: relative;
	float: none;
	padding-right: 10px;
}
}
@media screen and (max-width: 379px){
	.gal-five {
        width: 50%;
}
	.gal-five .box-2 img {
    /*max-height: 170px;*/
}
    .gal-five:nth-child(n+73){
        display:none
    }
}