/* Testing sticky footer */

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 100px; /* bottom = footer height */
    background-color: #fff;
    color: #292929;
}

/***********************
* site layout
***********************/

#content{
    /*padding: 2em 0;*/
    font-size: 16px;
}

section{
    padding: 2em 0 3em 0;
}

/*a:link,
a:visited{
    color: #337ab7;
}*/

a:hover,
a:focus,
a:active{
    color: #b54f3f;
    text-decoration: none;
}

/***********************
* importantmessage
***********************/

.importantmessage{
    text-align: center;
    margin: 1em 0 1em 0;
}

/***********************
* font awesome social media styling
***********************/

.fa-facebook,
.fa-facebook-square{
    color: #3b5998;
}

.fa-twitter,
.fa-twitter-square{
    color: #55acee;
}

.fa-youtube,
.fa-youtube-square{
    color: #cd201f;
}

.fa-google-plus,
.fa-google-plus-square{
    color: #dd4b39;
}

.fa-linkedin,
.fa-linkedin-square{
    color: #0077b5;
}

.fa-facebook-square:hover,
.fa-facebook:hover,
.sm-facebook:hover{
    color: #3b5998;
}

.fa-twitter-square:hover,
.fa-twitter:hover,
.sm-twitter:hover{
    color: #55acee;
}

.fa-youtube-square:hover,
.fa-youtube:hover,
.sm-youtube:hover{
    color: #cd201f;
}

.fa-google-plus-square:hover,
.fa-google-plus:hover,
.sm-google-plus:hover{
    color: #dd4b39;
}

.fa-linkedin-square:hover,
.fa-linkedin:hover,
.sm-linkedin:hover{
    color: #0077b5;
}

/***********************
* header
***********************/

#header {
    padding: 0.5em 0 0.5em 0;
    /*background-color: #eff9ff;*/
    background-color: #fff;
}

.alert-header{
    border: none;
    border-radius: 0;
    position: fixed;
    width: 100%;
    top: 0;
    margin: 0;
    z-index: 56;
}

.alert-header-placeholder{
    height: 52px;
    width: 100%;
}

#headertitle{
    font-size: 2em;
    /*margin: 10px 0;*/
    margin: 0.8em 0;
}

.header-social-media{
    float: right;
    /*margin: 0.5em 0.8em 0 0;*/
    margin: 1.1em 0.8em 0 0;
    font-size: 1.5em;
}

.header-social-media i{
    color: #337ab7;
}

/* error */
.speciallogo{
    margin: 0;
}

/***********************
* navigation
***********************/

.navbar{
    border-radius: 0;
    margin: 0;
    /*position: fixed;*/
    width: 100%;
    top: 0;
    z-index: 55;
}

#nav-placeholder{
    /*height: 50px;*/
}

.navbar-default{
    /*background-color: #eff9ff;*/
    /*background-color: #337ab7;*/
    background-color: #4b8dc5;
    /*
        border: none;
    */
    border-bottom: 5px solid #2d5f8a;
    z-index: 101;
}

.navbar-default .navbar-nav > li > a:link,
.navbar-default .navbar-nav > li > a:visited,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:active,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{
    /*color: #292929;*/
    color: #fff;
}

@media screen and (min-width: 768px){
    .search-icon{
        width: 50px;
        text-align: center;
    }

    .search-drop-down{
        width: 280px;
    }

    .navbar-collapse{
        /* just when darker blue and white header and no logo*/
        padding-left: 0;
    }
}

/***********************
* footer
***********************/

#footer {
    position: absolute;
    left: 0;
    bottom: 0;
    min-height: 100px;
    width: 100%;
    background-color: #eff9ff;
    padding-top: 1em;
}

#footer ul{
    font-size: 2.8em;
    list-style: none;
    margin: 0;
    padding: 0;
}

#footer li{
    display: inline-block;
}

/***********************
* bootstrap overrides
***********************/

.alert{
    z-index: 200;
}

