@charset "utf-8";
@font-face {
    font-family: "DRLCircularWeb-Bold";
    src: url("../fonts/DRLCircularWeb-Bold.eot");
    src: url("../fonts/DRLCircularWeb-Bold.eot#iefix") format("embedded-opentype"),
         url("../fonts/DRLCircularWeb-Bold.woff2") format("woff2"),
         url("../fonts/DRLCircularWeb-Bold.woff") format("woff"),
         url("../fonts/DRLCircularWeb-Bold.ttf") format("truetype"),
         url("../fonts/DRLCircularWeb-Bold.svg#DRLCircularWebBold") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "DRLCircularWeb-Book";
    src: url("../fonts/DRLCircularWeb-Book.eot");
    src: url("../fonts/DRLCircularWeb-Book.eot#iefix") format("embedded-opentype"),
         url("../fonts/DRLCircularWeb-Book.woff2") format("woff2"),
         url("../fonts/DRLCircularWeb-Book.woff") format("woff"),
         url("../fonts/DRLCircularWeb-Book.ttf") format("truetype"),
         url("../fonts/DRLCircularWeb-Book.svg#DRLCircularWebBook") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "DRLCircularWeb-Light";
    src: url("../fonts/DRLCircularWeb-Light.eot");
    src: url("../fonts/DRLCircularWeb-Light.eot#iefix") format("embedded-opentype"),
         url("../fonts/DRLCircularWeb-Light.woff2") format("woff2"),
         url("../fonts/DRLCircularWeb-Light.woff") format("woff"),
         url("../fonts/DRLCircularWeb-Light.ttf") format("truetype"),
         url("../fonts/DRLCircularWeb-Light.svg#DRLCircularWebLight") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "DRLCircularWeb-Black";
    src: url("../fonts/DRLCircularWeb-Black.eot");
    src: url("../fonts/DRLCircularWeb-Black.eot#iefix") format("embedded-opentype"),
         url("../fonts/DRLCircularWeb-Black.woff2") format("woff2"),
         url("../fonts/DRLCircularWeb-Black.woff") format("woff"),
         url("../fonts/DRLCircularWeb-Black.ttf") format("truetype"),
         url("../fonts/DRLCircularWeb-Black.svg#DRLCircularWebBlack") format("svg");
    font-weight: normal;
    font-style: normal;
}

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}


* { margin: 0; padding: 0; box-sizing: border-box;}

