Difference between revisions of "Team:UNOTT/CSS"

Revision as of 15:54, 26 July 2017

/* Default Font and Sizing of Website */

@media screen and (max-width: 760px) {

 /*Make dropdown links appear inline*/
nav ul {
   position: static;
   display: flex;
   float: right;
   margin: 0px;
   margin-top:0px;
   padding: 0px 0px;
   justify-content:space-around;

}

 /*Create vertical spacing*/
 li {
   margin-bottom: 1px;
 }
 /*Make all menu links full width*/
 ul li,
 li a {
   width: 100%;
 }

}

html, body {

 height: 98%;

}

/* Visiting Links */

a, a:hover {

 color: #52658F;
 text-decoration: none;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -o-transition: all .5s ease;
 transition: all .5s ease-in-out;

}

a:visited {

 color: #333A56;

}

.content {margin-top: -20px;} .col-centered {

 float: none;
 margin: 0 auto;

}

.backTop {

 height: 40px;
 width: 40px;
 position: fixed;
 bottom: 10px;
 right: 5px;
 z-index: 1000;
 cursor: pointer;
 -webkit-transition: all ease 0.4s;
 -moz-transition: all ease 0.4s;
 -ms-transition: all ease 0.4s;
 -o-transition: all ease 0.4s;
 transition: all ease 0.4s;

}

.backTop:hover {

 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);

}

.red {

 color: #EA3923;

}

.blue {

 color: #0C68E6;

}

.darkblue {

 color: #52658F;

}

.yellow {

 color: #FFDF1E;

}

.green {

 color: #32BE01;

}

.cream {

 color: #F7F5E6;

}

.grey {

 color: #E8E8E8;

}

.darkgrey {

 color: #8C8C8C;

}

/* Body */

body {

 font-family: 'Karla', sans-serif;

}

.indent {

 text-indent: 50px;

}

hr {

 border-color: #333A56;
 border-width: 3px;
 max-width: 50px;
 margin-top: 25px;
 margin-bottom: 25px;
 margin-left: auto;
 margin-right: auto;

}

hr.light {

 border-color: white;

}

hr.grey {

 border-color: #E8E8E8;

}

hr.blue {

 border-color: #333A56;

}

.container, .container-fluid {

 color-background: #F7F5E6;
 color: black;

}

.container {

 margin-top: 20px;

}

/* Navbar */

.some-padding {

 padding-top: 0px;

}

/*adds necessary spacing to the navbar so links display correctly below the black iGEM navbar BACKGROUND*/

.navbar-default {

 background-color: #black;
 border-color: rgba(255, 255, 255, 0.3);
 font-family: 'Karla', sans-serif;
 font-weight: 300;
 -webkit-transition: all 0.35s;
 -moz-transition: all 0.35s;
 transition: all 0.35s;
 margin : 0 !important;

}

/*NavBar UNOTT Information*/

.navbar-default .navbar-header .navbar-brand {

 color: #white;
 font-family: 'Karla', sans-serif;
 font-weight: none;
 font-size: 22px;
 display: inline-block;
 background: black

}

/*Changes colour of the iGEM logo in the navbar.*/

.navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus {

 color: #white;

}

.navbar-default .navbar-header .navbar-toggle {

 font-family: 'Karla', sans-serif;
 font-weight: 400; bold;
 font-size: 14px;
 color: #white;
 text-transform: uppercase;

}

/* FONT */ .navbar-default .nav > li > a, .navbar-default .nav > li > a:focus {

 text-transform: uppercase;
 font-family: 'Karla', sans-serif;
 font-weight: bold;
 font-size: 14px;
 color: #white;

}

.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover {

 color: #white;

}

/*Navbar background colour*/

.navbar-default .nav > li.active > a, .navbar-default .nav > li.active > a:focus {

 color: #CF5435 !important;
 background-color: black;

}

.navbar-default .nav > li.active > a:hover, .navbar-default .nav > li.active > a:focus:hover {

 background-color: black;
 border-left-color: black; border-top-color: black;

}

.navbar-default .navbar-toggle {

 border: none;

} /*dropdown menu colours*/ .navbar-default .dropdown-menu > li > a:hover, .navbar-default .dropdown-menu > li > a:focus {

 background-color: #CDD7B6;
 color: #blue;

}

.navbar-default .dropdown-menu {

 border: none;
 outline: none;
 font-family: 'Karla', sans-serif;
 text-transform: uppercase;
 font-weight: bold;
 font-size: 14.2px !important;
 color: #CF5435;

}

sitelinks a {

 display: inline-block;
 border: 3px solid #fff;
 color: #fff;
 padding: 10px 20px;
 margin: 10px

}

footer {

 background: #333;
 text-align: center;
 color: #fff;
 line-height: 50px;

}

