﻿@charset "UTF-8";



            /* Video Intro Page*/
            .fullscreen-bg {
              position: fixed;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              overflow: hidden;
              z-index: -100;
			  cursor:pointer;
            }

            .fullscreen-bg__video {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }



			/* control intro Video */
			.playVideo {
				display: inline-block;
				height: 80px;
				width: 80px;
				position: fixed;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
				overflow: hidden;
				text-indent: 100%;
				white-space: nowrap;
				background: rgba(62, 140, 198, 1) url(../images/stopVideo.svg) no-repeat center 50%;
				opacity: 0.8;
				-webkit-transition: opacity .3s 0s, visibility 0s .3s;
				-moz-transition: opacity .3s 0s, visibility 0s .3s;
				transition: opacity .3s 0s, visibility 0s .3s;
				cursor:pointer;
			}
			.stopVideo {
				display: inline-block;
				height: 80px;
				width: 80px;
				position: fixed;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
				overflow: hidden;
				text-indent: 100%;
				white-space: nowrap;
				background: rgba(62, 140, 198, 1) url(../images/playVideo.svg) no-repeat center 50%;
				opacity: 0.8;
				-webkit-transition: opacity .3s 0s, visibility 0s .3s;
				-moz-transition: opacity .3s 0s, visibility 0s .3s;
				transition: opacity .3s 0s, visibility 0s .3s;
			}



            @media (min-aspect-ratio: 16/9) {
              .fullscreen-bg__video {
/*                width: 100%;
	            height:auto;*/
              }
            }

            @media (max-aspect-ratio: 16/9) {
              .fullscreen-bg__video {
/*                width: 100%;
	            height:auto;*/
              }
            }

/*            @media (max-width: 767px) {
			.fullscreen-bg {
				background: url('../images/videoImg_default.jpg') center center / cover no-repeat;
			}
			
			.fullscreen-bg__video {
				display: none;
              }
            }*/

            @media all and (max-width: 960px) and (orientation:portrait) {

              .fullscreen-bg {
                background: url('../images/icon_orientation.gif') center center / contain no-repeat;
				cursor:default;
              }
			  #divPause1 {display:none;}
              .fullscreen-bg__video {
                display: none;
              }

            }

			/* Jump Intro Video */
			
			.jumpVideo {
			  display: inline-block;
			  height: 50px;
			  width: 50px;
			  position: fixed;
			  bottom: 40px;
			  right: 10px;
			  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
			  overflow: hidden;
			  text-indent: 100%;
			  white-space: nowrap;
			  background: rgba(62, 140, 198, 1) url(../images/skipVideo.svg) no-repeat center 50%;
			  opacity: 0.8;
			  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
			  -moz-transition: opacity .3s 0s, visibility 0s .3s;
			  transition: opacity .3s 0s, visibility 0s .3s;
			}
			.jumpVideo.cd-is-visible, .jumpVideo.cd-fade-out, .no-touch .jumpVideo:hover {
			  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
			  -moz-transition: opacity .3s 0s, visibility 0s 0s;
			  transition: opacity .3s 0s, visibility 0s 0s;
			}
			.jumpVideo.cd-is-visible {
			  visibility: visible;
			  opacity: 1;
			}
			.jumpVideo.cd-fade-out {
			  opacity: .5;
			}
			.no-touch .jumpVideo:hover {
			  background-color: #3e8cc6;
			  opacity: 1;
			}




			/* Device Exceptions */
			@media screen and (min-width: 1261px) {
			  .jumpVideo {
				height: 60px;
				width: 60px;
				right: 30px;
				bottom: 30px;
			  }

			}
			
			@media screen and (min-width: 961px) and (max-width: 1260px) {
			  .jumpVideo {
				height: 50px;
				width: 50px;
				right: 10px;
				bottom: 30px;
			  }
			}
			
			@media screen and (min-width: 641px) and (max-width: 960px) {
			  .jumpVideo {
				height: 50px;
				width: 50px;
				right: 10px;
				bottom: 20px;
			  }
			  .playVideo {
				height: 60px;
				width: 60px;
			  }
			  .stopVideo {
				height: 60px;
				width: 60px;
			  }			  
			}
			
			@media screen and (min-width: 321px) and (max-width: 640px) {
				.jumpVideo {
					height: 50px;
					width: 50px;
					right: 10px;
					bottom: 20px;
				}
				.playVideo {
					height: 50px;
					width: 50px;
				}
				.stopVideo {
					height: 60px;
					width: 60px;
				}				
			}
			
			@media screen and (max-width: 320px) {
				.jumpVideo {
					height: 40px;
					width: 40px;
					right: 10px;
					bottom: 20px;
				}
				.playVideo {
					height: 40px;
					width: 40px;
				}
				.stopVideo {
					height: 40px;
					width: 40px;
			  }				
			}


