/*
 * Responsive 
 * media queries and responsive elements for the theme
 */


/*Smaller Laptops*/

@media screen and (min-width: 1025px) and (max-width: 1300px){

}


/*Tablet*/
@media screen and (min-width: 679px) and (max-width: 1024px){
	
	/*---Univeral Elements ---*/
	.site-content, 
	.site-header, 
	.site-footer, 
	.site-above-footer, 
	.site-below-footer, 
	.site-newsletter, 
	.banner-image-slider, 
	.banner-image{
		width: 95%;
	}
	.site-content{
		padding-left: 25px;
		padding-right: 25px;
	}
	
	
	/*---Responsive Containers ---*/
	/*standard responsive*/
	/*(Full width container unchanged)*/
	.responsive-grid .column-1-1{
		width: 100%;
		margin: 0% 0% 2.5% 0%;
	}
	/*(All other containers to be 50% wide on medium devices)*/
	.responsive-grid .column-2-3,
	.responsive-grid .column-1-3,
	.responsive-grid .column-1-2,
	.responsive-grid .column-1-4,
	.responsive-grid .column-1-5,
	.responsive-grid .column-1-6,
	.responsive-grid div[class*='column-']{
		width: 47.5%;	
		margin: 0% 1.25% 2.5% 1.25%; 
		padding: 0%;
		clear: none;
	}
	/*odd containers*/
	.responsive-grid .column-2-3:nth-of-type(odd),
	.responsive-grid .column-1-3:nth-of-type(odd),
	.responsive-grid .column-1-2:nth-of-type(odd),
	.responsive-grid .column-1-4:nth-of-type(odd),
	.responsive-grid .column-1-5:nth-of-type(odd),
	.responsive-grid .column-1-6:nth-of-type(odd),
	.responsive-grid div[class*='column-']:nth-of-type(odd){
		width: 48.5%;
		margin: 0% 1.5% 3.0% 0%;
		padding: 0%;
		clear: left;
		
	}
	/*even containers*/
	.responsive-grid .column-2-3:nth-of-type(even),
	.responsive-grid .column-1-3:nth-of-type(even),
	.responsive-grid .column-1-2:nth-of-type(even),
	.responsive-grid .column-1-4:nth-of-type(even),
	.responsive-grid .column-1-5:nth-of-type(even),
	.responsive-grid .column-1-6:nth-of-type(even),
	.responsive-grid div[class*='column-']:nth-of-type(even){
		width: 48.5%;
		margin: 0% 0% 3.0% 1.5%;
		padding: 0%;
		clear: right;
	}
	
	
	/*listings inside responsove containers*/
	/*any post listing or testimonial inside a responsive container is made 100% wide*/
	.responsive-grid div[class*='column-'] .post-listing .post,
	.responsive-grid div[class*='column-'] .post-listing.one-column .post,
	.responsive-grid div[class*='column-'] .post-listing.two-column .post,
	.responsive-grid div[class*='column-'] .post-listing.three-column .post{
		width: 100%;
		margin: 0% 0% 3% 0%;
	}
	
}