body { margin: 0; padding: 0; font-family: "DRLCircularWeb-Book"; background: #42316d url(../images/bg.png) no-repeat; background-size: cover; color: #fff; font-size: 14px;}


#Page-title { font-size: 48px; font-weight: normal; font-family: "DRLCircularWeb-Black"; margin: 3vh 0 0; text-align: center; color: #fff; text-shadow: 0 3px 8px rgba(0,0,0,0.3); text-transform: uppercase;}
#Page-title img { max-width: 100%;}

.main-wrapper { margin: auto; padding: 0; max-width: 1240px; position: relative;}

.tiles-wrapper { display: flex; /*justify-content: space-between;*/ flex-wrap: wrap; margin: 0 -15px;}
.tile { background: #fff; border-radius: 6px; box-shadow: 0 3px 12px rgba(0,0,0,0.3); flex-basis: calc(25% - 30px); margin: 15px; min-height:205px; }
.tile.empty { background: rgba(255,255,255, 0.1); box-shadow: none;}
.tile-content { display: flex; height: calc(100% - 32px);}
.tile-title { padding: 9px 15px 7px; background: #fff; border-radius: 6px 6px 0 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: relative; z-index: 2; color: #444;}
.tile-title, .tile-title h3 { margin: 0; font-size: 16px; font-family: "DRLCircularWeb-Bold"; font-weight: normal;}
.tile-con-left { min-width: 70px; max-width:70px; border-right: 1px solid #fff; background: #e4dff1; border-radius: 0 0 0 6px; display: flex; justify-content: center; align-items: center; padding: 0 5px;}
.tile-con-left img { max-width: 44px; max-height: 44px;}
.tile-con-right { background: #f7f4fd; flex-grow: 1; border-radius: 0 0 6px 0;}
.tile-con-right ul { margin: 0; padding: 10px 0; list-style: none;}
.tile-con-right ul > li { margin: 0; padding: 3px 0 3px 34px; background: url(../images/bullet-rect.svg) no-repeat 15px 8px; font-size: 14px; font-family: "DRLCircularWeb-Book";}
.tile-con-right ul > li a { color: #522e91; text-decoration: none; display: block; padding: 2px 0;}
.tile-con-right ul > li a:hover { color: #281058/*00b7f1*/; text-decoration: none; font-family: "DRLCircularWeb-Bold";}
.tile-con-right ul > li a.new { background: url(../images/new3.gif) no-repeat right 0; display: inline-block; padding-right: 38px;}

.tile-con-right ul > li.disable, .tile-con-right ul > li.disable a, .tile-con-right ul > li a.disable { opacity: 0.6; pointer-events: none;}

.text-center { text-align: center; margin-top: 1px; }

.copyright { opacity: 0.6;}

strong, b { font-family: "DRLCircularWeb-Bold"; font-weight: normal;}

.note { padding-left: 12px;}

p { margin-bottom: 10px;}

.pull-right { float: right; margin: -22px; margin-right: 0px;} 
.pull-left { float: left;}

.btn-download { display: inline-block; padding: 9px 15px; color: #fff; font-size: 14px; font-family: "DRLCircularWeb-Bold"; text-decoration: none; background: rgba(255,255,255, 0.1); border-radius: 4px; transition: .3s ease-in-out;}
.btn-download img { margin-left: 6px;}
.btn-download:hover { background: rgba(255,255,255, 0.25);}

.clear { clear: both;}


.w3-modal{z-index:3;display:none;padding-top:24px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.7);}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0; max-width: 1400px; width: 86%; border-radius: 12px;}
.w3-modal-content img { max-width: 100%; border-radius: 12px; }

.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}

.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
.w3-btn,.w3-button { border:none;display:inline-block;padding: 10px; width: 30px; height: 30px; vertical-align:middle;overflow:hidden;text-decoration:none;color: #000;background-color: #fff;text-align:center;cursor:pointer;white-space:nowrap; border-radius: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); font-size: 20px; font-weight: bold; transform: .1s ease-in-out; line-height: 12px;}
.w3-btn:hover, .w3-button:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.3); background: #f2f2f2; color: #000;}
.w3-btn,.w3-button {-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
.w3-display-topleft{position:absolute;left:0;top:0}
.w3-display-topright{position:absolute; right: -10px; top: -10px;}

@media screen and  (max-width: 414px){
    
    body { padding: 0 20px;}
    
    .tile { flex-basis: 100%; flex-grow: 1;}
    
    #Page-title { font-size: 36px; margin: 4vh 0 2vh;}
}

@media screen and (min-width: 415px) and  (max-width: 640px){
    
    body { padding: 0 20px;}
    
    .tile { flex-basis: 100%; flex-grow: 1;}
    
    #Page-title { font-size: 38px; margin: 4vh 0 2vh;}
}

@media screen and (min-width: 641px) and (max-width: 812px){
    
    body { padding: 0 20px;}
    
    .tile { flex-basis: calc(50% - 30px);}
    
    #Page-title { font-size: 42px; margin: 4vh 0 2vh;}
}

@media screen and (min-width: 814px) and (max-width: 1200px){
    
    body { padding: 0 20px;}
    
    .tile { flex-basis: calc(33% - 30px);}
    
    #Page-title { font-size: 42px; margin: 4vh 0 2vh;}
}

@media screen and (min-width: 1400px) {
	.main-wrapper { max-width: 1340px;}
}