/* Responsive styling overrides for m247.ro */

@media( max-width: 915px )
{

	/*
	Typography
	----------------------------------------------------------------------------------------------------
	*/
	html, body {
		font-size: 14px;
		line-height: 1.5;
	}

	#bg_m247europe > .all-page {
		width: 100%;
	}


	/*
	Basic layout
	----------------------------------------------------------------------------------------------------
	*/

	/* Hide header elements, which will be moved to the sidebar */
	#bg_m247europe > .all-page > .header-link-top,
	#bg_m247europe > .all-page > .logo-m247europe,
	#menu {
		display: none;
	}

	/*#bg_m247europe > .all-page > .header-link-top {
		top: 39px;
		margin-top: 0.5rem;
		margin-right: 0.5rem;
		position: absolute;
		right: 0;
	}*/

	/* Shuffle main container elements */
	#container-bg, #container, .content {
		width: 100%;
	}

	#container > .left_menu {
		display: none;
	}

	#container > .content_right {
		width: 100%;
		float: none;
		display: block;
	}

	#container > .content_right > .description {
		height: auto;
	}

	/* Resize the footer */
	footer > .footer-content {
		width: 100%;
	}

	footer > .footer-content > .about-m247:first-child {
		display: none;
	}

	/* Resize misc. elements */

	.line,
	.tablesCenter {
		width: 100%
	}


	/*
	Formatting
	----------------------------------------------------------------------------------------------------
	*/

	#container > .content_right {
		padding: 1rem
	}

	a {
		text-decoration: underline !important;
	}

	img {
		max-width:100%
	}

	/*
	Main page content
	----------------------------------------------------------------------------------------------------
	*/

	.content_right > .description {
		background-image: none;
	}

	/*
	Footer
	----------------------------------------------------------------------------------------------------
	*/

	.about-m247 > p {
		margin-left: 1rem;
		margin-right: 1rem;
	}

	footer .right-content {
		margin-right: 1rem;
	}

	/*
	Home Page
	----------------------------------------------------------------------------------------------------
	*/

	.m247-info.homepage:after {
		content: '';
		display: block;
		clear:both;
		height:0;
	}

	#slide-m247 {
		width: auto;
	}

	.carousel-caption {
		display: block;
		float: none;
		position: absolute;
		top: 0;
		left: 0;
		width: auto;
		height: auto;
		text-align: left;

		padding: 1rem;
	}

	.carousel-caption > h2 {
		font-size: 1rem;
		margin: 0;
		margin-bottom: 0.5rem;
	}

	.carousel-caption > p {
		font-size: 0.9rem;
		margin: 0;
	}

	.carousel-caption > a {
		font-size: 1rem;
		margin: 0;
		margin-top: 0.5rem;
		width: auto;
		padding: 0.5rem;
	}

	.white > .content {
		padding-bottom: 25px;
	}

	.m247-services a {
		margin: 0.5rem !important;
	}

	.m247-services .cont {
		position: inherit !important;
	}

	/*
	Misc.
	----------------------------------------------------------------------------------------------------
	*/

	.imgNetwork {
		margin-left: 0;
	}

	.other-info.other-info-edit {
		display: inline-block;
	}
}

/* Critical breakpoints */

@media( max-width: 550px )
{
	.tablesCenter > div, .servers-vps {
		margin: 0;
		width: 100%;
	}

	.tablesCenter > div + div, .servers-vps + .servers-vps {
		margin-top: 2rem;
	}

	.tablesCenter {
		margin-top: 2rem;
	}

	.legend-div {
		margin: 1rem 0;
	}

	.legend-div > span {
		display: block !important;
		float: none !important;
		margin: 0 !important;
	}
}

@media( max-width: 480px )
{
	/* Home page styling */

	.m247-services a {
		display: block;
		float: none;
		width: auto;
		height: auto;
		margin: 1rem !important;
	}

	/* Footer elements */

	.other-info.other-info-edit {
		float: none;
		display: block;
		margin: 1rem;
		width: auto;
		height: auto;
	}

	.other-info.other-info-edit + .other-info.other-info-edit {
		border-top: 1px solid #555;
		padding-top: 1rem;
	}

	.other-info.other-info-edit > img {
		display: none;
	}

	.about-m247 p {
		font-size: 0.9rem;
		line-height: 1.5;
	}

	.quovolve-box {
		height: 8rem;
		top: 0 !important;
		margin-top: 1rem !important;
	}
}



/*
==============================================================================================================
Sidebar
==============================================================================================================
*/


/*
Layout
--------------------------------------------------------------------------------------------------------------
*/

