@import url('https://fonts.googleapis.com/css?family=Crafty+Girls|Dekko|Indie+Flower|Itim|Lakki+Reddy|Lato|Oswald|Roboto|PT+Sans');
@import url('album.css');
@import url('animate.css');


body {
	font-size:14px;
	font-family: 'Arial';
	max-height:100vh;
}
html{
 height:100vh;
 max-height:100vh;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #EEE;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #EEE;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #EEE;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #EEE;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #EEE;
}

.container {
	height:100vh;
}

.header {
	background-image:url('../images/header_kohgs.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	-webkit-box-shadow: 0px 10px 23px -8px rgba(0,0,0,0.82);
	-moz-box-shadow: 0px 10px 23px -8px rgba(0,0,0,0.82);
	box-shadow: 0px 10px 23px -8px rgba(0,0,0,0.82);
}

.header .logo {	
	background-image:url('../images/transparant-75.png');
	background-repeat:repeat;
	padding:25px 0px 25px 0px;
	width: 100%;
	height: 100%;
}

.header .logo img {
	max-width: 70%;
}


p {
	font-family: "PT Sans";
	font-size:16px;
	padding-left:0px;
	padding-right:15px;
	line-height:20px;
}

@media only screen and (max-width:768px) { /* TELEFOONS */
	
	body {
		background-image:url('../images/background-3.jpg');
		background-repeat:no-repeat;
		background-size:cover;
		background-position:top!important;
		background-attachment:fixed;
	}

	.header { 
		/*min-height:150px;*/
	}
	
	.header .logo {	
		/*margin-top:10px;
		max-height:150px;*/
	}	

	.header .logo img {	
		/*margin:0px;
		max-height:100px;*/
	}	


	h1 {
		font-size:26px;
	}

	h2 {
		font-size:22px;
	}
	
	h3 {
		font-size:18px;
	}	
	
	.albumwrapper .album-titel {
		margin-top:10px;
	}

	.albumwrapper button.btn-albums,
	.favowrapper .photos .photo-item {
		width:auto!important;
	}

	input, submit, .btn {
		display: inline-block;
		padding: 4px 8px 4px 8px !important;
		border: none;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		border:#0d666f 1px solid;
		font-family: 'Dekko';
		font-size:14px;
		color: #FFF;
		background: #35abb7;
		margin:5px 0px 15px 0px;
	}


	.usernav a button,
	.usernav a button i { font-size:12px!important; padding-top:4px!important; }
}


@media only screen and (min-width:768px) and (max-width:992px) {

	body {
		background-image:url('../images/background-3.jpg');
		background-repeat:no-repeat;
		background-size:cover;
		background-position:top!important;
		background-attachment:fixed;
	}

	.header { 
		/*min-height:200px;*/
	}

	.header .logo {	
		/*margin-top:10px;*/
	}	
	
	h1 {
		font-size:32px;
	}

	h2 {
		font-size:28px;
	}
	
	h3 {
		font-size:22px;
	}	
	
	.albumwrapper .photos .photo-item,
	.favowrapper .photos .photo-item {
		padding-right:30px!important;	
	}	

	input, submit, .btn {
		display: inline-block;
		padding: 8px 12px 3px 12px !important;
		border: none;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		border:#0d666f 1px solid;
		font-family: 'Dekko';
		font-size:18px;
		color: #FFF;
		background: #35abb7;
		margin:5px 0px 5px 0px;
	}

}



@media only screen and (min-width:992px) and (max-width:1200px) {
	
	body {
		background-image:url('../images/background-3.jpg');
		background-repeat:no-repeat;
		background-size:cover;
		background-position:bottom!important;
		background-attachment:fixed;
	}
	

	.header { 
		/*min-height:200px;*/
	}
	.header .logo {	
		/*margin:25px;
		min-height:150px;
		padding:8px 5px 5px 5px!important;*/

	}

	h1 {
		font-size:32px;
	}

	h2 {
		font-size:28px;
	}

	h3 {
		font-size:22px;
	}

	.albumwrapper .photos .photo-item,
	.favowrapper .photos .photo-item {
		padding-right:30px!important;
	}

	input, submit, .btn {
		display: inline-block;
		padding: 8px 12px 3px 12px !important;
		border: none;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		border:#0d666f 1px solid;
		font-family: 'Dekko';
		font-size:18px;
		color: #FFF;
		background: #35abb7;
		margin:5px 0px 5px 0px;
	}

}

@media only screen and (min-width:1200px) {

	body {
		background-image:url('../images/background-3.jpg');
		background-repeat:no-repeat;
		background-size:cover;
		background-position:bottom!important;
		background-attachment:fixed;
	}


	.header {
		/*min-height:250px;*/
	}
	.header .logo {
		/*margin:25px;
		padding:30px 10px 20px 10px;
		min-height:200px;		*/
	}
	
	h1 {
		font-size:32px;
	}

	h2 {
		font-size:28px;
	}
	
	h3 {
		font-size:22px;
	}
	
	.albumwrapper .photos .photo-item,
	.favowrapper .photos .photo-item {
		padding-right:30px!important;	
	}
	
	.albumwrapper .photos .photo-item img {
		max-width:100%;
		width:100%;
		height:265px;
	}

	input, submit, .btn {
		display: inline-block;
		padding: 8px 12px 3px 12px !important;
		border: none;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		border:#0d666f 1px solid;
		font-family: 'Dekko';
		font-size:18px;
		color: #FFF;
		background: #35abb7;
		margin:5px 0px 5px 0px;
	}

}


.padding-0 {
	padding:0px!important;
}
.padding-5 {
	padding:5px!important;
}

h1, h2, h3 {
	font-family: "Indie Flower";
	color:#FFF;
	text-shadow:1px 1px 1px #000;
}


input, submit, .btn {
	display: inline-block;
	border: none;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border:#0d666f 1px solid;
	font-family: 'Dekko';
	color: #FFF;
	background: #35abb7;
}

.btn:hover, a:hover {
	color:#EEE;
	text-decoration:none;
	
}

.errorcontainer {
	background-color:#35abb7;
	margin:25px 0px 0px 0px;
}

.handlerleft {
	padding:25px;
	min-height:200px;
	background-image: url('../images/fout.png');
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-color:#35abb7;
	margin-bottom:25px;
}

.handlerright {
	background-color:#35abb7;
	padding:25px;
}

.errorhandler-btn {
	background-color:#fcab00;
}
	

.usernav {
	margin:25px 0px 0px 0px;
}

.usernav .btn-logoff {
	background-color: #F66; 
}

.usernav .btn-favo {
	background-color: #FC0!important; 
}

.userwrapper {
	padding-top:0px!important;
}

.userwrapper p {
	padding-left:5px;
}

.userwrapper .albums .album-item {
	border:#099 1px solid;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin:3px 5px 3px 0px;
	background-repeat:no-repeat;
	background-size:cover;
	min-height:200px;
}




.userwrapper .albums .album-item h2,
.userwrapper .albums .album-item .opp h2{
  position: absolute;
  bottom: 10px;
  left: 10px;
  right:10px;
  background: rgba(0, 0, 0, 0.75);
  padding: 4px 8px;
  color: white;
  margin: 0;
  font: 14px Sans-Serif;
  display:inline-block;
}
.userwrapper .albums .album-item .opp h2 {
  background: rgba(255, 255, 255, 0.75);
  color: black;
}


.userwrapper .albums .album-item:hover .opp h2 {
}

.userwrapper .albums .album-item {
	
}


.albumwrapper button.btn-albums {
	width:90%;
}

.albumwrapper .album-titel h1 {
	padding-top:12px!important;
	margin-top:0px!important;
}

.albumwrapper .photos .photo-item {
	margin-bottom:30px;
}

.albumwrapper .photos .photo-item img {
  width: 100%;
  border: 4px solid #FFF;
  -moz-box-shadow: 0 0 4px black;
  -webkit-box-shadow: 0 0 4px black;
  box-shadow: 0 0 4px black;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

.albumwrapper .photos .photo-item h2 { 
   color: #FFF; 
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 8px 10px 5px 10px; 
}

.albumwrapper .photos .photo-item h2 span:hover { 
   color: #FC0; 
}


.albumwrapper .photos .photo-item  h2 { 
   position: absolute; 
   bottom: -5px!important; 
   left: 4px; 
}

.albumwrapper .photos,
.favowrapper .photos {
	margin-top:15px;
}



.favowrapper button.btn-albums {
	width:90%;
}

.favowrapper .album-titel h1 {
	padding-top:12px!important;
	margin-top:0px!important;
}

.favowrapper .photos .photo-item {
	margin-bottom:30px;
}

.favowrapper .photos .photo-item img {
  width: 100%;
  border: 4px solid #FFF;
  -moz-box-shadow: 0 0 4px black;
  -webkit-box-shadow: 0 0 4px black;
  box-shadow: 0 0 4px black;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

.favowrapper .photos .photo-item i {
	font-size:16px;
}

.favowrapper .photos .photo-item .btn-bekijkalbum { 
	padding: 8px 10px 5px 10px; 
	position: absolute; 
	bottom: 8px!important; 
	left: 8px;  
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border:#0d666f 1px solid;
	font-family: 'Dekko';
	font-size:14px;
	color: #FFF;
	background: #35abb7;
   
}

.favowrapper .photos .photo-item .btn-bekijkalbum i {
	padding-right:5px;
}

.favowrapper .photos .photo-item .btn-print { 
	padding: 8px 10px 5px 10px; 
	position: absolute; 
	bottom: 8px!important; 
	right: 8px!important;  
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border:#0d666f 1px solid;
	font-family: 'Dekko';
	font-size:14px;
	color: #FFF;
	background: #35abb7;
   
}



button i.fa {
	font-size:20px!important;
	padding-right:10px;
}

.photocontainer {
	position:relative;
}


.btn-delete {
	padding:6px 9px 6px 9px;
	background-color:#F00;
	color:#FFF;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	position:absolute;
	right:39px;
	bottom:9px;
}

.btn-rotate {
	padding:6px 9px 6px 9px;
	background-color:#F00;
	color:#FFF;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	position:absolute;
	right:78px;
	bottom:9px;
}