footer a {

 color: #fff;

}

/* Titles and text */

specialh1 {

 font-size: 100px;
 font-weight: 400;
 font-family: 'Quicksand', sans-serif;
 text-align: center;
 color: #333A56;
 letter-spacing: 3px;
 border-bottom: none;

}

specialh2 {

 font-size: 40px;
 font-weight: 400;
 font-family: 'Quicksand', sans-serif;
 text-align: center;
 color: #333A56;
 border-bottom: none;
 text-transform: uppercase;

}

specialh3 {

 font-size: 30px;
 font-weight: 400;
 font-family: 'Quicksand', sans-serif;
 text-align: center;
 color: #52658F;
 border-bottom: none;

}

specialh4 {

 font-size: 22px;
 font-weight: 400;
 font-family: 'Quicksand', sans-serif;
 text-align: center;
 color: #52658F;
 border-bottom: none;

}

h1 {

 font-family: 'Quicksand', sans-serif !important;
 font-size: 50px !important;

}

h2 {

 font-family: 'Quicksand', sans-serif !important;
 font-size: 40px !important;

}

h3 {

 font-family: 'Quicksand', sans-serif !important;
 font-size: 35px !important;

}

h4 {

 font-family: 'Quicksand', sans-serif !important;
 font-size: 30px !important;

}

p {

 font-family: 'Roboto', sans-serif !important;
 ;
 font-weight: 400 !important;
 ;
 font-size: 18px !important;
 line-height: 1.5;
 margin-bottom: 20px;

}

.bg-primary {

 background-color: #F7F5E6;
 color: black;

}

.bg-dark {

 background-color: #333A56;

}

.bg-danger {

 background-color: #52658F;

}

.text-faded {

 color: rgba(255, 255, 255, 0.7);

}

.text-dark {

 color: rgba(38, 12, 12, 0.8);

}

section {

 padding: 100px 0;

}

aside {

 padding: 50px 0;

}

.no-padding {

 padding: 0;

}

.section-heading {

 margin-top: 0;

}

.service-box {

 max-width: 400px;
 margin: 50px auto 0;

}

.call-to-action h2 {

 margin: 0 auto 20px;

}

.text-primary {

 color: #333A56;

}

.no-gutter > [class*='col-'] {

 padding-right: 0;
 padding-left: 0;

}

.btn-default {

 color: #222222;
 background-color: #F7F5E6!important;
 border-color: white;
 -webkit-transition: all 0.35s;
 -moz-transition: all 0.35s;
 transition: all 0.35s;

}

.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {

 color: #222222;
 background-color: #E8E8E8 !important;
 border-color: #ededed !important;

}

.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {

 background-image: none;

}

.btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active {

 background-color: white;
 border-color: white;

}

.btn-default .badge {

 color: white;
 background-color: #222222;

}

.btn-primary {

 color: white !important;
 background-color: #52658F !important;
 border-color: #333A56 !important;
 -webkit-transition: all 0.35s;
 -moz-transition: all 0.35s;
 transition: all 0.35s;

}

.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {

 color: white !important;
 background-color: #333A56 !important;
 border-color: #52658F !important;

}

.btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {

 background-image: none;

}

.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active {

 background-color: #333A56;
 border-color: #333A56;

}

.btn-primary .badge {

 color: #333A56;
 background-color: white;

}

.btn {

 font-family: 'Quicksand', sans-serif;
 border: none;
 border-radius: 300px;
 font-weight: 400;
 font-size: 15px !important;
 text-transform: uppercase;

}

.btn-xl {

 padding: 15px 30px;

}

-moz-selection {

 color: white;
 text-shadow: none;
 background: #222222;

}

selection {

 color: white;
 text-shadow: none;
 background: #222222;

}

img::selection {

 color: white;
 background: transparent;

}

img::-moz-selection {

 color: white;
 background: transparent;

}

body {

 webkit-tap-highlight-color: #222222;

}

/* TIMELINE */

img {

 max-width: 100%;

}

h1, h2 {

 font-family: "Open Sans", sans-serif;
 font-weight: bold;

}

/* -------------------------------- Modules - reusable parts of our design -------------------------------- */

.cd-container {

 /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
 width: 90%;
 max-width: 1170px;
 margin: 0 auto;

}

.cd-container::after {

 /* clearfix */
 content: ;
 display: table;
 clear: both;

}

/* -------------------------------- Main components -------------------------------- */

header {

 height: 200px;
 line-height: 200px;
 text-align: center;
 background: #303e49;

}

header h1 {

 color: white;
 font-size: 18px;
 font-size: 1.125rem;

}

