/* CSS Document */

body {
	padding: 0px;
	border-spacing: 0px;
	margin: 0px;
	font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
	background: #FFF;
	color: #fff;
	/*! height: 100%; */
	max-width: 100%;
	overflow-x: hidden;
	position: relative;
}

body.darkMode {
	background: #000;
}

body.lightMode {
	background: #FFF;
}

.dark2light {
	background: #FFF;
	height: 15px;
	width: 100%;
}

.dark {
	background: #000;
	color: #FFF;
	min-height: 90vh;
	padding-bottom: 20px;
}

.light {
	background: #FFF;
	color: #000;
	/*! padding-bottom: 20px; */
}

.light a {
	color: #66F !important;
	text-decoration: none;
}


.dark a {
	color: #FFF;
}

.wild-split {
	display: flex;
	width: 100%;
}

.goback {
	padding-left: 10px;
	position: absolute;
	left: -10px;
	top: 120px;
	z-index: 80;
	display: none;
}

.book-cover img {
	background-size: contain;
	width: 100%;
}

.header {
	/*! background-image: url("../upload/header.jpg"); */
	/*! background-size: 100% auto; */
	/*! background-position: center; */
	height: 120px;
	color: #FFF;
	/*! font-size: 40px; */
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	position: sticky;
	top: 0;
	z-index: 150;
}

.headerContent {
	width: 1000px;
	margin: 0 auto;
	align-items: center;
	align-content: center;
	display: flex;
	position: relative;
}

.message-not-sent {
	background: url("../upload/icons/ios-close-circle-outline-2-32.png") no-repeat center left;
}

.message-sent {
	background: url("../upload/icons/ios-checkmark-circle-outline-2-32.png") no-repeat center left;
}

.help {
	background: url("../upload/icons/ios-information-circle-outline-2-32.png") no-repeat center left;
}

.justify-left {
	text-align: left;
}

.header span {
  align-self: flex-end;
	/*! padding: 20px; */
}

#main-logo {
	cursor: pointer;
} 

.hbox {
	display: flex;	
}

.distribute-space {
	justify-content: space-between;
}

.space-before-after {
	margin-top: 5px;
	margin-bottom: 10px;
}

.vbox {
	display: inline-block;	
	width: 100%;
}

.hidden {
	display: none !important;
}

.facebook-icon {
	background: url("../upload/icons/facebook-160-48.png") no-repeat;
	width: 48px;
	height: 48px;
	cursor: pointer;
}

.mail-icon {
	background: #FFF url("../upload/icons/ios-mail-7-48.png") no-repeat;
	width: 48px;
	height: 48px;
	cursor: pointer;
	border: none;
	border-radius: 50%;
	filter: invert(1);
	background-size: 40px;
	background-position-x: center;
	background-position-y: center;
}

.embeded-picture {
    object-fit: contain;
	width: 50%;
	height: 310px;
    margin-left: -50%;
}


.page {
	padding: 15px;
}

.page.max1000 {
	max-width: 1000px;
}

body, input, textarea, select, button {
  font-synthesis: none;
  -moz-font-feature-settings: 'kern';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  direction: ltr;
  text-align: left;
}

.message-sent,
.message-not-sent,
.help {
	/*! height: 100px; */
	font-size: 20px;
	text-align: justify;
	padding: 15px 0px 15px 40px;
}

.form-submit {
	height: 30px;
	padding: 5px 15px;
}

.form-textbox .form-textarea, 
.form-textbox .form-textbox-input {
  color: #1d1d1f;
  border-color: #d2d2d7;
  background-color: rgba(255,255,255,0.8);
  text-overflow: ellipsis;
}


.form-textarea,
.form-textbox-input {
  font-size: 17px;
  line-height: 1.23536;
  font-weight: 400;
  letter-spacing: -.022em;
  font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
  width: 100%;
  height: 3.29412rem;
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
  margin-bottom: .82353rem;
  padding: 1.05882rem .94118rem 0 .94118rem;
    padding-top: 1.05882rem;
    padding-right: 0.94118rem;
    padding-left: 0.94118rem;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}


