@import url("https://fonts.googleapis.com/css?family=Aref+Ruqaa%7CHarmattan%7CRaleway%7CReem+Kufi"); @font-face {
font-family: Aref Ruqaa; font-weight: 300; font-style: normal;
} @font-face {
font-family: Harmattan; font-weight: 400; font-style: normal;
} @font-face {
font-family: Raleway; font-weight: 400; font-style: normal;
} @font-face {
font-family: Reem Kufi; font-weight: 400; font-style: normal;
} html, body, div, p, a {
font-family: Harmattan; font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
} a, .anchor {
outline: none; color: #28272b; text-decoration: none;
} a:hover, .anchor:hover {
color: #f9f9f9; text-decoration: none;
} a:focus, .anchor:focus {
outline: none; text-decoration: none;
} h1 {
font-family: Reem Kufi;
} h2 {
font-size: 3em;
} article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
display: block;
} audio, canvas, video {
display: inline-block;
} audio:not([controls]) {
display: none; height: 0;
} [hidden] {
display: none;
} html {
font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
} a:focus {
outline: thin dotted;
} a:active, a:hover {
outline: 0;
} h1 {
font-size: 2em;
} abbr[title] {
border-bottom: 1px dotted;
} b, strong {
font-weight: 700;
} dfn {
font-style: italic;
} mark {
background: #ff0; color: #000;
} code, kbd, pre, samp {
font-family: monospace, serif; font-size: 1em;
} pre {
white-space: pre-wrap; word-wrap: break-word;
} q {
quotes: 2 1C 2 1D 2 18 2 19;
} small {
font-size: 80%;
} sub, sup {
font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;
} sup {
top: -0.5em;
} sub {
bottom: -0.25em;
} img {
border: 0;
} svg:not(:root) {
overflow: hidden;
} fieldset {
border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;
} button, input, select, textarea {
font-family: inherit; font-size: 100%; margin: 0;
} button, input {
line-height: normal;
} button, html input[type=button], input[type=reset], input[type=submit] {
-webkit-appearance: button; cursor: pointer;
} button[disabled], input[disabled] {
cursor: default;
} input[type=checkbox], input[type=radio] {
box-sizing: border-box; padding: 0;
} input[type=search] {
-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;
} input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
} textarea {
overflow: auto; vertical-align: top;
} table {
border-collapse: collapse; border-spacing: 0;
} body, figure {
margin: 0;
} legend, button::-moz-focus-inner, input::-moz-focus-inner {
border: 0; padding: 0;
} .clearfix:after {
visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
}
- {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
- {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; margin: 0; padding: 0;
}
- drawer-toggle:checked ~ #drawer-toggle-label {
height: 100 $; width: calc(100% - 300px); background: rgba(255,255,255,0.8); left: 300px;
}
- drawer-toggle:checked ~ header {
left: 300px;
}
- drawer-toggle:checked ~ #drawer {
left: 0px;
}
- drawer-toggle:checked ~ #page-content {
margin-left: 300px;
}
- drawer ul {
list-style-type: none;
}
- drawer ul a {
display: block; padding: 10px; color: #c7c7c7; text-decoration: none;
}
- drawer ul a:hover {
color: #fff;
} @media all and (max-width: 350px) {
#drawer-toggle:checked ~ #drawer-toggle-label { height: 100%; width: 50px; } #drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~header { left: calc(100% - 50px); } #drawer-toggle:checked ~ drawer { width: calc(100% - 50px); padding: 20px; } #drawer-toggle:checked ~ #page-content { margin-left: calc(100% - 50px); }
} .kukuri {
text-transform: uppercase; overflow: hidden; display: inline-block;
} .kukuri::before {
content: attr(data-letters); position: absolute; z-index: 2; overflow: hidden; color: #424242; white-space: nowrap; width: 0%; -webkit-transition: width 0.4s 0.3s; transition: width 0.4s 0.3s;
} .kukuri::after {
content: ; position: absolute; height: 16px; width: 100%; top: 50%; margin-top: -8px; right: 0; background: #f9f9f9; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
} .kukuri:hover::before {
width: 100%;
} .kukuri:hover::after {
-webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
} .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {
margin: 0px;
}
- HQ_page p {
font-size: 20px;
}
- HQ_page .clear {
height: 0px;
} .clear clear both height 0px,
- sideMenu {
display: none;
}
- top_title {
display: none;
}
- content {
width: 100%; margin: 0px auto; padding: 0px; border: none; background: none;
}
- globalWrapper {
width: 100%; padding: 0px; margin-top: -25px;
} .firstHeading {
display: none;
}
- bodyContent h1,
- bodyContent h2 {
margin: 0;
} html, body {
height: 100%; background-color: #efefef; overflow-x: hidden;
} ul {
list-style-type: none;
} footer {
padding-top: 1%; height: 24vh; color: ##a09a9a; background-color: #a09a9a;
} footer .container #footer_team_logo {
width: 100%; height: 24vh;
} footer img {
width: 100%; height: auto;
} hr {
border-width: 5px; clear: both; display: block; width: 96%; background-color: #1e1a1b; height: 1px;
}
- home,
- safety,
- attributions {
min-height: 80vh;
}
- page-content {
width: 100%;
} .link {
outline: none; display: inline-block; position: relative; text-decoration: none; font-size: 3em; color: #424242;
} .flex {
display: flex; flex-direction: column; align-items: center; justify-content: center;
} .footer_flex {
display: flex; align-items: center; justify-content: center;
}
- home #home-hero-bg {
background-image: url(""); background-size: contain; background-repeat: no-repeat; height: 70vh;
}
- home #home-hero-bg .hero {
width: 100%; height: 100%; background-color: rgba(50,50,50,0.7);
}
- home #home-hero-bg .hero div {
display: flex; flex-direction: column; justify-content: center; color: #fff; height: 100%; margin-left: 5%; font-weight: 500; line-height: 1.2; letter-spacing: 3px; text-transform: uppercase;
}
- home #desc {
margin-top: 5%; text-align: center; width: 70%;
}
- home #stag_cont {
margin-top: 5%; margin-bottom: 5%; width: 70%;
}
- home #stag_cont .row {
height: 40vh;
}
- home #stag_cont .row div {
margin-top: 5%; height: 100%; text-align: center;
}
- home #stag_cont .row div img {
width: 100%; height: auto;
}
- home #showcase {
width: 100%; margin-bottom: 5%;
}
- home #showcase .row {
display: flex; justify-content: center;
}
- home #showcase .row .showcase_item {
height: calc(30% + 20px); width: calc(26vw); margin: 20px; padding: 60px 0; z-index: 1; position: relative; text-align: center; display: inline-block; align-items: center; justify-content: center; -webkit-transform: translate3d(0, 0, 0);
}
- home #showcase .row .showcase_item_long {
height: calc(40% + 20px); width: calc(45vw); margin: 20px; padding: 80px 0; z-index: 1; position: relative; text-align: center; display: inline-block; align-items: center; justify-content: center; -webkit-transform: translate3d(0, 0, 0);
}
- home #showcase #sc_team {
background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("");
}
- home #showcase #sc_parts {
background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("");
}
- home #showcase #sc_results {
background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("");
}
- home #showcase #sc_notebook {
background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("");
}
- home #showcase #sc_attribution {
background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("");
}
- team #team_hero_bg {
background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png"); background-size: cover; background-repeat: no-repeat; height: 40vh; color: #fff; text-align: center; margin-top: 4%; margin-bottom: 7%;
}
- team #team_hero_bg div {
width: 50%;
}
- team .baraja-demo {
width: 200px; margin: 30px auto; color: #aaa; height: 50vh;
}
- team .baraja-demo h4 {
color: #666; font-size: 14px; padding: 8px 10px 5px; margin: 20px 3px 5px; border-bottom: 1px solid #f0f0f0;
}
- team .baraja-demo p {
font-size: 12px; font-weight: 700; padding: 0 10px; margin: 10px 3px 0;
}
- team .baraja-demo li img {
display: block; margin: 0 auto; width: 100%; border-radius: 10px 10px 0 0;
}
- team .baraja-demo .baraja-container {
width: 200px; height: 310px; margin: 0 auto 30px; position: relative; padding: 0; list-style-type: none;
}
- team .baraja-demo .baraja-container li {
width: 100%; height: 100%; margin: 0; position: absolute; top: 0; left: 0; cursor: pointer; background: #fff; pointer-events: auto; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; border-radius: 10px; padding: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
- team #thanks {
margin-bottom: 5%;
}
- team #thanks div {
margin-left: 5%;
}
- team #sponsor_list .row {
display: flex; align-items: center; justify-content: center;
}
- team img {
width: 100%; height: auto;
}
- parts #parts_hero_bg {
background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png"); background-size: cover; background-repeat: no-repeat; height: 40vh; color: #fff; text-align: center; margin-top: 4%; margin-bottom: 7%;
}
- parts #parts_hero_bg div {
width: 50%;
}
- parts #parts_content .sub_section {
margin-left: 5%;
}
- attributions #attr_hero_bg {
background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png"); background-size: cover; background-repeat: no-repeat; height: 40vh; color: #fff; text-align: center; margin-top: 4%; margin-bottom: 7%;
}
- attributions #attr_hero_bg div {
width: 50%;
}
- attributions #attr_content {
margin-bottom: 5%;
}
- attributions #attr_content .sub_section {
margin-left: 5%;
} /* .bump_up margin-top 6% .bump_down margin-bottom 5%
.text-center text-align center
// Testing Grounds for fonts .font-raleway font-family Raleway .font-aref font-family Aref Ruqaa .font-harmattan font-family Harmattan .font-reem font-family Reem Kufi
.black
background-color black
.blue background-color blue
.container ../ .section-div height 40vh ../ img width 100% height auto ../ .link_box height 30vh background-color pink margin auto margin-left 5% ../ img border-radius 25px ../ .section-div text-align center div display inline-block #lbox_1 margin-left 6.5%
- safety
#theme1 background-image url('../img/human_practices_1.jpg') #theme2 background-image url('../img/human_practices_2.jpg') #theme3 background-image url('../img/human_practices_3.jpg') .safety-div display flex flex-direction column justify-content center color white
- human_practices
#theme1 background-image url('../img/human_practices_1.jpg') #theme2 background-image url('../img/human_practices_2.jpg') #theme3 background-image url('../img/human_practices_3.jpg') .hp_div display flex flex-direction column justify-content center color white */ .bckgnd_image {
position: static; min-height: 945px; height: 100%; background-image: url("../img/safety_visions.jpg"); background-attachment: fixed; background-position: center center; background-size: cover;
}