/*!
 * AGENTRAP Theme - Responsive Bootstrap Agency Theme
 *
 * Copyright 2012 
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 * Created by: Carlos Esteban Alvarez
 * URL: http://www.basicoh.com
 * Designed and built based on Twitter Bootstrap.
 */

/* COLOR REFERENCE
main background: #e8e6e6
main font color: #555
h1 & Links color: #b8413e
footer background: #363636
footer text: #bdbdbd

*/


/**********BASE CONFIGURATIONS**********/   
html { -webkit-font-smoothing: antialiased }
body {
    background: #a8dba8;
    color: #555;
    font-size: 14px;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;

}

h1, h2, h3, h4, h5, h6, #menu a {font-family:Open Sans !important;}

h1 {
	font-size:85px;
    line-height: 78px;
	color:#b8413e;
	text-align:center;
	font-weight:300
}

h2 {
	font-size:35px;
	line-height:28px;
	text-align:center;
	margin-top:10px;
	font-weight: lighter
}

.span4, .thumbnails{
	text-align:center;
	margin-top:20px;
	}
.span3 {
	margin-top:20px
}
.span9, .span8 {
	text-align:left
}

nav select{display:none}



/**********TOP HEADER STYLE**********/   
#header_bg {
    height: 210px;
    background: url(../img/header_bg.png) repeat top left;
    position: absolute;
    top: -110px;
    left: 0;
    width: 100%;
	z-index: -999;
}
.header{
	padding-top:30px;
	
}

.menu {
	float:right;
	margin-top:10px;
	
}

.logo {
	position:relative;
	float:left;
	margin-left: inherit
}

/**********FOOTER CONFIGURATION **********/
#end {
	background:#363636;
	width:100%;
	padding-bottom: 75px;
	text-align:left;
	font-size:12px;
	color:#bdbdbd;
	padding-top:18px;
	position:relative;
	bottom:-21px;
}

footer, end {
    width: 100%;
    margin: 0 0;
}

/**********HEADER TITLE SECTION **********/
.section_header {
    background: url(../img/section_header.png) no-repeat center;
    height: 46px;
    width: 100%;
    text-align: center;
    line-height: 46px;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    text-transform: none;
    color: #fff;
    text-shadow: 0px 1px 1px #000;
    margin-left: auto;
    margin-bottom:35px;
}

/**********SIDEBAR STYLES **********/
.sidebar {
	display:block;
	font-size:12px;
}

.sidebar a{
	color:#b9413e
}

/**********DASH STYLE**********/
hr.dashed{
	margin:18px 0;
	border:0;
	border-top:1px dashed #625f5f;
	border-bottom:1px dashed #fff
}

/**********TAGLINE STYLE**********/
.taglinequite{ 
	font-family:Georgia, serif;
	font-size:16px;
	color:#3F3F3F; 
	font-style:italic; 
	line-height:23px; 
	text-align:center;
	}

/**********TEXT FOCUS STYLE**********/
.textfocus {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:22px;
	color:#3F3F3F;
	font-style:italic;
	line-height:30px;
	text-align:center;
	font-weight:100

}

/**********IMAGE MASK & HOVER**********/
/**This beautiful effect was created by Eric Pires, 
web designer from Brazil. Thanks for all your help mate!**/


.view{
	width:100%;
	float:left;
	overflow:hidden;
	position:relative;
	text-align:center;
	cursor:default;
	background:url("../img/spinner.gif") center center no-repeat #f1f1f1!important
}

.view .mask{
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
	top:0;
	left:0;
}

.view a.info{
	display:block;
	width:32px;
	height:32px;
	border-radius:3px;
	background-color:#000;
	background-image:url("../img/zoom.png");
	position:absolute;
	top:50%!important;
	left:50%;
	margin-top:-16px;
	margin-left:-36px;
	border:1px solid;
	border-color:rgba(0,0,0,0.5);
	-webkit-transition:all .2s linear;
	-moz-transition:all .2s linear;
	-o-transition:all .2s linear;
	-ms-transition:all .2s linear;
	transition:all .2s linear
}

.nolink a.info{
	margin-left:-17px!important
}

.view a.info:hover{
	border:1px solid;
	border-color:rgba(255,255,255,0.7);
	-webkit-transition:all .2s linear;
	-moz-transition:all .2s linear;
	-o-transition:all .2s linear;
	-ms-transition:all .2s linear;
	transition:all .2s linear
}

.view a.link{
	display:block;
	width:32px;
	height:32px;
	border-radius:3px;
	background-color:#000;
	background-image:url("../img/link.png");
	position:absolute;
	top:50%!important;
	left:50%;
	margin-top:-16px;
	margin-left:4px;
	border:1px solid;
	border-color:rgba(0,0,0,0.5);
	-webkit-transition:all .2s linear;
	-moz-transition:all .2s linear;
	-o-transition:all .2s linear;
	-ms-transition:all .2s linear;
	transition:all .2s linear
}
.noinfo a.link{
	margin-left:-17px
}

.view a.link:hover{
	border:1px solid;
	border-color:rgba(255,255,255,0.7);
	-webkit-transition:all .2s linear;
	-moz-transition:all .2s linear;
	-o-transition:all .2s linear;
	-ms-transition:all .2s linear;
	transition:all .2s linear
}

.view-first img{
	-webkit-transition:all .2s linear;
	-moz-transition:all .2s linear;
	-o-transition:all .2s linear;
	-ms-transition:all .2s linear;
	transition:all .2s linear
}

.view-first .mask{
	-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter:alpha(opacity=0);
	opacity:0;
	background:url("../img/patterns/port-sep.png");
	-webkit-transition:all .4s ease-in-out;
	-moz-transition:all .4s ease-in-out;
	-o-transition:all .4s ease-in-out;
	-ms-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out
}
.view-first:hover .mask{
	-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter:alpha(opacity=100);
	opacity:1
}



/**********TWITTER WIDGET **********/
#jstwitter ul li{
	color:#bdbdbd;
	padding:.5em .75em;
}

#jstwitter ul{
	margin-left:0;
	list-style:none
}

#jstwitter:first-child{
	border-top:0
}

ul#jstwitter li a{
	font-size:10px;
	font-style:italic;
	color:#666;
	text-decoration:none
}

/**********VIDEO WIDGET **********/
.video-container-post{
	position:relative;
	padding-bottom:55.25%;
	height:0;
	overflow:hidden
}

.video-container-post iframe,.video-container object,.video-container embed{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%
}


/**********MEDIA SCREENS **********/



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


h2 {
	font-size:25px;
	line-height:28px;
}

#end {
	text-align:center;
	line-height:15px
}

#logo {
    	text-align: center;
    	margin: auto;
    	width: 300px;
}
    
#logo img { 
	width: 100px;
	padding-top:30px; }

}



@media(max-width:480px){

body{padding:0}
nav ul{display:none}
nav select{display:inline-block;width:100%!important}
nav{position:relative;right:auto;top:auto;width:100%}

.textfocus {
	font-size:16px;
	line-height:24px;
}

  .thumbnails > li {
    text-align:center;
  }




}


@media(min-width:480px) and (max-width:767px){body{padding:0}
nav ul{display:none}
nav select{display:inline-block;width:100%!important}
nav{position:relative;right:auto;top:auto;width:100%}

}



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

.section_header {
    background: url(../img/section_header_mobile.png) no-repeat top left;
    height: 45px;
    width: 300px;
}

  .thumbnails > li {
    margin-left: 0px;
    text-align:center;
  }


}