/*
Theme Name: Simple Parallax Website
Description: Simple Parallax Scrolling Effect
Author: Samuel Dalusung
*/

/*= GENERAL STYLING
--------------------------------------------------------*/

body{
	margin: 0;
	padding: 0;
	width: 100%;
	/*font-family: "Helvetica", helvetica, sans-serif;*/
	font-family: 'Raleway', sans-serif;
	font-weight:300;
}

h1 { 
	font-weight:normal;
	font-size: 55px;
	text-align: center;
	color: #fff;
	margin: 0;
	padding: 0;
}

.mkdsec h1 {
    color: #333333;
    font-family: 'Cardo',serif;
    font-size: 2.7em;
    font-weight: 100;
    line-height: 1.2em;
    margin-bottom: 0.4em;
    padding: 0;
    text-align: left;
}

h2 {
   font-weight: 100;
   font-size: 3.6em; /*62px */
   text-align: center;
   color: #333;
   margin-bottom: 0.4em;
   padding: 0;
   font-family: 'Cardo', serif;

}

.mkdsec h2 {
	background: none repeat scroll 0 0 #A7D610;
	border-radius: 40px;
	color: #FFFFFF;
	font-size: 1.4em;
	font-style: italic;
	font-weight: 200;
	margin-bottom: 30px;
	margin-top: 35px;
	padding: 15px 15px 15px 30px;
	text-align: left;
}

#slide2 h2 {
	color:#7c7c7c;
}

#slide2 p {
	color:#5e5d5d;
}

h3 {
	font-family: 'Cardo', serif;
	font-weight: 800;
	font-size: 23px;
	text-align: center;
	margin: 5px 0;
	margin-bottom:15px;
	padding: 10px 0px;
	z-index: 1;
	position: relative;
	color:#A7D610;
	font-variant: small-caps;
	font-style: italic;
	border-top:1px dotted #333;
	border-bottom:1px dotted #333;
}

.mkdsec .seccontent h3 {
  	border-bottom: 1px dotted #333333;
    border-top: 1px dotted #333333;
    color: #575757;
    font-family: Adobe Garamond Pro;
    font-size: 24px;
    font-style: italic;
    font-variant: normal;
    font-weight: 500;
    margin: 5px 0;
    padding: 10px 0;
    position: relative;
    text-align: left;
    z-index: 1;
}

#mxportfolio .view-Portfolio-2014 .views-field-title a {
	text-decoration: none;
}

#mxportfolio .view-Portfolio-2014 .views-field-body .field-content {
	font-size:0.8em;
	line-height: 1.7em;
}

#rq {
	position:absolute;
	top:0px;
	right:20px;
	width:80px;
	height:20px;
}


p {
	font-size:1em;
	line-height:1.8em;
	/*font-family: "Helvetica", helvetica, sans-serif;*/
	padding-bottom: 1.5em;
	text-align: center;
}

.mkdsec p {
	text-align:left;
}

.mkdsec .seccontent img {
	background: none repeat scroll 0 0 #333333;
	border: 1px solid #888888;
	border-radius: 5px;
	margin: 10px 0;
	max-width: 98%;
	padding: 0;
}

#mxportfolio .seccontent img {
	border:0px;
	padding:0px;
	margin:0px;
	background:none;
}

#mxportfolio .seccontent .views-fluidgrid-item {
	margin:20px;
	margin-left:100px;
	margin-top:60px;
}

.mkdsec .seccontent img.lefty {
	float:left;
	position:relative;
	margin-right:20px;
}

.mkdsec #sidebar img{
	max-width: 100%;
	height:auto;
}

.mkdsec .seccontent iframe {
	max-width: 100%;
	min-height:auto;
}

strong {
	color: #C5FD04;
}

.mkdsec strong {
	color:#333;
}

.mkdsec .seccontent ul li {
	line-height:1.8em;
	padding-left:20px;
}

.mkdsec .seccontent ul {
	margin-bottom:2em;
}

.mkdsec .seccontent ol li {
	list-style:lower-roman inside;
	padding-left:20px;
	line-height: 1.8em;
}

.mkdsec .seccontent ol {
	margin-bottom:2em;
}

.center { margin: 0 auto; }
.contentx { margin: 0 auto; width: 960px; }
.clear { clear: both; }