.form-textarea {
	height: 180px;
	resize: none;
}

.content {
	/*! padding: 10px 10px 10px 50px; */
	position: relative;
	/*! height: 100%; */
	transition: 400ms ease-in-out;
}

.menu-container {
	
	/*! width: 100%; */
	/*! margin-top: -15px; */
	align-self: flex-end;
	/*! justify-content: center; */
	/*! display: flex; */
	white-space: nowrap;
}

#menu-categories-details {
	list-style-type: disc;
    -webkit-columns: 3;
    -moz-columns: 3;
    columns: 3;
    list-style-position: inside;
	width: 1100px;
	margin: 0 auto;
	line-height: 27px;
}

.menu {
	
	align-items: center;
	justify-content: center;
	display: flex;
	/*! width: 50%; */
	background: #000;
	padding: 5px;
}

.darkmode .menu {
	color: #FFF;
}

.lightmode .menu {
	color: #000;
}

.menu-item {
	margin: 0px 5px;
	/*! background: #000; */
	height: 20px;
	padding: 5px 10px 5px 10px;
	font-size: 16px;
	cursor: pointer;
	/*! border-radius: 5px; */
  /*! border-bottom: solid 0.1px #fff; */
	/*! transition: 200ms ease-in-out; */
/*	font-weight: 100;*/
	letter-spacing: 0.1em;
}

.menu-details {
	display: none;
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 200;
	left: 0;
	right: 0;
	padding: 15px;
	font-size: 17px;
}

.menu-details .item {
	cursor: pointer;
	transition: 200ms ease-in-out;
}

.major-item {
	font-size: 24px;
	margin-bottom: 10px;
}

.menu-details .item:hover {
	font-weight: 600;
}

.menu-details a {
	color: inherit;
	text-decoration: inherit;
}

.darkMode .menu-details {
	background: #000;
	color: #FFF;
}

.lightMode .menu-details {
	background: #FFF;
	color: #000;
}

.blur {
-webkit-filter: blur(8px);
  -moz-filter: blur(8px);
  -ms-filter: blur(8px);
  -o-filter: blur(8px);
  filter: blur(8px); 
}

.menu-item a {
	text-decoration: none;
	color: #ddd;
}

.menu-item:hover a {
	color: #fff;
}

.main-column {
	width: 100%;
}


.search {
}

.search-box {
  background-color: #000;
  border: solid 0.1px #fff;
  border-radius: 20px;
  height: 27px;
  padding-left: 15px;
  outline: none;
  color: #FFF;
  padding-right: 30px;
	transition: 200ms ease-in-out;
}

.search-zone {
	display: flex;
	min-height: 90vh;
	padding-left: 15px;
	padding-right: 15px;
}

.search-by-genre span {
	font-size: 10px;
	color: #999;
	padding-left: 5px;
}

.search-vertical-box {
	display: block;
	min-width: 250px;
	max-width: 250px;
	padding: 5px;
	min-height: 90vh;
	/*! overflow-y: auto; */
	white-space: nowrap;
	margin-top: 25px;
	overflow-x: hidden;
}

.search-by-main,
.search-by-genre {
	text-overflow: ellipsis;
	padding: 5px;
	cursor: pointer;
	width: 100%;
	height: 20px;
	transition: 200ms ease-out;
	overflow: hidden;
}

.search-by-main {
	font-size: 18px;
	font-weight: bold;
}

.search-by-genre.selected,
.search-by-main.selected {
	color: #66F;
	font-weight: bold;
}

.search-by-genre {
	font-size: 15px;
	font-weight: normal;
}

.search-by-genre:hover {
	/*! background: #ddd; */
	font-weight: bold;
}

.search-result-box {
	width: 100%;
	/*! min-width: 100%; */
}

