@charset "UTF-8";
/* CSS Document */

#topx { height:60px;}
body {margin-bottom:40px}

@media only screen and (max-width : 668px) {
	body {margin-bottom:60px}
}
	
p { text-decoration:none; color:#888; font-size:14px; font-family:'play'; font-weight:400; margin-bottom: .5em; line-height:2em; text-align:justify; text-justify:inter-word; }
h1 { text-decoration:none; color:#888; font-size:18px; font-family:'lato'; margin-bottom: .5em; }
h2 { text-decoration:none; color:#888; font-size:22px; font-family:'play'; font-weight:400; margin-bottom: .5em; }
.b-header {color:#888; font-size:20px; font-family:'play'; font-weight:400; margin-bottom: .5em; margin-top:0; }
.b-text{color:#888; font-size:12px; font-family:'play'; font-weight:400; margin-bottom: .5em; line-height:1.8em; text-align:justify; text-justify:inter-word;}
.project {color:#888; font-size:18px; font-family:'play'; font-weight:400; margin-bottom: 0em; margin-top:0;}

.mrb40 { margin-bottom:40px;}
.address {color:#888; font-size:14px; font-family:'play'; font-weight:400; line-height:1.5em; margin-top:20px;}

iframe { margin-bottom:30px;}

a {
  color: #fff;
  text-decoration: none;
}
	
	
a:hover,
a:focus {
  color: #fff;
  text-decoration: none;
}
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

header {
	background:url(../img/bg-int.png);
	margin: 0 auto;
	width:100%;
	height:60px;
	position:fixed;
	left:0;
	top:0;
	z-index:1000;
	}

#logo {
	float:left;
	margin-left: 30px;
	margin-top: 6px;
	margin-bottom: 6px;
	background-image:url(../img/logo-mdwp.png);
	width:280px;
	height:48px;
	}
	
@media only screen and (max-width : 668px) {

#logo {
	float:left;
	margin-left: 20px;
	margin-top: 6px;
	margin-bottom: 6px;
	background-image:url(../img/logo-icon.png);
	width:50px;
	height:48px;
	}

}


/* NAVIGATION */
nav {
	float:right;
	color:#fff;
	
	}
	
	nav a:hover {
		color:#ccc;
		text-decoration:none;
	}
	
#menu-icon {
    top:0;
	right:0;
	display: hidden;
	width: 40px;
	height: 40px;
	background: url(../img/menu-icon.png) center;

}

a:hover#menu-icon {

}
	
nav ul {
    list-style-type: none;
	}
	
nav li {
	float:left;
	margin-right:20px;
	height:auto;
	}
	
nav li a {
	display:block;
	text-decoration:none;
	padding: 1.2em 1.2em;
	color:#fff;
	font-size: 16px;
	font-family:'lato';
	}
	
.active{
	background:#555;
}

@media only screen and (max-width : 1024px) {
	
#menu-icon {

		display:inline-block;

	}
	
#icon-position {
	margin-top:9px;
}

	nav ul, nav:active ul { 

		display: none;
		position: absolute;
		padding: 0px;
		background: #666;
		right: 0px;
		top: 60px;
		width: 100%;
		z-index:10000;

	}

	nav li {

		text-align: right;
		font-size:14px;
		width: 100%;
		padding: 0px 0;
		margin: 0;
		

	}
	
	nav li a {
	display:block;
	text-decoration:none;
	padding: 1.2em 1.2em;
	color:#fff;
	text-transform:uppercase;
	font-size: 14px;
	font-family:'lato';
	}

	nav:hover ul {

		display: block;

	}

}
/* NAVIGATION */


/* CONTENT */

/* CAROUSEL */

@media only screen and (max-width : 668px) {
.carousel { margin-top: 60px;}
}

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  padding-left: 0;
  margin-left: -30%;
  text-align: center;
  list-style: none;
}
.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #ccdde9;
  border-radius: 10px;
}
.carousel-indicators .active {
  width: 12px;
  height: 12px;
  margin: 0;
  background-color: #666;
}

.sl-heading {
	font-family:'lato';
	font-size:17px;
	text-align:center;
	color:#fff;
	margin:0;
	padding:0;
	text-shadow:#666;
}

.sl-p {
	font-family:'lato';
	font-size:11px;
	text-align:center;
	color:#fff;
	width:100%;
	margin:0;
	padding:0;
	text-shadow:#666;
}


/* CAROUSEL */


.sections {
	margin: 0 auto;
	width:100%;
	height:260px;
}

.sec1 {
	float:left; 
	width:33.3333%;  
	height:260px;
	position:relative; 
	background-image:url(../img/sec-web.jpg);
	background-position:center;
}

.sec2 {
	float:left; 
	width:33.3333%;  
	height:260px;
	position:relative; 
	background-image:url(../img/sec-brand.jpg);
	background-position:center;
}


