@import url(reset.css);
body>*{
margin:0;
}
html{
background-color:#fff;
}


header{
width:100%;
height:120px;
background: #fff;
}


#ahead{
display:block;
}


.home a{
color:#3FF642;
text-decoration:underline;
}


h1{
font:15px 'PF DinDisplay','Trebuchet MS',Arial, sans-serif;
font-weight:bold;
color:#000;
line-height:30px;
padding-top:10px;
margin-left:5px;
text-decoration:underline;
}

menu li.online a{
	background:#00BF54;
	color:#fff;
}

menu li.online a:hover{
	background:#00BF54;
	color:#f1f1f1;
}


nav {
width: 100%;
}

nav menu {
list-style: none;
padding:0px;
margin:0px;
}
    

nav li a {
	background: #444;
	border-right: 1px solid #000;
	color: #000;
	display: inline-block;
	float: left;
	font: bold 16px 'PF DinDisplay','Trebuchet MS',Arial, sans-serif;
	padding: 4px 0px;
	text-align: center;
	text-decoration: none;
	width: 25%;
	height:58px;
	line-height:53px;
	
	/*TRANSISTIONS*/
	-webkit-transition: background 0.5s ease;
	   -moz-transition: background 0.5s ease;
	     -o-transition: background 0.5s ease;
	    -ms-transition: background 0.5s ease;
	        transition: background 0.5s ease;
			
		-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	    box-sizing: border-box;
}

/*HOVER*/
nav li a:hover {
background: #222;
}

/*SMALL*/


/*BORDER FIX*/
nav li:last-child a {
border: none;
}

/*BLUE MENU*/


.blue li a {
background:#d8d8d8;
}


.blue li a:hover {
background:#c5c5c5;
}





article{
width:100%;
overflow:hidden;
background:#fff;
float:left;
}
body,article{
height:100%;
}


article div.box{
width:1000px;
overflow:hidden;
margin:4px auto;
}
article img{
border-bottom:1px solid #f1f1f1;
margin:10px 5px 0 5px;
width:460px;
height:120px;
}


article div.box1, div.box2, div.box3, div.box4{
width:47%;
height:390px;
float:left;
margin:5px;
position:relative;
overflow:hidden;
transition:0.3s;
text-align:center;
padding:3px;
}

#box1:hover{
background-color:#f1f1f1;
transition:0.3s;
box-shadow: 1px 1px 7px 0 rgba(142, 142, 142, 0.8);
outline: 1px solid #a2a2a2;
}
#box2:hover{
background-color:#f1f1f1;
transition:0.3s;
box-shadow: 1px 1px 7px 0 rgba(142, 142, 142, 0.8);
outline: 1px solid #a2a2a2;
}
#box3:hover{
background-color:#f1f1f1;
transition:0.3s;
box-shadow: 1px 1px 7px 0 rgba(142, 142, 142, 0.8);
outline: 1px solid #a2a2a2;
}
#box4:hover{
background-color:#f1f1f1;
transition:0.3s;
box-shadow: 1px 1px 7px 0 rgba(142, 142, 142, 0.8);
outline: 1px solid #a2a2a2;
}

#box1{
background-color:#fff;
box-shadow: 2px 2px 7px 0 rgba(88, 88, 88, 0.8);
outline:1px solid #d7d7d7;
}
#box2{
background-color:#fff;
box-shadow: 2px 2px 7px 0 rgba(88, 88, 88, 0.8);
outline:1px solid #d7d7d7;
}
#box3{
background-color:#fff;
box-shadow: 2px 2px 7px 0 rgba(88, 88, 88, 0.8);
outline:1px solid #d7d7d7;
}
#box4{
background-color:#fff;
box-shadow: 2px 2px 7px 0 rgba(88, 88, 88, 0.8);
outline:1px solid #d7d7d7;
}

h2{
font:15px 'PF DinDisplay','Trebuchet MS',Arial, sans-serif;
font-weight:bold;
color:#000;
line-height:30px;
padding-top:10px;
margin-left:5px;
}
h2.h_two{
font:15px 'PF DinDisplay','Trebuchet MS',Arial, sans-serif;
font-weight:bold;
color:#000;
line-height:30px;
padding-top:10px;
margin-left:5px;
text-decoration:underline;
}

h2.h_twoo{
font:15px 'PF DinDisplay','Trebuchet MS',Arial, sans-serif;
font-weight:bold;
color:#000;
line-height:30px;
padding-top:10px;
margin-left:5px;
text-decoration:underline;
}

p.p_two{
font:16px arial,sans-serif;
font-weight:bold;
color:#000;
line-height:30px;
padding-top:10px;
margin-left:5px;
}

span{
font-weight:bold;
color:#000;
line-height:30px;
padding-top:10px;
}
div span.inshe{
text-decoration:underline;
font:16px arial,sans-serif;
font-weight:bold;
color:#000;
line-height:30px;
padding-top:10px;
margin-left:5px;
}