.carousel-inner{
    height: 350px;
}

.carousel-inner .item{
    height: 100%;
}

.container{
    width: 100%;
}

.panel{
    border: 1px solid #ddd;
}

.panel-default > .panel-heading{
    background-color: #eff9ff;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus,
.nav > li > a:hover{
    /*background-color: #d1dae0;*/
    background-color: #2d6596;
    color: #fff;
}

.navbar-default .navbar-nav > .open,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus{
    /*background-color: #d1dae0;*/
    background-color: #2d6596;
}

.navbar-default .navbar-toggle .icon-bar{
    background-color: #fff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{
    background-color: #2d5f8a;
}

/*.btn-primary{
    color: #fff;
}*/

@media screen and (min-width: 1430px){
    .container{
        width: 1400px;
    }
}

/***********************
* find us section (home)
***********************/

#find-us ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

#find-us li{
    font-size: 2.4em;
    line-height: 1.5em;
    padding: 0 0.1em;
    display: inline;
}

#find-us .fa:hover{
    color: #ff6c54;
}

@media screen and (min-width: 500px){
    #find-us li{
        font-size: 3em;
        padding: 0 0.4em;
    }
}

@media screen and (min-width: 1000px){
    #find-us li{
        font-size: 4em;
        padding: 0 1em;
    }
}

/***********************
* tiles
***********************/

.pointer{
    cursor: pointer;
}

.event-tile{
    background: #5880a2;
    transition: all 0.5s;
}

.event-tile:hover{
    background: #3b6488;
}

.event-tile > a:link,
.event-tile > a:hover,
.event-tile > a:focus,
.event-tile > a:active,
.event-tile > a:visited{
    color: #fff;
    text-decoration: none;
    padding: 10px;
}

.event-tile > a > p,
.event-tile > a > h1,
.event-tile > a > h2,
.event-tile > a > h3{
    margin: 5px 0;
    padding: 5px 0;
}

.event-tile > a > h3{
    font-size: 1.3em;
}

.valign {
    position:relative;
    top:50%;
    transform: translateY(-50%);
}

.tilebackelementup {
    height:40%;
    margin-top:8%;
}
.tilebackelementdown {
    height:40%;
    margin-bottom:10%;
}

.tilebacktext {
    margin-left:10%;
    display:inline-block;
    font-size:30px;
}

.tilebacklogo {
    float:left;
    margin-left:20%;
    display:inline-block;
    width:20%;
    height:auto;
}

.tilefrontelement {
}

.tilefronttext {
    margin: 5%;
    font-size: 14px;
}

.tilefrontlogo {
    height:30% !important;
    width:auto !important;
    margin:auto !important;
    max-width:100%;

}

.toolfrontlogo {
    height:60% !important;
    width:auto !important;
    margin:auto !important;
    max-width:100%;

}

.tileslidefront {
    width:97%;
    height:300px;
}

/*.headingleft {
    color:#e1e1e1;
    float:left;
    margin-left:3px;
}*/

.headingright {
    margin-top: 10px;
    /*float:right;
    margin-bottom:1%;
    margin-right:3px;*/
}

@media (min-width: 1350px) {
    .tilecontainer {
        position:relative;
        margin:auto;
        width:1200px;
    }
}
@media (min-width: 1200px) and (max-width: 1350px) {
    .tilecontainer {
        position:relative;
        margin:auto;
        width:1000px;
    }
}
@media (min-width: 980px) and (max-width: 1200px) {
    .tilecontainer {
        position:relative;
        margin:auto;
        width:600px;
    }
}


@media (min-width: 889px) and (max-width: 980px)  {
    .tilecontainer {
        position:relative;
        margin:auto;
        width:600px;
    }
}

@media (min-width: 300px) and (max-width: 888px)  {
    .tilecontainer {
        position:relative;
        margin:auto;
        width:300px;
    }
}


/***********************
* mgrid tiles
***********************/

.m-grid{
    margin: 0 auto;
    /*background: #ccc;*/
}

