/*
		=================================
		
			CSS	v1.3.6
		
	 	=================================

	loading database connexion ------ OK
	loading admin functions --------- OK
	loading general functions ------- OK
	loading css functions ----------- OK
	loading vars -------------------- OK
	loading lan --------------------- OK (en)
	website name -------------------- Guillaume Malheiro
	website link -------------------- http://www.guillaumemalheiro.com
	last modified ------------------- 14/Jun/2018 12:14:34
	author -------------------------- Seb @ One Color

	listing available colors -

		#FFFFFF --- blanc
		#e6e6e6 --- sblanc
		#000000 --- noir
		#FF8080 --- lrouge
		#FF0000 --- rouge
		#600000 --- srouge
		#111111 --- sgris
		#32393C --- gris
		#909da2 --- lgris
		#88ddff --- selection
		#3b5998 --- facebook
		#55acee --- twitter
		#9b6954 --- instagram
		#dd4b39 --- googleplus
		#bb0000 --- youtube
		#cb2027 --- pinterest
		#007bb5 --- linkedin
		#45bbff --- vimeo
		#fffc00 --- snapchat



	/*=============================================================================*\
	=										=
	=		RESET STYLE / IMPORT FONTS / TRANSITIONS / ANIMATIONS		=
	=										=
	\*=============================================================================*/




h1,h2,h3,h4,h5,h6,p,ul,ol,li,blockquote,pre,html,body,table,tbody,tr,th,td,tfoot,thead,img,form,fieldset,a {
	margin: 0;
	padding: 0;
	border: none;
	outline:none;
}
a{
	color:inherit;
}
html,body{
	height:100%;
	max-height:100%;
	width:100%;
	margin:0;
	padding:0;
	overflow-y: auto;
	font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
	color:#000000;
}
*:focus {
	outline: none!important;
}

@font-face {
	font-family: "openSC";
	src: 
		url("../font/opensanscondensed/opensanscondensed_light.ttf") format('truetype'),
		url("../font/opensanscondensed/opensanscondensed_light.woff") format('woff'),
		url("../font/opensanscondensed/opensanscondensed_light.woff2") format('woff2');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "openSCbold";
	src: 
		url("../font/opensanscondensed/opensanscondensed_bold.ttf") format('truetype'),
		url("../font/opensanscondensed/opensanscondensed_bold.woff") format('woff'),
		url("../font/opensanscondensed/opensanscondensed_bold.woff2") format('woff2');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "openSCitalic";
	src: 
		url("../font/opensanscondensed/opensanscondensed_lightitalic.ttf") format('truetype'),
		url("../font/opensanscondensed/opensanscondensed_lightitalic.woff") format('woff'),
		url("../font/opensanscondensed/opensanscondensed_lightitalic.woff2") format('woff2');
	font-weight: normal;
	font-style: normal;
}
.transition{
	transition-property: all;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
	transition-delay: 0s;
	animation-iteration-count: infinite;
	-webkit-transition-property: all;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in-out;
	-webkit-transition-delay: 0s;
	-moz-transition-property: all;
	-moz-transition-duration: 0.2s;
	-moz-transition-timing-function: ease-in-out;
	-moz-transition-delay: 0s;
	-o-transition-property: all;
	-o-transition-duration: 0.2s;
	-o-transition-timing-function: ease-in-out;
	-o-transition-delay: 0s;
}
@keyframes blinker {
	50% {
		opacity: 0;
	}
}