#sidebar {
	display: none;

	position: fixed;
	top: 39px;
	bottom: 0;
	left: 0;

	width: 18rem;

	z-index: 1000;

	overflow-y: auto;
}

#sidebar-inner-nav {
	display: none;
}

#topbar {
	display: none;

	position: fixed;
	top:0;
	left:0;
	right:0;

	z-index: 1000;
}


@media( max-width: 900px ){
	body {
		margin-top: 39px !important;
	}

	#topbar {
		display: block;
	}
}

/*
Basic Element definitions
--------------------------------------------------------------------------------------------------------------
*/

#page-fill {
	position: fixed;
	z-index: 800;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.5);
}

#sidebar {
	background: #1b1e24;
	color: white;
}

#sidebar .glyphicon, #sidebar-application-holder .glyphicon, #topbar .glyphicon {
	color: #f78f1e !important;
}

/*
Topbar
--------------------------------------------------------------------------------------------------------------
*/

#topbar {
	background: rgba(40, 44, 48, 1);
	color: white;
	padding: 0 0.5rem;
}

#topbar.topbar-scrolled {
	box-shadow: 0 0 1rem rgba(0, 0, 0, 1);
}

#topbar #topbar-links {
	display: inline-block;
	color: black;

	line-height: 36px;
	vertical-align: top;
}

#topbar #topbar-links > h2 {
	font-size: 1.4rem;
	font-weight: 500;
	display: inline-block;
	margin: 0 1rem;

	line-height: 38px;
}

#topbar #topbar-links > h2 > a {
	color: white !important;
	text-decoration: none !important;
	line-height: 38px
}

#topbar #topbar-links > h2 > a > img {
	height: 20px;
	line-height: 38px;
}

#topbar #topbar-links > a {
	color: black;
	margin: 0 1rem;
	display: inline-block;
}

#topbar #sidebar-logo {
	display: inline-block;
	width:auto;
	padding:0;
	margin:0;
	height: 26px;
	line-height: 26px;
	font-size: 26px;
}

#topbar #topbar-lang-toggle {
	display: inline-block;
	position: absolute;
	right: 1rem;
	height: 39px;
	line-height: 39px;
	font-size: 1rem;
}

#topbar #topbar-lang-toggle a {
	color: white !important;
	text-decoration: none !important;
}

#topbar #topbar-lang-toggle i {
	float: none;
	display: inline-block;
	position: relative;
	top: 2px;
}

#topbar .topbar-button {
	display: inline-block;

	background: #28333F;
	border: 1px solid #16181A;
	border-radius: 3px;

	margin-right: 2px;
	margin-left: 2px;

	font-size: 1.5rem;

	height: 36px;
	width: 36px;
	line-height: 36px;
	text-align: center;

	cursor: pointer;

	position: relative;
	top: 2px;
}

#topbar .topbar-button > img {
	max-height: 100%;
	vertical-align: 1px;
	line-height: 36px;
}

#topbar .topbar-button:hover {
	border: 1px solid #16181A;
	background: #384047;
}

/*
Logo
--------------------------------------------------------------------------------------------------------------
*/

#sidebar-logo {
	padding: 1rem;

	font-size: 1.8rem;
	margin:0;

	background: #22262e;
}


/*
Hackish formatting for the sidebar links
--------------------------------------------------------------------------------------------------------------
*/

#sidebar a {
	color: #F78F1E;
}

#sidebar a.active {
	color: white !important;
	font-weight: bold !important;
}

#sidebar > ul {
	margin: 1rem 0;
	padding: 0 1rem;

	list-style: none;
}

#sidebar > ul + ul {
	border-top: 1px solid #525252;
	margin-top: 1rem;
	padding-top: 1rem;
}

#sidebar ul ul {
	margin: 0;
	margin-left: 1rem;
	padding: 0;
	list-style: none;
	font-size: 1rem;
}


#sidebar > ul {
	list-style: none;
}

#sidebar > ul > li {
	margin: 1rem 0;
}

#sidebar > ul > li > a {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	color: white;
}

#sidebar > ul > li > a > ul ul > li {
	margin: 0.75rem 0;
	font-weight: lighter;
	font-size: 0.9rem;
}

#sidebar > ul > li > a > ul h2 {
	font-size: 1rem;
	margin: 1rem 0;
}

#sidebar > ul > li > a > ul ul > li > a:before,
#sidebar > ul > li > a > ul h2:before {
	display: inline-block;
	font-weight: bold;
	color: white;
	margin-right: 0.5rem;
	content: '+ ';
}

#sidebar > ul > li > a > ul ul > li > a.active:before
{
	content: '- ';
}