.search-button {
	
	margin-bottom: -8px;
	background: #000;
	border-radius: 15px;
	border: solid 0.1px #fff;
	padding: 3px;
	width: 19px;
	height: 19px;
	margin-left: -33px;
	transition: 200ms ease-in-out;
}

.footer {
	background-color: #fafafa;
	color: #ffffff;
	height: 150px;
	/*! margin-top: 20px; */
	display: flex;
	align-content: center;
	align-items: center;
	text-align: center;
}

.goback a {
	color: #fff;
	text-decoration: none;
}

.carrousels {
	padding: 5px 0 0 20px;	
}

.carrousel {
	height: 270px;
	width: 100%;
	overflow-x: scroll;
	display: inline-flex;
}

.carrousel-grid {
	width: 100%;
	display: contents;
}

.book-section-title,
.carrousel-section-title {
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 10px;
	position: relative;
	margin-top: 20px;
	display: flex;
}

.carrousel-section-subtitle {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
	position: relative;
	display: flex;
}

.carrousel-section-show-all {
	position: absolute;
	font-size: 18px;
	display: inline;
	right: 10px;
	padding-top: 11px;
}

.carrousel-section-show-all a {
	text-decoration: none;
	color: inherit;
}

.carrousel-section-show-all a:hover {
	text-decoration: underline;
}

.highlight-book,
.references {
	height: 410px;
	width: 100%;
	text-align: center;
	position: relative;
	padding-top: 60px;
	background-color: #000;
}

.highlight-book > img.reflect {
	transform: rotatex(180deg) translatey(2px); 
  mask-image: linear-gradient(transparent 80%, black 110%);
}

.references {
	background: url("../upload/images/book.jpg");
	background-position-y: 60px;
	background-size: 700px;
	background-repeat: no-repeat;
	background-position-x: center;
}

.highlight-book span {
	font-size: 40px;
	position: absolute;
	left: 50%;
	top: 18px;
	font-weight: bold;
	text-align: left;
	max-height: 150px;
	overflow: hidden;
}

.references span {
	font-size: 50px;
	position: absolute;
	left: 0;
	right: 0;
	top: 20px;
	font-weight: bold;
}

.highlight-book span.small {
	font-size: 30px;
	position: absolute;
	left: 50%;
	top: 180px;
	font-weight: lighter;
	text-align: left;
}

.references span.small {
	font-size: 30px;
	position: absolute;
	left: 0;
	right: 0;
	top: 80px;
	font-weight: lighter;
}

.highlight-book span.links {
	position: absolute;
	top: 225px;
	color: #66F;
	font-size: 18px;
	font-weight: normal;
	left: 50%;
	text-align: left;
}

.references span.links {
	position: absolute;
	top: 125px;
	color: #66F;
	font-size: 18px;
	font-weight: normal;
}

.wild-picture span.links a {
	text-decoration: none;
	color: #66F !important;
	font-size: 18px;
	font-weight: normal;
}

.wild-picture .spacer {
	margin-right: 30px;
	position: relative;
}

.wild-picture span.links a:hover {
  text-decoration: underline;	
}

.center-box {
	text-align: center;
}

.small-infos {
	font-size: 16px;
	letter-spacing: 1px;
}

.title-box {
	font-size: 40px;
	font-weight: 200;
	padding: 15px;
}

.wild-picture.title-box {
	min-height: 40px;
}

.explaination-how-to-local {
	
	background: url("../upload/images/book-give.png");
	height: 410px;
	width: 50%;
	background-position-y: bottom;
	text-align: center;
	position: relative;
	background-size: 1050px;
	background-repeat: no-repeat;
	background-position-x: -10px;
	overflow: hidden;
	color: #000;
	margin: 15px 7px 15px 15px;
}

.explaination-how-to-local span {
	font-size: 50px;
	position: absolute;
	left: 0;
	right: 0;
	top: 202px;
	font-weight: bold;
	line-height: 50px;
}