:root{
	--scale-captcha: 1;
}


	/*=============================================================================*\
	=										=
	=				COMMON DESING					=
	=										=
	\*=============================================================================*/


	html{
		font-size:13px;
	}
	body{
		display:flex;
	}
	#website{
		display:flex;
		flex-direction: column;
		justify-content: center;
		margin:auto;
		position:relative;
		font-family:"openSC";
	}

		#header{
			display:flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
			#header_title{
				display:flex;
			}
			#header_description{
				display:flex;
			}

		#menu{
			height:30px;
			width:100%;
			display:block;
			text-align:center;
		}
			#menu li{
				text-align:center;
				letter-spacing:3px;
				list-style-type:none;
				display:inline-block;
				height:30px;
			}
				#menu li a{
					font-size:20px;
					line-height:30px;
					vertical-align:middle;
					text-align:center;
					margin:0 10px;
				}
				#menu li:hover{
					color:#88ddff;
				}

		#body{
			flex:1;
			overflow-y:auto;
			display:flex;
			flex-direction: column;
			position:relative;
		}
		.annonce{
			margin:auto;
			text-align:center;
		}

			.liste_albums{
				display:flex;
				width:100%;
				box-sizing: border-box;
			}
				.liste_albums .colonne{
				/*	display:flex;	*/
					flex-grow: 1;
					flex-basis:0;
					flex-direction:column;
				}
					.liste_albums_item{
						display:flex;
						flex-direction:column;
						border:1px #e6e6e6 solid;
						background-color:#FFFFFF;
						position:relative;
					}
					.liste_albums_item:hover{
						border:1px #88ddff solid;
					}
						.liste_albums_item .img_container{
							position:relative;
						}
							.img_container .loading{
								position:absolute;
								height:16px;
								width:16px;
								left: -moz-calc(50% - 8px);
							left: -webkit-calc(50% - 8px);
							left: -o-calc(50% - 8px);
							left: calc(50% - 8px);
								top: -moz-calc(50% - 8px);
							top: -webkit-calc(50% - 8px);
							top: -o-calc(50% - 8px);
							top: calc(50% - 8px);
							}
							.img_container img{
								position:absolute;
								top:0;
								left:0;
								height:100%;
								width:100%;
							}
							.img_container img.not_loaded{
								zoom: 1;
							filter: alpha(opacity=75);
							-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
							-moz-opacity:0.75;
							-khtml-opacity:0.75;
							opacity: 0.75;
								background-color:#88ddff;
							}
						.liste_albums_item p.title{
							color:#000000;
							text-transform:uppercase;
							font-family:"openSC";
						}
						.liste_albums_item p.description{
							color:#909da2;
						}

			.goBack{
				height:30px;
				display:block;
				text-align:left;
				padding:0;
				position:absolute;
				left:0;
				top:0;
				z-index:4;
			}
				.goBack a{
					font-size:20px;
					line-height:30px;
					vertical-align:middle;
					text-align:center;
					padding:0 30px;
					text-shadow:
						0 0 1px #FFFFFF,
						0 0 2px #FFFFFF,
						0 0 4px #FFFFFF,
						0 0 6px #FFFFFF;
				}
				.goBack a:hover{
					color:#88ddff;
				}
			.liste_photos{
				margin:auto;
				width:100%;
				height:100%;
				overflow-x:hidden;
				overflow-y:auto;
			}
				.liste_photos_photo{
				}
					.liste_photos_photo .img_container{
						position:relative;
					}
						.img_container .loading{
							position:absolute;
							height:16px;
							width:16px;
							left: -moz-calc(50% - 8px);
							left: -webkit-calc(50% - 8px);
							left: -o-calc(50% - 8px);
							left: calc(50% - 8px);
							top: -moz-calc(50% - 8px);
							top: -webkit-calc(50% - 8px);
							top: -o-calc(50% - 8px);
							top: calc(50% - 8px);
						}
						.img_container img{
							position:absolute;
							top:0;
							left:0;
							height:100%;
							width:100%;
						}
						.img_container img.not_loaded{
							zoom: 1;
							filter: alpha(opacity=75);
							-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
							-moz-opacity:0.75;
							-khtml-opacity:0.75;
							opacity: 0.75;
							background-color:#88ddff;
						}
				.liste_photos_video{
					height: -moz-calc(100% - 30px);
					height: -webkit-calc(100% - 30px);
					height: -o-calc(100% - 30px);
					height: calc(100% - 30px);
					margin-top:30px;
					width:100%;
				}

		.contact{
			font-size:20px;
		}
		.contact a:hover{
			color:#88ddff;
		}

		#footer{
			display:flex;
			justify-content: center;
			align-items: center;
			height:30px;
		}
			#flags a:not(.selected){
				zoom: 1;
				filter: alpha(opacity=50);
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
				-moz-opacity:0.5;
				-khtml-opacity:0.5;
				opacity: 0.5;
			}
			#flags a.selected,
			#flags a:hover{
				zoom: 1;
				filter: alpha(opacity=100);
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				-moz-opacity:1;
				-khtml-opacity:1;
				opacity: 1;
			}






	/*=============================================================================*\
	=										=
	=				COMPUTER DESING					=
	=										=
	\*=============================================================================*/


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

	html{
		font-size:13px;
	}
	#website{
		height: -moz-calc(100% - 20px);
		height: -webkit-calc(100% - 20px);
		height: -o-calc(100% - 20px);
		height: calc(100% - 20px);
		width: -moz-calc(100% - 20px);
		width: -webkit-calc(100% - 20px);
		width: -o-calc(100% - 20px);
		width: calc(100% - 20px);
		margin:auto;
		min-height:500px;
		max-width:1200px;
		min-width:750px;
	}

		#header{
			height:100px;
		}

		#menu{
			overflow:hidden;
			padding:0 0 20px 0;
		}

		#body{
		}

					.liste_albums_item{
						margin:10px 5px;
						padding:3px;
					}
						.liste_albums_item p.title{
							font-size:20px;
						}
						.liste_albums_item p.description{
							font-size:13px;
							line-height:13px;
						}

			.goBack{
			}
				.liste_photos_photo{
					max-width:580px;
					margin:5px auto;
				}

		#footer{
			display:flex;
			justify-content: center;
			align-items: center;
		}
			#flags{
				position:absolute;
				bottom:0;
				right:2px;
			}
				#flags>a{
					margin-left:5px;
				}

}


	/*=============================================================================*\
	=										=
	=				TABLETTE DESIGN					=
	=										=
	\*=============================================================================*/