a.lpanel { float: left; color: #e1e1e1; font-size: 12px; font-family:"Helvetica"; text-decoration: none; margin: 7px 11px; }
a.rpanel { float: right; color: #e1e1e1;  font-size: 12px; font-family:"Helvetica"; text-decoration: none; margin: 7px 11px; }

a.lpanel:hover{ color: #fff; }
a.rpanel:hover{ color: #fff; }
/*= HEADER & NAVIGATION
--------------------------------------------------------*/

#header { 
	width: 100%; 
	background: #333;
	height: 80px; 	
	position: fixed;
	margin-top: 30px;
	z-index: 10;
}

.mkdsec #header {
	margin-top:0px;
}

#navix { width: 560px; float: right; margin-top: 20px; }

#nav {
	margin:0 auto;
}

#mkds2 {
	width:100%;
	height:40px;
	background-color: #A7D610;
	position:fixed;
	top:110px;
	z-index:20;
	background-image: linear-gradient(to left, rgba(255,255,255,0.1), rgba(0,0,0,0.6));
	-webkit-animation: mysecond 16s infinite alternate;
	animation: mysecond 16s infinite alternate;
}

@keyframes mysecond {
	from {background-color: #A7D610; /*blue*/ }
	to {background-color: #10A6D3; /*red*/}
}
@-webkit-keyframes mysecond {
	/* 0% will fallback to the default background-color of #rgb*/
	from {background-color: #A7D610; /*blue*/ }
	to {background-color: #10A6D3; /*red*/}
}


.mkdsec #mkds2 {
	top:80px;
}

#mkds2 ul {
	width:960px;
	margin:0 auto;
}

#mkds2 ul li {
	float:left;
	/*padding:0px 20px;*/
	/*line-height:30px;*/
}

#logo img {
	width:230px;
}

#logo a { 
	color: #fff; 
	text-decoration: none; 
	float: left; 
	font-size: 30px; 
	margin-top: 12px; 
	color: #fff; 
	 }
#navix ul{
	list-style: none;
	display: block;
	margin: 0 auto;
	list-style: none;	
}

#navix li{
	margin-top: 9px;	
	float: left;
	padding-left: 21px;
}

#navix li a { color: #fff; opacity:0.6; font-size: 14px; text-decoration: none; }
#navix li a.active { color: #fff; opacity:1; border-bottom: 2px solid #fff; }
#navix li a:hover { color: #fff; opacity:1;  }



/*= BUTTONS
--------------------------------------------------------*/

button.btn-know { 
	padding: 15px 47px; 
	margin: 40px 38.8%;
	text-align: center;
	border: 4px solid #fff; 
	color: #fff; 
	background: transparent; 
	font-size: 19px;
	cursor: pointer;
	text-shadow: -1px 2px 0px rgba(90, 90, 90, 0.56);
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.btn-know:hover { background: #fff; color: transparent; }
ul.built { list-style: none; margin: 0 auto; width: 730px; }
.built li img{ float: left; padding-right: 34px; }



/*= SLIDES STYLING
--------------------------------------------------------*/

#slide1, #slide2, #slide3, #slide4, #slide5, #slide6, #mcontent { width: 100%; }

#slide1{
	/*background:url('images/slidex.jpg') 50% 0 no-repeat fixed;*/
	background:#222;
	color: #fff;
	height: 700px;
	margin: 0;
	padding: 0px;
	background-size: cover;
}

#slidex2 {
	background-color: #000000;
    border-bottom: 1px solid #444444;
    height: 700px;
    overflow-x: hidden;
    position: absolute;
    top: 0;
    width: 100%;
}

#slide2{
	background: url('images/back-section2.jpg') repeat;
	color: #333333;
	height: 600px;
	margin: 0 auto;
	overflow: hidden;
	padding: 200px 0;
}

#mcontent {
	background: url('images/back-section2.jpg') repeat;
	width:100%;
	padding: 200px 0;
	overflow:auto;
}

.mkdsec #mcontent {
	background: #fafafa;
}

#sidebar {
	float:right;
	position:relative;
	margin-right:5%;
	width:25%;
	margin-left:20px;
	margin-bottom:10px;
	background-color:#282828;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius:5px;
}

.seccontent {
	width:60%;
	float:left;
	position:relative;
	margin-left:6%;
}

.cl .seccontent {
	width:90%;
}

.cls .seccontent {
	width:90%;
}

.cls .seccontent h2 {
	background: none;
}

