body {
    padding-top: 30px;
}
.custom-header {
    padding-bottom: 10px;
}

.well h4 {
	font-size: 20px;
	font-weight: normal;
	margin: 0px 0px 10px 0px;
}

.well button {
	margin-top: 5px;
}

.well label {
	font-weight: bold;
	font-size: 13px;
	margin-bottom: 0px;
}

#message-box {
    position: relative;
    padding: 20px 20px 1px 20px;
		font-size: 20px;
		font-weight: normal;
}

#user-profile-photo {
	position: absolute;
}

#image-overlay {
    z-index: 5;
    margin: 0px 45px 0px 45px;
    position: absolute;
}

#image-overlay-bottom {
    position: relative;
    top: -230px;
    left: 44px;
}

#image-overlay-top {
    position: relative;
    top: -230px;
    left: 286px;
    width: 228px;
    height: 261px;
}

#image-overlay-pattern {
}


.image-overlay {
	width: 100%;
  z-index: 5;
  position: absolute;
}


#image-overlay-red {
    margin: 0px 30px 0px 30px;
    position: absolute;
}

.image-overlay-carousel img {
  width: 100%;
}

#image-overlay-xoxo {
    left: 0px;
    position: absolute;
		z-index: 10;
		width: 100%;
}


.btn.btn-primary {
	color: #ffffff;
  background-color: #FF0066;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#FF1975), to(#FF0066));
  background-image: -moz-linear-gradient(top, #FF1975, #FF0066);
  background-image: -ms-linear-gradient(top, #FF1975, #FF0066);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FF1975), color-stop(100%, #FF0066));
  background-image: -webkit-linear-gradient(top, #FF1975, #FF0066);
  background-image: -o-linear-gradient(top, #FF1975, #FF0066);
  background-image: linear-gradient(top, #FF1975, #FF0066);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF1975', endColorstr='#FF0066', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #FF0066 #FF0066 #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}


.container-fluid > footer p {
    text-align: center; /* center align it with the container */
}

.hero-unit {
	background-color: #FFEFED;
	padding: 10px;
}


.hero-unit.message {
	border-radius: 6px 6px 0px 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
}

#mobile-message-field {
  padding-top: 4%;
}

#mobile-message-area {
  background-color: white;
  border-radius: 15px;
  min-height: 80px;
}

#mobile-profile-photo {
  float: left;
  padding: 13px 10px 10px 10px;
  width: 18%;
}

#mobile-small-logo {
  float: left;
  width: 17%;
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px#888;
  box-shadow: 0 0 5px #888;
}

#share-on-instagram {
  margin: 20px 0px 10px 0px;
}

#mobile-context {
  padding: 4px 10px 0px 10px;
}

#mobile-message-text {
  padding: 10px;
}

#xande {
  -webkit-blend-mode: multiply;
  blend-mode: multiply;
}

#image-to-save {
  float: right;
  width: 45%;
}

#saving-instructions {
  font-size: 1em;
  padding: 18px 150px 0px 0px;
  min-height: 100px;
  display: none;
}

#step-2, #step-3 {
  clear: both;
  padding-bottom: 15px;
  display: none;
}

.hero-unit.image {
	border-radius: 0px 0px 6px 6px;	
	padding-top: 0px;
	font-size: 13px;
	font-weight: normal;
	line-height: 20px;
	position: relative;
}


.hero-unit.image-mobile {
	border-radius: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
}

.hero-unit.message-mobile {
	border-radius: 0px;	
	padding-top: 0px;
	font-weight: normal;
}

.hero-unit.hero-mobile {
	border-radius: 0px;	
	padding-top: 10px;
	font-weight: normal;
	margin-bottom: 0px;
	min-height: 300px;
}



.valentine-message {
    text-align: center;
    margin-bottom: 40px;
    font-size: 19.5px;
    word-wrap: break-word;
    line-height: 26px;
}

.valentine-message-bubble {
    text-align: left;
    margin-bottom: 0px;
    font-size: 19.5px;
    word-wrap: break-word;
    line-height: 26px;
}



#top-row {
	padding: 6% 0% 0% 4.7%;
	width: 100%;
}


#middle-row {
	padding: 3% 0% 0% 4%;
	width: 100%;
}

