@mixin dbgyellow{
	background-color: rgba(yellow, .25);
}
@mixin dbggreen{
	background-color: rgba(green, .25);
}
@mixin dbgblue{
	background-color: rgba(blue, .25);
}

$mobile-margin: 1.6339869281% * 2;

/**** Media Queries ***/

#DeltaPlaceHolderMain{
	@extend %clearfix;
}
table#layoutsTable{
	> img{
		width: 100%;
		max-width: 100%;
		height: auto;
		margin: 0 !important;
	}
}
.col-fluid-2{
	margin-right: 0;
	& > div{
		box-sizing: border-box;
		margin-left: -8px;
	}
}
.ms-promlink-headerNav{
	display: none;
}

@mixin wikiPages_wrong{
	#ctl00_PlaceHolderMain_WikiField + .ms-webpart-zone.ms-fullWidth{
		& > div > div > div > div > table{
			display: block;
			& > tbody{
				display: block;
				& > tr{
					display: block;
					& > td{
						display: block;
						.WikiOverviewWebPartContainer{
							margin-right: 0 !important;
							margin-left: 0 !important;
							padding-right: 0 !important;
							padding-left: 0 !important;

							border-radius: unset !important;
						}
					}
				}
			}
		}
	}
}

@mixin mobileMargin{
	html:not(.ms-dialog){
		#contentBox{
			box-sizing: border-box;
			// width: 100% - $mobile-margin;
			min-width: 0;
			margin: 0;
			padding-right: $mobile-margin;
			padding-left: $mobile-margin;
			// float: none;
		}
		#contentBox{
			width: 100% ;
		}
		#sideNavBox{
			box-sizing: border-box;
			$mmeme: 100% - 2 * $mobile-margin;
			width: calc(#{$mmeme});
			margin-left: $mobile-margin;
			margin-right: $mobile-margin;
		}
	}
}