@media only screen and (min-width: 1170px) {

 header {
   height: 300px;
   line-height: 300px;
 }
 header h1 {
   font-size: 24px;
   font-size: 1.5rem;
 }

}

cd-timeline {

 position: relative;
 padding: 2em 0;
 margin-top: 2em;
 margin-bottom: 2em;

}

cd-timeline::before {

 /* this is the vertical line */
 content: ;
 position: absolute;
 top: 0;
 left: 18px;
 height: 100%;
 width: 4px;
 background: #d7e4ed;

}

@media only screen and (min-width: 1170px) {

 #cd-timeline {
   margin-top: 3em;
   margin-bottom: 3em;
 }
 #cd-timeline::before {
   left: 50%;
   margin-left: -2px;
 }

}

.cd-timeline-block {

 position: relative;
 margin: 2em 0;

}

.cd-timeline-block:after {

 content: "";
 display: table;
 clear: both;

}

.cd-timeline-block:first-child {

 margin-top: 0;

}

.cd-timeline-block:last-child {

 margin-bottom: 0;

}

@media only screen and (min-width: 1170px) {

 .cd-timeline-block {
   margin: 4em 0;
 }
 .cd-timeline-block:first-child {
   margin-top: 0;
 }
 .cd-timeline-block:last-child {
   margin-bottom: 0;
 }

}

.cd-timeline-img {

 position: absolute;
 top: 0;
 left: 0;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);

}

.cd-timeline-img img {

 display: block;
 width: 24px;
 height: 24px;
 position: relative;
 left: 50%;
 top: 50%;
 margin-left: -12px;
 margin-top: -12px;

}

.cd-timeline-img.cd-picture {

 background: #75ce66;

}

.cd-timeline-img.cd-movie {

 background: #c03b44;

}

.cd-timeline-img.cd-location {

 background: #f0ca45;

}

@media only screen and (min-width: 1170px) {

 .cd-timeline-img {
   width: 60px;
   height: 60px;
   left: 50%;
   margin-left: -30px;
   /* Force Hardware Acceleration in WebKit */
   -webkit-transform: translateZ(0);
   -webkit-backface-visibility: hidden;
 }
 .cssanimations .cd-timeline-img.is-hidden {
   visibility: hidden;
 }
 .cssanimations .cd-timeline-img.bounce-in {
   visibility: visible;
   -webkit-animation: cd-bounce-1 0.6s;
   -moz-animation: cd-bounce-1 0.6s;
   animation: cd-bounce-1 0.6s;
 }

}

@-webkit-keyframes cd-bounce-1 {

 0% {
   opacity: 0;
   -webkit-transform: scale(0.5);
 }
 60% {
   opacity: 1;
   -webkit-transform: scale(1.2);
 }
 100% {
   -webkit-transform: scale(1);
 }

}

@-moz-keyframes cd-bounce-1 {

 0% {
   opacity: 0;
   -moz-transform: scale(0.5);
 }
 60% {
   opacity: 1;
   -moz-transform: scale(1.2);
 }
 100% {
   -moz-transform: scale(1);
 }

}

@keyframes cd-bounce-1 {

 0% {
   opacity: 0;
   -webkit-transform: scale(0.5);
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
   -o-transform: scale(0.5);
   transform: scale(0.5);
 }
 60% {
   opacity: 1;
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -ms-transform: scale(1.2);
   -o-transform: scale(1.2);
   transform: scale(1.2);
 }
 100% {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
 }

}

.cd-timeline-content {

 position: relative;
 margin-left: 60px;
 background: white;
 border-radius: 0.25em;
 padding: 1em;
 box-shadow: 0 3px 0 #d7e4ed;

}

.cd-timeline-content:after {

 content: "";
 display: table;
 clear: both;

}

.cd-timeline-content h2 {

 color: #303e49;

}

.cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {

 font-size: 13px;
 font-size: 0.8125rem;

}

.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {

 display: inline-block;

}

.cd-timeline-content p {

 margin: 1em 0;
 line-height: 1.6;

}

.cd-timeline-content .cd-read-more {

 float: right;
 padding: .8em 1em;
 background: #acb7c0;
 color: white;
 border-radius: 0.25em;

}

.no-touch .cd-timeline-content .cd-read-more:hover {

 background-color: #bac4cb;

}

.cd-timeline-content .cd-date {

 float: left;
 padding: .8em 0;
 opacity: .7;

}

.cd-timeline-content::before {

 content: ;
 position: absolute;
 top: 16px;
 right: 100%;
 height: 0;
 width: 0;
 border: 7px solid transparent;
 border-right: 7px solid white;

}

@media only screen and (min-width: 768px) {

 .cd-timeline-content h2 {
   font-size: 20px;
   font-size: 1.25rem;
 }
 .cd-timeline-content p {
   font-size: 16px;
   font-size: 1rem;
 }
 .cd-timeline-content .cd-read-more,
 .cd-timeline-content .cd-date {
   font-size: 14px;
   font-size: 0.875rem;
 }

}