.m-grid:after{
    content: '';
    display: block;
    clear: both;
}

.m-item{
    width: 290px;
    height: 310px;
    float: left;
    margin: 5px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

/* OVERLAY INFO */

.m-overlay{
    display: none;
    position: absolute;
    margin: -10px 0 0 -10px;
    padding: 10px;
    box-sizing: border-box;
    width: 290px;
    height: 310px;
    color: #fff;
    background: rgba(75, 141, 197, 0.95);
    z-index: 10;
}

.m-overlay a:link,
.m-overlay a:visited,
.m-overlay a:hover,
.m-overlay a:focus{
    color: #fff;
}

.m-overlay-close{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
}

.m-overlay-close > a{
    position: absolute;
    top: 3px;
    left: 7px;
}

.m-overlay-uni{
    width: 225px;
}

.m-overlay-uni > p{
    margin: 0;
}

.m-overlay-info{
    position: absolute;
    top: 80px;
    width: 270px;
}

.m-overlay-info > p{
    margin: 0;
}

.m-overlay-link{
    position: absolute;
    bottom: 10px;
    right: 10px;
}


/* FRONT
visible element at beginning */

.m-front{
    position: relative;
    height: 100%;
}

.m-front-flag{
    display: none;
    position: absolute;
}

.m-front-flag:hover{
    cursor: pointer;
}

.m-front-flag-stripe{
    width: 30px;
    height: 7px;
}

.background-red{
    background: #d01c1c;
}

.background-white{
    background: #ffffff;
}

.m-front-logo{
    height: 130px;
    text-align: center;
    padding-top: 30px;
}

.m-front-logo > a > img{
    max-width: 100%;
    max-height: 100%;
}

.m-front-name{
    text-align: center;
    margin: 10px 0 0 0;
    font-size: 1.2em;
}

.m-front-name > h3{
    margin: 0;
}

.m-front-symbol-description > div{
    position: absolute;
    left: -10px;
    bottom: 25px;
    width: 290px;
    box-sizing: border-box;
    height: 35px;
    padding: 8px 0 0 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    display: none;
}

.m-front-symbols{
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 290px;
    padding: 6px 0 0 0;
    height: 35px;
    box-sizing: border-box;
    font-size: 1.3em;
    /*background: rgba(75, 141, 197, 0.95);*/
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
}

.m-front-symbols a:link,
.m-front-symbols a:visited,
.m-front-symbols a:hover,
.m-front-symbols a:focus{
    color: #fff;
}

.m-front-symbols > ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.m-front-symbols > ul > li{
    position: relative;
    display: inline-block;
    width: 68px;
    text-align: center;
    box-sizing: border-box;
}

.line-through{
    position: absolute;
    width: 30px;
    height: 4px;
    background: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/***********************
* metrojs overrides
***********************/

.live-tile.two-wide,
.list-tile.two-wide,
.copy-tile.two-wide,
.tile-strip .flip-list > li.two-wide {
    /*  width:310px; */
    width:290px;
}

.live-tile.two-tall,
.list-tile.two-tall,
.copy-tile.two-tall,
.tile-strip .flip-list > li.two-tall {
    height:310px;
    /* height:280px; */
}

/***********************
* helper classes
***********************/

.round-icon{
    width: 65px;
    height: 65px;
    line-height: 65px;
    font-size: 2.2em;
    border-radius: 50%;
}

.delimiter{
    max-width: 80px;
    border-width: 5px;
    margin: 30px auto;
}

.border-red{
    border-color: #ff6c54;
}

.border-lightblue{
    border-color: #4b8dc5;
}

.border-white{
    border-color: #fff;
}

.bg-red{
    background-color: #ff6c54;
}

.bg-red a:link,
.bg-red a:visited{
    color: #fff;
}

.bg-red a:hover,
.bg-red a:active,
.bg-red a:focus{
    color: #292929;
}

.no-margin{
    margin: 0;
}

.no-margin-top{
    margin-top: 0;
}

.padding{
    padding-top: 2em;
    padding-bottom: 3em;
}

.inline-list{
    list-style: none;
    margin: 0;
    padding: 0;
}

.inline-list li{
    display: inline;
}

.error-code{
    margin: 1em 0 0.5em 0;
    color: #ee2246;
    transform: rotate(-30deg);
    font-size: 4em;
}

.bootstrapred {
    background-color:#F2DEDE;
}

.bootstrapgreen {
    background-color:#DFF0D8;
}

/* cookie warning */

#cookie-notification{
    display: none;
    position: fixed;
    bottom: 0;
    background: #000000;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    width: 100%;
    z-index: 555;
    padding: 5px;
}

#cookie-notification > p{
    margin: 0;
    padding: 0;
}

