.slideanim {visibility:hidden;}.slide { animation-name: slide; -webkit-animation-name: slide; animation-duration: 1s;	 -webkit-animation-duration: 1s; visibility: visible;}
@keyframes slide {0% {opacity: 0;-webkit-transform: translateY(70%);} 100% {opacity: 1; -webkit-transform: translateY(0%);}}
@-webkit-keyframes slide { 0% {opacity: 0;-webkit-transform: translateY(70%);} 100% {opacity: 1; -webkit-transform: translateY(0%);}}

.slideX {animation-name: slideX;-webkit-animation-name:slideX;animation-duration: 1s;	-webkit-animation-duration:1s; visibility:visible;}
@keyframes slideX {0% {opacity: 0;-webkit-transform: translateX(70%);}100% {opacity: 1;-webkit-transform: translateX(0%);}}
@-webkit-keyframes slideX {0% {opacity:0;-webkit-transform:translateX(70%);}100% {opacity:1;-webkit-transform:translateX(0%);}}

.f-modal{z-index:3;display:none;padding-top:100px;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.4)}
.f-modal-content{position:fixed;width:100%;z-index:999;background-color:#fff;bottom:0;padding:0;outline:0; border-radius: 12px 12px 0 0}

.splash_img {background-image:url(../img/splash_background.jpg);max-width:100%;max-height:100%;background-position:center;background-repeat: no-repeat;background-size:cover;}
.centralized {position:relative;margin:0 5%;}


#mOverlay {position: fixed;display: none;width: 100%; height: 100%;top: 0; left: 0; right: 0; bottom: 0;background-color: #000;background-color: rgba(0,0,0,0.2);z-index: 2;cursor: pointer;-webkit-transition: opacity .5s;-moz-transition: opacity .5s;-ms-transition: opacity .5s;-o-transition: opacity .5s;transition: opacity .5s;}
#Mnavbar {background-color:transparent;position: fixed;top: 0; width: 100%;display:block;transition: top 0.3s;}
#OfflineBox{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:300px}
.loadingcontent{color:#fff;position:absolute;right:40%;left:30%;bottom:50%;top:50%;font-size:150%;}
#futa-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:100%;border:50px 10px 50px 20px}
#LiveBroadcast {display:none;position:fixed;left:0;bottom:0;color:#000;width:100%;height:auto;padding:7px;z-index:999;}
.foota-dialog {z-index:100;display:none;position:fixed;left:0;bottom:0;color:#000;width:100%;height:auto;overflow:auto;}
.foota-dialog-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:100%;border-top-left-radius:30px;border-top-right-radius:30px}.foota-dialog-content a{color:inherit;text-decoration:none;}.foota-dialog-content a:hover {color:#993300;text-decoration:none;}
#OffLineBox {display:none;position:fixed;left:0;bottom:0;color:#000;width:100%;height:auto;z-index:999;}
 
.log-input-container {display:-ms-flexbox;display:flex;width:100%;margin-bottom:15px;}
.log-input{border-bottom-right-radius:8px; border-top-right-radius:8px;padding:8px;display:block;border:1px solid #993300;width:100%;color:blue;height:50px;font-size:20px;}
.log-input:focus {border:1px solid #ffa070;}
.icon {padding:10px;background:#993300;color:white;min-width:50px;text-align:center;}
.input:focus {border:1px solid #06C;}
.label{color:#009688}.input:not(:valid)~.validate{color:#f44336}
.select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
.select select:focus{color:#000;border:1px solid #009688}.select option[disabled]{color:#009688}
input[type=checkbox].check,input[type=radio].radio{width:24px;height:24px;position:relative;top:6px}
input[type=checkbox].check:checked+.validate,input[type=radio].radio:checked+.validate{color:#009688} 
input[type=checkbox].check:disabled+.validate,input[type=radio].radio:disabled+.validate{color:#aaa}

.closebtn{text-decoration:none;float:right;font-size:24px;font-weight:bold;color:red;cursor:pointer;}.closebtn:hover,.closebtn:focus{background-color:red;color:#fff;text-decoration:none;cursor:pointer}

.LoginBakgrnd {background-image:url(../img/LoginBack.png);max-width:100%;max-height:100%;background-position:center;	background-repeat:no-repeat;background-size: cover;}
.image50{max-width:50%;height:auto}.image30{max-width:70%;height:auto}.image20{max-width:80%;height:auto}
.width50{display:block;width:50%}.width30{width:30%;}
#fix-top-right70{position:fixed;width:20%;z-index:100;right:15px;top:70px}
.bottom40{position:fixed;width:100%;z-index:100;bottom:40px}
.right15 {left:15px;text-align:center;}

/* Sticky icon bar*/
.icon-bar {position: fixed;top: 50%;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-o-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}.icon-bar a {display: block;text-align:center;padding:16px;transition: all 0.3s ease;color:white;font-size:20px;}

/*general fa*/
.fa {font-size:30px;width:30px;text-align:center;text-decoration:none;margin:2px;}
.fa:hover {opacity: 0.7;}

/*social media icons colors*/
.fa-facebook {background:#3B5998;color:white;}.fa-twitter {background:#55ACEE;color:white;}.fa-linkedin {background:#007bb5;color:white;}.fa-youtube {background:#bb0000;color:white;}.fa-instagram {background:#125688;color:white;}
.fa-pinterest {background:#cb2027;color:white;}.fa-skype {background:#00aff0;color:white;}

 /* pagination */
.pagination{display:inline-block;padding:0;margin:0}.pagination li{display:inline}
.pagination li a{text-decoration:none;color:#000;float:left;padding:8px 16px}

.pagination li a:hover{background-color:#ccc}

.olist{ list-style-type:inherit;padding:0;margin:0}
.olist li{padding:8px 16px;border-bottom:1px solid #ddd}
.olist li:last-child{border-bottom:none}

/* Style the list as independent boxes */
ul.testimonial{list-style-type:none;padding:0;margin:0}
ul.testimonial li{padding:12px;border:1px solid #ddd;border-radius:10px;display:block;margin-bottom:10px;}
ul.testimonial li a {margin-top:-1px;background-color:inherit;padding:12px;text-decoration:none;color:inherit;}
ul.testimonial li a:hover:not(.header) {color:#06C;}
/* Style the list as button */
ul.listbutton{list-style-type:none;padding:0;margin:0}
ul.listbutton li{padding:6px 2px 6px 16px;border:1px solid #ddd; border-radius:50px}
ul.listbutton li a {color:#0275d8;text-decoration:none;}
ul.listbutton li a:hover {color:#01447e; text-decoration: underline;}
/* Style the list as breadcrumb */
ul.breadcrumb {padding: 10px 16px;list-style: none;}
ul.breadcrumb li {display: inline;font-size: 18px;}
ul.breadcrumb li+li:before {padding: 8px;color: black;content: "/\00a0";}
ul.breadcrumb li a {color:#0275d8;text-decoration: none;}
ul.breadcrumb li a:hover {color:#01447e;text-decoration:underline;}
 /* alignment */
.vertical{word-break:break-all;line-height:1;text-align:center;width:0.6em}
/* padding effect */
.padding-tiny{padding:2px 4px!important}.padding-medium,.form{padding:8px 16px!important}.padding-xlarge{padding:16px 32px!important}.padding-xxlarge{padding:24px 48px!important}.padding-jumbo{padding:32px 64px!important}
.padding-2{padding-top:2px!important;padding-bottom:2px!important}
.padding-4{padding-top:4px!important;padding-bottom:4px!important}
.padding-8{padding-top:8px!important;padding-bottom:8px!important}
.padding-0{padding:0!important}.padding-1{padding:1px!important}
.padding-bottom{padding-bottom:8px!important}
.padding-left{padding-left:16px!important}.padding-right{padding-right:16px!important}
/* box effects */
.example{box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important}
.card-8{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important}
.card-12{box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)!important}
.card-16{box-shadow:0 16px 24px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21)!important}
.card-24{box-shadow:0 24px 24px 0 rgba(0,0,0,0.2),0 40px 77px 0 rgba(0,0,0,0.22)!important}
/* background Colors */
.transparent{background-color:transparent!important}
.hover-none:hover{box-shadow:none!important;background-color:transparent!important}
.seagreen,.hover-seagreen:hover{color:#fff!important;background-color:#2E8B57!important}
.olivedrab,.hover-olivedrab:hover{color:#fff!important;background-color:#6B8E23!important}
.darkolivegreen,.hover-darkolivegreen:hover{color:#fff!important;background-color:#556B27!important}
.forestgreen,.hover-forestgreen:hover{color:#fff!important;background-color:#065901!important}
.green-grey,.hover-green-grey:hover{color:#000 !important;background-color:#D5EDB3 !important}
.maroon,.hover-maroon:hover{color:#fff !important;background-color:maroon !important}
.white-green,.hover-white-green:hover{color:#000 !important;background-color:#f4ffE4 !important}
.lightbackground,.hover-lightbackground:hover{color:#000!important;background-color:#F9F9FA!important}
.amber,.hover-amber:hover{color:#000!important;background-color:#ffc107!important}
.aqua,.hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
.blue,.hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.light-blue,.hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
.brown,.hover-brown:hover{color:#fff!important;background-color:#795548!important}
.cyan,.hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.blue-grey,.hover-blue-grey:hover,.blue-gray,.hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.green,.hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.light-green,.hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.indigo,.hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.khaki,.hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.lime,.hover-lime:hover{color:#000!important;background-color:#cddc39!important}
.orange,.hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.deep-orange,.hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.pink,.hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.purple,.hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.deeppurple,.hover-deeppurple:hover{color:#fff!important;background-color:#673ab7!important}
.bluegreen,.hover-bluegreen:hover{color:#FFF!important;background-color:#246B70!important}
.bluered,.hover-bluered:hover{color:#FFF!important;background-color:#8C0073!important}
.greenpurple,.hover-greenpurple:hover{color:#FFF!important;background-color:#806633!important}
.red,.hover-red:hover{color:#fff!important;background-color:#f44336!important}
.sand,.hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.teal,.hover-teal:hover{color:#fff!important;background-color:#009688!important}
.yellow,.hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.white,.hover-white:hover{color:#000!important;background-color:#fff!important}
.black,.hover-black:hover{color:#fff!important;background-color:#000!important}
.grey,.hover-grey:hover,.gray,.hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
.light-grey,.hover-light-grey:hover,.light-gray,.hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.dark-grey,.hover-dark-grey:hover,.dark-gray,.hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.pale-red,.hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
.pale-green,.hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.pale-yellow,.hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.pale-blue,.hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
.lavender,.hover-lavender:hover{color:#000 !important;background-color:#e6e6fa !important}
.royalblue,.hover-royalblue:hover{color:#fff!important;background-color:#4169e1!important}
.slateblue,.hover-slateblue:hover{color:#fff!important;background-color:#6a5acd!important}
.very-light-blue,.hover-very-light-blue:hover{color:#000!important;background-color:#D4E6F4!important}
.light-tan,.hover-light-tan:hover{color:#fff!important;background-color:#EEE4B9!important}
.burgundy,.hover-burgundy:hover{color:#000!important;background-color:#8D0D19!important}
/* text Colors */
.text-maroon,.hover-text-maroon:hover{color:maroon!important}
.text-amber,.hover-text-amber:hover{color:#ffc107!important}
.text-aqua,.hover-text-aqua:hover{color:#00ffff!important}
.text-blue,.hover-text-blue:hover{color:#2196F3!important}
.text-deepblue,.hover-text-deepblue:hover{color: #074b83!important}
.text-light-blue,.hover-text-light-blue:hover{color:#87CEEB!important}
.text-brown,.hover-text-brown:hover{color:#795548!important}
.text-cyan,.hover-text-cyan:hover{color:#00bcd4!important}
.text-blue-grey,.hover-text-blue-grey:hover,.text-blue-gray,.hover-text-blue-gray:hover{color:#607d8b!important}
.text-green,.hover-text-green:hover{color:#4CAF50!important}
.text-light-green,.hover-text-light-green:hover{color:#8bc34a!important}
.text-indigo,.hover-text-indigo:hover{color:#3f51b5!important}
.text-khaki,.hover-text-khaki:hover{color:#b4aa50!important}
.text-lime,.hover-text-lime:hover{color:#cddc39!important}
.text-orange,.hover-text-orange:hover{color:#ff9800!important}
.text-deep-orange,.hover-text-deep-orange:hover{color:#ff5722!important}
.text-pink,.hover-text-pink:hover{color:#e91e63!important}
.text-purple,.hover-text-purple:hover{color:#9c27b0!important}
.text-deeppurple,.hover-text-deeppurple:hover{color:#673ab7!important}
.text-red,.hover-text-red:hover{color:#f44336!important}
.text-sand,.hover-text-sand:hover{color:#fdf5e6!important}
.text-teal,.hover-text-teal:hover{color:#009688!important}
.text-yellow,.hover-text-yellow:hover{color:#d2be0e!important}
.text-white,.hover-text-white:hover{color:#fff!important}
.text-black,.hover-text-black:hover{color:#000!important}
.text-lavender,.hover-text-lavender:hover{color:#e6e6fa !important}
.text-grey,.hover-text-grey:hover,.text-gray,.hover-text-gray:hover{color:#757575!important}
.text-light-grey,.hover-text-light-grey:hover,.text-light-gray,.hover-text-light-gray:hover{color:#f1f1f1!important}
.text-dark-grey,.hover-text-dark-grey:hover,.text-dark-gray,.hover-text-dark-gray:hover{color:#3a3a3a!important}
.text-shadow{text-shadow:1px 1px 0 #444}.text-shadow-white{text-shadow:1px 1px 0 #ddd}
.text-darkblue {color:#085a9d !important}
.text-darkred {color:#c5170a !important}
.text-bold {font-weight:bold !important}
.text-capitalize {text-transform:capitalize !important;}
.text-uppercase {text-transform:uppercase !important;}
.text-lowercase {text-transform:lowercase !important;}
/* border colors */
.border-maroon,.hover-border-amber:hover{border-color:maroon!important}
.border-amber,.hover-border-amber:hover{border-color:#ffc107!important}
.border-aqua,.hover-border-aqua:hover{border-color:#00ffff!important}
.border-blue,.hover-border-blue:hover{border-color:#2196F3!important}
.border-deepblue,.hover-border-deepblue:hover{border-color:#000099!important}
.border-light-blue,.hover-border-light-blue:hover{border-color:#87CEEB!important}
.border-brown,.hover-border-brown:hover{border-color:#795548!important}
.border-cyan,.hover-border-cyan:hover{border-color:#00bcd4!important}
.border-blue-grey,.hover-border-blue-grey:hover,.border-blue-gray,.hover-border-blue-gray:hover{border-color:#607d8b!important}
.border-green,.hover-border-green:hover{border-color:#4CAF50!important}
.border-light-green,.hover-border-light-green:hover{border-color:#8bc34a!important}
.border-indigo,.hover-border-indigo:hover{border-color:#3f51b5!important}
.border-khaki,.hover-border-khaki:hover{border-color:#f0e68c!important}
.border-lime,.hover-border-lime:hover{border-color:#cddc39!important}
.border-orange,.hover-border-orange:hover{border-color:#ff9800!important}
.border-deep-orange,.hover-border-deep-orange:hover{border-color:#ff5722!important}
.border-pink,.hover-border-pink:hover{border-color:#e91e63!important}
.border-purple,.hover-border-purple:hover{border-color:#9c27b0!important}
.border-deeppurple,.hover-border-deepuprple:hover{border-color:#673ab7!important}
.border-red,.hover-border-red:hover{border-color:#f44336!important}
.border-sand,.hover-border-sand:hover{border-color:#fdf5e6!important}
.border-teal,.hover-border-teal:hover{border-color:#009688!important}
.border-yellow,.hover-border-yellow:hover{border-color:#ffeb3b!important}
.border-white,.hover-border-white:hover{border-color:#fff!important}
.border-black,.hover-border-black:hover{border-color:#000!important}
.border-grey,.hover-border-grey:hover,.border-gray,.hover-border-gray:hover{border-color:#9e9e9e!important}
.border-light-grey,.hover-border-light-grey:hover,.border-light-gray,.hover-border-light-gray:hover{border-color:#f1f1f1!important}
.border-dark-grey,.hover-border-dark-grey:hover,.border-dark-gray,.hover-border-dark-gray:hover{border-color:#616161!important}
.border-pale-red,.hover-border-pale-red:hover{border-color:#ffe7e7!important}.border-pale-green,.hover-border-pale-green:hover{border-color:#e7ffe7!important}
.border-pale-yellow,.hover-border-pale-yellow:hover{border-color:#ffffcc!important}.border-pale-blue,.hover-border-pale-blue:hover{border-color:#e7ffff!important}

/* alert/notes */
.danger {background-color:#ffdddd;border-left:6px solid #f44336;padding:4px 12px;}#danger {right:40%;top:200px;max-width:400px;height:auto;z-index:999;}
.success {background-color:#ddffdd;border-left:6px solid #4CAF50;padding:4px 12px;}#success {left:50%;bottom:8px;max-width:500px;z-index:25;}
.info {background-color:#e7f3fe;border-left:6px solid #2196F3;padding:4px 12px;right:40%;top:200px;max-width:500px;margin:auto;height:auto;z-index:999;}
.warning {background-color:#ffffcc;border-left:6px solid #ffeb3b;padding: 4px 12px;right:40%;top:200px;max-width:400px;margin:auto;height:auto;z-index:999;}
.alert { padding: 20px; background-color: #f44336; color: white; opacity: 1; transition: opacity 0.6s; margin-bottom: 15px;}

/* fixed bottom btn and boxes */
.go2top,.go2top:focus {display:none;position:fixed;right:15px;bottom:40px;color:#9e9e9e;width:38px;height:38px;border:solid 1px #cccccc;border-radius:50% !important; text-align:center;padding:7px 0 0 1px;z-index:999;}
.go2top:hover {border:solid 1px #9e9e9e;background-color:#eeeeee}.go2top i {line-height:16px;}.fancybox-overlay {z-index:9999;}

#nextPageBtn {position:absolute;right:2px;bottom:3px;color:#757575;}
#prevPageBtn {position:absolute;left:2px;bottom:3px;color:#757575;}

#CookiesNotice {position:absolute;background-color:#000;opacity:0.8;left:10px;bottom:10px;color:#fff;width:300px;height:auto;text-align:center;padding:10px;z-index:9999;}
#netwkBox, #ItemMarked, #ItemUnmarked, #ItemAdded, #ItemRemoved {display:none;position:fixed;left:25%;bottom:10%;color:#fff;width:50%;margin:auto;height:auto;text-align:center;padding:7px;z-index:999;border-radius:10px}
#CheckBackBox {display:none;position:fixed;left:0;bottom:10px;color:#fff;width:50%;margin:auto;height:auto;text-align:center;padding:7px;z-index:999;}
#loadar {display:none;position:fixed;left:0;bottom:10px;color:#fff;width:50%;margin:auto;height:auto;text-align:center;padding:7px;z-index:999;}
#FutaCallBtn {display:none;right:15px;bottom:96px;color:#fff;width:40px;height:40px;border:solid 1px #eee;border-radius:50% !important;text-align:center;padding:5px;opacity:0.8;z-index:25;}#FutaCallBtn:hover {border:solid 1px #9e9e9e;color:#eee;}#FutaCallBtn i {font-size:24px;line-height:20px;}
#f3dot {right:15px;bottom:10px;color:maroon;width:40px;height:40px;border:solid 1px #eee;border-radius:50% !important;text-align:center;padding:5px;opacity:0.8;z-index:1000;}#f3dot:hover {border:solid 1px #9e9e9e;color:#eee;}
#loginn {position:fixed;left:15px;bottom:10px;background-color:red;width:150px;height:40px;border:solid 1px #eee;border:0;text-align:center;padding:5px;z-index:999;}#loginn:hover {border:solid 1px #9e9e9e;color:#eee;}
#FutaWhatsAppBtn {display:none;right:15px;bottom:100px;color:#fff;width:40px;height:40px;border:solid 1px #eee;border-radius:50% !important;text-align:center;padding:5px;opacity:0.8;z-index:25;}#FutaWhatsAppBtn:hover {border:solid 1px #9e9e9e;color:#eee;}
#ChatBtn {display:none;right:15px;bottom:95px;color:#fff;width:40px;height:40px;border:solid 1px #eee;border-radius:50% !important;text-align:center;padding:5px;background-color:#eee;opacity:0.8;z-index:25;}#ChatBtn:hover {border:solid 1px #9e9e9e;color:#06C;}#ChatBtn i {font-size:24px;line-height:20px;}
.openchatbtn {color:white;padding:5px;border:none;cursor:pointer;position:fixed;}
.popupchat {display:none;position:fixed;bottom:0;right:15px;border:1px solid #f1f1f1;z-index:9995;}
.chatform-container {max-width:300px;padding:10px;background-color:white;}
.chatform-container textarea {width:100%;padding:15px;margin:5px 0 22px 0;border:none;background:#f1f1f1;resize:none;min-height:200px;}
.chatform-container textarea:focus {background-color:#eee;outline:none;}
.chatform-container .chatbtn {background-color:#4CAF50;color:white;padding:16px 20px;border:none;cursor:pointer;width:100%;margin-bottom:10px;opacity: 0.8;}
.chatform-container .chatcancel {background-color: red;}
.chatform-container .chatbtn:hover, .chatopen-button:hover {opacity: 1;}

#Div1,#Div2,#Div3,#Div4, #bNav {display:none;}

 /* topnav */
.topnav {overflow:hidden;background-color:transparent;  /*border-top:2px solid #09f;*/}
.topnav a {float:left; display: block;color:#FFF;text-align:center;padding:12px 16px;text-decoration: none;font-size:100%;font-weight:400; border-bottom:3px solid transparent;-webkit-transition:border-bottom .25s;transition:border-bottom .25s;}
.topnav a:hover{color:#f3f4fb;background-color:transparent;border-bottom:3px solid #f3f4fb;-webkit-transition:border-bottom .25s;transition:border-bottom .25s;}
.topnav a:active {background-color:#f3f4fb;color:#000;}
.topnav .search-container {float: left;}
.topnav input[type=text] {padding:6px; margin-top:8px;font-size:17px;border: none;}
.topnav .search-container button {float:right;padding:6px 10px;margin-top:8px;margin-right:16px;background:#ddd;font-size:17px;border:none;cursor:pointer;color: white;}
.topnav .search-container button:hover {background:#ccc;}
.topnav .dropdown-hover a{border-bottom:0}
.topnav:after,.topnav:before {content:"";display:table;clear:both}

/* dropdown */
.dropdown {float:left;overflow:hidden;}
.dropdown .dropbtn {font-size:100%;border:none;outline:none;color:#FFF;padding:12px 16px;background-color:transparent;font-family:inherit; margin:0;}
.dropdown:hover .dropbtn {background-color:transparent;color:#f3f4fb;}
.dropdown-content {display:none;position:absolute;background-color:#f3f4fb;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1;font-size:100%;}
.dropdown-content a {float:none;color:#000;padding:12px 16px;text-decoration:none;display:block;text-align:left;border-bottom:1px solid #eee;}
.dropdown-content a:hover {background-color:transparent;color:#000;font-weight:600;border-bottom:2px solid #eee;}
.dropdown:hover .dropdown-content {display: block;}

/* sidenav */
.sidenav {height:100%;width:250px;position:fixed!important;z-index:1;top:0;left:0;background-color:#fff;overflow-x:hidden;padding-top:2px;}
.sidenav a, .dropdown-btn {padding:6px 8px 6px 16px;text-decoration:none;font-size:100%;color:#000;display:block;border:none;background:none;width:100%;text-align:left;cursor:pointer;outline:none;border-bottom:1px solid #eee;}
.sidenav a:hover, .dropdown-btn:hover {color:#06C;background-color:#FFF;border-bottom:2px solid #eee}
.dropdown-container {display:none;padding-left:8px;background-color:#F9F9FA;} 
@media (max-width:992px){.sidenav.collapse,.sidebar.collapse{display:none}.main{margin-left:0!important;margin-right:0!important}}

 /* ul-navbar */
.navbar{list-style-type:none;margin:0;padding:0;overflow:hidden}.navbar li{float:left}
.navitem,.navbar li .btn,.navbar li .input{display:block;padding:8px 16px;color:#ffe8ff}
.navbar li .btn,.navbar li .input{border:none;outline:none;width:100%}
.navbar li a{display:block;padding:8px 16px;color:#fff1ea;border-bottom:1px solid #ccc;-webkit-transition:border-bottom .25s;transition:border-bottom .25s;}
.navbar li a:hover{color:#ffffff;border-bottom:1px solid #ffffff;-webkit-transition:border-bottom .25s;transition:border-bottom .25s;}
.navbar .dropdown-hover,.navbar .dropdown-click{position:static}
.navbar .dropdown-hover:hover,.navbar .dropdown-hover:first-child,.navbar .dropdown-click:hover{background-color:#e6e6fa;color:#673ab7}
.navbar a,.sidenav a,.dropdown-content a,.accordion-content a,.dropnav a,.navblock a{text-decoration:none!important}.navbar .opennav.right{float:right!important}

.cut-text {text-overflow:ellipsis;overflow:hidden;width:160px;height:1.8em;white-space:nowrap;}
.dark-mode {background-color:black;color:white;}
@media only screen and (min-width: 480px) {
 .cut-text {text-overflow:ellipsis;overflow:hidden;width:200px;height:1.8em;white-space:nowrap;}
}
@media only screen and (min-width: 700px) {
 .cut-text {text-overflow:ellipsis;overflow:hidden;width:300px;height:1.8em;white-space:nowrap;}
}
@media only screen and (min-width: 993px) {
 .cut-text {text-overflow:ellipsis;overflow:hidden;width:500px;height:1.8em;white-space:nowrap;}
} 

.splash-back-img {background-image:url(pix/splashscreen.png);height:100%;background-position:center;background-repeat:no-repeat;background-size:cover;}

 /* jssor slider loading skin spin css */
 .jssorl-009-spin img {
 animation-name: jssorl-009-spin;
 animation-duration: 1.6s;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
 }
 @keyframes jssorl-009-spin {
 from { transform: rotate(0deg);}
 to {transform: rotate(360deg);}
}
.jssorb072 .i {position:absolute;color:#000;font-family:"Helvetica neue",Helvetica,Arial,sans-serif;text-align:center;cursor:pointer;z-index:0;}
.jssorb072 .i .b {fill:#fff;opacity:.3;}
.jssorb072 .i:hover {opacity:.7;}
.jssorb072 .iav {color:#fff;}
.jssorb072 .iav .b {fill:#000;opacity:.5;}
.jssorb072 .i.idn {opacity:.3;}
.jssora073 {display:block;position:absolute;cursor:pointer;}
.jssora073 .a {fill:#ddd;fill-opacity:.7;stroke:#000;stroke-width:160;stroke-miterlimit:10;stroke-opacity:.7;}
.jssora073:hover {opacity:.8;}
.jssora073.jssora073dn {opacity:.4;}
.jssora073.jssora073ds {opacity:.3;pointer-events:none;}
.jssora061 {display:block;position:absolute;cursor:pointer;}
.jssora061 .a {fill:none;stroke:#fff;stroke-width:360;stroke-linecap:round;}
.jssora061:hover {opacity:.8;}
.jssora061.jssora061dn {opacity:.5;}
.jssora061.jssora061ds {opacity:.3;pointer-events:none;}

/*horizontal tabs*/
.horizontaltab {overflow: hidden; border: 1px solid #ccc;border-bottom:none;border-top:none;background-color: #f1f1f1;}
.horizontaltab button {background-color: inherit;float: left;border: none;outline: none;cursor: pointer; padding: 14px 16px; transition: 0.3s;font-size: 15px;}
.horizontaltabcontent {color:black;display:none;padding:10px 20px;height: 100%;background-color:white;border: 1px solid #ccc;border-top: none;}.horizontaltab button:hover {background-color:#ddd;}
.horizontaltab button.active {background-color:#fff;border-top: 3px solid #06C;color:blue;font-weight:bold;}

/*headers*/
@media only screen and (max-width: 480px) {
html,body{font-size:98%;line-height:1.5}html{overflow-x:hidden}
h1{font-size:200%}h2{font-size:175%}h3{font-size:137.50%}h4,h5,h6{font-size:112.50%}
.medium,.large,.xlarge,.xxlarge,.xxxlarge,.jumbo{font-size:17px!important} 
p{font-size:98%;}
}

/* snakbar */
#snakbar {visibility:hidden;min-width:300px;margin-left: -125px;background-color:green;color: #fff; text-align: center;border-radius: 2px;padding: 16px;position: fixed;z-index: 1;left: 50%;bottom: 30px; font-size: 15px;}
#snakbar.show {visibility: visible;-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;animation: fadein 0.5s, fadeout 0.5s 2.5s;}
@-webkit-keyframes fadein {from {bottom: 0; opacity: 0;}to {bottom: 30px; opacity: 1;}}
@keyframes fadein {from {bottom: 0; opacity: 0;}to {bottom: 30px; opacity: 1;}}
@-webkit-keyframes fadeout {from {bottom:30px; opacity:1;}to {bottom:0; opacity:0;}}
@keyframes fadeout {from {bottom: 30px; opacity: 1;}to {bottom:0; opacity: 0;}}
/* sticky navbar */
.sticky {position: fixed;top:0;width: 100%}
.sticky + .content {padding-top: 60px;}

/* image-styles */
img{margin-bottom:-5px}
.image{max-width:100%;height:auto}
.imgthumpnail {border:1px solid #ddd;border-radius:20%;padding:3px; width:150px;}
.imgcontainer { position: relative; width: 50%;}
.imgoverlay-fromleft {position:absolute;bottom:0;left:0;right:0; background-color:gray;opacity:0.8;overflow: hidden;width: 0;height: 100%;transition:0.5s ease;}
.imgoverlay-fromright {position:absolute;bottom:0;left:100%;right:0;  background-color:gray;opacity:0.8;overflow: hidden;width: 0;height: 100%;transition: .5s ease;}
.imgoverlay-frombottom {position:absolute;bottom:0;left:0;right:0;  background-color:gray;opacity:0.8;overflow: hidden;width: 100%;height: 0;transition:0.5s ease;}
.imgoverlay-fromtop {position:absolute;bottom:100%;left:0;right:0;  background-color:gray;opacity:0.8;overflow:hidden;width:100%;height:0;  transition:0.5s ease;}
.imgcontainer:hover .imgoverlay-fromtop {bottom:0;height:100%;}
.imgcontainer:hover .imgoverlay-frombottom {height:100%;}
.imgcontainer:hover .imgoverlay-fromleft {width:100%;}
.imgcontainer:hover .imgoverlay-fromright {width:100%;left:0;}
.imgoverlay-text {color: white;font-size: 20px;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);white-space: nowrap;}
flip-image:hover {-webkit-transform:scaleX(-1);transform:scaleX(-1);}

.img_bg {width:100%;position:absolute;top:0;left:0;}
@media screen and (max-width:1024px){img_bg{left:50%;margin-left:-512px;}}
.img-container {position: relative;text-align: center;color: black;}
.centered-img {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}

ul.content-ul{list-style-type:none;padding:0;margin:0}
ul.content-ul li{padding:2px}

/*Accordion min*/
.ac{margin-top:10px;border:1px solid #ddd;background-color:#fff;-moz-box-sizing:border-box;box-sizing:border-box}.ac>.ac-q{font:bold 15px Arial,sans-serif;color:#111;padding:10px 30px 10px 10px;margin:0;text-decoration:none;display:block;cursor:pointer;position:relative}.ac>.ac-q::after{content:'+';text-align:center;width:15px;right:10px;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);position:absolute}.ac>.ac-a{overflow:hidden;-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:ease;transition-timing-function:ease}.ac>.ac-a p{font:14px/1.5 Arial,sans-serif;color:#000;margin:0;padding:10px}.ac.js-enabled>.ac-a{visibility:hidden}.ac.is-active>.ac-a{visibility:visible}.ac.is-active>.ac-q::after{content:'\2013'}

/*from cordova index.css*/
body {
    -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
 /* prevent copy paste, to allow, change 'none' to 'text' */
    -webkit-user-select: none;                 
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
 /* END prevent copy paste, to allow, change 'none' to 'text' */
     font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    height:100vh;
    /* Padding to avoid the "unsafe" areas behind notches in the screen */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    width:100%;
}
@media print { body { display:none } } /* prevent content printing */

@keyframes fade {
 from {opacity: 1.0;}50% {opacity: 0.4;} to {opacity: 1.0;}
}
.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}
/*end from index.css*/

/*general fa*/
/*
.fa {padding:20px;font-size:30px;width:30px;text-align:center;text-decoration:none;margin:2px;
  /* border-radius: 0%; */ /* for square corners 
    border-radius: 50%; /* for rounded corners */
  /* border-radius: 20%; */  /* for padding corners 
}
.fa:hover {opacity: 0.7;}
*/
/*social media icons*/
.fa-facebook {background:#3B5998;color:white;font-size:30px;width:30px;text-align:center;text-decoration:none;margin:2px}
.fa-twitter {background:#55ACEE;color:white;font-size:30px;width:30px;text-align:center;text-decoration:none;margin:2px}
.fa-linkedin {background:#007bb5;color:white;font-size:30px;width:30px;text-align:center;text-decoration:none;margin:2px}
.fa-youtube {background:#bb0000;color:white;font-size:30px;width:30px;text-align:center;text-decoration:none;margin:2px}
.fa-instagram {background:#125688;color:white;font-size:30px;width:30px;text-align:center;text-decoration:none;margin:2px}
.fa-pinterest {background:#cb2027;color:white;font-size:30px;width:30px;text-align:center;text-decoration:none;margin:2px}
.fa-skype { background:#00aff0;color:white;font-size:30px;width:30px;text-align:center;text-decoration:none;margin:2px}
.fa-whatsapp { background:green;color:white;font-size:30px;width:30px;text-align:center;text-decoration:none;margin:2px}
.fa-phone { background:#00aff0;color:white;font-size:30px;width:30px;text-align:center;text-decoration:none;margin:2px}
/*.fa-facebook, .fa-envelope, .fa-twitter, .fa-phone, .fa, .fa-whatsapp :hover {opacity: 0.7;}*/

#rotatedDIV {background-color:lightblue;-ms-transform: rotate(270deg);-webkit-transform: rotate(270deg);     -moz-transform: translateY(-50%);-o-transform: translateY(-50%);transform:rotate(270deg);}
.verticaltext {transform: rotate(-90deg);transform-origin: right, top 0; -ms-transform: rotate(-90deg);    -ms-transform-origin:right, top; -webkit-transform: rotate(-90deg);-webkit-transform-origin:right, top;position: absolute;color: #ed217c;}
#verticalspan {transform-origin: right, top 0; width: 50px;height: 200px; -webkit-transform: rotateZ(270deg);transform: rotateZ(270deg);}

.margin-0{margin:0!important}

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
  border-radius: 5px;
}

.container-iframe {
  position:relative;overflow:hidden;width:100%;padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;
}

#mssg{position:fixed;left:20px;bottom:100px;max-width:400px;z-index:200;}
.mssg{position:fixed;left:20px;bottom:100px;max-width:400px;z-index:200;}
/* .mssg{top:150px}*/

.serif{font-family:Georgia, Times, "Times New Roman", Garamond, serif}
.sans-serif{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif, system-ui}
.cursive{font-family:'Brush Script MT', 'Brush Script Std', 'Lucida Calligraphy', 'Lucida Handwriting', 'Apple Chancery', cursive}
.monospace{font-family:'Fira Mono', 'DejaVu Sans Mono', Menlo, Consolas, 'Liberation Mono', Monaco, 'Lucida Console', monospace}
.monotype-corsiva{font-family:'Monotype Corsiva', Georgia, Times, "Times New Roman", Garamond, serif}
.lucida-calligraphy{font-family:'Lucida Calligraphy', Georgia, Times, "Times New Roman", Garamond, serif}
.edwardian-script{font-family:'Edwardian Script ITC', 'Lucida Calligraphy', 'Apple Chancery', 'Comic Sans MS', Georgia, Times, "Times New Roman", Garamond, serif}
.commercial-script{font-family:'CommercialScript BT', Georgia, Times, "Times New Roman", Garamond, serif}
.old-english-text{font-family:'Old English Text MT', Georgia, Times, "Times New Roman", Garamond, serif}
.cambria{font-family:Cambria, Georgia, Times, "Times New Roman", Garamond, serif}
.britannic-bold{font-family:'Britannic Bold', Impact, fantasy}
.bookman-old-style{font-family:Bookman Old Style, Impact, serif}
.arial-black{font-family:'Arial Black', Impact, Verdana, Geneva, fantasy}
.algerian{font-family:Algerian, Impact, Verdana, Geneva, sans-serif, fantasy}
.fantasy{font-family:Papyrus, Herculanum, 'Party LET', 'Curlz MT', Harrington, fantasy}

/* prevent table data wrap*/
 th, td {
   white-space: nowrap;
  }

.badge2,.tag2{background-color:#fff;color:#000;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.badge2{border-radius:50%}
.modal-border{border:6px solid #ccc!important}

/* font styles */
.playball-font{font-family:"Playball",Verdana,serif;font-weight:400;}
.tangerine-font{font-family:"Tangerine",Geneva,serif;font-weight:400;}

.margin-small{margin:6px!important}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/*begin callout*/
div.callout {
	height: 60px;
	width: 200px;
	float: left;
}

div.callout {
	background-color: #444;
	background-image: -moz-linear-gradient(top, #444, #444);
	position: relative;
	color: #ccc;
	padding: 10px;
	border-radius: 3px;
	box-shadow: 0px 0px 20px #999;
	margin: 25px;
	min-height: 50px;
	border: 1px solid #333;
	text-shadow: 0 0 1px #000;
	
	/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}

.callout::before {
	content: "";
	width: 0px;
	height: 0px;
	border: 0.8em solid transparent;
	position: absolute;
}

.callout.top::before {
	left: 45%;
	bottom: -20px;
	border-top: 10px solid #444;
}

.callout.bottom::before {
	left: 45%;
	top: -20px;
	border-bottom: 10px solid #444;
}

.callout.left::before {
	right: -20px;
	top: 40%;
	border-left: 10px solid #444;
}

.callout.right::before {
	left: -20px;
	top: 40%;
	border-right: 10px solid #444;
}

.callout.top-left::before {
	left: 7px;
	bottom: -20px;
	border-top: 10px solid #444;
}

.callout.top-right::before {
	right: 7px;
	bottom: -20px;
	border-top: 10px solid #444;
}

/* plac-examples
<div class="callout top">Your Favourite HTML,CSS,JS Playground!</div>
<div class="callout bottom">Your Favourite HTML,CSS,JS Playground!</div>
<div class="callout left">Your Favourite HTML,CSS,JS Playground!</div>
<div class="callout right">Your Favourite HTML,CSS,JS Playground!</div>
<div class="callout top-left">Your Favourite HTML,CSS,JS Playground!</div>
<div class="callout top-right">Your Favourite HTML,CSS,JS Playground!</div>*/
/* end callout */
.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}/* plac-examples: <span class="dot"></span>*/

.fiftypercent-transparency {
	background-color: rgba(0,0,0,0.5);
	background-color: rgb(0, 0, 0);
}
 