/*-

Description: This file includes Layers responsiveness.

Use this file as a reference for Custom CSS or to build
a child theme color scheme. Do not edit this file directly -
it is not loaded into the theme!!

Author: Obox Themes
Author URI: http://www.oboxthemes.com/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/



/*--------------------------------------------------------------*/
/*- SMALL SCREENS ----------------------------------------------*/
/*--------------------------------------------------------------*/
@media only screen and (max-width: 480px){

	/*---------------------------*/
	/*- SPAN - 1 ----------------*/
	.column.span-1{
		float: left;
		width: 15%;
		margin-right: 2%;
	}
	.column-flush.span-1{
		float: left;
		width: 16.6667%;;
	}
	.column.span-1:nth-child(6n+6),
	.column-flush.span-1:nth-child(6n+6){
		margin-right: 0;
	}

	/*---------------------------*/
	/*- SPAN - 2 ----------------*/
	.column.span-2{
		float: left;
		width: 48%;
		margin-right: 4%;
	}
	.column-flush.span-2{
		float: left;
		width: 50%;
		margin-right: 0%;	
	}
	.column.span-2:nth-child(2n),
	.column-flush.span-2:nth-child(2n+2){
		margin-right: 0;
	}

	/*---------------------------*/
	/*- CLEARING SPANS ----------*/
	.column.span-1:nth-child(6n+7),
	.column.span-2:nth-child(2n+3){
		clear: left;
	}

	/*---------------------------*/
	/*- MASONRY -----------------*/
	.container.list-masonry{
		padding: 0 20px;
	}
    .container.list-masonry .column{
    	position: static !important;
    }
}

/*--------------------------------------------------------------*/
/*- EVERYTHING BIGGER THAN A PHONE -----------------------------*/
/*--------------------------------------------------------------*/
@media only screen and (min-width: 481px){

	/*---------------------------*/
	/*- COLUMNS -----------------*/
	.column{
		float: left;
		margin-right: 2%;
	}
	.column-flush{
		float: left;
	}

	/*---------------------------*/
	/*- SPAN - 3 ----------------*/
	.column.span-3:nth-child(4n+4),
	.column-flush.span-4:nth-child(4n+4){
		margin-right: 0;
	}

	/*---------------------------*/
	/*- SPAN - 4 ----------------*/
	.column.span-4{
		float: left;
		width: 32%;
		margin-right: 2%;
	}
	.column-flush.span-4{
		float: left;
		width: 33.33333%;
	}
	.column.span-4:last-child,
    .column.span-4:nth-child(3n+3),
	.column-flush.span-4:nth-child(3n+3){
		margin-right: 0;
	}

	/*---------------------------*/
	/*- SPAN - 6 ----------------*/
	.column.span-6{
		width: 49%;
		margin-right: 2%;
	}
	.column-flush.span-6{
		width: 50%;
	}
	.column.span-6:nth-child(2n+2),
	.column-flush.span-6:nth-child(2n+2){
		margin-right: 0;
	}

}

/*--------------------------------------------------------------*/
/*-  AWKWARD SIZE BETWEEN PHONE LANDSCAPE AND TABS -------------*/
/*--------------------------------------------------------------*/
@media only screen and (min-width: 481px) and (max-width: 768px){

	/*---------------------------*/
	/*- SPAN - 2 ----------------*/
	.column.span-2{
		float: left;
		width: 32%;
		margin-right: 2%;
	}
	.column-flush.span-2{
		float: left;
		width: 33.33333%;
	}
	.column.span-2:nth-child(3n+3),
	.column-flush.span-2:nth-child(3n+3){
		margin-right: 0;
	}

	/*---------------------------*/
	/*- SPAN - 3 ----------------*/
	.column.span-3{
		float: left;
		width: 49%;
		margin-right: 2%;
	}
	.column-flush.span-3{
		float: left;
		width: 50%;
	}
	.column.span-3:nth-child(2n+2),
	.column-flush.span-3:nth-child(2n+2){
		margin-right: 0;
	}

	/*---------------------------*/
	/*- LARGE COLUMNS -----------*/
	.column.span-7,
	.column.span-8,
	.column.span-9,
	.column.span-10,
	.column.span-11,
	.column.span-12{
		float: none;
	}
	.column-flush.span-7,
	.column-flush.span-8,
	.column-flush.span-9,
	.column-flush.span-10,
	.column-flush.span-11,
	.column-flush.span-12{
		float: none;
	}

	/*---------------------------*/
	/*- CLEARING SPANS ----------*/
	.column.span-2:nth-child(3n+4),
	.column.span-3:nth-child(2n+3){
		clear: left;
	}

    /*---------------------------*/
    /*- SIDEBAR -----------------*/
    .column.sidebar{
        float: none;
        clear: both;
        width: 100%;
    }
    .column.sidebar .widget{
        float: left;
        width: 49%;
        margin-right: 2%;
    }
    .column.sidebar .widget:nth-child(2n+2){
        margin-right: 0;
    }
    .column.sidebar .widget:nth-child(2n+3){
        clear: left;
    }
}

