@charset "utf-8";
/*website_building_media_queries_phones.css*/
/*booxky.com*/
/*@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){*/
/* Styles */
/* It can be hard sometimes to remember than max-width goes with smaller devices and min-width goes with larger devices. The way I remember this that there is an iPhone model called the iPhone MAX. So MAX-width goes with iPhone-like devices, min-width is the opposite. */
/* START OF COPIED FROM http://cssmediaqueries.com/ */
/*@media all and (orientation:landscape) {

}*/
/*NOTE: MIN MEANS AT LEAST. MAX MEANS NO MORE THAN*/
/*Yes, you are correct: in CSS and JavaScript media queries, min-width means "at least" or "greater than or equal to" a certain width, while max-width means "no more than" or "less than or equal to" a certain width. These are used to create responsive designs by applying different styles based on the viewport width. 
min-width
Meaning: Applies styles when the viewport width is greater than or equal to the specified value.
Example: @media (min-width: 1024px) { ... } applies styles when the screen is 1024px wide or wider.
Use Case: Common in a "mobile-first" approach, where you start with styles for small screens and use min-width to add more complex layouts for larger screens. 
max-width
Meaning: Applies styles when the viewport width is less than or equal to the specified value.
Example: @media (max-width: 768px) { ... } applies styles when the screen is 768px wide or narrower.
Use Case: Common in a "desktop-first" approach, where you start with styles for large screens and use max-width to adjust them for smaller screens. 
Combining them
You can also use both to define a specific range.
Example: @media (min-width: 400px) and (max-width: 800px) { ... } applies styles only when the viewport width is between 400px and 800px (inclusive). */
/* */
/*@media only screen and (min-width: 751px) and (max-width: 800px) and (orientation : landscape) {*/	
/*@media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : landscspe) {*/
/*@media only screen and (min-width: 700px) and (max-width: 767px) and (orientation : landscspe) {*/
/*@media only screen and (min-width: 600px) and (orientation : landscspe) {*/
/* Styles */
	/* Smartphones (portrait and landscape) ----------- */
/*@media only screen 
and (min-device-width : 200px) 
and (max-device-width : 800px) {*/
/* Styles */
/* Smartphones (landscape) ----------- */

/* Schermi grandi o ad alta risoluzione */
/*}*/ /*END BRACE OF: 
/*START OF AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA*/
/*@media screen and (min-width : 384px) {*/ /*JOHNNY MOBILE GALAXY A16 = width 384px Height 900px */
/*this will cover your all mobile/cellphone widths*/
/*Put your CSS here for 200px to 767px width devices (cover all width between 200px to 767px */
/*@media only screen and (min-width: 200px) and (max-width: 600px) and (orientation : portrait) {*/ /*code will apply if the viewing area is between 200px and 767x*/
/* J GALAXY @media only screen and (min-width: 384px) and (max-height: 900px) and (orientation : portrait) {*/ /*and (min-aspect-ratio: 1/1) {*/ /*and (-webkit-device-pixel-ratio: 1){ */ /*code will apply if the viewing area is between 384px and 900px*/ /* NO SPECIFIED RATIOSEEMS TO BE = 1 */
    /*MOBILE VERTICAL PORTRAIT*/
/* @media only screen and (min-width: 384px) and (max-height: 900px) and (orientation : portrait) {*/
/*@media only screen and (min-width : 200px) and (max-width: 700px) {*
/* Portrait */
/*@media screen 
  and (device-width: 384px) 
  and (device-height: 693px) 
  and (-webkit-device-pixel-ratio: 1)
  and (orientation: portrait) {

}*/
/* Smartphones (portrait) ----------- */
 /*and (orientation : portrait)*/
/*@media only screen and (min-width : 320px)) {*/
	/*@media all and (max-device-width: 480px) {*/
@media only screen and (min-width : 320px) and (max-width : 700px) and (orientation : portrait) {
/* Styles */
/*}*/ /*END BRACE OF:*/
/*START OF STARTUP FLAGS - PORTRAIT ###########################################################################################*/
	/*CAREFUL NOT TO DOUBLE UP THE PREVIOUS OBJECTS COMMANDS*/
	/*PORTRAIT*/
	/*SET IN website_building.css*/
	/*outline:solid #FFF100 1px;*/ /*Chuck You Farlie book cover title text color yellow FFF100*/
	/*PORTRAIT*/
	#uk_flag_img{
		top:0.5%;
    	left:0.5%;
		height:2.5%;
		opacity:0.6;
		outline:solid #FFF100 1px;
	}
	/*CAREFUL NOT TO DOUBLE UP THE PREVIOUS OBJECTS COMMANDS*/
	/*PORTRAIT*/
	#uk_flag_img:hover{                                 
		opacity:1.0;   
		outline:solid #33FF00 4px;
	}
	/*CAREFUL NOT TO DOUBLE UP THE PREVIOUS OBJECTS COMMANDS*/
	/*PORTRAIT*/
	#it_flag_img{
		top:0.5%;
		right:0.51%;
		height:2.5%;
		outline:solid #FFF100 1px;
	}
	/*CAREFUL NOT TO DOUBLE UP THE PREVIOUS OBJECTS COMMANDS*/
	/*PORTRAIT*/
	#it_flag_img:hover{
		opacity:1.0;
		outline:solid #33FF00 4px;
	}
/*END OF STARTUP FLAGS - PORTRAIT ############################################################################################*/
/*START OF STARTUP DIV_LINGO_MSG -PORTRAIT ###################################################################################*/
	#div_lingo_msg {
		/*background-color: #33FF00;*/ /*FOR TESTING*/		
