/*
 * Devices
 * min 1200
 * min 1024
 * max 1024
 * max 768
 * max 640
 * max 480
 * max 320
 */
#responsive-utils .hide-element {
	display: none !important;
	visibility: hidden !important;
}

#responsive-utils .show-element {
	display: block !important;
	visibility: visible !important;
}

#responsive-utils .full-size {
	float: none !important;
	display: block !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

#responsive-utils .half-size {
	width: 50% !important;
}

#responsive-utils .container-desktop {
	width: 940px !important;
}

#responsive-utils .container-phone {
	width: 100% !important;
}

#responsive-utils .container-phone2 {
	width: 100% !important;
}

#responsive-utils .container-phone3 {
	width: 100% !important;
}

#responsive-utils .container-phone4 {
	width: 100% !important;
}

#responsive-utils .container-tablet {
	width: 720px !important;
}

#responsive-utils .container-large {
	width: 1140px !important;
}

#responsive-utils .container-phone {
	padding: 0 10px;
}

/* Desktop */
@media screen and (min-width: 800px) {
	.no-desktop {
		display: none !important;
		visibility: hidden !important;
	}
}

@media screen and (min-width: 1024px) {
	.no-desktop {
		display: none !important;
		visibility: hidden !important;
	}

	.on-desktop {
		display: block !important;
		visibility: visible !important;
	}

	.container {
		width: 940px !important;
	}
}

/* Large desktop */
@media screen and (min-width: 1200px) {
	html {
		font-size: 70%;
	}

	.no-large {
		display: none !important;
		visibility: hidden !important;
	}

	.on-large {
		display: block !important;
		visibility: visible !important;
	}

	.container {
		width: 1140px !important;
	}
}

/* tablet landscape*/
@media only screen and (max-width: 1024px) {
	.no-tablet-landscape,
	.no-tablet {
		display: none !important;
		visibility: hidden !important;
	}

	.on-tablet {
		display: block !important;
		visibility: visible !important;
	}

	.container {
		width: 940px !important;
	}
}

/* tablet portrait */
@media only screen and (max-width: 800px) {
	html {
		font-size: 60%;
	}

	.no-tablet-portrait,
	.no-tablet {
		display: none !important;
		visibility: hidden !important;
	}

	.on-tablet {
		display: block !important;
		visibility: visible !important;
	}

	.container {
		width: 720px !important;
	}

	.grid:not(.fluid) > .row {
		margin: 0;
	}

	.grid:not(.fluid) > .row > [class*="span"] {
		width: 350px !important;
		margin-left: 0 !important;
		margin-bottom: 20px;
	}

	.grid:not(.fluid) > .row > [class*="span"]:nth-child(even) {
		margin-left: 20px !important;
	}

	.grid:not(.fluid) > .row .span12,
	.grid:not(.fluid) > .row .span7,
	.grid:not(.fluid) > .row .span8,
	.grid:not(.fluid) > .row .span9,
	.grid:not(.fluid) > .row .span10,
	.grid:not(.fluid) > .row .span11 {
		width: 720px !important;
	}

	.grid:not(.fluid) > .row .span12:nth-child(even),
	.grid:not(.fluid) > .row .span7:nth-child(even),
	.grid:not(.fluid) > .row .span8:nth-child(even),
	.grid:not(.fluid) > .row .span9:nth-child(even),
	.grid:not(.fluid) > .row .span10:nth-child(even),
	.grid:not(.fluid) > .row .span11:nth-child(even) {
		margin-left: 0 !important;
	}

	.grid:not(.fluid) > .row .row {
		margin: 0;
	}

	.grid:not(.fluid) > .row .row [class*="span"] {
		width: 350px !important;
		margin-left: 0 !important;
		margin-bottom: 20px;
	}

	.grid:not(.fluid) > .row .row [class*="span"]:nth-child(even) {
		margin-left: 20px !important;
	}

	.grid:not(.fluid) > .row .row .span12,
	.grid:not(.fluid) > .row .row .span7,
	.grid:not(.fluid) > .row .row .span8,
	.grid:not(.fluid) > .row .row .span9,
	.grid:not(.fluid) > .row .row .span10,
	.grid:not(.fluid) > .row .row .span11 {
		width: 720px !important;
	}

	.grid:not(.fluid) > .row .row .span12:nth-child(even),
	.grid:not(.fluid) > .row .row .span7:nth-child(even),
	.grid:not(.fluid) > .row .row .span8:nth-child(even),
	.grid:not(.fluid) > .row .row .span9:nth-child(even),
	.grid:not(.fluid) > .row .row .span10:nth-child(even),
	.grid:not(.fluid) > .row .row .span11:nth-child(even) {
		margin-left: 0 !important;
	}

	.navigation-bar,
	.navbar {
		position: relative !important;
	}

	.navigation-bar .pull-menu,
	.navbar .pull-menu {
		display: block !important;
	}

	.navigation-bar .element,
	.navbar .element {
		float: none !important;
	}

	.navigation-bar .element-divider,
	.navbar .element-divider {
		display: none !important;
	}

	.navigation-bar .element-menu,
	.navbar .element-menu {
		position: relative;
		float: none;
		display: none;
		width: 100% !important;
		background-color: inherit;
		z-index: 1000;
	}

	.navigation-bar .element-menu li,
	.navbar .element-menu li {
		display: block !important;
		float: none !important;
		width: 100%;
	}

	.navigation-bar .element-menu li a,
	.navbar .element-menu li a {
		display: block !important;
		float: none !important;
		width: 100%;
	}

	.navigation-bar .element-menu li .dropdown-menu,
	.navbar .element-menu li .dropdown-menu {
		position: relative !important;
		left: 0;
	}

	.navigation-bar .element-menu .dropdown-toggle,
	.navbar .element-menu .dropdown-toggle {
		color: inherit;
		position: relative;
	}

	.navigation-bar .element-menu .dropdown-toggle:after,
	.navbar .element-menu .dropdown-toggle:after {
		position: absolute;
		left: 100% !important;
		margin-left: -15px;
	}
}