#sidebar p {
	font-size:11px;
	line-height:1.8em;
}

#sidebar .field-content {
	font-size:11px;
	line-height:1.8em;
	color:#555555;
}

#sidebar a {
	color:#999999;
}


#sidebar h2 {
	border-bottom:1px dotted #333333;
	color:#888888;
	font-size:20.4px;
	margin-bottom:20px;
}

#sidebar h5 a {
	text-decoration:none;
}

#sidebar h5 a:hover {
	border-bottom:1px dotted #777;
}

#slide2 .teaser {
	width:25%;
	float:left;
	padding:20px 4%;
}

#slide2 .marketingicon {
	width:99px;
	height:101px;
	margin:0px auto;
	margin-bottom:40px;
	background: url('images/marketing-icon.png') top center no-repeat;
}
#slide2 .designicon {
	width:111px;
	height:97px;
	margin:0px auto;
	margin-bottom:40px;
	background: url('images/design-icon.png') top center no-repeat;
}
#slide2 .developmenticon {
	width:92px;
	height:101px;
	margin:0px auto;
	margin-bottom:40px;
	background: url('images/development-icon.png') top center no-repeat;
}

#slide3{
	background: url('images/web-design-merkados.jpg') 50% 0 no-repeat fixed;
	background-size: cover;
	/*background-color:#252525;*/
	color: #fff;
	height: 580px;
	padding: 200px 0;	
}

#slide3 h2 {
	color:#cacaca;
}
#slide3 p {
	text-align:justify;
}

#slide4{
	background-color: #161616;
	color: #333333;
	height: 580px;
	padding: 200px 0;
}

#slide4 h3 {
	text-align: center;
	font-size: 1.25em;
	text-transform: uppercase;
	color:#fff;
	border:3px solid #fff;
	display: block;
	margin:0 50px;
	position: relative;
	top:260px;
	padding:20px 0px;
	font-weight: 800;
}

#slide4 p {
	position:relative;
	top:260px;
	text-align: center;
	text-transform: uppercase;
	font-size:0.8em;
	text-decoration: none;
	color:#fff;
}

#slide4 p a {
	color:#fff;
	text-decoration: none;
	border-bottom:1px dotted #fff;
}
#slide4 #portfoliointro {
	width:460px;
	height:576px;
	background: url('images/portfolio-1.jpg');
	background-size: cover;
	float:left;
	position:relative;
	margin-right:20px;
	
}

#slide4 .portfolioitem {
	overflow:hidden;
}

#slide4 img {
	float:left;
	position:relative;
	margin-right:20px;
	margin-bottom:20px;
	
}

#slide5{
	background: #c8ff00;
	height: 700px;
	margin: 0 auto;
	padding: 150px 0;
	color: #fff;
	background-size: cover;
	border-top:6px solid #fff;
}

#slide5 p {
	color:#333;
}

#drroz {
	width:160px;
	height:148px;
	background: url('images/clients-roz.png') top center no-repeat;
	float:left;
	position: relative;
}

#evanpike {
	width:219px;
	height: 148px;
	background: url('images/clients-evan.png') top center no-repeat;
	float:left;
	position: relative;
}

#atlantic {
	width: 259px;
	height: 148px;
	background: url('images/clients-atlantic.png') top center no-repeat;
	float: left;
	position: relative;
}

#hospital {
	width: 131px;
	height: 148px;
	background: url('images/clients-hospital.png') top center no-repeat;
	float: left;
	position: relative;
}

#tony {
	width: 289px;
	height:146px;
	background: url('images/clients-tony.jpg') top center no-repeat;
	float: left;
	position: relative;
	margin-left:50px;
}

#tanas {
	width:167px;
	height: 146px;
	background: url('images/clients-tanas.jpg') top center no-repeat;
	float: left;
	position: relative;
}

#doug {
	width:274px;
	height:146px;
	background: url('images/clients-doug.jpg') top center no-repeat;
	float: left;
	position: relative;
	margin-left:50px;
}

#sharyn {
	width:209px;
	height:148px;
	background: url('images/clients-sharyn.jpg') top center no-repeat;
	float: left;
	position: relative;
	margin-left:40px;
	margin-right:60px;
}

#whitetiger {
	width: 174px;
	height:148px;
	background: url('images/clients-whitetiger.jpg') top center no-repeat;
	float: left;
	position: relative;
	margin-left:50px;
	margin-right:30px;
}

