|
|
(31 intermediate revisions by one other user not shown) |
Line 1: |
Line 1: |
− | /* Default Font and Sizing of Website */
| |
| | | |
− | @media screen and (max-width: 760px) {
| |
− | /*Make dropdown links appear inline*/
| |
| | | |
| nav ul { | | nav ul { |
Line 12: |
Line 9: |
| padding: 0px 0px; | | padding: 0px 0px; |
| justify-content:space-around; | | justify-content:space-around; |
| + | |
| } | | } |
| | | |
Line 18: |
Line 16: |
| margin-bottom: 1px; | | margin-bottom: 1px; |
| } | | } |
− | /*Make all menu links full width*/ | + | |
| + | /*Make all menu links full width*/ |
| ul li, | | ul li, |
| li a { | | li a { |
Line 42: |
Line 41: |
| } | | } |
| | | |
− | .content {
| |
− | margin-top:50px;
| |
− | }
| |
− |
| |
− | .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 { | | .red { |
Line 109: |
Line 77: |
| /* Body */ | | /* Body */ |
| | | |
− | body {
| + | |
− | font-family: 'Karla', sans-serif;
| + | |
− | padding-top: 40px;
| + | |
− | min-height: 400px;
| + | |
− | margin-bottom: 100px;
| + | |
− | }
| + | |
| | | |
| | | |
Line 121: |
Line 84: |
| } | | } |
| | | |
− | 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;
| |
− | }
| |
− |
| |
− | html {
| |
− | padding-bottom: 97px;
| |
− | }
| |
− |
| |
− |
| |
− | .container {
| |
− | margin-top:50px;
| |
− | }
| |
| | | |
| | | |
Line 253: |
Line 189: |
| | | |
| | | |
− | #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;
| |
− | }
| |
| | | |
| | | |
Line 334: |
Line 253: |
| | | |
| p { | | p { |
− | font-family: 'Roboto', sans-serif !important; | + | font-family: 'Karla', sans-serif !important; |
| ; | | ; |
| font-weight: 400 !important; | | font-weight: 400 !important; |
Line 340: |
Line 259: |
| font-size: 18px !important; | | font-size: 18px !important; |
| line-height: 1.5; | | 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 { | | .btn-default { |
Line 550: |
Line 414: |
| } | | } |
| | | |
− | h1,
| + | |
− | h2 {
| + | |
− | font-family: "Open Sans", sans-serif;
| + | |
− | font-weight: bold;
| + | |
− | }
| + | |
| | | |
| | | |
Line 600: |
Line 460: |
| } | | } |
| | | |
− | #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 ********************************/ | | /********************************* DEFAULT WIKI SETTINGS ********************************/ |
Line 1,447: |
Line 473: |
| | | |
| body { | | body { |
− | background-color: white;
| |
| width: 100%; | | 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 { | | .navbar-collapse { |
Line 1,473: |
Line 481: |
| } | | } |
| | | |
− | #banner {
| |
− | margin-top: 50px;
| |
− | }
| |
− |
| |
− | #sideMenu {
| |
− | margin-top: 10px;
| |
− | }
| |
| | | |
| .dropdown-menu li:hover .sub-menu { | | .dropdown-menu li:hover .sub-menu { |
Line 1,550: |
Line 551: |
| } | | } |
| | | |
− | .judges-will-not-evaluate {
| + | |
− | border: 4px solid #72c9b6;
| + | |
− | display: block;
| + | |
− | margin: 5px 15px;
| + | |
− | width: 95%;
| + | |
− | font-weight: bold;
| + | |
− | }
| + | |
| | | |
| | | |
Line 1,692: |
Line 687: |
| | | |
| | | |
− | /********************************* 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;
| + | |
− | }
| + | |
− | }
| + | |
Latest revision as of 13:08, 25 October 2017
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%;
}
}
/* 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;
}
.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 */
.indent {
text-indent: 50px;
}
/* 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;
}
/* 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: 'Karla', sans-serif !important;
;
font-weight: 400 !important;
;
font-size: 18px !important;
line-height: 1.5;
}
.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%;
}
/* -------------------------------- 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;
}
}
/********************************* DEFAULT WIKI SETTINGS ********************************/
- sideMenu,
- top_title {
display: none;
}
- content {
padding: 0px;
width: 100%;
}
body {
width: 100%;
}
.navbar-collapse {
padding-left: 0px;
}
.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;
}
/*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;
}
/