/*

Notice: The !important statement is used a lot.
        The reason for this is that mobile.css needs to take precedence
        in almost every situation, even when template specific styles are
        applied (e.g. templates/Sunrise/style.css which loads after mobile.css).

*/

div.TPLMenuMobile
{
	display: none;
}

/*@media (max-device-width: 768px)*/
/*@media (max-width: 768px)*/
@media (max-width: 900px)
{
	div.TPLTop,
	div.TPLMiddle,
	div.TPLBottom
	{
		/* Margins may have been applied in Designer - prevent vertical scroll on mobile */
		margin-left: 0px !important;
		margin-right: 0px !important;
	}

	div.TPLPage
	{
		width: 100% !important;
	}

	div.TPLPage,
	div.TPLHeader,
	div.TPLContent, div.SMExtension,
	div.TPLFooter
	{
		margin: 0px 0px 0px 0px !important;
		padding: 0px 0px 0px 0px !important;
	}
	div.TPLHeader
	{
		margin-top: 20px !important;
	}
	div.TPLContent
	{
		margin-top: 20px !important;
		margin-bottom: 20px !important;
	}
	div.TPLFooter
	{
		margin-bottom: 20px !important;
	}
	div.TPLHeader,
	div.TPLContent,
	div.TPLFooter
	{
		margin-left: 10px !important;
		margin-right: 10px !important;
	}
	div.SMExtension
	{
		margin: 1.5em 1.5em 1.5em 1.5em !important;
	}

	html.SMPagesCardLayout div.SMExtension
	{
		margin: 0px 0px 0px 0px !important;
	}
	html.SMPagesCardLayout div.TPLContent
	{
		margin-top: 0px !important;
		margin-bottom: 0px !important;
	}

	html:not(.SMPagesCardLayout) div.TPLContent, /* :not is likely to be supported on mobile */
	html:not(.SMPagesCardLayout) div.TPLFooter
	{
		/* TPLContent and TPLFooter may have been joined i Designer. In this case
		   border radius is removed from TPLContent bottom and from TPLFooter top.
		   However, in mobile view, TPLContent and TPLFooter is always separated,
		   so we remove rounded corners completely, to make sure TPLContent top
		   and TPLFooter bottom is not rounded, while TPLContent bottom and
		   TPLFooter top is not.
		   There is no need to do this for Cards Layout since cards and footer
		   is never joined. */
		border-radius: 0px !important;
	}

	/* Menu */

	div.TPLMenuMobile
	{
		display: block;
	}

	div.TPLMenuMobile select,
	div.TPLMenuMobile:before
	{
		/* Position select menu and icon (pseudo element)
		   on top of each other in upper right corner. */

		position: fixed;
		top: 5px;
		right: 5px;

		display: block;
		width: 50px;
		height: 50px;
	}

	div.TPLMenuMobile select
	{
		/* Make select element invisible */

		-webkit-appearance: none;
		-moz-appearance: none;
		border: none;
		border-radius: 0px;
		background: transparent;
		font-size: 0px; /* Safari Mobile fix - prevent item title from being shown when selected - unfortunately breaks drop down in Firefox on Desktop */
	}
	div.TPLMenuMobile select option
	{
		font-size: 14px; /* Fix FireFox which does not show menu when font-size is set to 0px on select element (see above) */
	}
	div.TPLMenuMobile:before
	{
		/* Create menu icon shown on top of select element */

		/* Copied from FontAwesome .fa class */
		display: inline-block;
		font: normal normal normal 14px/1 FontAwesome;
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		transform: translate(0, 0);

		content: "\f0c9";
		font-size: 20px;
		line-height: 50px;
		text-align: center;
		color: whitesmoke;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 8px;
	}

	div.TPLMenu
	{
		display: none;
	}

	/* Links */

	div.TPLLinks
	{
		display: none;
	}

	/* Contact form */

	fieldset[id^="SMFieldsetSMContact"] table
	{
		width: 100%;
	}
	fieldset[id^="SMFieldsetSMContact"] td
	{
		display: block;
	}
	fieldset[id^="SMFieldsetSMContact"] tr:nth-last-child(2)
	{
		display: none;
	}

	/* Content */

	html.SMPagesViewer.SMPagesClassicLayout div.TPLContent img
	{
		/* Optimize images in ordinary content pages (Classic Layout)
		   so they schrink properly on small screens. */

		max-width: 100% !important;
		height: auto !important;
		float: none !important;
		display: block !important;
		margin: 30px auto 30px auto !important;
	}

	div.SMPagesCard img[width][height][src^="files/images/"]:first-child,
	div.SMPagesCard img[width][height][data-mce-src^="files/images/"]:first-child
	{
		/* Optimize Cards containing "fullscreen" image (only element, edge-to-edge) */

		width: 100% !important;
		height: auto !important;
		margin: 0px !important;
	}

	div.SMPagesCard
	{
		/* Make cards consume full page width and set proper spacing */

		float: none;
		box-sizing: border-box !important;
		width: 100% !important;
		margin-left: 0px !important;
		margin-right: 0px !important;
	}

	html.SMPagesCustomFooter.SMPagesCardLayout div.TPLFooter
	{
		/* Prevent double spacing between last card and footer */

		margin-top: 0px !important;
	}

	/* Image montage. */
	/* Have each image appear on new line with full width and proper spacing. */

	div.SMImageMontageContainer > a
	{
		display: block !important;
		float: none !important;
		position: static !important;
		width: 100% !important;
		height: auto !important;
		margin: 15px 0px 15px 0px !important;
	}
	div.SMImageMontageContainer > a > img
	{
		position: static !important;
		width: 100% !important;
		height: auto !important;
	}

	div.SMImageMontageButton,
	div.SMImageMontageTitle,
	div.SMImageMontageDescription
	{
		display: none !important;
	}

	img.SMImageMontageFullScreenImage
	{
		position: static !important;
		width: auto !important;
		height: auto !important;
		max-height: 100% !important;
		max-width: 100% !important;
		display: block !important;
		margin: 0 auto !important;
		border: none !important;
		border-radius: 0px !important;
	}

	/* Iframes / external modules - stretch to full width */

	div.TPLContent div.SMPagesExtension
	{
		display: block !important;
	}
	div.TPLContent div.SMPagesExtension iframe
	{
		width: 100% !important;
	}
}