/************************
FONTS
*************************/
@font-face { 
	font-family: 'ContentText';
	font-style: normal;
	font-weight: 400; 
	src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url('/fonts/robo-condensed.woff') 
		format('woff'); } 

@font-face { 
	font-family: 'DisplayText';
	font-style: normal;
	font-weight: 400; 
	src: url('/fonts/eras_demi_itc.woff') 
		format('woff'); 
}

/************************
BASIC STYLES
*************************/
body {
	margin: 0;
	padding: 0;
	background-color : #9f9f9f;
	font-family: 'ContentText', Helvetica, Sans-serif;
	color: #6e6e6e;	
}

h1, h2, h3, h4 {
	margin: 0px;
}

h1 {
	font-size: 3em;
	font-weight: bold;
	color: #003D79;
}

h2 {
	font-size: 1.8em;
	font-weight: bold;
	color: #003D79;
}

h3 {
	font-size: 1.2em;
	font-weight: bold;
	color: #003D79;
}

h4 {
	font-weight: bold;
	color: #003D79;
}

a  {	 
	text-decoration: none;
	font-weight : normal;	
	color : #019DCE;
}

a:hover {
	text-decoration: underline;
	font-weight: normal;
	color : #019DCE;
}

a.clean:hover {
	text-decoration: none;
}

ul {
	list-style-type: circle;
	/*margin: 0 0 0 20px;*/
}

.yowText {
	color : #003D79;
}

.bodyText {
	color : #6e6e6e;
}

.highlight {
	color : #ff8208;
}

.link {
	color : #019DCE;
}

.black {
	color : #000000;
}

.hover {
	cursor: pointer;
}

.error {
	color: red;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/************************
UTILITIES
*************************/

.button {
	background-color: #003D79;
	
	font-size: 1.3em;
	font-weight: none;
	color: #FFF;
	
	border: 1px solid #FFF;
	border-radius: 5px;
	box-shadow: 1px 1px 1px  rgba(0, 0, 0, 0.60);	
	
	padding: 5px 10px 5px 10px;
	text-align: center;		
}

.button:hover {
	color: #FF8208;
	cursor: pointer;
	text-decoration: none;
}


.orange_button {
	 background-color: #FF8208;
}

.orange_button:hover {
	color: #003D79;
}


.linkBtn {
	border: none;
	background: none;
	color: #019DCE;
}

.linkBtn:hover {
	cursor: pointer;
	text-decoration: underline;
}

.left {
	float: left;
}

.right {
	float: right;
}

div.clear {
	clear: both;
}

.posRelative {
	position: relative;
}

div.mobileBreak {
	display: none;
}

.HeaderImg {
	background-repeat: no-repeat;
	width: 100%;
	height: 370px;
}

.image-sales-text {
	position: absolute;
	top: 180px;
	left: 510px;
	background-color: #D2E0FF ;
	padding: 20px;
	
	opacity: 1;
	border: 1px solid #31639C;
	box-shadow: 10px 10px 5px  rgba(0, 0, 0, 0.60);

	width: 390px;
		
	color: #003D79;
	text-align: center;
}

.image-sales-text:hover {
	background-color: #C4D6FF;
	border: 1px solid #019DCE;
}

.image-sales-text h1 {
	color: #FF8208;
	font-size: 25px;
	
}
.image-sales-text p {
	color: #003D79;
	font-size: 16px;
	
}
.image-sales-text span.link:hover {
	/*color: white;*/
	text-decoration: underline;
}

.NoteBox {
	background-color: #E2E2E2;
	padding: 10px 20px 10px 20px;
}

.box-border-info {
	border: 2px solid #003D79;
}
.box-outline-alert {
	outline: 2px solid #B40404;
	outline-offset: -5px;
}

.halfseven {
	float: left;
	width: 670px;
	padding: 10px 20px 10px 10px;
}

.halfthree {
    float: right;
    width: 260px;
}

.halfleft {
	float: left;
	width: 470px;
}

.halfright {
	float: right;
    width: 470px;
}

.halfsix {
	float: left;
	width: 564px;
}

.halffour {
	float: right;
	width: 376px;
	
}

.halfsix-right {
	float: right;
	width: 564px;
	
}

.halffour-left {
	float: left;
	width: 376px;
	
}

table.report {
	
}
table.report tr {
	background-color: #D2E0FF;
}
table.report tr:nth-child(even) {
    background-color: #C4D6FF;
}

table.report tr.rowHighlight {
	background-color: #f6b97e;
}
table.report tr.rowHighlight:nth-child(even) {
    background-color: #f6cca4;
}

table.report th {
	border: 1px solid #003D79;
	padding: 5px 10px;
	background-color: #003D79;
	color: #FFF;
		
}
table.report th.header {
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.report th.headerSortDown {
	background-color: #31639C;
	background-image: url("/images/tools/desc.png");
}
table.report th.headerSortUp {
	background-color: #31639C;
	background-image: url("/images/tools/asc.png");
}
table.report td {
	border: 1px solid #003D79;
	padding: 5px 5px;	
	font-size: 14px;	
}

table.form td {
	text-align: left;
	padding: 5px 10px;
}


table.form td:first-child {
	text-align: right;
}



/************************
FORM FIELDS
*************************/

/* FORM FIELDS: */

/* textbox */
/* textarea */
/* dropdown */
/* checkbox */
/* radio */
/* submit */

#username, #password, #email  {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
	-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
	-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
	-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
	box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	background: #f7f7f7 url('/images/layout/username_password_input.png') no-repeat;
	border: 1px solid #c8c8c8;
	color: #777;
	font: 13px Helvetica, Arial, sans-serif;
	margin: 0 0 10px 0;
	padding: 10px 10px 10px 40px;
	width: 80%;
}
#username:focus, #password:focus, #email:focus  {
	-webkit-box-shadow: 0 0 2px #ed1c24 inset;
	-moz-box-shadow: 0 0 2px #ed1c24 inset;
	-ms-box-shadow: 0 0 2px #ed1c24 inset;
	-o-box-shadow: 0 0 2px #ed1c24 inset;
	box-shadow: 0 0 2px #019DCE inset;
	background-color: #fff;
	border: 1px solid #019DCE;
	outline: none;
}
#username { background-position: 10px 10px !important }
#password { background-position: 10px -53px !important }
#email { background-position: 10px -96px !important }

