@charset "utf-8";
/* CSS Document */
/******************/
/* resets & fixes */
/******************/

*,*:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.clearfix:before, .clearfix:after {
    content: " ";
    display:table;
}

.clearfix:after {
    clear:both;
}

/*top level*/
html {
    font-size: 95%;
    font-weight: normal;
    font-family:Arial, helvetica, sans-serif;
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}

body, h1, h2, h3, h4, ul, p /*ul*/
{	margin: 0;
    padding: 0;
    color:#333;
}

header,
nav,
main,
section,
article,
aside,
footer {
    display: block;
}

body {
    background: url("css-images/bg1.png") repeat-x scroll 0 0 #ffffff;
}

#wrapper {
    margin-right:auto;
    margin-left: auto;
    width: 96%; /*holding outermost div*/
    max-width: 1414px; /*147.29166666%; 96%;1414px;*/
}

header {
   /*background-image: url("css-images/background1.png");*/
    /*background-repeat: repeat-x;*/
    height: 6em; /*8.1vh 72px*/
}

main {
    padding-top: .5em;
}

footer {
    width: 100%;
    background-color: #7A1E99;
    height: 3.5em; /*8.1vh 72px*/
}

/**fonts**/
h1, h2, h3, h4 {
    font-weight: lighter;
    color: #585858;
    line-height: 1.3em;
}

::selection {
    color:#ffffff;
    background-color:#7A1E99;
}

/**fonts reuse**/
p, li {line-height: 1.3em;}

.small {
    font-size: .9em;/*font-size: 1.1vw;*/ }

.smaller {
    font-size: .8em; /*font-size: .9vw;*/ }

.smallest {
    font-size: .7em; /*font-size: .9vw;*/ }

.larger {font-size: 1.2em;}

.justify-end {
    display:flex;
    flex-wrap:wrap;
    align-content:flex-end;
}/*was {display: flex; justify-content:flex-end;} */

.text-bold {font-weight: 600;}
.italic {font-style: italic;}