/*START OF : TO CENTERDIV ON BODY USING TRANSFORM : answer 88 : https://stackoverflow.com/questions/42121150/css-centering-with-transform*/
    	left:50%;
    	/*top: 50%;*/
    	/*transform: translate(-50%, -50%);*/
		transform: translate(-50%);
/*END OF : TO CENTERDIV ON BODY USING TRANSFORM : answer 88 : https://stackoverflow.com/questions/42121150/css-centering-with-transform*/
		width:80%;
	}
	#div_lingo_msg_header {	/*BOOXKY*/			
    	top:0;
		/*background-color: #33FF00;*/ /*FOR TESTING*/
    	left:0;
 		height:10%;/*OK WITH BROWSER DETECTION. iF THE HEIGHT CHANGES, ALL THE CHIDREN HEIGHTS CHANGE-CORRECT ALL THE DHILDREN HEIGHTS)*/		
		width:100%;
    	font-size:180%;
		line-height:160%;
	}
	#div_lingo_msg_cookies {
    	top:10.4%;   
    	left:0;   
		height:10%;/*OK WITH BROWSER DETECTION. iF THE HEIGHT CHANGES, ALL THE CHIDREN HEIGHTS CHANGE-CORRECT ALL THE DHILDREN HEIGHTS)*/		
		width:100%;
    	font-size:140%;
		line-height:200%;
	}
	#div_lingo_msg_cookies:hover  { 
		font-size:150%;/*font-size:140%; TO REMAIN STATIC*/
		line-height:200%;
	}
	#span_lingo_english {
		/*left:20%;*/
 		width:60%;
		font-size:150%; /*font-size:140%; TO REMAIN STATIC*/
		line-height:160%;
	}
	/*#span_lingo_english:hover  {
	}*/
	#span_lingo_italiano {
		/*left:20%;*/
 		width:60%;
		font-size:150%;
		line-height:160%;
	}
	/*#span_lingo_italiano:hover  {
	}*/
	#bt_div_lingo_msg_dismiss {
		/*left:20%;*/
 		width:60%;
		font-size:150%;
		line-height:120%;
		font-weight: 500;
	}
	/*#bt_div_lingo_msg_dismiss:hover{
	}*/		
/*END OF STARTUP DIV_LINGO_MSG -PORTRAIT #####################################################################################*/	
	#span_lingo_see_sizes { /*click buttton*/
    	font-size:180%;
		line-height:140%;
	}
	#span_lingo_see_sizes:hover { /*click buttton*/
    	font-size:180%;
		line-height:140%;
	}
/*START OF START UP SPAN_LINGO_SCREEN_SIZES -PORTRAIT ########################################################################*/
	#span_lingo_screen_sizes{/*appended to window.document.body*/
    	top:12.4%; 
		left:5%; 
		width:90%; /*calculate margines and padding*/
    	font-size:130%;
    	font-weight:bold;
    	line-height:100%;
		color:#FFF100; /*Chuck You Farlie book cover title text color yellow FFF100*/
	}
