*, ::after, ::before {
	box-sizing: border-box
}
body, html {
	height: 100%
}
body {
	margin: 0;
	overflow: hidden;
	background: #fff;
	position: relative;
}
#header {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 60px;
	background: #df8888;
	display: flex;
	align-items: center
}
.logo {
	padding-left: 10px
}
.logo img {
	height: 50px
}
.logo a {
	display: flex
}
.logo strong {
	margin-left: 6px;
	text-transform: uppercase
}
.logo strong span {
	color: #00a6eb
}

@media (max-width:768px) {
.logo {display: none}
}
.preview-devices {
	margin-top: 2px
}
.preview-devices ul {
	margin: 0 0 0 20px;
	padding: 0;
	list-style: none;
	list-style-type: none;
	display: flex;
	align-items: center
}
.preview-devices a {
	transition: .3s;
	color: rgba(255,255,255,.5);
	display: inline-block;
	padding: 10px
}
.preview-devices a .icon {
	width: 22px;
	height: 22px
}
.preview-devices a:hover {
	color: #fff
}
.preview-devices .preview-devices-active a {
	color: #fff
}

@media (max-width:1024px) {
.preview-devices {
	display: none
}
}
.navigate {
	display: flex;
	margin-left: auto;
	align-items: center
}
.navigate .icon {
	width: 22px;
	height: 22px
}
.navigate a {
	transition: .3s;
	color: rgba(255,255,255,.6);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none
}
.navigate a:hover {
	color: #fff
}
.navigate .download {
	background: #fff;
	color: #C51D1D;
	font-size: 20px;
	padding: 0 16px;
	height: 40px;
	border-radius:10px;
	font-weight: 700;
	text-transform: uppercase;
	margin-right: 15px;
	opacity:0.8;
	white-space: nowrap
}
.navigate .close{margin:0 10px;}
.navigate .download .icon {
	width: 20px;
	height: 20px
}
.navigate .download span {
	padding-left: 6px
}
.navigate .download:hover {
	background: #C51D1D;color:#fff
}

@media (max-width:768px) {
.navigate .download {
	padding: 0 10px;
	font-size: 20px;
	margin-right: 10px
}
.navigate .download .icon {
	display: none
}
}
.current-template {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 5px
}
.current-template h1{font-size:1.2rem;}

@media (min-width:768px) {
.current-template {
	padding-left: 0;
	margin-left: auto;
}
}
.current-template .icon {
	width: 24px;
	height: 24px
}
.current-template a {
	transition: .3s;
	color: rgba(255,255,255,.6);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none
}
.current-template a:hover {
	color: #fff
}
.current-template .template-home {
	font-size: 20px;
	padding: 0;
	font-weight: 700;
	color: #fff;
	display:inline;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;

}
@media (max-width:460px) {
.current-template {max-width:225px;}
.navigate .download{margin-right:5px;}
.navigate .close{margin:0 5px;}
}
#preview {
	position: absolute;
	left: 0;
	right: 0;
	top: 60px;
	bottom: 0;
	transition: all .2s
}
#preview-frame {
	border: 0;
	position: absolute
}
.preview-desktop {
	left: 0;
	width: 100%;
	height: 100%
}
.preview-tablet {
	width: 768px;
	height: 100%;
	left: calc(50% - 384px)
}
.preview-mobile {
	width: 380px;
	height: 680px;
	left: calc(50% - 190px);
	top: 0;
	margin-top: 20px
}