@media only screen and (min-width: 1170px) {

 .cd-timeline-content {
   margin-left: 0;
   padding: 1.6em;
   width: 45%;
 }
 .cd-timeline-content::before {
   top: 24px;
   left: 100%;
   border-color: transparent;
   border-left-color: white;
 }
 .cd-timeline-content .cd-read-more {
   float: left;
 }
 .cd-timeline-content .cd-date {
   position: absolute;
   width: 100%;
   left: 122%;
   top: 6px;
   font-size: 16px;
   font-size: 1rem;
 }
 .cd-timeline-block:nth-child(even) .cd-timeline-content {
   float: right;
 }
 .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
   top: 24px;
   left: auto;
   right: 100%;
   border-color: transparent;
   border-right-color: white;
 }
 .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
   float: right;
 }
 .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
   left: auto;
   right: 122%;
   text-align: right;
 }
 .cssanimations .cd-timeline-content.is-hidden {
   visibility: hidden;
 }
 .cssanimations .cd-timeline-content.bounce-in {
   visibility: visible;
   -webkit-animation: cd-bounce-2 0.6s;
   -moz-animation: cd-bounce-2 0.6s;
   animation: cd-bounce-2 0.6s;
 }

}

@media only screen and (min-width: 1170px) {

 /* inverse bounce effect on even content blocks */
 .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
   -webkit-animation: cd-bounce-2-inverse 0.6s;
   -moz-animation: cd-bounce-2-inverse 0.6s;
   animation: cd-bounce-2-inverse 0.6s;
 }

}

@-webkit-keyframes cd-bounce-2 {

 0% {
   opacity: 0;
   -webkit-transform: translateX(-100px);
 }
 60% {
   opacity: 1;
   -webkit-transform: translateX(20px);
 }
 100% {
   -webkit-transform: translateX(0);
 }

}

@-moz-keyframes cd-bounce-2 {

 0% {
   opacity: 0;
   -moz-transform: translateX(-100px);
 }
 60% {
   opacity: 1;
   -moz-transform: translateX(20px);
 }
 100% {
   -moz-transform: translateX(0);
 }

}

@keyframes cd-bounce-2 {

 0% {
   opacity: 0;
   -webkit-transform: translateX(-100px);
   -moz-transform: translateX(-100px);
   -ms-transform: translateX(-100px);
   -o-transform: translateX(-100px);
   transform: translateX(-100px);
 }
 60% {
   opacity: 1;
   -webkit-transform: translateX(20px);
   -moz-transform: translateX(20px);
   -ms-transform: translateX(20px);
   -o-transform: translateX(20px);
   transform: translateX(20px);
 }
 100% {
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
   transform: translateX(0);
 }

}

@-webkit-keyframes cd-bounce-2-inverse {

 0% {
   opacity: 0;
   -webkit-transform: translateX(100px);
 }
 60% {
   opacity: 1;
   -webkit-transform: translateX(-20px);
 }
 100% {
   -webkit-transform: translateX(0);
 }

}

@-moz-keyframes cd-bounce-2-inverse {

 0% {
   opacity: 0;
   -moz-transform: translateX(100px);
 }
 60% {
   opacity: 1;
   -moz-transform: translateX(-20px);
 }
 100% {
   -moz-transform: translateX(0);
 }

}

@keyframes cd-bounce-2-inverse {

 0% {
   opacity: 0;
   -webkit-transform: translateX(100px);
   -moz-transform: translateX(100px);
   -ms-transform: translateX(100px);
   -o-transform: translateX(100px);
   transform: translateX(100px);
 }
 60% {
   opacity: 1;
   -webkit-transform: translateX(-20px);
   -moz-transform: translateX(-20px);
   -ms-transform: translateX(-20px);
   -o-transform: translateX(-20px);
   transform: translateX(-20px);
 }
 100% {
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
   transform: translateX(0);
 }

}

.timeline {

 background-color: rgb(82, 101, 143);

}

.animated {

 -webkit-animation-fill-mode: both;
 -moz-animation-fill-mode: both;
 -ms-animation-fill-mode: both;
 -o-animation-fill-mode: both;
 animation-fill-mode: both;
 -webkit-animation-duration: 1s;
 -moz-animation-duration: 1s;
 -ms-animation-duration: 1s;
 -o-animation-duration: 1s;
 animation-duration: 1s;

}

.animated.hinge {

 -webkit-animation-duration: 2s;
 -moz-animation-duration: 2s;
 -ms-animation-duration: 2s;
 -o-animation-duration: 2s;
 animation-duration: 2s;

}