@media only screen and (max-width: 800px) {
	.navigation-bar .pull-menu,
	.navbar .pull-menu {
		display: block !important;
	}
}

/* Phones landscape*/
@media only screen and (max-width: 640px) {
	html {
		font-size: 60%;
	}

	.no-phone-landscape,
	.no-phone {
		display: none !important;
		visibility: hidden !important;
	}

	.on-phone {
		display: block !important;
		visibility: visible !important;
	}

	.container {
		width: 100% !important;
		padding: 0 10px;
	}

	.grid:not(.fluid) > .row {
		margin: 0;
	}

	.grid:not(.fluid) > .row > [class*="span"] {
		width: 100% !important;
		margin: 0 !important;
		margin-bottom: 5px !important;
	}

	.grid:not(.fluid) > .row > [class*="span"]:nth-child(even) {
		margin-left: 0 !important;
	}

	.grid:not(.fluid) > .row .span12 {
		width: 100% !important;
	}

	.grid:not(.fluid) > .row .row {
		margin: 0;
	}

	.grid:not(.fluid) > .row .row > [class*="span"] {
		width: 100% !important;
		margin: 0 !important;
		margin-bottom: 5px !important;
	}

	.grid:not(.fluid) > .row .row > [class*="span"]:nth-child(even) {
		margin-left: 0 !important;
	}

	.grid:not(.fluid) > .row .row .span12 {
		width: 100% !important;
	}
}

/* Phones portrait*/
@media only screen and (max-width: 480px) {
	html {
		font-size: 45%;
	}

	.no-phone-landscape,
	.no-phone {
		display: none !important;
		visibility: hidden !important;
	}

	.container {
		width: 100% !important;
	}
}

@media only screen and (max-width: 360px) {
	html {
		font-size: 40%;
	}

	.no-phone-portrait,
	.no-phone {
		display: none !important;
		visibility: hidden !important;
	}

	.container {
		width: 100% !important;
	}
}

@media only screen and (max-width: 320px) {
	html {
		font-size: 40%;
	}

	.no-phone-portrait,
	.no-phone {
		display: none !important;
		visibility: hidden !important;
	}

	.container {
		width: 100% !important;
	}
}