/**
 * Flag Waver
 *
 * Simulate a flag waving in the breeze right in your browser window.
 *
 * /u/krikienoid
 *
 */

/* //// Reset //// */

*,
*:before,
*:after {
    -webkit-box-sizing : border-box;
       -moz-box-sizing : border-box;
            box-sizing : border-box;
}

* {
    margin  : 0;
    padding : 0;
}

/* //// Layout //// */

/* Main */

html,
body,
.wrapper-page,
.page-main,
.js-flag-canvas {
    width    : 100%;
    height   : 100%;
    overflow : hidden;
}

html,
body {

}

.page-header,
.page-controls {
    position : absolute;
    z-index  : 1;
}

.page-controls {
    bottom : 0;
}

.page-controls,
.page-controls-basic,
.page-controls-more {
    width : 100%;
}

.page-controls-more {
    background-color : #888888;
    background-color : rgba(0, 0, 0, 0.6);
}

.page-header,
.page-controls-group {
    padding : 18px;
}

.page-controls-group {
    max-width : 640px;
    display   : inline-block;
}

.page-controls-basic > .page-controls-group {
    vertical-align : bottom;
}

.page-controls-wide {
    width : 100%;
}

/* Expandable */

.expandable {
    max-height : 0;
    visibility : hidden;
    transition : max-height 0.25s, visibility 0.25s;
}

.expandable.expanded {
    max-height : 500px;
    visibility : visible;
    transition : max-height 1s, visibility 0s;
}

/* //// Typography and Style //// */

body {
    color       : #ffffff;
    font-family : 'Open Sans', Helvetica, Arial, sans-serif;
    font-size   : 12pt;
    line-height : 16pt;
}

h1, h2, h3, h4, h5, h6,
p, a {
    color       : #ffffff;
}

.page-header,
.page-controls {
    font-size : 12pt;
}

.page-header > h1,
.page-controls-group > h2 {
    font-weight : 600;
    text-shadow : 3px 3px 0px rgba(0, 0, 0, 0.5);
}

.page-header > h1 {
    font-size : 24pt;
}

.page-controls-group > h2 {
    font-size : 12pt;
}

/* //// Input Controls //// */

/* Basic Inputs */

.input-control-group,
.input-control,
.input-btn,
.input-dial {
    margin : 4px 2px;
}

.input-control,
.input-btn,
.input-dial,
.input-addon,
.input-btn-group {
    vertical-align : middle;
    white-space    : nowrap;
}

.input-control,
.input-btn,
.input-dial,
.input-addon {
    height      : 36px;
    overflow    : hidden;
    background  : inherit;
    border      : 2px solid #cccccc;
    color       : #cccccc;
    font-size   : 12pt;
    line-height : 24px;
    text-align  : center;
}

.input-control,
.input-btn,
.input-dial {
    display            : inline-block;
    border-radius      : 6px;
    padding            : 4px 12px;
    -webkit-transition : z-index 0s 0.25s, background-image ease-in-out 0.25s, border-color ease-in-out 0.25s, color ease-in-out 0.25s, -webkit-box-shadow ease-in-out 0.25s;
    -o-transition      : z-index 0s 0.25s, background-image ease-in-out 0.25s, border-color ease-in-out 0.25s, color ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
    transition         : z-index 0s 0.25s, background-image ease-in-out 0.25s, border-color ease-in-out 0.25s, color ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
}

.input-btn,
.dial-group {
    cursor              : pointer;
    -ms-touch-action    : manipulation;
        touch-action    : manipulation;
    -webkit-user-select : none;
       -moz-user-select : none;
        -ms-user-select : none;
            user-select : none;
}

.input-control:hover,
.input-control:focus,
.input-control:active,
.input-control.active,
.input-btn:hover,
.input-btn:focus,
.input-btn:active,
.input-btn.active {
    border-color : #ffffff;
    color        : #ffffff;
}

/* Input Groups */

.input-control-group {
    display  : table;
    position : relative;
    border-collapse : separate;
    border-spacing  : 0;
}

.input-control-group .input-control,
.input-control-group .input-btn,
.input-control-group > .input-addon,
.input-control-group > .input-btn-group {
    position      : relative;
    margin        : 0;
    border-radius : 0;
}

.input-control-group > .input-control,
.input-control-group > .input-btn,
.input-control-group > .input-addon,
.input-control-group > .input-btn-group {
    display : table-cell;
}

.input-control-group > .input-control.input-control-main {
    width : 100%;
}

.input-control-group > .input-control.input-btn {
    width : auto;
}

.input-control-group > .input-addon,
.input-control-group > .input-btn-group {
    width : 1%;
}

.input-control-group > .input-btn-group {
    font-size : 0;
}

.input-control-group > .input-btn-group > .input-control,
.input-control-group > .input-btn-group > .input-btn {
    display : inline-block;
}

/* Input Group Style Tweaks */

.input-control-group > .input-control:first-child,
.input-control-group > .input-btn:first-child,
.input-control-group > .input-addon:first-child,
.input-control-group > .input-btn-group:first-child > .input-control:first-child,
.input-control-group > .input-btn-group:first-child > .input-btn:first-child,
.input-control-group > .input-btn-group:first-child > .input-addon:first-child {
    border-top-left-radius    : 6px;
    border-bottom-left-radius : 6px;
}

