@import url(fontawesome/font-awesome.min.css);

* {
	transition: 0.3s all;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
	-webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
					box-sizing: border-box;
}
*:before,
*:after {
	-webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
					box-sizing: border-box;
}


a{text-decoration:none;}

body, html {
	margin:0px;
	padding:0px;
	font-family: 'Roboto', sans-serif;
	font-size: 100%;
	display: table;
	height:100%;
	min-height: 100%;
	width:100%;
	overflow-x: hidden;
}


body{
	display: grid;
	grid-template-rows: 66px calc(100vh - 66px);
}


.Wrap
{
	max-width: 88%;	
	margin:0 auto;
}


.DemoHeader{
	z-index: 1;
	background-color: #FFF;
	background: rgba(255, 255, 255, .7);
	box-shadow: 0 1px 8px rgba(0, 0, 0, .7);
	-moz-box-shadow: 0 1px 8px rgba(0, 0, 0, .7);
	-webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.DemoHeader a{
	display: inline-block;
}
.DemoHeader > div{
  display: grid;
  grid-template-columns: 260px auto 230px ;   
  grid-gap: 0;	
}
.DemoHeader > div > div{

}
.DemoHeader > div > div:nth-child(1) > a{
	padding: 7px 0 4px 0;
}

.DemoHeader > div > div:last-child > a{
	background:#CE2026;
	padding:7px;
	margin-top: 12px;
}
.DemoHeader > div > div:last-child > a > div{
	border:1px solid #FFF;
	padding: 3px 16px;
	color:#FFF;
	font-size:110%;
}

.DemoHeader .ViewMode{
	display: inline-block;
	height: 100%;
	cursor:pointer;	
	padding: 20px 20px 0 20px;
	color:#B0B0B0;
}
.DemoHeader .ViewMode:hover{
	background-color:#ddd;
	color:#000;
}
.DemoHeader .ViewMode.Active{
	background-color:#f5f5f5;
	color:#000;
}
.DemoHeader .ViewMode.Active:hover{
	background-color:#f5f5f5;
	color:#000;
}
.DemoHeader .ViewMode > i{
	font-size:160%;
	margin-right:10px;
}

.DesignPreviewContent{
	height: 100%;
}
.DesignPreviewContent > div{
	height: 100%;
}

.PreviewMobile{
	position:relative;
	background: url(../images/mbody.png) 50%  no-repeat;
	background-size:contain;
	width:360px;
	height:600px;
	margin:0 auto 0 auto;
	overflow: inherit;
}
.PreviewMobile:before {
	position: absolute;
	z-index:2;
	content: "";
	top:5px;
	background: url(../images/mheader.png) 50%  no-repeat;
	background-size:contain;
	height:85px;
	width:360px;
}
.PreviewMobile:after {
	position: absolute;
	content: "";
	bottom:0;
	background: url(../images/mfooter.png) 50%  no-repeat;
	background-size:contain;
	height:85px;
	width:360px;
}
.PreviewMobile > div{
	position: absolute;
	top: 77px;
	left: 19px;
	overflow: auto;
	height: 445px;
	width: 320px;
}


iframe{
	display: block; 
	border:0; 
	width:100%; 
	height:100%;
	overflow-x: hidden;
}