/*Phone*/
@media screen and (max-width: 678px){
	
	
	/*---Universal---*/
	.site-content, 
	.site-header, 
	.site-footer, 
	.site-above-footer, 
	.site-below-footer, 
	.site-newsletter, 
	.banner-image-slider{
		width: 95%;
	}
	
	/*---Header---*/
	.site-header .site-branding{
		float: left;
		width: 100%;
		margin-bottom: 7px;
	}
	.site-header .logo-main{
		float: left;
		width: 70%;
		margin-bottom: 10px;
		text-align: left;
	}
	.site-header .logo-main img{
		max-height: 90px;
	}
	
	.site-header .login-section{
		position: relative;
		width: 100%;
		text-align: center;
		clear: both;
	}
	.site-header .login-section .button{
		padding: 4px 12px;
	}
	
	.site-header .social-media{
		width: 50%;
		text-align: left;
	}
	.site-header .social-media .icon {
		width: 35px;
		height: 35px;
		line-height: 35px;
	}
	
	/*---Mobile Nav Menu ---*/
	/*menu toggle*/
	.site-header .mobile-menu-toggle{
		display: block;
		float: right;
		width: 30%;
		text-align: right;
	}
	.site-header .mobile-menu-toggle i {
	    background-color: #ccc;
	    width: 40px;
	    height: 40px;
	    line-height: 40px;
	    text-align: center;
	    cursor: pointer;
	    color: #fff;
        font-size: 130%;
	}
	.site-header .mobile-menu-toggle i.active{
		background: #ddd;
	}
	
	/*desktop menu*/
	.site-navigation .desktop_menu{
		display: none;
	}
	/*mobile menu*/
	.site-navigation .mobile_menu{
		display: block;
	}
	
	.site-navigation{
		float: left;
		width: 100%;
		position: relative;
	}
	.site-navigation ul{
		text-align: left;
		width: 100%;
		display: block;
		height: 0px;
		overflow: hidden;
		position: absolute;
		top: 0px;
		z-index: 999;
		-webkit-transition: height 450ms ease-in;
		-moz-transition: height 450ms ease-in;
		-ms-transition: height 450ms ease-in;
		transition: height 450ms ease-in;
	}

	/*universal*/
	.site-navigation li{
		display: block;
	}
	.site-navigation .mobile_menu > li:first-child a{
		border-top: solid 1px #eee;
	}
	.site-navigation a{
		background: #F9F9F9;
		border-bottom: solid 1px #eee;
		border-left: solid 1px #eee;
		border-right: solid 1px #eee;
	}
	.site-navigation a:hover,
	.site-navigation a:active{
		background: #eee;
	}
	/*sub-menu*/
	.site-navigation .sub-menu,
	.site-navigation .sub-menu ul{
		position: relative;
		padding: 0%;
		z-index: auto;
		float: none;
		top: 0%;
		left: 0%;
		height: auto;
	}
	.site-navigation .sub-menu li > a{
		width: 100%;
	}

	
	.site-navigation ul ul li:hover > ul, 
	.site-navigation ul ul li.focus > ul{
		left: 0%;
	}
	/*fancy blue line*/
	.site-navigation .menu > li > a:after,
	.site-navigation .menu > li.current_page_item > a:after, 
	.site-navigation .menu > li.current-menu-item > a:after, 
	.site-navigation .menu > li.current_page_ancestor > a:after{
		display: none;
	}
	
	/*next and previous*/
	.comment-navigation .nav-previous,
	.posts-navigation .nav-previous,
	.post-navigation .nav-previous,
	.comment-navigation .nav-next,
	.posts-navigation .nav-next,
	.post-navigation .nav-next  {
		width: 100%;
		text-align: center;
		margin-bottom: 10px;
	}
	
	.comment-navigation .nav-previous a,
	.posts-navigation .nav-previous a,
	.post-navigation .nav-previous a,
	.comment-navigation .nav-next a,
	.posts-navigation .nav-next a,
	.post-navigation .nav-next a{
		width: 100%;
	}

	
	
	
	
	
	/*---Banner Slider---*/
	.banner-image-slider .slides{
		
	}
	
	/*---Inner Container ---*/
	.site-content{
		padding-left: 10%;
		padding-right: 10%;	
		display: -webkit-box;
		display: -ms-flexbox;
		display: -moz-box;
		display: -webkit-flex;
		display: flex;
		-moz-box-lines: single;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	
	/*Primary and Secondary containers---*/
	.site-content > .widget-area ~ .content-area{
		width: 100%;
		margin: 0%;
		-ms-flex-order: 1;
		-webkit-order: 1;
		-moz-box-ordinal-group: 1;
		order: 1;
	}
	.site-content > .widget-area{
		width: 100%;
		margin: 0% 0% 25px 0%;
		-ms-flex-order: 2;
		-webkit-order: 2;
		-moz-box-ordinal-group: 2;
		order: 2;
	}
	

	
	/*---Grid / Row Listings---*/
	.post-listing.grid .post,
	.post-listing.grid.one-column .post,
	.post-listing.grid.two-column .post,
	.post-listing.grid.three-column .post,
	.post-listing.grid .post:nth-of-type(1n),
	.post-listing.grid.one-column .post:nth-of-type(1n),
	.post-listing.grid.two-column .post:nth-of-type(1n),
	.post-listing.grid.three-column .post:nth-of-type(1n){
		width: 100%;
		margin: 0% 0% 25px 0%;
	}
	
	/*---Testimonail Listings---*/
	.testimonials-list.two-column .testimonial,
	.testimonials-list.two-column .testimonial:nth-of-type(1n){
		width: 100%;
		margin: 0% 0% 25px 0%;
	}
	.testimonials-list .testimonial{
		padding: 15px;
	}
	.testimonial .button{
		float: left;
		margin-top: 10px;
		clear: both;
	}
	
	
	/*---Responsive Containers ---*/
	/*(All contains to be 100% wide on small devices)*/
	/*standard*/
	.responsive-grid .column-1-1,
	.responsive-grid .column-2-3,
	.responsive-grid .column-1-3,
	.responsive-grid .column-1-2,
	.responsive-grid .column-1-4,
	.responsive-grid .column-1-5,
	.responsive-grid .column-1-6,
	.responsive-grid div[class*='column-'],
	.responsive-grid div[class*='has-pad column-']:last-of-type{
		width: 100%;	
		padding: 0px;
		margin: 0px 0px 20px 0px!important;
	}
	
	/*any article or content inside of a responsive column is compressed*/
	.responsive-grid .hentry,
	.responsive-grid .entry-content{
		margin-bottom: 0px;
	}
	
	/*---Contact Us Card Widgets*/
	.site-above-footer .widget-area .widget,
	.site-above-footer .widget-area .widget:nth-of-type(1n){
		width: 100%;
		margin: 0% 0% 35px 0%;
	}
	.site-above-footer .widget-area .widget:last-of-type{
		margin-bottom: 0px;
	}
	
	
	/*---Forms---*/
	.vfb-name-block > .vfb-form-group{
		width: 100%;
		margin-bottom: 15px;
	}
	.vfb-name-block > .vfb-form-group > div{
		width: 100%;
		padding: 0px;
	}
	
	/*---Footer---*/
	.site-footer .widget-area,
	.site-footer .widget-area:nth-of-type(1n){
		width: 100%;
		margin: 0% 0% 25px 0%;	
	}

}