/*Empty CSS file for your own CSS*/

/*

#.max{width:640px;height:auto;}

#.min{width:100%;height:auto;}

*/



/* img full screen*/

body {

    margin: 0;

    font-family: 'Lato', sans-serif;

}



.overlay {

    height: 0%;

    width: 100%;

    position: fixed;

    z-index: 1;

    top: 0;

    left: 0;

    background-color: rgb(0,0,0);

    background-color: rgba(0,0,0, 0.9);

    overflow-y: hidden;

    transition: 0.5s;

}



.overlay-content {

    position: relative;

    top: 0%;

    width: 98%;

    text-align: center;

    margin-top: 0px;

}



.overlay a {

    padding: 8px;

    text-decoration: none;

    font-size: 36px;

    color: #818181;

    display: block;

    transition: 0.3s;

}



.overlay a:hover, .overlay a:focus {

    color: #f1f1f1;

}



.overlay .closebtn {

    position: absolute;

    top: 20px;

    right: 45px;

    font-size: 60px;

}



@media screen and (max-height: 450px) {

  .overlay {overflow-y: auto;}

  .overlay a {font-size: 20px}

  .overlay .closebtn {

    font-size: 40px;

    top: 15px;

    right: 35px;

  }

}



/* bootstrap iframe full height */

html,body,.container-fluid,.row,.col-sm-5 {

   height:97%;

}

.container { 
    width: 100%;
    overflow: hidden;
}

.ImgPosition{
    position: relative;
}


/* hidden img for small screen */

@media screen and (max-width: 450px) {

  .no-display {display: none;}

}



/* show img 100% width for small screen */



#imageresource {
	width: 100%;
	display: block;
	margin: auto;
}

@media only screen and (max-width: 640px) {
#imageresource {
	width: 100%;
  }

}

#imageresource2 { width: 100%;^M  display: block;       margin: auto;}@media only screen and (max-width: 640px) {#imageresource2 {     width: 100%;  }}/* adjust button space for normal screen */
.col-xs-2{
  width: 14%;
  padding: 0px 5px 0px 5px;
}

/* adjust button space for small screen */

@media screen and (max-width: 450px) {
  .col-xs-2{ 
    width: 14%;
    padding: 0px 1px 0px 1px !important; margin: 0px !important; }
}

/* btn plus/minus style and color */

.icons-1{
  background: #336699;
  width: 100%;
  height: 35px;

  border: none;

  border-radius: 15px;

  display: flex;

  justify-content: center;

  align-items: center;

}



/* btn direction arrow up/down style and color */

.icons-2{

  background: #88b999;

  width: 100%;

  height: 35px;

  border: none;

  border-radius: 15px;

  display: flex;

  justify-content: center;

  align-items: center;

}



/* btn direction arrow left/right style and color */

.icons-3{

  background: #ffc408;

  width: 100%;

  height: 35px;

  border: none;

  border-radius: 15px;

  display: flex;

  justify-content: center;

  align-items: center;

}



/* Icons */

/* btn plus/minus hover style and color */

i.material-icons{

  color: #fff;

}



/* Solid-Triangle-shaped up/down Arrow style and color */

.top-triangle{

  border-style: solid;

  border-width: 11px 0 11px 20px;

  border-color: transparent transparent transparent #FFF;

  margin-right: 0px;

  transform: rotate(270deg);

}

.bottom-triangle{

  border-style: solid;

  border-width: 11px 0 11px 20px;

  border-color: transparent transparent transparent #FFF ;

  margin-top: 3px;

  transform: rotate(90deg);

}

/* Solid-Triangle-shaped left/right Arrow style and color */

.left-triangle{

  border-style: solid;

  border-width: 11px 0 11px 20px;

  border-color: transparent transparent transparent #FFF;

  transform: rotate(180deg);

  margin-right: 5px;

}

.right-triangle{

  border-style: solid;

  border-width: 11px 0 11px 20px;

  border-color: transparent transparent transparent #FFF ;

  margin-right: -5px;

}



/* btn hover style*/

.material-button:hover{

  transform: scale(1.01);

  transition-duration: .4s;

  box-shadow: 10px 0 20px rgba(0, 0, 0, 0.19), 6px 0 6px rgba(0, 0, 0, 0.23);

}



/* btn img bootstrap background image center */

.btn-ptz

{

	width: 100%; 

	height: 100%; 

	background-repeat: no-repeat; 

	background-size: contain;

	background-position: center center;

}



/* The video will be resized to always take up all the available space */

video {

    width: 100%;

    height: auto;

}



/* hide timeline of the video tag in HTML5. The solution was a suggestion for webkit browsers */

video::-webkit-media-controls-timeline {

    display: none;

}