/*END OF STARTUP DIV_LINGO_MSG -PORTRAIT #####################################################################################*/
/*START OF DIV_MAIN_BASE ################################################################################################################*/	
	#span_buy_btn {
	    height:4%; /* Normal default = 2.7%*/ /*textContent = "Buy or Compra" */
        width:18%; /* Normal default = 2%*/ /*textContent = "Buy or Compra" */
		left:6%;/*textContent = "Buy or Compra" */
		font-size:100%; /*textContent = "Buy or Compra" */
		line-height:180%; /*textContent = "Buy or Compra" */
		opacity:1.0; /*textContent = "Buy or Compra" */
	}
	/*#span_main_header found on website_building.css*/ /*textContent = "Booxky.com" */
	#span_main_header {
		/*left: 29%;*/ 
		font-size:150%; /*textContent = ".com" */
	    /*background-color:#F3052F;*/ /*orange bright*/
	    /*color:#FFFFCC;*/ /*OUR FONT COLOUR*/ /*textContent = "booxky.com" */
		color:#FFF100; /*Chuck You Farlie book cover title text color yellow FFF100*/ /*textContent = "booxky.com" */  
		height:4%; 
		width:42%;
		line-height:180%;
	    /*outline:solid  #33FF00 1px;* /*bright green*/ /*textContent = "booxky.com" */
	}
	#span_main_header:hover{
		/*left: 29%;*/ 
		font-size:150%;
	    /*background-color:#F3052F;*/
		color:#FFF100; /*Chuck You Farlie book cover title text color yellow FFF100*/
		height:4%; 
		width:42%;
		line-height:180%;
	    /*outline:solid  #33FF00 1px;*/
	}
	#div_myDropdown {/*click span_main_header*/
		height:auto;
		width:60%;/* Normal default (for desktop) = width:20%;*/
    }	
	#div_myDropdown [id*="drop_span_genre_"] {
		height:auto;
		font-size:140%; /* Normal default (for desktop) = 150%*/
		line-height:120%;
    }
	#div_myDropdown [id*="drop_span_genre_"]:hover{    	
		background-color: #33FF00; /*bright green*/
		color: #000000; /*Black*/
		display:block;
	}
	/*Used as button to click*/ /*appended to window.document.body*/ /*SET IN website_building.css*/
	#options_img {
		top:1.3%;
		right:20%;
        height:3%;
        width:8%;
	}
	/*Used as button to click*/ /*appended to window.document.body*/ /*SET IN website_building.css*/ /*SET IN website_building.css*/
	/*#options_img:hover {
		opacity:1.0;
		border:solid #33FF00 4px;
		color: #33FF00;
	}*/	
    #div_options_drpdwn {
		height:auto;
        width:60%;/* Normal default (for desktop) = width:20%;*/
				
    }
	#div_options_drpdwn [id*="#options_drpdwn_span_"] {
		height:auto;
		font-size:140%;
		line-height:120%;
    }
	#screen_sizes_img { /*Img used as button to click*/ /*appended to window.document.body*/
		top:1.3%; /*was 5%*/
		right:15%;
		/*opacity:0.9;*/ /*SET IN website_building.css*/
    	height:3%; /*ok*/
    	width:4%; /*ACCORDNG TO THE IMAGE RATIO*/
	}
	#screen_sizes_img:hover { /*Img used as button to click*//*appended to window.document.body*/ /*HOVER IN position:relative DOES NOT WORK*/ /*WORKS AS ABSOLUTE*/
    	/*opacity:1.0*/ /*SET IN website_building.css*/
		/*outline:solid #33FF00 4px;*/ /*bright green*//*SET IN website_building.css*/
    	/*background-color: #33FF00;*/ /*bright green*/ /*THIS IS OVERRIDDEN BY ITS JS SETTING*/ /*SET IN website_building.css*/
		/*color: #33FF00;*/ /*bright green*/ /*SET IN website_building.css*/
	}
	#span_screen_sizes{ /*This is the pop-up that lists the screen sizes*/
		font-size:100%; /*textContent = "List of screen sizes .px" */
		left:2%; /* Normal default = 28%*/ /* No margins */
		width:94%; /* Normal default = 44%*/ /* calculaed padding:1% 1% 1% 1%; *//*top right, bottom, left*/ /*Padding is internal*/ 
    }
	#span_contact_btn {
		height:4%; /* Normal default = 2.3%*/ /*textContent = "Contact or Contatti" */
        width:18%; /* Normal default = 3%*/ /*textContent = "Contact or Contatti" */
		right:6%;/*textContent = "Contact or Contatti" */
		font-size:100%; /*textContent = "Contact or Contatti" */
		line-height:180%; /*textContent = "Contact or Contatti" */
		opacity:1.0; /*textContent = "Contact or Contatti" */
	}
	/*#span_x_00 {*/
		/*font-size:100%;*/ /*textContent = "Sito in allestimento" */
		/*line-height:200%*/
	/*}*/

	/* */
	#cntnr_00_img_00 { /*appended to div_main_base*/
		/*height:92%;*//*TEMPORARY FOR TESTS*/
		width:100%;
		/*width:96%;*/
	}
	/*#cntnr_00_img_01 { /*appended to div_main_base*/
		/*height:92%;*/ /*TEMPORARY FOR TESTS*/
		/*width:47%;*/
		/*width:10%;
	}
	#cntnr_00_img_02 { /*appended to div_main_base*/
		/*height:92%;*/ /*TEMPORARY FOR TESTS*/	
		/*width:48%;*/
		/*width:10%;
	}
	#cntnr_00_img_03 { /*appended to div_main_base*/
		/*height:100%;*/ /*TEMPORARY FOR TESTS*/
		/*width:48%;*/
		/*width:10%;
	}*/
	#div_main_base [id*="div_imgs_cntnr_00"] img {
		width:98%
	}
    /*#div_imgs_cntnr_00{*/ 
	    /*height:88%;*/
	    /*width:96%;*/  
	    /*background-color: transparent;*/
/*margin:0 auto 0 auto ;*/ /*top right, bottom, left*/ /*Margin is external*/ /*Margin and Padding interfere with Border and Outline*/	
	/*}*/
/*START OF STARTUP BUY ECOMERCE - PORTTRAIT ##################################################################################*/
	/*CAREFUL NOT TO DOUBLE UP THE PREVIOUS OBJECTS COMMANDS*/
	/*CAREFUL NOT TO DOUBLE UP THE PREVIOUS OBJECTS COMMANDS*/
/* */
/*NOTE: ALL THE FOLOWING E-COM (E-COMMERCE) OBJECTS ARE FOUND ON website_building_e_com.css*/
	/*CAREFUL NOT TO DOUBLE UP THE PREVIOUS OBJECTS COMMANDS*/
	/*Found on dropdown_cards_chooser.js/function create_div_pay_by_card_providers())*/ /*window.document.body.appendChild(div_e_com_main);*/