.explaination-how-to-local span.small {
	font-size: 30px;
	position: absolute;
	left: 0;
	right: 0;
	top: 300px;
	font-weight: 400;
}

.explaination-how-to-local span.links {
	position: absolute;
	top: 325px;
	color: #66F;
	font-size: 18px;
	font-weight: normal;
}



.explaination-how-to-remote {
	
	background: url("../upload/images/book-prepare-box.jpg");
	height: 410px;
	width: 50%;
	background-position-y: -40px;
	text-align: center;
	position: relative;
	background-size: 790px;
	background-repeat: no-repeat;
	background-position-x: center;
	overflow: hidden;
	color: #FFF;
	margin: 15px 15px 15px 7px;
}

.explaination-how-to-remote span {
	font-size: 50px;
	position: absolute;
	left: 0;
	right: 0;
	top: 20px;
	font-weight: bold;
	line-height: 40px;
	color: #000;
}

.explaination-how-to-remote span.small {
	font-size: 30px;
	position: absolute;
	left: 0;
	right: 0;
	top: 70px;
	font-weight: 400;
}


.explaination-how-to-remote span.small2 {
	font-size: 20px;
	position: absolute;
	left: 0;
	right: 0;
	top: 108px;
	font-weight: 300;
	color: #5D5D5D;
	line-height: 20px;
}

.explaination-how-to-remote span.links {
	position: relative;
	top: 134px;
	color: #66F;
	font-size: 18px;
	font-weight: normal;
}




.categories-presentation {
	background: url("../upload/images/white-book.jpg");
	/*! height: 90vh; */
	min-width: calc(100% + 30px);
	width: calc(100% + 30px);
	text-align: right;
	position: relative;
	/*! background-size: 700px; */
	background-repeat: no-repeat;
	background-position-x: center;
	background-size: cover;
	margin-left: -15px;
}

.categories-presentation span {
	font-size: 50px;
	position: absolute;
	left: 0;
	right: 0%;
	opacity: 0;
	top: 250px;
	font-weight: bold;
	white-space: nowrap;
}

.categories-presentation span.small {
	font-size: 30px;
	position: absolute;
	/*! left: 0; */
	right: 0%;
	opacity: 0;
	top: 310px;
	font-weight: lighter;
	letter-spacing: -1px;
}

.flow-item {
	height: 255px;
	width: 150px;
	margin-right: 10px;
	overflow: hidden;
	cursor: pointer;
	min-width: 150px;
}

.flow-item-cat {
	height: 115px;
  width: 200px;
  min-width: 200px;
}

.flow-item-cat .book-picture {
	height: 60px;
}

.carrousel-grid .flow-item {
	display: inline-block;
	margin-right: 5px;
}

.book-more {
	height: 210px;
	overflow: hidden;
	position: relative;
	text-align: center;
	display: table-cell;
	width: 150px;
	vertical-align: middle;
	/*! color: #FFFFFF; */
	font-size: 40px;
	transition: 200ms ease-in-out;
}

.book-more span {
	display: block;
	font-size: 14px;
	color: #999;
}

.book-more:hover {
	transform: scale(1.1);
}

.book-picture {
	height: 210px;
	overflow: hidden;
	position: relative;
}

.book-picture img {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    object-fit: cover;
	transition: 200ms ease-in-out;
}

.book-picture img:hover {
	transform: translate(-50%, -50%) scale(1.1);
}

.book-details .book-picture {
	height: 500px;
	width: 30%;
	margin-right: 20px;
	min-width: 30%;
	margin-top: 20px;
}
.book-details .book-picture img {
	/*! height: 500px; */
    object-fit: contain;
	transform: none;
	position: relative;
	top: 0;
	left: 0;
}

.book-details {
	height: 100%;
	width: 100%;
	display: inline-flex;
	padding-bottom: 20px;
}



.book-details .book-picture img:hover {
	transform: none;
}

