@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');

:root {
  --main-color: #669bb9;
  --main-color-h1: #669bb9;   
  --main-color-h2: #669bb9;   
  --main-color-h3: #669bb9;   
  --main-color-h4: #669bb9;   
  --main-color-btn-default: #669bb9;   
  --main-color-btn-action: #669bb9; 
  --text-color: #6a6a6a;
  --font-family: 'Open Sans', sans-serif;
  --color-background:#ffffff;   
  --color-background-footer:#ffffff;     
}

body {
	font-family: var(--font-family);
	color: var(--text-color);
	font-size: 16px;
	line-height:1.5;
	font-weight: 400;
	background-color: #ffffff;
	margin:0; 
	height:100%;
	-webkit-font-smoothing: auto;
}


.site-color {color:var(--main-color) !important}

/*=========== Typography ===============*/
h1, h2, h3, h4, h5, h6, p, btn, .h1, .h2, .h3, .h4, .h5, .h6, .p, .btn {font-family: 'Open Sans', sans-serif;}
h1, .h1 {font-size: 36px; font-weight: 600; color:var(--main-color-h1); margin-bottom:20px}
h2, .h2 {font-size: 28px; font-weight: 600;  color:var(--main-color-h2)}
h3, .h3 {font-size: 24px; font-weight: 500;  color:var(--main-color-h3); margin-bottom: 16px}
h4, .h4 {font-size: 20px; font-weight: 400;  font-style: italic; color:var(--main-color-h4)}
h5, .h5 {font-size: 18px; font-weight: 500;  color:#FFFFFF; text-align: center;}
h6, .h6 {font-size: 24px; font-weight: 600;  color:#FFFFFF; text-align: center;}
p, .p, li, div, normal {font-weight: 500; color:#666666; line-height:1.5;}
a, a:visited  {color:#02609d; text-decoration:none;}




/*=========== End Typography ===============*/

/*=========== Buttons ===============*/
.btn {border-radius:0}
.btn-site-default, a.btn-site-default {background-color: var(--main-color-btn-default); border-color: var(--main-color-btn-default); color: #FFFFFF; }
.btn-site-default:hover, .btn-site-default:active, .btn-site-default:focus {background-color: var(--main-color-btn-default) !important; border-color: var(--main-color-btn-default) !important; color: #FFFFFF;}
.btn-site-action {background-color: var(--main-color-btn-action); border-color: var(--main-color-btn-action); color:#ffffff; }
.btn-site-action:hover, .btn-site-action:active, .btn-site-action:focus {background-color: var(--main-color-btn-action) !important; border-color: var(--main-color-btn-action) !important; color:#ffffff;}
.btn-site-save {background-color: var(--main-color-btn-action); border-color: var(--main-color-btn-action); color:#ffffff; }
.btn-site-save:hover, .btn-site-save:active, .btn-site-save:focus {background-color: var(--main-color-btn-action) !important; border-color: var(--main-color-btn-action) !important; color:#ffffff;}
.btn-site-delete {background-color: #f0353d; border-color: #f0353d; color:#ffffff;}
.btn-site-delete:hover, .btn-site-delete:active, .btn-site-delete:focus {background-color: #ec000a !important; border-color: #ec000a !important; color:#ffffff;}
.btn-site-cancel {background-color: #9baaab; border-color: #9baaab; color:#ffffff;}
.btn-site-cancel:hover, .btn-site-cancel:active, .btn-site-cancel:focus {background-color: #687f82 !important; border-color: #687f82 !important; color:#ffffff;}
.btn-site-edit {background-color: #2660f2; border-color: #2660f2; color:#ffffff;}
.btn-site-edit:hover, .btn-site-edit:active, .btn-site-edit:focus {background-color: #0a9af2 !important; border-color: #0a9af2 !important; color:#ffffff;}
.btn-site-view {background-color: #fd6a33; border-color: #fd6a33; color:#ffffff;}
.btn-site-view:hover, .btn-site-view:active, .btn-site-view:focus {background-color: #f95213 !important; border-color: #f95213 !important; color:#ffffff;}

i.btn-view {color:#365dcd;}
i.btn-delete {color:#F44336;}

.btn-fa {cursor:pointer}

/*=========== End Buttons ===============*/


/*=========== Header ===============*/

#header {
	box-shadow: 0 1px 1px 0 #cccccc;
	transition: all 0.4s ease 0s;
}

.sticky-header {
	background:#df0d6b;
	-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);	
}

.logo img {max-height:50px}
#toplogo {display:none}
#toplogo {float:left} 
#headerlogo {float:left;} 
#headerlogo img {transition: all 0.4s ease 0s;}



/*=========== End Header ===============*/


.catalogue {margin: 0; padding: 0;}
.catalogue li {list-style: none; padding: 0;}
.catalogue-card {display: block; float: left; margin: 5px 15px 20px; height: 180px; width:225px; position: relative}
.catalogue-card .product-name {text-align: center; color: #2953b3; font-size: 14px;  white-space: normal; position: absolute; bottom: 0px; width: 100%; font-weight:bold;}
.catalogue-card .product-currency {position: absolute; font-size: 10px; right: 5px; background-color: #2953b3; padding: 3px 5px; color: #ffffff;font-weight: bold;}
.catalogue-card .product-type {position: absolute; font-size: 10px; left: 5px; background-color: #cd196b; padding: 3px 5px; color: #ffffff;font-weight: bold;}
.product-image-card {position: relative; border-radius: 0px; overflow: hidden;}
.product-image-card img {max-width:100%; max-height:100%; border-radius: 0px; margin:-2px;}
.product-image-card.redeem {border:2px solid #ffffff; padding:10px}
.product-image-card.selected {border:2px solid #ff0101;}

.shadowbox {box-shadow: -2px 2px 6px 0 rgba(0,0,0,0.4); transition:0.2s}
.shadowbox:hover {
    margin-top: -.25rem;
    margin-bottom: .25rem;
	box-shadow: 2px 4px 8px 0 rgba(0,0,0,0.3);	
}