/* ELEMENTS */
body{
	font-family: 'Poppins', sans-serif;
	/*
    font-family: 'Work Sans', sans-serif;
    font-family: 'Lato', sans-serif;
	background-color: #D9AFD9;
	background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
	*/ 
}

a{text-decoration: underline}
p,div,span{font-size: 15px}

.footer-text{
	color:#7D7D7D;
}




#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 500px; 
    height: 500px; 
    padding: 10px; 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}




focus { outline: none; }
span.orange{
	color:#f05425;
}
.text-center{text-align:center;}
.alivecard-logo{
	background-image: url('../images/alivecard-logo-dark.png');
	background-repeat: no-repeat;
	width:130px;
	height:27px;
}
.hintbox{
    background-color:#fff;
	border-radius: 10px;
	border: 3px solid #f05425;
	opacity: .95;
	line-height: 1.3em;
	font-size:15px;
	padding: 16px;
	display:block;
	margin-bottom:25px;
}
.hintbox p{
    padding-bottom:0;
 
}
.hintbox2{
    background-color:#f7f7f7;
	border-radius: 10px;
	border: 3px solid #cccccc;
	opacity: .95;
	line-height: 1.3em;
	font-size:15px;
	padding: 10px;
	display:block;
	margin-bottom:25px;
	max-width:300px;
	text-align: center;
}

.go-back{
	text-align:center;
	display:block;
}
.contact-profile-pic{
	width:150px;
    height:150px;
	margin:0 auto;
}
.contact-profile-pic img{
    object-fit:cover;
	width:150px;
    height:150px;
	border-radius:100%;
}
.contact-profile-btn{
    margin-top:15px;
}
.upload-block{
	margin:0 auto;
}
input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: none;
    display: inline-block;
    padding: 12px;
    cursor: pointer;
	border-radius:30px;
	margin:0 auto 0;
	background-color:#f05425;
	color:#fff;
	font-weight: normal;
	font-size: 18px
}
.custom-file-upload .material-icons{
	vertical-align:middle;
	margin-top:-2px;
	
}
.qr-echo{
    width:240px;
    height:240px;
    margin:0 auto 20px;
}
.design-title{
	font-weight:bold;
	font-size:16px;
}
.design-title .material-icons{
    vertical-align:middle;
	margin-top:-2px;
}
.design > .phone,
.design > .qr-echo{
    margin-top:10px;
    margin-bottom:10px;
}
.current-designs{
    font-size:36px;
}
.current-designs-title-row{
    padding:24px 0;
    font-weight:bold;
}
.current-designs .material-icons{
    font-size:36px;
    vertical-align:middle;
    margin-right:12px;
    color:#666;
}
.required-row{
	margin-top:24px;
}
p.required{
	color:#666;
	font-size:12px;
	margin-top:15px;
}
p.social-media{
	margin-top:24px;
}
/* Buttons */
.btn,
button{
	display:block;
}
.btn-orange{
    background-color:#000000;
    color:#fff;
    border-radius:23px;
    border:none;
}
.btn-orange:hover{
    background-color:#42444a;
    color:#fff !important;
    border-radius:23px;
    border:none;
}
.btn-blue{
    background-color:#0184BE;
    color:#fff;
    border-radius:23px;
    border:none;
}
.btn-blue:hover{
    background-color:#0184BE;
    color:#fff !important;
    border-radius:23px;
    border:none;
}
.btn-options-collapse{
	background-color:#fff !important;
	color:#444 !important;
	border:none;
	border-bottom:2px solid !important;
	border-color:#f05425 !important;
	border-radius:0;
	font-weight:bold;
}
.btn-options-collapse:active,
.btn-options-collapse:hover{
	color:#f05425 !important;
}
.btn-options-collapse:active{
	box-shadow:none;
}
.save-row{
    padding-top:24px;
}
.contact-row{
    padding-top:12px;
}
.phone{
    position:relative;
    width:280px;
    height:559px;
    margin:0 auto;
}
.phone-wallpaper-layer{
/*    background-image: url('../images/sample-phone-background.png');*/
    width:270px;
    height:558px;
    position:absolute;
    top:0;
    left:0px;
    z-index:0;
    border-radius:50px;
	background-repeat: no-repeat;
}
.phone-foreground-layer{
    background-image: url('../images/phone-white.png');
    width:280px;
    height:559px;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}

.qr_bg{

	opacity: .9;
	width:110px;
	height:130px;
	z-index:2;
	position:absolute;
	/*top:360px;*/
	top:240px;
	left:85px;
}

.qr_label{
	font-size:12px;
	padding-top:4px;
	font-weight:600;
	color: #fff;
}

