@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);


/*font-family: 'Open Sans', sans-serif;*/

body
{			
	background-color: #f6f8fd;	
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	font-size: 14px;	
    color: #333333;
	padding:0px;
	margin:0px;	
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #999;
   opacity:  1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #999;
   opacity:  1;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #999;
}

hr.style-two {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}


.input-text {
    font-size: 14px;
    webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.075);
    -webkit-transition: .2s linear background;
    -moz-transition: .2s linear background;
    transition: .2s linear background;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0;
    outline: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    -webkit-appearance: textfield;
}

input 
{
    font-family: 'Lato', sans-serif;
}


input[type="radio"],  input[type=checkbox]
{
	zoom: 1.5;
}

input[type=submit]
{
    outline: 0;
}


input[type=submit]
{
    -webkit-appearance: none;
}

input[type=button]
{
    -webkit-appearance: none;
}


.awhite
{
	color:#EEEEEE;
}

a
{
	color: #333333;
	text-decoration: none;
}



h1
{
	font-family: 'Lato', sans-serif;
	text-shadow: 1px 1px 2px rgba(0,0,0,.25);
	font-weight: 400;
	font-size: 40px;	
	padding-top:0px;
	margin-top:0px;
}

h3
{
	font-family: 'Lato', sans-serif;
	text-shadow: 1px 1px 2px rgba(0,0,0,.25);
	font-weight: 300;
	font-size: 25px;
	padding-top:0px;
	margin-top:0px;
}


.div-menu
{
	padding:0px;
	background: #FFFFFF;
	height: 60px;
	display:block;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
	text-align:center;	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.div-menu .textlogo
{
	font-family: 'Indie Flower', cursive;	
	font-size: 35px;
	line-height: 60px;
	color: #eb1d71;
	text-decoration: none;
	line-height: 60px;
}

.div-menu-left
{
	position:absolute;
	left:15px;
	top:20px;
	font-size: 16px;
	color: #666;
}

.div-lang-selector
{
	cursor: pointer;
}

.div-lang-content
{
	font-size: 20px;
	padding:15px;
	background-color:#FFF;
	border: 1px solid #ccc;
	position:absolute;
	top:60px;
	left:0px;
	z-index:1;
}


.div-menu-right
{
	position:absolute;
	right:15px;
	top:17px;
}

.div-menu-right a
{
	font-size: 20px;
	text-decoration: none;
	color: #666;
	font-weight: 300;
}
.div-menu-right a:hover
{
	color: #eb1d71;
}

.div-menu-mobile
{
	position:absolute;
	right:15px;
	top:16px;
	display:none;
}

.div-menu-mobile-content
{
	font-size: 20px;
	padding:15px;
	background-color:#FFF;
	border: 1px solid #ccc;
	position:absolute;
	top:60px;
	right:0px;
	z-index:1;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
}

.div-menu-mobile-content a
{
	display:block;
}


.div-header
{
	text-align:center;
	margin:0px;
	padding:20px;
	padding-top:60px;
	padding-bottom:20px;
	font-size:20px;
	display:block;	
}

.content-create-album
{
	margin:auto;
	padding-top:40px;
	padding-bottom:40px;
	text-align:left;
}

.div-album-menu
{
	text-align:center;
	padding:13px;
	margin-bottom: 10px;
	color: #eb1d71;
	font-size: 25px;
	background-color: #FFF;
	font-weight: 300;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
}


/* ************************************************************* */
/* POP-UP */

#modal-background-popup
{
	left: 0;
    top: 0;
	width:  100%;
	height:  100%;
	position: fixed;
	z-index: 1;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.4);
}

#popup
{
	min-width:300px;
	font-size:16px;
	z-index:10;
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);

	background-color: #FFF;
	border-radius: 10px;
	padding:20px;
}


/* ************************************************************* */
/* VIEWABLE */

#modal-background
{
	left: 0;
    top: 0;
	width:  100%;
	height:  100%;
	position: fixed;
	z-index: 1;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.8);
}

#modal-background-content
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.viewable-photo
{
	
}

.viewable-photo-detail
{
	background-color: #000;
	color:#DDD;
	font-weight: 300;
	padding:0px;
	text-align:center;
	min-height: 33px;
}


/* ************************************************************* */
/* ALBUM */

.content-album
{
	padding-bottom: 30px;
	text-align: center;
	font-size: 20px;
}

.content-album .thumbnail
{
	width:  180px;
	height: 180px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	float:left;
	margin:2px;
}

.content-album .viewable
{
	cursor: pointer;
}


.content-album .thumbnail .loadingfile
{
	width:  100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	text-align:center;
	color : #FFFFFF;
	font-size: 30px;
}

#photo-qrcode img
{
	width:180px;
	height:180px;
}
	

/* ************************************************************* */
/* BUTTON */


.buttonRed 
{
	cursor: pointer;
    background-color: #eb1d71;
    border-radius: 3px;
    color: #ffffff;
    padding: 4px 10px 6px 10px;
    text-decoration: none;
    font-size: 14px;
	border: none;
	text-align:center;
}

.buttonRed:hover
{
    background-color: #BC1157;
}


.inputBig
{
	border-radius: 5px;
	padding-left: 20px;
	padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
}


.arrow-down
{
	border-style: solid;
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;
	border-width: 4px 4px 0 4px;
    border-color: #333 transparent transparent transparent;
    border-color: #333 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
    content: "";
}


/* ************************************************************* */
/* SPINNER */

.spinner
{
	position: absolute;
	z-index: 2;
	width: 120px;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}
  
.spinner > div {
	width: 30px;
	height: 30px;
	background-color: #FFF;
  
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
  
.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
  
.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}


.spinnerinline
{
	text-align: center;
}
	
.spinnerinline > div {
	width: 30px;
	height: 30px;
	background-color: #333;
	
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
	
.spinnerinline .bounce1 {
	  -webkit-animation-delay: -0.32s;
	  animation-delay: -0.32s;
}
	
.spinnerinline .bounce2 {
	  -webkit-animation-delay: -0.16s;
	  animation-delay: -0.16s;
}



  
  
  @-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
  }
  
  @keyframes sk-bouncedelay {
	0%, 80%, 100% { 
	  -webkit-transform: scale(0);
	  transform: scale(0);
	} 40% { 
	  -webkit-transform: scale(1.0);
	  transform: scale(1.0);
	}
  }


/* ************************************************************* */
/* PHONE DEVICE */

@media (max-width: 750px)
{	
	.div-header
	{
		padding-top:35px;
		padding-bottom:0px;
	}

	.content-create-album
	{
		padding-top:30px;
	}

	h1
	{	
		font-size: 28px;			
	}

	h3
	{
		font-size: 22px;	
	}

	.header-top-margin
	{
		margin-top:20px;
	}

	.div-menu-right
	{
		display:none;
	}
	.div-menu-mobile
	{
		display:block;
	}
}