/*
#container { display:block; }

/*
@media only screen and (orientation:portrait){

  #container {

    height: 100vw;

    -webkit-transform: rotate(90deg);

    -moz-transform: rotate(90deg);

    -o-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    transform: rotate(90deg);

  }

}

@media only screen and (orientation:landscape){

  #container {

     -webkit-transform: rotate(0deg);

     -moz-transform: rotate(0deg);

     -o-transform: rotate(0deg);

     -ms-transform: rotate(0deg);

     transform: rotate(0deg);

  }

}
*/

/* See index.html DIV id=turn
/* (A) WRONG ORIENTATION - SHOW MESSAGE HIDE CONTENT 
@media only screen and (orientation:landscape) {
  #turn { display:none; }
  #acontainer { display:block; }
}
 
/* (B) CORRECT ORIENTATION - SHOW CONTENT HIDE MESSAGE

@media only screen and (orientation:portrait) {
  #turn { display:block; }
  #acontainer { display:none; }
}
*/


html {
    background: #000000;
    <!--background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);-->
    -webkit-font-smoothing: antialiased;
}

@viewport {
  width: device-width ;
  zoom: 1.0 ;
} 

.divCursor {
    cursor:hand;
}


body {
    background: #000000;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    /*color: #545454;*/
    color:#909090;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 1200px;
    padding: 2em 2em 4em;
    /*cursor: pointer;*/
}

.image-with-text {
  display: flex;
  flex-direction: column; /* Stacks children vertically */
  /* Optional: Center the content horizontally */
  align-items: center; 
  /* Optional: Add some spacing */
 // gap: 10px;
}

h1AB{
    font-weight: 200;
    line-height: 1.3em;
    font-size: 14px;
    color:yellow;
}

h2AB{
    font-weight: 600;
    line-height: 1.3em;
    font-size: 44px;
    color:orange;
}

h3AB{
    font-weight: 600;
    line-height: 1.3em;
    font-size: 20px;
    color:orange;
}

h4AB{
    font-weight: 400;
    line-height: 1.3em;
    font-size: 14px;
    color:orange;
}

h1{
    font-weight: 600;
    line-height: 1.3em;
    font-size: 18px;
    color:blue;
}

h2 {
	margin-top: 1.3em;
    color: #FF6600;
       padding: 0em 02em 0em;
}

h3 {
    font-weight: 300;
    /*line-height: 1.3em;*/
    color:#BD9A5A;
	}
	
h4{
    font-weight: 600;
    line-height: 1.3em;
    font-size: 18px;
    color:blue;
}

h5{
    font-weight: 600;
    line-height: 1.3em;
    font-size: 18px;
    color:blue;
}

h6 {
    font-weight: 600;
    line-height: 1.3em;
    font-size: 26px;
    color:red;
}


G7{
   font-weight: 600;
   line-height: 1.3em;
    color:#ff0000;
}

	

h8 {
    font-weight: 300;
    line-height: 1.3em;
    color:orange;
	}	

h9 {
    font-weight: 300;
    line-height: 1.3em;
    color:red;
	}	
	

h10 {
	font-size: 15px;
    margin-top: 1.3em;
    color: #F5B50F;
}

h11 {
	font-size: 25px;
    margin-top: 1.3em;
    color: #FF0000;
}

h12 {
	font-size: 25px;
    margin-top: 1.3em;
    color: white;
}

h13 {
	font-size: 20px;
    margin-top: 1.3em;
    color: white;
}

h14 {
	font-size: 20px;
    margin-top: 1.3em;
	color: #FF6600;
	}

z1 {
	font-size:72px;
    font-weight: 600;
    line-height: 1.3em;
    color:blue;
}

a {
    color: #0083e8;
}

b, strong {
    font-weight: 600;

}

samp {
    display: none;
}

/* Any image to fade in..... use the image tag without sizing, will occupy 95% of horizontal screen */
img {
    /*animation: colorize 15.5s cubic-bezier(0, 0, .78, .36) 1;
    background: transparent;*/
    border: 10px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    display: block;
    margin: 1.3em auto;
    max-width: 95%;
}