select {
    border: 1px solid #003D79;
    font-family: 'ContentText', Helvetica, Sans-serif;
    color: #6e6e6e;
}

textarea {
    border: 1px solid #003D79;
    outline: none;
    overflow: auto;
    resize: none;
    padding: 5px;
    font-size: 15px;
    font-family: 'ContentText', Helvetica, Sans-serif;
    color: #6e6e6e;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    box-shadow: 0 0 5px rgba(81, 203, 238, 0);
    -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
    -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
}



/************************
MAIN LAYOUT STYLES
*************************/

div.layout_background {
	/*background-image:url('/images/canada-map.png');*/
	margin: 0;
	padding: 0;
	position: fixed; 
	top: 0px; 
	Left: 0px; 
	z-index: -999999; 
	width: 100%; 
	
	text-align: center;
}

@media print
{    
    div.layout_background
	{
        display: none !important;
    }
}

/** MAIN HEADER **/
div.layout_header {
	background-color: #f9f9f9;
	background-repeat:no-repeat;
	position: relative;	
}

div.layout_header div.layout_header_image_E {
	width: 600px;
	height: 67px;
	background-image: url('/images/layout/YOW-Header-E.png');	
}

div.layout_header div.layout_header_image_F {
	width: 600px;
	height: 67px;
	background-image: url('/images/layout/YOW-Header-F.png');	
}

div.layout_header img {
	position: absolute;
}

div.layout_header .langChange {
	position: absolute;
	top: -10px;
	right: 140px;
}

div.layout_header .langChange#langChangeF {
	right: 180px;
}


div.layout_header .layout_login_button {
	position: absolute;
	top: 10px;
    right: 10px;
	background-color: #003D79;
    background: radial-gradient( 15px -9px, circle, white 8%, red 26px );
    
    border: 2px solid white;
    border-radius: 12px;
    box-shadow: 1px 1px 1px  rgba(0, 0, 0, 0.60);
    color: #ff8208;
	font-family: 'DisplayText';
	font-size: 18px;
	font-weight: bold;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    
    padding: 10px 30px;
    text-align: center;
}

div.layout_header .layout_login_button:hover {
	color: #c4d6ff;
}

div.layout_header .socialIcons {
	right: 140px;
	top: 30px;
	position: absolute;
}

div.layout_header .socialIcons a img {
	position: inherit;
	padding: 0px 2px;
}

div.layout_header .socialIcons#socialLangF {
	right: 180px;
	top: 30px;
	position: absolute;
}

/** MAIN NAV **/
div.layout_nav_bar {
	background-color: #1c609f;
	background-image: url('/images/layout/menubg.jpg');
	background-repeat: repeat-x;	
}

div.layout_phonenumber {
	float: left;
	color: white;    
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    
	font-size: 20px;
    
	font-family: 'DisplayText';
	
	display: inline;
	padding: 5px 20px;
}


div.layout_nav ul {
	padding: 0px;
	margin: 0px;
	float: right;
	display: inline;
}



div.layout_nav ul li {
	float: right;
	display: inline;
	padding: 5px 0px 10px 0px;
}

div.layout_nav ul li a {
	color: white;
    text-decoration: none;
    font-weight: bold;
    border-left: 2px solid #01284f;
    padding: 8px 10px 5px 10px;
}

div.layout_nav ul li a:hover {
	color: #ff8208;
	text-decoration: none;
	border-bottom: solid 5px #ff8208;
}

div.layout_nav ul li:hover {
		
}

div.layout_nav ul li#cart {
	padding: 5px 0px 2px 0px;
}

div.layout_nav ul li#cart a {
	padding: 10px 10px 0px 10px;
}

/** MAIN PAGE/CONTENT **/
div.layout_page {
	width: 960px;
    margin: 0px auto;
    background-color:white;
}

div.padded_content, div.content {
	padding: 10px;
}