/*** Wiki Section ***/
@mixin wiki-desktop{

	/*** wiki ***/
	.col-fluid-1{
		@include span(5 of 10 nested after);

		display: inline-block;

		margin-right: span(1 of 10 after) + gutter(5);
	}
	.right-wp-zone-col{
		@include span(3 of 10 at 7 before);

		display: inline-block;

		box-sizing: border-box;
	}
	/*** wiki ***/
}
@mixin wiki-tab-q{
	@include wikiPages_wrong();
	/*** wiki ***/
	.col-fluid-1{
		@include span(7 of 12 nested after);

		display: inline-block;

		margin-right: 0;
	}
	.right-wp-zone-col{
		@include span(4 of 12 at 9 after);

		display: inline-block;

		box-sizing: border-box;

		border: 0 transparent solid;
		.ewiki-slink{
			margin-top: 1em;
			margin-left: 0;
		}
	}
	/*** wiki ***/
	table#layoutsTable{
		width: span(12 of 12 nested) !important;
	}
}
@mixin wiki-tab-h{
	@include wikiPages_wrong();
	/*** wiki ***/
	.col-fluid-1{
		@include span(12 nested after);

		display: inline-block;

		margin-right: 0;
	}
	.col-fluid-2{
		& > div{
			margin-left: -10px;
		}
	}
	.right-wp-zone-col{
		@include span(12 nested after);

		display: inline-block;

		box-sizing: border-box;

		border: 0 transparent solid;
		.ewiki-slink{
			margin-top: 1em;
			margin-left: 0;
		}
	}
	#RatingsCtrl_ctl00_PlaceHolderMain_ctl03{
		& > div{
			padding: 10px 0;

			text-align: left;
		}
	}
	/*** wiki ***/
	table#layoutsTable{
		width: span(12 of 12 nested) !important;
	}
}
/*** Blog Section ***/
@mixin blog-desktop{
	.ms-blog-MainArea{
		min-width: 0;
		max-width: none;
		> tbody{
			display: block;

			width: 100%;
			tr{
				display: block;
				& > td:first-child{
					@include span(6 of 10 nested after);

					display: block;
				}
			}
		}
		td.ms-blog-LeftColumn{
			@include span(3 of 10 at 7 after);
			td:first-child{
				width: 100%;
			}
		}
		.ms-blog-postList{
			// @include span(6 of 6 no-gutter);
			width: 100%;

			min-width: 0;
			max-width: none;
		}
		.ms-blog-postBody {
			img{
				margin: 0 !important;
			}
		}
		.ms-blog-postBox{
			padding-right: 0;
		}
	}
}
@mixin blog-tab-q{
	.ms-blog-MainArea{
		min-width: 0;
		max-width: none;
		> tbody{
			display: block;

			width: 100%;
			tr{
				display: block;
				& > td:first-child{
					@include span(8 of 12 nested after);

					display: block;
				}
			}
		}
		td.ms-blog-LeftColumn{
			@include span(4 of 12 at 9 after);
			td:first-child{
				width: 100%;
			}
		}
		.ms-blog-postList{
			@include span(7 of 8 after);

			box-sizing: border-box;
			min-width: 0;
			max-width: none;
		}
		.ms-blog-postBody {
			img{
				width: auto;
				min-width: 0;
				max-width: 100%;
				margin: 0 !important;
			}
		}
		.ms-blog-postBox{
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			h1,h2{
				font-size: 20px;
			}
		}
		.ms-blog-postBox {
			.ms-blog-postBody{
				margin-left: -80px;
				~ p + div{
					margin-left: -80px;
				}
			}
		}
	}
}
@mixin blog-tab-h{
	.ms-blog-MainArea{
		min-width: 0;
		max-width: none;
		> tbody{
			display: block;

			width: 100%;
			tr{
				display: block;
				& > td:first-child{
					display: block;
				}
			}
		}
		td.ms-blog-LeftColumn{
			@include span(12 after);
			td:first-child{
				width: 100%;
			}
		}
		.ms-blog-postList{
			@include span(12 after);

			box-sizing: border-box;
			min-width: 0;
			max-width: none;
		}
		.ms-blog-postBox{
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			h1,h2{
				font-size: 20px;
			}
		}
		.ms-blog-postBox {
			.ms-blog-postBody{
				margin-left: -80px;
				img{
					width: auto;
					min-width: 0;
					max-width: 100%;
					margin: 0 !important;
				}
				~ p + div{
					margin-left: -80px;
				}
			}
		}
		.ms-blog-command{
			padding: 0px;
		}
		.ms-comm-metalineItemSeparator,
		.ms-comm-cmdSpaceListItem{
			display: block !important;
		}
	}

}
.ms-blog-MainArea .ms-blog-postBody{
	img.ms-asset-icon{
		width: unset;
	}
}
.ms-blog-postComment{
	.ms-tableCell{
		vertical-align: top;
	}
}
.ms-comm-postReplyTextBox{
	width: 100% !important;
}
/*** Blog Section ***/
/*** Article / News Page ***/
@mixin article-page-desktop{
	#mainPLDiv{
		img{
			max-width: 100%;
			height: auto;
		}
	}

	#leftColDiv{
		@include span(6 of 10 nested after);

		display: block;
	}

	#rightColDiv{
		@include span(3 of 10 at 7 nested after);
	}
}
@mixin article-page-tab-q{
	#mainPLDiv{
		img{
			max-width: 100%;
			height: auto;
		}
	}

	#leftColDiv{
		@include span(8 of 12 nested after);

		display: block;
	}

	#rightColDiv{
		@include span(4 of 12 at 8 nested no-gutter);
	}
}
@mixin article-page-tab-h{
	#mainPLDiv{
		img{
			max-width: 100%;
			height: auto;
		}
	}

	#leftColDiv{
		display: block;

		width: 100%;
	}

	#rightColDiv{
		width: 100%;
	}
}
/*** Article / News Page ***/
/*** Teamseite ***/
@mixin teamsite-desktop{
	#ctl00_PlaceHolderMain_WikiField{
		.ms-wikicontent{
			@include span(9 of 10 nested after);

			box-sizing: border-box;
			&.ms-rtestate-field{
				padding-right: 0 !important;
			}
			// @include dbggreen();
		}
		.ms-wiki-columnSpacing{
			padding-left: gutter(8 of 10 nested) * 1%;
		}
	}
	.strabag-teamsite{
		@include span(9 of 10 nested after);
		.ms-welcomepageheader{
			padding: 0px !important;
		}

		.ms-wikicontent.ms-rtestate-field{
			width: 100% !important;
		}

	}

	#ctl00_PlaceHolderMain_WikiField.community{
		width: 100%;
		#layoutsTable{
			display: block;
			& > tbody{
				display: block;
				& > tr{
					display: block;
				}
			}
		}
		.ms-wikicontent{
			width: 100%;
		}
		.community-content{
			display: block;
			@include span(6 of 10 nested after);
			&::after{
				content: " ";
				display: block;
				clear: both;
			}
		}
		.ms-wiki-columnSpacing{
			@include span(3 of 10 nested no-gutter);
			padding-left: 0px;
		}
	}

}
	.strabag-discussion{

		.ms-comm-forumContainer {
			max-width: unset;
			width: 100%;
		}

	}
