@charset "utf-8";
/*website_building_media_queries.css*/
/*photoborrello.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) {

}*/

/* Schermi grandi o ad alta risoluzione */

/*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: 767px) and (orientation : portrait) {
/* 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*/
    
/*START OF START UP DIV_LINGO_MSG ###################################################################################*/	
	#div_lingo_msg {
		width:96%;
	}
	#div_lingo_msg_header {
	  /*height:11%;*/
	  font-size:150%;
	  line-height:150%;
	}
	#span_lingo_english {
		line-height:150%;
	}
	#span_lingo_italiano {
		line-height:150%;
	}
	#bt_div_lingo_msg_dismiss {
		/*line-height:150%;*/
		 font-size:150%;
		 font-weight: 500;
	}	
/*END OF START UP DIV_LINGO_MSG #####################################################################################*/
/* */
/*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" */
	}
	#options_img {
		top:0.3%; /* Normal default = 4%*//*was 10%*/
        height:3%; /* Normal default = 2.7%*/
        width:8%; /* Normal default = 2%*/		
	}
	#span_main_header {
		font-size:100%; /*textContent = "photoborrello.com" */
	    /*background-color:#F3052F;*/ /*orange bright*/
	    color:#FFFFCC; /*OUR FONT COLOUR*/ /*textContent = "photoborrello.com" */
		height:4%; /*textContent = "photoborrello.com" */
		width:42%; /*textContent = "photoborrello.com" */
		/*left: 29%;*/ /*textContent = "photoborrello.com" */
		line-height:180%;/*textContent = "photoborrello.com" */
	    /*color: #33FF00;*/ /*FONT COLOUR*/ /*bright green*/
	    /*border:solid  #33FF00 1px;* /*bright green*/ /*textContent = "photoborrello.com" */
	}
	#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%*/
	/*}*/
	#span_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*/ 
    }
    #div_imgs_cntnr_00{/*appended to div_e_com_main*/
	    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*/	
	}
/*END OF DIV_MAIN_BASE ##################################################################################################################*/
/* */
/*START OF SHOW_E_COM_CARD PROVIDERS PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP*/	
    /*MOBILE VERTICAL PORTRAIT*/
	#span_dismiss_e_com_page{/*Appended to window.document.body*/ /*textContent = "Close/Chiudi" */	
	    height:3%;
		width:16%; /*CHOOSE AN  E_COM_CARD PROVIDER: DISMISS*/
		font-size:180%; /*CHOOSE AN  E_COM_CARD PROVIDER: DISMISS*/
		line-height:200%;
	}
/*PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP*/
    #span_e_com_cards_00{/*appended to div_e_com_main*/ /*textContent = "STRIPE" */	
	    /*top:0;*/ /*to reset css*/
		top:8%;
		/*margin-left:auto;*/
		/*margin-right:auto;*/
		/*left:0;*/ /*to reset css*/		
	    left:4%;	    
	    height:3%;
	    width:32%;
        font-size:180%;/*fallback*/ /*the following vw-vh-vmin settings are set according to font-size 100%*/
	    text-align:center;
	    line-height:200%;
	}
	#span_e_com_cards_01{/*appended to div_e_com_main*/ /*textContent = "NAT WEST" */	
	    /*top:0*/ /*to reset css*/
		top:20%;
		/*left:0;*/ /*to reset css*/		
	    left:4%;	    
	    height:3%;
	    width:32%;
        font-size:180%;
	    text-align:center;
	    line-height:200%;
	}
	#span_e_com_cards_02{/*appended to div_e_com_main*/ /*textContent = "LLOYDS" */	
	    top:0; /*to reset css*/
		top:32%;
		/*margin-left:auto;*/
		/*margin-right:auto;*/
		left:0; /*to reset css*/		
	    left:4%;	    
	    height:3%;
	    width:32%;
        font-size:180%;
	    text-align:center;
	    line-height:200%;
	}
    #span_e_com_cards_03{/*appended to div_e_com_main*/ /*textContent = "OTHER" */	
	    top:0; /*to reset css*/
		top:44%;
		left:0; /*to reset css*/		
	    left:4%;	    
	    height:3%;
	    width:32%;
        font-size:180%;
	    text-align:center;
	    line-height:200%;
	}
	#div_imgs_cards_cntnr_00 {/*Appended to div_e_com_main*/ /*"STRIPE CARD IMAGES" */
		/*top:0;*/ /*to reset css*/
		top:12%;		
		left:4%;
		height:5%;
		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*/ /*"NAT WEST CARD IMAGES" */
		/*top:0;*/ /*to reset css*/
		top:24%;
		/*left:0;*/ /*to reset css*/		
	    left:4%;
		height:5%;
		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*/ /*"LLOYDS CARD IMAGES" */
		/*top:0;*/ /*to reset css*/
		top:36%;	
	    left:4%;
		height:5%;
		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 CARD IMAGES" */
        /*top:0;*/ /*to reset css*/
		top:48%;       	
	    left:4%;
		height:5%;
		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 ######################################################################################################################################################*/
    #div_myDropdown {
		width:60%;/* Normal default (for desktop) = width:20%;*/
		
    }
	#div_myDropdown [id*="drop_span_genre_"] {
		font-size:140%; /* Normal default (for desktop) = 150%*/
		line-height:120%;
    }
	#div_options_drpdwn {
        width:60%;/* Normal default (for desktop) = width:20%;*/		
    }

} /*END BRACE OF: @media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : portrait*/
/*}*/
/*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*/