@-webkit-keyframes bounceIn {

 0% {
   opacity: 0;
   -webkit-transform: scale(0.8);
 }
 50% {
   opacity: 1;
   -webkit-transform: scale(1.05);
 }
 100% {
   opacity: 1;
   -webkit-transform: scale(1);
 }

}

@-moz-keyframes bounceIn {

 0% {
   opacity: 0;
   -moz-transform: scale(0.8);
 }
 50% {
   opacity: 1;
   -moz-transform: scale(1.05);
 }
 100% {
   opacity: 1;
   -moz-transform: scale(1);
 }

}

@-o-keyframes bounceIn {

 0% {
   opacity: 0;
   -o-transform: scale(0.8);
 }
 50% {
   opacity: 1;
   -o-transform: scale(1.05);
 }
 100% {
   opacity: 1;
   -o-transform: scale(1);
 }

}

@keyframes bounceIn {

 0% {
   opacity: 0;
   transform: scale(0.8);
 }
 50% {
   opacity: 1;
   transform: scale(1.05);
 }
 100% {
   opacity: 1;
   transform: scale(1);
 }

}

.bounceIn {

 -webkit-animation-name: bounceIn;
 -moz-animation-name: bounceIn;
 -o-animation-name: bounceIn;
 animation-name: bounceIn;

}

@-webkit-keyframes fadeIn {

 0% {
   opacity: 0;
 }
 100% {
   opacity: 1;
 }

}

@-moz-keyframes fadeIn {

 0% {
   opacity: 0;
 }
 100% {
   opacity: 1;
 }

}

@-o-keyframes fadeIn {

 0% {
   opacity: 0;
 }
 100% {
   opacity: 1;
 }

}

@keyframes fadeIn {

 0% {
   opacity: 0;
 }
 100% {
   opacity: 1;
 }

}

.delay {

 -webkit-animation-delay: 0.30s;
 -moz-animation-delay: 0.30s;
 -o-animation-delay: 0.30s;
 animation-delay: 0.30s;

}

.delay-three {

 -webkit-animation-delay: 0.60s;
 -moz-animation-delay: 0.60s;
 -o-animation-delay: 0.60s;
 animation-delay: 0.60s;

}

.delay-two {

 -webkit-animation-delay: 1.0s;
 -moz-animation-delay: 1.0s;
 -o-animation-delay: 1.0s;
 animation-delay: 1.0s;

}

.delay-one {

 -webkit-animation-delay: 1.5s;
 -moz-animation-delay: 1.5s;
 -o-animation-delay: 1.5s;
 animation-delay: 1.5s;

}

.fadeIn {

 -webkit-animation-name: fadeIn;
 -moz-animation-name: fadeIn;
 -o-animation-name: fadeIn;
 animation-name: fadeIn;

}

@-webkit-keyframes fadeInUp {

 0% {
   opacity: 0;
   -webkit-transform: translateY(20px);
 }
 100% {
   opacity: 1;
   -webkit-transform: translateY(0);
 }

}

@-moz-keyframes fadeInUp {

 0% {
   opacity: 0;
   -moz-transform: translateY(20px);
 }
 100% {
   opacity: 1;
   -moz-transform: translateY(0);
 }

}

@-o-keyframes fadeInUp {

 0% {
   opacity: 0;
   -o-transform: translateY(20px);
 }
 100% {
   opacity: 1;
   -o-transform: translateY(0);
 }

}

@keyframes fadeInUp {

 0% {
   opacity: 0;
   transform: translateY(20px);
 }
 100% {
   opacity: 1;
   transform: translateY(0);
 }

}

.fadeInUp {

 -webkit-animation-name: fadeInUp;
 -moz-animation-name: fadeInUp;
 -o-animation-name: fadeInUp;
 animation-name: fadeInUp;

}

@-webkit-keyframes fadeInDown {

 0% {
   opacity: 0;
   -webkit-transform: translateY(-20px);
 }
 100% {
   opacity: 1;
   -webkit-transform: translateY(0);
 }

}

@-moz-keyframes fadeInDown {

 0% {
   opacity: 0;
   -moz-transform: translateY(-20px);
 }
 100% {
   opacity: 1;
   -moz-transform: translateY(0);
 }

}

@-o-keyframes fadeInDown {

 0% {
   opacity: 0;
   -o-transform: translateY(-20px);
 }
 100% {
   opacity: 1;
   -o-transform: translateY(0);
 }

}

@keyframes fadeInDown {

 0% {
   opacity: 0;
   transform: translateY(-20px);
 }
 100% {
   opacity: 1;
   transform: translateY(0);
 }

}

.fadeInDown {

 -webkit-animation-name: fadeInDown;
 -moz-animation-name: fadeInDown;
 -o-animation-name: fadeInDown;
 animation-name: fadeInDown;

}