.book-infos {
	position: relative;
	min-width: 50%;
	width: 50%;
}

.book-title {
	max-width: 100%;
	
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-weight: normal;
	padding: 5px 0px;
}

.book-author {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
	color: #999;
}

.book-summary {
	text-align: justify;
	width: 100%;
	padding-top: 10px;
	margin-bottom: 50px;
}

.book-info {
	font-size: 12px;
	color: #999;
}

.book-info span {
	font-size: 16px;
	color: #000;
}

.book-info span a {
	color: #000;
}

.book-info span a:hover {
	color: #99F;
}

.wanted {
	height: 40px;
	font-size: 15px;
}

input[type=submit]:disabled {
	cursor: default;
	background: #AAA;
}

input[type=submit],
.wanted #getit {
	font-size: 18px;
	height: 40px;
	margin-top: 10px;
	padding: 5px 15px;
	background: #99F;
	border-radius: 10px;
	border: none;
	color: #FFF;
	cursor: pointer;
}



.book-price {
	font-size: 60px;
  position: absolute;
  right: 0px;
	bottom: 0px;
	text-align: right;
	height: 161px;
	overflow-y: hidden;
}

.book-price span {
	font-size: smaller;
}

.book-original-price {
	font-size: 20px;
	text-align: right;
}

.book-occasion-indication,
.book-original-indication {
	color: #999;
}

.book-occasion-indication {
	font-size: 32px !important;
}

.book-original-indication {
	font-size: 18px;
}

.menu-categories {
	display: none;
}

.menu-categories-box {
	display: none;
}


.show-read-more .more-text{
	display: none;
}

.left-column {
	min-width: 30%;
	height: 100%;
	width: 30%;
}

.book-cover {
	padding: 15px;
	/*! width: 100%; */
}

@media screen and (max-width: 450px) and (min-width: 300px) {
	#menu-catgeories {
		display: none;
	}
	
	.flow-item {
	  height: 255px;
	  width: 47% !important;
	  min-width: 47% !important;
	}
	
	.message-sent,
  .message-not-sent,
  .help {
		font-size: 14px;
	}
	
	#menu-categories-details {
		list-style-type: disc;
		-webkit-columns: 1;
		-moz-columns: 1;
		columns: 1;
		list-style-position: inside;
		width: 100%;
		line-height: 27px;
	}
	
	.menu-details {
		height: auto;
	}
}

@media screen and (max-width: 740px) and (min-width: 300px) {
	.embeded-picture {
    object-fit: contain;
	width: 50%;
	height: 240px;
    margin-left: -50%;
  }
	
	.highlight-book span {
	font-size: 28px;
	position: absolute;
	left: 52%;
	top: 53px;
	font-weight: bold;
	text-align: left;
	max-height: 143px;
	overflow: hidden;
	max-width: 48%;
}
	
	.highlight-book span.small {
	font-size: 20px;
	position: absolute;
	left: 52%;
	top: 207px;
	font-weight: lighter;
	text-align: left;
}
	.highlight-book span.links {
	position: absolute;
	top: 235px;
	color: #66F;
	font-size: 18px;
	font-weight: normal;
	left: 52%;
	text-align: left;
}
	
	#menu-catgeories {
		display: none;
	}
	
	.references span {
		font-size: 40px;
	}
	.references span.small {
		font-size: 28px;
	}
	.boxed300 {
		/*! max-width: 300px; */
	}
	.categories-presentation span {
		font-size: 30px;
	}
	.categories-presentation span.small {
		font-size: 20px;
		top: 290px
	}
	.categories-presentation .menu-categories {
		top: 285px !important;
		left: 300px !important;
	}
	.flow-item {
	  height: 255px;
	  width: 31%;
	  min-width: 31%;
	}
	.flow-item-cat {
	  height: inherit;
	}
	.wild-picture.title-box {
		font-size: 28px;
	}
	
	.book-details {
	  display: inline-block;
	}
	
  .book-details .book-picture {
		width: 100%;
		height: 280px;
	}
	
	 .book-infos {
    min-width: calc(100% - 30px) !important;
    width: calc(100% - 30px) !important;
    padding-left: 15px;
  }
	
	.book-info {
		max-width: 60%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow-x: hidden;
	}

	.explaination-how-to-local span,
	.explaination-how-to-remote span {
		font-size: 35px;
		line-height: 35px;
	}
	
	.explaination-how-to-local span.small,
	.explaination-how-to-remote span.small {
		font-size: 25px;
		line-height: 25px;
	}
	
	.explaination-how-to-local span.small2,
	.explaination-how-to-remote span.small2 {
		font-size: 15px;
		line-height: 15px;
	}
	
	.explaination-how-to-local span.links a,
	.explaination-how-to-remote span.links a {
		font-size: 15px;
		line-height: 10px;
	}
	
	.explaination-how-to-local .spacer,
	.explaination-how-to-remote .spacer {
    margin-right: 2px;
	}
	
	.carrousel-section-title {
		font-size: 20px;
		display: flex;
	}
	
	.carrousel-section-subtitle {
		font-size: 16px;
		display: flex;
	}
	
	.carrousel-section-title .section-name {
    max-width: 240px;
	}
	
	.carrousel-section-show-all {
		padding-top: 5px;
		font-size: 15px;
	}
}
	