/*PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP*/
	/*CAREFUL NOT TO DOUBLE UP THE PREVIOUS OBJECTS COMMANDS*/
	/*PORTRAIT*/
	#div_e_com_main { 
		top:12%;
		left:0;
		height:99%;
		width:99.8%;
    	font-size:100%;
		/*border:solid #FFF100 2px;*/ /*Chuck You Farlie book cover title text color yellow FFF100*/
		border:solid  #33FF00 2px;
		/*overflow:auto;*/
	}
	/*CAREFUL NOT TO DOUBLE UP THE PREVIOUS OBJECTS COMMANDS*/
	/*PORTRAIT*/
	/*appended to div_e_com_main*/
	#span_dismiss_e_com_page {
		top:4%;
		right:6%;
		height:4%;
		width:38%;
    	font-size:100%;
    	line-height:170%;	
	}
	/*CAREFUL NOT TO DOUBLE UP THE PREVIOUS OBJECTS COMMANDS*/
	/*PORTRAIT*/
	#span_dismiss_e_com_page:hover {
		/*opacity:1.0;*/
		/*outline:solid #33FF00 4px;*/ /*bright green*/
    	/*background-color: #33FF00;*/ /*bright green*/ /*THIS IS OVERRIDDEN BY ITS JS SETTING*/
		/*color: #33FF00;*/ /*bright green*/	
	}
	/*CAREFUL NOT TO DOUBLE UP THE PREVIOUS OBJECTS COMMANDS*/
	/*PORTRAIT*/
    #span_e_com_cards_00{/*appended to div_e_com_main*/ /*textContent = "STRIPE" */	
	    /*top:0;*/ /*to reset css*/
		top:10%;
		/*margin-left:auto;*/
		/*margin-right:auto;*/
		/*left:0;*/ /*to reset css*/		
	    left:4%;	    
	    height:3%;
	    width:34%;
        font-size:100%;/*fallback*/ /*the following vw-vh-vmin settings are set according to font-size 100%*/
	    text-align:center;
	    line-height:130%;
	}
	#span_e_com_cards_01{/*appended to div_e_com_main*/ /*textContent = "NAT WEST" */	
	    /*top:0*/ /*to reset css*/
		top:22%;
		/*left:0;*/ /*to reset css*/		
	    left:4%;	    
	    height:3%;
	    width:34%;
        font-size:100%;
	    text-align:center;
	    line-height:130%;
	}
	#span_e_com_cards_02{/*appended to div_e_com_main*/ /*textContent = "LLOYDS" */	
	    top:0; /*to reset css*/
		top:34%;
		/*margin-left:auto;*/
		/*margin-right:auto;*/
		left:0; /*to reset css*/		
	    left:4%;	    
	    height:3%;
	    width:34%;
        font-size:100%;
	    text-align:center;
	    line-height:130%;
	}
    #span_e_com_cards_03{/*appended to div_e_com_main*/ /*textContent = "OTHER" */	
	    top:0; /*to reset css*/
		top:46%;
		left:0; /*to reset css*/		
	    left:4%;	    
	    height:3%;
	    width:34%;
        font-size:100%;
	    text-align:center;
	    line-height:130%;
	}
	/*CAREFUL NOT TO DOUBLE UP THE PREVIOUS OBJECTS COMMANDS*/
	/*PORTRAIT*/
	#div_imgs_cards_cntnr_00 {/*Appended to div_e_com_main*/ /*"STRIPE CARD IMAGES" */
		/*top:0;*/ /*to reset css*/
		top:14%;		
		left:4%;
		height:5%;
		width:90%;	
		/*margin:0 auto 0 auto;*/ /*top right, bottom, left*/ /*Margin is external*/ /*Margin and Padding interfere with Border and Outline*/	
	}	
	#div_imgs_cards_cntnr_01 {/*Appended to div_e_com_main*/ /*"NAT WEST CARD IMAGES" */
		/*top:0;*/ /*to reset css*/
		top:26%;
		/*left:0;*/ /*to reset css*/		
	    left:4%;
		height:5%;
		width:90%;
		/*margin:0 auto 0 auto;*/ /*top right, bottom, left*/ /*Margin is external*/ /*Margin and Padding interfere with Border and Outline*/	
		
	}    
	#div_imgs_cards_cntnr_02 {/*Appended to div_e_com_main*/ /*"LLOYDS CARD IMAGES" */
		/*top:0;*/ /*to reset css*/
		top:38%;	
	    left:4%;
		height:5%;
		width:90%;
		/*margin:0 auto 0 auto;*/ /*top right, bottom, left*/ /*Margin is external*/ /*Margin and Padding interfere with Border and Outline*/	
		
	}
    #div_imgs_cards_cntnr_03 {/*Appended to div_e_com_main*/ /*"OTHER CARD IMAGES" */
        /*top:0;*/ /*to reset css*/
		top:50%;       	
	    left:4%;
		height:5%;
		width:90%;		
		/*margin:0 auto 0 auto;*/ /*top right, bottom, left*/ /*Margin is external*/ /*Margin and Padding interfere with Border and Outline*/
	}
/*END OF SHOW_E_COM_CARD PROVIDERS PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP*/	
/*END OF STARTUP BUY ECOMERCE - PORTTRAIT ####################################################################################*/	
/*END OF DIV_MAIN_BASE ##################################################################################################################*/
} /*END BRACE OF: @media only screen and (min-width : 320px) and (max-width : 700px) and (orientation : portrait)*/	
/* */
/*START OF STARTUP DIV_LINGO_MSG -LANDSCAPE #####################################################################################*/
/*@media only screen and (min-width : 320px) and (max-width : 700px) and (orientation : portrait)*/
/*and (max-height: 320px)*/
/*and (min-aspect-ratio: 1/1)*/
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/*SAMSUNG GALAXY A16 CHROME LANSCAPE SCREEN INNER WIDTH === 750px SCREEN INNER HEIGHT === 303px*/ /*LANDSCAPE*/
@media only screen and (min-width: 600px) and (max-height: 400px) and (orientation : landscape) {  /* and (-webkit-device-pixel-ra*/
/*START OF STARTUP FLAGS - PORTRAIT ###########################################################################################*/
	/*CAREFUL NOT TO DOUBLE UP THE PREVIOUS OBJECTS COMMANDS*/
	/*PORTRAIT*/
	#uk_flag_img{
		/*top:0.5%;*/ /*SET IN website_building.css*/
    	/*left:0.5%;*/ /*SET IN website_building.css*/ 
		height:5%; /*SET IN website_building.css*/	
	}
	/*CAREFUL NOT TO DOUBLE UP THE PREVIOUS OBJECTS COMMANDS*/
	/*PORTRAIT*/
	#uk_flag_img:hover{                                  
		/*opacity:0.0;*/ /*SET IN website_building.css*/    
		/*outline:solid #33FF00 3px;*/ /*bright green*/ /*SET IN website_building.css*/
	}
	/*CAREFUL NOT TO DOUBLE UP THE PREVIOUS OBJECTS COMMANDS*/
	/*PORTRAIT*/
	#it_flag_img{
		/*top:0.5%;*/ /*SET IN website_building.css*/
   		/*right:0.51%; /*SET IN website_building.css*/   
		height:5%; /*SET IN website_building.css*/
	}
	/*CAREFUL NOT TO DOUBLE UP THE PREVIOUS OBJECTS COMMANDS*/
	/*PORTRAIT*/
	#it_flag_img:hover{
		/*opacity:1.0;*/  /*SET IN website_building.css*/
		/*outline:solid #33FF00 3px;*/ /*bright green*/  /*SET IN website_building.css*/
	}
