@charset "UTF-8";

*{
    /* layout resets */
    margin:0;
    padding:0;
    border:0;
    outline:0;
    /* typographic resets */
    font-family:Georgia,"Times New Roman",Times,serif;
    font-weight:normal;
    font-size:1em;
    line-height:1.6em;
    text-decoration:none;
    vertical-align:baseline;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
     box-sizing:border-box;
}
body{
    /* background:#fff; */
    /* add a bg image pattern? */
    font-family:Georgia,"Times New Roman",Times,serif;
    text-align:center;
}
h1,h2,h3{
    text-align:center;
    font-size:2em;
    color:#fff;
}
h3{
    font-style:italic;
    margin-bottom:1em;
}
h4{
    font-family:Helvetica,Arial,sans-serif;
    text-align:center;
    font-size:0.8em;
    color:#fff;
    margin-bottom:1em;
}
h5{
    font-family:Helvetica,Arial,sans-serif;
    text-align:left;
    font-size:1.2em;
    font-weight:bold;
    color:#000;
    margin-bottom:1em;
}
#bodybag{
    width:100%;
    background:#fff;
    overflow:hidden;
}
.guillotine{
    clear:both;
}
p{
    margin-bottom:1.8em;
    color:#fff;
}
a{
    font-weight:bold;
    color:inherit;
    text-decoration:none;
    cursor:pointer;
}
a::before{
    content:'<<< ';
}
a::after{
    content:' >>>';
}
.carousel{
    width:100%;
    overflow:hidden;
}
.divider{
    clear:both;
    margin:1em 0 1.6em;
    border-top:#000 thin solid;
}

@import url("chassis/flickity.css"); /* carousel sliders */

.carousel-cell p{ /* text overlays */
    position:absolute;
    /* tied closer to the bottom of the slide:
    bottom:5%;
    */
    top:40%; /* centre-aligned */
    width:100%;
    z-index:2;
    background-color:rgba(0,0,0,0.7);
    font-size:0.8em;
    text-align:left;
    padding:1em;
    color:#fff;
    cursor:default;
}
.carousel-cell h2{ /* header overlays */
    position:absolute;
    top:15%;
    left:10%;
    right:10%;
    z-index:2;
    color:#fff;
    text-shadow: 1px 1px 10px #000;
    cursor:default;
}

#cell1{background:#9f3019;}
#cell2{background:#2a8179;}
#cell3{background:#995d25;}
#cell4{background:#e16225;}
#cell5{background:#4d7bbe;}
#cell6{background:#217a3d;}
#cell7{background:#2a4a7f;}
#cell8{background:#e64197;}
#cell9{background:#a5247a;}
#cell10{background:#4d2a7f;}
#cell11{background:#c42026;}
#cell12{background:#92af2b;}


@media screen and (min-width:768px){ /* desktop browsers */
    #mobileContact{
        display:none;
    }
    #floatingButtons{
        display:none;
    }
    #banner{
        width:100%;
        /* height:100px; */
        /* height:4em; */
        background:#000;
    }
    #constants, #mobileConstants{
        display:flex;
        width:86%;
        margin:1em auto;
        border-top:thin solid grey;
    }
    .column{
        position:relative;
        float:left;
        /* width:44%; */
        width:47%;
        /* height:100%; */
        margin:1.4%;
        padding:1em;
    }
    .column p{
        text-align:left;
        color:#000;
    }
    .carousel{
        height:400px;
    }
    .carousel-cell img{
        height:400px;
    }
    .text-only{
        width:75%;
        padding:0 10%;
        min-height:400px;
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        height: 100%; /* fallback */
        height: calc(100% - 100px);        
    }
    .text-only div{
        margin:auto;
    }
    h1{
        /* line-height:1.6em; */
        padding:0.5em;
    }
    h5::after{
        content:'\002026';
    }
    h6{ /* copyright text */
        width:86%;
        margin:1em auto;
        border-top:#000 solid thin;
        font-size:0.6em;
        font-weight:normal;
    }
    iframe{
        width:100%;
        height:300px;
        overflow:none;
    }
    .mobileLinks{
        display:none;
    }
    .mobileMessages{
        display:none;
    }
    .contactFlag{
        display:none;
    }
    .mobileOnly{
        display:none;
    }
    #cell12{ /* make background white for browsers */
        background:#fff;
    }
} /* End: desktop browsers */