.text-blue { color: #336699;}
.text-grey {color: #4c4c4c;}
.text-white { color: #fff;}
.text-purple {color: #7A1E99;}/*527*/
.text-lilac {color: #9966cc;}
.text-navy {color: #000080;}
.text-teal {color: #008080;}
.text-orange {color: #ff8c00;}
.text-lime {color: #00ff00;}
.text-black {color: #000000;}
.text-mid-blue { color: #507CBE; } /**facebook**/
.text-skyblue {color: #63CDF1; } /**twitter**/
.text-red {color: #F16261;}  /**google+**/
.text-blue-grey {color:#90CADD;} /**LinkedIn**/
.text-fade {color:#A8A8A8} /**Fading out paragraph**/
.text-fade-light {color:#C0C0C0} /**Fading out paragraph**/
.text-fade-lighter {color:#E0E0E0} /**Fading out paragraph**/

/**links**/

a:link, a:active, a:visited {
    text-decoration: none;
    /*color: #512654;525*/
    color: #7A1E99;/*527*/
}
a:hover {color: #d3d3d3;}
:hover.info-hover { color: #7a1e99;}

a.small-white:link, a.small-white:active, a.small-white:visited {
    font-size: .9em;
    color: #fff;
    text-decoration: none;
}

a.small-white:hover {
    color: #6699cc;
}

/**images**/
img {
    max-width: 100%;
    border: 0;
}

.bgimg-home {
    background: url("/images/superchilling.jpg");
    background-repeat: no-repeat;
    height: 11em;

}

img.seventy {max-width: 70%}
img.fifty {max-width: 50%}
img.twenty-five {max-width: 25%}
img.twenty {max-width: 20%}

/**Useful reuse utility**/

.break:after {
    content:"\000A";
    white-space: pre;
}

.separator:before {
    content: " | ";
    color: #4c4c4c;
}

.clear-both {clear: both;}
.rwd-line {display: inline;}
.no-wrap {white-space: nowrap;}

/**layout**/

.right {float: right;}
.left {float: left;}

.text-right {text-align: right;}

.centre, .center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.width-30 {width: 30%;}
.width-50 {width: 50%;}

.blue-background {background-color: #0000cc;}
.purple-background {background-color: #7A1E99;}/*527*/
.grey-background {background-color: #cccccc;}
.light-grey-background {background-color: #F6F6F6;}
.lime-background {background-color: #33ff33;}
.cyan-background {background-color: #339999;}
.orange-background {background-color: #ff6600;}
.sky-background {background-color: #33ccff;}
.lilac-background {background-color: #9999ff;}

.pad-2 {padding: .2em;}
.pad-3 {padding: .3em;}
.pad-5 {padding: .5em;}
.pad-7 {padding: .7em;}
.pad-10 {padding: 1em;}
/**top**/
.pad-3-top { padding-top: .3em;} /**4px,3pt**/
.pad-5-top { padding-top: .5em;} /**8px,6pt**/
.pad-10-top { padding-top: 1em;} /**16px,12pt**/
.pad-20-top { padding-top: 2em;} /**32px,24pt**/
/**right**/
.pad-1-right { padding-right: .1em;}
.pad-3-right { padding-right: .3em;}
.pad-5-right { padding-right: .5em;}
.pad-10-right { padding-right: 1em;} /**16px,12pt**/
.pad-20-right { padding-right: 2em;}
/**bottom**/
.pad-1-bottom { padding-bottom: .1em;} /**4px,3pt**/
.pad-3-bottom { padding-bottom: .3em;} /**4px,3pt**/
.pad-5-bottom { padding-bottom: .5em;} /**8px,6pt**/
.pad-10-bottom { padding-bottom: 1em;} /**16px,12pt**/
.pad-20-bottom { padding-bottom: 2em;} /**32px,24pt**/
.pad-30-bottom { padding-bottom: 3em;} /****/
/**left**/
.pad-1-left { padding-left: .1em;} /**4px,3pt**/
.pad-3-left { padding-left: .3em;} /**4px,3pt**/
.pad-5-left { padding-left: .5em;} /**8px,6pt**/
.pad-10-left { padding-left: 1em;} /**16px,12pt**/
.pad-20-left { padding-left: 2em;} /**32px,24pt**/
.pad-30-left { padding-left: 3em;} /****/
/**top**/
.margin-top-minus-20 {margin-top: -2em;}
.margin-top-minus-15 {margin-top: -1.5em;}
.margin-top-minus-10 {margin-top: -1em;}
/**top**/
.margin-top { margin-top: 0;}
.margin-3-top {margin-top: .3em;}
.margin-5-top {margin-top: .5em;}
.margin-10-top {margin-top: 1em;}
.margin-20-top {margin-top: 2em;}
/**right**/
.margin-0-right {margin-right: 0;}
.margin-2-right {margin-right: .2em;}
.margin-5-right {margin-right: .5em;}
.margin-10-right {margin-right: 1em;}
.margin-20-right {margin-right: 2em;}
/**bottom**/
.margin-5-bottom {margin-bottom: .5em;}
.margin-10-bottom {margin-bottom: 1em;}
.margin-20-bottom {margin-bottom: 2em;}
/**left**/
.margin-3-left {margin-left: .3em;}
.margin-5-left {margin-left: .5em;}
.margin-8-left {margin-left: .75em;}
.margin-10-left {margin-left: 1em;}
.margin-20-left {margin-left: 2em;}
/**borders**/
.border {border: solid 1px #cccccc;}
.border-light {border: solid 1px #cccccc;}
.border-bottom {border-bottom: solid 1px #cccccc;}
.border-top {border-top: solid 1px #cccccc;}
.border-bottom-purple {border-bottom: solid 1px #7A1E99;}

.inline { display: inline;}
.block { display: block;}
.inline-block { display: inline-block;}
.list-style-none { list-style: none;}

/**search box styling**/
.topsearch {
    width: 50%; /**has styling in media query**/
    margin-top: 3%;
    /*margin-left: 3%;*/
    border: none;
}

.topsearch-query {
    width: 97%;
    float: left;
    height: 2.5em; /*may need to change this setting for mobs**/
    /**font-size: 1em;/*16px*/
    /**font-size: 1.2vw;**/
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: .2em;
}

.topsearch-submit {
    float: right;
    margin-top: -2.3em;
    margin-right: 5%;
    /*background-image: url('css-images/search_button.png');
    background-repeat: no-repeat;*/
    border: none;
    cursor: pointer;
    background-color: #fff;
}

input:focus, textarea:focus {
    outline-color:#711a8d;
}

/**tooltip**/
a.tooltip {outline:none; }
a.tooltip strong {line-height:3em;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
    z-index:10;display:none; padding:.5em .5em;
    margin-top:-3em; margin-left:-8%;
    width:10%; line-height:1.3em;
    text-align: left;
}

a.tooltip:hover span{
    display:inline; position:absolute; color:#111;
    border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:1em;border:0;left:-10%;}

/*CSS3 extras*/
a.tooltip span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
}

/**Video container**/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.video-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/**Grid**/
.col-1-12 {
    width: 6.5%;
	/* background-color:#FBF6D0; */
}

.col-2-12 {
    width: 15%;
	/*background-color:#CEF5BB;*/
}

.col-3-12 {
    width: 23.5%;
	/*background-color:#C2C0F9;*/
}

.col-4-12 {
    width:32%;
    /*background-color:#F9B3B4;*/
}

.col-5-12 {
    width: 40.5%;
    /*background-color:#CAF8B5;*/
}

.col-6-12 {
    width: 49%;
	/*background-color:#B59E9E;*/
}

.col-7-12 {
    width: 57.5%;
	/*background-color:#A2B997;*/
}

.col-8-12 {
    width: 66%;
	/*background-color:#F799B0;*/
}

.col-9-12 {
    width: 74.5%;
	/*background-color:#F3D8AC;*/
}

.col-10-12 {
    width: 83%;
	/* background-color:#CFC469; */
}

.col-11-12 {
    width: 91.5%;
	/* background-color:#EDB5E9; */
}

.col-12-12 {
    width: 100%;
	/*background-color: #A5D4EB;*/
}

[class*='col-'] {
	float:left;
    margin-right: .5%;
    padding-left: .5%;
    padding-right: .5%;
}

.row [class*='col-']:last-of-type {
	margin-right:0;
}

.alpha {
    margin-left: 0;
    padding-left: 0;
}

.omega {
    margin-right: 0;
    padding-right: 0;
}
/*------------------------------------*\
    Media Queries
\*------------------------------------*/

@media only screen and /*(min-width: 320px) and*/ (max-width: 768px) {

    main, nav, section, aside {
        min-width: 100%;}

    .full-width {min-width: 100%;}

    /**footer styles for med range devices**/
    footer p, footer li  {font-size: .8em}

    /**for image icons footer only in small mobiles**/
    img.icons {max-width: 20%; }
    img.mob-seventy {max-width: 70%;}
    img.mob-fifty {max-width: 50%;}
    .mid-screen-none {display: none;}
    /*.rwd-line {display: inline;}*/

    /**typography for mobiles**/
    .rwd-line {display: block;}

    /**search box styling**/
    .topsearch {
        width: 98%; /**see styling in non-media queries**/
    }
}

/**adjustments for smallest screens**/
@media only screen and (max-width: 420px)  {
    /**footer styles for small screens devices**/
    footer {height: 6em;}
    .mob-none {display: none;}
}
