/*
* Blux V.1
* Copyright 2012, manuelvega
* DATE : 03/01/2013
* URL : http://themeforest.net/user/manuelvega
* Please RATE this item !
*/



/* Table of Contents
==================================================
  
  1. GENERAL STYLES
  2. HEADER & NAV
  3. ABOUT
  4. SERVICES
  5. PORTFOLIO
  6. CONTACT
  7. FOOTER
  8. SWITCHER
  9. MEDIA QUERYS


/* 1 - GENERAL STYLES 
================================================== */


body {font-family:'Arial';}
a {color: #06F; text-decoration: none;}
::selection {color:#000; background-color: #212121;}
.clear {clear: both;}
p {font-family: 'Arial'; font-size:16px; color: #006; text-align:justify}
h2 {font-size:35px; font-family: 'Arial'; text-transform:uppercase; letter-spacing: -1px;}
h3 {font-size:30px; font-family: 'Arial'; letter-spacing: -1px;}
h4 {font-size:20px; font-family: 'Arial'; text-transform:uppercase;}
h5 {font-size:15px; font-family: 'Arial'; text-transform:uppercase;}
.heading_line {background-color: #f94e7c; width: 100px; height: 4px; margin-bottom: 50px;}
#contenidox {position: relative; width: 80%; margin-top: -90px; left:25%; right:20px;}
#contenidox2 {position: relative; width: 60%; margin-top: -90px; left:45%; right:20px;}
#clarito{ position:fixed; width:100%; height:14%; background-color:#FFF; z-index:500}

/* 2 - HEADER & NAV 
================================================== */


.logo {width: 350px; padding:0px 0;}
.logo img {margin-left:0px;}
header {background: url(../img/bg_pattern.jpg); position:fixed; right:0; left:0; z-index: 999;}
nav.main_nav {}
nav.main_nav ul {float: right; padding-top: 70px;}
nav.main_nav ul li {display: inline; padding-left:20px;}
nav.main_nav ul li a {font-weight: bold; font-size: 14px; text-transform: uppercase;}
nav.main_nav ul li a:hover {color: #f94e7c;}


/* 3 - ABOUT
================================================== */
#jmc {position: fixed;height:60px; width: 100%; top:90%; z-index:99999999; 
	}
#phone {position: fixed; right:0px; top:0%; z-index:99999998; float: left; 
	}
#phone2 {display:none	}
	

#about_container {
	margin-top: 50px;
}
#about_container h3 {font-weight: bold; color: #373f50; margin: 0;}
#about_container h3.uppercase {text-transform: uppercase;}
#about_container h3 span {color: #f94e7c;}
#about_container p {margin-bottom: 10px; }
.process_bubble {background-color: #e6e6e6; border-radius:100px; height: 100px; width: 100px; float: left; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(238, 238, 238, 0.5),0 1px 2px rgba(0, 0, 0, 0.1); margin:0 30px;}
.process_bubble p {text-align: center; padding-top: 40px; font-size:38px; color: #373f50; font-weight: bold;}

#about_container2 {
	margin-top: 50px;
}
/* 4 - SERVICES
================================================== */


#services_container {margin-top: 50px;}
#services_container h3 {text-transform: uppercase; font-weight: bold; color: #373f50;}
#services_container span {color: #f94e7c;}
#services_container p {margin-bottom: 20px;}
.service {text-align: center; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(238, 238, 238, 0.5),0 1px 2px rgba(0, 0, 0, 0.1); border-radius:200px; height: 350px; width: 350px;
background-color: #ececec; position:relative;}
.service img {padding-top: 0px;}
.service h5 {font-weight: bold; font-size:15px; color: #373f50;}
.service_caption {border-radius:30px; height: 50px; width: 150px; background-color: #f94e7c; position: absolute; top:0; 
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(241, 138, 165, 0.8),0 1px 2px rgba(0, 0, 0, 0.1);}
.service_caption p {text-align: center; color: #fff; font-weight: bold; font-size:13px; padding-top: 15px;}
.service_caption.bottom {top:80%; left:50%;}


/* 5 - PORTFOLIO
================================================== */


#portfolio {margin-top: 50px;}
#portfolio h3 {text-transform: uppercase; font-weight: bold; color: #373f50;}
#portfolio h3 span {color: #f94e7c;}
.pfolio_widget {background:url(../img/bg_pattern.jpg);}
.pfolio_widget_images {background-color: #fff; padding: 0 20px; padding-top: 20px;}
ul#filters img {margin-right: 30px;} 
.portfolio_container {background:url(../img/about_img.jpg) repeat-y;padding: 200px 0;}
.portfolio {margin-left: 0;}
.portfolio p {color: #e1e1e1;}
.picture {position: relative;}
.picture img {width: 100%; height: auto;}
.image-overlay-link,.image-overlay-zoom {height:100%;width: 100%;left: 0;top:-2px;position: absolute;z-index: 40;display: none;background-color: #222;background: rgba(0, 0, 0, 0.7);background-repeat: no-repeat;background-position: 50%;cursor: pointer;overflow:hidden;}
.image-overlay-link {background-image: url(../img/portfolio/plus_icon.png);}
.pfolio_item img {width: 100%}
.option-set { list-style: none;margin:30px 0;}
.option-set li { display:inline;}
.option-set li.filter a {background-color: #373f50; border-radius:2px;}
.option-set li a.datafilter.tooltip {margin-right: 20px;}
.option-set li a.datafilter.blue {background-color:#373f50;}
.option-set li a.datafilter.green {background-color:#236f2f;}
.option-set li a.datafilter.yellow {background-color:#ffaa31;}
.option-set li a {font-family:'Arial'; font-weight: bold; color:#fff; margin-right: 20px;
border-radius: 5px; -webkit-border-radius:2px; -moz-border-radius:2px; padding: 10px 20px; background-color: #fa2346; border-radius:100px;}
.pfolio_item {margin-bottom: 15px;}
.pfolio_desc {background-color: #f5f5f5; padding:10px 20px; margin: 0; display: block;
-webkit-box-shadow: 2px 2px 0px rgba(50, 50, 50, 0.10);
-moz-box-shadow:    2px 2px 0px rgba(50, 50, 50, 0.10);
box-shadow:         2px 2px 0px rgba(50, 50, 50, 0.10);
margin-bottom: 30px;
}
.pfolio_desc h4 {color: #393939; font-size:15px; font-weight: bold; margin: 0; padding-top: 10px; text-transform: uppercase; }
.pfolio_desc p {line-height: 20px;font-size:12px; color: #909090; font-style: italic;}
#portfolio_container {margin-top: 30px;}
.isotope-item {z-index: 2;}
.isotope-hidden.isotope-item {pointer-events: none;z-index: 1;}


/**** Isotope CSS3 transitions ****/


.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}


/* 6 - CONTACT
================================================== */

#contact_section {margin: 50px 0 50px 0;}
#contact_section h3 {text-transform: uppercase; font-weight: bold; color: #373f50;}
#contact_section h3 span {color: #f94e7c;}
#contact_section p.ctext {margin-bottom: 10px;}
form#contact-form input, textarea {
	background-color: #f6f6f6;
	border: 1px solid #dfdfdf;
	outline: none;
	border-radius: 2px;
	padding: 5px 5px;
	width: 30%;
}
form#contact-form textarea {padding: 10px 190px 30px 10px;}
form#contact-form input#submit {border-radius:4px; background-color: #373f50; color: #fff; font-weight: bold; padding: 8px 20px; text-transform: uppercase;}
.contact_img {widht:33% ; margin-top: 0px;}
.contact_img li{text-align: center; padding-top: 40px; font-size:38px; color: #373f50; font-weight: bold;}
.social_section {background-color: #f3f3f3; text-align: center; padding: 150px 0; margin-bottom: 50px;}
.social_section h2 {color: #373f50; text-transform: uppercase; font-size: 30px; font-weight: bold; padding-bottom: 10px;}
.social_section ul li {display: inline; padding-right: 10px;}


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


footer {background: url(../img/bg_pattern.jpg); padding: 30px 0 20px 0;}
footer p {color: #fff; font-size:12px;}
footer p a {color: #f94e7c;}


/* 8 - SWITCHER
================================================== */
/*

#switch {float:left;display:block;background:#fff;-moz-border-radius:0 10px 10px 0;-webkit-border-radius:0 10px 10px 0;border-radius:0 10px 10px 0;position:absolute;left:0;top:20%;padding:15px 20px 15px 10px;
border:1px solid #d7d7d7;}
#switch h4 {font-size:15px; color:#4d4d4d;margin-bottom: 10px;}
#switch ul li {font-size:12px; margin:5px; }
#switch ul li a {color:#fff;}
#show {position:absolute;left:0;top:20%;background:#fff;-moz-border-radius:0 10px 10px 0;-webkit-border-radius:0 10px 10px 0;border-radius:0 10px 10px 0;behavior:url(PIE.html);
padding:0px 20px 15px 10px; color: #000; border:1px solid #d7d7d7;}
#show h4, #hide {cursor:pointer;color: #4d4d4d; font-size:15px; margin-top: 20px; font-weight: bold; font-size:12px;}
#show h4 span,#hide span {font-weight:400;display:block;clear:both;}
h4#hide {margin-top: 30px; border-radius: 3px; background-color: #373f50; width: 100px; text-align: center; padding: 10px 5px; color: #eee; font-weight: bold; font-size:12px;}
ul.color {padding: 0; margin: 0;}
ul.color h5 {border-bottom:1px dotted #cecece; padding-bottom:10px; text-transform: uppercase;}
ul.color li {display: inline; line-height: 30px;}

*/
/* 9 - MEDIA QUERYS
================================================== */


/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */
/*
@media only screen and (min-width: 768px) and (max-width: 959px) {

.flex-caption span.caption-text-h1, .flex-caption span.caption-text-h2 {display: none;}
.flex-direction-nav .flex-next, .flex-direction-nav .flex-prev {top:65%;}
.about_process_img img {margin-top:100px;}
.service {width: 250px; height: 250px;}
.service img {padding-top: 80px;}
.service_caption {width: 100px; height: 100px;}
.service_caption p {padding-top: 35px; font-size:11px;}
form#contact-form textarea {width: 150px;}
.contact_img img {padding-top: 80px;}
.logo img {margin: 0;}
#jmc {position: fixed;height: 80px; width: 66%; right:-40px; top:150px; z-index:99999999; float: left; 
	}

}
*/

/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

@media only screen and (min-width: 0px) and (max-width: 480px)
 {
	 h3 {font-size:20px; font-family: 'Arial'; letter-spacing: -1px;}
#phone {display:none	}
#phone2 {display:block; position:fixed; max-width:50%; left:50%; z-index:99999}
#clarito{ position:fixed; width:120%; height:110px; left:-50px; background-color:#FFF; z-index:500}
p {font-family: 'Arial'; font-size:14px; color: #006; text-align:justify}
.logo {position:fixed; top:10px; width:50%; margin-left:auto; margin-right:auto; padding-left:inherit}
.logo img { width:200px;}
nav.main_nav { position:fixed; top:35px }
nav.main_nav ul {float: left; padding-top: 30px;}
nav.main_nav ul li {display: inline; padding-left:4px;}
nav.main_nav ul li a {font-weight: bold; font-size: 11px; text-transform: uppercase;}
nav.main_nav ul li a:hover {color: #f94e7c;}
#contenidox {position: relative; width: 100%; margin-top: 0px; left:0%; right:20px;	}
#contenidox2 {position: relative; width: 100%; margin-top: 0px; left:0%; right:20px;	}

.process_bubble {background-color: #e6e6e6; border-radius:60px; height: 60px; width: 60px; float: left; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(238, 238, 238, 0.5),0 1px 2px rgba(0, 0, 0, 0.1); margin:0 20px;}
.process_bubble p {text-align: center; padding-top: 20px; font-size:25px; color: #373f50; font-weight: bold;}



.service { margin-left:auto; margin-right:auto; text-align: center; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(238, 238, 238, 0.5),0 1px 2px rgba(0, 0, 0, 0.1); border-radius:150px; height: 250px; width: 250px;
background-color: #ececec; position:relative;}
.service img { width:200px; padding-top: 0px;}

.service_caption {border-radius:20px; height: 30px; width: 120px; background-color: #f94e7c; position: absolute; top:0; 
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(241, 138, 165, 0.8),0 1px 2px rgba(0, 0, 0, 0.1);}
  .service_caption p {text-align: center; color: #fff; font-weight: bold; font-size:13px; padding-top: 5px;}
.service_caption.bottom {top:70%; left:50%;}
body {padding: 0 20px;}
#about_container2{ margin-top:100px;}
}
@media only screen and (min-width: 481px) and (max-width: 800px) {
#phone { position:fixed; width:500px; margin-left: auto; margin-right:auto;}
#clarito{ position:fixed; width:120%; height:120px; left:-50px; background-color:#FFF; z-index:500}
p {font-family: 'Arial'; font-size:14px; color: #006;}
	.logo {position:fixed; top:55px; width:250px	}
.logo img { margin-bottom:50px; margin-left: 0px;}
#contenidox {position: relative; width: 100%; margin-top: 0px; left:0%; right:20px;	}
#contenidox2 {position: relative; width: 100%; margin-top: 0px; left:0%; right:20px;	}


.process_bubble {
	background-color: #e6e6e6;
	border-radius: 100px;
	height: 100px;
	width: 100px;
	float: left;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(238, 238, 238, 0.5),0 1px 2px rgba(0, 0, 0, 0.1);
	margin: 0 30px;
}
nav.main_nav ul {float: right; padding-top: 70px;}
nav.main_nav {position: fixed; background:#FFF; width:50%;  margin-top:-20px; left:50%;}
nav.main_nav ul li a {font-weight: bold; font-size: 14px; line-height:0px; letter-spacing:-1px; text-transform: uppercase;}

body {padding: 0 20px;}
#about_container2{ margin-top:150px;}

/*.contact_img img {display:none;}*/
.social_section ul li {line-height: 50px;}
.service { text-align: center; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(238, 238, 238, 0.5),0 1px 2px rgba(0, 0, 0, 0.1); border-radius:auto; height: auto; width: auto;
background-color: #ececec; position:relative;}


}
@media only screen and (min-width: 801px) and (max-width: 900px) {
#phone { position:fixed; width:500px; margin-left: auto; margin-right:auto;}
#clarito{ position:fixed; width:120%; height:100px; left:-50px; background-color:#FFF; z-index:500}
p {font-family: 'Arial'; font-size:14px; color: #006;}
	.logo {position:fixed; left:10px ; top:5px; width:300px	}
.logo img {}
#contenidox {position: relative; width: 100%; margin-top: 0px; left:0%; right:20px;	}
#contenidox2 {position: relative; width: 100%; margin-top: 0px; left:0%; right:20px;	}

.process_bubble {background-color: #e6e6e6; border-radius:100px; height: 100px; width: 100px; float: left; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(238, 238, 238, 0.5),0 1px 2px rgba(0, 0, 0, 0.1); margin:0 30px;}
nav.main_nav ul {float: right; padding-top: 70px;}
nav.main_nav {position: fixed; background:#FFF; width:50%;  margin-top:-20px; left:50%;}
nav.main_nav ul li a {font-weight: bold; font-size: 14px; line-height:0px; letter-spacing:-1px; text-transform: uppercase;}

body {padding: 0 20px;}
#about_container2{ margin-top:100px;
}

/*.contact_img img {display:none;}*/
.social_section ul li {line-height: 50px;}
.service { text-align: center; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(238, 238, 238, 0.5),0 1px 2px rgba(0, 0, 0, 0.1); border-radius:200px; height: 300px; width: 300px;
background-color: #ececec; position:relative;}


}

@media only screen and (min-width: 901px) and (max-width: 3000px) {
#phone { position:fixed; width:500px; margin-left: auto; margin-right:auto;}
#clarito{ position:fixed; width:120%; height:100px; left:-50px; background-color:#FFF; z-index:500}
p {font-family: 'Arial'; font-size:14px; color: #006;}
	.logo {position:fixed; left:10px ; top:5px; width:300px	}
.logo img {}
#contenidox {position: relative; width: 60%; margin-top: -90px; left:45%; right:20px;}
#contenidox2 {position: relative; width: 40%; margin-top: -90px; left:65%; right:20px;}

.process_bubble {background-color: #e6e6e6; border-radius:100px; height: 100px; width: 100px; float: left; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(238, 238, 238, 0.5),0 1px 2px rgba(0, 0, 0, 0.1); margin:0 0px;}
.process_bubble p {text-align: center; padding-top: 40px; font-size:38px; color: #373f50; font-weight: bold;}

nav.main_nav ul {float: right; padding-top: 70px;}
nav.main_nav {position: fixed; background:#FFF; width:50%;  margin-top:-20px; left:50%;}
nav.main_nav ul li a {font-weight: bold; font-size: 14px; line-height:0px; letter-spacing:-1px; text-transform: uppercase;}

body {padding: 0 10px;}

#about_container2{ margin-top:100px;
}

/*.contact_img img {display:none;}*/
.social_section ul li {line-height: 50px;}
.service { text-align: center; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(238, 238, 238, 0.5),0 1px 2px rgba(0, 0, 0, 0.1); border-radius:200px; height: 300px; width: 300px;
background-color: #ececec; position:relative;}


}

/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

/*@media only screen and (max-width: 400px) {

nav.main_nav {position: absolute;left:200px;}
header {height: 170px}
footer p {margin-left: 20px;}
.option-set li.filter a {line-height: 100px;}
.service {margin-bottom: 50px; margin-left: 0;}


}*/