@-webkit-keyframes fadeInLeft {

 0% {
   opacity: 0;
   -webkit-transform: translateX(-20px);
 }
 100% {
   opacity: 1;
   -webkit-transform: translateX(0);
 }

}

@-moz-keyframes fadeInLeft {

 0% {
   opacity: 0;
   -moz-transform: translateX(-20px);
 }
 100% {
   opacity: 1;
   -moz-transform: translateX(0);
 }

}

@-o-keyframes fadeInLeft {

 0% {
   opacity: 0;
   -o-transform: translateX(-20px);
 }
 100% {
   opacity: 1;
   -o-transform: translateX(0);
 }

}

@keyframes fadeInLeft {

 0% {
   opacity: 0;
   transform: translateX(-20px);
 }
 100% {
   opacity: 1;
   transform: translateX(0);
 }

}

.fadeInLeft {

 -webkit-animation-name: fadeInLeft;
 -moz-animation-name: fadeInLeft;
 -o-animation-name: fadeInLeft;
 animation-name: fadeInLeft;

}

.fadeOutDown {

 -webkit-animation-name: fadeOutDown;
 -moz-animation-name: fadeOutDown;
 -o-animation-name: fadeOutDown;
 animation-name: fadeOutDown;

}

@-webkit-keyframes fadeOutLeft {

 0% {
   opacity: 1;
   -webkit-transform: translateX(0);
 }
 100% {
   opacity: 0;
   -webkit-transform: translateX(-20px);
 }

}

@-moz-keyframes fadeOutLeft {

 0% {
   opacity: 1;
   -moz-transform: translateX(0);
 }
 100% {
   opacity: 0;
   -moz-transform: translateX(-20px);
 }

}

@-o-keyframes fadeOutLeft {

 0% {
   opacity: 1;
   -o-transform: translateX(0);
 }
 100% {
   opacity: 0;
   -o-transform: translateX(-20px);
 }

}

@keyframes fadeOutLeft {

 0% {
   opacity: 1;
   transform: translateX(0);
 }
 100% {
   opacity: 0;
   transform: translateX(-20px);
 }

}

@-webkit-keyframes fadeOut {

 0% {
   opacity: 1;
 }
 100% {
   opacity: 0;
 }

}

@-moz-keyframes fadeOut {

 0% {
   opacity: 1;
 }
 100% {
   opacity: 0;
 }

}

@-o-keyframes fadeOut {

 0% {
   opacity: 1;
 }
 100% {
   opacity: 0;
 }

}

@keyframes fadeOut {

 0% {
   opacity: 1;
 }
 100% {
   opacity: 0;
 }

}

.animated.fadeOut {

 -webkit-animation-name: fadeOut;
 -moz-animation-name: fadeOut;
 -o-animation-name: fadeOut;
 animation-name: fadeOut;

}

.animated.fadeOutLeft {

 -webkit-animation-name: fadeOutLeft;
 -moz-animation-name: fadeOutLeft;
 -o-animation-name: fadeOutLeft;
 animation-name: fadeOutLeft;

}

/********************************* DEFAULT WIKI SETTINGS ********************************/

sideMenu,
top_title {

 display: none;

}

content {

 padding: 0px;
 width: 100%;

}

body {

 background-color: white;
 width: 100%;

}

bodyContent h1,
bodyContent h2,
bodyContent h3,
bodyContent h4,
bodyContent h5 {

 margin-bottom: 0px;

}

bodyContent {

 padding-right: 0px;

}

globalWrapper {

 font-size: 100%;
 padding: 0px;
 margin: -10px -20px -20px -20px;

}

.navbar-collapse {

 padding-left: 0px;

}

banner {

 margin-top: 50px;

}

sideMenu {

 margin-top: 10px;

}

.dropdown-menu li:hover .sub-menu {

 visibility: visible;

}

.dropdown:hover .dropdown-menu {

 display: block;

}

.navbar-nav .dropdown-menu, .navbar .dropdown-menu {

 margin-top: 0;

}

/********************************* CONTENT OF THE PAGE ********************************/

/* Wrapper for the content */

.content_wrapper {

 width: 85%;
 margin-left: 150px;
 padding: 0px;
 float: left;
 background-color: white;

}

/*LAYOUT */

.column {

 padding: 10px 0px;
 float: left;
 background-color: white;

}

.full_size {

 width: 100%;

}

.full_size img {

 padding: 10px 15px;
 width: 96.5%;

}

.half_size {

 width: 50%;

}

.half_size img {

 padding: 10px 15px;
 width: 93%;

}

.img:hover {

 opacity: 1.0 !important;

}

.clear {

 clear: both;

}