@mixin teamsite-tab-q{

	#ctl00_PlaceHolderMain_WikiField{
		div.ms-wikicontent{
			box-sizing: border-box;
			width: 100%;
			&.ms-rtestate-field{
				padding-right: 0 !important;
			}
			// @include dbggreen();
		}
		.ms-wiki-columnSpacing{
			padding-left: gutter(8 of 10 nested) * 1%;
		}
	}

	.strabag-teamsite{

		#layoutsTable{
			display: block;
			& > tbody{
				display: block;
				& > tr{
					display: block;
					& > td{
						display: block;
						width: 100% !important;
						&::after{
							content: " ";
							clear: both;
							display: block;
						}
					}
				}
			}
		}
		.ms-rte-layoutszone-outer{
			&::after{
				content: " ";
				clear: both;
				display: block;
			}
		}
	}
	.strabag-discussion{

		.ms-comm-forumContainer {
			max-width: unset;
			width: 100%;
		}

	}

	#ctl00_PlaceHolderMain_WikiField .ms-wiki-columnSpacing{
		padding-left: 0px;
	}

	#ctl00_PlaceHolderMain_WikiField.community{
		width: 100%;
		#layoutsTable{
			display: block;
			& > tbody{
				display: block;
				& > tr{
					display: block;
				}
			}
		}
		.ms-wikicontent{
			width: 100%;
		}
		.community-content{
			display: block;
			@include span(8 of 12 nested after);
			&::after{
				content: " ";
				display: block;
				clear: both;
			}
		}
		.ms-wiki-columnSpacing{
			@include span(4 of 12 nested no-gutter);
			padding-left: 0px;
		}
	}
}
@mixin teamsite-tab-h{
	#ctl00_PlaceHolderMain_WikiField{
		div.ms-wikicontent{
			box-sizing: border-box;
			width: 100%;
			&.ms-rtestate-field{
				padding-right: 0 !important;
			}
		}

		#layoutsTable{
			padding-right: 0 !important;
			& > tbody > tr > td{
				display: block;

				width: 100% !important;
				&.ms-wiki-columnSpacing{
					padding-left: 0;
				}
			}

		}

	}

	.strabag-discussion{

		.ms-comm-forumContainer {
			max-width: unset;
			width: 100%;
		}

	}

}
/*** Teamseite ***/
/*** Teamseite Pages ***/
@mixin teamsite-pages-desktop{
	#ctl00_PlaceHolderMain_WikiField{
		@include span(9 of 10 nested after);
	}
}
@mixin teamsite-pages-tab-q{

}
@mixin teamsite-pages-tab-h{

}
/*** Teamseite Pages ***/
/*** Search Center ***/
@mixin search-desktop{
	.ms-searchCenter{
		@include span(11 of 12 at 1 nested no-gutter);
	}
	.ms-searchCenter-main{
		width: span(4 of 11 nested);
		margin: 100px auto;
	}
	.ms-searchCenter-result-main{
		@include span(6 of 10 nested after);
	}
}
@mixin search-tab-q{
	.ms-searchCenter{
		@include span(12 nested no-gutter);
	}
	// Search Landing Page
	.ms-searchCenter-main{
		width: span(6 of 12 nested);
		margin: 100px auto;
	}
	.ms-searchCenter-result-main{
		@include span(7 of 12 nested after);

		margin-top: 25px;
		.ms-webpart-cell-vertical,
		.ms-webpart-zone{
			display: block;
		}
		.ms-srch-item{
			width: 100%;
		}
	}
}
@mixin search-tab-h{
	#DeltaPlaceHolderMain > .ms-srch-siteSearchResults,
	.ms-searchCenter{
		@include span(12 nested no-gutter);
		min-width: 100%;
	}
	// Search Landing Page
	.ms-searchCenter-main{
		width: span(11 of 12 nested);
		margin: 100px auto;
	}
	.ms-searchCenter-result-main{
		width: 100%;
		margin-top: 25px;
	}
	.ms-srch-communityItem-body,
	.ms-srch-item{
		width: 100%;
	}
}
/*** Search Center ***/
/*** Communities ***/
@mixin community-desktop{
	.ms-webpartPage-root.strabag-customCommunity{
		border-spacing: 0;
		td#tdLeftColumn{
			display: inline-block;

			width: span(6 of 9 nested after) !important;
			margin-right: gutter(4) !important;

			vertical-align: top;

			tbody{
				width: 100%;
			}

		}
		td#tdRightColumn{
			display: inline-block;

			@include span(3 of 9 at 7 nested no-gutter);

			vertical-align: top;
			.ms-listviewtable td{
				display: table-cell;
			}
			.ms-webpartPage-root{
				display: block;
				width: 100%;
			}
		}
	}
}
@mixin community-q{
	.EnterCommunityLink{
		max-width: 400px;
	}
	.ms-webpartPage-root.strabag-customCommunity{
		border-spacing: 0;
		tbody{
			display: block !important;

			width: 100%;
		}
		tr{
			display: block;
		}
		// Community page
		td#tdLeftColumn{
			display: inline-block;

			width: 100% !important;
			margin-right: 0;
			margin-left: 0;

			vertical-align: top;
			tbody{
				width: 100%;
			}
		}
		td#tdRightColumn{
			display: inline-block;

			width: 100% !important;
			margin-right: 0;
			margin-left: 0;

			vertical-align: top;
			td{
				display: block;
			}
			tbody{
				display: block;

				width: 100%;
			}
			.ms-listviewtable td{
				display: table-cell;
			}
		}
	}
}
/*** Communities ***/
/*** Landing Page ***/
@mixin landing-desktop(){
	.landing-area{
		@include span(11 of 12 nested);
		&::after{
			content: ' ';
			clear: both;
			display: block;
		}
	}
	.landing{

		&-left{
			@include span(3 of 11 at 1 nested after);
			.ms-webpart-zone,
			.ms-webpart-chrome-vertical,
			.ms-webpart-cell-vertical{
				display: block;
			}
		}
		&-middle{
			@include span(5 of 11 at 4 nested after);
			.ms-webpart-zone,
			.ms-webpart-chrome-vertical,
			.ms-webpart-cell-vertical{
				display: block;
			}
		}
		&-right{
			@include span(3 of 11 at 8 last after);
			.ms-webpart-zone,
			.ms-webpart-chrome-vertical,
			.ms-webpart-cell-vertical{
				display: block;
			}
		}
	}
}
@mixin landing-tab-q(){
	.landing-area{
		width: 100%;
		&::after{
			content: ' ';
			clear: both;
			display: block;
		}
	}
	.landing{
		&-left{
			width: 100%;
			.ms-webpart-zone,
			.ms-webpart-chrome-vertical,
			.ms-webpart-cell-vertical{
				display: block;
			}
		}
		&-middle{
			@include span(6 at 1 of 12 after);
			.ms-webpart-zone,
			.ms-webpart-chrome-vertical,
			.ms-webpart-cell-vertical{
				display: block;
			}
		}
		&-right{
			@include span(6 at 7 of 12 after);
			.ms-webpart-zone,
			.ms-webpart-chrome-vertical,
			.ms-webpart-cell-vertical{
				display: block;
			}
		}
	}
}
@mixin landing-tab-h(){
	.landing-area{
		width: 100%;
		&::after{
			content: ' ';
			clear: both;
			display: block;
		}
	}
	.landing{
		&-left{
			width: 100%;
			.ms-webpart-zone,
			.ms-webpart-chrome-vertical,
			.ms-webpart-cell-vertical{
				display: block;
			}
		}
		&-middle{
			width: 100%;
			.ms-webpart-zone,
			.ms-webpart-chrome-vertical,
			.ms-webpart-cell-vertical{
				display: block;
			}
		}
		&-right{
			width: 100%;
			.ms-webpart-zone,
			.ms-webpart-chrome-vertical,
			.ms-webpart-cell-vertical{
				display: block;
			}
		}
	}
}