@keyframes colorize {
    0% {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    100% {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
    }
}


/* Size of top panel */

ul.a {list-style-type: circle;}    /*#335164*/
ul.b {list-style-type: square; background-color: #000000; padding:20px;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;background-color: #AAdd00;}


/*Header background*/
ul.z {
    list-style-type: none;
    margin: 0;
    padding: 1;
    overflow: hidden;
    background-color: #335164;
    /*cursor: pointer;*/
} 

/*
li{
    float: left;
    cursor: pointer;
}
*/
li s{
    float: left;
    /*cursor: pointer;*/
}


/* Header Button colours */
li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    /*cursor: pointer;*/
}

/* Colour behind each header button on rollover */
li a:hover, .dropdown:hover .dropbtn {
    background-color: #008080;    
    /*cursor: pointer;*/
}

li.dropdown {
    display: inline-block;
    /*cursor: pointer;*/
}

.dropdown-content {
    display: none;
    position: absolute;
    /*background-color: #335164;*/
    background-color:#335178;
    min-width: 160px;
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,5);
    /*cursor: pointer;*/
}

/* Colour of drop down text, size etc */
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    border: 1px outset #b37d00 ; *///22 March 2019
    text-decoration: none;
    display: block;
    text-align: left;
    /*cursor: pointer;*/
}

/* Colour behind the text of the drop downs */
/*.dropdown-content a:hover {background-color: #f1f1f1}*/
.dropdown-content a:hover {background-color: #000000}
.dropdown:hover .dropdown-content {
    display: block;
    /*cursor: pointer;*/
    
}

    #thumbs { padding-top: 10px; overflow: hidden;  float:right;}
    #thumbs img, #largeImage {
       border: 1px solid gray;
       margin-left:30px;
       padding: 4px;
       background-color: black;
       /*cursor: pointer;*/
    }
    
    /*position of thumbs along the bottom*/
    #thumbs img {
       float: left;
       margin-right: 6px;
    }
    
    /* Description text */
    .description {
       background: #Add8e6;
       color: black;
       position:absolute;
        top:430;
        left:400;
        width:350px;
        height:30px;
       bottom: 0;
       padding: 10px 20px;
       margin: 5px;
    }
    /*text position vertical*/
    .panel {  
        height:410px;
        position: relative;
         
    }

    /*.main1{position:relative;display:inline;background:#B5D3E7; height:170px;  margin:0px; width:1175px;}*/
.main1{
position:relative;
display:inline;
background:#B5D3E7;
height:150px;
width:100%;
/*padding:30px;*/
margin-top:0px;
margin-left:60px;
margin-right:0px;
margin-bottom:0px; 
border: 61px solid 000000; 
/*cursor: pointer;*/
}


.main2{
display:inline;
text-align:right;
float:left;
color:white;
background:#B5D3E7;
border-bottom:5px;
margin-top:0px;
margin-bottom:1px;
margin-right:1px;
margin-left:1px;
height:100px;
width:100%;
/*cursor: pointer;*/
}

.main3{
/*position:relative;
display:inline;*/
background:#B5D3E7;
height:150px;
width:100%;
/*padding:30px;*/
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px; 
border: 0px solid #000000; 
/*cursor: pointer;*/
}

.container {
margin-top:25px;
margin-left:0%;
margin-right:auto;
margin-bottom:2px;
border: 2px solid #fff000;
box-shadow: 10px 10px #999; 
/*cursor: pointer;*/
} 


.container1 {
margin-top:25px;
margin-left:0%;
margin-right:auto;
margin-bottom:2px;
width:800px;
height:400px;
position:left;
border: 2px solid #fff000;
box-shadow: 10px 10px #999; 
/*cursor: pointer;*/
} 


iframe {
  margin: auto;
  width: 800px;
  height:600px;
  border: 3px solid #73AD21;
  padding: 10px;
  display: absolute;
}