.qr_img{
	width:100px;
	height:100px;
	margin:0 auto;
	border-radius: 8px;
}
.phone-qr{
	opacity: .9;
    width:110px;
    height:130px;
    background-color:#fff;
    z-index:2;
    position:absolute;
    top:360px;
    left:85px;
    border-radius:8px;
}
.phone-qr .name{
	font-size:14px;
	padding-top:4px;
	font-weight:900;
}
.phone-qr .qr-code{
	width:100px;
	height:100px;
	margin:0 auto;

}
.phone-qr .qr-code img{
	width:100px;
	height:100px;
	background-size:cover;
}
.phone .brand{
	display: none;
	width:74px;
	height:25px;
	background-image: url('../images/alive5-logo.png');
	background-size:cover;
	position:absolute;
	top:450px;
	left:105px;
	z-index:4;
}
/* GRIDS */
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}
.grid-item {
  padding: 20px;
  text-align: center;
}
/* TOP NAV */
.nav-qr-type{
    background-color:#f05425;
    padding:10px;
	border-radius:0 0 8px 8px;
}
.nav-qr-type a{
    border:2px solid #fff;
    background-color:#f05425 !important;
    color:#fff;
    border-radius:21px !important;
	font-weight:bold;
}
.nav-qr-type a:hover{
    background-color:#fff !important;
    color:#f05425 !important;
}
.nav-qr-type > li.active > a,
.nav-qr-type > li.active > a:focus{
    background-color:#fff !important;
    color:#f05425 !important;
}
/* SUB NAV */
.nav-design{
    font-size:21px;
    margin:20px 0 40px;
}
.nav-design a{
    background-color:#fff !important;
    color:#444 !important;
    border-radius:0 !important;
    border-bottom:2px solid !important;
    border-color:#fff !important;
}
.nav-design a:hover{
    background-color:#fff !important;
    color:#f05425 !important;
    border-bottom:2px solid !important;
    border-color:#fff !important;
}
.nav-design > li.active > a,
.nav-design > li.active > a:focus{
    background-color:#fff !important;
    color:#f05425 !important;
    border-bottom:2px solid !important;
    border-color:#f05425 !important;
}
/* BOOTSTRAP OVERRIDES */
.nav-pills > li {
    float:none;
    display:inline-block;
    zoom:1;
}
.nav-pills {
    text-align:center;
}
.btn:focus, 
.btn.focus{
	outline:none; color:#fff;
}
.carousel{
    width:278px; 
    height:350px; 
    margin:0 auto 20px;
}
.carousel2{
    width:320px; 
    height:220px; 
    margin:0 auto 20px;
	border:1px solid #eee; 
}
.tab-pane{
    padding-bottom:25px;
}
.well{
	padding:20px 0;
	background-color:#fff;
	border:none;
	border-radius:0;
	box-shadow:none;
}
.carousel-control{
	opacity:1;
}
.carousel-control.right{
	background-image:none;
	margin-right: -35px;
}
.carousel-control.left{
	background-image:none;
	margin-left: -35px; 
}
.carousel-control .glyphicon{
	background:#f05425;
	width:44px;
	height:44px;
	padding-top:5px;
	border-radius:100%;
	border:2px solid #fff;
	margin-top:-20px;
}
.carousel-buttons{
	bottom:-150px; 
	z-index:2000;
}
.carousel-wallpaper{
	object-fit:cover;
	border-radius:40px !important; 
	height:558px !important;
	width:270px !important;
}
.carousel-indic-fix{
	bottom:110px !important;
}
.img_carousel_wp{
	border-radius: 40px;
	width: 278px;
	height:558px;
}
.logo{
	width:170px;
	height:57px;
	background-image: url('../images/alivecard-logo.png');
	margin-top:22px;
}
 
.btn .material-icons{
	vertical-align:middle;
	margin-top:-2px;
	margin-right:4px;
}
.modal-section{
	padding-top:10px;
	padding-bottom:10px;
}

.panel-grid,
.table-grid-row,
.page-grid{
	display:grid;
}
.table-grid-five-steps{
	grid-template-columns: 25% 25% 25% 25%; /* Equals 100% */
}
.table-grid-item{
	padding:20px 15px;
}
.table-grid-five-steps .step{
	color:#E6E6E6;
}
.table-grid-five-steps .line{
	background-color:#E6E6E6;
	width:100%;
	height:5px;
	margin-top:10px;
}
.table-grid-five-steps .step.done{
	color:#FD521E;
}
.table-grid-five-steps .line.done{
	background-color:#FD521E;
}