/*** Landing Page ***/

@media screen and (min-width: 1025px){
	@include wiki-desktop();
	@include blog-desktop();
	@include article-page-desktop();
	@include teamsite-desktop();
	@include teamsite-pages-desktop();
	@include search-desktop();
	@include community-desktop();
	@include landing-desktop();
}
@media screen and (min-width: 0) and (max-width: 480px){
	@include wiki-tab-h();
	@include blog-tab-h();
	@include article-page-tab-h();
	@include teamsite-tab-h();
	@include search-tab-h();
	@include community-q();
	@include landing-tab-h();
	// adds aditional margin to content
	@include mobileMargin();

	h1#pageTitle.ms-core-pageTitle{
		white-space: normal;
	}
	.ms-viewlsts{
		display: block;
		tbody{
			display: block;
		}
		.ms-webpart-titleText{
			white-space: normal;
		}
	}
	.ms-vl-sectionHeaderRow{
		display: block;
		td{
			display: block !important;
			width: 100%;
			&.ms-viewlsts{
				text-align: left;
			}
		}
		.ms-alignRight{
			text-align: left;
		}
		.ms-vl-alignactionsmiddle{
			display: block;
			margin-left: 0px;
		}

	}

}

@media screen and (min-width: 481px) and (max-width: 768px){
	@include wiki-tab-h();
	@include blog-tab-h();
	@include article-page-tab-h();
	@include teamsite-tab-h();
	@include search-tab-h();
	@include community-q();
	@include landing-tab-h();
	// adds aditional margin to content
	@include mobileMargin();
	/* Fixup page title */
	h1#pageTitle.ms-core-pageTitle{
		white-space: normal;
	}
}
@media screen and (min-width: 769px) and (max-width: 1024px){
	@include wiki-tab-q();
	@include blog-tab-q();
	@include article-page-tab-q();
	@include teamsite-tab-q();
	@include search-tab-q();
	@include community-q();
	@include landing-tab-q();
	// adds aditional margin to content
	@include mobileMargin();
	.ms-core-pageTitle{
		margin: 1em 0;
	}
}
@media screen and (min-width: 0px) and (max-width: 500px){
	ul.ms-core-suiteLinkList{
		display: none;
	}
}

// iOS FIX
@media screen and (min-width: 0px) and (max-width: 480px) and (-webkit-min-device-pixel-ratio:0) {
	body{
		-webkit-text-size-adjust: none;
	}
	input#profileimagepickerinput{
		width: 250px !important;
	}
	html:not(.ms-dialog){
		select,
		textarea,
		input,
		input:focus,
		input:hover,
		.ms-microfeed-rootOrReplyPostBox,
		.ms-rtestate-field{
			font-size: 16px !important;
		}
	}
}