#bottom-row {
	padding: 3% 0% 0% 4.7%;
	width: 100%;
}

.media-grid a {
  float: left;
	width: 24%;
}

#top-row a {
	margin-left: 21.4%;
}

#middle-row a {
	margin-right: 21.4%;
}

#bottom-row a {
	margin-left: 21.4%;
}




ul{
	margin: 0px;
}

.media-grid:before, .media-grid:after {
  display: table;
  content: "";
  zoom: 1;
}
.media-grid:after {
  clear: both;
}
.media-grid li {
  display: inline;
}


.media-grid a img {
  display: block;
}


#valentine-container{
	max-width: 610px;
}

#make-your-own {
	margin-top: 5px;
}

#small-logo {
    margin: -10px auto 30px auto;
    height : 148px;
    width: 160px;
    transform:rotate(17deg);
    -ms-transform:rotate(17deg); /* IE 9 */
    -moz-transform:rotate(17deg); /* Firefox */
    -webkit-transform:rotate(17deg); /* Safari and Chrome */
    -o-transform:rotate(17deg); /* Opera */
    -moz-box-shadow: 0px 0px 5px #999; /* Firefox */
    -webkit-box-shadow: 0px 0px 5px #999; /* Safari/Chrome */
    box-shadow: 0px 0px 5px #999; /* Opera and other CSS3 supporting browsers */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";/* IE 8 */
}

.button_container_left {
	float: left;
	margin-left: -10px;
	margin-top: -0.6%;
}

.button_container_right {
	float: right;
	margin-top: -0.6%;
}

#photo_taker {
	text-align: center;
}

#canvas-overlay {
  z-index: 5;
  position: absolute;
}

#img-data, #img-data-loader {
  position: absolute;  
}

#photo_info {
	padding-bottom: 10px;
	min-height: 42px;
}

#photo_caption_pattern {
	text-align: center;
	padding: 0% 8.33% 0% 8.33%;
}

#photo_info_pattern {
	font-weight: bold;

}

#photo_caption_pink {
text-align: left;
padding: 0px 42px 0px 42px;
position: relative;
width: 200px;
}

#photo_info_pink {
font-weight: bold;
text-align: left;
padding: 0px 42px 0px 42px;
position: relative;
width: 200px;
}

#info_box_pink{
position: relative;
top: -700px;   
}

#show_valentine_message {
text-align: center;
}

.popover .inner {
  background: #ffffff;
  background: #ffffff;
  padding: 3px;
  overflow: hidden;
  width: 240px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
/*  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0);*/
}
.popover .title {
  background-color: #ffffff;
  padding: 9px 15px 3px 15px;
  line-height: 1;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  border-bottom: 0px solid #eee;
}
.popover .content {
  background-color: #ffffff;
  padding: 2px 15px 9px 15px;
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
}
.popover .content p, .popover .content ul, .popover .content ol {
  margin-bottom: 0;
}

#twitter{
    width: 90px;
    height: 30px;
    float: left;
    margin-left: 20px;
}

#facebook{
    width: 80px;
    height: 30px;
    float: left;
    padding-left: 12px;
}

#share_buttons{
    padding-top: 15px;
    padding-bottom: 10px;
}


.triangle-border.left {
	margin-left: 90px;
}