.bot-ui{
	width:280px;
    height:auto;
	margin:0px auto 25px;
	-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,.15);
	box-shadow: 0 0 15px 0 rgba(0,0,0,.15);
	border-radius:5px 5px;
}
.bot-ui-header{
	background-color:#4B4B4B;
	color:#fff;
	text-align:center;
	padding:8px;
	font-size:21px;
	border-radius:5px 5px 0 0;
}
.bot-ui-subheader{
	background-color:#222222;
	color:#fff;
	text-align:center;
	padding:8px;
	font-siz:18px;
}
.bot-ui-message{
	
}
.bot-ui-photo{
	width:120px;
	height:120px;
	margin:30px auto 10px 80px;
	position:relative;
	cursor: pointer;
}
.bot-ui-photo img{
	width:120px;
	height:120px;
	border-radius:100%;
	object-fit:cover;
	position:relative;
	z-index:1;
}
.bot-ui-photo-indicator{
	position:absolute;
	top:0;
	right:0;
	width:40px;
	height:40px;
	background-color:#FD521E;
	border-radius:100%;
	z-index:2;
	
}
.bot-ui-photo-indicator .material-icons{
	color:#fff;
	font-size:25px;
	margin-left:8px;
	margin-top:8px;
	vertical-align:middle;
	cursor: pointer;
}
.bot-ui-photo-indicator a{
	width:25px;
	height:25px;
	display:block;
	
}
.bot-ui-name{
	font-size:18px;
	font-weight:700;
	padding-bottom:15px;
}
.bot-ui-bio{
	font-size:15px;
	padding:0 15px 15px 15px;
}
.bot-ui-colors{
	width:280px;
}
.fake-button{
	background-color:#666666;
	padding:5px 12px;
	color:#fff;
	border-radius:5px;
	text-align:center;
	font-size: 12px;
}
.fake-button .material-icons{
	vertical-align:middle;
	margin-top:-2px;
	font-size:15px;
}
.bot-button-row{
	padding:0 20px;
}

.social-link{
	width:40px;
	height:40px;
	margin:0 auto;
}
.social-link a{
	width:40px;
	height:40px;
	display:block;
}
.social-row{
	padding-left:24px;
	padding-right:24px;
	margin-top:15px;
}
.website{
	background-image: url('../images/social-icons/website.svg');
	background-repeat: no-repeat;
	width:40px;
	height:40px;
}
.linkedin{
	background-image: url('../images/social-icons/linkedin.svg');
	background-repeat: no-repeat;
	width:40px;
	height:40px;
}
.twitter{
	background-image: url('../images/social-icons/twitter.svg');
	background-repeat: no-repeat;
	width:40px;
	height:40px;
}
.instagram{
	background-image: url('../images/social-icons/ig.svg');
	background-repeat: no-repeat;
	width:40px;
	height:40px;
}
.facebook{
	background-image: url('../images/social-icons/fb.svg');
	background-repeat: no-repeat;
	width:40px;
	height:40px;
}
.tiktok{
	background-image: url('../images/social-icons/tiktok.svg');
	background-repeat: no-repeat;
	width:40px;
	height:40px;
}
.youtube{
	background-image: url('../images/social-icons/yt.svg');
	background-repeat: no-repeat;
	width:40px;
	height:40px;
}
.snapchat{
	background-image: url('../images/social-icons/snapchat.svg');
	background-repeat: no-repeat;
	width:40px;
	height:40px;
}
.bot-ui-colors{
	width:200px;
	margin:0 auto;
}
.color{
	width:24px;
	height:24px;
	float:left;
	margin-right:7px;
	margin-left:7px;
	margin-bottom:25px;
}
.color a{
	width:24px;
	height:24px;
	display:block;
}

.pick-pink{
	width:24px;
	height:24px;
	border-radius:100%;
	background-color:#ef6fe2;
}
.pick-green{
	width:24px;
	height:24px;
	border-radius:100%;
	background-color:#39b54a;
}
.pick-red{
	width:24px;
	height:24px;
	border-radius:100%;
	background-color:#e53838;
}
.pick-blue{
	width:24px;
	height:24px;
	border-radius:100%;
	background-color:#3a7ab4;
}
.pick-black{
	width:24px;
	height:24px;
	border-radius:100%;
	background-color:#4B4B4B;
}



.padding-left-0{
	padding-left:0;
}
.padding-right-0{
	padding-right:0;
}
.margin-bottom-25{
	margin-bottom:25px;
}
.margin-top-25px{
	margin-top:25px;
}

.is-desktop{
	
}
.is-mobile{
	display:none;
}

.title-row{
	padding-top:0;
	padding-bottom:25px;
}