#universal {
	width: 282px;
	height: 148px;
	background: url('images/clients-universal.jpg') top center no-repeat;
	float:left;
	position: relative;
	margin-left:50px;
}

#slide6 {
	background: url('images/section6-back.jpg') 50% 0 no-repeat fixed;
	height: 600px;
	margin: 0 auto;
	padding: 100px 0;
	color: #fff;
	background-size: cover;
	border-top:6px solid #fff;
}

.ourclients {
	margin:0px 20px;
}

#cca {
	width:33%;
	position:relative;
	left:40%;

}

#cca h3 {
	font-size: 3em;
	text-align:right;
	color:#c8ff00;
	border:none;
}

#cca .address {
	text-align:right;
	border-top:1px dotted #fff;
	border-bottom:1px dotted #fff;
	margin:30px 0px;
	padding:30px 0px;
}

#copyright {
	position:relative;
	/*top:550px;*/
}

#copyright  { 
	color: #fff; 
	font-family:"Helvetica";  
	font-size: 14px; 
	margin-top: 140px; 
	text-align: center;  
}


.closinglogo {
	width: 319px;
	height:53px;
	background: url('images/merkados-logo.png') top center no-repeat;
	position: relative;
	float: right;

}

/* Secundary Pages */
.mkdsec img.mainimage {
	display:none;
}




/*= FOOTER 
--------------------------------------------------------*/


#copyright  a { text-decoration: none; color: #fff;  }


.mkdsec .terms {
	background-color: #333333;
    font-size: 0.8em;
    margin-top: 20px;
    padding: 10px 20px;
}

/* Hide the navigation for mobile*/
#fx {
	display: none;
}

/* Buttons from A Href*/
a.ab {
	display: table;
	padding:10px 30px;
	background:#A7D610;
	color:#fff;
	margin:0 auto;
	text-decoration: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border:1px solid #7A9B0C;
}

a.ab:hover {
	background:#333;
}




/* Media Queries for Screens smaller than 480; */
@media screen and (max-width: 480px) {

	#slide2 #marketing, #slide2 #design, #slide2 #development {
		width:90%;
	}

	#slide4 .portfolioitem {
		display:hidden;
	}


	#mxportfolio .views-fluidgrid-item-inner {
		width: 80%;
	}

	#slide6 #cca {
		width:100%;
	}

	#slide6 #cca .address, #slide6 #cca h3 {
		padding-right:20px;
	}

	#cca h3 {
		font-size:2em;
	}

	#mxportfolio .views-fluidgrid-item-inner img {
		max-width: 100%;
		height:auto;
	}
}

/*@media screen and (max-width: 960px) {*/
@media screen and (max-width : 960px) {
	.seccontent {
		width:90%;
	}

	#sidebar {
		width:90%;
		margin-top:30px;
	}

	#nav {
		width:100%;
	}

	#mkds2 ul {
		width:100%;
	}

	#cca {
		width:80%;
	}
	
	/**/
	
	#slidex2 {
		display:none;
	}

	#slide1 {
		display:none;
	}

	.contentx {
		width:90%;
	}

	#slide4 #portfoliointro {
		width:100%;
	}

	#slide2, #slide3, #slide5, #slide6 {
		height:auto;
		overflow:auto;
	}

	#mkds2 {
		display:none;
	}

	#navix {
		display: none;
	}

	#fx {
		display: block;
		position:relative;
		top:0px;
		height:auto;
		width: 100%;
		background:#111;
		z-index: 20;
	}

	#fx .menu {
		display: none;
	}

	#tricake {
		height:30px;
		width: 100%;
		position:relative;
		background: #222;
		color:#fff;
		line-height: 30px;
		
	}

	#tricake span {
		padding-left:20px;
	}

	#fx ul li {
		list-style: none;
	}

	#fx ul li a{
		display:block;
		height:30px;
		text-align: center;
		text-decoration: none;
		line-height: 30px;
	}

	#fx ul li a:hover {
		background:#444;
	}
	
	#cca {
		position:static;
	}

	#copyright {
		clear:both;
	}
}

@media screen and (min-width: 961px) {
	#cca {
		position:relative;
		left:60%;
	}
}

@media screen and (min-width: 1201px) {
	.mkdsec #mcontent {
		position:relative;
		width:1200px;
		left:50%;
		margin-left:-600px;
	}
}