/** PRE-FOOTER **/
div.layout_pre_footer {
	background-color: #e2e2e2;
	padding: 2%;
}

.layout_pre_footer div.pre_footer_image {
	float: left;
	width: 50%;
	height: 316px;
	background-image: url('/images/layout/laptop.png');
}
.layout_pre_footer div.pre_footer_heading {
	float: right;
	width: 48%;
	padding-left: 1%;
	padding-top: 4%;
}
.layout_pre_footer h2, .layout_pre_footer h4  {
	padding: 0px;
	margin: 0px;
}
.layout_pre_footer h4 {
	font-size: 1.3em;
}
.layout_pre_footer div.pre_footer_content {
	float: right;
	width: 48%;	
	padding-left: 1%;
}

/** MAIN FOOTER **/
div.layout_footer {
	background-color: #535353;
	padding: 1%;
	position: relative;	
	
}

.layout_footer div.footer_middle {
	position: relative;
	top: 0;
	left: 0;
	text-align: center;
	width: 100%;		
}
.layout_footer div.footer_middle h4 {
	color: #FFF;
	font-size: 1.1em;
	padding: 0px;
	margin: 0px;
}
.layout_footer div.footer_middle a, .layout_footer div.footer_middle p {
	color: #FFF;
}
.layout_footer div.footer_middle .social_img {
	width: 42px;
    height: 42px;
    border: 1px solid #FFF;
}

.layout_footer div.YOW-NAOSHW {
	position: absolute;
	top: 20px;
	left: 20px;	
}
.layout_footer div.YOW-NAOSHW img {
    height: 110px;
}
.layout_footer div.YOW-BBB {
	position: absolute;
	top: 80px;
	right: 20px;
	
}
.layout_footer div.YOW-BBB img {
    
}

.layout_footer div.YOW-Trustwave {
	position: absolute; 
	top: 15px; 
	right: 70px;
}

/*** POPUPS ***/
div.overlay {
	background-color: #000;
	opacity: 0.5;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	
	z-index: 99999;
	
}

div.popup {
	position: fixed;
	top:50%;  
	left:50%;  
	margin:-200px 0 0 -300px;
	
	width: 600px;
	background-color: #FFF;
		
	border: 2px solid #003D79;
	border-radius: 17px;	
	box-shadow: 5px 5px 5px  rgba(0, 0, 0, 0.60);
	
	z-index: 99999;
	
}

.popup .title {
	background-color: #019DCE;
	border-radius: 15px 15px 0 0;	
	padding: 10px;
	
	color: #FFF;
	font-weight: bold;
	font-size: 18px;
}

.popup .close {
	float: right;
	
	background-color: #003D79;
	
	width: 20px;
	height: 20px;	
	border-radius: 5px;		
	border: 1px solid #AEC7FF;
		
	color: #FFF;	
	font-size: 15px;
	line-height: 15px;
	font-weight: normal;		
	text-align: center;
	
	box-shadow: 1px 1px 3px  rgba(0, 0, 0, 0.40);
}

.popup .close:hover {
	cursor: pointer;
	color: #FF8208;
}

.popup .message {
	background-color: #FFF;
	padding: 25px;
	
	max-height: 300px;
	overflow: auto;
	
	line-height: 1.2em;
}

.popup .popup-footer {
	background-color: #FFF;	
	border-radius: 0 0 15px 15px;
	height: 20px;	
}


/* shadow */
.shadow {
	box-shadow: 0 1px 5px rgba(50, 50, 50, 0.2);
}
.shadowInner {
	box-shadow: 0 1px 20px rgba(50, 50, 50, 0.2) inset;
}

/* card */
.card {
	box-sizing: border-box;
	display: block;
	position: relative;
	padding: 2em;
}

.card.cardSm {
	padding: 1.5em;
}

.cardSpacing {
	margin: 1em;
}

.cardBackground {
	background-color: #EEE;
}

.cardBackgroundLight {
	background-color: #F9FAFB;
}

.cardBorder {
	border: 1px solid #EEE;
}

.cardRounded {
	border-radius: 10px;
}

.cardAvatar {
	position: absolute;
	left: -25px;
	margin-left: 50%;
	width: 50px;
	top: -25px;
}


/* flex */
.flex {
	display: flex;
}

.flex.left {
	justify-content: left;
}

.flex.right {
	justify-content: right;
}

.flex.center {
	justify-content: center;
}

.flex.top {
	align-items: start;
}

.flex.middle {
	align-items: center;
}

.flex.bottom {
	align-items: end;
}

.flex.gap {
	gap: 10px;
}

.flex.compact {
	flex-flow: row wrap;
}


/*utilities*/
.w100 {
	width: 100%;
}

.w75 {
	width: 75%;
}

.w50 {
	width: 50%;
}

.w25 {
	width: 25%;
}
/* mobile related utilities */
.w75M100 {
	width: 75%;
}
.w70M100 {
	width: 70%;
}
.w50M100 {
	width: 50%;
}
.w25M100 {
	width: 25%;
}
.w15M100 {
	width: 15%;
}

.paddingSm {
	padding: 20px;
}