/* base single pages - full width; set in base.css container=1000 */
.singlepage { width: 990px !important; margin-top: 40px !important; padding-left: 20px !important;}
.VTLogo { width: 1000px; height: 92px; margin-top: 0px; display:block;}
.companylogo { width: 119px; height: 122px }  

.widgimage  { width: 460px; height: 439px; } 
.widgvideo { width: 476px; height: 315px; margin: 5px 5px 5px 5px; }  
.widsmallvideo { width: 386px; height: 315px; }  
.ProductBannerAd { width: 460px; height: auto; margin-top: 12px; margin-bottom: 12px; }	

table.basic	, table.style1 { width: 992px; }
div#page_wrapper {
		width: 1000px;
		margin: 0 auto;
		margin-left: 10px;
	}
section { padding: 2px 4px 2px 4px; 
     /* center the section in it's parent */     
    display: block;
    margin-left: auto;
    margin-right: auto
}  

aside h1 { margin-left: 5px; margin-top: 5px; max-width: 35%;  }
header nav ul { max-width: 65%; }
.clickableElement { margin: 15px; }

th {
    /* wrap long text and urls */
    white-space: pre; /* CSS 2.0 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3.0 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    word-wrap: break-word; /* IE 5+ */
} 
ul.listoflinks { padding-right: 15px; }  

