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

body {
    background: url(bfr.jpg) repeat-x #EEE ;
	font-size:14px;
	font-family:'Lato', sans-serif;
	color:#222;
	margin:5px 0px 0px 0px;
    text-align:left;
}

.red { background-color:#F00; min-height:35px; text-align:center; font-size:150%; color:#FFF; padding:10px 0px;}
.gray { background-color:#EEE;}
.white { background-color:#FFF;}
.pad {padding:0px 2%}

a {text-decoration:none; font-weight:100; color:#462300}
a:hover { text-decoration:none; color:#000}

.imgs {margin:3px 8px; border:4px solid #999; max-width:100%;height:auto;}

.title {font-size:140%; color: #462300; font-weight:600; text-align:center; padding:1px 0px 5px 0px; border-bottom:1px solid #999; font-family: 'Sanchez', serif;}
h2 {font-size:170%; color:#462300; font-weight:600; text-align:center; font-family: 'Sanchez', serif;}


/* Header */		 
.header {
	 text-align:left;
	 height:auto;
}

.slogan {
	 text-align:center;
	 font-size:200%;
	 font-family: 'Sanchez', serif;
	 color:#e9ae1a;
	 background-color:#000
}

.slogan-pad {margin-top:15px}


/* #Menu */
.nav {
	background-color: #e9ae1a;
	text-align:center;
	padding:0px;
	margin:0px;
}


	.menu{
	font-family: 'Sanchez', serif;;
    padding:0px 30px;
	font-size:140%;
    display:inline-block;
    position:relative;
    float:left;
    margin:0px;
    overflow:hidden;
    text-align:center;
    white-space:nowrap;
    color:#000;
}

.menu:hover{
	color:#462300;
	transition:all 0.3s linear;
}
.active {color:#462300;}
/* END Menu */


#footer {
	padding:10px 0px;
	border-top:10px #1B82D3 solid;
	text-align:center;
	color:#333;
	font-size:70%;
    margin-top:20px;}
	
	/* Layout
================================================== */
    .container                { position: relative; width: 1100px; margin: 0 auto; padding: 0;}
    .container .columns       { float: left; display: inline; margin:0px 5px;}
	
	.container .full.columns  { width: 1080px; padding:5px}
	.container .main.columns   { width: 730px; padding:5px;}
	.container .side.columns   { width: 330px; padding:5px;}
    .container .two.columns   {width: 530px; padding:5px} 
    .container .tree.columns  { width: 346px; padding:5px} 

/* #Tablet (Portrait) Design for a width of 768px 
================================================== */
 @media only screen and (min-width: 768px) and (max-width: 1100px) {
     .container  { width:100% }
     .container .columns { margin:0px;}
     
     .container .main.columns { width: 70%} 
	 .container .side.columns { width: auto}
	 .container .full.columns, 
     .container .two.columns,
     .container .tree.columns { width: 100%; padding:0px; margin:0}
	 
	 .menu  {padding:5px 15px; font-size:150%;} 
	 .slogan {font-size:160%;}
	 
		}
		
/*   Design for a width of 480px 
================================================== */
 @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width:100% }
        .container .columns { margin:0px}
		
		.container .main.columns,
	    .container .side.columns,
	    .container .full.columns, 
        .container .two.columns,
        .container .tree.columns { width: 100%; padding:0px; margin:0px}
		.menu  {padding:5px 10px; font-size:120%;} 
		.slogan {font-size:140%;}
		.slogan-pad {margin-top:1px}
		h2, .title {font-size:120%;}
}

/*  #Mobile (Portrait) Design for a width of 320px
================================================== */
@media only screen and (min-width: 220px) and (max-width: 479px) {
        .container { width: 100%; }
        .container .columns { margin:0px}
		
		.container .main.columns,
	    .container .side.columns,
	    .container .full.columns, 
        .container .two.columns,
        .container .tree.columns { width: 100%;padding:0px; margin:0px}
		.menu  {padding:5px 8px; font-size:110%;}
		.slogan {font-size:120%;} 
		.slogan-pad {margin-top:1px}
		h2, .title {font-size:120%;}
	}

/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
	  padding:10px 0px 10px 0px;
    }
	
	


/* #Forms
================================================== */

.forms2{
border: 1px solid #999;
height: 25px;
color:#555;
background-color:#CCC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
 border-radius: 5px;
clear:both;
 margin:0px 0px 10px 0px;
 width:95%;
}
.forms3{
border: 1px solid #999;
height: 55px;
color:#555;
background-color:#CCC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
 border-radius: 5px;
 clear:both;
 margin-bottom:10px;
 width:95%;
 height:55px;
}

.btn{border: 1px solid #999;
height: 35px;
width:66px;
text-align:center;
font-size: 90%;
color:#555;
background-color:#CCC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
 border-radius: 5px;}
 
 .btn:hover {
    cursor: hand;
    cursor: pointer;
    opacity: .8;
}