.highlight {

 width: 90%;
 margin: auto;
 padding: 15px 5px;
 background-color: #f2f2f2;

}

.judges-will-not-evaluate {

 border: 4px solid #72c9b6;
 display: block;
 margin: 5px 15px;
 width: 95%;
 font-weight: bold;

}

/*STYLING */

/* styling for the titles */

.content_wrapper h1, .content_wrapper h2 {

 padding: 5px 15px;
 border-bottom: 0px;
 color: #72c9b6;

}

.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {

 padding: 5px 15px;
 border-bottom: 0px;
 color: #000000;

}

/* font and text */

.content_wrapper p {

 padding: 0px 15px;
 font-size: 13px;
 font-family: 'Karla', sans-serif;

}

/* Links */

.content_wrapper a {

 font-weight: bold;
 text-decoration: underline;
 text-decoration-color: #72c9b6;
 color: #72c9b6;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -ms-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;

}

/* hover for the links */

.content_wrapper a:hover {

 text-decoration: none;
 color: #000000;

}

/* non numbered lists */

.content_wrapper ul {

 padding: 0px 20px;
 font-size: 13px;
 font-family: 'Karla', sans-serif;

}

/* numbered lists */

.content_wrapper ol {

 padding: 0px;
 font-size: 13px;
 font-family: 'Karla', sans-serif;

}

/* Table */

.content_wrapper table {

 width: 97%;
 margin: 15px 10px;
 border: 1px solid #d3d3d3;
 border-collapse: collapse;

}

/* table cells */

.content_wrapper td {

 padding: 10px;
 vertical-align: text-top;
 border: 1px solid #d3d3d3;
 border-collapse: collapse;

}

/* table headers */

.content_wrapper th {

 padding: 10px;
 vertical-align: text-top;
 border: 1px solid #d3d3d3;
 border-collapse: collapse;
 background-color: #f2f2f2;

}

/* Button class */

.button_click {

 margin: 10px auto;
 padding: 15px;
 width: 12%;
 text-align: center;
 font-weight: bold;
 background-color: #72c9b6;
 cursor: pointer;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -ms-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;

}

/* button class on hover */

.button_click:hover {

 background-color: #000000;
 color: #72c9b6;

}

.top-pad {

 padding: 35px;

}

/********************************* RESPONSIVE STYLING ********************************/

/* IF THE SCREEN IS LESS THAN 1000PX */

@media only screen and (max-width: 1000px) {

 #content {
   width: 100%;
 }
 .menu_wrapper {
   width: 15%;
 }
 .content_wrapper {
   margin-left: 15%;
 }
 .menu_item {
   display: block;
 }
 .icon {
   display: none;
 }
 .highlight {
   padding: 10px 0px;
 }

}

/* IF THE SCREEN IS LESS THAN 680PX */

@media only screen and (max-width: 680px) {

 .collapsable_menu_control {
   display: block;
 }
 .menu_item {
   display: none;
 }
 .menu_wrapper {
   width: 100%;
   height: 15%;
   position: relative;
 }
 .content_wrapper {
   width: 100%;
   margin-left: 0px;
 }
 .column.half_size {
   width: 100%;
 }
 .column img {
   width: 100%;
   padding: 5px 0px;
 }
 .icon {
   display: block;
 }
 .highlight {
   padding: 15px 5px;
 }

}

@@ Line 5: / Line 5: @@
   nav ul {
      position: static;
-     display: none;
+     display: flex;
-     float:left;
+     float: right;
      margin: 0px;
      margin-top:0px;
      padding: 0px 0px;
+    justify-content:space-around;
 }
    /*Create vertical spacing*/
    li {
@@ Line 109: / Line 111: @@
 body {
-   font-family: 'Roboto', sans-serif;
+   font-family: 'Karla', sans-serif;
 }
@@ Line 138: / Line 140: @@
 }
