/* ----------------------------------------------------------------------
	Media Queries
/* ---------------------------------------------------------------------- */


/* ----------------------------------------------------------------------
	For Small Desktop Devices [ 960px ]
/* ---------------------------------------------------------------------- */
@media only screen and (max-width: 1200px) {


	/* Basic Elements & Classes
 	 ---------------------------------------------------------------------- */
 	body { font-size:  13px; }
 	 

	/* Layout and content
	 ---------------------------------------------------------------------- */

	/* Container */
	.container { width: 960px; }

			
		/* Columns
		 -------------------------------- */
		.col-1-1, .col-1-2, .col-1-3, .col-2-3, .col-1-4, .col-3-4 {
			margin-right: 20px;
		}
		.col-1-2 { width: 460px; }
		.col-1-3 { width: 300px; }
		.col-1-4 { width: 220px; }
		.col-2-3 { width: 620px; }
		.col-3-4 { width: 700px; }

		.col-1-2 .col-1-2 { width: 220px; }


		/* Main
		 -------------------------------- */
		#main, #main.main-medium { width: 700px; }
		#main.main-right { margin-left: 20px; }
		#main.main-left { margin-right: 20px; }


		/* Sidebar
		 -------------------------------- */
		.sidebar, .sidebar.main-medium { width: 220px; }


	/* Sections
 	 ---------------------------------------------------------------------- */


	/* Elements
 	---------------------------------------------------------------------- */


 	/* Fancy Tab Heading
 	------------------------------------ */
	.fancy-tab-heading {
		min-width: 100%;
	}


	/* Masonry grids
	 ------------------------------------ */
	.masonry { margin-right: -20px; }


	/* Buttons
 	------------------------------------ */

 	/* Fancy Button */
 	.fancy-button { min-width: 100%; }
	
}


/* ----------------------------------------------------------------------
	For Tablet Devices [ 748px ]
/* ---------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 980px) {


	/* Layout and content
	 ---------------------------------------------------------------------- */

	/* Container */
	.container { width: 748px; }
		.container img { 
			max-width:100%;
			max-height:100%;
		}
			

		/* Columns
		 -------------------------------- */
		.col-1-2 { width: 364px; }
		.col-1-3 { width: 236px; }
		.col-2-3 { width: 492px; }
		.col-1-4 { width: 236px; }
		.col-3-4 { width: 492px; }

		.col-1-2 .col-1-2 { width: 100%; margin-right: 0; margin-bottom: 0 }

		/* Main
		 -------------------------------- */
		#main, #main.main-medium { width: 556px; }
		#main.main-right { margin-left: 20px; }
		#main.main-left { margin-right: 20px; }


		/* Sidebar
		 -------------------------------- */
		.sidebar, .sidebar.main-medium { width: 172px; }


	/* Navigation
	 ---------------------------------------------------------------------- */


 	/* Main Navigation
	 -------------------------------- */

	/* Menu height */
 	#main-nav-wrapper, #main-nav { height: 64px; }
 	#search-wrap { top:64px; }

	/* Navigation list */
 	#nav { display: none; }

	/* Responsive Nav */
	.dl-menuwrapper {
		float: right;
		display: block;
		position: absolute;
		right: 0px;
		top:0;
	}


	/* Icon navigation
	 -------------------------------- */
	#icon-nav { 
		position: absolute;
		right: 60px;
		top: 0;
		border: 0;
		z-index: 100;
		margin-top: 34px;
	}
	#icon-nav a span { font-size: 18px; }


 	/* Logo
	 -------------------------------- */
	#logo { }


	/* Sections
 	---------------------------------------------------------------------- */

 	/* Intro Slider
 	------------------------------------ */

	/* Caption */
	.intro-slider .caption-title {
		font-size: 24px;
	}


	/* Elements
 	 ---------------------------------------------------------------------- */


 	/* Carousel
 	------------------------------------ */
 	.carousel .col-1-4 {
 		width: 172px;
 	}


 	/* Fancy Tab Heading
 	------------------------------------ */
	.fancy-tab-heading {
		min-width: 100%;
	}


 	/* Buttons Thumb
 	--------------------------------*/
 	.buttons-thumb .inner h2 {
		overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    text-overflow: ellipsis;
	    -o-text-overflow: ellipsis;
	    -ms-text-overflow: ellipsis;
	    padding-right: 30px;
	}


	/* Tabs
	 ------------------------------------ */
	ul.tabs { 
		width:100%;
		height: auto;
		border: none;
		overflow: hidden;
	}
		ul.tabs li { 
			width: 100%;
		}
		ul.tabs li a { 
			margin: 0;
			width: 100%;
			border-width: 0px 1px 1px 1px;
		}
		ul.tabs li:first-child a { border-width: 1px 1px 1px 1px;}


	/* Buttons
 	------------------------------------ */

 	/* Fancy Button */
 	.fancy-button { min-width: 100%; }

}