/*END OF STARTUP FLAGS - PORTRAIT ############################################################################################*/
	#div_lingo_msg {
		top:10%; /*ONLY PHONE LANDSCAPE*/
		/*background-color: #33FF00;*/ /*bright green*/ /*FOR TESTING*/
		/*background-color: #33FF00;*/ /*red*/ /*FOR TESTING*/
		/*background-color: #33FF00;*/ /*bright green*/ /*FOR TESTING*/
		/*background-color: #FF0000;*/ /*red*/ /*FOR TESTING*/
/*START OF : TO CENTERDIV ON BODY USING TRANSFORM : answer 88 : https://stackoverflow.com/questions/42121150/css-centering-with-transform*/
    	left:50%;
    	/*top: 50%;*/
    	/*transform: translate(-50%, -50%);*/
		transform: translate(-50%);
/*END OF : TO CENTERDIV ON BODY USING TRANSFORM : answer 88 : https://stackoverflow.com/questions/42121150/css-centering-with-transform*/
		width:80%;
	}
	#div_lingo_msg_header {	/*BOOXKY*/			
    	top:0;
		/*background-color: #33FF00;*/ /*bright green*/ /*FOR TESTING*/
    	left:0;
 		height:10%;/*OK WITH BROWSER DETECTION. iF THE HEIGHT CHANGES, ALL THE CHIDREN HEIGHTS CHANGE-CORRECT ALL THE DHILDREN HEIGHTS)*/		
		width:100%;
    	font-size:130%;
		line-height:100%;
	}
	#div_lingo_msg_cookies {
		top:10.4%;   
		left:0;   
		height:10%;/*OK WITH BROWSER DETECTION. iF THE HEIGHT CHANGES, ALL THE CHIDREN HEIGHTS CHANGE-CORRECT ALL THE DHILDREN HEIGHTS)*/		
		width:100%;
		font-size:120%;
		line-height:140%;
	}
	#div_lingo_msg_cookies:hover  { 
		font-size:120%;/*font-size:140%; TO REMAIN STATIC*/
		line-height:140%;
	}
	#span_lingo_english {
		/*left:20%;*/
 		width:60%;
		font-size:150%; /*font-size:150%; TO REMAIN STATIC*/
		line-height:80%;
	}
	/*#span_lingo_english:hover  {
	}*/
	#span_lingo_italiano {
		/*left:20%;*/
		width:60%;
		font-size:150%; /*font-size:150%; TO REMAIN STATIC*/
		line-height:80%;
	}
	/*#span_lingo_italiano:hover  {
	}*/
	#bt_div_lingo_msg_dismiss {
		/*left:20%;*/
		height:12%;
 		width:60%;
		font-size:150%;
		line-height:100%;
		font-weight: 500;
	}
	/*#bt_div_lingo_msg_dismiss:hover{
	}*/		
