@font-face {
	font-family: 'MetrostyleExtended-Bold';
	src: url('Metrostyle-Extended-Bold.ttf');
	src: local('˘'),
		   url('Metrostyle-Extended-Bold.ttf') format('truetype');
  }
  @font-face {
	font-family: 'MetrostyleExtended-Regular';
	src: url('Metrostyle-Extended-Regular.ttf');
	src: local('˘'),
		   url('Metrostyle-Extended-Regular.ttf') format('truetype');
  }
  body { font-family: Helvetica, Arial, sans-serif; margin:0;padding:0;}
  body { min-height:540px; }     
  body[orient="portrait"] { min-height:540px; }
  body[orient="landscape"] { min-height:500px; }
  #projects {
	  position: absolute;
	  float: left;
	  width: 9800px;
	  height: 101%;
	  overflow: hidden;
	  margin: 0;
	  top: 0;
	  padding: 0;
	  z-index:2;
  }
  
  .slide{
	  position:relative;	
	  float:left;
	  width:1960px;
	  height:101%;
	  margin:0;
	  padding:0;
	  /*transition: left .5s linear;*/
	  
  }
  .content{
	  position: relative;
	  width: 100%;
	  height:fit-content;
	  min-height:100%;
  }
  
  a,img {
	  -webkit-touch-callout: none !important;
	  -webkit-user-select: none !important;
	  -khtml-user-select: none !important;
	  -ms-user-select: none !important;
	  user-select: none !important;
	  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  }
  
  #canvas{
	  position: absolute;
	  z-index: 9;	
  }
  #certi,
  #gold-back,
  #drag1 {
	  position: absolute;
	  z-index: 10;
	  width: fit-content;
	  height: fit-content;
	  margin: 0;
	  padding: 0;
	  left:3%;
	  top:4%;
	  color: #fff;
	  text-align: center;
	  border-radius:5px;
  
	  -ms-touch-action: none;
		  touch-action: none;
	  overflow:hidden;
	  display:none;
	  pointer-events: auto;
  }
  #certi{
	  z-index: 9 !important;
  }
  #certi img,
  #gold-back img,
  #drag1 img{
	  width:100%;
	  height:100%;		
  }
  #scale-element3{
	margin: auto;
	height:auto;
	width:100%;	
  }
  #scale-element {
	margin: auto;
	touch-action: none;
	height:auto;
	width:100%;
  }
  
  #gesture-area{
	  position:absolute;
	  z-index:5;	
  }
  .ga1{
	  position:absolute;
	  z-index:5;	
	  min-height:40px;
	  touch-action: none;
	  text-align:center;
	  width: 100%;
	  box-sizing: border-box;
	  pointer-events: auto;
  }
  
  .draggable.-drop-possible { background-color: #42bd41; }
  #template-img{
	  width:100%;
	  max-width:480px;
	  height:auto;	
	  position: absolute;
	  z-index:6;
  }
  
  .frame {
	-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;         
  }
  .parent{
	  background:#efefef;
	  border-radius: 4.34%/7%;
	  width:480px;
	  height:302px;
	  overflow:hidden;
	  z-index:3;
	  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
	  transform-origin: left top;
  }
  .parent {
	-webkit-transform: rotateY(0deg);
			transform: rotateY(0deg);
			  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-webkit-perspective: 1000px;
			perspective: 1000px;          
	position:relative;
	margin:0 auto;
  }
  .parent.is-flipped {
	-webkit-transform: rotateY(90deg);
			transform: rotateY(90deg);
  }
  
  #template-parent{
	  position: absolute;
	  width: 100%;
	  pointer-events:none;
  }
  
  #drag2{
	  position:relative;
	  z-index:8;	
	  -ms-touch-action: none;
		  touch-action: none;	
	  background:#fce;
	  width:300px;
	  height:30px;
  }
  .textparent{
	  z-index:9;
	  /*transform-origin: top left;	*/
	  position: absolute;
	  width: fit-content;
	  height: fit-content;
	  transform-origin: center center;	
  }
  .back-text,
  .front-text {
	  position: absolute;
	  word-break: keep-all;
	  white-space: nowrap;
	  z-index:9;	
	  min-height:50px;
	  color: white;
	  font-size: 1.5rem;
	  font-family: sans-serif;
	  padding: 15px 5px;
	  touch-action: none;
	  text-align:center;
	  width: fit-content;
	  border:1px solid rgba(0,0,0,0);
	  outline:1px solid rgba(255,255,255,0);
	  /*font-size:1rem;*/
	  display:none;
	  box-sizing: border-box;
	  pointer-events: auto;
	  -webkit-transition: color 0.5s;
	  -moz-transition: color 0.5s;
	  -ms-transition: color 0.5s; 
	  -o-transition: color 0.5s;
	  transition: color 0.5s;
	  transition-timing-function: ease-in; 	
	  /*transform-origin: top left;*/
	  transform-origin: center center;
	  
  }
  .back-text:focus,
  .front-text:focus {
	  border: 1px dashed #000000;
	  outline: 1px dashed #ffffff;
  }
  .text-shadow{
	  color:black;
	  top:2px;
	  left:2px;
	  z-index:8;
	  display:none;	
  }
  
  /* The Modal (background) */
  .modal {
	display: none; /* Hidden by default */
	position: absolute; /* Stay in place */
	z-index: 100; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,1); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
	background-color: #7189a1;
	margin: 1rem auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #efefef;
	width: 80%; /* Could be more or less, depending on screen size */
	max-width:380px;  
	color:white;
	border-radius:20px;
  }
  
  /* The Close Button */
  .closeCert,
  .closeTemp,
  .closeGold,
  .close {
	color: #efefef;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
  }
  .closeGold:hover,
  .closeGold:focus,
  .close:hover,
  .close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
  }
  .modal-content img{
	  margin:0 auto;
  }
  .set_cert_type{
	  position:relative;
	  z-index:200;
	  pointer-events:initial;
	  cursor:pointer;	
  }
  #goldModal{
	text-align:center;	
  }
  .float-right{
	  float:right;	
  }
  
  .large {
	-webkit-transform: scale(1.25);
	transform: scale(1.25);
  }
  .menu-toggle-land{
	  display:none;
  }
  .menu-toggle-port{
	  position:absolute;
	  top:0px;
	  width:100%;
	  background:#7189A1;
	  max-width:480px;
	  left:50%;
	  transform: translateX(-50%);
	  z-index:14;
	  text-align:right;
	  padding:0;
	  color:white;
	  font-size:1.2rem;
  }
  #savemenu div,
  #menu-opener div{
	  float:left;
	  margin: 6px;
  }
  .menu-toggle-land div{
	  display:none;
  }
  #menu-opener li{
	  margin: 6px;
	  display: inline-block;	
  }
  .menu-toggle-land span{
	  display:none;
  }
  .menu-toggle-port a{
	  position: relative;
	  display: inline;	
	  color: white;
	  text-align:right;
	  width:100%;
	  padding: 8px 30px 8px 10px;
	  cursor:pointer;
	  background: url(../img/icon_menutoggle.svg) right 50% no-repeat;
	  background-size:20px;
	  font-weight:bold;
	  
  }
  .menu-toggle-land a {
	/*  position: relative;
	  display: inline;
	  color: white;
	  padding: 20px 0px 8px 22px;
	  cursor: pointer;
	  background: url(../img/icon_menutoggle.svg) left 50% no-repeat;
	  background-size: 20px;
	  font-weight: bold;
	  float: left;*/
	  display:none;
  }
  .open{
	  top:0 !important;	
  }
  .background{
	  position:absolute;
	  top:-85px;
	  width:100%;
	  background:#7189A1;
	  max-width:480px;
	  left:50%;
	  transform: translateX(-50%);
	  z-index:16;
	  height:85px;
	  transition-duration: 0.5s;
	  transition-property: top;		
  }
  .buybtn{
	  width: 100%;
	  font-size: 1.2rem;
  }
  .control{
	  position:absolute;
	  top:-85px;
	  width:100%;
	  background:#7189A1;
	  max-width:480px;
	  left:50%;
	  transform: translateX(-50%);
	  z-index:16;
	  height:85px;
	  transition-duration: 0.5s;
	  transition-property: top;	
	  padding:5px 0;	
  }
  .control a{
	  width:40px;
	  height:40px;	
	  padding:0;
	  border:1px solid white;
	  position: relative;
	  display: inline-block;
  }
  .control a img{
	  width:40px;
	  height:40px;
  }
  .menu{
	  position:absolute;
	  /*top:-85px;*/
	  top:0px;
	  width:100%;
	  background:#7189A1;
	  max-width:480px;
	  left:50%;
	  transform: translateX(-50%);
	  z-index:15;
	  height:85px;
	  transition-duration: 0.5s;
	  transition-property: top;	
  }
  .background .btn,
  .background a,
  .menu a {
	  width: 32%;
	  padding: 55px 0px 8px 0px;
	  color: white;
	  position: relative;
	  display: inline-block;
	  text-transform:uppercase;
	  font-weight: bold;
	  border-top: 1px solid #7189A1;
	  border-bottom: 1px solid #7189A1;
	  text-align:center;
	  cursor:pointer;
	  font-size:1rem;
	  box-shadow: none;
  }
  @media only screen and (max-width: 400px) {
	  .background .btn,
	  .background a,	
	  .control a,
	  .menu a {	
		  font-size:3.5vw;
	  }
	  .control a.inc_font_size,
	  .control a.desc_font_size{
		  display:none !important;
	  }	
  }
  .menu a.menu_front__background {
	  background:url(../img/icon_background.svg) 50% 10px no-repeat;
	  background-size:35px;
  }
  .menu a.menu_front__text {
	  background:url(../img/icon_text.svg) 50% 10px no-repeat;
	  background-size:35px;
  }
  .menu a.menu_front__gold {
	  background:url(../img/icon_gold.svg) 50% 10px no-repeat;
	  background-size:35px;
  }
  .menu a.menu_front__cert {
	  background:url(../img/icon_cert.svg) 50% 10px no-repeat;
	  background-size:30px;
  }
  .background a:hover,
  .menu a:hover {
	  background-color: #5F798E;
	  border-top: 1px solid #4D6477;
	  border-bottom: 1px solid #4D6477;
  }
  /*
  .menu a {
	  width: 100%;
	  padding: 8px 10px 8px 40px;
	  color: white;
	  position: relative;
	  display: block;
	  text-transform:uppercase;
	  font-weight: bold;
	  max-width:430px;    
	  border-top: 1px solid #7189A1;
	  border-bottom: 1px solid #7189A1;
  }
  
  .menu a.menu_front__background {
	  background:url(../img/icon_background.svg) 10px 50% no-repeat;
	  background-size:20px;
  }
  .menu a.menu_front__text {
	  background:url(../img/icon_text.svg) 10px 50% no-repeat;
	  background-size:20px;
  }
  .menu a.menu_front__gold {
	  background:url(../img/icon_gold.svg) 10px 50% no-repeat;
	  background-size:20px;
  }
  .menu a:hover {
	  background-color: #5F798E;
	  border-top: 1px solid #4D6477;
	  border-bottom: 1px solid #4D6477;
  }*/
  .text-center{
	  text-align:center;	
  }
  .background a{
	  width:48%;	
  }
  .background .own_photo {
	  background:url(../img/own_bg.svg) 50% 10px no-repeat;
	  background-size:35px;
	  width:48%;	
  }
  
  .background a.template {
	  background:url(../img/pattern_bg.svg) 50% 10px no-repeat;
	  background-size:35px;
  }
  .sidebar-image-gallery img{
	  width:48%;
	  height:auto;
  }
  .set_font_family{
	  cursor:pointer;	
  }
  
  .cert-svg{
	  height:auto;
  }
  .st0{
	  fill:black;	
  }
  .set_cert_type{
	  float:left;
	  width:48%;	
	  margin:1%;
  }
  .clearboth{
	  clear:both;	
  }
  #certModal .sp-replacer {
	  position: relative;	
  }
  #hidethis{
	  display:none;	
  }
  #save-card .content{
	  position:absolute;	
  
  }
  #save-card #savemenu{
	  text-align:left;	
  }
  #save-card .disp{
	  padding:0 10px;	
	  margin: 60px auto 0 auto;
	  max-width: 480px;
  }
  #save-card .disp h2,
  #save-card .disp p{
	  color:#69401d;
  }
  .alert {
	  width:90%;
	  max-width: 480px !important;
	  left: 50%;
	  transform: translatex(-50%);
	  display: block;
	  position: relative;
	  padding: 15px;
	  margin-bottom: 20px;
	  border: 1px solid transparent;
	  border-radius: 4px;    
	  color: #a94442;
	  background-color: #f2dede;
	  border-color: #ebccd1;    
  }
  .btn{
	  text-transform:uppercase;
	  text-align:center;
	  color: white;
	  background:#81d1f3;
	  border-radius:10px;
	  position:relative;
	  display: block;	
	  padding:0.7rem;
	  margin-bottom:1.3rem;
	  font-weight: bold;
	  text-decoration:none;
	  box-shadow: 0 3px 2px 0px rgba(0, 0, 0, 0.4);
  }
  .saveit{
	  width:100%;
	  position:relative;
	  height:50px;	
	  overflow:hidden;
	  -webkit-transition: height 0.3s, top 0.3s;
	  -moz-transition: height 0.3s, top 0.3s; 
	  -ms-transition: height 0.3s, top 0.3s; 
	  -o-transition: height 0.3s, top 0.3s;
	  transition: height 0.3s, top 0.3s; 
	  transition-timing-function: ease-in;  	
  }
  .text-white{
	  color: white !important;	
  }
  *,
  *:before,
  *:after {
	outline: none;
  }
  .register {
	margin: 0 auto 0;
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  .field {
	width: 100%;
	max-width:480px;
	height: 0px;
	position: relative;
	overflow:hidden;
	  -webkit-transition: height 0.3s, top 0.3s;
	  -moz-transition: height 0.3s, top 0.3s; 
	  -ms-transition: height 0.3s, top 0.3s; 
	  -o-transition: height 0.3s, top 0.3s;
	  transition: height 0.3s, top 0.3s; 
	  transition-timing-function: ease-in;   
  }
  .field input {
	max-width:480px;
	border-radius: 10px;
	height: 40px;
	border: 0;
	width: 97%;
	padding: 16px 0 0 16px;
	font-size: 0;
	background: #81d1f3;
	transition: background .3s ease;
	color: #ffffff;
	box-shadow: 0 3px 2px 0px rgba(0, 0, 0, 0.4);
  }
  .field input:focus {
	background: #81d1f3;
	font-size: 1rem;
  }
  .field input:focus::-moz-selection {
	background: rgba(188, 232, 255, 0.5);
  }
  .field input:focus::selection {
	background: rgba(188, 232, 255, 0.5);
  }
  .field input.active {
	background: #81d1f3;
	font-size: 1rem;
  }
  .field input,
  .field button {
	position: absolute;
	height: 40px;
  }
  .field button {
	background: rgba(0, 0, 0, 0.3);
	right: 0;
	border: 0;
	width: 115px;
	border-radius: 10px;
	font-size: 1rem;
	cursor: pointer;
	transition: width .3s ease, background .3s ease, opacity .3s ease;
	opacity: 0;
	color: black;
	text-transform: uppercae;
	pointer-events: none;
	padding:10px 3px;
	height:56px;
  }
  .field button.active {
	color: #ffffff;
	background: #639EDB;
	opacity: 1;
	pointer-events: auto;
  }
  .field button.active:hover {
	background: #5E99D6;
  }
  .field button.full {
	width: 100%;
  }
  .field input:focus + label {
	font-size: 0.7rem;
	-webkit-transform: translate(16px, 11px);
			transform: translate(16px, 11px);
	color: rgba(255, 255, 255, 0.7);
  }
  .field label {
	position: absolute;
	color: white;
	-webkit-transform: translate(16px, 20px);
			transform: translate(16px, 20px);
	transition: font-size .3s ease, color .3s .1s ease, -webkit-transform .3s ease;
	transition: transform .3s ease, font-size .3s ease, color .3s .1s ease;
	transition: transform .3s ease, font-size .3s ease, color .3s .1s ease, -webkit-transform .3s ease;
	font-size: 1rem;
  }
  .field label.active {
	font-size: 0.7rem;
	-webkit-transform: translate(16px, 11px);
			transform: translate(16px, 11px);
	color: rgba(255, 255, 255, 0.7);
  }
  .field input:focus + label + button {
	opacity: 1;
  }
  .loader{
	  position:absolute;
	  bottom:5px;	
	  display:flex;
	  width:100%;
	  z-index:50;	
	  display:none;	
  }
  .loader img{
	  margin:0 auto;
  }
  .nav{
	  position:absolute;
	  bottom:65px !important;
	  /*bottom:0;*/
	  display:flex;
	  width:100%;
	  z-index:50;
	  transition-duration: 0.5s;
	  transition-property: bottom;		
  }
  .nav .disabled{
	  bottom:-60px !important;	
  }
  .nav a.next_p{
	  color: white;
	  background-color: #7189A1;
	  
  }
  .nav a.prev_p{
	  color: #815C58;
	  background-color: #C7A393;
  }
  .nav a.next_p:hover{
	  background-color: #8ba2b9;
	  
  }
  .nav a.prev_p:hover{
	  background-color: #e2c1b2;
  }
  .nav a{
	  padding:10px 25px;
	  width:50%;
	  text-decoration: none;	
	  color: #1f1f1f;
	  background-color: #efefef;
	  text-align:center;
  }
  .mb-0{
	  margin-bottom:0;	
  }
  .mb-4{
	  margin-bottom:20px;	
  }
  .mt-1{
	  margin-top:8px;	
  }
  .temp-img{
	  border-radius: 5%/8%;	
  }
  
  .frame {
	  max-width: 1000px;
	  max-height: 720px;
	  display: block;
	  position: relative;
	  width: 100%;
	  height: 100%;
	  overflow:hidden;
	  background:url('../img/bg01.svg');
	  background-size: cover;
	  background-position-x: center;  
	  z-index:1;
  }
  
  .main-frame {
	  border-radius: 20px;
	  max-width: 1000px;
	  max-height: 720px;
	  display: block;
	  position: relative;
	  margin: 0 auto;
	  width: 100%;
	  height: 100vh;
	  background: white;
	  padding: 1rem;
	  z-index:0;
  }
  @media only screen and (max-width: 1032px) {
	  .main-frame,
	  .frame{
		  max-height: 100%;
		  height:100vh;
		  position: fixed;
	  }
	  .frame{
		  height:100%;
	  }	
	  .main-frame{
		  padding: 0;	
	  }	
	  .main-logo{
		  display:none;
	  }	
	  .foot-menu{
		  display:none;	
	  }	
  }
  @media only screen and (min-width: 1032px) {
	  .main-logo{
		  display:block;
		  max-width: 1032px;	
		  margin: 2rem auto 1rem auto;	
	  }
	  .main-logo img{
		  width:300px;
	  }
	  #events,
	  body{
		  background: url('../../img/bg-main.jpg');	
		  background-size:cover 100%;
	  }	
	  #panel-4{
		  box-shadow:none;	
	  }
	  .frame{
		  border-radius:1rem;			
	  }
  
	  .foot-menu{
		  display:block;	
		  max-width: 1032px;	
		  margin: 1rem auto 2rem auto;		
		  text-align:right;
	  }
	  .foot-menu ul li{
		  list-type:none;
		  display:inline;	
		  font-family:"Source Sans Pro", sans-serif;	
		  padding:0 0 0 1rem;
		  margin:0 0 0 1rem;
	  }
	  .foot-menu ul li a{
		  text-decoration:none;
		  text-transform:uppercase;
		  color:#605554;
		  font-weight:bold;
	  }	
	  #main-hero #panel-3 {
		  background-size: cover;
		  background-attachment: initial;
	  }	
	  .to-bottom{
		  max-width:480px;	
	  }
	  #events .boxed{
		  top:0;	
	  }
  }
  
  .save-to-db {
	  padding: 3px 10px;
	  background: black;
	  position: fixed;
	  top: 0;
	  height: 38px;
	  width: 30px;
	  z-index: 2000;
	  right: 0;
	  text-align:center;
  }
  .sdb{
	  color:white;
	  font-size:2rem;	
  }
  .godmode{
	  position: absolute;
	  z-index: 1;
	  top: 50px;
	  padding-left: 5px;
	  color: wheat;
  }
  .over-layer{
	  position:fixed;
	  z-index:3000;
	  width:100%;
	  height:100vh;
	  background: rgba(0,0,0,0);
  }