/* 
############################################
FONTS / SIZES / COLORS
############################################ 
*/
@font-face {
    font-family: 'metrofontmetrofont';
    src: url('../fonts/metro-webfont2.eot');
    src: url('../fonts/metro-webfont2.eot?#iefix') format('embedded-opentype'),
         url('../fonts/metro-webfont2.woff') format('woff'),
         url('../fonts/metro-webfont2.ttf') format('truetype'),
         url('../fonts/metro-webfont2.svg#metrofontmetrofont') format('svg');
    font-weight: normal;
    font-style: normal;

}

.content h1 {
	font-family:"Open Sans";
	font-size:72px ;
	font-weight:300;
	color:#222;
	line-height:78px;		
}

.content h2 {
	font-family:"Open Sans";
	font-size:52px ;
	font-weight:300;
	color:#222;
	line-height:60px;		
}
.content h3 {
	font-family:"Open Sans";
	font-size:30px ;
	font-weight:300;
	color:#222;
	line-height:40px;		
}
.content h4 {
	font-family:"Open Sans";
	font-size:24px ;
	font-weight:300;
	color:#222;
	line-height:34px;	
}
.content h5 {
	font-family:"Open Sans";
	font-size:18px ;
	font-weight:300;
	color:#222;
	line-height:26px;
}
.content h6 {
	font-family:"Open Sans";
	font-size:14px ;
	font-weight:300;
	color:#222;
	line-height:24px;
}

