/* global */

* { font-family: "Josefin Sans", sans-serif; }
html { height: 100%; }
body { background-attachment: fixed; background-image: url("../images/background-1.jpg"); background-size: cover; background-position: center center; height: 100%; margin: 0; font-size: 18px; line-height: 1.5; }
a { color: #ccc; text-decoration: none; }
h1 { font-size: 2rem; text-transform: uppercase; line-height: 1.2; }
h1 a { text-decoration: underline; }
h2 { font-size: 1.6rem; text-transform: uppercase; line-height: 1.1; }


/* generic */

.limit { max-width: 1100px; margin: auto; }
.center { text-align: center; }


/* front page */

#front { color: white; position: relative; display: flex; flex-direction: column; height: 100%; justify-content: center; text-align: center; }
#front-title { font-size: 60px; margin: 0 0 10px 0; text-transform: uppercase; }
#front-nav { display: flex; flex-direction: row; justify-content: center; text-transform: uppercase; }
#front-nav a { padding: 0 10px 0 10px; }
@media only screen and ( max-width:640px ) {
    #front-title { font-size: 35px; }
    #front-nav { justify-content: space-around; }
    #front-nav a { padding: 0; font-size: 16px; }
}


/* page */

#page { color: white; position: relative; }
#page-title { font-size: 60px; margin: 40px 0 20px 0; text-transform: uppercase; justify-content: center; text-align: center; }
#page-title a { color: white; }
@media only screen and ( max-width:640px ) {
    #page-title { font-size: 35px; }
}


/* portfolio */

.portfolio { display: flex; flex-direction: column; padding-bottom: 40px; }
.portfolio-item { display: flex; flex-direction: row; width: 100%; max-width: 1100px;  margin: 10px auto; background: #88888866; }
.portfolio-media { width: 60%; }
.portfolio-media div { width: 100%; }
.portfolio-media a { display: block; }
.portfolio-media img { width: 100%; max-width: 100%; }
.portfolio-right { flex: 1; }
.portfolio-description { flex: 1; padding: 40px; }
.portfolio-description h2 { font-size: 30px; text-transform: uppercase; line-height: 1.1; margin: 0 0 2rem 0; }
@media only screen and ( max-width:1000px ) {
    .portfolio-item { flex-direction: column; }
    .portfolio-media { width: 100%; }
    .portfolio-title { font-size: 25px; }
    .portfolio-description { padding: 30px 20px; }
}


/* overlays */

.overlay { display: none; flex-direction: column; flex: 1 ; flex-basis: auto; background: #222222cc; position: fixed; top: 0; left: 0; right: 0; bottom: 0; }
.overlay_control { text-align: right; }
.overlay_content { flex: 1; display: flex; justify-content: center; text-align: center; align-content: center; flex-wrap: wrap; padding: 0 20px; }


/* tables */

.table { border-collapse: collapse; display: table; }
.table_full { width: 100%; }
.table_head { display: table-header-group; }
.table_body { display: table-row-group; }
.table_row { background: #88888866; display: table-row; border-bottom: 0.1rem solid black; }
.table_row:hover { }
.table_cell { display: table-cell; padding: 0.8rem 1rem 0.4rem 1rem; vertical-align: top; }
.table_cell_mid { vertical-align: middle; }
.table_alt { background: #f0f0f0; }
.table_heading { color: #909090; font-size: 1rem; text-transform: uppercase; vertical-align: bottom; }
.table_right { text-align: right; }
.table_nobr { white-space: nowrap; }
.table_light .table_row { background-color: #fcfcfc; }
.table_light .table_row:hover { background-color: #f0f0f0; }
.table_line { border-bottom: 0.1rem solid black; }


/* videojs overrides */

.vjs-text-track-display { pointer-events: auto !important; }
.vjs-paused .vjs-big-play-button, .vjs-paused.vjs-has-started .vjs-big-play-button { display: block; }
.vjs-big-play-centered .vjs-big-play-button { margin-left:-1.25em !important; margin-top:-1.25em !important; }
.video-js .vjs-big-play-button { border:0 !important; border-radius:1.25em !important; font-size:4em !important; height:2.5em !important; line-height:2.5em !important; width:2.5em !important; }
.video-js .vjs-play-progress { background-color: #a0783f !important; }
.video-js .vjs-volume-level { background-color: #a0783f !important; }
.vjs-menu li.vjs-selected, .vjs-menu li.vjs-selected:focus, .vjs-menu li.vjs-selected:hover { background-color: #a0783f !important; color:white !important; }
.vjs-menu ul li { background-image:none !important; padding:0.2em 0 !important; }
@media only screen and ( max-width:640px ) {
    .video-js .vjs-big-play-button { font-size:3em !important; }
}