/*--------------------------------------------------------------*/
/*- EVERYTHING UP TO TABLET ------------------------------------*/
/*--------------------------------------------------------------*/
@media only screen and (max-width: 768px){

	.header-inline .inline-right-nav{
		float: right;
		margin-right: 0;
	}

	.pull-left,
	.pull-right{
		float: none;
	}

    /*---------------------------*/
    /*- LAYERS BADGE ------------*/
    .created-using-layers{
        display: block;
        margin: 20px 0 -20px;
        padding: 5px 10px;
    }

}


@media only screen and (min-width: 601px) and (max-width: 860px){

	/*---------------------------*/
	/*- SPAN - 5 ----------------*/
	.column.span-5{
		width: 49%;
		margin-right: 2%;
	}
	.column-flush.span-5{
		width: 50%;
	}
	.column.span-5 + .span-5{
		margin-right: 0;
	}

	/*---------------------------*/
	/*- SPAN - 10 ---------------*/
	.column.span-10,
	.column-flush.span-10{
		width: 100%;
		margin-right: 0;
	}

	/*---------------------------*/
	/*- COMBINATIONS ------------*/
	.column.span-5 + .span-5 + .span-2{
		width: 100%;
	}

	.column.span-7 + .span-5{
		width: 40.5%;
	}
	.column-flush.span-7 + .span-5{
		width: 41.66665%;
	}
	
	.column.span-10 + .span-2{
		width: 49%;
	}
}