.content p {
	font-family:"Open Sans";
	font-size:14px ;
	font-weight:300;
	color:#222;
	line-height:24px;
}
.content p::selection {	background:#000; color:#fff;}
.content p::-moz-selection  {	background:#000; color:#fff;}


/*TEXT ATTRIBUTES*/
.caps{text-transform:uppercase;}
.normal{font-weight:400 !important;}
.bold{font-weight:700 !important;}
.light{font-weight:300 !important;}
.condensed{letter-spacing:-2px;}
.cursor{ cursor: pointer; }
.pointer{ cursor: pointer; }

/*ROUND METRO FONTS HOVER*/
.metrofont{font-family:metrofontmetrofont; font-size:130px; color:#fff;}
a.metrofont { text-decoration:none; color:#fff; -webkit-transition:.5s;-moz-transition:.5s;transition:.5s}
a:hover.metrofont{color:#fff;}/*003366*/

.metrofont2{font-family:metrofontmetrofont; font-size:36px; color:#000; }
a.metrofont2 { text-decoration:none; color:#000; }
a.metrofont2:hover{color:#fff;}







/*FONTS*/

.metroft{font-family:metrofontmetrofont; }
.opensans{font-family:"Open Sans", Arial, Sans-Serif; }


/*WHITE TEXT*/
.white{color:#fff;}
.dark{color:#444;}
.black{color:#222;}
.azul{color:#0000CD;}
.gray{color:#666;}
.lightgray{color:#999;}
.lightpink{color:#ff9999;}
.lightpink a{color:#ffff99;}
.boxwhite{color:#fff;}

/*ANCHOR LINK COLORS*/
a.awhite{color:#fff; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
a:hover.awhite{color:#fff;}

a.apink{color:#e10044; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
a:hover.apink{color:#7CFC00;}

a.alightpink{color:#ff9999; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
a:hover.alightpink{color:#fff;}

a.agray{color:#999999; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
a:hover.agray{color:#fff;}

a.agray2{color:#999999; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
a:hover.agray2{color:#222;}








/*TEXT SIZES*/
.size10{font-size:10px;}
.size12{font-size:12px; line-height:22px;}
.size14{font-size:14px; line-height:24px;}
.size16{font-size:16px; line-height:21px;}
.size18{font-size:18px; line-height:26px;}
.size20{font-size:20px;}
.size21{font-size:21px;}
.size22{font-size:22px;}
.size24{font-size:24px; line-height:30px;}
.size26{font-size:26px;}
.size28{font-size:28px;}
.size30{font-size:30px; line-height:36px;}
.size32{font-size:32px; line-height:36px;}
.size34{font-size:34px; line-height:36px;}
.size36{font-size:36px;}
.size38{font-size:38px;}
.size40{font-size:40px;}
.size42{font-size:42px;}
.size44{font-size:44px;}
.size46{font-size:46px;}
.size48{font-size:48px;}
.size50{font-size:50px;}
.size60{font-size:60px; line-height:60px;}
.size72{font-size:72px; line-height:50px;}

	 
	 
/*COLORS*/
.cblue{color:#0077b2;}
.cdarkblue{color:#002e50;}
.cpink{color:#cc3366;}

	 
/*COLOR ICONO dentro del circulo en SERVICIOS*/
.cpink2{color:#fff;}



/* 
#################################################
BACKGROUND COLORS
#################################################
*/
.bgblack{background:#000; color:#fff;}
.bgblue{background:#3399cc; color:#fff;}
.bgpink{background:#bd3055 !important;}

	
	
	
/* 
#################################################
INPUTS FIELDS
#################################################
*/	

input.square{
border:0px;
padding:20px 5px 20px 5px;
width:50px;
-webkit-appearance: none;  -moz-appearance:none;
}

input.square2	    {padding:3px; width:18px;cursor:pointer; border:3px solid #666; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;-webkit-appearance: none;  -moz-appearance:none;}
input.square2:hover{padding:3px; width:18px;cursor:pointer; border:3px solid #fff;}

input.cinput		   {height:16px;padding:5px;width:50px;background:#222;color:#999;border:1px solid #333; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;-webkit-appearance: none;  -moz-appearance:none;}
input.cinput:hover{height:16px;padding:5px;width:50px;background:#222;color:#fff;border:1px solid #555;}

input.contact		   { width:100%; padding:15px 0px 15px 11px; border:2px solid #002e50; color:white; background:#002e50; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;-webkit-appearance: none;  -moz-appearance:none;}
input.contact:hover{border:2px solid #299fd4; }

textarea.ctextarea		   { font-family:"Open Sans"; font-size:14px; width:100%; height:110px; resize: none; vertical-align:top; padding:15px 0px 15px 11px; border:2px solid #002e50; color:white; background:#002e50; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;-webkit-appearance: none;  -moz-appearance:none; overflow: auto;}
textarea.ctextarea:hover{border:2px solid #299fd4; }

input.cinput2{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:300;color:#fff;border:3px solid #2da5da;padding:10px 20px 10px 20px; background:#2da5da;-webkit-transition:.5s;-moz-transition:.5s;transition:.5s; -webkit-appearance: none;  -moz-appearance:none;}
input.cinput2:hover{color:#fff;border:3px solid #3ec4ff;background:#3ec4ff;padding:10px 20px 10px 20px; cursor:pointer;}



input.login1{
padding:5px;
width:200px;
background:#fff;
color:#999;
border:1px solid #fff; 
-webkit-transition:.2s;-moz-transition:.2s;transition:.2s;
-webkit-appearance: none;  -moz-appearance:none;
}
input.login1:hover{
padding:5px;
background:#fff;
color:#666;
border:1px solid #fff;}

input.cinput3{
font-family:"Open Sans", Sans-serif;
font-size:14px;
font-weight:300;
color:#fff;
border:3px solid #2da5da;
padding:1px; 
background:#2da5da;
-webkit-transition:.5s;-moz-transition:.5s;transition:.5s; 
-webkit-appearance: none;  -moz-appearance:none;

margin-right:-2px;
margin-top:-29px;
}

input.cinput3:hover{
color:#fff;
border:3px solid #3ec4ff;
background:#3ec4ff;
padding:1px; 
cursor:pointer;

}

/* for lightbox */

input.contact2 { 
	width:100%; 
	padding:15px 0px 15px 11px; 
	border:2px solid #230324; 
	color:#999;
	background:#230324; 
	-webkit-transition:.2s;
	-moz-transition:.2s;
	transition:.2s;
	-webkit-appearance: none;  -moz-appearance:none;
	}
input.contact2:hover{
	border:2px solid #fff; 
	color:#fff;
	}

textarea.ctextarea2 { 
	font-family:"Open Sans"; 
	font-size:14px; 
	width:100%; 
	height:110px; 
	resize: none; 
	vertical-align:top; 
	background:#230324; 
	padding:15px 0px 15px 11px; 
	border:2px solid #230324; 
	color:#999; 
	-webkit-transition:.2s;
	-moz-transition:.2s;
	transition:.2s;
	-webkit-appearance: none;  -moz-appearance:none;
	overflow: auto;
	}
textarea.ctextarea2:hover{
	border:2px solid #fff; 
	color:#fff;
	}

.select2 select {
   width: 314px;
   background: transparent;
   padding: 13px;
   font-size: 14px;
   border: 2px solid #230324;
   height: 52px;
   -webkit-appearance: none;
   color:#999;
	} 
.select2 select:hover {   
	border: 2px solid #fff; 
	color:#fff;}
.select2 option {
   width: 260px;
   padding: 15px;
   font-size: 14px;
   -webkit-appearance: none;
   color:#8f7590;
   overflow:hidden;
	} 


.select2{
   width: 314px;
   height: 52px;
   overflow: hidden;
   background: #230324;
}

.browsebtn{
	width:182px; 
	padding:15px 0px 15px 11px; 
	color:#999;
	background:#230324; 
	text-indent:-88px;
	float:right;
	height:23px;
	margin-top:-1px;
	margin-right:-14px;
	-webkit-transition:.2s;
	-moz-transition:.2s;
	transition:.2s;	
	border:0px;
}
.browsebtn2{
	width:182px; 
	padding:15px 0px 15px 11px; 
	color:#999;
	background:#230324; 
	text-indent:-88px;
	float:right;
	height:23px;
	margin-top:-1px;
	margin-right:-14px;
	-webkit-transition:.2s;
	-moz-transition:.2s;
	transition:.2s;	
	border:0px;
}

.buttonupload {
	padding: 15px;
	background: #339933;
	color: #fff;
	width:90px;
	float:left;
	-webkit-transition:.2s;
	-moz-transition:.2s;
	transition:.2s;	
}

.buttonupload:hover {
	background: #33cc33;
	color: #fff;	
	cursor: pointer;
}		



input[type=search] { 
	color: #666;  
	text-align: left;

	display: block; 
	width: 200px; 
	height: 36px; 
    padding:0px;
	word-spacing: 20px;       
	border:0px;
	text-indent:10px;
	-webkit-appearance: none;  -moz-appearance:none;
}

	
	
	
/* 
#################################################
BUTTONS
#################################################
*/

/*ROUNDED*/
a.roundbtnblue{background:#0077b2; color:#fff; padding:15px 30px 15px 18px; border:1px solid #00547e; 
-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; 
-webkit-transition:.6s;-moz-transition:.6s;transition:.6s;
-moz-box-shadow:    inset 0px 1px 1px 0px  #0286c8;
-webkit-box-shadow: inset 0px 1px 1px 0px  #0286c8;
box-shadow:         inset 0px 1px 1px 0px  #0286c8;
}
a.roundbtnblue:hover{background:#f9c037; color:#000; border:1px solid #f9c037; 
-moz-box-shadow:    inset 0px 1px 0px 0px  #ffdc87;
-webkit-box-shadow: inset 0px 1px 0px 0px  #ffdc87;
box-shadow:         inset 0px 1px 0px 0px  #ffdc87;
}
a.roundbtnblue span{font-family:'metrofontmetrofont'; font-size:23px;}

/*SQUARE*/
a.squarebtnblue{background:#0077b2; color:#fff; padding:15px 30px 15px 18px; border:1px solid #00547e; 
-webkit-transition:.6s;-moz-transition:.6s;transition:.6s;
-moz-box-shadow:    inset 0px 1px 1px 0px  #0286c8;
-webkit-box-shadow: inset 0px 1px 1px 0px  #0286c8;
box-shadow:         inset 0px 1px 1px 0px  #0286c8;
}
a.squarebtnblue:hover{background:#f9c037; color:#000; border:1px solid #f9c037; 
-moz-box-shadow:    inset 0px 1px 0px 0px  #ffdc87;
-webkit-box-shadow: inset 0px 1px 0px 0px  #ffdc87;
box-shadow:         inset 0px 1px 0px 0px  #ffdc87;
}
a.squarebtnblue span{font-family:'metrofontmetrofont'; font-size:23px;}


/* boton */
/*METRO BUTTONS*/

a.metrobutton{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:300;color:#444;border:3px solid #444;padding:10px 70px 10px 70px;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}

a.metrobutton:hover{color:#fff;border:3px solid #444;background:#444;padding:13px 80px 13px 80px;}




a.metrobuttonsmall{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:300;color:#fff;border:3px solid #fff;padding:10px 20px 10px 20px;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
a.metrobuttonsmall:hover{color:#230324;border:3px solid #fff;background:#fff;padding:10px 20px 10px 20px;}

a.metrobuttonsmallblack{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:300;color:#fff;border:3px solid #000;padding:10px 20px 10px 20px; background:#000;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.metrobuttonsmallblack:hover{color:#fff;border:3px solid #F9C037;background:#F9C037;padding:10px 20px 10px 20px; cursor:pointer;}

a.metrobuttonsmallyellow{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:300;color:#fff;border:3px solid #F9C037;padding:10px 20px 10px 20px; background:#F9C037;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.metrobuttonsmallyellow:hover{color:#fff;border:3px solid #EF0E52;background:#EF0E52;padding:10px 20px 10px 20px; cursor:pointer;}

a.metrobuttonsmallgreen{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:300;color:#fff !important;border:3px solid #4eaf4e;padding:10px 20px 10px 20px; background:#4eaf4e; text-transform:uppercase; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.metrobuttonsmallgreen:hover{color:#fff !important;border:3px solid #58b358;background:#58b358; padding:10px 20px 10px 20px; cursor:pointer;}

a.btnsmallblack{width:75px !important; height:15px !important; box-shadow:none !important; font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:300;color:#fff;border:0px solid #000;padding:8px 10px 8px 10px !important; background:#222;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.btnsmallblack:hover{color:#fff;border:0px solid #000;background:#987531;padding:5px 10px 5px 10px; cursor:pointer;}

input.btnsmallblack{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:300;color:#fff;border:0px solid #000;padding:5px 10px 5px 10px; background:#222;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
input.btnsmallblack:hover{color:#fff;border:0px solid #000;background:#987531;padding:5px 10px 5px 10px; cursor:pointer;}

input.metrobuttonsmall{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:300;color:#fff;border:3px solid #fff;padding:10px 20px 10px 20px; background:transparent;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
input.metrobuttonsmall:hover{color:#230324;border:3px solid #fff;background:#fff;padding:10px 20px 10px 20px; cursor:pointer;}


/*BUTTONS FROM TYPOGRAPHY*/
a.btn-black{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:300;color:#fff;border:3px solid #222;padding:10px 20px 10px 20px; background:#222;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.btn-black:hover{color:#222;border:3px solid #efefef;background:#fff;padding:10px 20px 10px 20px; cursor:pointer;}

a.btn-white{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:300;color:#222;border:3px solid #efefef;padding:10px 20px 10px 20px; background:#fff;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.btn-white:hover{color:#fff;border:3px solid #222;background:#222;padding:10px 20px 10px 20px; cursor:pointer;}

a.btn-dark{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:300;color:#222;border:3px solid #efefef;padding:10px 20px 10px 20px; background:#fff;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.btn-dark:hover{color:#222;border:3px solid #222;background:#fff;padding:10px 20px 10px 20px; cursor:pointer;}

a.btn-gray{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:300;color:#fff;border:3px solid #999;padding:10px 20px 10px 20px; background:#999;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.btn-gray:hover{color:#fff;border:3px solid #ccc;background:#ccc;padding:10px 20px 10px 20px; cursor:pointer;}

a.btn-yellow{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:300;color:#fff;border:3px solid #F9C037;padding:10px 20px 10px 20px; background:#F9C037;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.btn-yellow:hover{color:#fff;border:3px solid #ffcc33;background:#ffcc33;padding:10px 20px 10px 20px; cursor:pointer;}

a.btn-pink{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:300;color:#fff;border:3px solid #EF0E52;padding:10px 20px 10px 20px; background:#EF0E52;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.btn-pink:hover{color:#fff;border:3px solid #ff0066;background:#ff0066;padding:10px 20px 10px 20px; cursor:pointer;}

a.btn-green{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:300;color:#fff;border:3px solid #4eaf4e;padding:10px 20px 10px 20px; background:#4eaf4e; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.btn-green:hover{color:#fff;border:3px solid #66cc66;background:#66cc66; padding:10px 20px 10px 20px; cursor:pointer;}

a.btn-blue{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:300;color:#fff;border:3px solid #3399cc;padding:10px 20px 10px 20px; background:#3399cc; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.btn-blue:hover{color:#fff;border:3px solid #33ccff;background:#33ccff; padding:10px 20px 10px 20px; cursor:pointer;}



a.btn-small-black{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:300;color:#fff;border:3px solid #222;padding:5px 10px 5px 10px; background:#222;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.btn-small-black:hover{color:#222;border:3px solid #efefef;background:#fff;padding:5px 10px 5px 10px; cursor:pointer;}

a.btn-small-white{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:300;color:#222;border:3px solid #efefef;padding:5px 10px 5px 10px; background:#fff;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.btn-small-white:hover{color:#fff;border:3px solid #222;background:#222;padding:5px 10px 5px 10px; cursor:pointer;}

a.btn-small-dark{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:300;color:#222;border:3px solid #efefef;padding:5px 10px 5px 10px; background:#fff;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.btn-small-dark:hover{color:#222;border:3px solid #222;background:#fff;padding:5px 10px 5px 10px; cursor:pointer;}

a.btn-small-gray{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:300;color:#fff;border:3px solid #999;padding:5px 10px 5px 10px; background:#999;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.btn-small-gray:hover{color:#fff;border:3px solid #ccc;background:#ccc;padding:5px 10px 5px 10px; cursor:pointer;}

a.btn-small-yellow{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:300;color:#fff;border:3px solid #F9C037;padding:5px 10px 5px 10px; background:#F9C037;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.btn-small-yellow:hover{color:#fff;border:3px solid #ffcc33;background:#ffcc33;padding:5px 10px 5px 10px; cursor:pointer;}

a.btn-small-pink{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:300;color:#fff;border:3px solid #EF0E52;padding:5px 10px 5px 10px; background:#EF0E52;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.btn-small-pink:hover{color:#fff;border:3px solid #ff0066;background:#ff0066;padding:5px 10px 5px 10px; cursor:pointer;}

a.btn-small-green{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:300;color:#fff;border:3px solid #4eaf4e;padding:5px 10px 5px 10px; background:#4eaf4e; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.btn-small-green:hover{color:#fff;border:3px solid #66cc66;background:#66cc66; padding:5px 10px 5px 10px; cursor:pointer;}

a.btn-small-blue{font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:300;color:#fff;border:3px solid #3399cc;padding:5px 10px 5px 10px; background:#3399cc; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s; -webkit-appearance: none;  -moz-appearance:none;}
a.btn-small-blue:hover{color:#fff;border:3px solid #33ccff;background:#33ccff; padding:5px 10px 5px 10px; cursor:pointer;}

/*NEXT PREV BUTTONS*/

a.btn_prev{background: #987531;padding:8px 5px 8px 5px;color:#fff;border-right:1px solid #7b5f28; 
border-radius: 2px 0px 0px 2px; -moz-border-radius:2px 0px 0px 2px; -webkit-border-radius:2px 0px 0px 2px;
-webkit-transition:.5s;-moz-transition:.5s;transition:.5s;}
a.btn_prev:hover{background: #b99143; color:#7b5f28; text-shadow: 0px 1px 0px #cca965;}

a.btn_thumb{background: #987531;padding:8px 5px 8px 5px;color:#fff;
-webkit-transition:.5s;-moz-transition:.5s;transition:.5s;}
a.btn_thumb:hover{background: #b99143; color:#7b5f28; text-shadow: 0px 1px 0px #cca965;}

a.btn_next{background: #987531;  padding:8px 5px 8px 5px;color:#fff;border-left:1px solid #7b5f28;
border-radius: 0px 2px 2px 0px; -moz-border-radius:0px 2px 2px 0px; -webkit-border-radius:0px 2px 2px 0px;
-webkit-transition:.5s;-moz-transition:.5s;transition:.5s;}
a.btn_next:hover{background: #b99143; color:#7b5f28; text-shadow: 0px 1px 0px #cca965;}

	
	
/* 
#################################################
POSITIONING ELEMENTS MARGINS PADDINGS CONTAINERS
#################################################
*/
	
	 
.left{ float:left;}
.right{ float:right;}
.clearfix{clear:both;}
.relative{position:relative;}
.absolute{position:absolute;}
.fixed{position:fixed;}
.center{margin:0 auto; text-align:center;}
.textleft{text-align:left;}
.textright{text-align:right;}
.block{display:block;}
.none{display:none;}
.inline{display:inline;}


/*margins*/
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.ml25{margin-left:25px;}
.ml30{margin-left:30px;}
.ml35{margin-left:35px;}
.ml40{margin-left:40px;}

.ml1{margin-left:-1px;}
.ml-5{margin-left:-5px;}
.ml-10{margin-left:-10px;}
.ml-15{margin-left:-15px;}
.ml-20{margin-left:-20px;}
.ml-25{margin-left:-25px;}
.ml-30{margin-left:-30px;}
.ml-35{margin-left:-35px;}
.ml-40{margin-left:-40px;}
.ml-45{margin-left:-45px;}
.ml-50{margin-left:-50px;}

.ml10{margin-left:10px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.ml40{margin-left:40px;}
.ml50{margin-left:50px;}

.mr10{margin-right:10px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}

.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}
.mt60{margin-top:60px;}

.mt-5{margin-top:-5px;}
.mt-10{margin-top:-10px;}
.mt-20{margin-top:-20px;}
.mt-30{margin-top:-30px;}
.mt-40{margin-top:-40px;}
.mt-50{margin-top:-50px;}
.mt-60{margin-top:-60px;}

.mb5{margin-bottom:5px;}
.mb30{margin-bottom:30px;}





/*paddings*/
.p10 {padding:10px;}
.p20 {padding:20px;}
.p30 {padding:30px;}
.p40 {padding:40px;}
.p50 {padding:50px;}


.pt5{padding-top:5px;}
.pt10{padding-top:10px;}
.pt15{padding-top:15px;}
.pt20{padding-top:20px;}
.pt25{padding-top:25px;}
.pt30{padding-top:30px;}
.pt35{padding-top:35px;}
.pt40{padding-top:40px;}
.pt45{padding-top:45px;}
.pt50{padding-top:50px;}
.pt55{padding-top:55px;}
.pt60{padding-top:60px;}
.pt70{padding-top:70px;}
.pt80{padding-top:80px;}
.pt90{padding-top:90px;}
.pt100{padding-top:100px;}
.pt120{padding-top:120px;}
.pt130{padding-top:130px;}
.pt140{padding-top:140px;}
.pt150{padding-top:150px;}
.pt160{padding-top:160px;}
.pt170{padding-top:170px;}
.pt180{padding-top:180px;}
.pt190{padding-top:190px;}
.pt200{padding-top:200px;}



.pl30{padding-left:30px;}
.pl60{padding-left:60px;}

/*z-index*/
.z-10{z-index:-10;}
.z10{z-index:10;}
.z100{z-index:100;}
.z1000{z-index:1000;}
.z10000{z-index:10000;}

/*borders*/
.btrl1{
border-top:1px solid #e5e5e5;
border-right:1px solid #e5e5e5;
border-left:1px solid #e5e5e5;}
.btr1{
border-top:1px solid #e5e5e5;
border-right:1px solid #e5e5e5;
}


/*Lines*/
.line01{margin:0px;padding:0px;height:0px;width:100%;background:#ef0e52; margin-top:-26px;}

.line02{margin:0px;padding:0px;height:0px;width:100%;bott margin-top:-26px;}



/*widths & heights*/
.h10{height:10px;}
.h20{height:20px;}
.h30{height:30px;}
.h40{height:40px;}
.h50{height:50px;}
.h60{height:60px;}
.h70{height:70px;}
.h80{height:80px;}
.h90{height:90px;}
.h100{height:100px;}
.h150{height:150px;}
.h200{height:200px;}
.h250{height:250px;}
.h300{height:300px;}
.h400{height:400px;}
.h450{height:450px;}
.h470{height:470px;}
.h500{height:500px;}
.h570{height:570px;}

.w10{width:10px;}
.w20{width:20px;}
.w30{width:30px;}
.w40{width:40px;}
.w50{width:50px;}
.w60{width:60px;}
.w70{width:70px;}
.w80{width:80px;}
.w90{width:90px;}
.w100{width:100px;}
.w110{width:110px;}
.w120{width:120px;}
.w130{width:130px;}
.w140{width:140px;}
.w150{width:150px;}
.w160{width:160px;}
.w170{width:170px;}
.w180{width:180px;}
.w190{width:190px;}
.w200{width:200px;}

.w10pcent{width:10%;}
.w15pcent{width:15%;}
.w20pcent{width:20%;}
.w25pcent{width:25%;}
.w30pcent{width:30%;}
.w35pcent{width:35%;}
.w40pcent{width:40%;}
.w45pcent{width:45%;}
.w50pcent{width:50%;}
.w55pcent{width:55%;}
.w60pcent{width:60%;}
.w65pcent{width:65%;}
.w70pcent{width:70%;}
.w75pcent{width:75%;}
.w80pcent{width:80%;}
.w85pcent{width:85%;}
.w90pcent{width:90%;}
.w95pcent{width:95%;}
.w100pcent{width:100%;}

.w200{width:200px;}

.mh100{height:100px; border:0px solid black; display:block;}


/*Absolute/Relative positions*/
.pos1{position:absolute; left:10px;}

.l10{left:5px;}
.l10{left:10px;}
.l15{left:15px;}
.l20{left:20px;}
.l25{left:25px;}
.l30{left:30px;}

.t10{top:5px;}
.t10{top:10px;}
.t15{top:15px;}
.t20{top:20px;}
.t25{top:25px;}
.t30{top:30px;}
.t40{top:40px;}
.t50{top:50px;}


.b-5{bottom:-5px;}
.b-10{bottom:-10px;}
.b-20{bottom:-20px;}



/*Circles COLOR CIRCULO DENTRO DE SERVICIOS*/

.circle{
width:70px;
height:70px;
background:#0077b2;
border-radius: 100px; 
-moz-border-radius:100px; 
-webkit-border-radius:100px;
}



/*
##########################
COLUMNS
##########################
*/
.fullwidth{width:100%;}

.onethird{float:left;margin-right:30px;width:346px;}
.onethirdlast{float:right;width:346px;}

.twothirds{float:left; width:722px;}
.twothirdslast{float:right; width:722px;}

.onefourth{float:left; margin-right:30px; width:252px;}
.onefourthlast{float:right; width:252px;}

.twofourths{float:left; margin-right:30px;  width:535px;}
.twofourthslast{float:right; width:535px;}
.threefourths{float:left; width:818px;}
.threefourthslast{float:right; width:818px;}


/*
##########################
	CUSTOM DIMENSIONS
##########################
*/

.width01{width:215px;}
.width02{width:118px;height:118px;}
.width03{width:32px !important;height:32px !important;}
.width04{width:560px; height:303px;}



.cml{margin-left:50px;}/*custom margin left*/

.height01{ height:60px;}
.height02{min-height:540px;}
.height03{min-height:350px;}
.height04{padding:10px; height:600px;}
.font01{ font-size:72px; }
.font02{ font-size:30px; }
iframe.iframe1{width:100%; height:185px;}
iframe.iframe2{width:100%; height:685px;}
iframe.iframe3{width:100%; height:550px;}


/*containers*/
.cbox{
width:355px;
border:0px solid white;
}





/* PARALLAX CLASSES & POSITIONS*/
#green { 
	background: url('../images/desk.png') 50% 0px no-repeat fixed; 
	height:840px; 
	margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    box-shadow: 0 0 50px rgba(0,0,0,0.3);
}
#green article { background: url("../images/pencil.png") no-repeat scroll center 400px transparent; position: absolute; text-indent: -9999px; top: 0px; left:400px; height: 840px; width: 100%; border:0px solid white;}
#green em { background: url("../images/eraser.png") no-repeat scroll center 400px transparent; position: absolute; text-indent: -9999px; top: 0px; left:-170px; height: 840px; width: 100%; border:0px solid white;}
#green li { background: url("../images/colorguide.png") no-repeat scroll center 400px transparent; position: absolute; text-indent: -9999px; top: 0px; left:-300px; height: 840px; width: 100%; border:0px solid white;}

#orange2 { 
	background: url('../images/office.png') 50% 0px no-repeat fixed; 
	height:990px; 
	margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
  /*box-shadow: 0 0 50px rgba(0,0,0,0.3);*/
}






/* OPEN CLOSE SIDE MENU*/
.togglemenu{
float:left; position:fixed; display:block; background:#333; padding:10px 10px 10px 10px; color:white; top:161px; z-index:999; border:1px solid #333;
-webkit-transition:.2s;-moz-transition:.2s;transition:.2s
}
.togglemenu a{color:white;}
.togglemenu:hover{background:#339933; padding:10px 10px 10px 15px; border:1px solid #009900;}
.togglemenu:hover a{color:#fff;}
.togglemenu span{ width:31px; height:30px; background:url('../images/colors.png') no-repeat; display:block;}

.togglemenu2{
float:left; position:fixed; display:block; background:#111; padding:20px; color:white; top:216px; z-index:999; border:1px solid #222;
-webkit-transition:.2s;-moz-transition:.2s;transition:.2s
}
.togglemenu2 a{color:white;}
.togglemenu2:hover{background:#339933; border:1px solid #009900;}
.togglemenu2:hover a{color:#fff;}





/* TIPSY Tooltip CSS*/

.tipsy { padding: 5px; font-size: 11px;  position: absolute; z-index: 9999999999; font-family:Arial; }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: #3399CC; color: #fff; max-width: 200px; text-align: center; }
.tipsy-inner { border-radius: 0px; -moz-border-radius:0px; -webkit-border-radius:0px; }
.tipsy-arrow { position: absolute; background: url('../images/tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }





/* 
#################################################
MENU SQUARE WITH IMAGES
#################################################
*/
	

ul.sdt_menu{
	margin:0;
	padding-top:22px;
	list-style: none;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	font-size:14px;
	width:1100px;
	position:absolute;
	
}
ul.sdt_menu a{
	text-decoration:none;
	outline:none;
}
ul.sdt_menu li{
	float:left;
	width:168px;
	height:84px;
	position:relative;
	cursor:pointer;
}
ul.sdt_menu li > a{
	position:absolute;
	top:0px;
	left:0px;
	width:168px;
	height:84px;
	z-index:12;
	background:transparent url(../images/overlay.png) no-repeat bottom right;
	/*
	-moz-box-shadow:0px 0px 1px #999 inset;
	-webkit-box-shadow:0px 0px 1px #999 inset;
	box-shadow:0px 0px 1px #999 inset;
	*/


}
ul.sdt_menu li a img{
	border:none;
	position:absolute;
	width:0px;
	height:0px;
	bottom:0px;
	left:85px;
	z-index:100;

}
ul.sdt_menu li span.sdt_wrap{
	position:absolute;
	top:29px;
	left:0px;
	width:168px;
	height:60px;
	z-index:15;
}
ul.sdt_menu li span.sdt_active{
	position:absolute;
	background:#fff;
	top:84px;
	width:168px;
	height:0px;
	left:0px;
	z-index:14;
	-moz-box-shadow:0px 0px 4px #ccc inset;
	-webkit-box-shadow:0px 0px 4px #ccc inset;
	box-shadow:0px 0px 4px #ccc inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
	margin-left:15px;
	text-transform:uppercase;

}
ul.sdt_menu li span span.sdt_link{
	color:#000;
	font-size:24px;
	float:left;
	clear:both;
}
ul.sdt_menu li span span.sdt_descr{
	color:#999;
	float:left;
	clear:both;
	width:155px; /*For dumbass IE7*/
	font-size:10px;
	letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
	display:block;
	position:absolute;
	width:168px;
	overflow:hidden;
	height:168px;
	top:85px;
	left:0px;
	display:none;
	background:#fff;
}
ul.sdt_menu li div.sdt_box a{
	float:left;
	clear:both;
	line-height:30px;
	color:#999;
}
ul.sdt_menu li div.sdt_box a:first-child{
	margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
	color:#000;
}










/* 
#################################################
 HOMEPAGE CONTAINERS
#################################################
*/

.content{width:100%; min-height:300px;}
.page{width:1100px; margin:0 auto;}
.titlesection{width:100%; padding-top:80px; padding-bottom:60px; background:#f7f7f7; border-bottom:1px solid #eaeaea;}


.logo{
font-family:"Open Sans", Sans-serif;
font-size:36px;
width:200px;
float:left;
margin-top:1px;
}


.logotype{
width:40px;
height:52px;
background:url('../images/spacer.png') no-repeat;
}
.logotype img{
width:195px;
height:68px;
}




.top{height:160px; border-bottom:1px solid #eaeaea; z-index:99999999999;}
.top2{height:160px; border-bottom:1px solid #eaeaea;}
.topcontainer{height:161px; width:100%; background:#fff; position:relative; z-index:100;}


/* Social icons from Top*/
.socialicons ul li{float:left;list-style: none;}

li.scbox{border:1px solid #e5e5e5; box-shadow: 0 0 2px rgba(0,0,0,0.07); padding:6px 3px 6px 3px; margin-left:5px; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
li:hover.scbox{border:1px solid #ccc; cursor:pointer; margin-top:0px;}

li.sl-t a{color:#333 ; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
li:hover.sl-t{background:#33ccff; border:1px solid #33ccff;}
li:hover.sl-t a{color:#fff;}

li.sl-f a{color:#333 ; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
li:hover.sl-f{background:#0181ac; border:1px solid #0181ac;}
li:hover.sl-f a{color:#fff; }

li.sl-g a{color:#333 ; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
li:hover.sl-g{background:#666666; border:1px solid #666666;}
li:hover.sl-g a{color:#fff;}

li.sl-v a{color:#333 ; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
li:hover.sl-v{background:#3399cc; border:1px solid #3399cc;}
li:hover.sl-v a{color:#fff;}

li.sl-fl a{color:#333 ; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
li:hover.sl-fl{background:#cc6699; border:1px solid #cc6699;}
li:hover.sl-fl a{color:#fff;}

li.sl-l a{color:#333 ; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
li:hover.sl-l{background:#3399cc; border:1px solid #3399cc;}
li:hover.sl-l a{color:#fff;}

li.sl-d a{color:#333 ; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
li:hover.sl-d{background:#ff0066; border:1px solid #ff0066;}
li:hover.sl-d a{color:#fff;}

li.sl-d a{color:#333 ; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
li:hover.sl-d{background:#ff0066; border:1px solid #ff0066;}
li:hover.sl-d a{color:#fff;}

li.sl-p a{color:#333 ; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
li:hover.sl-p{background:#cc0000; border:1px solid #cc0000;}
li:hover.sl-p a{color:#fff;}

li.sl-b a{color:#333 ; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
li:hover.sl-b{background:#1377ff; border:1px solid #1377ff;}
li:hover.sl-b a{color:#fff;}


.slider{
max-height:486px;
background: #f5f5f5;
overflow:hidden;
}

/*Slider colored boxes*/

.sboxpurple {position:relative; padding:35px;background:#cc3366;background-color:rgba(204,51,102,0.8);color:#fff;font-family:"Open Sans";font-size:24px;font-weight: 300;}
.sboxpurple p {font-weight:400; margin-bottom:20px;}
.sboxpurple a { font-weight:300; font-size:14px; color:#fff !important;}
.sboxpurple a:hover { text-decoration:underline;}

.sboxgreen {padding:35px;background:#339933;background-color:rgba(51,153,51,0.8);color:#fff;font-family:"Open Sans";font-size:24px;font-weight: 300;}
.sboxgreen p {font-weight:400; margin-bottom:20px;}
.sboxgreen a { font-weight:300; font-size:14px; color:#fff !important;}
.sboxgreen a:hover { text-decoration:underline;}

.sboxyellow {padding:35px;background-color:rgba(249,192,55,0.8);color:#fff;font-family:"Open Sans";font-size:24px;font-weight: 300;}
.sboxyellow p {font-weight:400; margin-bottom:20px;}
.sboxyellow a { font-weight:300; font-size:14px; color:#fff !important;}
.sboxyellow a:hover { text-decoration:underline;}

.sboxblue {padding:35px;background-color:rgba(0,119,178,0.8);color:#fff;font-family:"Open Sans";font-size:24px;font-weight: 300;}
.sboxblue p {font-weight:400; margin-bottom:20px;}
.sboxblue a { font-weight:300; font-size:14px; color:#fff !important;}
.sboxblue a:hover { text-decoration:underline;}

.sboxlight {padding:35px;background-color:rgba(255,255,255,1);color:#222;font-family:"Open Sans";font-size:24px;font-weight: 300;}
.sboxlight p {font-weight:400; margin-bottom:20px;}
.sboxlight a { font-weight:300; font-size:14px; color:#222 !important;}
.sboxlight a:hover { text-decoration:underline;}

.sboxdark {padding:35px;background-color:rgba(0,0,0,0.8);color:#fff;font-family:"Open Sans";font-size:24px;font-weight: 300;}
.sboxdark p {font-weight:400; margin-bottom:20px;}
.sboxdark a { font-weight:300; font-size:14px; color:#fff !important;}
.sboxdark a:hover { text-decoration:underline;}

.sboxgray {padding:35px;background-color:rgba(153,153,153,0.8);color:#fff;font-family:"Open Sans";font-size:24px;font-weight: 300;}
.sboxgray p {font-weight:400; margin-bottom:20px;}
.sboxgray a { font-weight:300; font-size:14px; color:#fff !important;}
.sboxgray a:hover { text-decoration:underline;}



/*Homepage colored sections*/
.blue{height:466px;background: #0077b2; overflow:hidden; width:100%;}

/*SCROLLER LOGO*/

.posicionscroll{position:relative; top:10px; left: 1px;}



.green{height:800px;background: #38b24a;overflow:hidden;box-shadow: 0 0 50px rgba(0,0,0,0.3);}



/*NOSOTROS*/
.orange{height:900px;background: #f9c037; overflow:hidden;}



/*OFERTAS*/
.orangeofertas{height:880px;background: #FE2E2E; overflow:hidden;}



.orange2{height:990px;background: #e0861a; overflow:hidden;}


.pink{
background:url(../images/office.png);
height:1000px;
width:100%;
position:relative;
}



.purple{height:990px;background: #f5f5f5; overflow:hidden;}

.purple2{min-height:990px;background: #49294a; padding-bottom:50px; position:relative; overflow:hidden;}

.blue2{height:700px;background: #006699; overflow:hidden;}

#footersection{background:#fff; height:300px; border-top:1px solid #EAEAEA}




/*FOR GREEN SECTION*/
.portcontainer{position:relative; width:720px;}
.leftcontainer{position:relative; width:350px;}

.portbox{
width:180px;
height:180px;
background:#fff;
border:0px solid #f5f5f5;
-webkit-transition:.2s;-moz-transition:.2s;transition:.2s;
position:relative;
z-index:99;
overflow:hidden;
}
.portbox img{width:180px; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}

.portbox:hover{
width:230px;
height:230px;
margin-top:-25px;
margin-left:-25px;
-moz-box-shadow: 15px 15px 15px  rgba(0,0,0,0.3);
-webkit-box-shadow: 15px 15px 15px  rgba(0,0,0,0.3);
box-shadow: 15px 15px 15px  rgba(0,0,0,0.3);
z-index:999;
}
.portbox:hover img{width:230px;}

.portbox2{
width:180px;
height:180px;
background:#F9C037;
border:0px solid #F9C037;
-webkit-transition:.2s;-moz-transition:.2s;transition:.2s;
position:relative;
z-index:99;
text-align:center;
}
.portbox2:hover{
width:230px;
height:230px;
background:#f9c037;
border:0px solid #f9c037;
margin-top:-25px;
margin-left:-25px;
-moz-box-shadow: 15px 15px 15px  rgba(0,0,0,0.3);
-webkit-box-shadow: 15px 15px 15px  rgba(0,0,0,0.3);
box-shadow: 15px 15px 15px  rgba(0,0,0,0.3);
z-index:999;
}
.portbox2 span{
position:relative;
top:60px;
-webkit-transition:.2s;-moz-transition:.2s;transition:.2s;
font-size:56px;
}
.portbox2:hover span{
position:relative;
top:70px;
-webkit-transition:.2s;-moz-transition:.2s;transition:.2s;
font-size:86px;
}
.portbox2 a{color:#fff; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s;}
.portbox2:hover a{color:#444;}


.posfix{position:absolute; top:180px;}
.posfix2{position:absolute;top:360px;}

.el1{position:absolute; left:0px;}
.el2{position:absolute; left:180px;}
.el3{position:absolute; left:360px;}
.el4{position:absolute; left:540px;}



/* 
#################################################
 ANIMATED SKILL BAR CSS ONLY
#################################################
*/
.skimiler{float: left;margin:-15px auto 0px 0px;width: 330px;}
.skiller {margin: 0;font-size: 12px;line-height: 2em;position: relative;}
.col { width:535px;}
#skill {list-style: none outside none;}
#skill li {background:#1a1a1a;height: 23px;margin-bottom: 20px;margin-left: 0px;width: 535px;}/*835d10*/
#skill li em { position:relative; top:-22px; color:#333;}
#skill li small { margin-left:10px;}
#skill span { color:#fff; padding-bottom:3px;}

#skill2 {list-style: none outside none;}
#skill2 li {background:#efefef;height: 23px;margin-bottom: 20px;margin-left: 0px;width: 1100px;}/*835d10*/
#skill2 li em { position:relative; top:-22px; color:#333;}
#skill2 li small { margin-left:10px;}
#skill2 span { color:#fff; padding-bottom:3px;}

.expand {background:#f9c037;height: 20px;position: absolute;left: 0;}
.expand2 {background:#3399cc;height: 20px;position: absolute;left: 0;}
 
.html5       { width:70%;  -moz-animation:html5 2s ease-out;       -webkit-animation:html5 2s ease-out;    animation:html5 2s ease-out;     }
.css3        { width:90%;  -moz-animation:css3 2s ease-out;        -webkit-animation:css3 2s ease-out;     animation:css3 2s ease-out;      }
.jquery      { width:50%; -moz-animation: jquery 2s ease-out;   -webkit-animation: jquery 2s ease-out;    animation: jquery 2s ease-out;  }
.photoshop   { width:10%;  -moz-animation:photoshop 2s ease-out;   -webkit-animation:photoshop 2s ease-out;   animation:photoshop 2s ease-out; }
.dreamweaver { width:100%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out; animation:dreamweaver 2s ease-out;  }
 
@-moz-keyframes html5       { 0%  { width:0px;} 100%{ width:70%;}   }
@-moz-keyframes css3        { 0%  { width:0px;} 100%{ width::90%;}  }
@-moz-keyframes jquery      { 0%  { width:0px;} 100%{ width::50%;}  }
@-moz-keyframes photoshop   { 0%  { width:0px;} 100%{ width::10%;}  }
@-moz-keyframes dreamweaver { 0%  { width:0px;} 100%{ width::100%;} }
 
@-webkit-keyframes html5       { 0%  { width:0px;} 100%{ width:70%;}  }
@-webkit-keyframes css3        { 0%  { width:0px;} 100%{ width::90%;} }
@-webkit-keyframes jquery      { 0%  { width:0px;} 100%{ width::50%;} }
@-webkit-keyframes photoshop   { 0%  { width:0px;} 100%{ width::10%;} }
@-webkit-keyframes dreamweaver { 0%  { width:0px;} 100%{ width::100%;} }

@keyframes html5       { 0%  { width:0px;} 100%{ width:70%;}  }
@keyframes css3        { 0%  { width:0px;} 100%{ width::90%;} }
@keyframes jquery      { 0%  { width:0px;} 100%{ width::50%;} }
@keyframes photoshop   { 0%  { width:0px;} 100%{ width::10%;} }
@keyframes dreamweaver { 0%  { width:0px;} 100%{ width::100%;} }



/* FANCYBOX */
.fancybox-custom .fancybox-skin {box-shadow: 0 0 50px #222;}


/***********************
		TWEETS
***********************/

.tweet,
.query {
font-family: 'Open Sans', sans-serif;
Font-size:14px;
font-weight:400;
line-height:22px;
color:#fff;
}

.tweet_avatar{
height:100px;
display:none;
}

.tweet_time a{
font-size:10px;
font-weight:400;
color:#cccccc;
}

a#ctime{font-size:10px;font-weight:400;color:#cccccc;}
a#ctime:hover{font-size:10px;font-weight:400;color:#ffffff;}

.tweet_list {
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
list-style: none;
margin: 0;
padding: 0;
overflow-y: hidden;
/*background-color: #8ADEE2;*/
}

.tweet_list li {
overflow-y: auto;
overflow-x: hidden;
padding: 0px;
list-style-type: none;
padding-bottom:20px;
}

.tweet_list li a {
font-family: 'Open Sans', sans-serif;
Font-size:14px;
font-weight:700;
line-height:22px;
color:#e10044;

-webkit-transition: 0.2s;	-moz-transition: 0.2s;	transition: 0.2s;
}
.tweet_list li a:hover {color:#fff;}


.tweet_list .tweet_even {
/*background-color: #91E5E7;*/
}

.tweet_list .tweet_avatar {
padding-right: .5em; float: left;
}

.tweet_list .tweet_avatar img {
vertical-align: middle;
}



/*  DRIBBBLE  */

img.playerav {width:50px !important; margin-right:20px; }




/* GOOGLE MAP */

.demo-wrapper {
	width: 100%;
	margin: 0 auto;
	height: 100%;
	position:absolute;
	opacity:0.1;
}
#surabaya {
	width: 100%;
	height: 100%;
}



/* BACK TO TOP BUTTON */

#back-top {
	position: fixed;
	bottom: 0px;
	right: 40px;
}
#back-top a {
	width: 32px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #666;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #999;
}
/* arrow icon (span tag) */
#back-top span {
	width: 50px;
	padding:7px 0px 7px 0px;
	display: block;
	background: #333 no-repeat center center;
	/* rounded corners */
	-webkit-border-radius: 2px 2px 0px 0px;
	-moz-border-radius: 2px 2px 0px 0px;
	border-radius: 2px 2px 0px 0px;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #000;
}




/* CAROUSEL 00 */

#c-carousel {
	height: 100%;
	padding: 0;
	margin: 0;
}
#c-carousel {
	background-color: #f0f0f0;
	min-height: 300px;
}
#c-carousel * {
	font-size: 14px;
	color: #333;
	line-height: 22px;
}

#wrapper {
	/*background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 100px;*/
	width: 100%;
	height: 300px;
	padding: 0px;
	margin: 0px 0 0 0px;
	position: relative;
	left: 0px;
	top: 0px;
}
.caroufredsel_wrapper {
	/*border-radius: 90px;*/
}
#carousel img {
	width: 275px;
	height: 275px;
	margin: 0px 0px;
	float: left;
	cursor:pointer;
}


#prev, #next {
	background: transparent url('../images/carousel_controll.png') no-repeat 0 0;
	text-indent: 0px;
	display: block;
	overflow: hidden;
	width: 36px;
	height: 36px;
	position: absolute;
	top: 130px;
}
#prev {
	background-position: 0 0;
	left: 30px;
}
#prev:hover {
	left: 29px;
}			
#next {
	background-position: -18px 0;
	right: 30px;
}
#next:hover {
	right: 29px;
}				
#pager {
	/*text-align: center;
	margin: 0 auto; */
	padding-top: 20px;
	width:220px;
	float:right;
}
#pager a {
	background: transparent url(../images/carousel_control.png) no-repeat 0px -29px;
	text-decoration: none;
	text-indent: -9999px;
	display: inline-block;
	overflow: hidden;
	width: 22px;
	height: 22px;
	margin: 0 5px 0 0;
}
#pager a.selected {
	background: transparent url(../images/carousel_control.png) no-repeat 0px -53px;
	text-decoration: underline;				
}

.newboxes{
	border: 0px solid black;  width: 100%; height:80px; 
}




/* TABS */

#wrapper22 {
	background-color: transparent;
	border-top: 0px solid #ef0e52;
	border-bottom: 0px solid #ef0e52;
	width: 100%;
	height: 980px;
	padding-top: 25px;
	margin: 0px 0 0 0;

}
#tabs > div {
	width: 1100px;
	height: 900px;
	float: left;
	overflow: hidden;
}
/*
#tabs img {
	display: block;
	margin: 0 25px 0 0;
	float: left;
}
*/
#tabs h3 {
	font-size: 30px;
	line-height: 20px;
	margin: 60px 0 20px 0;
}

/*
#tabs #blue img {
	margin-top: 30px;
}
#tabs #pink img {
	margin-top: 0;
}
#tabs #white img {
	margin-top: 50px;
}
*/


/* SERVICIOS */


#pager2 {
	width: 100%;
	margin: -26px auto 25px auto;
	text-align: center;
	background-color: transparent;
	border-top:0px solid #0000FF;
}
#pager2 a {
	border: 0px solid #0000FF;
	border-top: none;
	border-bottom: none;
	border-left: none;
	border-color: 0px #0000FF;
	color: #444;
	text-decoration: none;
	line-height: 30px;
	display: inline-block;
	height: 30px;
	padding: 10px 30px;
	-webkit-transition:.4s;-moz-transition:.4s;transition:.4s
}
#pager2 a:hover {
	color: #0040FF;
}
#pager2 a:first-child {
	border-left: 0px solid #0000FF;
}
#pager2 a.selected {
	background-color: #FFA500;
	color: #fff;
}

#source {
	text-align: center;
	width: 400px;
	margin: 0 0 0 -200px;
	position: absolute;
	bottom: 10px;
	left: 50%;
}
#source, #source a {
	color: #778899;
	font-size: 12px;
}


/***********************
	 ORGANIC TABS
***********************/

/*## TABS ##*/
.tabscontainer{width:100%; float:left;}

.nav-two{border-bottom:1px solid #eaeaea;}
.nav-three{border-bottom:1px solid #eaeaea;}
#element-tabs .list-wrap { font-family:"Open Sans"; font-size:14px; background: #fff; color:#666; padding: 25px; margin: 0 0 15px 0; border:1px solid #eaeaea; }
#element-tabs ul { list-style: none; }
#element-tabs ul li a { display: block; padding: 4px; color: #666; }
#element-tabs ul li a:hover { background: #333; color: white; }
#element-tabs ul li:last-child a { border: none; }

#element-tabs .nav { font-family:"Open Sans"; overflow: hidden;  position:relative;bottom:-1px;}
#element-tabs .nav li {  float: left; margin: 0 -1px 0 0; border-top:1px solid #eaeaea; border-left:1px solid #eaeaea; border-right:1px solid #eaeaea;}
#element-tabs .nav li.last { margin-right: 0; }
#element-tabs .nav li a { display: block; padding: 15px; background: #f8f8f8; color: #999; font-size: 14px; text-align: center; -webkit-transition: 0.2s;	-moz-transition: 0.2s;	transition: 0.2s; }

#element-tabs li a.current,#element-tabs li a.current:hover { background-color: #fff !important; color: #f25d3c; position:relative; bottom:-1px;}
#element-tabs .nav li a:hover, #element-tabs .nav li a:focus { background: #f2f2f2; color:#666; }



/*## ALERT MESSAGES ##*/
.alertcontainer{
width:100%; float:left;
}
.close{
float:right;
}


.alertcongratulations{
font-family:"Open Sans";
background:#e3ebc6;
padding:20px;
color:#8fa442;
margin-bottom:29px;
}
.alertcongratulations span{color:#333;}
.alertinformation{
font-family:"Open Sans";
background:#d8ecf5;
padding:20px;
color:#528da9;
margin-bottom:29px;
}
.alertinformation span{color:#333;}
.alertmessage{
font-family:"Open Sans";
background:#fcf7d9;
padding:20px;
color:#c4a21b;
margin-bottom:29px;
}
.alertmessage span{color:#333;}
.errormessage{
font-family:"Open Sans";
background:#f9e5e6;
padding:20px;
color:#b3696c;
margin-bottom:29px;
}
.errormessage span{color:#333;}




/***********************
	PRICELIST TABLE
***********************/

#pricelist-wrapper{ height:480px; }
#pricelist-wrapper li{ float:left;width:19.8%; height:420px; border:1px solid #e7e7e7; margin-top:0px; padding-top:0px; background:#fff; margin-left:-1px; position:relative; z-index:5;
transition:         float 0.2s, width 0.2s, height 0.2s, border 0.2s, margin-top 0.2s, padding-top 0.2s;
-moz-transition:    float 0.2s, width 0.2s, height 0.2s, border 0.2s, margin-top 0.2s, padding-top 0.2s;
-webkit-transition: float 0.2s, width 0.2s, height 0.2s, border 0.2s, margin-top 0.2s, padding-top 0.2s;
-o-transition:      float 0.2s, width 0.2s, height 0.2s, border 0.2s, margin-top 0.2s, padding-top 0.2s;
list-style:none;
}

#pricelist-wrapper li:hover{ width:19.8%; height:430px; border:1px solid #3399cc; margin-top:-10px; padding-top:10px; background:#3399cc; z-index:10;}
.h9{font-family: 'Open Sans', sans-serif;Font-size:28px;font-weight:400;line-height:22px; position:relative; top:-5px;}
.smallp{font-size:12px;  position:relative; top:-10px;}
#pricelist-wrapper .plistrow0 {font-family:"Open Sans"; padding:15px 0 15px 0; border-bottom:0px solid #e7e7e7; text-align:center; color:#333; font-size:16px;}
#pricelist-wrapper li:hover .plistrow0 {border-bottom:0px solid #e75e30; color:#fff;}
#pricelist-wrapper .plistrow1 {font-family:"Open Sans";padding:14px 0 15px 0; border-bottom:1px solid #e7e7e7; text-align:center; color:#333; font-size:16px;}
#pricelist-wrapper li:hover .plistrow1 {border-bottom:1px solid #268dc0; color:#fff;}
#pricelist-wrapper .plistrow2 {font-family:"Open Sans"; height:25px; padding:25px 0 25px 0;  text-align:center; color:#333; font-size:16px;}
#pricelist-wrapper li:hover .plistrow2 { color:#fff;}
#pricelist-wrapper .plistrowbg {font-family:"Open Sans"; padding:12px 0 12px 0;  text-align:center; color:#666; font-size:13px; background:#f7f7f7; }
#pricelist-wrapper li:hover .plistrowbg { color:#fff; background:#268dc0;}
#pricelist-wrapper .plistrow {font-family:"Open Sans"; padding:12px 0 12px 0;  text-align:center; color:#666; font-size:13px; }
#pricelist-wrapper li:hover .plistrow{ color:#fff; }

#pricelist-wrapper .button_ok{ font-size:12px;}
#pricelist-wrapper .button_ok a{ background:#0077B2;color:#ffffff;padding:5px 16px 5px 16px;min-width:50px;-webkit-transition: 0.5s;	-moz-transition: 0.5s;	transition: 0.5s;}
#pricelist-wrapper .button_ok a:hover{color:#ffffff;background:#333;}
#pricelist-wrapper  li:hover .button_ok a{ background:#333;color:#ffffff;padding:5px 16px 5px 16px;min-width:50px;-webkit-transition: 0.5s;	-moz-transition: 0.5s;	transition: 0.5s;}
#pricelist-wrapper  li:hover .button_ok a:hover{color:#000;background:#fff;}

/*Selected*/
#pricelist-wrapper li.plistselected{width:19.8%; height:430px; margin-top:-10px; border:1px solid #3399cc; background:#3399cc; z-index:10; padding-top:10px;}
#pricelist-wrapper li.plistselected div{color:#fff !important;}
#pricelist-wrapper li.plistselected .plistrow1 {border-bottom:1px solid #268dc0; color:#fff;}
#pricelist-wrapper li.plistselected .plistrowbg { color:#fff; background:#268dc0;}
#pricelist-wrapper li.plistselected .pchecked img{ width:14px; height:11px; background:url('../images/sprite.png') no-repeat scroll -14px -151px transparent;}
#pricelist-wrapper li.plistselected .punvailable img{ width:11px; height:11px; background:url('../images/sprite.png') no-repeat scroll -14px -166px transparent;}
#pricelist-wrapper li.plistselected .button_ok a{ background:#333;color:#ffffff;padding:5px 16px 5px 16px;min-width:50px;-webkit-transition: 0.5s;	-moz-transition: 0.5s;	transition: 0.5s;}

/*No selections*/
#pricelist-wrapper li.noselections:hover { height:420px; background:#fff; border:1px solid #e7e7e7; margin-top:0px; padding-top:0px;}
#pricelist-wrapper li.noselections:hover  .plistprice img{ width:27px; height:20px; background:url('../images/sprite.png') no-repeat scroll -188px -113px transparent;}
#pricelist-wrapper li.noselections:hover  .pchecked img{ width:14px; height:11px; background:url('../images/sprite.png') no-repeat scroll 0 -151px transparent;}
#pricelist-wrapper li.noselections:hover  .punvailable img{ width:11px; height:11px; background:url('../images/sprite.png') no-repeat scroll 0 -166px transparent; }
#pricelist-wrapper li.noselections div{color:#333 !important;}
#pricelist-wrapper li.noselections .plistrow1 {border-bottom:1px solid #e7e7e7; color:#fff;}
#pricelist-wrapper li.noselections .plistrowbg { color:#fff; background:#f7f7f7;}
#pricelist-wrapper li.noselections .plistrow { color:#fff; background:#fff;}
#pricelist-wrapper li.noselections .button_ok a{ background:#0077B2;color:#ffffff;padding:5px 16px 5px 16px;min-width:50px;-webkit-transition: 0.5s;	-moz-transition: 0.5s;	transition: 0.5s;}
#pricelist-wrapper li.noselections:hover .button_ok a:hover{background:#333; color:#fff;}







/***********************
PRICELIST TABLE HOME
***********************/

#pricelist2-wrapper{ height:480px; width:80%;}
#pricelist2-wrapper li{ float:left;width:33%; height:420px; border:1px solid #e7e7e7; margin-top:0px; padding-top:0px; background:#fff; margin-left:-1px; position:relative; z-index:5;
transition:         float 0.2s, width 0.2s, height 0.2s, border 0.2s, margin-top 0.2s, padding-top 0.2s;
-moz-transition:    float 0.2s, width 0.2s, height 0.2s, border 0.2s, margin-top 0.2s, padding-top 0.2s;
-webkit-transition: float 0.2s, width 0.2s, height 0.2s, border 0.2s, margin-top 0.2s, padding-top 0.2s;
-o-transition:      float 0.2s, width 0.2s, height 0.2s, border 0.2s, margin-top 0.2s, padding-top 0.2s;
list-style:none;
}

#pricelist2-wrapper li:hover{ width:33%; height:430px; border:1px solid #3399cc; margin-top:-10px; padding-top:10px; background:#3399cc; z-index:10;}
.h9{font-family: 'Open Sans', sans-serif;Font-size:28px;font-weight:400;line-height:22px; position:relative; top:-5px;}
.smallp{font-size:12px;  position:relative; top:-10px;}
#pricelist2-wrapper .plistrow0 {font-family:"Open Sans"; padding:15px 0 15px 0; border-bottom:0px solid #e7e7e7; text-align:center; color:#333; font-size:16px;}
#pricelist2-wrapper li:hover .plistrow0 {border-bottom:0px solid #e75e30; color:#fff;}
#pricelist2-wrapper .plistrow1 {font-family:"Open Sans";padding:14px 0 15px 0; border-bottom:1px solid #e7e7e7; text-align:center; color:#333; font-size:16px;}
#pricelist2-wrapper li:hover .plistrow1 {border-bottom:1px solid #268dc0; color:#fff;}
#pricelist2-wrapper .plistrow2 {font-family:"Open Sans"; height:25px; padding:25px 0 25px 0;  text-align:center; color:#333; font-size:16px;}
#pricelist2-wrapper li:hover .plistrow2 { color:#fff;}
#pricelist2-wrapper .plistrowbg {font-family:"Open Sans"; padding:12px 0 12px 0;  text-align:center; color:#666; font-size:13px; background:#f7f7f7; }
#pricelist2-wrapper li:hover .plistrowbg { color:#fff; background:#268dc0;}
#pricelist2-wrapper .plistrow {font-family:"Open Sans"; padding:12px 0 12px 0;  text-align:center; color:#666; font-size:13px; }
#pricelist2-wrapper li:hover .plistrow{ color:#fff; }

#pricelist2-wrapper .button_ok{ font-size:12px;}
#pricelist2-wrapper .button_ok a{ background:#0077B2;color:#ffffff;padding:5px 16px 5px 16px;min-width:50px;-webkit-transition: 0.5s;	-moz-transition: 0.5s;	transition: 0.5s;}
#pricelist2-wrapper .button_ok a:hover{color:#ffffff;background:#333;}
#pricelist2-wrapper  li:hover .button_ok a{ background:#333;color:#ffffff;padding:5px 16px 5px 16px;min-width:50px;-webkit-transition: 0.5s;	-moz-transition: 0.5s;	transition: 0.5s;}
#pricelist2-wrapper  li:hover .button_ok a:hover{color:#000;background:#fff;}

/*Selected*/
#pricelist2-wrapper li.plistselected{width:33%; height:430px; margin-top:-10px; border:1px solid #3399cc; background:#3399cc; z-index:10; padding-top:10px;}
#pricelist2-wrapper li.plistselected div{color:#fff !important;}
#pricelist2-wrapper li.plistselected .plistrow1 {border-bottom:1px solid #268dc0; color:#fff;}
#pricelist2-wrapper li.plistselected .plistrowbg { color:#fff; background:#268dc0;}
#pricelist2-wrapper li.plistselected .pchecked img{ width:14px; height:11px; background:url('../images/sprite.png') no-repeat scroll -14px -151px transparent;}
#pricelist2-wrapper li.plistselected .punvailable img{ width:11px; height:11px; background:url('../images/sprite.png') no-repeat scroll -14px -166px transparent;}
#pricelist2-wrapper li.plistselected .button_ok a{ background:#333;color:#ffffff;padding:5px 16px 5px 16px;min-width:50px;-webkit-transition: 0.5s;	-moz-transition: 0.5s;	transition: 0.5s;}

/*No selections*/
#pricelist2-wrapper li.noselections:hover { height:420px; background:#fff; border:1px solid #e7e7e7; margin-top:0px; padding-top:0px;}
#pricelist2-wrapper li.noselections:hover  .plistprice img{ width:27px; height:20px; background:url('../images/sprite.png') no-repeat scroll -188px -113px transparent;}
#pricelist2-wrapper li.noselections:hover  .pchecked img{ width:14px; height:11px; background:url('../images/sprite.png') no-repeat scroll 0 -151px transparent;}
#pricelist2-wrapper li.noselections:hover  .punvailable img{ width:11px; height:11px; background:url('../images/sprite.png') no-repeat scroll 0 -166px transparent; }
#pricelist2-wrapper li.noselections div{color:#333 !important;}
#pricelist2-wrapper li.noselections .plistrow1 {border-bottom:1px solid #e7e7e7; color:#fff;}
#pricelist2-wrapper li.noselections .plistrowbg { color:#fff; background:#f7f7f7;}
#pricelist2-wrapper li.noselections .plistrow { color:#fff; background:#fff;}
#pricelist2-wrapper li.noselections .button_ok a{ background:#0077B2;color:#ffffff;padding:5px 16px 5px 16px;min-width:50px;-webkit-transition: 0.5s;	-moz-transition: 0.5s;	transition: 0.5s;}
#pricelist2-wrapper li.noselections:hover .button_ok a:hover{background:#333; color:#fff;}





/***********************
		MASONRY
***********************/


/**** Demos ****/

#container {
  background: transparent;
  padding: 0px;
  margin-bottom: 20px;
  border-radius: 5px;
  clear: both;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;

	margin-left:0px;
}

.centered { margin: 0 auto; }

.box {
  margin: 15px;
  padding: 0px;
  font-size: 14px;
  line-height: 1.4em;
  float: left;
  color:dark;
  font-family:"Open Sans";
}

.box ul{
  list-style: none;
}

.mover{border:1px solid #230324;   background: #230324; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s}
.mover:hover{border:1px solid #444444; }

.mover2{border:1px solid #49294a; background: #c3003b; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s}
.mover2:hover{border:1px solid #444; }


/**** fondo cuadrados rectangulos ofertas ****/

.mover3{border:0px solid #ffffff; background: #FAFAFA; -webkit-transition:.2s;-moz-transition:.2s;transition:.2s}

.mover3:hover{border:3px solid #444444; }



.moveractive{border:3px solid #FF0000; background: #FF0000;}


.box h2 {
  font-size: 14px;
  font-weight: 200;
}

.box img,
#tumblelog img {
  display: block;
  width: 100%;
}

.rtl .box {
  float: right;
  text-align: right; 
  direction: rtl;
}



.col1 { width: 330px; }
.col2 { width: 695px; }
.col3 { width: 1065px; }
.col4 { width: 1200px; }
.col5 { width: 1500px; }

.col1 img { max-width: 330px; }
.col2 img { max-width: 695px; }
.col3 img { max-width: 1065px; }
.col4 img { max-width: 1200px; }
.col5 img { max-width: 1500px; }



/**** Gutters ****/

.has-gutters .box {
  margin: 5px 0;
}

.has-gutters .col1 { width: 300px; }
.has-gutters .col2 { width: 600px; }
.has-gutters .col3 { width: 900px; }
.has-gutters .col4 { width: 1200px; }



/**** Transitions ****/

/*.transitions-enabled.masonry,
.transitions-enabled.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.transitions-enabled.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.transitions-enabled.masonry  .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}
*/

/* disable transitions on container 
.transitions-enabled.infinite-scroll.masonry {
  -webkit-transition-property: none;
     -moz-transition-property: none;
      -ms-transition-property: none;
       -o-transition-property: none;
          transition-property: none;
}
*/



/**** Primer comparison ****/

#comparison {
  overflow: auto;
}

#comparison .example {
  width: 420px;
  float: left;
  margin-right: 20px;
}

#comparison .box h5 {
  float: left;
  margin-bottom: 0;
  font-size: 30px;
  margin-right: 4px;
  line-height: 28px;
  font-weight: bold;
  color: #FFF;
}

/* Homepage */

.homepage .item {
  width: 200px;
  float: left;
  padding: 10px;
  margin: 10px;
  background: #D8D5D2;
  font-weight: 300;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.homepage .big-text,
.homepage .link {
  font-size: 24px;
  line-height: 1.2em;
}

.homepage .link {
  padding: 0;
}

.homepage .link a {
  display: block;
  padding: 10px;
  width: 200px;
  background: #D26;
  color: white;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.homepage .link a:hover {
  background: #A2C;
}

.homepage .col2 {
  width: 440px;
}

.homepage .example {
  padding: 0;
  width: 220px;
  background: transparent;
}

.homepage .example a { display: block; }

.homepage .example img {
  display: block;
  width: 100%;
}

.homepage .example a:hover { 
  background: #D26;
  color: white;
}

.homepage .loading {
  background: black;
  color: #D8D5D2;
}

.homepage .loading img {
  float: left; 
  padding-right: 5px;
  width: 54px;
}

/* mini example */

.homepage .mini div {
  float: left;
  background: white;
  margin: 3px;
  color: #D8D5D2;
  font-weight: bold;
  font-size: 32px;
  line-height: 46px;
  text-align: center;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

.homepage .mini .w1 { width: 44px; }
.homepage .mini .h1 { height: 44px; }
.homepage .mini .w2 { width: 94px; }
.homepage .mini .h2 { height: 94px; }

/* Tumblelog example */

#tumblelog {
  background: #FFF;
  padding: 1.0em;
}

#tumblelog .story {
  margin: 10px;
  border-top: 4px solid #DCB;
  padding-top: 10px;
  background: #FFF;
  float: left;
}

#tumblelog h1, #tumblelog h2, #tumblelog h3 { font-weight: bold;}

#tumblelog .col1 { width: 220px; }
#tumblelog .col2 { width: 460px; }
#tumblelog .col3 { width: 700px; }

#tumblelog .col1 img,
#tumblelog .col2 img,
#tumblelog .col3 img {
  max-width: none;
}

/* Infinite Scroll loader */
#infscr-loading { 
  text-align: center;
  z-index: 100;
  position: fixed;
  left: 45%;
  bottom: 40px;
  width: 200px;
  padding: 10px;
  background: #000; 
  opacity: 0.8;
  color: #FFF;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

/**** Fluid ****/

#container.fluid  {
  padding: 5px 0;
}

/* right margin value is 0.1% less than calculated,
  to allow for rounding errors in Firefox */
.fluid .box {
  margin: 5px 0.9% 5px 1%;
  padding: 5px 1%;
}

.fluid .box.col1 { width: 16%; }
.fluid .box.col2 { width: 36%; }
.fluid .box.col3 { width: 56%; }

/**** Corner stamp ****/

.corner-stamp {
  width: 280px;
  height: 340px;
  padding: 10px;
  margin: 10px;
  float: right;
  background: red;
  color: white;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

/**** Pygments ****/

code .s1,
code .s { color: #78BD55; } /* string */
code .mi, /* integer */
code .cp, /* doctype */
code .kc { color: #5298D4; } /*boolean*/
code .k { color: #E39B79; } /* keyword */
code .kd, /* storage */
code .na { color: #A9D866; } /* markup attribute */
code .p  { color: #EDB; } /* punctuation */
code .o  { color: #F63; }   /* operator */
code .nb { color: #AA97AC;} /* support */

/* comment */
code .c,
code .c1 { color: #666; font-style: italic; }

code .nt { color: #A0C8FC; } /* Markup open tag */

code .nf { color: #9EA8B8; } /* css id */
code .nc { color: #A78352; }  /* CSS class */
code .m  { color: #DE8E50; } /* CSS value */
code .nd { color: #9FAD7E; } /* CSS pseudo selector */


#fullscreen  {position:absolute; width:1005px; height:800px; margin-top:20px; margin-left:2500px;}
#fullarticle2          {position:absolute; width:1005px; height:700px; margin-top:20px; margin-left:-2500px}
#fullarticle3          {position:absolute; width:1015px; height:700px; margin-top:-2500px; margin-left:15px; }


/**** Clearfix ****/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/**** END OF MASONRY ****/
/**** END OF MASONRY ****/
/**** END OF MASONRY ****/


.iconsbg {
width:100%;
height:482px;
background: url('../images/icons.png') 50% 0px no-repeat;
position:relative;
top:30px;
overflow:hidden;
}

.whitelogo{
width:520px;
position:absolute;
left:285px;
top:20px;
text-align:center;
}


/**** FONT GRID ****/
.fontgridbox{background:#111;}
.fontgrid{}
.fontgrid ul{}
.fontgrid li a{color:#fff;}
.fontgrid li:hover a{color:#3399CC;}
.fontgrid li{
	width:30px;
	height:20px;
	padding:15px 10px 10px 10px;
	background:#000;
	color:#fff;
	border:1px solid #111;
	list-style: none;
	float:left;
	margin-left:5px;
	margin-top:5px;
	-webkit-transition:.2s;-moz-transition:.2s;transition:.2s	;
	cursor:pointer;
}
.fontgrid li:hover{border:1px solid #3399CC;}
.fontgrid li i{ margin:5px 5px 5px 5px; }


/**** END OF FONT GRID ****/