pre {
    display: block;
    font-family: monospace;
    font-weight: 400;
	line-height: 25px;    
    white-space: pre;
    margin: 1em 50;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
	/*cursor: pointer;    */
}    

.bb{
    display: block;
    font-family: monospace;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;     
    color:white;   
	/*cursor: pointer;    */
}

 /* Buttons */
 .link{
				/*border:1; */
				width:250px;
				height:65px;
				background-color:#335164;
				color:lime;
				font-weight: bold;
				border: 10px outset #808080;  
				border-radius: 5px;
				/*cursor: pointer;*/
  }
  
  
  vs2 {
	color:#333999;
	font-weight:600;
	font-size:22px;
	line-height:1.3em;
	color:blue;
	/*cursor: pointer;	*/
}
  
.allVids{
/*position:relative;
display:inline;*/
/*background:#B5D3E7;*/
height450px;
width:50%;
/*padding:30px;*/
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px; 
border: 0px solid #000000; 
}

.inline-block {
   display: inline-block;
}

.img_holder img
    {
     display:inline;;
    }
 
/*    
.button_class {
    width:350px;
    height:200px;
    color:#fff;
    text-align:center;
    font-weight:600;
	font-size:22px;
  /*  -webkit-border-radius:3px;*/
  /*  -moz-border-radius:3px;*/
    /*border-radius:3px;*/
  /*  background:blue;*/
     
/*}*/


.button {
  /*border-radius:5px;*/
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  background-color: #4CAF50; /* Green */
  border-radius: 25px;
  /*border: none;*/
  /*background-image: images/paypal.jpg);*/
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 36px;
}

.button1 {
  border-radius:5px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  background-color: #4C0F00; /* ....... */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.button2 {
  border-radius:5px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  background-color: #4CAF50; /* ....... */
  border: 3;
  color: white;
  height:60px;
  width:300px;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}


.buttonReview {
  border-radius:15px;
  background-color: orange; /* ....... */
  color: black;
  height:40px;
  width:300px;
  font-weight: bold;
  font-size: 14px;
}

.button3 {
  border-radius:15px;
  background-color: teal; /* ....... */
  color: black;
  height:40px;
  width:300px;
  font-weight: bold;
  font-size: 14px;
}

.button4 {
  border-radius:15px;
  background-color: teal; /* ....... */
  color: black;
  height:40px;
  width:100px;
  font-weight: bold;
  font-size: 14px;
  
}


/*.input1[type=text] {*/
.input1{
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #33ffd1;
  color: black;
}

.textarea {
  width: 80%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #33fff6; /*#f8f8f8;*/
  font-size: 16px;
  resize: none;
}

.link_class {
    display: block;
}

/***** Button, Hover, Click ****/
.buttonZ {
  padding: 5px 25px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #04AA6D;
  border: none;
  border-radius: 5px;
  box-shadow: 0 5px #999;
}

.buttonZ:hover {background-color: #3e8e41}

.buttonZ:active {
  background-color: #3e8e41;
  box-shadow: 0 2px #666;
  transform: translateY(4px);
}


/********************************/
/* Custome Alert box www/developphp.com/video/JavaScript/Custom-Alert-Box/Programming-Tutorial */

#dialogoverlay{
	display: none;
	opacity: .8;
	position: fixed;
	top: 0px;
	left: 0px;
	background: #FFF;
	width: 100%;
	z-index: 10;
}
#dialogbox{
	display: none;
	position: fixed;
	background: #000;
	border-radius:7px; 
	width:550px;
	z-index: 10;
}
#dialogbox > div{ background:#FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; }
#dialogbox > div > #dialogboxbody{ background:#333; padding:20px; color:#FFF; }
#dialogbox > div > #dialogboxfoot{ background: #666; padding:10px; text-align:right; }

/************************************/
/* Table Padding */
th, td {
  /*padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;*/
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
 
td1{
	color: green;
};


*{
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;

}