/* For iPhone 5 and Mobile Portrait for 320px wide, up to 374 px */
@media only screen and (max-width:374px) {
    
    .VTLogo { width: 544px; height: 50px; overflow: hidden;}
    .companylogo { width: 75px; height: 76px }
    .ui-autocomplete-input { width: 150px !important; min-height: 10px !important; }
    .ui-autocomplete.ui-menu {width: 200px !important; max-height: 200px;}
    .ui-menu-item a, .ui-menu-item {width: 195px !important; overflow: visible !important; /* text-overflow: clip !important; text-wrap: auto !important; text-shadow: none !important;*/ line-height: 1 !important; }
     
    h1 {font-size: 16px; }
    h2, header nav select {font-size: 11px; }
    form { clear:both;}
    
    .widgimage  { width: 294px; height: 280px; }
    .widgvideo { width: 300px; height: 286px;}
    .widsmallvideo { width: 300px; height: 244px; }
    .ProductBannerAd { width: 294px; height: auto; }

	table.basic	, table.style1 { width: 316px; /*98%*/ }
	div#page_wrapper {
		width: 320px;
	}
	.container {
		width: auto;
		margin: 0 auto;
	}
	section { padding: 2px 2px 2px 2px; }
	
	table.basic td, p, select, table.style1 td, table.style1 th, th, td {font-size: 10px;}
	caption, table.style1 caption, table.basic caption, .listoflinks, blockquote, blockquote p {font-size: 11px; }
	body, ul li {font-size: 11px !important; }
	input, textarea, select {font-size: 11px; }
	input[type=submit], select, button { font-size: 13px; }
	
	.singlepage { width: auto !important; margin-top: 0px !important; padding-left: 0px !important;}
	
	header {
		margin-bottom: 0px;
	}
		header nav ul,
		header nav span.arrow { display: none !important; }
		header .select-menu   { display: block; }

	/* Contact */
	#frmAdd p.left,
	#frmAdd p.right {
		float: none;
		width: auto;
		margin-bottom: 20px;
	}
	#frmAdd div.row { margin-bottom: 0px; }
	#frmAdd textarea {
		width: 280px;
		margin-top: 10px;
	}
	
	footer { padding-top: 20px;	}
    
}    
/* For iPhones 6,7,8 Portrait 375 px to 413 px */
@media only screen and (min-width:375px) and (max-width:413px)  
{
    
    .VTLogo { width: 653px; height: 60px; overflow: hidden;}
    .companylogo { width: 88px; height: 90px }
    .ui-autocomplete-input { width: 150px !important; min-height: 10px !important; }
    .ui-autocomplete.ui-menu {width: 200px !important; max-height: 200px;}
    .ui-menu-item a, .ui-menu-item {width: 195px !important; overflow: visible !important; /* text-overflow: clip !important; text-wrap: auto !important; text-shadow: none !important;*/ line-height: 1 !important; }
    
    table.basic td, p, select, table.style1 td, table.style1 th {font-size: 11px;}
	caption, table.style1 caption, table.basic caption, .listoflinks, blockquote, blockquote p {font-size: 12px; }
    input, textarea, select {font-size: 11px; }
    input[type=submit], button { font-size: 13px; }
     
    h1 {font-size: 17px; }
    h2, header nav select {font-size: 11px; }
    form { clear:both;}
    
    .widgimage  { width: 336px; height: 321px; }
    .widgvideo { width: 355px; height: 337px;}
    .widsmallvideo { width: 355px; height: 290px; }
    .ProductBannerAd { width: 336px; height: auto; }

    table.basic	, table.style1 { width: 371px /*98%*/; }
	div#page_wrapper {
		width: 375px;
	}
	.container {
		width: auto;
		margin: 0 auto;
	}
	section { padding: 2px 2px 2px 2px; }  
	
	table.basic td, p, input, select {font-size: 11px; }
	
	.singlepage { width: auto !important; margin-top: 0px !important; padding-left: 0px !important;}
	
	header {
		margin-bottom: 0px;
	}
		header nav ul,
		header nav span.arrow { display: none !important; }
		header .select-menu   { display: block; }

	/* Contact */
	#frmAdd p.left,
	#frmAdd p.right {
		float: none;
		width: auto;
		margin-bottom: 20px;
	}
	#frmAdd div.row { margin-bottom: 0px; }
	#frmAdd textarea {
		width: 330px;
		margin-top: 10px;
	}
	
	footer { padding-top: 20px;	}

}
/* For iPhone Xr and 11 in Portrait with 414 px portrait */
@media only screen and (min-width:414px) and (max-width:567px) { 

    .VTLogo { width: 414px; height: 38px; overflow: hidden;}
    .companylogo { width: 97px; height: 99px }
     .ui-autocomplete-input { width: 200px !important; min-height: 10px !important; }
    .ui-autocomplete.ui-menu {width: 230px !important; max-height: 200px;}
    .ui-menu-item a, .ui-menu-item {width: 225px !important; overflow: visible !important; /* text-overflow: clip !important; text-wrap: auto !important; text-shadow: none !important;*/ line-height: 1 !important; }
    
    .widgimage  { width: 384px; height: 367px; }
    .widgvideo { width: 390px; height: 315px;  }
    .widsmallvideo { width: 386px; height: 315px; }
    .ProductBannerAd { width: 384px; height: auto; }
    
    table.basic td, p, select, table.style1 td, table.style1 th {font-size: 11px;}
	caption, table.style1 caption, table.basic caption, .listoflinks, blockquote, blockquote p {font-size: 12px; }
	input, textarea, select {font-size: 12px; }
    input[type=submit], button { font-size: 14px; }
	
    h1 {font-size: 18px; }
    h2, header nav select {font-size: 12px; }
    form { clear:both;}

    table.basic	, table.style1 { width: 410px /*98%*/; }
	div#page_wrapper {
		width: 414px; 
	}
	.container {
		width:  auto; 
		margin: 0 auto;
	}
	section { padding: 2px 2px 2px 2px; /* width: 440px !important; */}
	
	.singlepage { width: auto !important; margin-top: 0px !important; padding-left: 0px !important;}
	
	header {
		margin-bottom: 0px;
	}
		header nav ul,
		header nav span.arrow { display: none !important; }
		header .select-menu   { display: block; }
	
	/* Contact */
	#frmAdd p.left,
	#frmAdd p.right {
		float: none;
		width: auto;
		margin-bottom: 20px;
	}
	#frmAdd div.row { margin-bottom: 0px; }
	#frmAdd textarea {
		width: 400px;
		margin-top: 10px;
	}
	
	footer { padding-top: 20px;	}
	
}

