/*
 * ************************************************************* *
 * Name        : mediaqueries.css                                *
 * Theme URI   :                                                 *
 * Description : Mediaqueries stylesheet for responsive design.  *
 * Version     : Version 1                                       *
 * Author      : CreativeMilk                                    *
 * Author URI  : www.creativemilk.net                            *
 * Updated     : 2013-12-28 11:14:47 UTC+02:00                   *
 * Copyright   : (c) 2012 CreativeMilk                           *
 * ************************************************************* *
 */

@media only screen and (min-width : 300px){
	#sidebar-main,
	#toggle-right-sidebar,
	#logo-big{
		display : none;
	}
	#logo-small,
	#responsive-menu-trigger{
		display : block;
	}
	#header-main{
		margin : 0 -1px;
	}
	#sidebar-sec,
	[data-toggle-sidebar]{
		display : none;
	}
	.header-main-bottom{
		border-left-width  : 0;
		border-right-width : 0;
	}	
	#main{
		margin : 0;
	}
	#content{
		border-left-width  : 0;
		border-right-width : 0;
		margin-right       : -1px;
	}
	.footer-sticky .footer-main-inner{
		margin : 0 -1px;
	}
	.ext-tabs > li > a{
		padding : 0 10px;
	}
	.ext-tabs.tabs-negative-position{
		width  : 100%;
		margin : -1px -1px 0 -1px;
	}
}

@media only screen and (min-width : 768px){
	#sidebar-main,
	#toggle-right-sidebar,
	#logo-big{
		display : none;
	}
	#logo-small,
	#responsive-menu-trigger{
		display : block;
	}
	#header-main{
		margin : 0 -1px;
	}
	#sidebar-sec,
	[data-toggle-sidebar]{
		display : none;
	}
	.header-main-bottom{
		border-left-width  : 0;
		border-right-width : 0;
	}
	#main{
		margin : 0;
	}
	#content{
		border-left-width  : 0;
		border-right-width : 0;
		margin-right       : -1px;
	}
	.footer-sticky .footer-main-inner{
		margin : 0 -1px;
	}
	.ext-tabs > li > a{
		padding : 0 20px;
	}
	.ext-tabs.tabs-negative-position{
		width         : auto;
		margin        : -30px 0 0 0;
		border-bottom : none;
	}
}

@media only screen and (min-width : 1000px){
	#sidebar-main,
	#toggle-right-sidebar,
	#logo-big{
		display : block;
	}
	#logo-small,
	#responsive-menu-trigger{
		display : none;
	}
	#header-main{
		margin : 0 -1px 0 0;
	}
	#sidebar-sec,
	[data-toggle-sidebar]{
		display : none;
	}
	.header-main-bottom{
		border-left-width  : 1px;
		border-right-width : 0;
	}
	#main{
		margin : 0 0 0 240px;
	}
	#content{
		border-left-width  : 1px;
		border-right-width : 0;
		margin-right       : -1px;
	}
	.footer-sticky .footer-main-inner{
		margin : 0 -1px 0 240px;
	}
	.ext-tabs > li > a{
		padding : 0 20px;
	}
	.ext-tabs.tabs-negative-position{
		width         : auto;
		margin        : -30px 0 0 0;
		border-bottom : none;
	}
}

@media only screen and (min-width : 1200px){
	#sidebar-main,
	#toggle-right-sidebar,
	#logo-big{
		display : block;
	}
	#logo-small,
	#responsive-menu-trigger{
		display : none;
	}
	#header-main{
		margin : 0;
	}
	#sidebar-sec,
	[data-toggle-sidebar]{
		display : block;
	}
	.header-main-bottom{
		border-left-width  : 1px;
		border-right-width : 0;
	}
	#main{
		margin : 0 0 0 240px;
	}
	#content{
		border-left-width  : 1px;
		border-right-width : 0;
		margin-right       : 0;
		margin-left        : 0;
	}
	.footer-sticky .footer-main-inner{
		margin : 0 0 0 240px;
	}
	.ext-tabs > li > a{
		padding : 0 20px;
	}
	.ext-tabs.tabs-negative-position{
		width         : auto;
		margin        : -30px 0 0 0;
		border-bottom : none;
	}	
}

/* Switch between timeline layout( left + right = left) */

@media all and (max-width : 1000px){
	.timeline{
		margin-right        : 20px;
		background-position : top right;
	}
	.timeline-label{
		float  : right;
		margin : 0 49px 20px 0;
	}
	.timeline-leftside,
	.timeline-rightside{
		float : left;
		clear : both;
		width : 100%;
	}
	.timeline-event,
	.timeline-rightside .timeline-event{
		margin : 0 50px 20px 0;
	}
	.timeline-connector-line,
	.timeline-rightside .timeline-connector-line{
		right : -42px;
		left  : auto;
	}
	.timeline-connector-dot,
	.timeline-rightside .timeline-connector-dot{
		right : -56px;
		left  : auto;
	}
	.timeline-connector-circle,
	.timeline-rightside .timeline-connector-circle{
		right : -70px;
		left  : auto;
	}
	.timeline-connector-label,
	.timeline-rightside .timeline-connector-label{
		right : -80px;		
		left  : auto;
	}
	.timeline-rightside .timeline-connector-arrow{
		right        : -9px;
		left         : auto;
		border-right : none;
	}
	.timeline-rightside .timeline-connector-arrow:after{
		right        : auto;
		left         : -10px;
		border-right : none;
	}
}

/* Used for the rater lines (breakpoint-lg is trigger at 1200 px)*/

@media all and (max-width : 1200px){
	.breakpoint-lg, 
	.breakpoint-lg{
		float    : left;
		height   : 1px;
		width    : 100%;
		position : relative;
		left     : 0;
		right    : 0;
	}
	.breakpoint-lg-hide{
		display : none;
	}
}

/* Used for the rater lines (breakpoint-md is trigger at 992 px)*/

@media all and (max-width : 992px){
	.breakpoint-md, 
	.breakpoint-md{
		float    : left;
		height   : 1px;
		width    : 100%;
		position : relative;
		left     : 0;
		right    : 0;
	}
	.breakpoint-md-hide{
		display : none;
	}
}

/* Used for the rater lines (breakpoint-sm is trigger at 768 px)*/

@media all and (max-width : 768px){
	.breakpoint-sm, 
	.breakpoint-sm{
		float    : left;
		height   : 1px;
		width    : 100%;
		position : relative;
		left     : 0;
		right    : 0;
	}
	.breakpoint-sm-hide{
		display : none;
	}
}