@media screen and (max-width:767px) and (orientation:portrait){ /* mobile browsers in portrait orientation */
    html,body{
        overflow-x:hidden; /* this doesn't seem to work by itself... meta viewport settings should be applied: https://stackoverflow.com/questions/4192277/disable-horizontal-scroll-on-mobile-web */
    }
    body{
        position:relative;
    }
    #floatingButtons{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:12%;
        padding:1% 5%;
        display:flex;
        justify-content:space-between;
        z-index:100;
        background-color:rgba(0,0,0,0.75);
    }
    #floatingButtons div{
        height:auto;
        width:25%;
    }
    #floatingButtons div img{
        height:100%;
        width:auto;
    }
    #banner{
        display:none;
    }
    .carousel{
        width:100%;
        height:100vh;
    }
    .carousel-cell img{
        /* height:100vh; */
        width:100vw;
        height:auto;
    }
    .text-only{
        width:100vw;
        padding:10% 10%;
        height:100vh;
        min-height:100vh;
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        /* height: 100%; /* fallback */
        /* height: calc(100% - 100px); */
    }
    .text-only div{
        margin:auto;
    }
    #bodybag{
        background:inherit;
    }
    #constants,h6{ /* turn off all non-mobile stuff */
        display:none;
    }
    #mobileConstants{ /* do not turn off all non-mobile stuff */
        margin-top:100px;        
        padding:1em;
        border-top:none;
    }
    #mobileConstants h5{
        text-align:center;
        color:#fff;
    }
    #mobileConstants .callout{
        display:none;
    }
    #mobileConstants .divider{
        border-top:#fff solid thin;
    }
    #mobileContact{
        margin:1em;
    }
    .contactFlag img{
        width:50%;
        height:auto;
        margin:1em;
        padding:20% 0 0; /* Bumps this below the floating buttons. N/n in landscape mode. */
    }
    .browserLinks{
        display:none;
    }
    .browserOnly{
        display:none;
    }
} /* End: mobile browsers in portrait orientation */

@media screen and (max-width:767px) and (orientation:landscape){ /* mobile browsers in landscape orientation */
    html,body{
        overflow-x:hidden; /* this doesn't seem to work by itself... meta viewport settings should be applied: https://stackoverflow.com/questions/4192277/disable-horizontal-scroll-on-mobile-web */
    }
    body{
        position:relative;
    }
    #floatingButtons{
        position:fixed;
        top:0;
        right:0;
        width:23%;
        height:auto;
        padding:1%;
        display:flex;
        justify-content:space-between;
        z-index:100;
        background-color:rgba(0,0,0,0.75);
        /*
        -webkit-border-radius:0 0 0 10px;
        -moz-border-radius:0 0 0 10px;
        border-radius:0 0 0 10px;
        */
        border-bottom-left-radius:10px;
    }
    #floatingButtons div{
        margin:0 5px;
        height:100%;
        width:auto;
    }
    #floatingButtons div img{
        height:auto;
        width:100%;
    }
    #banner{
        display:none;
    }
    .carousel{
        width:100vw;
        height:100%;
    }
    .carousel-cell{
        width:100vw;
    }
    .carousel-cell img{
        width:100vw;
        height:auto;
    }
    .text-only{
        width:100vw;
        padding:10% 10%;
        height:100vh;
        min-height:100vh;
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        /* height: 100%; /* fallback */
        /* height: calc(100% - 100px); */
    }
    .text-only div{
        margin:auto;
    }
    #bodybag{
        background:inherit;
    }
    #constants, #constants h6{ /* turn off all non-mobile stuff */
        display:none;
    }
    #mobileConstants,{ /* do not turn off all non-mobile stuff */
        margin-top:68px;        
        padding:1em;
        border-top:none;
    }
    #mobileConstants h5, #mobileConstants h6{
        text-align:center;
        color:#fff;
    }
    #mobileConstants h4, #mobileConstants h6{
        color:#fff;
    }
    #mobileConstants .callout{
        display:none;
    }
    #mobileConstants .divider{
        border-top:#fff solid thin;
    }
    #mobileContact{
        margin:1em;
    }
    .contactFlag img{
        width:20%;
        height:auto;
        margin:1em;
        /* padding:10% 0 0; */
    }
    .browserLinks{
        display:none;
    }
    .browserOnly{
        display:none;
    }
} /* End: mobile browsers in landscape orientation */

.flexibleImages{
    width:100%;
    height:auto;
}
.sampleImages{
    max-width:350px;
    max-height:254px;
}

#floatingButtons div a:before,#floatingButtons div a:after{
    content:none;
}
.home img{ /* logo */
    margin:0 auto 2em;
    width:50%;
    height:auto;
}
.home div img:last-child{ /* swipe image */
    width:25%;
    opacity:0.3;
    filter:alpha(opacity=30); /* For IE8 and earlier */
}

.home h1{ /* temporary */
    display:none;
}

