body, html {
height: 100%;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
line-height: 1.6;
}

a:link {
  text-decoration: none;
}

h2 {
  font-family: Merriweather, serif;
  font-size: 36px;
}

/* Full height image header */
.bgimg-1 {
background-position: center;
background-attachment:fixed;
background-size: cover;
/*  background-image: url("Medtronic.png");*/
min-height: 100%;
}

.xVideo {
object-fit: cover;
/* width: 100vw;
height: 80vh;
position: fixed;
*/
position:absolute;
width: 100%;
height: 100%; 
top: 0;
left: 0;
}

.bg-01518D{	background-color:#01518D;}
.bg-E1F3FD{	background-color:#E1F3FD;}
.bg-E3F2E7{	background-color:#E3F2E7;}
.txt-01518D{color:#01518D;}
	
.xTxt1 {
	
/*color:#FF0;*/
font-weight: bold;
}

.xTxt2 {
/*color:#FFF;*/
line-height:1;
font-weight: bold;
/*text-shadow: 0 0 4px #000000;*/
}

.xTxt3 {
/*color:#FFF;	*/
line-height:1.2;
padding-top:20px;
}

.container {
position:absolute;
margin-top:90px;
overflow: hidden;
width: 100%;
height: 100%;
padding-top: 56.25%;
/* 
position: relative;
16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
margin-right: auto;
margin-left: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 90%;
height:80%;
border: none;
/* 
width: 90%;
height:80%;

margin-top:10%;
display: block;
 max-width: 640px;*/
}




/* [1] The container */
.w3-hover-zoom {
/* height: 300px; /* [1.1] Set it as per your need */
overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}
/* [2] Transition property for smooth transformation of images */
.w3-hover-zoom img {
/* transform-origin: 0 0; */
transition: transform .5s ease;
}
/* [3] Finally, transforming the image when container gets hovered */
.w3-hover-zoom:hover img {
transform: scale(1.2);
}

.w3-hover-zoom-small { overflow: hidden; }
.w3-hover-zoom-small img { transition: transform .5s ease; }
.w3-hover-zoom-small:hover img { transform: scale(1.075); }
.w3-animate-move { overflow: hidden; }
.w3-animate-move { transition: transform 0.5s ease; }
.w3-animate-move:hover { transform: translate(10px, 0); }


#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: green;
color: white;
cursor: pointer;
padding: 10px;
border-radius: 4px;
opacity: 0.8;
}

#myBtn:hover {
background-color: #555;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.xTxt1 {font-size:7vw;}
.xTxt2 {font-size:12vw;}
.xTxt3 {font-size:4vw;}
.xTxt4 {
	font-size:6vw;
	margin-bottom:15px
}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.xTxt1 {font-size:7vw;}
.xTxt2 {font-size:8vw;}
.xTxt3 {font-size:3vw;}
.xTxt4 {font-size:3vw;}	
	}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.xTxt1 {font-size:6vw;}
.xTxt2 {font-size:8vw;}
.xTxt3 {font-size:3vw;}
.xTxt4 {font-size:3vw;}
	

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.xTxt1 {font-size:3vw;}
.xTxt2 {font-size:4vw;}
.xTxt3 {font-size:1.5vw;}
.xTxt4 {font-size:1.5vw;}
	
	}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.xTxt1 {font-size:3vw;}
.xTxt2 {font-size:4vw;}
.xTxt3 {font-size:1.5vw;}
.xTxt4 {font-size:1.5vw;}
	}
	
	