#div_target_canvas {
	display: none;
	width: 1440px;
	height: 3000px;
	border: 0px solid black;
	zoom: 0.2;
	-moz-transform: scale(0.2);
}
#div_target_wp{
	/*background-image: url('../images/wallpaper/wp-blue-2-lr.jpg');*/
    background-size:cover;
    background-position: center;
    height: 3000px; width: 1440px;
    border: 0px solid #f7f7f7;
	text-align: left;
}


#div_target_qr_container{
    
	height: auto;
	

	width: 440px;
	text-align: center;

	
	background-color:none;

	top:7000px;
	left:2600px;

	position: relative;
	border:0px solid red;
	padding: 0px;
	
	opacity:.8
}
#div_target_qr_message{
    border: 0px solid #000;
	text-align: center;
	margin-bottom: 10px;
}
.qr-message{
	text-align: center;
	color:#fff;
	font-weight: bold;
	font-size:55px;
	letter-spacing: normal;
}
#div_target_qr_image{ 
	border-radius: 40px;
	height:420px;
	width:420px;
	margin-left: 10px;
}

#div_download_done {
	display:none;
}
 
.img-download{
-webkit-box-shadow: 0px 10px 13px -7px #000000, 1px 8px 20px 6px rgba(255,255,255,0.21); 
box-shadow: 0px 10px 13px -7px #000000, 1px 8px 20px 6px rgba(255,255,255,0.21);
border-radius:20px; border: 5px solid #333; width:300px;
}







a { color: #f05425; text-decoration: underline; z-index: 10000 }

.arrow {
  text-align: center;
  margin: 0;
}
.bounce {
  -moz-animation: bounce 3s ;
  -webkit-animation: bounce 3s ;
  animation: bounce 3s ;
}


@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}


.bounce-right {
  -moz-animation: bounce-right 2s infinite;
  -webkit-animation: bounce-right 2s infinite;
  animation: bounce-right 2s infinite;
}

@keyframes bounce-right {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(0);
  }
  60% {
    transform: translateX(5px);
  }
  40% {
    transform: translateX(15px);
  }
}

.bounce-left {
  -moz-animation: bounce-left 2s infinite;
  -webkit-animation: bounce-left 2s infinite;
  animation: bounce-left 2s infinite;
}

@keyframes bounce-left {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(0);
  }
  60% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(-15px);
  }
}











@keyframes uploading-arrow {
  0% {
    margin-bottom: -40%;
	 opacity: 0;
  }
	20% {
		opacity: 1
	}
	50%{
		opacity: 1;
	}
	75% {
		
	  opacity: 0;
	}
  100% {
    margin-bottom: 10%;
  }
}

@keyframes uploading-arrow-complete {
	from {
		margin-bottom: -30%;
		opacity: 0;
	}
	to {
		margin-bottom: 0;
		opacity: 1;
		fill: #46BB39;
	}
}

.upload-btn-container {
   position: relative;
	overflow: hidden;
	width: 32px;
	height: 32px;
	display: inline-block;
   
	
   svg {
      position: absolute;
		
		&.upload-box {
			bottom: -7px;
		}
      
		&.upload-arrow {
			left: 8px;
			position: absolute;
			opacity: 0;
			bottom: 20%;
			animation: uploading-arrow 1.5s ease-out infinite;
		}
   }
	&.upload-complete {
		
		.upload-arrow {
			animation: uploading-arrow-complete 1.5s ease-out 1;
			transition: fill 1.5s ease-out;
		}
		svg {
			opacity: 1;
		}
		path {
			fill: #46BB39;
		}
	} 
}


.testimonial{
		width:400px;
	}






@media (max-width: 768px) {
	.nav-pills > li{width:100% !important;}
	.phone{
		position:relative;
		width:280px;
		height:559px;
		margin:8px auto 25px;
	}
	.nav-qr-type a{
		margin-bottom:4px
	}
	.grid-container {
	  display: grid;
	  grid-template-columns: auto;
	  padding: 10px;
	}
	.qr-message{
		font-size:10px;
	}
	.carousel-control .glyphicon{
		padding-top:10px;
	}
	.table-grid-five-steps{
		display:none;
	}
	.is-desktop{
		display:none;
	}
	.is-mobile{
		display:initial;
	}
	h3{text-align:center;}
	.logo{
		width:170px;
		height:57px;
		background-image: url('../images/alivecard-logo.png');
		margin-top:22px;
		margin-left:auto;
		margin-right:auto;
	}
	.testimonial{
		width:300px;
	}
	
	
	#div_target_qr_container{
		height: auto;
		width: 440px;
		background-color:none;

		top:1300px;
		left:500px;

		position: relative;
		border:0px solid red;
		padding: 0px;
		text-align: left;
		opacity:.8
	}
}