/* Global Styles
================================================== */
body{
	background-color: #f6f6f6;
}

header {
	background-color: #fff;
}

.container {
	margin: 0 auto;
	overflow: hidden; /* This can be killed off */
}

#featured .container,
#projects .work .container,
footer .container {
	margin-top: 20px;
}

footer {
	background-color: #171717;
	padding-top:47px;
}

.module {
	float: left;
}



.image a {
	overflow: hidden;
	display: block;
}

.image a:hover{
	background-color: #333;
}

.image a p{
	position: absolute;
	bottom:43%;
	z-index:10;
	text-align: center;
	width:84.31%;
	color: #fff;
	font-size:16px;
}

#shim {
	/*background-color: #1475ec; EPI CUSTOM*/
	background-color: #000080;
	height: 5px;
	float: right;
}

#contact {
	clear: right;
	float: right;
}

h1{
	color: #808080;
}

h1 a {
	border-bottom: 1px solid #ECECEC;
	color: #808080 !important;
}

h1 a:hover{
	border-bottom: 1px solid #ECECEC;
	color: #666 !important;
}

h2 {
	font-size:16px;
	margin-top:22px;
	padding-top: 11px;
	border-top: 1px solid #dddddd;
	margin-bottom: 0;
	line-height:22px;
}

h3,
p {
	font-size:14px;
	line-height:18px;
	margin-bottom: 4px;
}

h3 {
	color: #333;
}

.work p {
	color: #959595;
}



a {
	text-decoration: none;
}

.image {
	line-height: 0;
	overflow: hidden;
	position: relative;
	background-color:#ececec;
}

.image img {
	float: left;
	z-index: 20;
	position: relative;
	opacity: 1;
	transition: opacity .60s ease-in;
	-moz-transition: opacity .60s ease-in;
	-webkit-transition: opacity .60s ease-in;
}

.image img:hover {
	opacity: 0;
	transition: opacity .20s ease-out;
	-moz-transition: opacity .20s ease-out;
	-webkit-transition: opacity .20s ease-out;
}


/* Project Colours
================================================== */

.image a {
	background-color: transparent;
	transition: background-color .60s ease-out;
	-moz-transition: background-color .60s ease-out;
	-webkit-transition: background-color .60s ease-out;
}
.image a:hover {
	transition: background-color .20s ease-in;
	-moz-transition: background-color .20s ease-in;
	-webkit-transition: background-color .20s ease-in;
}

.programacion .image a:hover,
.programacion #shim{
	background-color: #000080;
}

.soporte .image a:hover,
.soporte #shim{
	background-color: #333;
}

.virtualizacion .image a:hover,
.virtualizacion #shim{
	background-color: #333;
}

.gestport .image a:hover,
.gestport #shim{
	background-color: #000080;
}

.abogest .image a:hover,
.abogest #shim{
	background-color:#333;
}

.adaptable .image a:hover,
.adaptable #shim{
	background-color:#000080;
}

.telefonia .image a:hover,
.telefonia #shim{
	background-color:#44413C;
}

.helpdesk .image a:hover,
.helpdesk #shim{
	background-color:#000080;
}



/* Desktop Styles
================================================== */
.container {
	/*max-width: 1180px;*/
	max-width: 1180px;
	padding: 0 1.69%;
	width: 96.62%;
}
.module, #logo{
	/*width: 255px;*/
	width:21.61%;
	margin: 0 1.69%;
}

.image {
	width:84.31%;
	margin:20px auto 20px auto;
	padding:7.85%;
}

.image img{
	width:100%;
	height:auto;
	/*margin: 7.85%;*/
}

#contact p {
	width:30.17%;
	margin:88px 4.73% 75px 0;
	border-top:1px solid #ececec;
	padding-top:10px;
	font-size: 13px;
}

#contact p.contacto {
	margin-right:0;
}

#shim, #contact{
	/*width: 845px;*/
	width:71.61%;
	margin: 0 1.69%;
}

h1{
	/*width: 845px;*/
	width:61.61%;
	margin: 0 10.69% 0 1.69%;
}


.module {
	min-height: 200px;
	margin-bottom: 40px;
}

.indent {
	/*margin-left: 315px;*/
	margin-left:26.69%;
}

#contact p {
	display: block;
	float: left;
}

#logo {
	clear: both;
	float: left;
}

#logo div {
	/*width: 61px;  EPI CUSTOM*/
	width: 104px;
}

#logo img {
	/*width:100%; EPI CUSTOM*/
	width: 130%;
}

footer {
	margin-top: 88px;
}

footer .module {
	border-top: 1px solid #424242;
    padding-top:10px;
}

h1 {
	display: block;
	float: left;
	font-size: 24px;
	line-height:34px;
	margin-bottom:88px;
}

#projects .module.screens {
	width: 71.61%;
	padding-top: 20px;
}

#projects .module img{
	width:82.84%;
	margin:70px auto;
	display: block;
}

#projects .module p {
	font-size: 16px;
    line-height:22px;
    margin-bottom: 22px;
    margin-top: 0;
    color: #959595;
}

.screenshot {
	background-color: #ececec;
	overflow: hidden;
	margin-bottom: 60px;
	padding: 10px;
}


/* #Media Queries
================================================== */


	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {

		h3, p {
		    font-size: 13px;
		    line-height: 18px;
		    margin-bottom: 4px;
		}
		h2, 
		#projects .module p {
			font-size: 14px;
		    line-height: 20px;
		    
		}
		#projects .module p  {
			margin-bottom: 20px;
		}


	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {

		#shim,
		#contact,
		#logo,
		h1,
		.module.description {
			float: left;
			clear: left;
			width: 90%;
			margin: 0 5%;
		}
		.module.description {
			min-height: 0;
		}
		.module {
			margin: 0 5%;
			width: 39.61%;
			min-height: 350px;
		}
		h1{
			font-size:20px;
    		line-height:28px;
		}
		h2 {
			padding-top: 16px;
		}
		
		#contact p {
			margin: 0;
			width: 33.3%;
		}

		#logo div {
		    margin:40px auto;
				/*width: 61px;  EPI CUSTOM*/
				width: 104px;
		}
		h1 {
			margin:0 5% 40px 5%;
		}
		footer .module {
			min-height: 50px;
		}
		footer .module:nth-child(3n){
			display: none;
		}

		.helpdesk  {
			display: none;
		}
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {

		#projects .module.screens {
			width: 90%;
		}

	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {

		.module {
			float: left;
			clear: left;
			width: 89.61%;
			margin-bottom:30px;
		}
		#projects .module.screens{
			width: 90%;
		}
		footer .module {
			display: none;
			min-height: 50px;
		}
		footer .module.indent{
			display: block;
		}
		#contact p {
			float: left;
			clear: left;
			width: 100%;
		}


	}