/* For iPhone 5 in Landscape of 568 px up to 666 */
@media only screen and (min-width:568px) and (max-width:666px) { 

    .VTLogo { width: 568px; height: 52px; overflow: hidden;}
    .companylogo { width: 97px; height: 99px }
     .ui-autocomplete-input { width: 200px !important; min-height: 10px !important; }
    .ui-autocomplete.ui-menu {width: 230px !important; max-height: 200px;}
    .ui-menu-item a, .ui-menu-item {width: 225px !important; overflow: visible !important; /* text-overflow: clip !important; text-wrap: auto !important; text-shadow: none !important;*/ line-height: 1 !important; }
    
    .widgimage  { width: 528px; height: 504px; }
    .widgvideo { width: 544px; height: 408px;  }   /* last one column size */
    .widsmallvideo { width: 540px; height: 440px; }
    .ProductBannerAd { width: 528px; height: auto; }
    
    table.basic td, p, select, table.style1 td, table.style1 th {font-size: 11px;}
	caption, table.style1 caption, table.basic caption, .listoflinks, blockquote, blockquote p {font-size: 12px; }
	input, textarea, select {font-size: 11px; }
    input[type=submit], button { font-size: 13px; }
	
    h1 {font-size: 19px; }
    h2, header nav select {font-size: 12px; }
    form { clear:both;}

    table.basic	, table.style1 { width: 564px; }
	div#page_wrapper {
		width: 568px; 
	}
	.container {
		width:  auto; /*100%;*/
		margin: 0 auto;
	}
	section { padding: 2px 2px 2px 2px; }
	
	.singlepage { width: auto !important; margin-top: 0px !important; padding-left: 0px !important;}
	
	header {
		margin-bottom: 0px;
	}
		header nav ul,
		header nav span.arrow { display: none !important; }
		header .select-menu   { display: block; }
	
	/* Contact */
	#frmAdd p.left,
	#frmAdd p.right {
		float: none;
		width: auto;
		margin-bottom: 20px;
	}
	#frmAdd div.row { margin-bottom: 0px; }
	#frmAdd textarea {
		width: 425px;
		margin-top: 10px;
	}
	
	footer { padding-top: 20px;	}
	
}




/* For iPhone 6-8 basic in landscape 667 up to 767  and 735; goes to 2 columns again */
@media only screen and (min-width:667px) and (max-width:735px) { 

    .VTLogo { width: 667px; height: 62px; overflow: hidden;} 
    .companylogo { width: 75px; height: 76px }
     .ui-autocomplete-input { width: 200px !important; min-height: 10px !important; }
    .ui-autocomplete.ui-menu {width: 230px !important; max-height: 200px;}
    .ui-menu-item a, .ui-menu-item {width: 225px !important; overflow: visible !important; /* text-overflow: clip !important; text-wrap: auto !important; text-shadow: none !important;*/ line-height: 1 !important; }

    .widgimage  { width: 294px; height: 280px; }
    .widgvideo { width: 300px; height: 286px;  } 
    .widsmallvideo { width: 300px; height: 244px; clear: left; }
    .ProductBannerAd { width: 294px; height: auto; }
    
    table.basic td, p, select, table.style1 td, table.style1 th {font-size: 11px;}
	caption, table.style1 caption, table.basic caption, .listoflinks, blockquote, blockquote p {font-size: 12px; }
	input, textarea, select {font-size: 11px; }
    input[type=submit], button { font-size: 13px; }
	
    h1 {font-size: 20px; }
    h2 {font-size: 14px; }
    form { clear:both;}

    table.basic	, table.style1 { width: 663px ; }
	div#page_wrapper {
		width: 667px; 
	}
	.container {
		width:  auto; 
		margin: 0 auto;
	}
	section { padding: 2px 2px 2px 2px; /* width: 440px !important; */}
	
	.singlepage { width: auto !important; margin-top: 0px !important; padding-left: 0px !important;}
	
	header {
		margin-bottom: 0px;
	}
		header nav ul,
		header nav span.arrow { display: none !important; }
		header .select-menu   { display: block; }

	/* Contact */
	#frmAdd p.left,
	#frmAdd p.right {
		float: none;
		width: auto;
		margin-bottom: 20px;
	}
	#frmAdd div.row { margin-bottom: 0px; }
	#frmAdd textarea {
		width: 400px;
		margin-top: 10px;
	}
	
	footer { padding-top: 20px;	}
	
}