article div.box1 p{
font:italic 15px Calibri ,Arial, sans-serif;
color:#000;
line-height:30px;
padding-top:10px;
margin-left:5px;
}
article div.box2 p{
font:italic 15px Calibri ,Arial, sans-serif;
color:#000;
line-height:30px;
padding-top:10px;
margin-left:5px;
}
article div.box3 p{
font:italic 15px Calibri ,Arial, sans-serif;
color:#000;
line-height:30px;
padding-top:10px;
margin-left:5px;
}
article div.box4 p{
font:italic 15px Calibri ,Arial, sans-serif;
color:#000;
line-height:30px;
padding-top:10px;
margin-left:5px;
}


#ab1, #ab2, #ab3, #ab4{
display:block;
cursor:pointer;
}



div.social{
width:30%;
margin:5px auto;
text-align:center;
}

span.ya-share2__badge span{
line-height:normal;
padding-top:0px;
color:#fff;
}

span.ya-share2__badge{
line-height:19px;
padding-top:0px;
}



footer{
width:100%;
height:80px;
background-color:#f1f1f1;
float:left;
background-repeat:repeat;
border-top:1px solid #d7d7d7;
}
footer .feet{
overflow:hidden;
width:100%;
margin:auto;
padding-top:30px;
}

footer p{
font:bold 16px 'PF DinDisplay','Trebuchet MS',Arial, sans-serif;
color:#191919; 
float:left;
text-align:center;
width:175px;
}

footer p.name{
text-align:left;
margin-left:5%;
width:30%;
}

footer p.year{
text-align:center;
width:30%;
}
footer p.mail{
text-align:right;
width:30%;
}




@media screen and (max-width: 1600px) {
article div.box{
width: 70%;
}
}

@media screen and (max-width: 1366px) {
article div.box{
width: 75%;
}
}

@media screen and (max-width: 1152px) {
article div.box{
width: 80%;
}
}

@media screen and (max-width: 1024px) {
article div.box{
width: 90%;
}
}

@media screen and (max-width: 800px) {
article div.box{
width: 100%;
}
#box1, #box2, #box3, #box4{
width: 100%;
height:100%;
margin: 5px 0px;
}
#box1 p{
padding-bottom:50px;
}
}

@media screen and (max-width: 768px) {
article div.box{
width: 100%;
}
footer p.name{
margin-left:0%;
}
}

@media screen and (max-width: 600px) {
footer p{
font:13px 'PF DinDisplay','Trebuchet MS',Arial, sans-serif;
}
article div.box p{
font-size:14px;
}
}

@media screen and (max-width: 414px) {
article div.box{
width: 100%;
}
footer p{
font:13px 'PF DinDisplay','Trebuchet MS',Arial, sans-serif;
}
}









/* MEDIA QUERIES*/
@media screen and (max-width : 1530px){
	nav li a {
		font: bold 15px Helvetica, Arial, sans-serif;
		line-height:50px;
	}
	
}

@media screen and (max-width : 1410px){
	nav li a {
		height:68px;
		line-height:60px;
	}
	
}


@media screen and (max-width : 1220px){
	nav li a {
		font: bold 15px Helvetica, Arial, sans-serif;
		line-height:60px;
	}
	
}


@media screen and (max-width : 930px){
	nav li a {
		width: 25%;
		border-bottom: 1px solid #fff;
		font: 15px Helvetica, Arial, sans-serif;
		line-height:55px;
		height:64px;
	}
	
	nav li:last-child a, nav li:nth-child(4) a {
		border-right: none;
		border-bottom:1px solid #fff;
	}
	
	nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
		border-bottom: none;
	}
}


@media screen and (max-width : 580px){
	nav li a {
		width: 50%;
		font: 15px Helvetica, Arial, sans-serif;
		padding-top: 20px;
		padding-bottom: 12px;
	}
	
	nav li:nth-child(even) a {
		border-right: none;
	}
	
	nav li:nth-child(5) a, nav li:nth-child(6) a {
		border-bottom: 1px solid #fff;
	}
}


@media screen and (max-width : 320px){
	nav li a {
		font: 15px Helvetica, Arial, sans-serif;
	}
}

/*images-responsive*/


@media screen and (max-width : 1600px){
article img{
width:400px;
height:104px;
}
	
}

@media screen and (max-width : 1470px){
article img{
width:350px;
height:91px;
}
	
}


@media screen and (max-width : 1110px){
article img{
width:300px;
height:78px;
}	
	
}


@media screen and (max-width : 1024px){
article img{
width:350px;
height:91px;
}
}


@media screen and (max-width : 870px){
article img{
width:300px;
height:78px;
}	
}


@media screen and (max-width : 800px){
article img{
width:400px;
height:104px;
}
}


@media screen and (max-width : 620px){
article img{
width:350px;
height:91px;
}	
}

@media screen and (max-width : 542px){
article img{
width:300px;
height:78px;
}	
}


@media screen and (max-width : 470px){
article img{
width:280px;
height:73px;
}	
}

@media screen and (max-width : 440px){
article img{
width:270px;
height:70px;
}	
}