@media screen and (max-width:749px){

	html{
		position:fixed;
		font-size:16px;
	}
	#website{
		height:100%;
		width:100%;
		margin:auto;
	}

		#header{
			height:100px;
		}
		@media screen and (max-height:500px){
			#header{
				height:50px;
			}
				#header_title{
					line-height:50px;
					overflow:hidden;
					white-space: nowrap;
					text-overflow:"...";
				}
				#header_description{
					display:none;
					visibility:hidden;
				}
		}

		#menu{
			display:flex;
			justify-content: space-around;
			position:relative;
			padding-bottom:7px;
		}
			#menu li{
				height:100%;
				flex:1;
				overflow:hidden;
				white-space: nowrap;
				text-overflow:"...";
				padding:0 10px;
			}
				#menu li a{
					height:100%;
					width:100%;
					font-size:25px;
				}
		#menu:after{
			content:"";
			height:7px;
			width:100%;
			position:absolute;
			bottom:-7px;
			left:0;
			display:block;
			-webkit-box-shadow:  inset 0px 7px 9px -7px rgba(0,0,0,0.50);
			-moz-box-shadow:  inset 0px 7px 9px -7px rgba(0,0,0,0.50);
			box-shadow:  inset 0px 7px 9px -7px rgba(0,0,0,0.50);
			z-index:1;
		}

		#body{
		}

					.liste_albums_item{
						margin:2px;
						padding:2px;
						-webkit-box-shadow: 2px 2px 4px 2px rgba(230,230,230,1.00);
						-moz-box-shadow: 2px 2px 4px 2px rgba(230,230,230,1.00);
						box-shadow: 2px 2px 4px 2px rgba(230,230,230,1.00);
					}
						.liste_albums_item p.title{
							text-align:center;
							font-size:25px;
						}
						.liste_albums_item p.description{
							font-size:16px;
							line-height:16px;
						}

			.goBack{
			}
				.liste_photos_photo{
					width:90%;
					margin:2px auto;
				}

		#footer{
			text-align:center;
		}
		#footer>span{
		}
		@media screen and (max-height:500px){
			#footer{
				height:15px;
				font-size:13px;
				line-height:15px;
				overflow:hidden;
			}
				#flags,
				#flags>a,
				#flags>a>img{
					height:100%;
				}
		}
			#flags{
				display:flex;
				overfow:hidden;
				justify-content: center;
				align-items: center;
			}
				#flags>a{
					margin-left:10px;
				}

}


	/*=============================================================================*\
	=										=
	=				SMARTPHONE DESIGN				=
	=										=
	\*=============================================================================*/


@media screen and (max-width:399px){
	html{
	}
	#website{
	}

		#header{
		}

		#menu{
		}

		#body{
		}

					.liste_albums_item{
						margin:10px 10px;
						padding:2px;
						-webkit-box-shadow: 2px 2px 4px 2px rgba(230,230,230,1.00);
						-moz-box-shadow: 2px 2px 4px 2px rgba(230,230,230,1.00);
						box-shadow: 2px 2px 4px 2px rgba(230,230,230,1.00);
					}

			.goBack{
			}
				.liste_photos_photo{
					width:90%;
					margin:10px auto;
				}

		#footer{
			text-align:center;
		}
		#footer>span{
		}
		@media screen and (max-height:500px){
			#footer{
				height:15px;
				font-size:13px;
				line-height:15px;
				overflow:hidden;
			}
				#flags,
				#flags>a,
				#flags>a>img{
					height:100%;
				}
		}
			#flags{
				display:flex;
				overfow:hidden;
				justify-content: center;
				align-items: center;
			}
				#flags>a{
					margin-left:10px;
				}

}


	/*=============================================================================*\
	=										=
	=				ALL DESIGN					=
	=										=
	\*=============================================================================*/


html,body{
	width:100%;
	height:100%;
}


.hidden{
	display:none;
	visibility:hidden;
}
.no_select,.no_select_ {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.no_select{
	cursor:default;
}
.pointer,
a{
	cursor:url("http://www.guillaumemalheiro.com/img/cursor_hand.png") 7 3, pointer!important;
	text-decoration:none;
}
.loading{
	background:transparent url(http://www.guillaumemalheiro.com/img/loading.gif) no-repeat center center;
}