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

:root {
  --main-color: #771b7c;
  --main-color-h1: #771b7c;   
  --main-color-h2: #771b7c;   
  --main-color-h3: #003756;   
  --main-color-h4: #003756;   
  --main-color-btn-default: #669bb9;   
  --main-color-btn-action: #02609d; 
  --text-color: #771b7c;
  --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: var(--font-family);}
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-size: 16px; font-weight: 500; color:var(--text-color); line-height:1.5;}
a, a:visited  {color:var(--text-color); text-decoration:underline !important;}




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

/*=========== Buttons ===============*/
.btn {border-radius:10px}
.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 ===============*/


#body-wrapper {padding:60px 0px 0px}

.navbar {display:none}

.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; height:200px; text-align:center}
.product-image-card img {max-width:100%; max-height:200px; border-radius: 0px; margin-left:auto; margin-right:auto;}

.redeem.selected {border:2px solid red}

.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);	
}

#footer {display:none}