
@media all and (min-width : 481px)  {

img#banner {
	left : 0vw;
}

img.big_image {
	position : absolute;  
	width : 100vw;
}

img.small_image {
	display : none;
	width : 100vw;
} 

input#header_query {
	display : none;
}

img#search_button {
	display : none;
}


/************************************************ TITLE ************************************************/

img#friend {
	display : block;
	margin : auto;
	width : 8vw;
	margin-bottom : 1vw;
	border-radius : 4vw;
}

a#friend {
	display : block;
	font-size : 1.8vw;
	color : rgb(200, 200, 200);
}


/************************************************ QUERY ************************************************/

section#query_area {
	position : relative;
	z-index : 2;
	display : block;
	width : 20vw;
	left : 50vw;
	margin-left : -10vw;
}

input#query {
	background-color : transparent;
	border-top : none;
	border-left : none;
	border-right : none;
	border-radius : 0px;
	border-bottom-color : white; 	
	height : 1.5vw;
	margin-left : auto;
	margin-right : auto;
	width : 20vw;
	color : white;
	opacity : 0.7;
	font-family : Font;
	font-size : calc(var(--font-size) * 1);
}

a#validate_button {
	display : block;
	text-align : center;
	margin-top : 3vw;
	margin-bottom : 2vw;
}

a#message {
	display : block;
	margin-left : auto;
	margin-right : auto;
	height : 2vw;
	width : 30vw;
	text-align : center;
	font-size : calc(var(--font-size) * 1);
}


/************************************************ RESULT ************************************************/

section#list {
	position : relative;
	background-color : rgb(var(--main-color));
}

section.folder, section.author {
	padding-top : 2vw;
	margin-top : 30vw;
	box-shadow : 0vw -0.5vw 0.5vw 0vw rgba(var(--shadow-color), var(--header-opacity));
}

h1#web_site {
	margin-bottom : -2vw;
	text-align : center;
}

section#result {
	position : relative;
	z-index : 5;
}


/*************************************** FRIENDS **************************************/

.rounded {
    width : 8vw;
    height : 8vw;
}

/*************************************** EVENT LIST **************************************/

div#subscribe {
	margin-top : 2vw;
	margin-bottom : 2vw;
}

img#subscribe_movie {
	margin : 0.5vw;
	width : 10.8vw;
	box-shadow : 5px 5px 5px #000;

	-webkit-transition : all 0.2s ease;
	-moz-transition : 0.2s ease;
	-o-transition : all 0.2s ease;
	-ms-transition : all 0.2s ease;
	transition : all 0.2s ease;
}

	img#subscribe_movie:hover {
		-webkit-transform : scale(1.05); 
		-moz-transform : scale(1.05); 
		-ms-transform : scale(1.05); 
		-o-transform : scale(1.05); 
		transform : scale(1.05);
	}

div#live {
	margin-top : 4vw;
	width : 100vw;
	height : 1.5vw;
	background-color : transparent;
	box-shadow : 0vw -0.5vw 0.5vw 0vw rgb(0, 0, 0);
}

a.thumbnail_title {
	display : block;
	margin-left : 5vw;
	margin-bottom : 2vw;
	font-size : 2.2vw;
}

img.pin {
	display : none;
}

/*************************************** EVENT LIST **************************************/

div.event_thumbnail_container {
	margin-left : 5vw;
	margin-bottom : 6vw;
}

	div.thumbnail.event {
		display : inline-block;
		position : relative;	
		width : 90vw;
		height : 10vw;	
		background-color : rgb(var(--main-color));
	}

		div.thumbnail.event:hover {	
			cursor : pointer;
		}

				div.event.portrait, div.event.squared {
					margin-top : 0.8vw;
					margin-left : 0vw;
					margin-right : 0vw;
					margin-bottom : 0.8vw;
				}

				img.event {
					margin-top : -0.1vw;
					margin-left : 0vw;
					height : 10.1vw;
				}

						img.event.portrait { width : 7.6vw; height: auto; }
						img.event.squared { width : 10.1vw; height: auto; }


		div.event.info {
			display : block;
			position : absolute;
			margin-top : -10vw;
			width : 80vw;
			font-size : 1.2vw;
			text-align : left;
		}

				div.event.info.portrait { margin-left : 8vw }
				div.event.info.squared { margin-left : 10vw }


		div.event {
			display : inline;
			position : absolute;
		}

				div.event.line._1 {
					top : 0vw;
					left : 1vw;
					font-size : 1.4vw;
					color : white;	
				}

				div.event.line._2 {
					top : 2vw;
					left : 1vw;
				}

				div.event.line._3 {
					top : 3.5vw;
					left : 1vw;
					width : 90%;
					text-align : justify;
					color : rgb(90, 90, 90);
				}

				div.event.line._4 {
					top : 7.5vw;
					left : 2.5vw;
					text-align : justify;
				}

				div.event.line._5 {
					top : 1vw;
					right : 2vw;
					width : 10vw;
					padding-right : 1vw;
					text-align : right;
				}

				div.event.line._6 {
					top : 7.5vw;
					left : 1vw;
					text-align : justify;
					color : rgb(90, 90, 90);
				}

img.pin {
	position : absolute;
	width : 2vw;
	margin-top : 7vw;
	margin-left : 0.5vw;
}

img.calendar {
	position : absolute;
	width : 3vw;
	margin-top : 0vw;
	margin-left : 78vw;
}

a.remove {
	position : absolute;
	margin-top : 6vw;
	margin-left : 1vw;
}

a.modify {
	position : absolute;
	margin-top : 6vw;
	margin-left : 1vw;
}

a.copy {
	position : absolute;
	margin-top : 6vw;
	margin-left : 13vw;
}

input.copy, a.copied {
	position : absolute;
	width : 28vw;
	margin-top : 6.5vw;
	margin-left : 25vw;	
	background-color : transparent;
	color : grey;
	font-size : 1vw;
}

		a.copied {
			display : none;
		}

		.readonly {
			border : none;
			cursor : default;
			-webkit-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;
		}

a.teaser {
	position : absolute;
	margin-top : 6vw;
	margin-left : 58vw;
}

a.access, a.subscribe {
	position : absolute;
	margin-top : 6vw;
	margin-left : 70vw;
}

a.no_display {
	display : none;
}


/*********************************** CONTACTS /***********************************/

table {
	padding-top : 4vw;
	padding-left : 1vw;
	padding-bottom : 4vw;
}

		tr#title_raw {height : 5vw; color : white;}

		th {
			font-family : Avenir;
			font-weight : normal;
			font-size : 1.2vw;
			text-align : center;
		}

		th.raw_number 			{width : 4vw;  background-color : rgb(255, 255, 255, 0.05); color : rgba(var(--font-color), 0.4);}
		th.raw_structure 		{width : 25vw; background-color : rgb(255, 255, 255, 0.05); color : rgba(var(--font-color), 0.4);}
		th.raw_first_name 		{width : 15vw; background-color : rgb(255, 255, 255, 0.05); color : rgba(var(--font-color), 0.4);}
		th.raw_last_name 		{width : 15vw; background-color : rgb(255, 255, 255, 0.05); color : rgba(var(--font-color), 0.4);}
		th.raw_email 			{width : 25vw; background-color : rgb(255, 255, 255, 0.05); color : rgba(var(--font-color), 0.4);}
		th.raw_tel 				{width : 12vw; background-color : rgb(255, 255, 255, 0.05); color : rgba(var(--font-color), 0.4);}

}
