.your-child-col.active:after {background-image:url(../../img/icons/icon-top-triangle-white.png);}
.your-child-col {margin-top:0;}

.cards .card { width:48%; margin-left:4%; margin-bottom:4%; text-align:center; padding-bottom:18px; position:relative; }
.cards .card  img {width:135px; display:block; margin:20px auto 15px;}
.cards .card  .icon-success-large {position:absolute; bottom:20px; left:50%; margin-left:-10px; z-index:50; display:none;}
.cards .card.selected  .icon-success-large {display:block;}
.cards .card.selected  .icon-chevron-200-right-blue {visibility:hidden;}
.cards .card .hover-box {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,84,166,0.75); display:none;}
.cards .card .hover-box .icon-search-container {padding:8px; border:2px solid #ffffff; display:inline-block; border-radius:50px; font-size:0; position:absolute; left:50%; top:50%; margin:-40px 0 0 -20px;}
.cards .card:hover .hover-box {display:block;}
.cards .card .select-card {display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:80;}

.preview-box {box-shadow:0 3px 0 #004385; border-radius:2px; background:#f7f7f7; }
.card-large-preview {min-height:650px; position:relative;}
.card-large-preview .preview-image-container {position:relative; z-index:5;}
.card-large-preview .preview-image-container img {display:block; margin:35px auto;}
.card-large-preview .select-preview {width:276px; text-align:center; position:absolute; top:50%; left:50%; margin-top:-25px; margin-left:-138px; text-transform:uppercase; font-size:18px; font-size:1.8rem; color:#cbcbcb;  font-family: 'Montserrat', sans-serif; z-index:1;}
.card-large-preview .prev-card, .card-large-preview .next-card {display:none; position: absolute; top: 50%; right: 0; font-size:0; background-color: #0054a6; width: 45px; height: 44px; margin-top: -22px; border: 0; text-align: left; padding-top: 0; z-index:9; padding-left: 19px; outline: none;}
.card-large-preview .prev-card {right:auto; left:0; padding-left:16px;}

.card-selection .btn {width:285px; margin:10px auto 0; display:block;}
#btn-select-letter, #btn-confirm-letter {width:285px; margin:10px auto 0; display:block;}

#write-child-card-tab .narrow-col, #write-child-card-tab .wide-col {padding-bottom:0px; margin-bottom:20px;}
#write-child-card-tab h2, #write-child-card-tab label {font-size:18px; font-size:1.8rem; color:#4a4a4a;   margin: 0 0 1.2rem 0; text-transform:uppercase; font-weight:bold; display:block;   font-family: 'Montserrat', sans-serif;}
#write-child-card-tab textarea {width:100%; box-shadow:0 3px 0 #004385; border-radius:2px; background:#f7f7f7; resize:none; border:0; padding:10px; height:500px;}
.photo-upload {position:relative; margin-bottom:30px;}
.photo-upload .icon-plus-large {position:absolute; top:50%; left:50%; margin:-14px 0 0 -14px; }
.photo-upload.browse {height:270px; margin-bottom:50px;}
.photo-upload .upload {position:absolute; top:0; left:0; width:100%; height:100%;}
.photo-upload .upload-button {position:absolute; top:0; left:0; width:100% !important; height:100% !important; cursor:pointer;}

.mobile-char-count {display:none;}
.chars-remaining {float:right;}
.remove-letter-photo {position:absolute; top:50%; left:50%; margin:-41px 0 0 -36px; text-align:center; color:#ffffff; text-decoration:none; text-transform:uppercase; font-family: 'Montserrat', sans-serif;}
.remove-letter-photo .icon {display:block; margin:0 auto 8px;}

.write-letter-container h2 {font-size:26px; font-size:2.6rem; text-align:center; font-family: 'Raleway', sans-serif; font-weight:normal; text-transform:none;}

.letter-selected-child {text-align:center;}
.letter-selected-child .your-child-col {float:none; display:inline-block;}

.letter-full-preview {margin:30px 0; padding: 0px 0px 0px 19px;}
.letter-full-preview .preview-image {max-width:855px; width:49%; margin:20px auto 0; display:table-cell; position:relative; }
.letter-full-preview .page-number {background:#4a4a4a; color:#ffffff; text-align:center; text-transform:uppercase; font-family: 'Montserrat', sans-serif; margin-bottom:20px; padding:10px 0; height:44px; visibility:hidden;}
.letter-full-preview .enter-fullscreen {display:block; width:140px; text-align:center; margin:0 auto; color:#0054a6; text-transform:uppercase; font-family: 'Montserrat', sans-serif; text-decoration:none; font-size:16px; font-size:1.6rem;}
.letter-full-preview .enter-fullscreen .icon {display:block; margin:5px auto;}
.write-letter-fullscreen-preview .btn {width:250px; float:right; margin-left:10px !important;}
.preview {padding: 0px 30px 20px 0px !important;}

.lightbox-card-preview  {display:none;}
.lightbox-card-preview .lightbox-container {width:1100px; max-width:100%; text-align:center; position:absolute; top:30px; left:50%; bottom:130px; margin-top:0; overflow:auto; margin-left:-550px;}
.lightbox-card-preview .lightbox-exit {position:absolute; bottom:20px; left:50%; color:#ffffff; margin-left:-80px; }
.lightbox-card-preview .lightbox-exit a {display:block; width:160px; text-align:center; margin:0 auto; color:#ffffff; text-transform:uppercase; font-family: 'Montserrat', sans-serif; text-decoration:none; font-size:16px; font-size:1.6rem;}
.lightbox-card-preview .lightbox-exit .icon {display:block; margin:5px auto;}
.lightbox-card-preview .lightbox-content {height:100%;}
.lightbox-card-preview .preview-carousel, .lightbox-card-preview .slick-list, .lightbox-card-preview .slick-track, .lightbox-card-preview .preview {height:100%;}
.lightbox-card-preview .preview {background-size:contain; background-repeat:no-repeat; background-position:center; overflow:auto;}
.lightbox-card-preview .preview img {margin:0 auto;}

@media all and (max-width: 1100px) { 
	#write-child-card-tab .wide-col, #write-child-card-tab .narrow-col {width:100%; margin-left:0;}
	#write-child-card-tab textarea {height:180px;}
	.photo-upload {width:250px; float:left; margin-right:10px;}
	
	.lightbox-card-preview .lightbox-container {width:100%; left:0; margin-left:0;}

	
}

@media all and (max-width: 960px) {
	.card-large-preview {display:none;}
	.col-cards {width:100%;}
	.cards .card img {width:85%;}
	.cards .card:hover .hover-box {display:none;}

}

@media all and (max-width: 768px) { 
	
}

@media all and (max-width: 640px) {
	.cards .card { width: 100%; margin-left: 0; margin-bottom:20px;}
	.card-selection .btn, #btn-select-letter, #btn-confirm-letter {width:100%;}
	.chars-remaining {display:none;}
	.mobile-char-count {display:block;}
	
	.letter-full-preview {background:none; box-shadow:none; margin-top:0 !important; padding-top:0 !important;}
	.letter-full-preview .preview-image {width:100%; margin-top:0; padding: 65px 0 50px 17px; height: 798px; }
	.letter-full-preview .carousel .next-slide, .letter-full-preview .carousel .prev-slide {top:auto; bottom:20px; margin-top:0; background:#393939; height:44px;}
	.letter-full-preview .page-number {visibility:visible;}
	.top-action-buttons {display:none;}
	.carousel-info-text pre {font-size: 0.45em; line-height: 1.8em; text-align: left; margin-left: 12px;}
	.write-letter-fullscreen-preview .btn {float:none; width:100%; margin-left:0; margin-bottom:20px;}
}

@media (min-width: 300px) and (max-width: 360px){
	.letter-full-preview .preview-image {height: 400px; width: 95%;}
	.write-letter-fullscreen-preview .btn {float:none; width:100%; margin-left:0; margin-bottom:20px;}
	.write-letter-fullscreen-preview .btn {margin-left: -7px !important;}
}
@media (min-width: 361px) and (max-width: 400px){
	.letter-full-preview .preview-image {height: 450px; width: 95%;}
	.write-letter-fullscreen-preview .btn {float:none; width:100%; margin-left:0; margin-bottom:20px;}
	.write-letter-fullscreen-preview .btn {margin-left: -7px !important;}


}
@media (min-width: 401px) and (max-width: 440px){
	.letter-full-preview .preview-image {height: 500px; width: 95%;}
	.write-letter-fullscreen-preview .btn {float:none; width:100%; margin-left:0; margin-bottom:20px;}
	.write-letter-fullscreen-preview .btn {margin-left: -7px !important;}
}

@media (min-width:441px) and (max-width: 460px){
	.letter-full-preview .preview-image {height: 550px; width: 95%;}
	.write-letter-fullscreen-preview .btn {float:none; width:100%; margin-left:0; margin-bottom:20px;}
	.write-letter-fullscreen-preview .btn {margin-left: -7px !important;}
}

@media (min-width:461px) and (max-width: 480px){
	.letter-full-preview .preview-image {height: 535px; width: 95%;}
	.write-letter-fullscreen-preview .btn {float:none; width:100%; margin-left:0; margin-bottom:20px;}
	.write-letter-fullscreen-preview .btn {margin-left: -7px !important;}
}

@media (min-width:481px) and (max-width: 520px){
	.letter-full-preview .preview-image {height: 655px; width: 95%;}
	.write-letter-fullscreen-preview .btn {float:none; width:100%; margin-left:0; margin-bottom:20px;}
	.write-letter-fullscreen-preview .btn {margin-left: -7px !important;}
}

@media (min-width:521px) and (max-width: 560px){
	.letter-full-preview .preview-image {height: 680px; width: 95%;}
	.write-letter-fullscreen-preview .btn {float:none; width:100%; margin-left:0; margin-bottom:20px;}
	.preview-content{width: 95% !important;}
	.write-letter-fullscreen-preview .btn {margin-left: -7px !important;}
}

@media (min-width:561px) and (max-width: 580px){
	.letter-full-preview .preview-image {height: 735px; width: 95%;}
	.write-letter-fullscreen-preview .btn {float:none; width:100%; margin-left:0; margin-bottom:20px;}
	.preview-content{width: 95% !important;}
}

#progress {
 /*width: 500px;
 border: 1px solid black;   */
 position: relative;
 margin-top: 5px;
 margin-bottom: 10px;
}

#bar {
 color: #EA5239;
 width: 0%;
}