.triangle-border {
position: relative;
padding: 15px;
margin-bottom: 15px;
border: 5px solid transparent;
color: #333;
background: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.triangle-border.left::before {
top: 10px;
bottom: auto;
left: -30px;
border-width: 15px 30px 15px 0;
}

.triangle-border::before {
content: "";
position: absolute;
bottom: -20px;
left: 40px;
border-width: 20px 20px 0;
border-style: solid;
border-color: transparent transparent;
display: block;
width: 0;
}

.triangle-border.left::after {
top: 16px;
bottom: auto;
left: -21px;
border-width: 9px 21px 9px 0;
border-color: transparent white;
}

.triangle-border::after {
content: "";
position: absolute;
bottom: -13px;
left: 47px;
border-width: 13px 13px 0;
border-style: solid;
border-color: white transparent;
display: block;
width: 0;
}

.triangle-border.left.helper {
  margin-top: 86px;
  margin-left: 0px;}


.triangle-border.helper {
position: relative;
padding: 15px;
margin-bottom: 15px;
border: 5px solid transparent;
color: #333;
background: #f5f5f5;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.triangle-border.left.helper::before {
top: 10px;
bottom: auto;
left: -30px;
border-width: 15px 30px 15px 0;
}

.triangle-border.helper::before {
content: "";
position: absolute;
bottom: -20px;
left: 40px;
border-width: 20px 20px 0;
border-style: solid;
border-color: transparent transparent;
display: block;
width: 0;
}

.triangle-border.left.helper::after {
top: 16px;
bottom: auto;
left: -21px;
border-width: 9px 21px 9px 0;
border-color: transparent #f5f5f5;
}

.triangle-border.helper::after {
content: "";
position: absolute;
bottom: -13px;
left: 47px;
border-width: 13px 13px 0;
border-style: solid;
border-color: #f5f5f5 transparent;
display: block;
width: 0;
}


.helper-XOXO {
  display: none;
}

#carousel-helper-text {
  font-size: 20px;
  margin-bottom: 0px;
}

.show-if-error {
  display: none;
}

.show-if-error.error {
  display: block;
  text-align: center;
  padding-bottom: 10px;
  color: #b94a48;
  font-weight: bold;
}

#canvas-loader {
  margin: 40% 35% 25% 35%;
}

#loading-lightbox {
  display: none;
  min-width: 100%; 
  min-height: 100%; 
  -webkit-opacity: 0.8; 
  background-color: white; 
  position:fixed; 
  left:0; 
  top:0;
}

#no-screenshot {
  display: none;
  text-align: center;
}


@media (max-width: 480px) {

	body {
		padding: 0px;

	}
	
	#all-photos {
		min-height: 275px;
	}

	#top-row{
		padding: 5% 0% 0% 6%;
		width: 100%;
	}

	#middle-row{
		padding: 3.8% 0% 0% 6%;
		width: 100%;
	}

	#bottom-row{
		padding: 2.5% 0% 0% 6.2%;
		width: 100%;
	}

	.media-grid a {
	  float: left;
		width: 24%;
	}

	#top-row a {
		margin-left: 20.5%;
	}

	#middle-row a {
		margin-right: 19.5%;
	}

	#bottom-row a {
		margin-left: 20.5%;
	}

	#photo_caption_pattern {
		font-size: 0.8em;
		line-height: 1.4em;
	}

	#photo_info_pattern {
		font-weight: bold;

	}
	
	#photo_info {
		padding-bottom: 7px;
		clear: left;
	}

	.row-fluid [class*="span"] {
		min-height: 0px;
	}

  #go-back {
    font-size: 0.9em;
    padding-top: 1%;
  }
  
  textarea {
    font-size: 0.9em;
  }
  
  footer {
    padding: 3% 0% 3% 10px;
  }
  
  select {
    font-size: 0.9em;
    height: 36px;
  }
  
  .well {
    border-radius: 0px;
    margin-bottom: 0px;
    padding: 10px 11px 10px 10px;
    border-right: 0px;
    border-left: 0px;
  }
  
  #small-logo {
    width: 20%;
    height: 20%;
    margin: 0px;
  }
  
  #show_valentine_message {
    margin-bottom: 10px;
    min-height: 45px;
  }
  
  #spacer {
    height: 42px;
  }
  
  #carousel_container {
    width:612px;
    height: 612px;
    background-color: #FFEFED;
    
    -webkit-transform-origin: left top;
  }
  
  #offscreen-renderer {
    width:612px; 
    height: 612px; 
    display: none;
    position: absolute;
    top: 800px;
  }
    
  #content_image_wrapper {
    min-width: 100%;
    margin-top: 10px;
  }
  
  #valentine-container {
    overflow-x:hidden;
  }
  
  .section-XOXO {
    height: 300px;
  }
  
  .section-PATTERN, .section-XANDE, .section-LOVEYOU, .section-TICTAC  {
    height: 350px;
  }
  
  #email-confirm-mobile {
    font-size: 1.05em;
    display: none;
  }
  
  #show-page-canvas-loader {
    display: none;
    margin: 40% 35% 0% 35%;
  }
  
}