/*
* Gazoobie 3.3
* Copyright 2014, iM Image Marketing inc
* www.gazoobie.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 
*/


/* #topnav Styles
================================================== */
#topnavwrapper {
	z-index:9999;
}
#topnav {
}
#topnav ul {
	text-align: center;
	width: 100%;
	margin-bottom: 2px;
}
#topnav ul li {
	display: inline-block;
	list-style: none;
	margin-bottom:0px;
}
#topnav ul li:hover {
	position: relative;
	cursor: default;
	text-decoration: underline;
}
#topnav ul li ul {
	background-color: #333;
	display: none;
	z-index: 9999;
	position: absolute;
	top: 100%;
	width: 200px;
	border-radius: 0 0 10px 10px;
	margin: 0px;
}
#topnav ul li ul li {
	float: none;
	display: block;
}
#topnav ul li a {
	text-align: left;
	text-decoration: none;
	padding: 10px 10px 11px 10px;
	font-size: 1.25em;
	color: #4B4B4B;
	display: inline;
}
#topnav ul li.active a {
}
#topnav ul li:hover>ul {
	display: block;
}
#topnav ul li ul li a {
	color: #ECECEC;
	display: block;
	padding: 8px 8px 8px 3px;
	margin-left: 5px;
	cursor: auto;
}
#topnav ul li ul li.last a:hover {
}


    .container                                  { position: relative; width: 1200px; margin: 0 auto; padding: 0; }
    .container .column,
    .container .columns                         { float: left; display: inline;}
    .row                                        { margin-bottom: 20px; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

    /* Base Grid */
	.container .one.column,
    .container .one.columns                     { width: 10%; }
    .container .two.columns                     { width: 20%; }
    .container .three.columns                   { width: 30%; }
    .container .four.columns                    { width: 40%; }
    .container .five.columns                    { width: 50%; }
    .container .six.columns                     { width: 60%; }
    .container .seven.columns                   { width: 70%; }
    .container .eight.columns                   { width: 80%; }
    .container .nine.columns                    { width: 90%; }
    .container .ten.columns	                    { width: 100%; }
   
    .container .one-third.column                { width: 33%;}
    .container .two-thirds.column               { width: 66%;}
	.container .qrt.columns       		        { width: 25%;}	



/* TABLETS */
@media only screen and (min-width: 641px) and (max-width: 1024px) {

    .container                                  { position: relative; width: 100%; margin:0 5px 0 5px; }
    .container .column,
    .container .columns                         { float: left; display: inline;}
    .row                                        { margin-bottom: 20px; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

   .container .one.column,
    .container .one.columns                     { width: 30%; }
    .container .two.columns                     { width: 30%; }
    .container .three.columns                   { width: 30%; }
    .container .four.columns                    { width: 40%; }
    .container .five.columns                    { width: 50%; }
    .container .six.columns                     { width: 60%; }
    .container .seven.columns                   { width: 70%; }
    .container .eight.columns                   { width: 70%; }
    .container .nine.columns                    { width: 70%; }
    .container .ten.columns                     { width: 100%; }
    
	.container .one-third.column                { width: 33%;}
    .container .two-thirds.column               { width: 66%;}
	.container .qrt.columns       		        { width: 25%;}
}

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

        .container { width: 100%; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column,
		.container .qrt.columns  { width: 100%; }
		
		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 29px; line-height: 30px; }
	h2 { font-size: 25px; line-height: 26px; }
	h3 { font-size: 20px; line-height: 21px; }
	h4 { font-size: 18px; line-height: 19px; }
	h5 { font-size: 15px; line-height: 16px; }
	h6 { font-size: 14px; line-height: 15px; }
	
	.mobileclear {
	clear: both;
	display: block;
	overflow: hidden;
	}
	.mobilehide {
	visibility: hidden;
	height: 0px;
	min-height: 0px !important;
	}

}

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

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .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; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }