/*;
 * PieCSS v1.0.0 ()
 * Copyright 2020 by Eugy Enoch
 * For PieCSS,Pie.css
 * MIT License (https://raw.github.com/)
 */

/*CSS RESET AND BROWSER INITIALIZING BEGINS*/
/*;
*One benefit of this section of CSS is for the practice known as the CSS or the browser Reset.
*In your work, please note that the <b> and <i> elements 
*for bold and italics respectively have been deprecated 
*and might be removed in future revisions of the PieCSS framework
*It is hence advised to use the <strong> and <em> elements respectively
*The <i> element can be best be used now when working with icons.
*/

/*CSS reset => Cross browser CSS Reset Rules*/
*,*:before,*:after{box-sizing:inherit;}
*[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}
/*Remove the margin in all browsers*/
body{margin:0;} 

/*=>Cross browser Initializing and adjustments*/
/*
* Extract from normalize.css v8.0.1 
* by Nicolas Gallagher and Jonathan Neal
* Released under the MIT license 
* http://github.com/necolas/normalize.css/blob/master/normalize.css 
*/

/*Prevents adjustment of font size after changes in iOS*/
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

/*Renders elements consistently in older browsers, esp. in IE*/
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}

/*Adjusts the correct vertical alignment in
; Chrome, Firefox and Opera*/
progress{vertical-align:baseline}

/*Adjusts background on hyperlinks in IE 10*/
a{background-color:transparent;-webkit-text-decoration-skip:objects}
a:active,a:hover{outline-width:0}

/*Removes the bottom border in chrome 57- 
;and adds the correct text decoration in Chrome, Edge, IE, Opera and Safari*/
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}

/*Prevenets the 'sub' and 'sup' elements from affecting the line height
;in all browsers*/
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}

/*Removes the border on images inside links in IE 10*/
img{border-style:none}svg:not(:root){overflow:hidden}

/*corrects the inheritance and scaling of font size in all browsers*/
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
hr{box-sizing:content-box;height:0;overflow:visible}

/*changes the font syles for forms in all browsers
;and removes form margins in Firefox and Safari*/
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}

/*removes the inheritance of text transform from form elements 
;in IE,Edge and Firefox*/
button,select{text-transform:none}

/*Shows the form element overflow in IE and Edge*/
button,input{overflow:visible}

/*Corrects the inability to style clickable types in iOS and Safari*/
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}

/*Removes the inner border and padding in Firefox*/
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}

/*Restores the focus styles unset by the styling above*/
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}

/*Corrects the padding in Firefox*/
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}

/*Corrects the text-wrapping and color inheritance in IE and Edge*/
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}

/*removes the default vertical scrollbar in IE 10 */
textarea{overflow:auto}

/*Removes the padding in IE 10*/
[type=checkbox],[type=radio]{padding:0}

/*Corrects the cursor style of ++ and -- buttons in Chrome*/
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}

/*Corrects the odd appearance and outline style in Safari*/
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,

/*removes the inner padding and color in Chrome and Chrome and Safari on MacOS*/
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-input-placeholder{color:inherit;opacity:0.54}

/*Corrects the inability to style clickable types in iOS and Safari 
; and changes font properties in Safari*/
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/*CSS RESET AND BROWSER INITIALIZING ENDS*/
/*;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;*/
/*MAIN CSS BEGINS*/ 
/*Common rules*/

/*adjust browser viewport orientation on the x-axis*/
html{overflow-x:hidden;box-sizing:border-box;}

/*Correct line height and set scroll and font properties in all browsers*/
body{font-family:Tahoma,Verbuna,Orbitron,Helvetica,Verdana,sans-serif;font-size:14px;line-height:1.5;color:#000000;scroll-behavior:smooth;}
h1{font-size:36px;}h2{font-size:30px;}h3{font-size:24px;}h4{font-size:20px;}h5{font-size:18px;}h6{font-size:16px;}
@media (max-width:610px){
h1{font-size:20px;}h2{font-size:18px;}h3{font-size:16px;}h4{font-size:14px;}h5{font-size:12px;}h6{font-size:10px;}}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,Tahoma,Verbuna,Orbitron,Helvetica,Verdana,sans-serif;font-weight:400;margin:10px 0;}
hr{border:0;border-top:1px solid #eee;margin:20px 0;}
p{margin-top:0;margin-bottom:auto;} mark{background-color:#E6E6FA;padding:10px;} abbr{border-bottom:dashed;letter-spacing:2px;}

/*Use the #pie or .pie to create your main container - optional but useful*/
#pie{overflow:hidden;display:inline-block;margin:6px;} /*OR*/ .pie{overflow:hidden;display:inline-block;margin:6px;}

/*Use the #radius or .radius to create your inner major containers - optional*/
#radius{position:absolute;overflow:hidden;padding-top:10px;padding-bottom:10px;display:inline-block;} /*OR*/ .radius{position:absolute;overflow:hidden;padding-top:10px;padding-bottom:10px;display:inline-block;}

/*RADIUS in PieCss represents Inner major sectors - that is Rows and columns*/
/*Full width radius ->(row and column)
*The use of 'row' may be deprecated in the future to give rise to full radius rules
*Also the use of the #pie-? id may be replaced or removed entirely in future release*/
.radius-row{position:absolute;width:100%;height:100%;overflow:hidden;}
/*OR*/
#pie-360{position:absolute;width:100%;height:100%;overflow:hidden;}

/*Two equal columns in one row*/
.radius-row-half{position:absolute;width:50%;height:auto;overflow:hidden;}
/*OR*/
#pie-180{position:absolute;width:50%;height:auto;overflow:hidden;}

/*Three equal columns in one row*/
.radius-row-third{position:absolute;width:33.33%;height:auto;overflow:hidden;}
/*OR*/
#pie-120{position:absolute;width:33.33%;height:auto;overflow:hidden;}

/*Four equal columns in one row*/
.radius-row-quarter{position:absolute;width:25%;height:auto;overflow:hidden;}
/*OR*/
#pie-90{position:absolute;width:25%;height:auto;overflow:hidden;}

/*Two third of a row*/
.radius-row-two{position:absolute;width:66.66%;height:auto;overflow:hidden;}
/*OR*/
#pie-66{position:absolute;width:66.66%;height:auto;overflow:hidden;}

/*three quarter of a row*/
.radius-row-three{position:absolute;width:75%;height:auto;overflow:hidden;}
/*OR*/
#pie-75{position:absolute;width:75%;height:auto;overflow:hidden;}

/*Mobile responsiveness for any rows chosen above*/
@media(max-width:600px){.radius-row-half{position:absolute;width:100%;height:auto;overflow:hidden;}
	#pie-180{position:absolute;width:100%;height:auto;overflow:hidden;}}
@media(max-width:600px){.radius-row-third{position:absolute;width:100%;height:auto;overflow:hidden;}
	#pie-120{position:absolute;width:100%;height:auto;overflow:hidden;}}
@media(max-width:600px){.radius-row-quarter{position:absolute;width:100%;height:auto;overflow:hidden;}
    #pie-90{position:absolute;width:100%;height:auto;overflow:hidden;}}
	@media(max-width:990px){.radius-row-quarter{position:absolute;width:50%;height:auto;overflow:hidden;}
    #pie-90{position:absolute;width:50%;height:auto;overflow:hidden;}}
@media(max-width:600px){.radius-row-two{position:absolute;width:100%;height:auto;overflow:hidden;}
    #pie-66{position:absolute;width:100%;height:auto;overflow:hidden;}}
@media(max-width:600px){.radius-row-three{position:absolute;width:100%;height:auto;overflow:hidden;}
    #pie-75{position:absolute;width:100%;height:auto;overflow:hidden;}}
/*Rows and column using radius definitions ends*/

/*ARCS in PieCss represents Inner minor sectors - that is Rows and columns*/
/*{Fluid arcs  default}
*Use the #arc or .arc to create your inner minor containers - optional but useful*/
#arc{display:inline-block;width:auto;height:auto;position:absolute;overflow:hidden;} /*OR*/ .arc{display:inline-block;width:auto;height:auto;position:absolute;overflow:hidden;}

/*Fixed arcs - using the "#arc-fixed" or ".arc-fixed"*/
#arc-fixed{display:block;position:fixed;z-index:1001;}
@media only screen and (max-width:600px){#arc-fixed{min-width:100%;bottom:0%;}}
@media only screen and (min-width:601px) and (max-width:993px){#arc-fixed{min-width:30%;left:5%;bottom:7%;}}
/*OR*/
.arc-fixed{display:block;position:fixed;z-index:1001;}
@media only screen and (max-width:600px){.arc-fixed{min-width:100%;bottom:0%;}}
@media only screen and (min-width:601px) and (max-width:993px){.arc-fixed{min-width:30%;left:5%;bottom:7%;}}
/*Rows and column using arc definitions ends*/

/*Unset position of elements - useful to prevent unintentional fold/render blocking*/
.unset{position:unset !important;}
/*Rows and column manipulation*/
		
.pie-overwrite{}/*Overwrite CSS for a radius/arc/row/container*/

/*Hide and show (site/pagewide) containers/contents - Miscellaneous */
.pie-tab {display:inline-block;text-decoration:inherit;} 
.pie-hide{display:none!important;} 
.pie-show,.pie-show-block{display:block!important;}
.pie-show-inline-block{display:inline-block!important;}
.pie-show-inline{display:inline!important;}

/*Add responsiveness to a container*/
.pie-responsive,.radius-responsive,.arc-responsive{display:block;overflow-x:auto;}

/*Center an entire site/page*/
.site-center{max-width:500px;margin:auto;padding:10px;background:#fff;}

/*Vertical center alignment*/
.vc-align{margin:auto;position:absolute;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%);}

/*Displays a radius(inner row) in block*/
.radius-block{display:block;width:100%;}

/*Prevent user right-clicking any element within a radius(i.e row/container)*/
.radius-disable-click{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}

/*Prevent user right-clicking within entire site or within a class - will be deprecated in future release*/
* .pie-disable-click{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}

/*Use this to recover a radius (=>row or section of a row)*/
.radius-recover{overflow:hidden;}

/*Stretch a radius(=>row)*/
.radius-stretch{margin-left:-16px;margin-right:-16px;}

/*row measurements - Position -> Overflow -> Visibility*/
.pie-pov {position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden;}
.pie-pov pre,blockquote,code,samp,quote {position:static;}

/*Row contents >> applies in every container element really*/
.radius-content,.row-auto{margin-left:auto;margin-right:auto;}
.radius-content{max-width:980px;}
.row-auto{max-width:1140px;}
.contents-center{top:50%;left:50%;transform:translate(-50%,-50%);}
.contents-bottom-center{bottom:0;left:50%;transform:translateX(-50%);}
.contents-top-center{top:0;left:50%;transform:translateX(-50%);}
.contents-top{top:0;}
.contents-bottom{bottom:0;}
.contents-left-center{left:40%;}
.contents-top-left{top:0;left:16px;}
.contents-bottom-left{bottom:0;left:16px;}
.contents-right-center{right:40%;}
.contents-top-right{top:0;right:16px;}
.contents-bottom-right{bottom:0;right:16px;}
@media(max-width:1205px){.row-auto{max-width:95%;}}
/*Draw lines*/
.hr-short{margin:auto; width:50%}
.hr-long{margin:auto; width:100%}

/*Create newspaper style columns-
;You may also include .arc or #arc to inherit column-fill and column-count property for inner minor rows*/
.radius-block .col-2{column-count:2;-webkit-column-count:2;-moz-column-count:2;column-fill:balance;-moz-column-fill:balance;} 
.radius-block .col-3{column-count:3;-webkit-column-count:3;-moz-column-count:3;column-fill:balance;-moz-column-fill:balance;} 
.radius-block .col-4{column-count:4;-webkit-column-count:4;-moz-column-count:4;column-fill:balance;-moz-column-fill:balance;} 
.radius-block .col-5{column-count:5;-webkit-column-count:5;-moz-column-count:5;column-fill:balance;-moz-column-fill:balance;}
/*Include any of the classes below to add gaps between columns
*gaps can be small, medium or large gaps*/
.col-gap-none{column-gap:-webkit-column-gap:0px;-moz-column-gap:0px;column-gap:0px;}
.col-gap-xs{column-gap:-webkit-column-gap:5px;-moz-column-gap:5px;column-gap:5px;}
.col-gap-s{column-gap:-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;}
.col-gap-m{column-gap:-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;}
.col-gap-l{column-gap:-webkit-column-gap:40px;-moz-column-gap:40px;column-gap:40px;}
.col-gap-xl{column-gap:-webkit-column-gap:60px;-moz-column-gap:60px;column-gap:60px;}
/*Reset newspaper style columns*/
.radius-block .col-reset{column-count:initial;-webkit-column-count:initial;-moz-column-count:initial;column-fill:initial;-moz-column-fill:initial;column-gap:-webkit-column-gap:initial;-moz-column-gap:initial;column-gap:initial;}

/*Rows and column manipulation ends*/

/*Background image for any element - discourages a repeat*/
/*Without animations*/
.bg-image{background-image:url('/*specify image url*/'); background-repeat:no-repeat;
  background-attachment:fixed; background-position:top; background-size:auto;}
/*With animations*/
.bg-image-animate{background-image:url('../images/map-coming-soon.jpg');background-attachment:fixed; background-position:top; background-size:auto;
  background-repeat:no-repeat; animation:animatedBackground 40s linear infinite;}
  @keyframes animatedBackground{from{background-position: 0 0;}
	to{background-position: 100% 0;}}

/*PIE PACKETS (Experimental);
*can also be used to mark sections in your HTML document;
*optional but useful*/
.packets{position:absolute;top:-50px; bottom:-20px;left:0;right:0;overflow:hidden;}
.packet{border-left:1px solid #ccc;position:absolute;top:0; bottom:0;}

/*SIDEBARS
*use together with the Float left and right classes to move sidebar left or right*/
.pie-sidebar{height:100%;max-width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
@media (max-width:500px){.pie-sidebar{height:auto;max-width:100%;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}}

/*OTHER IMPORTANT MANIPULATION CLASSES TO NOTE*/
/*Float left and right
*can also be used with any of the ".clear-?" classes to clear float
*and can also be used with any box model classes to achieve desired*
*box model effect*/
.move-left{float:left!important;} .move-right{float:right!important;}

/*Defining width-only*/
/*Give maximum width only of 100% to any element or class
*renders same across devices*/
.sector-width{max-width:100% !important;}

/*Give maximum width only of 90% to any element or class
*renders same across devices*/
.sector-width-90{max-width:90% !important;}

/*Give maximum width only of 75% to any element or class*/
.sector-width-75{max-width:75% !important;}

/*Give maximum width only of 50% to any element or class*/
.sector-width-50{max-width:50% !important;}

/*Give maximum width only of 33.33% to any element or class*/
.sector-width-33{max-width:33.33% !important;}

/*Give maximum width only of 25% to any element or class*/
.sector-width-25 {max-width:25% !important;}

/*Give maximum width only of 20% to any element or class*/
.sector-width-20 {max-width:20% !important;}
@media screen(max-width:500px){
	.sector-width-75{max-width:100%;} .sector-width-50{max-width:100%;}
	.sector-width-33{max-width:100%;} .sector-width-25{max-width:100%;}
	.sector-width-20{max-width:100%;}
}
/*End of width Definintion*/

/*Radius widgets*/
.radius-linewidget{position:relative;z-index:2;overflow:auto;}
/*OTHER IMPORTANT MANIPULATION CLASSES ENDS*/
 
/*Modal containers*/
.radius-modal{z-index:3;display:none;padding-top:90px;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)}
.radius-modal-content{margin:auto;background-color:#fffafa;position:relative;padding:0;outline:0;width:600px}
@media (max-width:600px){.radius-modal{z-index:3;display:none;padding-top:90px;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)}
.radius-modal-content{margin:auto;background-color:#fffafa;position:relative;padding:0;outline:0;width:600px}}
/*USE THIS WITH MODAL TO CREATE HIDE Button
 <span onclick="document.getElementById('id01').style.display='none'"
      class="pie-btn element-disp-topright">&times;</span>
*/

/*ASPECT RATIOS*/
/*Content aspect align - works outside aspect ratios as well, for all content placements*/
.content-align{position:absolute;top:0;left:0;bottom:0;right:0;}
.content-align-aspect{position:absolute;top:0;left:0;bottom:0;right:0;text-align:center;}

/*Maintain aspect ratios for a radius(container/row)
Use together with ".text-align-aspect" or ".content-align-aspect" class*/
/*1:1 aspect ratio*/
.aspect-ratio-11{background:inherit;position:relative;width:100%;padding-top:100%;}
/*3:2 aspect ratio*/
.aspect-ratio-32{background:inherit;position:relative;width:100%;padding-top:66.66%;}
/*4:3 aspect ratio*/
.aspect-ratio-43{background:inherit;position:relative;width:100%;padding-top:75%;}
/*8:5 aspect ratio*/
.aspect-ratio-85{background:inherit;position:relative;width:100%;padding-top:62.5%;}
/*16:9 aspect ratio*/
.aspect-ratio-169{background:inherit;position:relative;width:100%;padding-top:56.25%;}
/*ASPECT RATIOS END*/

/*Defining tables*/
/*
*You should first create a section named table-section to hold your table
*Then name the section 'table-section' as a class
*/
.table-section{overflow-x:auto; /*will make table responsive*/}
table, th, td {border:none;}
table{width: 100%;display:table;}
table.bordered > thead > tr, table.bordered > tbody > tr {border-bottom:1px solid #d0d0d0; border-collapse:collapse;}
table.striped > tbody > tr:nth-child(odd){background-color:#f2f2f2;}
table.hoverable > tbody > tr{-webkit-transition:background-color .25s ease;-moz-transition:background-color .25s ease;
-o-transition: background-color .25s ease;-ms-transition:background-color .25s ease;transition:background-color .25s ease;}
table.hoverable > tbody > tr:hover{background-color:#f2f2f2;}
table.centered thead tr th, table.centered tbody tr td {text-align:center;}
table.left-aligned thead tr th, table.left-aligned tbody tr td {text-align:left;}
table.right-aligned thead tr th, table.right-aligned tbody tr td {text-align:right;}
thead {border-bottom:1px solid #d0d0d0;}
td,th {padding:15px 5px;display:table-cell;text-align:left;vertical-align:middle;border-radius:2px; }
@media only screen and (max-width:990px){
table.responsive {width:100%;border-collapse:collapse;border-spacing:0;display:block;position:relative;/* will arrange borders */ }
table.responsive th, table.responsive td {margin:0;vertical-align:top;}
table.responsive th{text-align:left;} table.responsive thead{display:block;float:left;}
table.responsive thead tr {display:block;padding:0 10px 0 0;}
table.responsive thead tr th::before {content:"\00a0";}
table.responsive tbody {display:block;width:auto;position:relative;overflow-x:auto;white-space:nowrap;}
table.responsive tbody tr {display:inline-block;vertical-align:top;}
table.responsive th {display:block;text-align:right;}table.responsive td {display:block;min-height:1.25em;text-align:left;}
table.responsive tr {padding:0 10px;}table.responsive thead {border:0;border-right:1px solid #d0d0d0;}
table.responsive.bordered th {border-bottom:0;border-left:0;}
table.responsive .bordered td {border-left:0;border-right:0;border-bottom:0;}
table.responsive.bordered tr {border:0;}
table.responsive .bordered tbody tr {border-right:1px solid #d0d0d0;}}
/*Table caption*/
.bottom-caption{caption-side:bottom;} .top-caption{caption-side:top;}
/*Table definitions end*/

/*FLIP BOX
*You can use ".pie-flip-back" and ".pie-flip-front" together with any color class
*to produce a different background color and text color*/
.pie-flip{background-color:transparent;width:auto;height:auto;border:1px solid #f1f1f1;perspective:1000px;}
.pie-flip-front{background:#808080;color:#fff;}
.pie-flip-front,.flip-flip-back{position:absolute;max-width:100%;height:100%;backface-visibility:hidden;}
.pie-flip-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform 0.8s;transform-style:preserve-3d;}
/*Flip box => horizontal
*Include the below code to the above three classes to do a horizontal flip*/
.pie-flip-back-horizontal{background-color:#4169E1;color:#fff;transform:rotateY(180deg);}
.pie-flip-horizontal:hover .pie-flip-inner-horizontal {transform: rotateY(180deg);}
/*Flip box => vertical
*Include the below codes to the first three classes to do a vertical flip*/
.pie-flip-back-vertical{background-color:#4169E1;color:#fff;transform:rotateX(180deg);}
.pie-flip-vertical:hover .pie-flip-inner-vertical {transform: rotateX(180deg);}
/*end of the flip box*/

/*Footer section >> works with any container element*/
footer.page-footer{margin-top:20px;padding-top:20px;background-color: #ee6e73;}
@media(max-width:610px){
footer.page-footer{margin-top:10px;padding-top:10px;background-color: #ee6e73;}}

footer.page-footer .footer-copyright{overflow:hidden;height:50px;line-height:50px;
color: #ffffff; background-color: #333333;}
@media(max-width:610px){
footer.page-footer .footer-copyright{overflow:hidden;height:25px;line-height:25px;
color: #ffffff; background-color: #333333;}}
/*footer ends*/

/*Zoom contents on hover*/
.pie-zoom{padding:40px;background-color:inherit;transition:transform .2s;width:200px;height:200px;margin:0 auto;}
.pie-zoom:hover{transform:scale(1.5);}

/*Give all hyperlinks a default title attribute when none is present;
*useful for SEO;
*to overwrite, simply specify a title attribute/value of your choice*/
a[title=""]{content:"visit my link";}

/*IMAGES*/
img{vertical-align:middle;} .pie-image{max-width:100%;height:auto;}

/*contain images*/
img.bg-image,img.bg-image-animate{position:relative; height:100%; width:100%;background-repeat:no-repeat;background-size:100% 100%;}

/*Give all images a default title attribute when none is present;
*useful for SEO;
*to overwrite, simply specify a title attribute/value of your choice*/
img[title=""]{content:"My image";} img[alt=""]{content:"my image";}
img[description=""]{content:"This is an image used on my website";}

/*Cut off the sides of an image,and fill in any spaces:*/
.arc img{object-fit:fill; /*this wil preserve your intended aspect ratio*/}

/*Image gallery - using a section or any container tag really*/
section.gallery {width:200px;margin:5px;border:1px solid #ccc;float:left;}
section.gallery:hover{border:1px solid #777;} section.gallery img{width:100%;height:auto;}
section.desc {text-align:center;padding:14px; /*image description*/}
@media only screen and (max-width:600px){section.gallery{width:100%;border:1px solid #ccc;}
	section.desc {text-align:center;padding:9px; /*image description*/}
	.clearfix:after{content: "";display:table;clear:both;}}


/*Image slider*/
.img-slider{display:none;width:100%;}/*this will be used with PieJs to slide the images*/

/*Use on an image tag before a <p> or any element whose content will overlay the image*/
.image-behind-text{position:absolute;left:0px;top:0px;z-index:-1;}
/*Images ends*/

/*Video and audio container - can also use the aspect ratio classes for this
; here, the aspect ratio 16:9 class was used for the arc-multimedia class*/
.arc-multimedia{position:relative;padding-top:30px;padding-bottom:56.25%;height:0;overflow:hidden;}
.arc-multimedia iframe, .arc-multimedia object, .arc-multimedia embed{position:absolute;top:0;left:0;width:100%;height:100%;}

/*Progress*/
.progress{position:relative;height:auto;display:block;width:100%;background-color:#000080;border-radius:3px;margin:1px 0 2px 0;overflow:hidden;}

/*BOX MODEL AND ANIMATIONS*/

/*PieBox - better replacement for sliders and the slider section
*Can go with any color and text classes*/
.piebox{position:relative;height:100vh;max-width:100%;display:flex;flex-wrap:wrap;display:-webkit-flex;background:#000;}
.piebox-screen{position:relative;justify-content:flex-end;align-items:flex-end;flex-grow:2;overflow:hidden;display:flex;transition:1s;}
.piebox-screen img{background-size:cover; background-repeat:no-repeat; background-position:center;}
.piebox:hover .piebox-screen{opacity:0.1s;}
.piebox .piebox-screen:hover{flex-grow:5;opacity:1;}
/*contents of the piebox*/
.piebox .piebox-screen .piebox-content{position:absolute;flex:25%;height:auto;background:#fff;padding:40px;box-sizing:border-box;transform:translateX(100%);transition:0.5s;text-align:justify;}
.piebox .piebox-screen:hover .piebox-content{transform:translateX(0);transition-delay:0.5s;}
.piebox .piebox-screen .piebox-content h1,h2,h3,h4,h5,h6{margin:0;padding:0;text-transform:uppercase;font-size:30px;color:#ed363a;}
.piebox .piebox-screen .piebox-content p,span{margin:0;padding:0;}
.piebox .piebox-screen .piebox-content img{margin:0;padding:0;max-width:100%;height:auto;}
@media(max-width:990px){
	.piebox .piebox-screen .content{position:absolute;flex:50%;padding:14px;height:auto;background:#fff;box-sizing:border-box;transform:translateX(100%);transition:0.5s;text-align:justify;}
}
@media(max-width:600px){
	.piebox{position:relative;height:100vh;display:flex;flex-wrap:wrap;display:-webkit-flex;background:#000;flex-direction:column;}
	.piebox .piebox-screen{position:relative;justify-content:flex-end;align-items:flex-end;flex-grow:2;overflow:hidden;display:flex;transition:1s;flex-direction:column;}
	.piebox .piebox-screen .piebox-content{position:absolute;flex:50%;padding:14px;height:auto;background:#fff;box-sizing:border-box;transform:translateX(100%);transition:0.5s;text-align:justify;}
}
/*PieBox ends*/


/*Grid (4X4) Model - Can go with any color and text classes*/
/*Block grid*/
.pie-grid-block{display:grid; grid-template-columns:auto auto auto auto; grid-template-rows:auto auto auto auto;
        padding:10px;grid-gap:0px 0px;}
.pie-grid-block .grid-content{padding:30px;font-size:20px;}
.pie-grid-block > section{padding:20px 0px; font-size:20px;}

/*Inline grid*/
.pie-grid-inline{display:grid; grid-template-columns:auto auto auto auto; grid-template-rows:auto auto auto auto;
        padding:10px;grid-gap:0px 0px;}
.pie-grid-inline .grid-content{padding:30px;font-size:20px;}
.pie-grid-inline > section{padding:20px 0px; font-size:20px;}
/*Grid model ends*/

/*Fade in*/
.fadein{opacity:0;transform-origin:0 50%;}

/*Element selected*/
.element-selected{background:#d9d9d9;}

/*Transparent and hover*/
.element-transparent,.element-transparent-hover:hover{background-color:transparent!important;}
.element-hover-none:hover{box-shadow:none!important;}

/*Extend an entire HTML element - use together with any color class
*for background and text colors*/
/*Extend element width over a  small space*/
#extend-width-sm{width:100px;height:100px;-webkit-transition:width 2s;transition:width 2s;}
#extend-width-sm:hover{width:300px;}
/*Extend element height over a small space*/
#extend-height-sm{width:100px;height:100px;-webkit-transition:height 2s;transition:height 2s;}
#extend-height-sm:hover{height:300px;}
/*Transition element width and height over a small space*/
#extend-width-height-sm{width:100px;height:100px;-webkit-transition:width 2s, height 2s;transition:width 2s, height 2s;}
#extend-width-height-sm:hover{width:300px;height:300px}

/*Extend element width over a  large space*/
#extend-width-lg{width:200px;height:200px;-webkit-transition: width 2s;transition:width 2s;}
#extend-width-lg:hover{width:600px;}
/*Extend element height over a large space*/
#extend-height-lg{width:200px;height:200px;-webkit-transition:height 2s;transition:height 2s;}
#extend-height-lg:hover{height:600px;}
/*Extend element width and height over a large space*/
#extend-width-height-lg{width:200px;height:200px;-webkit-transition:width 2s,height 2s;transition:width 2s,height 2s;}
#extend-width-height-lg:hover{width:600px;height:600px}

/*Extend element width over entire page*/
#extend-width-fill{width:200px;height:200px;-webkit-transition:width 2s;transition:width 2s;}
#extend-width-fill:hover{width:100%;}
/*Extend element height over entire page*/
#extend-height-fill{width:200px;height:200px;-webkit-transition:height 2s;transition:height 2s;}
#extend-height-fill:hover{height:100%;}
/*Extend element width and height over a entire page*/
#extend-width-height-fill{width:200px;height:200px;-webkit-transition:width 2s,height 2s;transition:width 2s,height 2s;}
#extend-width-height-fill:hover{width:100%;height:100%;}

@media(max-width:500px){
	/*Extend element width over a small space*/
#extend-width-sm{width:100px;height:100px;-webkit-transition:width 2s;transition:width 2s;}
#extend-width-sm:hover{width:100%;clear:both;}
/*Extend element width over a small space*/
#extend-height-sm{width:100px;height:100px;-webkit-transition:height 2s;transition:height 2s;}
#extend-height-sm:hover{height:auto;clear:both;}
/*Extend element width and height over a small space*/
#extend-width-height-sm{width:100px;height:100px;-webkit-transition:width 2s,height 2s;transition:width 2s,height 2s;}
#extend-width-height-sm:hover{width:100%;height:auto;}

/*Extend element width over a large space*/
#extend-width-lg{width:200px;height:200px;-webkit-transition:width 2s;transition:width 2s;}
#extend-width-lg:hover{width:100%;clear:both;}
/*Extend element width over a large space*/
#extend-height-lg{width:200px;height:200px;-webkit-transition:height 2s;transition:height 2s;}
#extend-height-lg:hover{height:auto;clear:both;}
/*Extend element width and height over a large space*/
#extend-width-height-lg{width:200px;height:200px;-webkit-transition:2s;transition:2s;}
#extend-width-height-lg:hover{width:100%;height:auto;clear:both;}
}

/*Extend + Transform an entire HTML element - use together with any color class
*for background and text colors*/
/*Transform element width over a small space*/
#transform-width-sm{width:100px;height:100px;-webkit-transition:width 2s height 2s -webkit-transform 2s;transition:width 2s height 2s, transform 2s;}
#transform-width-sm:hover{width:300px;-webkit-transform: rotate(180deg);transform: rotate(180deg);}
/*Transform element height over a small space*/
#transform-height-sm{width:100px;height:100px;-webkit-transition:height 2s, -webkit-transform 2s;transition:height 2s,transform 2s; }
#transform-height-sm:hover{height:300px;-webkit-transform: rotate(180deg);transform: rotate(180deg);}
/*Transform horizontally/vertically over a small space*/
#transform-width-height-sm{width:100px;height:100px;-webkit-transition:width 2s, height 2s, -webkit-transform 2s;transition:width 2s, height 2s, transform 2s;}
#transform-width-height-sm:hover{width:300px;height:300px;-webkit-transform: rotate(180deg);transform: rotate(180deg);}

/*Transform element width over a large space*/
#transform-width-lg{width:200px;height:200px;-webkit-transition:width 2s height 2s -webkit-transform 2s;transition:width 2s height 2s,transform 2s;}
#transform-width-lg:hover{width:600px;-webkit-transform: rotate(180deg);transform: rotate(180deg);}
/*Transform element height over a large space*/
#transform-height-lg{width:200px;height:200px;-webkit-transition:width 2s height 2s -webkit-transform 2s;transition:width 2s height 2s,transform 2s;}
#transform-height-lg:hover{height:600px;-webkit-transform: rotate(180deg);transform: rotate(180deg);}
/*Transform element width and height over a large space*/
#transform-width-height-lg{width:200px;height:200px;-webkit-transition:width 2s height 2s -webkit-transform 2s;transition:width 2s height 2s,transform 2s;}
#transform-width-height-lg:hover{width:600px;height:600px;-webkit-transform: rotate(180deg);transform: rotate(180deg);}

/*Transform element width over entire page*/
#transform-width-fill{width:200px;height:200px;-webkit-transition:width 2s height 2s -webkit-transform 2s;transition:width 2s height 2s,transform 2s;}
#transform-width-fill:hover{width:100%;-webkit-transform: rotate(180deg);transform: rotate(180deg);}
/*Transform element height over a entire page*/
#transform-height-fill{width:200px;height:200px;-webkit-transition:width 2s height 2s -webkit-transform 2s;transition:width 2s height 2s,transform 2s;}
#transform-height-fill:hover{height:100%;-webkit-transform: rotate(180deg);transform: rotate(180deg);}
/*Transform element width and height over a entire page*/
#transform-width-height-fill{width:200px;height:200px;-webkit-transition:width 2s height 2s -webkit-transform 2s;transition:width 2s height 2s,transform 2s;}
#transform-width-height-fill:hover{width:100%;height:100%;-webkit-transform: rotate(180deg);transform: rotate(180deg);}

@media(max-width:500px){
/*Transform elements over a small space*/
#transform-width-sm{width:100px;height:100px;-webkit-transition:width 2s;transition:width 2s;}
#transform-width-sm:hover{width:100%;clear:both;}
/*Transform element height over a small space*/
#transform-height-sm{width:100px;height:100px;-webkit-transition:width 2s;transition:width 2s;}
#transform-height-sm:hover{height:auto;clear:both;}
/*Transform element width and height over a small space*/
#transform-width-height-sm{width:100px;height:100px;-webkit-transition:width 2s;transition:width 2s;}
#transform-width-height-sm:hover{width:100%;height:auto;}

/*Transform element width over a large space*/
#transform-width-lg{width:200px;height:200px;-webkit-transition:width 2s;transition:width 2s;}
#transform-width-lg:hover{width:100%;clear:both;}
/*Transform element height over a large space*/
#transform-height-lg{width:200px;height:200px;-webkit-transition:width 2s;transition:width 2s;}
#transform-height-lg:hover{height:auto;clear:both;}
/*Transform element width and height over a large space*/
#transform-width-height-lg{width:200px;height:200px;-webkit-transition:width 2s;transition:width 2s;}
#transform-width-height-lg:hover{width:100%;height:auto;clear:both;}
}

/*Animation begins*/
/*Add box shadow*/
.element-box,.element-box-hover:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);}
/*Spin elements*/
.element-animate-spin{animation:element-spin 2s infinite linear}@keyframes element-animate-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
/*fade elements*/
.element-animate-fading{animation:fading 10s infinite}@keyframes element-animate-fading{0%{opacity:0}50%{opacity:1;}100%{opacity:0;}}
/*create opacity on elements*/
.element-animate-opacity{animation:opacity 0.8s}@keyframes element-animate-opacity{from{opacity:0;} to{opacity:1;}}
.element-opacity,.element-hover-opacity:hover{opacity:0.60;}.element-opacity-off,.element-hover-opacity-off:hover{opacity:1;}
.element-opacity-fill{opacity:0.25; filter: Alpha(opacity=25);/*For IE8 and earlier*/}.element-opacity-part{opacity:0.75;filter: Alpha(opacity=75);/*For IE8 and earlier*/}
/*Filters - grayscale or greyscale and sepia*/
.element-greyscale-fill,.element-grayscale-fill,.element-hover-greyscale:hover,.element-hover-grayscale:hover{filter:grayscale(100%);}
.element-greyscale-part,.element-grayscale-part{filter:grayscale(75%);}.element-greyscale-part,.element-grayscale-part{filter:grayscale(50%);}
.element-sepia{filter:sepia(70%);}.element-sepia-fill,.element-hover-sepia:hover{filter:sepia(100%)}.element-sepia-part{filter:sepia(50%);}
/*Animation Direction*/
.element-animate-top{position:relative;animation:animatetop 0.4s}@keyframes element-animate-top{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.element-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes element-animate-bottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.element-animate-left{position:relative;animation:animateleft 0.4s}@keyframes element-animate-left{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.element-animate-right{position:relative;animation:animateright 0.4s}@keyframes element-animate-right{from{right:-300px;opacity:0} to{right:0;opacity:1}}
/*Zoom elements*/
.element-animate-zoom{animation:animatezoom 0.6s;}@keyframes element-animate-zoom{from{transform:scale(0)} to{transform:scale(1)};}
/*use to add animation effect to any element*/
/*For ease-in-out*/
.arc-animate-element{-webkit-transition:0.4s ease-in-out;transition:0.4s ease-in-out;}
.element-animate-input{transition:width 0.4s ease-in-out;}.element-animate-input:focus{width:100%!important;}
/*For linear transitions*/
.arc-animate-element-linear{-webkit-transition:0.4s linear;transition:0.4s linear;}
/*Box model and animations end*/

/*FORMS AND BUTTONS
*optionally, use together with any color, arc-animate-element and round class*/
input{width:100%;padding:12px 20px;margin:8px 0;box-sizing:border-box;}
.input-width:focus{width:100%; /*must use together with anycolor, arc-animate-element class*/}
textarea{width:100%;height:150px;padding:12px 20px;margin:8px;box-sizing:border-box;}
.no-resize{resize:none !important;}
select{width:100%;height:auto;padding:16px 20px;}
@media and (max-width:600px){input{width:100%;padding:6px 10px;margin:4px 0;box-sizing:border-box;}
.input-width:focus{width:100%; /*must use together with the arc-animate-element class*/}
textarea{width:100%;height:70px;padding:6px 10px;box-sizing:border-box;}
select{width:100%;padding:8px 10px;}}

/*Buttons => use together with a color class for color effect*/
button,input[type=button],input[type=submit],input[type=reset],.pie-btn,.radius-btn{border:none;display:inline-block;
margin:4px 2px;padding:8px 16px;border-radius:4px;vertical-align:middle;overflow:hidden;text-decoration:none;
text-align:center;cursor:pointer;white-space:nowrap;}
@media and (max-width:600px){button,input[type=button],input[type=submit],input[type=reset],.pie-btn,.radius-btn{border:none;display:inline-block;
margin:4px 2px;padding:5px 9px;border-radius:4px;vertical-align:middle;overflow:hidden;text-decoration:none;
text-align:center;cursor:pointer;white-space:nowrap;}}
.pie-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);}
.pie-disabled,.pie-disabled:disabled.pie-btn:disabled,.radius-btn:disabled{cursor:not-allowed;opacity:0.3;}
.pie-btn.pie-disabled:hover,.pie-btn:disabled:hover{box-shadow:none;}
.radius-btn:hover{color:#000!important;background-color:#c4c4c4!important;}
.arc .button{white-space:normal;}
/*Disable user select effect on button*/
.pie-btn-select,.radius-btn-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}

/*If you do not wish to import PieCSS color and text classes for your buttons, 
*you may use this default button. One class rules all - expected to be removed in future releases*/
#button-pie{font:normal 15px arial;border:0;background: black;color:white;border-radius:5px;padding:5px 15px;
height:35px;margin-bottom:10px;}
@media(max-width:500px){
	#button-pie{font:normal 8px arial;border:0;background:black;color:white;border-radius:5px;padding:3px 9px;
height:15px;margin-bottom:5px;}
}
/*Buttons end*/
/*Forms end*/

/*Tooltip*/
.pie-tooltip{padding:10px 8px;font-size:1rem;z-index:2000;background-color:transparent;border-radius:2px;
color:#000;min-height:36px;line-height:1rem;opacity:0;display:none;position:absolute;left:0;top:0;overflow:hidden;}

/*Element Display Modes with PieCSS*/
.element-disp-top,.display-bottom{position:fixed;width:100%;z-index:1;}
.element-disp-top{top:0;}.element-disp-bottom{bottom:0;}
.element-disp-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background:inherit;z-index:2;}
.element-disp-topleft{position:absolute;left:0;top:0;}.element-disp-topright{position:absolute;right:0;top:0;}
.element-disp-bottomleft{position:absolute;left:0;bottom:0;}.element-disp-bottomright{position:absolute;right:0;bottom:0;}
.element-disp-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);}
.element-disp-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%);}
.element-disp-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%);}
.element-disp-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);}
.element-disp-bottom-middle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);}
.display-block{display:block;} .display-hover-block:hover{display:block;}
.element-disp-container:hover span.element-disp-hover:hover{display:inline-block;}
.element-disp-none{display:none;} .element-disp-position{position:absolute;}

/*Box with shadows*/
.radius.disp-shadow-black{border:1px solid;box-shadow:5px 10px;}
.radius.disp-shadow-grey{border:1px solid;box-shadow: 5px 10px #888888;}
.radius.disp-shadow-gray{border:1px solid;box-shadow: 5px 10px #888888;}

/*Circle and rounded corner displays: can also be used to create badges*/
.circle{border-radius:50%;}
.round-s{border-radius:2px;} .round-m{border-radius:4px;}
.round-l{border-radius:8px;}.round-xl{border-radius:16px;}.round-xxl{border-radius:32px;}

/*Clear => Prevent Elements Floating on any side(s)*/
.clear-none{clear:none !important;} .clear-both{clear:both !important;}
.clear-left{clear:left !important;} .clear-right{clear:right !important;}
/*Inherit float property from a radius*/
.arc .clear-both{clear:inherit !important;}
/*Reset the float property of elements*/
.reset-clear{clear:initial !important;}
/*Clear ends*/

/*Working with Backgrounds*/
/*background clips*/
.bg-clip-dotty{background-clip:border-box;}
.bg-clip-padbox{background-clip:padding-box;}
.bg-clip-contentbox{background-clip:content-box;}
.arc.bg-clip-contentbox{background-clip:inherit;}
/*Reset background clips*/
.bg-clip{background-clip:initial !important;}

/*Line background in any sectors*/
.pie-linebg{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;}

/*MARGIN; PADDING; BORDER*/
/*No margin; No padding; No border*/
.nomargin{margin:0 !important;} .nopadding{padding:0 !important;} .noborder{border:none !important;}
/*margin; small - medium - large*/
.margin-s{margin:4px!important;}.margin-m{margin:9px!important;}.margin-l{margin:16px!important;} .margin-xl{margin:32px!important;}
.margin-top-s{margin-top:4px!important;}.margin-top-m{margin-top:9px!important;}.margin-top-l{margin-top:16px!important;}
.margin-top-xl{margin-top:32px!important;}
.margin-bottom-s{margin-bottom:4px!important;}.margin-bottom-m{margin-bottom:9px!important;}.margin-bottom-l{margin-bottom:16px!important;}
.margin-bottom-xl{margin-bottom:32px!important;}
.margin-left-s{margin-left:4px!important;}.margin-left-m{margin-left:9px!important;}.margin-left-l{margin-left:16px!important;}
.margin-left-xl{margin-left:32px!important;}
.margin-right-s{margin-right:4px!important;}.margin-right-m{margin-right:9px!important;}.margin-right-l{margin-right:16px!important;}
.margin-right-xl{margin-right:32px!important;}
/*Padding; small - medium - large*/
.padding-s{padding:4px!important;}.padding-m{padding:9px!important;}.padding-l{padding:16px!important;}
.padding-xl{padding:32px!important;}
.padding-top-s{padding-top:4px!important;}.padding-top-m{padding-top:9px!important;}.padding-top-l{padding-top:16px!important;}
.padding-top-xl{padding-top:32px!important;}
.padding-bottom-s{padding-bottom:4px!important;}.padding-bottom-m{padding-bottom:9px!important;}.padding-bottom-l{padding-bottom:16px!important;}
.padding-bottom-xl{padding-bottom:32px!important;}.
.padding-left-s{padding-left:4px!important;}.padding-left-m{padding-left:9px!important;}.padding-left-l{padding-left:16px!important;}
.padding-left-xl{padding-left:32px!important;}
.padding-right-s{padding-right:4px!important;}.padding-right-m{padding-right:9px!important;}.padding-right-l{padding-right:16px!important;}
.padding-right-xl{padding-right:32px!important;}
/*Border; small - medium - large
*You can use this with any color class*/
.border-s{border:3px solid #ccc;}.border-m{border:9px solid #ccc;}.border-l{border:16px solid #ccc;}
.border-xl{border:32px solid #ccc;}
.border-top-s{border-top:3px solid #ccc;}.border-top-m{border-top:9px solid #ccc;}.border-top-l{border-top:16px solid #ccc;}
.border-top-xl{border-top:32px solid #ccc;}
.border-bottom-s{border-bottom:3px solid #ccc;}.border-bottom-m{border-bottom:9px solid #ccc;}.border-bottom-l{border-bottom:16px solid #ccc;}
.border-bottom-xl{border-bottom:32px solid #ccc;}
.border-left-s{border-left:3px solid #ccc;}.border-left-m{border-left:9px solid #ccc;}.border-left-l{border-left:16px solid #ccc;}
.border-left-xl{border-left:32px solid #ccc;}
.border-right-s{border-right:3px solid #ccc;}.border-right-m{border-right:9px solid #ccc;}.border-right-l{border-right:16px solid #ccc;}
.border-right-xl{border-right:32px solid #ccc;}
/*Display Modes end here*/

/*Introducing the chord(ch) class(Experimental: Do not use)*/
.ch{font:inherit;}
.ch-composing{border-bottom:2px solid;}
.ch-m-click .ch-string{color:#CD853F;}
.ch-s-default .ch-error{color:#f00;}
.ch-invalidchar{color: #f00;}
.ch-responsive{display:inherit;overflow:auto;}
/*MAIN CSS ENDS HERE*/
/*;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;*/
/*ARC_PIECSS BEGINS HERE*/
/*Navigation, Dropdown and the bar model*/
/*Dropdowns*/
.arc-dropdown-clicks,.arc-dropdown-hover{position:relative;display:inline-block;cursor:pointer;}
.arc-dropdown-hover:hover > .arc-button:first-child,.arc-dropdown-clicks:hover > .arc-button:first-child{background-color:#f5f5f5;color:#000}
.arc-dropdown-hover:first-child,.arc-dropdown-clicks:hover{background-color:#f5f5f5;color:#000}
.arc-dropdown-content{cursor:auto;color:#000;background-color:#fffafa;display:none;position:absolute;min-width:150px;margin:0;padding:0;z-index:1}
.arc-dropdown-hover:hover .arc-dropdown-content{display:block}

/*Vertical navigation*/
.arc-navv{background:inherit;display:block;margin:0;padding:0;max-width:30% !important;}
.arc-navv .arc-navv-item{padding:7px 15px;float:left;width:auto;border:none;display:block;outline:0;text-decoration:none;}
.arc-navv .arc-navv-button{white-space:normal;}
/*using icons in vertical nav list*/
.arc-navv .arc-navv-item i{display:block;font-size:2rem;}}

/*Vertical navigation - using lists*/
.arc-navv ul,ol{display:block; list-style-type:none;margin:0;padding:0;max-width:30% !important;position:fixed;overflow:auto;height:100%;}
.arc-navv-list li a{display:block;color:#000;padding:7px 15px;text-decoration:none;text-align:left;}
.arc-navv-list li a:hover{background-color:#000;color:#fffff;} .arc-navv-list li a:active{background-color:#000;color:#fffff;}
.arc-navv-list li:last-child{border-bottom:none;}

/*Horizontal navigation*/
.arc-navh{background:inherit;display:inline-block;margin:0;padding:0;width:100%;margin-top:auto;}
.arc-navh .arc-navh-item{width:100%;overflow:hidden;float:left;display:block;color:#000;padding:10px 12px;text-decoration:none;text-align:left;}
.arc-navh .text-center .arc-navh-item{text-align:center;}
.arc-navh .arc-navh-button{white-space:normal}
.arc-navh .arc-dropdown-hover,.arc-navh .arc-dropdown-clicks{position:static;float:left;}
/*using icons in horizontal nav list*/
.arc-navh .arc-navh-item i{display:block;font-size:2rem;}}

/*Horizontal navigation - using lists*/
.arc-navh ul,ol{display:inline-block; list-style-type:none;margin:0;padding:0;width:100%;overflow:hidden;height:auto;}
.arc-navh-list li a{float:left;display:block;color:#000;padding:10px 12px;text-decoration:none;}
.arc-navh-list li a:hover{background-color:#000;color:#fffff;} .arc-navh-list li a:active{background-color:#000;color:#fffff;}
.arc-navh-list li:last-child{border-bottom:none;}

/*Logo in any navigation*/
.nav-logo{position:absolute;color:inherit;display:inline-block;font-size:2.1rem;padding:0;white-space:nowrap;}
.nav-logo-center{left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);}
.nav-logo-right{right:0.5rem;padding:0;}
@media only screen and (max-width:900px){
.nav-logo{left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);}}

/*Fixed position for any navigation*/
.nav-fixed{position:relative;height:58px;z-index:998;}
.navbar-fixed nav,section,div,header{position:fixed;}
@media only screen and (min-width:600px){.navbar-fixed nav,section,div,header{height:62px;}}

/*Tree view navigation with arrow- use all css classes herein
* works with Pie.js*/
.tree-view{margin:0;padding:0;}.tree-view ul,ol{list-style-type:none;}
/*The caret/arrow in the tree view navigation*/
.tree-view-arrow{cursor:pointer;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;} 
.tree-view-arrow::before{content:"\25B6";color:#000;display:inline-block;margin-right:5px;}
.tree-view-nested{display:none; /*hides nested list*/} 
.tree-view-active{display:block /*shows the nested list when clicked*/}

/*Tree view navigation with checkbox - use all css classes herein
* works with Pie.js*/
.tree-view{margin:0;padding:0;}.tree-view ul,ol{list-style-type:none;}
/*The checkbox in the tree view navigation*/
.tree-view-check{cursor:pointer; user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;} 
.tree-view-check::before{content:"\2610";color:#000;display:inline-block;margin-right:5px;}
.tree-view-checkbox::before{content:"\2611";color:#4169E1;}
.tree-view-nested{display:none; /*hides nested list*/} 
.tree-view-active{display:block /*shows the nested list when clicked*/}

@media (max-width:600px){
.arc-dropdown-hover .arc-dropdown-content,.arc-dropdown-clicks{position:relative;}	
.arc-navh-item .arc-navv-item,.arc-dropdown-hover.arc-dropdown-clicks{text-align:center;}
.arc-dropdown-hover.arc-button,.arc-dropdown-clicks.arc-button{width:100%;}}
/*End of navigation and Dropdown*/
/*PIE ARC CSS ENDS HERE*/
/*;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;*/
/*PIE COLOR CSS BEGINS HERE*/
/*;;;;;;;;;;;;;SECTION 1 COLOR BLENDS;;;;;;;;;;;;;*/
 /* Colors */
 /*use the '.col-?' class together with the '.col-?' and'.col-gap-?' classes(col for column)*/
 /*Amber color => amber,amber-dark and amber-light*/
.color-amber,.color-hover-amber:hover{color:#000!important;background-color:#ffc107!important;}
.text-color-amber,.text-color-hover-amber:hover{color:#ffc107!important;}
.border-color-amber,.border-color-hover-amber:hover{border-color:#ffc107!important;}
.caretcolor-amber{caret-color:#ffc107!important;}.color-focus-amber:focus{background-color:#ffc107!important;}
.col-amber{column-rule:5px double #ffc107!important;-webkit-column-rule:5px double #ffc107!important;-moz-column-rule:5px double #ffc107!important;}

.color-amberdark,.color-hover-amberdark:hover{color:#dcdcdc!important;background-color:#ff6f00!important;}
.text-color-amberdark,.text-color-hover-amberdark:hover{color:#ff6f00!important;}
.border-color-amberdark,.border-color-hover-amberdark:hover{border-color:#ff6f00!important;}
.caretcolor-amberdark{caret-color:#ff6f00!important;}.color-focus-amberdark:focus{background-color:#ff6f00!important;}
.col-amberdark{column-rule:5px double #ff6f00!important;-webkit-column-rule:5px double #ff6f00!important;-moz-column-rule:5px double #ff6f00!important;}

.color-amberlight,.color-hover-amberlight:hover{color:#000!important;background-color:#fff8e1!important;}
.text-color-amberlight,.text-color-hover-amberlight:hover{color:#fff8e1!important;}
.border-color-amberlight,.border-color-hover-amberlight:hover{border-color:#fff8e1!important;}
.caretcolor-amberlight{caret-color:#fff8e1!important;} .color-focus-amberlight:focus{background-color:#fff8e1!important;}
.col-amberlight{column-rule:5px double #fff8e1!important;-webkit-column-rule:5px double #fff8e1!important;-moz-column-rule:5px double #fff8e1!important;}
/*Linear gradient for Amber - horizontal*/
.linear-gradient-amber-h{background-image:linear-gradient(#ffc107,#ff6f00,#ff6f00,#fff8e1) !important;}
/*Linear gradient for Amber - vertical*/
.linear-gradient-amber-v{background-image:linear-gradient(to right,#ffc107,#ff6f00,#ff6f00,#fff8e1) !important;}

/*Black color => black,dark-grey::gray and grey::gray */
.color-black,.color-hover-black:hover{color:#fff!important;background-color:#000!important;}
.text-color-black,.text-color-hover-black:hover{color:#000!important;}
.border-color-black,.border-color-hover-black:hover{border-color:#000!important;}
.caretcolor-black{caret-color:#000!important;} .color-focus-black:focus{background-color:#000!important;}
.col-black{column-rule:5px double #000!important;-webkit-column-rule:5px double #000!important;-moz-column-rule:5px double #000!important;}

.color-darkgrey,.color-hover-darkgrey:hover{color:#000!important;background-color:#616161!important;}
.text-color-darkgrey,.text-color-darkgray,.text-color-hover-darkgrey:hover,.text-color-hover-darkgray:hover{color:#616161!important;}
.border-color-darkgrey,.border-color-darkgray,.border-color-hover-darkgrey:hover,.border-color-hover-darkgray:hover{border-color:#616161!important;}
.caretcolor-darkgrey{caret-color:#616161!important;} .color-focus-darkgrey:focus{background-color:#616161!important;}
.col-darkgrey{column-rule:5px double #616161!important;-webkit-column-rule:5px double #616161!important;-moz-column-rule:5px double #616161!important;}

.color-grey,.color-gray,.color-hover-gray:hover,.color-hover-grey:hover{color:#000!important;background-color:#9e9e9e!important;}
.text-color-grey,.text-color-gray,.text-color-hover-grey:hover,.text-color-hover-gray:hover{color:#9e9e9e!important;}
.border-color-grey,.border-color-gray,.border-color-hover-grey:hover,.border-color-hover-gray:hover{border-color:#9e9e9e!important;}
.caretcolor-grey{caret-color:#9e9e9e!important;} .color-focus-grey:focus{background-color:#9e9e9e!important;}
.caretcolor-gray{caret-color:#9e9e9e!important;} .color-focus-gray:focus{background-color:#9e9e9e!important;}
.col-grey,.col-gray{column-rule:5px double #9e9e9e!important;-webkit-column-rule:5px double #9e9e9e!important;-moz-column-rule:5px double #9e9e9e!important;}
/*Linear gradient for Black - horizontal*/
.linear-gradient-black-h{background-image:linear-gradient(#000,#616161,#9e9e9e) !important;}
/*Linear gradient for Black - vertical*/
.linear-gradient-black-v{background-image:linear-gradient(to right,#000,#616161,#9e9e9e) !important;}


/*Blue color => blue,blue-grey,light-blue,steel-blue and pale-blue*/
.color-blue,.color-hover-blue:hover{color:#fff!important;background-color:#2196f3!important;}
.text-color-blue,.text-color-hover-blue:hover{color:#2196f3!important;}
.border-color-blue,.border-color-hover-blue:hover{border-color:#2196f3!important;}
.caretcolor-blue{caret-color:#2196f3!important;} .color-focus-blue:focus{background-color:#2196f3!important;}
.col-blue{column-rule:5px double #2196f3!important;-webkit-column-rule:5px double #2196f3!important;-moz-column-rule:5px double #2196f3!important;}

.color-bluegray,.color-bluegrey,.color-hover-bluegrey:hover,.color-hover-bluegray:hover{color:#fff!important;background-color:#607d8b!important;}
.text-color-bluegray,.text-color-hover-bluegray:hover,.text-color-bluegrey,.text-color-hover-bluegrey:hover{color:#607d8b!important;}
.border-color-bluegray,.border-color-hover-bluegray:hover,.border-color-bluegrey,.border-color-hover-bluegrey:hover{border-color:#607d8b!important;}
.caretcolor-bluegray,.caretcolor-bluegrey{caret-color:#607d8b!important;} 
.color-focus-bluegrey,.color-focus-bluegray:focus{background-color:#607d8b!important;}
.col-bluegrey,.col-bluegray{column-rule:5px double #607d8b!important;-webkit-column-rule:5px double #607d8b!important;-moz-column-rule:5px double #607d8b!important;}

.color-lightblue,.color-hover-lightblue:hover{color:#fff!important;background-color:#87ceeb!important;}
.text-color-lightblue,.text-color-hover-lightblue:hover{color:#87ceeb!important;}
.border-color-lightblue,.border-color-hover-lightblue:hover{border-color:#87ceeb!important;}
.caretcolor-lightblue{caret-color:#87ceeb!important;} .color-focus-lightblue:focus{background-color:#87ceeb!important;}
.col-lightblue{column-rule:5px double #87ceeb!important;-webkit-column-rule:5px double #87ceeb!important;-moz-column-rule:5px double #87ceeb!important;}

.color-steelblue,.color-hover-steelblue:hover{color:#fff!important;background-color:#4682b4!important;}
.text-color-steelblue,.text-color-hover-steelblue:hover{color:#4682b4!important;}
.border-color-steelblue,.border-color-hover-steelblue:hover{border-color:#4682b4!important;}
.caretcolor-steelblue{caret-color:#4682b4!important;} .color-focus-steelblue:focus{background-color:#4682b4!important;}
.col-steelblue{column-rule:5px double #4682b4!important;-webkit-column-rule:5px double #4682b4!important;-moz-column-rule:5px double #4682b4!important;}

.color-paleblue,.hover-color-hover-paleblue:hover{color:#000!important;background-color:#ddffff!important;}
.text-color-paleblue,.text-color-hover-paleblue:hover{color:#ddffff!important;}
.border-color-paleblue,.border-color-hover-paleblue:hover{border-color:#ddffff!important;}
.caretcolor-paleblue{caret-color:#ddffff!important;} .color-focus-paleblue:focus{background-color:#ddffff!important;}
.col-paleblue{column-rule:5px double #ddffff!important;-webkit-column-rule:5px double #ddffff!important;-moz-column-rule:5px double #ddffff!important;}
/*Linear gradient for Blue - horizontal*/
.linear-gradient-blue-h{background-image:linear-gradient(#2196f3,#607d8b,#87ceeb,#4682b4,#ddffff) !important;}
/*Linear gradient for Blue - vertical*/
.linear-gradient-blue-v{background-image:linear-gradient(to right,#2196f3,#607d8b,#87ceeb,#4682b4,#ddffff) !important;}


/*Brown => brown,dark-brown,light-brown maroon and sand*/
.color-brown,.color-hover-brown:hover{color:#fff!important;background-color:#795548!important;}
.text-color-brown,.text-color-hover-brown:hover{color:#795548!important;}
.border-color-brown,.border-color-hover-brown:hover{border-color:#795548!important;}
.caretcolor-brown{caret-color:#795548!important;} .color-focus-brown:focus{background-color:#795548!important;}
.col-brown{column-rule:5px double #795548!important;-webkit-column-rule:5px double #795548!important;-moz-column-rule:5px double #795548!important;}

.color-darkbrown,.color-hover-darkbrown:hover{color:#fff!important;background-color:#3e2723!important;}
.text-color-darkbrown,.text-color-hover-darkbrown:hover{color:#3e2723!important;}
.border-color-darkbrown,.border-color-hover-darkbrown:hover{border-color:#3e2723!important;}
.caretcolor-darkbrown{caret-color:#3e2723!important;} .color-focus-darkbrown:focus{background-color:#3e2723!important;}
.col-darkbrown{column-rule:5px double #3e2723!important;-webkit-column-rule:5px double #3e2723!important;-moz-column-rule:5px double #3e2723!important;}

.color-lightbrown,.color-hover-lightbrown:hover{color:#000;background-color:#efebe9!important;}
.text-color-lightbrown,.text-color-hover-lightbrown:hover{color:#efebe9!important;}
.border-color-lightbrown,.border-color-hover-lightbrown:hover{border-color:#efebe9!important;}
.caretcolor-lightbrown{caret-color:#efebe9!important;} .color-focus-lightbrown:focus{background-color:#efebe9!important;}
.col-lightbrown{column-rule:5px double #efebe9!important;-webkit-column-rule:5px double #efebe9!important;-moz-column-rule:5px double #efebe9!important;}

.color-maroon,.color-hover-maroon:hover{color:#fff!important;background-color:#800000!important;}
.text-color-maroon,.text-color-hover-maroon:hover{color:#800000!important;}
.border-color-maroon,.border-color-hover-maroon:hover{border-color:#800000!important;}
.caretcolor-maroon{caret-color:#800000!important;} .color-focus-maroon:focus{background-color:#800000!important;}
.col-maroon{column-rule:5px double #800000!important;-webkit-column-rule:5px double #800000!important;-moz-column-rule:5px double #800000!important;}

.color-sand,.color-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important;}
.text-color-sand,.text-color-hover-sand:hover{color:#fdf5e6!important;}
.border-color-sand,.border-color-hover-sand:hover{border-color:#fdf5e6!important;}
.caretcolor-sand{caret-color:#fdf5e6!important;} .color-focus-sand:focus{background-color:#fdf5e6!important;}
.col-sand{column-rule:5px double #fdf5e6!important;-webkit-column-rule:5px double #fdf5e6!important;-moz-column-rule:5px double #fdf5e6!important;}
/*Linear gradient for Brown - horizontal*/
.linear-gradient-brown-h{background-image:linear-gradient(#795548,#3e2723,#efebe9,#800000,#fdf5e6) !important;}
/*Linear gradient for Brown - vertical*/
.linear-gradient-brown-v{background-image:linear-gradient(to right,#795548,#3e2723,#efebe9,#800000,#fdf5e6) !important;}


/*Cyan => cyan,dark-cyan and light-cyan*/
.color-cyan,.color-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important;}
.text-color-cyan,.text-color-hover-cyan:hover{color:#00bcd4!important;}
.border-color-cyan,.border-color-hover-cyan:hover{border-color:#00bcd4!important;}
.caretcolor-cyan{caret-color:#00bcd4!important;} .color-focus-cyan:focus{background-color:#00bcd4!important;}
.col-cyan{column-rule:5px double #00bcd4!important;-webkit-column-rule:5px double #00bcd4!important;-moz-column-rule:5px double #00bcd4!important;}

.color-darkcyan,.color-hover-darkcyan:hover{color:#000!important;background-color:#00b8d4!important;}
.text-color-darkcyan,.text-color-hover-darkcyan:hover{color:#00b8d4!important;}
.border-color-darkcyan,.border-color-hover-darkcyan:hover{border-color:#00b8d4!important;}
.caretcolor-darkcyan{caret-color:#00b8d4!important;} .color-focus-darkcyan:focus{background-color:#00b8d4!important;}
.col-darkcyan{column-rule:5px double #00b8d4!important;-webkit-column-rule:5px double #00b8d4!important;-moz-column-rule:5px double #00b8d4!important;}

.color-lightcyan,.color-hover-lightcyan:hover{color:#000!important;background-color:#e0f7fa!important;}
.text-color-lightcyan,.text-color-hover-lightcyan:hover{color:#e0f7fa!important;}
.border-color-lightcyan,.border-color-hover-lightcyan:hover{border-color:#e0f7fa!important;}
.caretcolor-lightcyan{caret-color:#e0f7fa!important;} .color-focus-lightcyan:focus{background-color:#e0f7fa!important;}
.col-lightcyan{column-rule:5px double #e0f7fa!important;-webkit-column-rule:5px double #e0f7fa!important;-moz-column-rule:5px double #e0f7fa!important;}
/*Linear gradient for Cyan - horizontal*/
.linear-gradient-cyan-h{background-image:linear-gradient(#00bcd4,#00b8d4,#e0f7fa) !important;}
/*Linear gradient for Cyan - vertical*/
.linear-gradient-cyan-v{background-image:linear-gradient(to right,#00bcd4,#00b8d4,#e0f7fa) !important;}

/*Green => green,dark-green,forest-green,light-green,olivedrab,pale-green and teal*/
.color-green,.color-hover-green:hover{color:#000!important;background-color:#4caf50!important;}
.text-color-green,.text-color-hover-green:hover{color:#4caf50!important;}
.border-color-green,.border-color-hover-green:hover{border-color:#4caf50!important;}
.caretcolor-green{caret-color:#4caf50!important;} .color-focus-green:focus{background-color:#4caf50!important;}
.col-green{column-rule:5px double #4caf50!important;-webkit-column-rule:5px double #4caf50!important;-moz-column-rule:5px double #4caf50!important;}

.color-darkgreen,.color-hover-darkgreen:hover{color:#fff!important;background-color:#1b5e20!important;}
.text-color-darkgreen,.text-color-hover-darkgreen:hover{color:#1b5e20!important;}
.border-color-darkgreen,.border-color-hover-darkgreen:hover{border-color:#1b5e20!important;}
.caretcolor-darkgreen{caret-color:#1b5e20!important;} .color-focus-darkgreen:focus{background-color:#1b5e20!important;}
.col-darkgreen{column-rule:5px double #1b5e20!important;-webkit-column-rule:5px double #1b5e20!important;-moz-column-rule:5px double #1b5e20!important;}

.color-forestgreen,.color-hover-forestgreen:hover{color:#fff!important;background-color:#228b22!important;}
.text-color-forestgreen,.text-color-hover-forestgreen:hover{color:#228b22!important;}
.border-color-forestgreen,.border-color-hover-forestgreen:hover{border-color:#228b22!important;}
.caretcolor-forestgreen{caret-color:#228b22!important;} .color-focus-forestgreen:focus{background-color:#228b22!important;}
.col-forestgreen{column-rule:5px double #228b22!important;-webkit-column-rule:5px double #228b22!important;-moz-column-rule:5px double #228b22!important;}

.color-lightgreen,.color-hover-lightgreen:hover{color:#000!important;background-color:#8bc34a!important;}
.text-color-lightgreen,.text-color-hover-lightgreen:hover{color:#8bc34a!important;}
.border-color-lightgreen,.border-color-hover-lightgreen:hover{border-color:#8bc34a!important;}
.caretcolor-lightgreen{caret-color:#8bc34a!important;} .color-focus-lightgreen:focus{background-color:#8bc34a!important;}
.col-lightgreen{column-rule:5px double #8bc34a!important;-webkit-column-rule:5px double #8bc34a!important;-moz-column-rule:5px double #8bc34a!important;}

.color-olivedrab,.color-hover-olivedrab:hover{color:#fff!important;background-color:#6b8e23!important;}
.text-color-olivedrab,.text-color-hover-olivedrab:hover{color:#6b8e23!important;}
.border-color-olivedrab,.border-color-hover-olivedrab:hover{border-color:#6b8e23!important;}
.caretcolor-olivedrab{caret-color:#6b8e23!important;} .color-focus-olivedrab:focus{background-color:#6b8e23!important;}
.col-olivedrab{column-rule:5px double #6b8e23!important;-webkit-column-rule:5px double #6b8e23!important;-moz-column-rule:5px double #6b8e23!important;}

.color-palegreen,.color-hover-palegreen:hover{color:#000!important;background-color:#ddffdd!important;}
.text-color-palegreen,.text-color-hover-palegreen:hover{color:#ddffdd!important;}
.border-color-palegreen,.border-color-hover-palegreen:hover{border-color:#ddffdd!important;}
.caretcolor-palegreen{caret-color:#ddffdd!important;} .color-focus-palegreen:focus{background-color:#ddffdd!important;}
.col-palegreen{column-rule:5px double #ddffdd!important;-webkit-column-rule:5px double #ddffdd!important;-moz-column-rule:5px double #ddffdd!important;}

.color-teal,.color-hover-teal:hover{color:#000!important;background-color:#008080!important;}
.text-color-teal,.text-color-hover-teal:hover{color:#008080!important;}
.border-color-teal,.border-color-hover-teal:hover{border-color:#008080!important;}
.caretcolor-teal{caret-color:#008080!important;} .color-focus-teal:focus{background-color:#008080!important;}
.col-teal{column-rule:5px double #008080!important;-webkit-column-rule:5px double #008080!important;-moz-column-rule:5px double #008080!important;}
/*Linear gradient for Green - horizontal*/
.linear-gradient-green-h{background-image:linear-gradient(#4caf50,#1b5e20,#228b22,#8bc34a,#6b8e23,#ddffdd,#008080) !important;}
/*Linear gradient for Green - vertical*/
.linear-gradient-green-v{background-image:linear-gradient(to right,#4caf50,#1b5e20,#228b22,#8bc34a,#6b8e23,#ddffdd,#008080) !important;}


/*Indigo => dark-indigo and light-indigo*/
.color-indigo,.color-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important;}
.text-color-indigo,.text-color-hover-indigo:hover{color:#3f51b5!important;}
.border-color-indigo,.border-color-border-hover-indigo:hover{border-color:#3f51b5!important;}
.caretcolor-indigo{caret-color:#3f51b5!important;} .color-focus-indigo:focus{background-color:#3f51b5!important;}
.col-indigo{column-rule:5px double #3f51b5!important;-webkit-column-rule:5px double #3f51b5!important;-moz-column-rule:5px double #3f51b5!important;}

.color-darkindigo,.color-hover-darkindigo:hover{color:#fff!important;background-color:#1a237e!important;}
.text-color-darkindigo,.text-color-hover-darkindigo:hover{color:#1a237e!important;}
.border-color-dark-indigo,.border-color-hover-darkindigo:hover{border-color:#1a237e!important;}
.caretcolor-darkindigo{caret-color:#1a237e!important;} .color-focus-darkindigo:focus{background-color:#1a237e!important;}
.col-darkindigo{column-rule:5px double #1a237e!important;-webkit-column-rule:5px double #1a237e!important;-moz-column-rule:5px double #1a237e!important;}

.color-lightindigo,.color-hover-lightindigo:hover{color:#000!important;background-color:#e8eaf6!important;}
.text-color-lightindigo,.text-color-hover-lightindigo:hover{color:#e8eaf6!important;}
.border-color-lightindigo,.border-color-hover-lightindigo:hover{border-color:#e8eaf6!important;}
.caretcolor-lightindigo{caret-color:#e8eaf6!important;}.color-focus-lightindigo:focus{background-color:#e8eaf6!important;}
.col-lightindigo{column-rule:5px double #e8eaf6!important;-webkit-column-rule:5px double #e8eaf6!important;-moz-column-rule:5px double #e8eaf6!important;}
/*Linear gradient for Indigo - horizontal*/
.linear-gradient-indigo-h{background-image:linear-gradient(#3f51b5,#1a237e,#e8eaf6) !important;}
/*Linear gradient for Indigo - vertical*/
.linear-gradient-indigo-v{background-image:linear-gradient(to right,#3f51b5,#1a237e,#e8eaf6) !important;}


/*Khaki => khaki,dark-khaki and light-khaki*/
.color-khaki,.color-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important;}
.text-color-khaki,.text-color-hover-khaki:hover{color:#f0e68c!important;}
.border-color-khaki,.border-color-hover-khaki:hover{border-color:#f0e68c!important;}
.caretcolor-khaki{caret-color:#f0e68c!important;} .color-focus-khaki:focus{background-color:#f0e68c!important;}
.col-khaki{column-rule:5px double #f0e68c!important;-webkit-column-rule:5px double #f0e68c!important;-moz-column-rule:5px double #f0e68c!important;}

.color-dark-khaki,.color-hover-dark-khaki:hover{color:#000!important;background-color:#bdb76b!important;}
.text-color-dark-khaki,.text-color-hover-dark-khaki:hover{color:#bdb76b!important;}
.border-color-dark-khaki,.border-color-hover-dark-khaki:hover{border-color:#bdb76b!important;}
.caretcolor-dark-khaki{caret-color:#bdb76b!important;} .color-focus-dark-khaki:focus{background-color:#bdb76b!important;}
.col-dark-khaki{column-rule:5px double #bdb76b!important;-webkit-column-rule:5px double #bdb76b!important;-moz-column-rule:5px double #bdb76b!important;}

.color-lightkhaki,.color-hover-lightkhaki:hover{color:#000!important;background-color:#fcfae8!important;}
.text-color-lightkhaki,.text-color-hover-lightkhaki:hover{color:#fcfae8!important;}
.border-color-light-khaki,.border-color-hover-lightkhaki:hover{border-color:#fcfae8!important;}
.caretcolor-lightkhaki{caret-color:#fcfae8!important;} .color-focus-lightkhaki:focus{background-color:#fcfae8!important;}
.col-lightkhaki{column-rule:5px double #fcfae8!important;-webkit-column-rule:5px double #fcfae8!important;-moz-column-rule:5px double #fcfae8!important;}
/*Linear gradient for Khaki - horizontal*/
.linear-gradient-khaki-h{background-image:linear-gradient(#f0e68c,#bdb76b,#fcfae8) !important;}
/*Linear gradient for Khaki - vertical*/
.linear-gradient-khaki-v{background-image:linear-gradient(to right,#f0e68c,#bdb76b,#fcfae8) !important;}


/*Lime => lime,dark-lime and light-lime*/
.color-lime,.color-hover-lime:hover{color:#000!important;background-color:#cddc39!important;}
.text-color-lime,.text-color-hover-lime:hover{color:#cddc39!important;}
.border-color-lime,.border-color-hover-lime:hover{border-color:#cddc39!important;}
.caretcolor-lime{caret-color:#cddc39!important;} .color-focus-lime:focus{background-color:#cddc39!important;}
.col-lime{column-rule:5px double #cddc39!important;-webkit-column-rule:5px double #cddc39!important;-moz-column-rule:5px double #cddc39!important;}

.color-darklime,.color-hover-darklime:hover{color:#fff!important;background-color:#827717!important;}
.text-color-darklime,.text-color-hover-darklime:hover{color:#827717!important;}
.border-color-darklime,.border-color-hover-darklime:hover{border-color:#827717!important;}
.caretcolor-darklime{caret-color:#827717!important;} .color-focus-darklime:focus{background-color:#827717!important;}
.col-darklime{column-rule:5px double #827717!important;-webkit-column-rule:5px double #827717!important;-moz-column-rule:5px double #827717!important;}

.color-lightlime,.color-hover-lightlime:hover{color:#000!important;background-color:#f9fbe7!important;}
.text-color-lightlime,.text-color-hover-lightlime:hover{color:#f9fbe7!important;}
.border-color-lightlime,.border-color-hover-lightlime:hover{border-color:#f9fbe7!important;}
.caretcolor-lightlime{caret-color:#f9fbe7!important;} .color-focus-lightlime:focus{background-color:#f9fbe7!important;}
.col-lightlime{column-rule:5px double #f9fbe7!important;-webkit-column-rule:5px double #f9fbe7!important;-moz-column-rule:5px double #f9fbe7!important;}
/*Linear gradient for Lime - horizontal*/
.linear-gradient-lime-h{background-image:linear-gradient(#cddc39,#827717,#f9fbe7) !important;}
/*Linear gradient for Lime - vertical*/
.linear-gradient-lime-v{background-image:linear-gradient(to right,#cddc39,#827717,#f9fbe7) !important;}


/*Orange => orange,coral,dark-orange,light orange,orange-red and tomato*/
.color-orange,.color-hover-orange:hover{color:#000!important;background-color:#ff9800!important;}
.text-color-orange,.text-color-hover-orange:hover{color:#ff9800!important;}
.border-color-orange,.border-color-hover-orange:hover{border-color:#ff9800!important;}
.caretcolor-orange{caret-color:#ff9800!important;} .color-focus-orange:focus{background-color:#ff9800!important;}
.col-orange{column-rule:5px double #ff9800!important;-webkit-column-rule:5px double #ff9800!important;-moz-column-rule:5px double #ff9800!important;}

.color-coral,.color-hover-coral:hover{color:#fff!important;background-color:#ff7f50!important;}
.text-color-coral,.text-color-hover-coral:hover{color:#ff7f50!important;}
.border-color-coral,.border-color-hover-coral:hover{border-color:#ff7f50!important;}
.caretcolor-coral{caret-color:#ff7f50!important;} .color-focus-coral:focus{background-color:#ff7f50!important;}
.col-coral{column-rule:5px double #ff7f50!important;-webkit-column-rule:5px double #ff7f50!important;-moz-column-rule:5px double #ff7f50!important;}

.color-darkorange,.color-hover-darkorange:hover{color:#fff!important;background-color:#ff5722!important;}
.text-color-darkorange,.text-color-hover-darkorange:hover{color:#ff5722!important;}
.border-color-darkorange,.border-color-hover-darkorange:hover{border-color:#ff5722!important;}
.caretcolor-darkorange{caret-color:#ff5722!important;} .color-focus-orange:focus{background-color:#ff5722!important;}
.col-darkorange{column-rule:5px double #ff5722!important;-webkit-column-rule:5px double #ff5722!important;-moz-column-rule:5px double #ff5722!important;}

.color-lightorange,.color-hover-lightorange:hover{color:#000!important;background-color:#ffedcc!important;}
.text-color-lightorange,.text-color-hover-lightorange:hover{color:#ffedcc!important;}
.border-color-lightorange,.border-color-hover-lightorange:hover{border-color:#ffedcc!important;}
.caretcolor-lightorange{caret-color:#ffedcc!important;} .color-focus-lightorange:focus{background-color:#ffedcc!important;}
.col-lightorange{column-rule:5px double #ffedcc!important;-webkit-column-rule:5px double #ffedcc!important;-moz-column-rule:5px double #ffedcc!important;}

.color-orangered,.color-hover-orangered:hover{color:#fff!important;background-color:#ff4500!important;}
.text-color-orangered,.text-color-hover-orangered:hover{color:#ff4500!important;}
.border-color-orangered,.border-color-hover-orangered:hover{border-color:#ff4500!important;}
.caretcolor-orangered{caret-color:#ff4500!important;} .color-focus-orangered:focus{background-color:#ff4500!important;}
.col-orangered{column-rule:5px double #ff4500!important;-webkit-column-rule:5px double #ff4500!important;-moz-column-rule:5px double #ff4500!important;}

.color-tomato,.color-hover-tomato:hover{color:#fff!important;background-color:#ff6347!important;}
.text-color-tomato,.text-color-hover-tomato:hover{color:#ff6347!important;}
.border-color-tomato,.border-color-hover-tomato:hover{border-color:#ff6347!important;}
.caretcolor-tomato{caret-color:#ff6347!important;} .color-focus-tomato:focus{background-color:#ff6347!important;}
.col-tomato{column-rule:5px double #ff6347!important;-webkit-column-rule:5px double #ff6347!important;-moz-column-rule:5px double #ff6347!important;}
/*Linear gradient for Orange - horizontal*/
.linear-gradient-orange-h{background-image:linear-gradient(#ff9800,#ff7f50,#ff5722,#ffedcc,#ff4500,#ff6347) !important;}
/*Linear gradient for Orange - vertical*/
.linear-gradient-orange-v{background-image:linear-gradient(to right,#ff9800,#ff7f50,#ff5722,#ffedcc,#ff4500,#ff6347) !important;}

/*Pink => pink,dark-pink,hotpink and light-pink*/
.color-pink,.color-hover-pink:hover{color:#fff!important;background-color:#e91e63!important;}
.text-color-pink,.text-color-hover-pink:hover{color:#e91e63!important;}
.border-color-pink,.border-color-hover-pink:hover{border-color:#e91e63!important;}
.caretcolor-pink{caret-color:#e91e63!important;} .color-focus-pink:focus{background-color:#e91e63!important;}
.col-pink{column-rule:5px double #e91e63!important;-webkit-column-rule:5px double #e91e63!important;-moz-column-rule:5px double #e91e63!important;}

.color-darkpink,.color-hover-darkpink:hover{color:#fff!important;background-color:#ff4d6a!important;}
.color-darkpink,.text-color-hover-darkpink:hover{color:#ff4d6a!important;}
.border-color-darkpink,.border-color-hover-darkpink:hover{border-color:#ff4d6a!important;}
.caretcolor-darkpink{caret-color:#ff4d6a!important;} .color-focus-darkpink:focus{background-color:#ff4d6a!important;}
.col-darkpink{column-rule:5px double #ff4d6a!important;-webkit-column-rule:5px double #ff4d6a!important;-moz-column-rule:5px double #ff4d6a!important;}

.color-hotpink,.color-hover-hotpink:hover{color:#000!important;background-color:#ff69b4!important;}
.text-color-hotpink,.text-color-hover-hotpink:hover{color#ff69b4!important;}
.border-color-hotpink,.border-color-hover-hotpink:hover{border-color:#ff69b4!important;}
.caretcolor-hotpink{caret-color:#ff69b4!important;} .color-focus-hotpink:focus{background-color:#ff69b4!important;}
.col-hotpink{column-rule:5px double #ff69b4!important;-webkit-column-rule:5px double #ff69b4!important;-moz-column-rule:5px double #ff69b4!important;}

.color-lightpink,.color-hover-lightpink:hover{color:#000!important;background-color:#ffe6ea!important;}
.text-color-lightpink,.text-color-hover-lightpink:hover{color:#ffe6ea!important;}
.border-color-lightpink,.border-color-hover-lightpink:hover{border-color:#ffe6ea!important;}
.caretcolor-lightpink{caret-color:#ffe6ea!important;} .color-focus-lightpink:focus{background-color:#ffe6ea!important;}
.col-lightpink{column-rule:5px double #ffe6ea!important;-webkit-column-rule:5px double #ffe6ea!important;-moz-column-rule:5px double #ffe6ea!important;}
/*Linear gradient for Pink - horizontal*/
.linear-gradient-pink-h{background-image:linear-gradient(#e91e63,#ff4d6a,#ff69b4,#ffe6ea) !important;}
/*Linear gradient for Pink - vertical*/
.linear-gradient-pink-v{background-image:linear-gradient(to right,#e91e63,#ff4d6a,#ff69b4,#ffe6ea) !important;}


/*Purple => purple,dark-purple,lavender,orchid and violet*/
.color-purple,.color-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important;}
.text-color-purple,.text-color-hover-purple:hover{color:#9c27b0!important;}
.border-color-purple,.border-color-hover-purple:hover{border-color:#9c27b0!important;}
.caretcolor-purple{caret-color:#9c27b0!important;} .color-focus-purple:focus{background-color:#9c27b0!important;}
.col-purple{column-rule:5px double #9c27b0!important;-webkit-column-rule:5px double #9c27b0!important;-moz-column-rule:5px double #9c27b0!important;}

.color-darkpurple,.color-hover-darkpurple:hover{color:#fff!important;background-color:#673ab7!important;}
.text-color-darkpurple,.text-color-hover-darkpurple:hover{color:#673ab7!important;}
.border-color-darkpurple,.border-color-hover-darkpurple:hover{border-color:#673ab7!important;}
.caretcolor-darkpurple{caret-color:#673ab7!important;} .color-focus-darkpurple:focus{background-color:#673ab7!important;}
.col-darkpurple{column-rule:5px double #673ab7!important;-webkit-column-rule:5px double #673ab7!important;-moz-column-rule:5px double #673ab7!important;}

.color-lavender,.color-hover-lavender:hover{color:#000!important;background-color:#e6e6fa!important;}
.text-color-lavender,.text-color-hover-lavender:hover{color:#e6e6fa!important;}
.border-color-lavender,.border-color-hover-lavender:hover{border-color:#e6e6fa!important;}
.caretcolor-lavender{caret-color:#e6e6fa!important;} .color-focus-lavender:focus{background-color:#e6e6fa!important;}
.col-lavender{column-rule:5px double #e6e6fa!important;-webkit-column-rule:5px double #e6e6fa!important;-moz-column-rule:5px double #e6e6fa!important;}

.color-orchid,.color-hover-orchid:hover{color:#fff!important;background-color:#da70d6!important;}
.text-color-orchid,.text-color-hover-orchid:hover{color:#da70d6!important;}
.border-color-orchid,.border-color-hover-orchid:hover{border-color:#da70d6!important;}
.caretcolor-orchid{caret-color:#da70d6!important;} .color-focus-orchid:focus{background-color:#da70d6!important;}
.col-orchid{column-rule:5px double #da70d6!important;-webkit-column-rule:5px double #da70d6!important;-moz-column-rule:5px double #da70d6!important;}

.color-violet,.color-hover-violet:hover{color:#fff!important;background-color:#ee82ee!important;}
.text-color-violet,.text-color-hover-violet:hover{color:#ee82ee!important;}
.border-color-violet,.border-color-hover-violet:hover{border-color:#ee82ee!important;}
.caretcolor-violet{caret-color:#ee82ee!important;} .color-focus-violet:focus{background-color:#ee82ee!important;}
.col-violet{column-rule:5px double #ee82ee!important;-webkit-column-rule:5px double #ee82ee!important;-moz-column-rule:5px double #ee82ee!important;}
/*Linear gradient for Purple - horizontal*/
.linear-gradient-purple-h{background-image:linear-gradient(#9c27b0,#673ab7,#e6e6fa,#da70d6,#ee82ee) !important;}
/*Linear gradient for Purple - vertical*/
.linear-gradient-purple-v{background-image:linear-gradient(to right,#9c27b0,#673ab7,#e6e6fa,#da70d6,#ee82ee) !important;}

	
/*Red => red,crimson,indianred,light-red and pale-red*/
.color-red,.color-hover-red:hover{color:#fff!important;background-color:#f44336!important;}
.text-color-red,.text-color-hover-red:hover{color:#f44336!important;}
.border-color-red,.border-color-hover-red:hover{border-color:#f44336!important;}
.caretcolor-red{caret-color:#f44336!important;} .color-focus-red:focus{background-color:#f44336!important;}
.col-red{column-rule:5px double #f44336!important;-webkit-column-rule:5px double #f44336!important;-moz-column-rule:5px double #f44336!important;}

.color-crimson,.color-hover-crimson:hover{color:#fff!important;background-color:#dc143c!important;}
.text-color-crimson,.text-color-hover-crimson:hover{color:#dc143c!important;}
.border-color-crimson,.border-color-hover-crimson:hover{border-color:#dc143c!important}
.caretcolor-crimson{caret-color:#dc143c!important;} .color-focus-crimson:focus{background-color:#dc143c!important;}
.col-crimson{column-rule:5px double #dc143c!important;-webkit-column-rule:5px double #dc143c!important;-moz-column-rule:5px double #dc143c!important;}

.color-indianred,.color-hover-indianred:hover{color:#fff!important;background-color:#cd5c5c!important;}
.text-color-indianred,.text-color-hover-indianred:hover{color:#cd5c5c!important;}
.border-color-indianred,.border-color-hover-indianred:hover{border-color:#cd5c5c!important}
.caretcolor-indianred{caret-color:#cd5c5c!important;} .color-focus-indianred:focus{background-color:#cd5c5c!important;}
.col-indianred{column-rule:5px double #cd5c5c!important;-webkit-column-rule:5px double #cd5c5c!important;-moz-column-rule:5px double #cd5c5c!important;}

.color-lightred,.color-hover-lightred:hover{color:#fff!important;background-color:#ffe6e6!important;}
.text-color-lightred,.text-color-hover-lightred:hover{color:#ffe6e6!important;}
.border-color-lightred,.border-color-hover-lightred:hover{border-color:#ffe6e6!important;}
.caretcolor-lightred{caret-color:#ffe6e6!important;} .color-focus-lightred:focus{background-color:#ffe6e6!important;}
.col-lightred{column-rule:5px double #ffe6e6!important;-webkit-column-rule:5px double #ffe6e6!important;-moz-column-rule:5px double #ffe6e6!important;}

.color-palered,.color-hover-palered:hover{color:#000!important;background-color:#ffe7e7!important;}
.text-color-palered,.text-color-hover-palered:hover{color:#ffe7e7!important;}
.border-color-palered,.border-color-hover-palered:hover{border-color:#ffe7e7!important}
.caretcolor-palered{caret-color:#ffe7e7!important;} .color-focus-palered:focus{background-color:#ffe7e7!important;}
.col-palered{column-rule:5px double #ffe7e7!important;-webkit-column-rule:5px double #ffe7e7!important;-moz-column-rule:5px double #ffe7e7!important;}
/*Linear gradient for Red - horizontal*/
.linear-gradient-red-h{background-image:linear-gradient(#f44336,#dc143c,#cd5c5c,#ffe6e6,#ffe7e7) !important;}
/*Linear gradient for Red - vertical*/
.linear-gradient-red-v{background-image:linear-gradient(to right,#f44336,#dc143c,#cd5c5c,#ffe6e6,#ffe7e7) !important;}


/*Yellow => yellow,gold,moccasin and pale-yellow*/
.color-yellow,.color-hover-yellow:hover{color:#000!important;background-color:#d2be0e!important;}
.text-color-yellow,.text-color-hover-yellow:hover{color:#d2be0e!important;}
.border-color-yellow,.border-color-hover-yellow:hover{border-color:#d2be0e!important;}
.caretcolor-palered{caret-color:#d2be0e!important;} .color-focus-yellow:focus{background-color:#d2be0e!important;}
.col-yellow{column-rule:5px double #d2be0e!important;-webkit-column-rule:5px double #d2be0e!important;-moz-column-rule:5px double #d2be0e!important;}

.color-gold,.color-hover-gold:hover{color:#fff!important;background-color:#ffd700!important;}
.text-color-gold,.text-color-hover-gold:hover{color:#ffd700!important;}
.border-color-gold,.border-color-hover-gold:hover{border-color:#ffd700!important;}
.caretcolor-gold{caret-color:#ffd700!important;} .color-focus-gold:focus{background-color:#ffd700!important;}
.col-gold{column-rule:5px double #ffd700!important;-webkit-column-rule:5px double #ffd700!important;-moz-column-rule:5px double #ffd700!important;}

.color-moccasin,.color-hover-moccasin:hover{color:#000!important;background-color:#ffe4b5!important;}
.text-color-moccasin,.text-color-hover-moccasin:hover{color:#ffe4b5!important;}
.border-color-moccasin,.border-color-hover-moccasin:hover{border-color:#ffe4b5!important;}
.caretcolor-moccasin{caret-color:#ffe4b5!important;} .color-focus-moccasin:focus{background-color:#ffe4b5!important;}
.col-moccasin{column-rule:5px double #ffe4b5!important;-webkit-column-rule:5px double #ffe4b5!important;-moz-column-rule:5px double #ffe4b5!important;}

.color-paleyellow,.color-hover-paleyellow:hover{color:#000!important;background-color:#ffffcc!important;}
.text-color-paleyellow,.text-color-hover-paleyellow:hover{color:#ffffcc!important;}
.border-color-paleyellow,.border-color-hover-paleyellow:hover{border-color:#ffffcc!important;}
.caretcolor-paleyellow{caret-color:#ffffcc!important;} .color-focus-paleyellow:focus{background-color:#ffffcc!important;}
.col-paleyellow{column-rule:5px double #ffffcc!important;-webkit-column-rule:5px double #ffffcc!important;-moz-column-rule:5px double #ffffcc!important;}
/*Linear gradient for Yellow - horizontal*/
.linear-gradient-yellow-h{background-image:linear-gradient(#d2be0e,#ffd700,#ffe4b5,#ffffcc) !important;}
/*Linear gradient for Yellow - vertical*/
.linear-gradient-yellow-v{background-image:linear-gradient(to right,#d2be0e,#ffd700,#ffe4b5,#ffffcc) !important;}

/*White => white and snow-white*/
.color-white,.color-hover-white:hover{color:#000!important;background-color:#fff!important;}
.text-color-white,.text-color-hover-white:hover{color:#fff!important;}
.border-color-white,.border-color-hover-white:hover{border-color:#fff!important;}
.caretcolor-white{caret-color:#fff!important;} .color-focus-white:focus{background-color:#fff!important;}
.col-white{column-rule:5px double #fff!important;-webkit-column-rule:5px double #fff!important;-moz-column-rule:5px double #fff!important;}

.color-snow-white,.color-hover-snow-white:hover{color:#000!important;background-color:#fffafa!important;}
.text-color-snow-white,.text-color-hover-snow-white:hover{color:#fffafa!important;}
.border-color-snow-white,.border-color-hover-snow-white:hover{border-color:#fffafa!important;}
.caretcolor-snow-white{caret-color:#fffafa!important;} .color-focus-snow-white:focus{background-color:#fffafa!important;}
.col-snow-white{column-rule:5px double #fffafa!important;-webkit-column-rule:5px double #fffafa!important;-moz-column-rule:5px double #fffafa!important;}

/*Your Custom Color => Replace comments with any color name/code or none*/
.color-myPie,.color-hover-myPie:hover{color:/*specify color*/!important;background-color:/*specify color*/!important;}
.text-color-myPie,.text-color-hover-myPie:hover{color:/*specify color*/!important;}
.border-color-myPie,.border-color-hover-myPie:hover{border-color:/*specify color*/!important;}
.caretcolor-myPie{caret-color:/*specify color*/!important;} .color-focus-myPie:focus{background-color:/*specify color*/!important;}
.col-myPie{column-rule:5px double /*specify color*/!important;-webkit-column-rule:5px double /*specify color*/!important;-moz-column-rule:5px double /*specify color*/!important;}
/*Linear gradient for myPie - horizontal*/
.linear-gradient-myPie-h{background-image:linear-gradient(/*specify color*/,/*specify color*/,/*specify color*/,/*specify color*/) !important;}
/*Linear gradient for myPie - vertical*/
.linear-gradient-myPie-v{background-image:linear-gradient(to right,/*specify color*/,/*specify color*/,/*specify color*/,/*specify color*/) !important;}


 /*;;;;;;;;;;;;;SECTION 2 MIX-BLEND-MODE;;;;;;;;;;;;;;;*/
 /*To use the "mix-blend-mode" property to
 *specify how an element's content should blend with its direct parent background,
 *use the "mix-blend-mode" property together with any bg or the color classes specified above 
 *Does not work on Edge and IE browsers
 */
.color-darken{mix-blend-mode:darken!important;} .color-lighten{mix-blend-mode:lighten!important;} 
.color-colordodge{mix-blend-mode:color-dodge!important;} .color-colorburn{mix-blend-mode:color-burn!important;} 
.color-multiply{mix-blend-mode:multiply!important;} .color-screen{mix-blend-mode:screen!important;} 
.color-overlay{mix-blend-mode:overlay!important;} .color-difference{mix-blend-mode:difference!important;} 
.color-exclusion{mix-blend-mode:exclusion!important;} .color-hue{mix-blend-mode:hue!important;} 
.color-blend-color{mix-blend-mode:color!important;}.color-saturation{mix-blend-mode:saturation!important;} 
.color-luminosity{mix-blend-mode:luminosity!important;} 

/*To reset color blend*/
.color-blend-reset{mix-blend-mode:normal!important;} 

/*;;;;;;;;;;;;;SECTION 3 BACKGROUND-BLEND-MODE;;;;;;;;;;;;;;;*/
 /*To use the "background-blend-mode" property to
 *specify how an element's background(color/image) blending mode,
 *use the "background-blend-mode" property together with any bg image or the color classes specified above 
 *Does not work on Edge and IE browsers
 */
.bg-blend-darken{background-blend-mode:darken!important;} .bg-blend-lighten{background-blend-mode:lighten!important;} 
.bg-blend-colordodge{background-blend-mode:color-dodge!important;} .bg-blend-color{background-blend-mode:color!important;}
.bg-blend-multiply{background-blend-mode:multiply!important;} .bg-blend-screen{background-blend-mode:screen!important;} 
.bg-blend-overlay{background-blend-mode:overlay!important;} .bg-blend-luminosity{background-blend-mode:luminosity!important;} 
.bg-blend-saturation{background-blend-mode:saturation!important;} 

/*To reset the background blend mix*/
.bg-blend-reset{background-blend-mode:normal!important;} 
/*PIE COLOR CSS ENDS*/
/*;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;*/
/*CURSOR STYLING BEGINS HERE*/
/*Cursors and row measurements*/
/*Overwrite cursor different mode */
.pie-overwrite .pie-cursor{}

/*Cursors styling*/
.pie-cursor{position:absolute; pointer-events:none;}
section.pie-cursors{visibility:hidden;position:relative;z-index:2;}
section.pie-dragcursor{visibility:visible;}
.pie-focused section.pie-cursors{visibility:visible;}
.pie-cursor{border-left:1px solid black;border-right:none;width:0;}

/* Shown when moving in bi-directional text*/
.pie,.pie-secondarycursor{border-left:1px solid silver;}
.pie-big-cursor .pie-cursor{width:auto;border:0 !important;background:#7e7;}
.pie-big-cursor .pie-cursors{z-index: 1;}

/*Disable mouse and pointer events - also available at the main pie.css file*/
.pie-disabled{cursor:not-allowed !important;} .pie-disabled *,:disabled *{pointer-events:none !important;}

/*Hide cursor on a class*/
.cursor-none{cursor: none !important;}

/*Animate cursors*/
.pie-animate-fat-cursor{width:auto;border:0;-webkit-animation:blink 1.06s steps(1) infinite;-moz-animation:blink 1.06s steps(1) infinite;animation:blink 1.06s steps(1) infinite;background-color: #7e7;}
@-moz-keyframes blink {0%{}50%{background-color:transparent;}100%{}}
@-webkit-keyframes blink {0%{} 50%{background-color:transparent;}100%{}}
@keyframes blink{0%{}50%{background-color:transparent;}100%{}}

/*Different cursor pointer styles to use within an HTML element or even for your entire <body> element*/
.cursor-alias{cursor:alias;} .cursor-all-scroll{cursor:all-scroll;} .cursor-auto{cursor:auto;}
.cursor-cell{cursor:cell;} .cursor-context-menu{cursor:context-menu;} .cursor-col-resize{cursor:col-resize;}
.cursor-copy{cursor:copy;} .cursor-crosshair{cursor:crosshair;} .cursor-e-resize{cursor:e-resize;}
.cursor-ew-resize{cursor:ew-resize;}.cursor-grab{cursor:-webkit-grab; cursor:grab;}
.cursor-grabbing{cursor:-webkit-grabbing; cursor:grabbing;}
.cursor-help{cursor:help;}.cursor-move{cursor:move;}.cursor-n-resize{cursor:n-resize;}
.cursor-ne-resize{cursor:ne-resize;}.cursor-nesw-resize{cursor:nesw-resize;}.cursor-ns-resize{cursor:ns-resize;}
.cursor-nw-resize{cursor:nw-resize;}.cursor-nwse-resize{cursor:nwse-resize;}.cursor-no-drop{cursor:no-drop;}
.cursor-not-allowed{cursor:not-allowed;}.cursor-pointer{cursor:pointer;}.cursor-progress{cursor:progress;}
.cursor-row-resize{cursor:row-resize;}.cursor-s-resize{cursor:s-resize;}
.cursor-se-resize{cursor:se-resize;}.cursor-sw-resize{cursor:sw-resize;}.cursor-text{cursor:text;}
.cursor-w-resize{cursor:w-resize;}.cursor-wait{cursor:wait;}
.cursor-zoom-in{cursor:zoom-in;}.cursor-zoom-out{cursor:zoom-out;}

/*Reset mouse pointer shape to default*/
.cursor-default{cursor:default !important;}

/*
*Hide the cursor when printing 
*It is okay to replace "section" with "div" or any relevant element and use.
*/
@media print{.pie section.hide-cursors {visibility:hidden;}}
/*END OF CURSORS STYLING*/
/*;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;*/
/*PIE TYPOGRAPHY CSS BEGINS*/
/*;;;;;;;;;;;;;;;;;;SECTION 1 - TEXT & FONT MANIPULATION;;;;;;;;;;;;;;;;;;;*/

/*".text-reset" class - Resets all font formatting(experimental)
*Use ".text-normal" (recommended) or ".text-initial" class instead*/
.text-reset{text-shadow:none !important;text-decoration:none !important;text-transform:none !important;}

.text-normal{font-style:normal !important; font-weight:normal; font-variant:normal; word-wrap:normal;word-spacing:normal;word-break:normal;/*force normal browser defaults*/}
.text-initial{font-size:initial !important;text-align:initial;text-decoration:initial;text-shadow:initial;text-transform:initial;word-wrap:initial;word-spacing:initial;word-break:initial;/*load initially declared font style*/} 

.text-align{position:absolute;top:0;left:0;bottom:0;right:0;}
.text-align-aspect{position:absolute;top:0;left:0;bottom:0;right:0;text-align:center;}
.text-wide{letter-spacing:4px !important;}
.text-shadow-black{text-shadow:5px 5px 10px black;}.text-shadow-myPie{text-shadow:5px 5px 10px /*specify a color*/;}
.text-nowrap{white-space:nowrap !important;} 
.text-dir-right{direction:rtl !important;} .text-dir-left{direction:ltr !important;}
.text-right{text-align:right;} .text-left{text-align:left;} .text-center{text-align:center !important;} 
.text-justify{text-align:justify;}
.text-indent{text-indent:50px !important;} 
@media(max-width:610px){.text-indent{text-indent:30px;}}
@media(max-width:310px){.text-indent{text-indent:20px;}} 
@media(max-width:160px){.text-indent{text-indent:15px;}}
.text-small-caps{font-variant:small-caps !important;} .text-overflow{text-overflow:"=>";}
.text-bold{font-weight:400 !important;} .text-bolder{font-weight:800 !important;} 
.text-italics{font-style:italic !important;} .text-oblique{font-style:oblique !important;}
.text-x-small{font-size:x-small !important;} .text-small{font-size:small !important;} .text-medium{font-size:medium !important;} 
.text-large{font-size:large !important;}  .text-x-large{font-size:x-large !important;} 
.font-large{font-size:32px !important;} .font-larger{font-size:64px !important;}
.text-overline{text-decoration:overline !important;} .text-underline{text-decoration:underline !important;} 
.text-strike{text-decoration:line-through !important;}
.text-underline.text-overline{text-decoration:underline overline !important;}
.text-decorate-wavy{text-decoration-style:wavy;}.text-decorate-dotty{text-decoration-style:dotted;}
.text-decorate-solid{text-decoration-style:solid;}.text-decorate-double{text-decoration-style:double;}
.text-change-upper{text-transform:uppercase;} .text-change-lower{text-transform:lowercase;} 
.text-change-cap{text-transform:capitalize;}
.text-vertical-mode{writing-mode:vertical-rl;} .text-break{word-wrap:break-word;}
/*Text colorful line decorations for underline and overline when used together*/
.text-line-decorate-dotty{text-decoration:underline overline dotted;} .text-line-decorate-wavy{text-decoration:underline overline wavy;}
.text-line-decorate-wavy-blue{text-decoration:underline overline wavy blue;} .text-line-decorate-dotty-blue{text-decoration:underline overline dotted blue;}
.text-line-decorate-wavy-brown{text-decoration:underline overline wavy brown;} .text-line-decorate-dotty-brown{text-decoration:underline overline dotted brown;}
.text-line-decorate-wavy-red{text-decoration:underline overline wavy red;} .text-line-decorate-dotty-red{text-decoration:underline overline dotted red;}
.text-line-decorate-wavy-myPie{text-decoration:underline overline wavy /*specify a color*/;} .text-line-decorate-dotty-myPie{text-decoration:underline overline dotted /*specify a color*/;}
/*Text underline with colors*/
.text-underline-purple{-webkit-text-decoration-color:purple;text-decoration-color:purple;}.text-underline-blue{-webkit-text-decoration-color:blue;text-decoration-color:blue !important;} .text-underline-brown{-webkit-text-decoration-color:brown;text-decoration-color:brown;} .text-underline-red{-webkit-text-decoration-color:red;text-decoration-color:red;}
.text-underline-myPie{-webkit-text-decoration-color:/*specify a color*/; text-decoration-color:/*specify a color*/;}
/*Text and fonts manipulation ends*/

/*;;;;;;;;;;;;;;;;;;;;;;SECTION 2 - LISTS;;;;;;;;;;;;;;;;;;;;;;;;*/
/*Lists and list items*/
/*remove the list style types*/
.list-style-none{list-style-type:none;margin-left:0;padding:0;}

/*Uses symbols for list style type*/
.list-style-square{list-style-type:square;} 
.list-style-circle{list-style-type:circle;} .list-style-disc{list-style-type:disc;} 

/*Uses decimal for list style type*/
.list-style-decimal{list-style-type:decimal;} .list-style-decimal-0{list-style-type:decimal-leading-zero;}

/*Uses characters for list style type*/
.list-style-georgian{list-style-type:georgian;} .list-style-hebrew{list-style-type:hebrew;}
.list-style-hiragana{list-style-type:hiragana;} .list-style-hiragana-iroha{list-style-type:hiragana-iroha;}
.list-style-katakana{list-style-type:katakana;} .list-style-katakana-iroha{list-style-type:katakana-iroha;}
.list-style-khz{list-style-type:khz;}
.list-style-upper-a{list-style-type:upper-alpha;} .list-style-lower-a{list-style-type:lower-alpha;}
.list-style-upper-l{list-style-type:upper-latin;} .list-style-lower-l{list-style-type:lower-latin;}
.list-style-upper-r{list-style-type:upper-roman;} .list-style-lower-r{list-style-type:upper-roman;}
.list-style-upper-g{list-style-type:upper-greek;} .list-style-lower-g{list-style-type:lower-greek;}

/*List style position*/
.list-style-position-o{list-style-position:outside;} .list-style-position-i{list-style-position:inside;}

/*Displays lists horizonatlly - i.e, inline*/
.list-display-line{display:inline-block !important;max-width:100%;height:auto; /*For <ul> or <ol> tag*/}
.list-item-line{display:inline; /*For each <li> item*/}

/*Premade list themes*/
/*Normal theme
*You may, however, use the ".radius-theme-list" normal theme class together with any color class
*to produce a different background color and text color */
.radius-theme-list{display:inline-block !important;max-width:100%;background:inherit;padding:20px;border-left:5px solid white}
.radius-theme-list li{background:inherit; margin:auto; border-bottom:1px solid #ddd;}
.radius-theme-list li:last-child{border-bottom:none;}

/*slate theme*/
.radius-theme-list-slate{display:inline-block !important;max-width:100%;background:#778899;padding:20px; border-left:5px solid purple;}
.radius-theme-list-slate li{background:#cce5ff; margin:auto; border-bottom:1px solid #ddd;}
.radius-theme-list-slate li:last-child{border-bottom:none;}

/*royal blue theme*/
.radius-theme-list-blue{display:inline-block !important;max-width:100%;background:#4169E1;padding:20px; border-left: 5px solid navy;}
.radius-theme-list-blue li{background:#cce5ff; margin:auto; color:#fff; border-bottom:1px solid #ddd;}
.radius-theme-list-blue li:last-child{border-bottom:none;}

/*black theme*/
.radius-theme-list-black{display:inline-block !important;max-width:100%;background:#000;padding:20px; border-left: 5px solid black;}
.radius-theme-list-black li{background:none; margin:auto; color:#fff; border-bottom:1px solid #ddd;}
.radius-theme-list-black li:last-child{border-bottom:none;}

/*white theme*/
.radius-theme-list-white{display:inline-block !important;max-width:100%;background:#fff;padding:20px; border-left: 5px solid ghostwhite;}
.radius-theme-list-white li{background:none; margin:auto; color:#000; border-bottom:1px solid #ddd;}
.radius-theme-list-white li:last-child{border-bottom:none;}

/*crimson theme*/
.radius-theme-list-crimson{display:inline-block !important;max-width:100%;background:#dc143c;padding:20px; border-left: 5px solid red;}
.radius-theme-list-crimson li{background:#fff0f5; margin:auto; color:#fff; border-bottom:1px solid #ddd;}
.radius-theme-list-crimson li:last-child{border-bottom:none;}

/*custom theme*/
.radius-theme-list-myPie{display:inline-block !important;max-width:100%;background:/*Replace with color name/code or none*/; padding:20px; border-left: 5px solid /*Replace with color name or code*/;}
.radius-theme-list-myPie li{background:/*Replace with color name/code or none*/; margin:auto; color:/*Replace with color name or code*/; border-bottom: 1px solid #ddd;}
.radius-theme-list-myPie li:last-child{border-bottom:none;}
/*End of lists and list items*/

/*;;;;;;;;;;;;;;;;;;;;;;SECTION 3 - DECLARE NEW FONTS;;;;;;;;;;;;;;;;;;;;;;;*/
/*Declaring the abeeze fontset - please refer to documentation on this font*/
@font-face{font-family:"abeezee italic";src:url('../include/font/aBeeZee/ABeeZee-Italic.ttf');font-weight:italic;}
@font-face{font-family:"abeezee regular";src:url('../include/font/aBeeZee/ABeeZee-Regular.ttf');font-weight:normal;}

/*Declaring the expressway-free fontset - please refer to documentation on this font*/
@font-face{font-family:"expressway rg";src:url('../include/font/expressway-free/expressway rg.ttf');font-weight:normal;}

/*Declaring the good-times fontset - please refer to documentation on this font*/
@font-face{font-family:"good times";src:url('../include/font/expressway-free/good times rg.ttf');font-weight:normal;}

/*Declaring the homoarak fontset - please refer to documentation on this font*/
@font-face{font-family:homoarak;src:url('../include/font/homoarak/HOMOARAK.TTF');font-weight:normal;}

/*Declaring the loopy fontset - please refer to documentation on this font*/
@font-face{font-family:"loopy italics";src:url('../include/font/loopy/LOOPY_IT.TTF');font-weight:italic;}
@font-face{font-family:loopy;src:url('../include/font/loopy/LOOPY___.TTF');font-weight:normal;}

/*Declaring the mexcellent fontset - please refer to documentation on this font*/
@font-face{font-family:"mexcellent 3d";src:url('../include/font/mexcellent/mexcellent 3d.ttf');font-weight:normal;}
@font-face{font-family:"mexcellent rg";src:url('../include/font/mexcellent/mexcellent rg.ttf');font-weight:normal;}

/*Declaring the trashco fontset - please refer to documentation on this font*/
@font-face{font-family:trashco;src:url('../include/font/trashco/trashco.ttf');font-weight:normal;}
/*PIE TYPOGRAPHY CSS ENDS*/
/*;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;*/
/*;
* NOTE TO USER
*The pie.css software contains some styles that are related to the internal workings of a document.
*You may not touch them unless you know what you do.
*/