-/* Cover Image */
-#banner {
-  position: relative;
-  z-index: 0;
-  background: url('');
-  /*background-position: 10px -200px;*/
-  background-color: #F7F5E6;
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-#GRObanner {
-  position: relative;
-  z-index: 0;
-  background: url('');
-  background-position: 0px -200px;
-  background-color: #aaa;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-#integratedbanner {
-  position: relative;
-  z-index: 0;
-  background: url('');
-  background-position: 200px 70px;
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-#outreachbanner {
-  position: relative;
-  z-index: 0;
-  background: url('');
-  background-position: 200px 70px;
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-#modelbanner {
-  position: relative;
-  z-index: 0;
-  background: url('');
-  background-position: 200px 70px;
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-#safetybanner {
-  position: relative;
-  z-index: 0;
-  background: url('');
-  background-position: 200px 70px;
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-#Protobanner {
-  position: relative;
-  z-index: 0;
-  background: url('');
-    background-position: 200px 70px;
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-#Proofbanner {
-  position: relative;
-  z-index: 0;
-  background: url('');
-background-position: 200px 70px;
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-#humanbanner {
-  position: relative;
-  z-index: 0;
-  background: url('');
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-#brainbanner {
-  position: relative;
-  z-index: 0;
-  background: url('');
-  background-size: contain;
-background-position: 200px 40px;
-  background-repeat: no-repeat;
-}
-#collabbanner {
-  position: relative;
-  z-index: 0;
-background-position: 0px -160px;
-  background: url('');
-background-position: 200px 70px;
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-#attribbanner {
-  position: relative;
-  z-index: 0;
-  background: url('');
-  background-position: 200px 70px;
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-#bannercontent:not(center) {
-  height: 75%;
-  padding-top: 25%;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-bottom: 25%;
-  box-sizing: border-box;
-  margin: auto;
-}
 .container,
@@ Line 271: / Line 152: @@
-/* Carousel Styles */
-.carousel-indicators .active {
-  background-color: #52658F;
-}
-.carousel-inner img {
-  width: 100%;
-  max-height: 600px
-}
-.Image-inner img {
-  width: 90%;
-  max-height: 400px
-}
-.carousel-control {
-  width: 0;
-}
-.carousel-control.left,
-.carousel-control.right {
-  opacity: .7;
-  color: #52658F;
-  filter: alpha(opacity=100);
-  background-image: none;
-  background-repeat: no-repeat;
-  text-shadow: none;
-}
-.carousel-control.left span {
-  padding: 30px;
-}
-.carousel-control.right span {
-  padding: 15px;
-}
-.carousel-control .fa-arrow-left,
-.carousel-control .fa-arrow-right,
-.carousel-control .icon-prev,
-.carousel-control .icon-next {
-  position: absolute;
-  top: 50%;
-  z-index: 5;
-  display: inline-block;
-}
-.carousel-control .fa-arrow-left,
-.carousel-control .icon-prev {
-  left: 0;
-}
-.carousel-control .fa-arrow-right,
-.carousel-control .icon-next {
-  right: 0;
-}
-.carousel-control.left span,
-.carousel-control.right span {
-  background-color: #000;
-}
-.carousel-control.left span:hover,
-.carousel-control.right span:hover {
-  opacity: 1;
-  filter: alpha(opacity=70);
-}
@@ Line 344: / Line 157: @@
 .some-padding {
-   padding-top: 20px;
+   padding-top: 0px;
 }
@@ Line 351: / Line 164: @@
 .navbar-default {
-   background-color: white;
+   background-color: #black;
    border-color: rgba(255, 255, 255, 0.3);
    font-family: 'Karla', sans-serif;
@@ Line 365: / Line 178: @@
 .navbar-default .navbar-header .navbar-brand {
-   color: #52658F;
+   color: #white;
-   font-family: 'Helvetica', sans-serif;
+   font-family: 'Karla', sans-serif;
-   font-weight: bold;
+   font-weight: none;
    font-size: 22px;
    display: inline-block;
+  background: black
 }
@@ Line 377: / Line 191: @@
 .navbar-default .navbar-header .navbar-brand:hover,
 .navbar-default .navbar-header .navbar-brand:focus {
-   color: #52658F;
+   color: #white;
 }
@@ Line 384: / Line 198: @@
    font-weight: 400; bold;
    font-size: 14px;
-   color: #333A56;
+   color: #white;
    text-transform: uppercase;
 }
-/* Navbar font */
+/* FONT */
 .navbar-default .nav > li > a,
 .navbar-default .nav > li > a:focus {
@@ Line 395: / Line 209: @@
    font-weight: bold;
    font-size: 14px;
-   color: #959595;
+   color: #white;
 }
 .navbar-default .nav > li > a:hover,
 .navbar-default .nav > li > a:focus:hover {
-   color: #333A56;
+   color: #white;
 }
@@ Line 407: / Line 221: @@
 .navbar-default .nav > li.active > a,
 .navbar-default .nav > li.active > a:focus {
-   color: #333A56 !important;
+   color: #CF5435 !important;
    background-color: black;
 }
@@ Line 423: / Line 237: @@
 .navbar-default .dropdown-menu > li > a:hover,
 .navbar-default .dropdown-menu > li > a:focus {
-   background-color: #white;
+   background-color: #CDD7B6;
-   color: #2eacdd;
+   color: #blue;
 }
@@ Line 433: / Line 247: @@
    text-transform: uppercase;
    font-weight: bold;
-   font-size: 13.2px !important;
+   font-size: 14.2px !important;
-   color: #222222;
+   color: #CF5435;
 }