.input-control-group > .input-control:last-child,
.input-control-group > .input-btn:last-child,
.input-control-group > .input-addon:last-child,
.input-control-group > .input-btn-group:last-child > .input-control:last-child,
.input-control-group > .input-btn-group:last-child > .input-btn:last-child,
.input-control-group > .input-btn-group:last-child > .input-addon:last-child {
    border-top-right-radius    : 6px;
    border-bottom-right-radius : 6px;
}

.input-control-group > .input-control,
.input-control-group > .input-btn,
.input-btn-group > .input-control,
.input-btn-group > .input-btn {
    z-index : 0;
}

.input-control-group > .input-control:hover,
.input-control-group > .input-control:focus,
.input-control-group > .input-control:active,
.input-control-group > .input-control.active,
.input-control-group > .input-btn:hover,
.input-control-group > .input-btn:focus,
.input-control-group > .input-btn:active,
.input-control-group > .input-btn.active,
.input-btn-group > .input-control:hover,
.input-btn-group > .input-control:focus,
.input-btn-group > .input-control:active,
.input-btn-group > .input-control.active,
.input-btn-group > .input-btn:hover,
.input-btn-group > .input-btn:focus,
.input-btn-group > .input-btn:active,
.input-btn-group > .input-btn.active {
    z-index : 2;
    -webkit-transition : background-image ease-in-out 0.25s, border-color ease-in-out 0.25s, color ease-in-out 0.25s, -webkit-box-shadow ease-in-out 0.25s;
    -o-transition      : background-image ease-in-out 0.25s, border-color ease-in-out 0.25s, color ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
    transition         : background-image ease-in-out 0.25s, border-color ease-in-out 0.25s, color ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
}

.input-control-group > .input-control + .input-control,
.input-control-group > .input-control + .input-btn,
.input-control-group > .input-control + .input-btn-group .input-btn:first-child,
.input-control-group > .input-btn + .input-control,
.input-control-group > .input-btn + .input-btn,
.input-control-group > .input-btn + .input-btn-group .input-btn:first-child,
.input-control-group > .input-btn-group + .input-control,
.input-control-group > .input-btn-group + .input-btn,
.input-control-group > .input-btn-group + .input-btn-group .input-btn:first-child,
.input-btn-group .input-btn + .input-btn,
.input-btn-group .input-btn + .input-btn-group,
.input-btn-group .input-btn-group + .input-btn,
.input-btn-group .input-btn-group + .input-btn-group {
    margin-left : -2px;
}

.input-control-group > .input-addon:first-child,
.input-control-group > .input-btn-group:first-child > .input-addon:first-child {
    border-right : 0;
}

.input-control-group > .input-addon:last-child,
.input-control-group > .input-btn-group:last-child > .input-addon:last-child {
    border-left : 0;
}

.input-addon input[type="radio"],
.input-addon input[type="checkbox"] {
    margin-top : 0;
}

/* //// Custom Inputs //// */

/* Select Inputs */

.input-control.input-select {
    padding-right       : 36px;
    background-image    : url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="36px" viewBox="0 0 30 36" xml:space="preserve"><polygon fill="rgb(204,204,204)" points="15,21 10,16 20,16" /></svg>');
    background-repeat   : no-repeat;
    background-position : right;
    text-indent         : 0.01px;
    text-overflow       : '';
    -webkit-appearance  : none;
       -moz-appearance  : none;
            appearance  : none;
}

.input-control.input-select:hover,
.input-control.input-select:focus,
.input-control.input-select:active,
.input-control.input-select.active {
    background-image    : url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="36px" viewBox="0 0 30 36" xml:space="preserve"><polygon fill="rgb(255,255,255)" points="15,21 10,16 20,16" /></svg>');
}

/* Upload Mode Inputs */

.control-img-upload.upload-mode-web > .input-img-file,
.control-img-upload.upload-mode-file > .input-img-web {
    display : none;
}

/* Other Inputs */

.input-control > input,
.input-control > .input-cover {
    cursor   : pointer;
}

.input-control > .input-cover {
    width    : 100%;
    height   : 100%;
    position : absolute;
    top      : 0;
    left     : 0;
    bottom   : 0;
    right    : 0;
    margin   : 0;
}

.input-control > .input-cover.input-face {
    padding  : 4px 12px;
}

.input-control > .input-hidden {
    opacity  : 0;
    filter   : alpha(opacity=0);
}

.input-control.input-btn.input-btn-md,
.input-control.input-dial.input-dial-md,
.input-control.input-file {
    min-width : 108px;
}

.input-control.input-file {
    position  : relative;
    padding   : 0;
}

.input-control-group.dial-group {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

/* //// Background Image //// */

.bg-sky {
    background-attachment : fixed;
    background-image      : url('../img/Sky_over_Washington_Monument-480x640px.jpg');
    background-position   : center center;
    background-repeat     : no-repeat;
    background-size       : cover;
}

@media only screen and (min-width : 480px) {
    .bg-sky {
        background-image : url('../img/Sky_over_Washington_Monument-800x600px.jpg');
    }
}

@media only screen and (min-width : 800px) {
    .bg-sky {
        background-image : url('../img/Sky_over_Washington_Monument-1600x1200px.jpg');
    }
}

option {
    color: black;
}