/***********************
* project header
***********************/

.logo{
    max-width: 100%;
    max-height: 110px;
    margin: 10px 0 0 0;
}

.projectheader h2{
    margin: 10px 0 10px 0;
}

.projectheader p{
    margin: 0;
}

.project-share{
    /*padding-top: 2.5em;*/
    font-size: 1.3em;
}

.project-share > ul{
    text-align: center;
}

.project-share > ul > li > a{
    background-color: #eff9ff;
    border-radius: 50%;
    height: 2em;
    width: 2em;
    padding: 0.5em;
    color: #337ab7;
    margin: 0.1em;
    text-align: center;
}

@media screen and (min-width: 768px){
    .project-share{
        padding-top: 2.5em;
    }

    .project-share > ul{
        text-align: right;
    }
}

/***********************
* project navigation / wizard navigation
***********************/

.project-navigation{
    z-index: 100;
}

.project-nav-list,
.wizard-nav-list{
    list-style: none;
    padding: 0;
    border: 1px solid #ddd;
    background-color: #eff9ff;
    border-radius: 4px;
    /* font-size: 14px; */
}

.project-nav-item,
.wizard-nav-item{
    border-bottom: 1px solid #ddd;
    min-height: 48px;
    line-height: 48px;
    word-wrap: break-word;
}

.project-nav-item:last-child,
.wizard-nav-item:last-child{
    border: 0;
}

.project-nav-item-link,
.wizard-nav-item-link{
    display: block;
    height: 100%;
    padding: 0 0 0 0.6em;
}

.project-nav-item:first-child .project-nav-item-link,
.wizard-nav-item:first-child .wizard-nav-item-link{
    border-radius: 4px 4px 0 0;
}

.project-nav-item:last-child .project-nav-item-link,
.wizard-nav-item:last-child .wizard-nav-item-link{
    border-radius: 0 0 4px 4px;
}

.project-nav-subitem{
    font-size: 0.8em;
}

.project-nav-subitem-link{
    padding: 0 0 0 1.2em;
    background-color: #eff9ff;
}

.project-nav-active{
    font-weight: 700;
}

.wizard-nav-active{
    font-weight: 700;
    background-color: #d1dae0;
}

.project-nav-item a:hover,
.project-nav-item a:active,
.project-nav-item a:focus{
    background-color: #d1dae0;
    text-decoration: none;
}

.control-button{
    float: right;
    height: 100%;
    width: 47px;
    border-left: 1px solid #ddd;
    background-color: #fff;
}

.control-button:first-child{
    margin-right: 5px;
    border-right: 1px solid #ddd;
}

/***********************
* wizard
***********************/

#proceedbtn,
#previousbtn{
    width: 100%;
    margin-top: 1em;
}



/***********************
************************
* FRANCHISE ADMIN ******
************************
***********************/

/***********************
* navigation
***********************/

.franchise-button-list{
    list-style: none;
    margin: 0;
    padding: 0;
}

.franchise-button-list li{
    display: inline;
}

.franchise-button-list form{
    display: inline;
}

.tabcontent{
    padding-top: 0.6em;
}

.tabnavi > li > a:hover{
    background-color: #eff9ff;
    color: #292929;
}