.messageFromYuri,.password{
    display:none;
}
input,textarea {
    /* display and box model */
    width:100%;
    padding: 5px 10px 5px;
    border:grey solid thin;
    border-radius:8px;
    color:grey; /* this will have to also clear to the default value when a user clicks in the field */
}
textarea:focus,input:focus{
    color:#000;
}
input[type=submit] {
/*** STYLE THE BUTTON***/
    height:2.25em;
    background:lightgrey; /*the colour of the button*/
    padding: 5px 10px 3px; /*apply some padding inside the button*/
    border:1px solid #ccc; /*required or the default border for the browser will appear*/
    cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
    color:#000;
    /*style the text*/
    /* Note no changes here (pre-styled) - Parapluie Communications: */ 
    /*use box-shadow to give the button some depth*/
    /* Note colours below are: */
    /* 1.) border-like shadow at top (same colour as above),*/
    /* 2.) larger solid shadow at bottom */
    /* 3.) very bottom grey shadow */
    -webkit-box-shadow: inset 0px 1px 0px lightgrey, 0px 3px 0px 0px dimgrey, 0px 6px 3px grey;
    -moz-box-shadow: inset 0px 1px 0px lightgrey, 0px 3px 0px 0px dimgrey, 0px 6px 3px grey;
    box-shadow: inset 0px 1px 0px lightgrey, 0px 3px 0px 0px dimgrey, 0px 6px 3px grey;
    /*give the corners a small curve*/
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
/***SET THE BUTTON'S HOVER AND FOCUS STATES***/
input[type=submit]:hover,input[type=submit]:focus {
    color:#fff;
    /* reduces the size of the shadow to give a pushed effect - in this case, absolutely flattens it*/
    /* See above note on colours */
    -webkit-box-shadow: inset 0px 0px 0px #ccc, 0px 0px 0px 0px #ccc, 0px 0px 0px #999;
    -moz-box-shadow: inset 0px 0px 0px #ccc, 0px 0px 0px 0px #ccc, 0px 0px 0px #999;
    box-shadow: inset 0px 0px 0px #ccc, 0px 0px 0px 0px #ccc, 0px 0px 0px #999;
}
select{
    width:100%;
    height:2.25em;
    border-radius:8px;
    background:lightgrey; /*the colour of the button*/
    padding: 5px 10px 3px; /*apply some padding inside the button*/
    border:grey solid thin;
    cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
    color:#000;
}

#constants h4{
    text-align:left;
    color:#000;
}
#mobileContact h4{
    text-align:center;
}
#mobileContact h5{
    text-align:center;
    color:#fff;
}
.printOnly{
    display:none;
}
.flexibleImages{
    width:100%;
    height:auto;
}
.logoOverline{
    margin-top:2em;
    padding-top:1em;
    border-top:thin solid black;
}
.alert{
    color:red !important;
}


/* navigation bar - currently used only for mobile browsing, yet available to be used for desktop as well */
/* heavily modified from: Matthew James Taylor at http://matthewjamestaylor.com/blog/centered-dropdown-menus */

/* Main menu settings */
#dropMenu{
    position:relative;
    clear:both;
    z-index:1000; /* Dropdown menus must appear above the floating buttons */
}

/* Top menu items */
#dropMenu ul{
    /* float:right; */
    position:relative;
    /* right:50%; */
    font-weight:normal;
}
#dropMenu ul li{ /* menu button */
    padding:0;
    /* float:left; */
    position:relative;
    /* left:50%; */
    list-style-type:none;
}
#dropMenu ul li a{
    display:block;
    /* style top-level text links here */
}
#dropMenu ul li.active a{
     /* color:#fff; ... moot */
}
#dropMenu ul li a:hover{
    /* color:grey; ...moot */
}
#dropMenu ul li:hover a,
#dropMenu ul li.hover a{ /* This line is required for IE 6 and below */
    /* color:grey; ...moot */
}

/* Submenu items */
#dropMenu ul ul{
    display:none; /* Sub menus are hidden by default */
    position:fixed;
    top:12%; /* thus kisses the bottom of the floating buttons bar */
    left:0;
    width:100%; /* width of the drop-down menus */
}
#dropMenu ul ul li{
    left:auto;  /* resets the left:50% on the parent li */
    margin:0; /* Reset the 1px margin from the top menu */
    clear:left;
    width:100%;
    min-height:5em;
}
#dropMenu ul ul li a,
#dropMenu ul li.active li a,
#dropMenu ul li:hover ul li a,
#dropMenu ul li.hover ul li a{ /* This line is required for IE 6 and below */
    background-color:rgba(0,0,0,0.75);
    color:#fff;
    text-align:center; /* centred on small-screen design */
    padding:0.4em 0.4em 0.4em 1em;
    line-height:4.4em; /* overwrite line-height value from top menu */
    border-bottom:thin solid #fff; /* sub menu item horizontal lines */
    text-transform:none;
}
#dropMenu ul ul li:first-child{
    border-top:thin solid #fff; /* top border for the first sub menu item horizontal line */
}
#dropMenu ul ul li a:hover,
#dropMenu ul li.active ul li a:hover,
#dropMenu ul li:hover ul li a:hover,
#dropMenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
    /* color:grey; ...moot on mobile */
}

/* Sundry */
#dropMenu ul ul.last{ /* Flip the last submenu so it stays within the page */
    /* left:0; ...moot */
}
/* Make the sub menus appear on hover */
#dropMenu ul li:hover ul,
#dropMenu ul li.hover ul{ /* This line is required for IE 6 and below */
    display:block; /* Show the sub menus */
}