/* For iPhone 6-8 Plus sizes in landscape 736 up to 767 ; shows in 2 columns */
@media only screen and (min-width:736px) and (max-width:767px) { 

    .VTLogo { width: 736px; height: 68px; overflow: hidden;} 
    .companylogo { width: 81px; height: 83px }
    .ui-autocomplete-input { width: 200px !important; min-height: 10px !important; }
    .ui-autocomplete.ui-menu {width: 230px !important; max-height: 200px;}
    .ui-menu-item a, .ui-menu-item {width: 225px !important; line-height: 1 !important; }

    .widgimage  { width: 309px; height: 295px; }
    .widgvideo { width: 325px; height: 310px;   } 
    .widsmallvideo { width: 325px; height: 265px;}
    .ProductBannerAd { width: 309px; height: auto; }
    
    table.basic td, p, select, table.style1 td, table.style1 th {font-size: 11px;}
	caption, table.style1 caption, table.basic caption, .listoflinks, blockquote, blockquote p {font-size: 12px; }
	input, textarea, select {font-size: 12px; }
    input[type=submit], button { font-size: 14px; }
	
    h1 {font-size: 20px; }
    h2 {font-size: 15px; }
    form { clear:both;}

    table.basic	, table.style1 { width: 730px /*98%*/; }
	div#page_wrapper {
		width: 736px; 
	}
	.container {
		width:  auto;
		margin: 0 auto;
	}
	section { padding: 0px 3px 0px 3px; }
	
	.singlepage { width: auto !important; margin-top: 0px !important; padding-left: 0px !important;}
	
	header {
		margin-bottom: 0px;
	}
		header nav ul,
		header nav span.arrow { display: none !important; }
		header .select-menu   { display: block; }

	/* Contact */
	#frmAdd p.left,
	#frmAdd p.right {
		float: none;
		width: auto;
		margin-bottom: 20px;
	}
	#frmAdd div.row { margin-bottom: 0px; }
	#frmAdd textarea {
		width: 500px;
		margin-top: 10px;
	}

	footer { padding-top: 20px;	}
	
}

/* For iPads and tablets in Portrait with 768x1024 target  */
@media screen and (min-width:768px) and (max-width:811px)  { 

    .VTLogo { width: 768px; height: 71px; margin-top: 0px; display: block;}
    .companylogo { width: 90px; height: 92px }
    footer { width: 768px !important; }
    
    .widgimage  { width: 344px; height: 328px; }
    .widgvideo { width: 360px; height: 340px; }
    .widsmallvideo { width: 360px; height: 294px; }
    .ProductBannerAd { width: 344px; height: auto; }

    table.basic td, p, select, table.style1 td, table.style1 th {font-size: 11px;}
	caption, table.style1 caption, table.basic caption, .listoflinks, blockquote, blockquote p {font-size: 12px; }
	input, textarea, select {font-size: 12px; }
    input[type=submit], button { font-size: 14px; }

    h1 {font-size: 20px; }
    h2 {font-size: 15px; }
    
    table.basic	, table.style1 { width: 762px; }
	div#page_wrapper {
		width: 768px;
	}
	.container {
		width: auto;
		margin: 0 auto;
	}
    section { padding: 0px 3px 0px 3px; }
     
	header {
		margin-bottom: 0px;
	}

	footer { padding-top: 20px;	}
	
	.singlepage { width: 745px !important; margin-top: 70px !important; }
	
	  #frmAdd textarea {
		width: 650px;
		margin-top: 10px;
	}
}


/* For iPhone 11 in landscape 812x375  */
@media screen and (min-width:812px) and (max-width:999px)  { 

    .VTLogo { width: 821px; height: 75px; margin-top: 0px; display: block;}
    .companylogo { width: 97px; height: 99px }
    footer { width: 812px !important; }
    
    .widgimage  { width: 374px; height: 357px; }
    .widgvideo { width: 390px; height: 360px;  }
    .widsmallvideo { width: 386px; height: 315px; }
    .ProductBannerAd { width: 374px; height: auto; }

    table.basic td, p, select, table.style1 td, table.style1 th {font-size: 12px;}
	caption, table.style1 caption, table.basic caption, .listoflinks, blockquote, blockquote p {font-size: 13px; }
	input, textarea, select {font-size: 13px; }
    input[type=submit], button { font-size: 15px; }

    h1 {font-size: 21px; }
    h2 {font-size: 17px; }

    table.basic	, table.style1 { width: 806px /*100%*/; }
	div#page_wrapper {
		width: 812px;
	}

	.container {
		width: auto; 
		margin: 0 auto;
	}
    section { padding: 0px 3px 0px 3px; }
     
	header {
		margin-bottom: 0px;
	}
	
	footer { padding-top: 20px;	}
	
	.singlepage { width: 812px !important; margin-top: 70px !important; }
	
    #frmAdd textarea {
		width: 750px;
		margin-top: 10px;
	}
}