.sec3 {
	float:left; 
	width:33.3333%;  
	height:260px;
    position:relative; 
	background-image:url(../img/sec-pac.jpg);
	background-position:center;
}


.sec-title {
    position:absolute; 
	top:0; 
	left:0; 
	width:100%; 
	height:100%;
	margin:0px 0px 0px 0px;
	text-align:center;
	text-transform:uppercase;	
}



.sections h3 { color:#fff; font-family:'Play'; font-size:22px; margin-top:120px;} 

@media only screen and (max-width : 1024px) {

	
}

@media only screen and (max-width : 668px) {

.sec1 {
	float:left; 
	width:100%;  
	height:260px; 
	background-image:url(../img/sec-web.jpg);
	background-position:center;
	margin-bottom:5px;
}

.sec2 {
	float:left; 
	width:100%;  
	height:260px; 
	background-image:url(../img/sec-brand.jpg);
	background-position:center;
	margin-bottom:5px;

}


.sec3 {
	float:left; 
	width:100%;  
	height:260px; 
	background-image:url(../img/sec-pac.jpg);
	background-position:center;
	margin-bottom:5px;

}

}


.img-responsive {
	margin:2px;
	box-shadow: 0px 0px 5px #CCC;
}

/* CONTENT */

/*---------------------------- WEB --------------------------------*/

.row-web {
  margin-right: -15px;
  margin-left: -15px;
}
.row-web h4 { float:left; margin:10px 5px 20px 5px; padding:0; font-family:'Play'; font-size:16px; font-weight:700; color:#888; width:250px;}
.row-web span { float:right; margin:10px 5px 60px 5px; padding:0; font-size:14px; color:#069; }

@media only screen and (max-width : 668px) {
	.row-web h4 {width:300px;}
	.row-web span {float:left;}
	
}

/*---------------------------- WEB *--------------------------------/


/*---------------------------- BRANDING--------------------------------*/

#topbox100 { margin-top:100px;}

.row-brand {
  margin-right: -15px;
  margin-left: -15px;
}
.row-brand h4 { float:left; margin:10px 5px 60px 5px; padding:0; font-size:16px; font-family:'Play'; font-weight:700; color:#888;}

@media only screen and (max-width : 668px) {

	
}

.row-brand-item img { margin-bottom:30px; padding:10px;}

/*---------------------------- BRANDING--------------------------------*/


/*---------------------------- Logos--------------------------------*/

.row-logos {
  margin-right: -15px;
  margin-left: -15px;
  margin-top:40px;
}

.row-logos img { margin-bottom:40px;}

@media only screen and (max-width : 668px) {

	
}

/*---------------------------- Logos--------------------------------*/

.row-mov {margin: 20px 0px 20px 0px; position:relative;}


/*---------------------------- CONTACT --------------------------------*/

.masthead {
  float:left;
  width:100%;
  height:200px;
  background-image:url(../img/contact-bg.jpg);
  background-position:center;
}

.container label{ 
text-decoration:none; color:#888; font-size:14px; font-family:'play'; font-weight:400; margin-bottom: .5em; line-height:2em; text-align:justify; text-justify:inter-word;
}


/*---------------------------- CONTACT *--------------------------------/


/* RECENT */

.recent {
	float:left; 
	width:100%;  
	height:450px;
	position:relative;
	background-image:url(../img/iphones.jpg);
	background-position:center;
}

.recent-title {
    position:absolute; 
	top:0; 
	left:0; 
	width:100%; 
	height:100%;
	text-align:center;
	
}



.recent h3 { color:#fff; font-family:'Play'; font-weight:400; font-size:30px; margin-top:360px; text-shadow:#666; text-transform:uppercase;	}
.recent h4 { color:#fff; font-family:'Play'; font-weight:300; font-size:16px; margin-top:0px; text-shadow:#666;}
 
/* RECENT */

.btn-default {
  color: #fff;
  background-color: #000;
  border-color: #000;
}
.btn-default:hover
{
  color: #ccc;
  background-color: #000;
  border-color: #000;
}



/* FOOTER */
footer {
	width: 100%;
	position:fixed;
	left:0;
	bottom:0;
	background:#fff;
	opacity:0.8;
	box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

footer ul {
	list-style-type: none;
}

footer li {
	float:left;
	margin-left:10px;
	padding: 5px 10px;
    color:#666; 
	font-size:14px; 
	font-family:'Play'; 
	 }
	
	
footer a {
	text-decoration:none; 
    color:#666; 
	font-size:14px; 
	font-family:'Play';
	}
	
	
	
	@media only screen and (max-width : 668px) {
	
	.hiddenm { display:none;}
	
	}
	
	.visible { display:none;}
	
	@media only screen and (max-width : 668px) {
	.visible { display:initial; background-color:#888; margin-left:50px;}
	}
	
	.fa-linkedin {color:#fff;}
	.fa-envelope {color:#fff; }

/* FOOTER */