/*--------------------------------------------------------------*/
/*- EVERYTHING BIGGER THAN TABLETS -----------------------------*/
/*--------------------------------------------------------------*/
@media only screen and (min-width: 769px) {

/*-------------------------------*/
/*- GRIDS -----------------------*/

	/*---------------------------*/
    /*- COLUMN WIDTHS -----------*/
    .span-1{width: 6.5%;}
    .span-2{width: 15%;}
    .span-3{width: 23.5%;}
    .span-4{width: 33.33333%;}
    .span-5{width: 40.5%;}
    .span-7{width: 57.5%;}
    .span-8{width: 66%;}
    .span-9{width: 74.5%;}
    .span-10{width: 83%;}
    .span-11{width: 91.5%;}
    .span-12{
        clear: both;
        float: none;
	}

    /*---------------------------*/
    /*- FLUSH COLUMNS -----------*/
    .column-flush.span-1{width: 8.333333%;}
    .column-flush.span-2{width: 16.6667%;}
    .column-flush.span-3{width: 25%;}
    .column-flush.span-5{width: 41.66665%;}
    .column-flush.span-7{width: 58.1%;}
    .column-flush.span-8{width: 66.65%;}
    .column-flush.span-9{width: 74.7%;}
    .column-flush.span-10{width: 83%;}
    .column-flush.span-11{width: 91.3%;}
    .column-flush.span-12{width: 100%;}

    /*---------------------------*/
    /*- GUTTERS -----------------*/
    .offset-1{margin-right: 8.5%;}
    .offset-2{margin-right: 17%;}
    .offset-3{margin-right: 25.5%;}
    .offset-4{margin-right: 34%;}
    .offset-5{margin-right: 42.5%;}
    .offset-6{margin-right: 51%;}
    .offset-7{margin-right: 59.5%;}
    .offset-8{margin-right: 68%;}
    .offset-9{margin-right: 76.5%;}
    .offset-10{margin-right: 85%;}
    .offset-11{margin-right: 93.5%;}

    .offset-left-1{margin-left: 8.5%;}
    .offset-left-2{margin-left: 17%;}
    .offset-left-3{margin-left: 25.5%;}
    .offset-left-4{margin-left: 34%;}
    .offset-left-5{margin-left: 42.5%;}
    .offset-left-6{margin-left: 51%;}
    .offset-left-7{margin-left: 59.5%;}
    .offset-left-8{margin-left: 68%;}
    .offset-left-9{margin-left: 76.5%;}
    .offset-left-10{margin-left: 85%;}
    .offset-left-11{margin-left: 93.5%;}

    .pull-left-1{margin-left: -8.5%;}
    .pull-left-2{margin-left: -17%;}
    .pull-left-3{margin-left: -25.5%;}
    .pull-left-4{margin-left: -34%;}
    .pull-left-5{margin-left: -42.5%;}
    .pull-left-6{margin-left: -51%;}
    .pull-left-7{margin-left: -59.5%;}
    .pull-left-8{margin-left: -68%;}
    .pull-left-9{margin-left: -76.5%;}
    .pull-left-10{margin-left: -85%;}
    .pull-left-11{margin-left: -93.5%;}

    .pull-right-1{margin-right: -8.5%;}
    .pull-right-2{margin-right: -17%;}
    .pull-right-3{margin-right: -25.5%;}
    .pull-right-4{margin-right: -34%;}
    .pull-right-5{margin-right: -42.5%;}
    .pull-right-6{margin-right: -51%;}
    .pull-right-7{margin-right: -59.5%;}
    .pull-right-8{margin-right: -68%;}
    .pull-right-9{margin-right: -76.5%;}
    .pull-right-10{margin-right: -85%;}
    .pull-right-11{margin-right: -93.5%;}

    /*---------------------------*/
    /*- MARGIN RESET ------------*/
    .row .span-1:nth-child(12n+12),
    .row .span-2:nth-child(6n+6),
    .row .span-4:nth-child(3n+3),
    .row .span-6:nth-child(2n+2){
    	margin-right: 0;
    }

    /*---------------------------*/
    /*- CLEAR RESET -------------*/    
    .row .span-2:nth-child(6n+7)
    .row .span-3:nth-child(4n+5),
	.row .span-4:nth-child(3n+4),
	.row .span-6:nth-child(2n+3){
		clear: left;
	}

	/*---------------------------*/
	/*- EXCEPTIONS --------------*/
	.column.span-9 + .column.span-3{
		margin-right: 0;
	}
    .column.span-12,
    .column-flush.span-12{
        margin-right: 0;
    }

/*-------------------------------*/
/*- HEADERS ---------------------*/

    .header-site .container{
        padding: 20px;
    }

    /*---------------------------*/
    /*- NAV DISPLAY -------------*/
	.nav-horizontal ul{
		display: inline-block;
	}
	.responsive-nav{
		display: none;
	}

	/*---------------------------*/
    /*- ALIGNMENT CENTER --------*/
    .header-center{
        text-align: center;
    }
    .header-center .logo{
        float: none;
    }
    .header-center .site-description{
        display: block;
        margin: 0;
    }
    .header-center .site-logo-link + .site-description{
        margin: 10px 0 0;
    }
    .header-center .site-logo-link + .tagline{
        margin-top: 10px;
    }
    .header-center nav{
        clear: both;
        float: none;
        margin-top: 20px;
        text-align: center;
        line-height: 20px;
    }

    /*---------------------------*/
    /*- ALIGNMENT INLINE --------*/
    .header-inline .logo{
        text-align: center;
    }
    .header-inline .site-description{
        display: block;
        margin: 0;
    }
    .header-inline .site-logo-link + .site-description{
        margin-top: 10px;
    }
    .header-inline .column{
    	margin: 0;
    }

    .header-inline .inline-left-nav{
    	float: left;
    	width: 40.5%;
    	text-align: right;
    }
    .header-inline .inline-right-nav{
    	float: right;
    	width: 40.5%;
    	text-align: left;
        position: relative;
        z-index: 2;
    }
    .header-inline .inline-right-nav nav{
    	float: none;
    }
    .header-inline .inline-site-logo{
    	width: 15%;
    	margin: 0 2%;
        z-index: 1;
    }

	/*---------------------------*/
    /*- NAV BOTTOM --------------*/
    .nav-clear .logo{
        float: none;
    }
    .nav-clear .site-logo-link + .sitename{
        margin-top: 10px;
    }
    .nav-clear .site-logo-link + .tagline{
        margin-top: 10px;
    }
    .nav-clear nav{
        display: block;
        float: none;
        clear: both;
        margin: 20px 0 0;
        line-height: 20px;
    }

	/*---------------------------*/
    /*- STICKY HEADER VARIATIONS */

		/*-----------------------*/
		/*- HEADER CENTER -------*/
		.header-sticky.is_stuck.header-center .logo{
	    	display: none;
	    }
	    .header-sticky.is_stuck.header-center nav{
	    	margin-top: 0;
	    }

		/*-----------------------*/
		/*- NAV BOTTOM ----------*/
	    .header-sticky.is_stuck.nav-clear .logo{
	    	display: none;
	    }
	    .header-sticky.is_stuck.nav-clear nav{
	    	margin-top: 0;
	    }

		/*-----------------------*/
		/*- HEADER INLINE -------*/
		.header-sticky.is_stuck.header-inline .site-description{
			display: none;
		}

/*-------------------------------*/
/*- THUMBNAILS ------------------*/

	/*---------------------------*/
	/*- OVERLAY -----------------*/
    .with-overlay{overflow: hidden;}
    .with-overlay .thumbnail-body{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        visibility: hidden;
        opacity: 0;
        transition: 0.2s all ease-in-out;
        text-align: center;
    }
    .with-overlay .overlay{
        display: block;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .with-overlay .heading{
        opacity: 0;
        transform: translate3d(0, 10px, 0);
        transition: 0.2s all ease-in-out 0.1s;
    }
    .with-overlay .heading a{
        color: #fff;
    }

    .with-overlay .button{
        margin-top: 15px;
        position: relative;
        opacity: 0;
        transform: translate3d(0, 10px, 0);
        transition: transform 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.25s;
    }

    .with-overlay .excerpt{display: none;}
    .with-overlay .meta-info{display: none;}

        /*-----------------------*/
        /*- OVERLAY HOVER -------*/
        .with-overlay:hover .thumbnail-media img{
            transform: scale(1.08);
        }
        .with-overlay:hover .thumbnail-body{
            visibility: visible;
            opacity: 1;
        }
        .with-overlay:hover .heading{
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
        .with-overlay:hover .button{
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }

/*-------------------------------*/
/*- OFF CANVAS MENU -------------*/

    /*---------------------------*/
    /*- OFF CANVAS MENU ---------*/
    section[class*=' off-canvas-'] .nav-mobile{
        display: none;
    }

}

@media only screen and (min-width: 1100px){

    /*---------------------------*/
    /*- LAYERS BADGE ------------*/
    .created-using-layers{
        display: block;
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 30px;
        height: 27px;
        z-index: 99;
        transition: all 0.15s ease-in-out;
    }
    .created-using-layers span{
        display: none;
    }
    .created-using-layers:after{
        border-radius: 100px;
        position: absolute;
        bottom: 6px;
        left: -160px;
        z-index: 1;
        content: attr(tooltip);
        padding: 4px 6px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.1s ease-in-out 0.1s;
    }
    .created-using-layers:hover{
        background-position: bottom;
    }
    .created-using-layers:hover:after{
        opacity: 1;
        visibility: visible;
        left: -164px;
    }
}

@media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) {
/*-------------------------------*/
/*- FORMS -----------------------*/

	/*---------------------------*/
	/*- GENERAL -----------------*/
	textarea, input, select, button{
		font-size: 1.3rem;
	}
	input[type=email],
	input[type=text],
	input[type=password],
	input[type=number]{
		height: 32px;
		font-size: 1.3rem;
	}

	/*---------------------------*/
	/*- FORM ROWS ---------------*/
	.form-row{
		margin-bottom: 15px;
	}

    /*---------------------------*/
    /*- PREPENDS + APPENDS ------*/
    .input-prepend,
    .input-append{
    	line-height: 28px;
    }
    .input-prepend .add-on,
    .input-append .add-on{
    	font-size: 1.3rem;
    }

/*-------------------------------*/
/*- NAVIGATION ------------------*/

    /*---------------------------*/
    /*- HORIZONTAL NAV ----------*/
	.nav-horizontal ul{
		display: none;
	}
	.nav-horizontal .responsive-nav{
		display: block;
	}

	/*---------------------------*/
    /*- TABBED NAV --------------*/
	.nav-tabs{
		padding: 5px;
	}
	.nav-tabs li{
		width: 50%;
		padding: 5px;
		margin: 0;
	}

	/*---------------------------*/
    /*- PILL NAV ----------------*/
	.nav-pills{
		display: block;
	}
	.nav-pills li{
		width: 50%;
		padding: 0 10px 10px 0;
		margin: 0;
		text-align: center;
	}

	/*---------------------------*/
    /*- VERTICAL NAV SUB MENUS --*/
    .nav-vertical{
    	display: block;
    }
	.nav-vertical .sub-menu{
		width: auto;
		position: static;
		visibility: visible;
		opacity: 1;
		left: auto;
		right: auto;
		top: auto;
		box-shadow: none;
		border: none;
		font-size: 1.2rem;
	}
	.nav-vertical .sub-menu .sub-menu{
		margin-left: 10px;
	}
	.nav-vertical .sub-menu li{
		border: none;
		width: auto;
	}

/*-------------------------------*/
/*- SLIDER ----------------------*/

    /*---------------------------*/
    /*- SWIPE ITEM --------------*/
    .swiper-slide .copy-container{
    	float: none !important;
    	width: auto !important;
    	text-align: center !important;
    }
    .swiper-slide .image-container{
    	float: none !important;
    	width: auto !important;
    	text-align: center !important;
    }

    /*---------------------------*/
    /*- PAGINATION --------------*/
    .swiper-container .pages{
    	bottom: 16px;
    	opacity: 1;
    }

    /*---------------------------*/
	/*- ARROWS ------------------*/
	.swiper-container .arrows{
		display: none;
	}

/*-------------------------------*/
/*- CONTENT ---------------------*/

    /*---------------------------*/
	/*- META INFO ---------------*/
	.single .meta-item{
		display: block;
	}

/*-------------------------------*/
/*- COMPONENTS ------------------*/

    /*---------------------------*/
    /*- MARKETING BLOCK ---------*/
	.media.image-right .media-image,
	.media.image-left .media-image{
        float: none;
        max-width: none;
        margin: 0 0 20px;
    }

/*-------------------------------*/
/*- FOOTERS ---------------------*/

	/*---------------------------*/
	/*- COLUMNS -----------------*/
    .footer-site .column{
		margin-bottom: 40px;
	}

    /*---------------------------*/
	/*- COPYRIGHT ---------------*/
	.copyright .column{
		margin-bottom: 10px;
	}
	.copyright .column:last-child{
		margin-bottom: 0;
	}
	.copyright .logo{
		display: none;
	}
	.copyright .t-right{
		text-align: left;
	}
	.copyright .pull-right{
		float: none;
	}
	.copyright .nav-horizontal{
		margin-top: 10px;
	}
	.copyright .nav-horizontal li{
		margin: 0 10px 0 0;
	}

    /*---------------------------*/
	/*- BACK TO TOP -------------*/
	#back-to-top{
		display: none;
	}

}