@media screen and (max-width: 900px) and (min-width: 300px) {
	.goback {
		display: block;
	}
	#menu-catgeories {
		display: none;
	}
	
	.header {
		display: grid;
		height: 160px;
		/*! padding: 15px 15px 0 15px; */
		align-content: center;
		/*! max-width: calc(100% - 30px); */
		position: relative;
	}
	
	.search-vertical-box {
		display: none;
	}
	
	.categories-presentation span {
		padding-left: 20px;
	}
	
	.menu-categories {
		display: block;
		position: absolute;
		right: 9px;
		background: url("../upload/icons/ios-menu-6-32.png");
		width: 32px;
		height: 32px;
		cursor: pointer;
		z-index: 1000;
		background-repeat: no-repeat;
		filter: invert();
	}
	
	#an3 {
		position: absolute;
		top: 313px;
		left: 409px;
		right: inherit;
		width: 33px;
		background-size: contain;
		opacity: 0;
	}
	
	.menu-categories-box {
		display: none;
		position: absolute;
		z-index: 1100;
    	padding-top: 15px;
		width: 100%;
		/*! height: 90vh; */
		top: 110px;
	}
	
	.lightMode .menu-categories-box {
		background: #FFF;
		color: #000;
	}
	
	.darkMode .menu-categories-box {
		background: #000;
		color: #FFF;
	}
	
	.menu-categories-box-content {
		overflow-y: scroll;
		height: 78vh;
		overflow-x: hidden;
	}
	
	.menu-categories-box .search-by-genre {
		padding-left: 15px; 
	}
	
	.close-menu-categories {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		background: url("../upload/icons/ios-close-10-48.png");
		width: 48px;
		height: 48px;
		cursor: pointer;
		z-index: 110;
	}
	
	.darkMode .close-menu-categories {
		filter: invert();
	}
	
	.references {
		background-size: cover;
		background-position-y: 100px;
		background-color: #000;
	}
	.wild-split {
		display: block;
	}
	
	.explaination-how-to-local {
		width: inherit;
		margin: 0;
		background-position-x: -80px;
		background-size: cover;
	}
	
	.explaination-how-to-remote {
		width: inherit;
		margin: 15px 0 15px 0;
		background-size: cover;
		background-position-y: top;
		/*! background-position-x: -140px; */
		/*! background-size: 650px; */
	}
	
	.book-infos {
		min-width: 60%;
		width: 60%;
  	}
	
	.menu-categories-box-content .major-item a {
		color: inherit;
		text-decoration: none;
		padding-left: 5px;
	}

}