/*END OF STARTUP DIV_LINGO_MSG -LANDSCAPE #####################################################################################*/
	/*#span_main_header found on website_building.css*/ /*textContent = "Booxky.com" */
	#span_main_header {
		/*left: 29%;*/ 
		font-size:150%; /*textContent = ".com" */
	    /*background-color:#F3052F;*/ /*orange bright*/
	    /*color:#FFFFCC;*/ /*OUR FONT COLOUR*/ /*textContent = "booxky.com" */
		color:#FFF100; /*Chuck You Farlie book cover title text color yellow FFF100*/ /*textContent = "booxky.com" */  
		height:4%; 
		width:42%;
		line-height:180%;
	    /*outline:solid  #33FF00 1px;* /*bright green*/ /*textContent = "booxky.com" */
	}
	/*#span_main_header found on website_building.css*/ /*textContent = "Booxky.com" */
	/*color:#FFF100; Chuck You Farlie book cover title text color yellow FFF100*/ /*textContent = "booxky.com"*/
	#span_main_header:hover{
		/*left: 29%;*/ 
		font-size:150%;
	    /*background-color:#F3052F;*/
		color:#FFF100; /*Chuck You Farlie book cover title text color yellow FFF100*/
		height:4%; 
		width:42%;
		line-height:180%;
	    /*outline:solid  #33FF00 1px;*/
	}
	#div_myDropdown {/*click span_main_header*/
		top:17%;
		height:auto;
		width:29%;/* Normal default (for desktop) = width:20%;*/
		color:#FFF100; /*Chuck You Farlie book cover title text color yellow FFF100*/
    }	
	#div_myDropdown [id*="drop_span_genre_"] {
		height:auto;
		font-size:120%; /* Normal default (for desktop) = 150%*/
		line-height:120%;
    }	
	#div_options_drpdwn {
        width:60%;/* Normal default (for desktop) = width:20%;*/		
    }
	#span_buy_btn {/*appended to window.document.body*/ /*CREATED ON js_01_e_com.js; */ /*APPENDED TO div_main_base*/    
		top:6%;
		left:8%;/*10%*/  
   		height:4%; /*ok*/
    	width:12%; /*ACCORDNG TO THE IMAGE RATIO*/  
		font-size:100%;/*fallback*/ /*the following vw-vh-vmin settings are set according to font-size 100%*/
    	line-height:90%;
}
	#span_buy_btn:hover{ /*appended to window.document.body*/ /*HOVER IN position:relative DOES NOT WORK*/ /*WORKS AS ABSOLUTE*/
		/*opacity:1.0;*/ /*SET IN website_building.css*/
		border:solid #33FF00 4px; /*bright green*/
		color: #33FF00; /*bright green*/
	}
	#span_contact_btn {/*appended to window.document.body*/
		top:6%;   
    	/*left:96.4%;*/
    	right:8%;
    	/*opacity:0.9;*/ /*SET IN website_building.css*/
		height:4%; /*This adapts the visual height to the same as "color_pkr_img" height;*/
		width:12%;
    	font-size:100%; /*fallback*/ /*the following vw-vh-vmin settings are set according to font-size 100%*/
    	line-height:90%;
	}
	#span_contact_btn:hover {
		opacity:1.0;
		border:solid #33FF00 4px; /*bright green*/
    	/*background-color: #33FF00;*/ /*bright green*/ /*THIS IS OVERRIDDEN BY ITS JS SETTING*/
		color: #33FF00; /*bright green*/
	}
	#options_img { /*Used as button to click*/ /*appended to window.document.body*/
		top:1.6%; /* Normal default = 4%*//*was 10%*/
		right:23%;
        height:3%; /* Normal default = 2.7%*/
        width:3%; /* Normal default = 2%*/		
	}
	#screen_sizes_img { /*Img used as button to click*/ /*appended to window.document.body*/
		top:1.6%; /*was 5%*/
		right:19%;
		/*opacity:0.9;*/ /*SET IN website_building.css*/
    	height:3%; /*ok*/
    	width:3%; /*ACCORDNG TO THE IMAGE RATIO*/
	}
	#screen_sizes_img:hover { /*Img used as button to click*//*appended to window.document.body*/ /*HOVER IN position:relative DOES NOT WORK*/ /*WORKS AS ABSOLUTE*/
    	/*opacity:1.0*/ /*SET IN website_building.css*/
		/*outline:solid #33FF00 4px;*/ /*bright green*//*SET IN website_building.css*/
    	/*background-color: #33FF00;*/ /*bright green*/ /*THIS IS OVERRIDDEN BY ITS JS SETTING*/ /*SET IN website_building.css*/
		/*color: #33FF00;*/ /*bright green*/ /*SET IN website_building.css*/
	}
	#div_imgs_cntnr_00 {
		top:16%;
		width:98%
	}
	#span_lingo_see_sizes { /*click buttton*/
    	font-size:150%;
		line-height:90%;
	}
	#span_lingo_see_sizes:hover { /*click buttton*/
    	font-size:150%;
		line-height:90%;
	}
/*START OF START UP SPAN_LINGO_SCREEN_SIZES -PORTRAIT ########################################################################*/
	#span_lingo_screen_sizes {/*appended to window.document.body*/
    	top:12.4%; 
		left:5%; 
		width:90%; /*calculate margines and padding*/
    	font-size:130%;
    	font-weight:bold;
    	line-height:100%;
		color:#FFF100; /*Chuck You Farlie book cover title text color yellow FFF100*/
	}
/*}*/ /*END BRACE OF: @media only screen and (min-width: 600px) and (max-height: 400px) and (orientation : landscape)*/

/* */
/*START OF SHOW_E_COM_CARD PROVIDERS PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP*/	
    /*MOBILE LANSCAPE*/
	#div_e_com_main {/* window.document.body.appendChild(div_e_com_main); /*Found on dropdown_cards_chooser.js/function create_div_pay_by_card_providers())*/
		top:16%; 
		left:0;
		height:98%;
		width:99.8%;
	}
	/*Appended to window.document.body*/ /*textContent = "Close/Chiudi" */	
	#span_dismiss_e_com_page {
		right:8%;
	    height:4%;
		width:12%; 
		font-size:180%;
		line-height:140%;
	}
	#span_dismiss_e_com_page:hover {
		/*opacity:1.0;*/
		/*outline:solid #33FF00 4px;*/ /*bright green*/
    	/*background-color: #33FF00;*/ /*bright green*/ /*THIS IS OVERRIDDEN BY ITS JS SETTING*/
		/*color: #33FF00;*/ /*bright green*/	
	}
