/* CSS Document */

html { height: 100%; } 
body { height: 100%; }

@font-face { 
	font-family: univers-bold;
	src: url(https://corporate.westernunion.com/assets/fonts/univers/univers-bold.eot);
	src: url(https://corporate.westernunion.com/assets/fonts/univers/univers-bold.eot?#iefix)
		format("embedded-opentype"), url(https://corporate.westernunion.com/assets/fonts/univers/univers-bold.woff2)
		format("woff2"), url(https://corporate.westernunion.com/assets/fonts/univers/univers-bold.woff)
		format("woff"), url(https://corporate.westernunion.com/assets/fonts/univers/univers-bold.ttf)
		format("truetype"), url(https://corporate.westernunion.com/assets/fonts/univers/univers-bold.svg#univers)
		format("svg");
	font-style: normal;
	font-weight: 900
}
@font-face { 
	font-family: univers;
	src: url(https://corporate.westernunion.com/assets/fonts/univers/univers.eot);
	src: url(https://corporate.westernunion.com/assets/fonts/univers/univers.eot?#iefix)
		format("embedded-opentype"), url(https://corporate.westernunion.com/assets/fonts/univers/univers.woff2)
		format("woff2"), url(https://corporate.westernunion.com/assets/fonts/univers/univers.woff)
		format("woff"), url(https://corporate.westernunion.com/assets/fonts/univers/universd.ttf)
		format("truetype"), url(https://corporate.westernunion.com/assets/fonts/univers/univers.svg#univers)
		format("svg");
	font-style: normal;
	font-weight: 900
}
@font-face {
	font-family: western-union-corporate;
	src: url(https://corporate.westernunion.com/assets/fonts/icons/western-union-corporate.eot);
	src: url(https://corporate.westernunion.com/assets/fonts/icons/western-union-corporate.eot?#iefix)
	format("embedded-opentype"),
	url(https://corporate.westernunion.com/assets/fonts/icons/western-union-corporate.woff) format("woff"),
	url(https://corporate.westernunion.com/assets/fonts/icons/western-union-corporate.ttf) format("truetype"),
	url(https://corporate.westernunion.com/assets/fonts/icons/western-union-corporate.svg#western-union-corporate)
	format("svg");
	font-style: normal;
	font-weight: 400
}
.grad1 { background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0)); height: 100px; width: 100%; }
.w3-container { padding: 10px 10%; }
.uppercase { text-transform: uppercase; } 
.gold-box { border: 3px solid #fd0; padding: 10px; font-weight: 700; text-transform: uppercase; font-size: 14px; background-color: transparent; border-radius: 0; cursor: pointer; }
.gold-box a { text-decoration: none; }
.font-white { color: white; }
.gold-box:hover { background-color: #fd0; color: black; }
.icon { margin: 0; }
.icon-wu { margin: 25px 0 -10px 0; }
.icon-wu-mobile { margin: 15px 0 0 15px; }
.nowrap { white-space: nowrap; }

.w3-bar .w3-bar-item { padding: 0 8px 25px;  }
.bar-text { font-size: 12px; text-decoration: none; position: relative; }
.yellow-bottom-animation a:before {
	position: absolute;
	bottom: -20px;
	left: 51%;
	height: 3px;
	width: 0;
	background: #fedb31;
	content: '';
	display: block;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-transition: width .15s ease-out;
	transition: width .15s ease-out
}
.yellow-bottom-animation .active:before,.yellow-bottom-animation a:hover:before {
	width: 102%
}

#my_popup, #video_popup, #video_popup_mobile { position: relative; width: 75%; height: 0; padding-bottom: 45%; }
@media screen and (max-width: 661px) { #my_popup, #video_popup, #video_popup_mobile { width: 90%; } }
#first-div-video, #target_video, #target_video_mobile { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; 	text-rendering: optimizeLegibility; }

.video-Carousel .slick-next, .video-Carousel-mobile .slick-next, .video-Carousel .slick-prev, .video-Carousel-mobile .slick-prev, img.slick-prev, img.slick-next { height: 55px; }

.w3-display-topmiddle { width: 80% !important; }


/* Add a black background color to the top navigation */ 
.topnav { overflow: hidden; }
/* Style the links inside the navigation bar */ 
.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }
.topnav anav-right { float: right; }
/* Change the color of links on hover */ 
.topnav a:hover { color: black; }
/* Hide the link that should open and close the topnav on small screens */ 
.topnav .icon { display: none; }

/* When the screen is less than 662 pixels wide, hide all links, except for the first one ("Home"). Show the link that
contains should open and close the topnav (.icon) */ 
@media screen and (max-width: 1023px) {
	.topnav a:not(:first-child) {display: none;}  
	.topnav a.icon { float: right; display: block; } 
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the
topnav look good on small screens (display the links vertically instead of horizontally) */ 
@media screen and (max-width: 1023px) {   
	.topnav.responsive {position: relative;}
	.topnav.responsive a.icon { position: absolute; right: 0; top: 0; }
	.topnav.responsive a { float: none; display: block; text-align: left; } 
}

/* Hamburger menu */ 
.container {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ; }

h1 { font: 700 3.5rem univers-bold, Helvetica, arial, sans-serif; letter-spacing: 1.25px; line-height: 50px; }
.dark-grey { color: #545b5e; }
h2 { font: 100 1.75rem Helvetica, arial, sans-serif; }
@media screen and (max-width: 770px) {  
	h1 { font: 900 2.75rem/38px univers-bold, Helvetica, arial, sans-serif; letter-spacing:-.025em }
	h2 { font: 100 1.25rem Helvetica, sans-serif; margin-bottom: -10px; }
	 }

.section-align { position: absolute; top:0; bottom:0; left:0; right:0; margin: 0 8%; }
#section-1 hr { padding-top: 25px; }
#section-1-mobile { padding: 0; }
#section-1-mobile h1 { margin: 0 0 20px; }
#section-1-mobile h2 { margin-bottom: 25px; font-weight: 400; }

@media screen and (max-width: 770px) {  
	#section-1 h1 { margin-top: -25px; }
	 }
@media screen and (max-width: 350px) {  
	#section-1-mobile h1 { font-size: 1.75rem; margin-top: -15px; line-height: 30px; }
	 }
	 
/* @media screen and (min-width: 900px) { .bg-raise { position: relative; top: -120px; } } */


a p { color: black; text-decoration: none; } 
a:hover h2 { text-decoration: underline; }

#section-2 h1 { margin: 30px 0; }
#section-2-mobile h1 { margin: 40px 0 20px; }
#section-2-mobile img { margin: 0 20px; }

#section-3-mobile h2 { margin: 70px 0 40px; }
#section-3 h4 { margin-bottom: 60px; }

/* @media only screen and (max-width: 768px) {
    #section-3 { background: url(../assets/768/3-Locations-Background-OtherLocations.png) no-repeat; background-size: 100%; }
} */

#section-4 h1 { margin: 50px 0; }
#section-4-mobile h1 { margin: 40px 0 30px; }
@media screen and (max-width: 770px) { 
	#section-4 h1 { margin: 30px 0 20px; }
	#section-4 p { font-size: 16px; }
	}

#section-5 h1 { margin: 50px 0 0; }
#section-5 h3 { margin: 15px 0; font-size: 15px; }

#section-5-mobile h1 { margin: 40px 0 20px; }
#section-5-mobile h3 { margin: 0; }

#section-6 { margin: 20px 8%; }
#section-6 h1 { margin: 40px 0 30px; }
#section-6 p { margin: 0 10% 30px; font-size: 20px; }
#section-6 button { margin-left: 10%; }

#section-6-mobile h1 { margin: 40px 0 0; line-height: 40px; }


#section-7 h1 { margin: 0; padding: 30px 0 50px; }
#section-7 h3 { margin: 60px 0 70px; }
#section-7-mobile h1 { margin: 0; padding: 40px 0 25px; }
#section-7-mobile h3 { margin: 30px 0; }
.section-7-bg { background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #62e897, #297fa6); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #62e897, #297fa6); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #62e897, #297fa6); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #62e897, #297fa6); }  /* Standard */

.w3-container div {  }

footer { background-color: #65646a; color: white; font: 400 12px/20px Helvetica, Arial, sans-serif; }
@media screen and (min-width: 662px) { footer { padding: 20px 0 30px; } }
footer .w3-container { padding: 30px 0 0 15px; }
footer p { margin: 0 0 10px; }
.text-wu-yellow { color: #fd0; font-size: 12px; font-weight: 700; -webkit-font-smoothing: auto; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .icon { margin: 0 4px 0 0; }
.top-pad { position: relative; top: 4px; }
.legal { padding: 10px; }

#log-out { height: 40px; position: fixed; bottom:0%; width:100%; background-color: #06284b; opacity: .8; padding-top: 10px; text-align: center; }