/* ----------------------------------------------------------------------
	For Mobile Devices [ 300px ]
/* ---------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

	/* Layout and content
	 ---------------------------------------------------------------------- */	

	/* Container */
	.container { width: 300px; }
		.container img { 
			max-width: 100%;
			max-height:100%;
		}
		
			
		/* Columns
		 -------------------------------- */
		.col-1-2,
		.col-1-3,
		.col-1-4,
		.col-1-5,
		.col-2-3,
		.col-3-4 { 
			width: 300px;
			margin-right:0;
		}
		.flex-col-1-2, 
		.flex-col-1-3,
		.flex-col-1-4,
		.flex-col-1-5  { 
			width: 50%;
		}
		.col-1-2 .col-1-2 { width: 100%; margin-right: 0; margin-bottom: 0 }

		/* Main
		 -------------------------------- */
		#main, #main.main-medium { width: 100% }
		#main.main-right { margin-left: 0; }
		#main.main-left { margin-right: 0; }


		/* Sidebar
		 -------------------------------- */
		.sidebar, .sidebar.main-medium { width: 100% }


	/* Navigation
	 ---------------------------------------------------------------------- */


 	/* Main Navigation
	 -------------------------------- */

	/* Menu height */
 	#main-nav-wrapper, #main-nav { height: 64px; }
 	#search-wrap { top:64px; }

	/* Navigation list */
 	#nav { display: none; }

	/* Responsive Nav */
	.dl-menuwrapper {
		float: right;
		display: block;
		position: absolute;
		right: 0px;
		top:0;
	}


	/* Icon navigation
	 -------------------------------- */
	#icon-nav { 
		position: absolute;
		right: 60px;
		top: 0;
		border: 0;
		z-index: 100;
		margin-top: 34px;
	}
	#icon-nav a span { font-size: 18px; }


	/* Sections
 	---------------------------------------------------------------------- */

 	/* Intro Slider
 	------------------------------------ */

	/* Caption */
	.intro-captions {
		display: none;
	}
	.intro-slider .carousel-slider.owl-theme .owl-controls { display: none !important; }


 	/* Elements
 	 ---------------------------------------------------------------------- */

 	/* Buttons Thumb
 	--------------------------------*/
 	.buttons-thumb .inner a { font-size: 13px; }


	/* Tabs
	 ------------------------------------ */
	ul.tabs { 
		width:100%;
		height: auto;
		border: none;
		overflow: hidden;
	}
		ul.tabs li { 
			width: 100%;
		}
		ul.tabs li a { 
			margin: 0;
			width: 100%;
			border-width: 0px 1px 1px 1px;
		}
		ul.tabs li:first-child a { border-width: 1px 1px 1px 1px;}



	/* Plugins
 	 ---------------------------------------------------------------------- */

 	/* Carousel
 	 -------------------------------- */
 	.carousel-item { margin: 0; }


}


/* ----------------------------------------------------------------------
	For Mobile Devices [ 440px ] [ Horizontal ]
/* ---------------------------------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	

	/* Layout and content
	 ---------------------------------------------------------------------- */

	/* Container */
	.container { width: 440px; }

		/* Columns
		 -------------------------------- */
		.col-1-2,
		.col-1-3,
		.col-1-4,
		.col-1-5,
		.col-2-3,
		.col-3-4 { 
			width: 440px;
			margin-right:0;
		}
		.flex-col-1-3,
		.flex-col-1-2,
		.flex-col-1-4,
		.flex-col-1-5 { 
			width: 50%;
		}


	/* Sections
 	---------------------------------------------------------------------- */


	/* Plugins
 	 ---------------------------------------------------------------------- */

		/* Carousel
	 	 ------------------------------------ */
		.carousel-item {
			width: 200px;
			margin: 0 10px;
		}
}