/*PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP*/
    #span_e_com_cards_00{/*appended to div_e_com_main*/ /*textContent = "STRIPE UK" */	
	    /*top:0;*/ /*to reset css*/
		top:3%;
		/*margin-left:auto;*/
		/*margin-right:auto;*/
		/*left:0;*/ /*to reset css*/		
	    left:4%;	    
	    height:5%;
	    width:30%;
        font-size:200%;/*fallback*/ /*the following vw-vh-vmin settings are set according to font-size 100%*/
	    text-align:center;
	    line-height:160%;
	}
	#span_e_com_cards_01{/*appended to div_e_com_main*/ /*textContent = "OTHER_01 UK" */	
	    /*top:0*/ /*to reset css*/
		top:24%;
		/*left:0;*/ /*to reset css*/		
	    left:4%;	    
	    height:5%;
	    width:30%;
        font-size:200%;
	    text-align:center;
	    line-height:160%;
	}
	#span_e_com_cards_02{/*appended to div_e_com_main*/ /*textContent = "OTHER_02 UK" */	
	    top:0; /*to reset css*/
		top:45%;
		/*margin-left:auto;*/
		/*margin-right:auto;*/
		left:0; /*to reset css*/		
	    left:4%;	    
	    height:5%;
	    width:30%;
        font-size:200%;
	    text-align:center;
	    line-height:160%;
	}
    #span_e_com_cards_03{/*appended to div_e_com_main*/ /*textContent = "OTHER_03 UK" */	
	    top:0; /*to reset css*/
		top:66%;
		left:0; /*to reset css*/		
	    left:4%;	    
	    height:5%;
	    width:30%;
        font-size:200%;
	    text-align:center;
	    line-height:160%;
	}
	#div_imgs_cards_cntnr_00 {/*Appended to div_e_com_main*/ /*"STRIPE CARD IMAGES" */
		/*top:0;*/ /*to reset css*/
		top:10%;		
		left:4%;
		height:10%;
		width:92%;	
		/*margin:0 auto 0 auto;*/ /*top right, bottom, left*/ /*Margin is external*/ /*Margin and Padding interfere with Border and Outline*/	
	}	
	#div_imgs_cards_cntnr_01 {/*Appended to div_e_com_main*/ /*"OTHER_01 UK" */
		/*top:0;*/ /*to reset css*/
		top:31%;
		/*left:0;*/ /*to reset css*/		
	    left:4%;
		height:10%;
		width:92%;
		/*margin:0 auto 0 auto;*/ /*top right, bottom, left*/ /*Margin is external*/ /*Margin and Padding interfere with Border and Outline*/	
		
	}    
	#div_imgs_cards_cntnr_02 {/*Appended to div_e_com_main*/ /*"OTHER_02 UK" */
		/*top:0;*/ /*to reset css*/
		top:52%;	
	    left:4%;
		height:10%;
		width:92%;
		/*margin:0 auto 0 auto;*/ /*top right, bottom, left*/ /*Margin is external*/ /*Margin and Padding interfere with Border and Outline*/	
		
	}
    #div_imgs_cards_cntnr_03 {/*Appended to div_e_com_main*/ /*"OTHER_03 UK" */
        /*top:0;*/ /*to reset css*/
		top:73%;       	
	    left:4%;
		height:10%;
		width:92%;		
		/*margin:0 auto 0 auto;*/ /*top right, bottom, left*/ /*Margin is external*/ /*Margin and Padding interfere with Border and Outline*/
	}
/*END OF SHOW_E_COM_CARD PROVIDERS PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP*/	
/* */
/*START OF THE MINI CONTACT FORM CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC*/
	#the_mini_contact_form {
		top:14%; /* Normal default(for desktop) = 10%*/ /* No margins */
		font-size:90%; /* Normal default (for desktop) = 100%*//*textContent = "the_mini_contact_form" */
		left:2%; /* Normal default (for desktop) = 28%*/ /* No margins */
		height:26%; /* Normal default (for desktop) = 26%*/ 
		width:88%; /* Normal default (for desktop) = 40%*/
	}
	#div_mini_cntct_frm_header { /*textContent = Contact/Contatti*/
		height:12%;
		font-size:110%; /* Normal default (for desktop) = 140%*//*textContent = "the_mini_contact_form" */
		line-height:150%; /* Normal default (for desktop) = 190%*//*textContent = "the_mini_contact_form" */
    }
	#bt_mini_form_copy_email {
		top:16%;
		left:2%;
		height:12%; /* Normal default (for desktop) = 4.6%*/ 
		width:60%;
		font-size:120%; /* Normal default (for desktop) = 140%*//*textContent = "the_mini_contact_form" */		
		/*margin:0 auto 0 auto;*/ /*top right, bottom, left*/ /*Margin is external*/ /*Margin and Padding interfere with Border and Outline*/
    }
	#bt_mini_form_dismiss {
		top:16%;
		right:2%;
		height:12%; /* Normal default (for desktop) = 4.6%*/ 
		width:30%;
		font-size:120%; /* Normal default (for desktop) = 140%*//*textContent = "the_mini_contact_form" */
    }
	#inpt_mini_form_email_addrs {
		top:32%;
		width:94%;
    }
	#msg_box_mini_form_lbl_text	 {
		top:50%;
		height:auto;
		width:94%; /* Normal default (for desktop) = 40%*/
    }
	
/*END OF THE MINI CONTACT FORM CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC*/
/* */
/* START OF #div_img_rel_text ####################################################################################################################################################*/
    #div_img_rel_text {/*appended to window.document.body*/ /*position fixed*/
        width:89%; /*Normal default (for desktop) = 56%*/
    }
	#bt_img_text_dismiss {
		font-size:80%; /* Normal default (for desktop) = 100%*/ /*textContent = "Close/Chiudi" */	
		width:18%;	   /* Normal default (for desktop) = 12%*/
	}	
    #span_imgtext_00 { /*the first header info text relative to selected image*/
    }
    #span_imgtext_01 { /*the second header info text relative to selected image*/
    }
    #span_imgtext_02 { /*the actual article text relative to selected image*/
	   /* height:78%;*/ /* Normal default (for desktop) = 780%*//*textContent = "the actual article text relative to selected image" */
    }
