/* Core */
body {background: url('img/bg.png') black no-repeat; color: WhiteSmoke; font-family: Arial, Helvetica, sans-serif; font-size: 1.8vh; text-align: left;}
a {color: MediumTurquoise; text-decoration: none; font-weight: bold; transition:color 0.3s ease-in; -webkit-transition:color 0.3s ease-in; -moz-transition:color 0.3s ease-in; -o-transition:color 0.3s ease-in;}
a:hover {color: SpringGreen;}
a img {border: 0;}
h1 {font-size: 18pt; margin: 0px; margin-bottom: 10px; padding-top: 10px; color: LightSeaGreen; border-bottom: 1px solid SlateGray; cursor: text;}
h2 {;}
li {padding-bottom: 4px;}
li {list-style-type: none; margin-left: -16px;}
/* .text li {list-style-type: none; margin-left: -16px;} */
.extra-spacing li {line-height: 125%;}
@media screen and (max-width: 640px) {li {margin-left: -24px;}}
/* @media screen and (max-width: 640px) {.text li {margin-left: -24px;}} */
iframe {border-width: 0px;}
footer {text-align: center; padding: 10px; font-size: x-small; color: gray;}

/* Structure */
#wrapper {z-index: 1; width: 75%; margin: 0 auto;}
@media screen and (max-width: 640px) {#wrapper {min-width: 90%;}}
#transparent {border: transparent; padding: 12px; background-image: url('img/transparent.png');}
.divTable {display: table; width: 100%;}
.divTableBody {display: table-row-group;}
.divTableRow {display: table-row;}
.cell-social {position: relative; bottom: 10px; display: table-cell; text-align: left; vertical-align: bottom;}
.cell-social-flexbox {display: flex; justify-content: space-between; flex-wrap: wrap;}
.social-icon-pad {padding-left: 1px; padding-right: 1px;}
.cell-logo {text-align: right;}
#logo {height: auto; width: 100%; max-width: 564px;}
#menu {width: 75%; margin: 0 auto; padding: 10px 0 18px 0; font-size: large; text-align: center;}
#menu a:hover {text-shadow: 4px 2px 2px rgba(0, 0, 0, 0.4);}
#intro {line-height: 125%;}
.text {;}
.text a {cursor: pointer;}
.justified {text-align: justify; hyphens: auto;}
.date {color: DarkGray; font-family: Lucida Console, Monaco, monospace;}
.highlight {color: DarkGray; font-family: Lucida Console, Monaco, monospace;}
.note {color: DarkGray; font-style: italic; font-size: 75%;}
.back-main {text-align: center;}

/* Fancybox */
.fancybox-content, .fancybox-slide--map .fancybox-content, .fancybox-slide--iframe .fancybox-content {overflow: visible; height: 100%; width: 100%; max-width: 85%; max-height : 95%; margin: 0; padding: 0; top:-3%;}
@media screen and (max-width: 640px) {.fancybox-content, .fancybox-slide--map .fancybox-content, .fancybox-slide--iframe .fancybox-content {max-width: 100%;}}

/* Video features */
#video {display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; border: transparent; background-image: url('img/transparent.png');}
#video img {width: 100%;}
.video-cell {max-width: 48.5%; background: rgba(128, 128, 128, 0.5); padding: 0px 0px 6px 0px; margin: 4px; text-align: center;}
@media screen and (max-width: 860px) {.video-cell {max-width: 95%;}}
.caption {max-width: 580px; hyphens: auto; padding: 2px 4px 2px 4px;}
@media screen and (max-width: 860px) {.caption {max-width: 95%;}}

/* Career section */
.career-header {font-weight: bold; color: LightSeaGreen;}
#career-list ul {list-style-type: none;}
/* #career-list ul {list-style-image: url('img/tick.png');} */
#career-list li {margin-left: -40px; padding: 4px; background: rgba(32, 178, 170, 0.4)}
#career-list li:nth-child(odd) {background: rgba(0, 128, 128, 0.4)}
#career-list img {vertical-align: sub;}

/* Contact section */
#contact {display: flex; flex-wrap: wrap; flex-direction: row; border: transparent; background-image: url('img/transparent.png'); margin: auto; width: 75%; padding: 14px; text-align: center;}
.contact-header {text-align: justify; hyphens: auto;}
.contact-cell {width: 100%; background: rgba(128, 128, 128, 0); text-align: center;}
.captcha {display: inline-block;}
@media screen and (max-width: 860px) {.contact-cell {max-width: 95%;}}
input, textarea {width: 60%;}
@media screen and (max-width: 860px) {input, textarea {width: 100%;}}
button {background-color: rgba(50, 204, 204, 1); color: white; padding: 0.5em 2em; border-radius: 5px; border: 0px; font-size: 16px;}

/* Back to top */
.scroll-box {color: Turquoise; display: none; position: fixed; bottom: 2px; right: 20px; width: 32px; height: 32px;}
.scroll-box:after {content: 'TOP';}

/* Pop */
@-webkit-keyframes hvr-pop {50% {-webkit-transform: scale(1.2); transform: scale(1.2);}}
@keyframes hvr-pop {50% {-webkit-transform: scale(1.2); transform: scale(1.2);}}
.hvr-pop {display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent;}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {-webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1;}

/* Sweep To Right */
.text li {-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.text li:hover:before, .text li:focus:before, .text li:active:before {opacity: 0.3; -webkit-transform: scaleX(1); transform: scaleX(1);}
.text li:before {opacity: 0.3; content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: black; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.text li:hover, .text li:focus, .text li:active {color: white;}