@CHARSET "UTF-8";

html { }
body { font-family: 'Raleway', Arial, Helvetica, sans-serif; font-size:13px; line-height:21px; height:100%; color:#787E87; margin:0; padding:0;
	/* background-color:#F6F6F6;
	background-image:url(bg.png); */
	background-repeat:repeat;
	background-position:top center;
 background: #FAFAFA;}

a { color: #1CA86F; text-decoration: none; outline: none; border: none; }
a img {outline: none; border: 0; }

#Wrapper { width: 1200px; margin: 30px auto 0; overflow: hidden; }
#logo { background: url("logo.png") no-repeat; width: 197px; height: 40px; display: block; overflow: hidden; text-indent: -9999px; margin: 0 auto 20px; }

h1 { margin:0; text-align: center; color: #000; font-size: 32px; line-height: 1; font-weight: 900; text-transform: uppercase;}
h2 { text-align: center; margin-bottom: 30px; font-size: 16px; line-height: 25px; font-weight: 600; color: #5C5C5C; font-weight: 400;}
h3 { text-align: center; margin-bottom: 23px; font-size: 22px; line-height: 22px; color: #39464E; margin: 5px 0 0; font-weight: 400; margin-bottom: 15px; font-family: Raleway;}
.item:hover h3 { color: #1CA86F;}

p { text-align:center;}
p span { color:#222;}
p.description { padding:10px; border-top:1px solid rgba(0,0,0,.1); font-size:130%; margin-top: 100px;}

img.scale-with-grid {
	max-width: 100%;
	height: auto;
}

.items { overflow:hidden; margin-bottom:20px; text-align: center;}
.items .item { width: 30%; margin:0 1.5%; float: none; position: relative; display: inline-block; margin-bottom: 35px;}
.items .item:nth-child(4n+4) {
    margin-left: 0;
}
.items .item .desktop {
	position: absolute;
	left: 43px;
	top: 54px;
	width: 274px;
	height: 171px;
	overflow: hidden;
}
.items .item .desktop .inside { position: absolute; left: 0px; width: 100%; line-height: 0; }

.items .item .desktop .inside {   
  -webkit-transition-duration: 5s;
     
  -moz-transition-duration: 5s;
      
  -ms-transition-duration: 5s;
       
  -o-transition-duration: 5s;
          
  transition-duration: 5s;
}
.items .article a:hover .desktop .inside { margin-top: -258px;}
.responsive-icon {
    background: url('responsive.png') no-repeat 0px 0px;
    /*
	left: -2px;
	*/
    position: absolute;
    right: -3px;
    top: 0px;
    right: 33px;
    top: 42px;
    width: 82px;
    height: 71px;
	z-index:99999;
}

@media only screen and (min-width: 960px) and (max-width: 1150px) {
	#Wrapper { width: 920px;}
	.items .item .desktop { position: absolute; left: 44px; top: 54px; width: 280px; height: 176px; }
	.items .article a:hover .desktop .inside { margin-top: -100px;}
}
@media only screen and (min-width: 768px) and (max-width: 1150px) {
	.items .item { width: 40%; }
	.items .item:nth-child(2n-5) { margin-left: 0;}
	.items .item:nth-child(2n+2) { margin-right: 0;}
	.items .article a:hover .desktop .inside { margin-top: -258px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#Wrapper { width: 760px; }
	.items .item .desktop { position: absolute; left: 36px; top: 52px; width: 232px; height: 145px; }
	.items .article a:hover .desktop .inside { margin-top: -213px;}
	.responsive-icon {
		right: 28px;
	}
}

@media only screen and (max-width: 767px) {
	#Wrapper { width: 420px; }
	.items .item { width: 100%; margin:0 0 20px; }
	.items .item .desktop { position: absolute; left: 50px; top: 55px; width: 320px; height: 201px; }
	.items .article a:hover .desktop .inside { margin-top: -300px;}
	.responsive-icon {
		right: 39px;
	}
}

@media only screen and (max-width: 479px) {
	#Wrapper { width: 300px; }
	.items .item .desktop { position: absolute; left: 36px; top: 52px; width: 228px; height: 145px; }
	.items .article a:hover .desktop .inside { margin-top: -213px;}
	.responsive-icon {
		right: 28px;
	}
}