/* END OF #div_img_rel_text ######################################################################################################################################################*/
/* */
} /*END BRACE OF @media only screen and (min-width: 600px) and (max-height: 400px) and (orientation : landscape)
/*}*/
/*overflow-x:hidden;*//*THIS STOPS THE VERTICAL SCROLLBAR AFTER ENLARGING-SHRINKING*/
    /*overflow-y:hidden;*/ /*NORMALY HERE OK*/ /*maybe better not specified so as i-pads or mobiles can adapt the content.*/
    /*overflow-y:auto;*/ /*DID NOT USE IN DESKTOP BUT NEEDED FOR SCROLLING ON MOBILES*/ /*scroll*/ /*this*/ /*NORMALY HERE OK*/ /* This is also re-set by JS*/
	/*z-index:0;*/
	/*cursor:pointer;*/
	/*margin:0 0 0 0;*//*top right, bottom, left*/ /*Margin is external*/ /*Margin and Padding interfere with Border and Outline*/
    /*padding:0 0 0 0;*/ /*top right, bottom, left*/ /*Padding is internal*/
	/*display: block;*/
/* END OF OF CHOOSE E_COM_CARD PROVIDER PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP*/
/*}*/ /*END OF @media only screen and (min-width: 384px) and (max-width: 900px) and (orientation : portrait)*/
/*END OF AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA*/
/* */
/*START OF : THIS IS PRGRAMMED FOR SAMSUNG GALAXY A16.*/ /*LAND SCAPE */ /*MIN-WIDTH = LEAST WIDTH-MAX WIDTH = NO MORE THAN THE MAX-WIDTH*/

/*END OF : THIS IS PRGRAMMED FOR SAMSUNG GALAXY A16.*/ /*LAND SCAPE */ /*MIN-WIDTH = LEAST WIDTH-MAX WIDTH = NO MORE THAN THE MAX-WIDTH*/
/*END OF STARTUP DIV_LINGO_MSG - HORIZONTAL-LANDSCAPE #####################################################################################*/
/*START OF BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB*/
/*JOHNNY MOBILE GALAXY A16 = width 384px Height 900px */ /*LANDSCAPE*/
/*If you want to add css for Landscape mode you can add this*/
/*and (orientation : landscape)*/
/*Put your CSS here for 200px to 767px width devices (cover all mobile portrait width*/
/* */
/*@media only screen and (min-width: 700px) and (max-width: 703px) and (orientation : landscape) {*/
	/* Landscape */
/*@media screen and (device-width: 750px) and (device-height: 200px) and (-webkit-device-pixel-ratio: 4) and (orientation: landscape) {

}*/
/*@media only screen and (min-width: 751px) and (max-width: 300px) and (orientation : landscape) {*/
	/*@media (orientation: landscape) {*/
/*@media only screen and (min-device-width: 480px) 
                   and (max-device-width: 710px) 
                   and (orientation: landscape) {*/
/*media only screen and (max-height: 575.98px) and (orientation: landscape) {*/
/*-------------------------*/
/*@media only screen and (max-device-width: 480px){*/
/*(max-width: 479px),*//*xsmall:*/
/*(max-width: 599px),*//*small:*/ 
/*(max-width: 767px),*//*medium:*/
/*(max-width: 1024px),*//*large:*/
/*(min-width: 768px) and (max-width: 1024px),*//*largeOnly:*/
/*(min-width: 1200px),0*//*xxl:*/
/*(min-height: 780px),*//*tall:*/
/*START OF-STARTUP DIV_LINGO_MSG_LANSCAPE ###################################################################################*/	
/*@media only screen and (min-device-width: 380px) 
                   and (max-device-width: 740px) 
                   and (orientation: landscape) {*/
/* Smartphones (landscape) ----------- */
/*@media only screen (max-width : 720px) and (orientation : landscape) {*/

	
/*END OF-STARTUP DIV_LINGO_MSG_LANSCAPE #####################################################################################*/
/*START OF STARTUP SPAN_LINGO_SCREEN_SIZES -LANDSCAPE #######################################################################*/




/*END OF STARTUP SPAN_LINGO_SCREEN_SIZES -LANDSCAPE #########################################################################*/
/*}*/ /*END BRACE OF: media only screen and (min-width: 767px) and (max-width: 200px) and (orientation : landscape)*/
/*END OF @media only screen and (min-width: 700px) and (max-width: 767px) and (orientation : landscape) {*/
/*}*/
/*}*/
/*}*/
/*}*/
/*}*/
/*}*/
/*}*/	
/*overflow-x:hidden;*//*THIS STOPS THE VERTICAL SCROLLBAR AFTER ENLARGING-SHRINKING*/
    /*overflow-y:hidden;*/ /*NORMALY HERE OK*/ /*maybe better not specified so as i-pads or mobiles can adapt the content.*/
    /*overflow-y:auto;*/ /*DID NOT USE IN DESKTOP BUT NEEDED FOR SCROLLING ON MOBILES*/ /*scroll*/ /*this*/ /*NORMALY HERE OK*/ /* This is also re-set by JS*/
	/*z-index:0;*/
	/*cursor:pointer;*/
	/*margin:0 0 0 0;*//*top right, bottom, left*/ /*Margin is external*/ /*Margin and Padding interfere with Border and Outline*/
    /*padding:0 0 0 0;*/ /*top right, bottom, left*/ /*Padding is internal*/
	/*display: block;*/
/* END OF OF CHOOSE E_COM_CARD PROVIDER PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP*/
/*}*/ /*END OF @media only screen and (min-width: 384px) and (max-width: 900px) and (orientation : portrait)*/
/*END OF AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA*/
/* */
/*START OF BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB*/
/*JOHNNY MOBILE GALAXY A16 = width 384px Height 900px */ /*LANDSCAPE*/
/*If you want to add css for Landscape mode you can add this*/
/*and (orientation : landscape)*/
/*Put your CSS here for 200px to 767px width devices (cover all mobile portrait width*/
/*}*/ /*END BRACE OF:*/