|
|
| Line 126: |
Line 126: |
| | padding: 0; | | padding: 0; |
| | background: none; | | background: none; |
| − | }
| |
| − | #bodyContent {
| |
| − | }
| |
| − | /************************************************************************
| |
| − | Page sections
| |
| − | ************************************************************************/
| |
| − | #bodyContent article{
| |
| − | width:90%;
| |
| − | margin: auto;
| |
| − | padding: 8% 0;
| |
| | } | | } |
| − |
| |
| − | #bodyContent .frontpage{
| |
| − | width: 100%;
| |
| − | margin: 0% 0;
| |
| − | padding: 5%;
| |
| − | padding-top: 0%;
| |
| − | background: white;
| |
| − | box-shadow: 0 -20px 20px 20px white;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: 1024px) {
| |
| − | #bodyContent article{
| |
| − | width: 85%;
| |
| − | margin: 0;
| |
| − | padding: 8% 5%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | #ToC {
| |
| − | display:none;
| |
| − | position:fixed;
| |
| − | top: 100px;
| |
| − | left: 85%;
| |
| − | right: 0;
| |
| − | bottom: 0;
| |
| − | padding: 20px;
| |
| − | -webkit-box-orient:vertical;
| |
| − | -webkit-box-direction:normal;
| |
| − | -ms-flex-direction:column;
| |
| − | flex-direction:column;
| |
| − | -webkit-box-pack: start;
| |
| − | -ms-flex-pack: start;
| |
| − | justify-content: flex-start;
| |
| − | -webkit-box-align: start;
| |
| − | -ms-flex-align: start;
| |
| − | align-items: flex-start;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: 1024px){
| |
| − | #ToC{
| |
| − | display:-webkit-box;
| |
| − | display:-ms-flexbox;
| |
| − | display:flex;
| |
| − | }
| |
| − | }
| |
| − | #bodyContent #ToC a {
| |
| − | display:block;
| |
| − | margin:10px 0;
| |
| − | position:relative;
| |
| − | text-align: left;}
| |
| − | #bodyContent #ToC a[title=H1] { display:none;font-size:1.125rem;}
| |
| − | #bodyContent #ToC a[title=H2] { font-size:0.875rem;}
| |
| − | #bodyContent #ToC a[title=H3] { display:none;font-size:0.750rem;}
| |
| − |
| |
| − | #bodyContent nav {
| |
| − | display:none;
| |
| − | position: fixed;
| |
| − | background-color: white;
| |
| − | -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.3);
| |
| − | box-shadow: 0 5px 15px rgba(0,0,0,0.3);
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | top: 16px;
| |
| − | z-index: 50;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: 1024px) {
| |
| − | #bodyContent nav{
| |
| − | display:-webkit-box;
| |
| − | display:-ms-flexbox;
| |
| − | display:flex;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #bodyContent .menu {
| |
| − | width:80%;
| |
| − | margin:auto;
| |
| − | display: -webkit-box;
| |
| − | display: -ms-flexbox;
| |
| − | display: flex;
| |
| − | -webkit-box-orient: horizontal;
| |
| − | -webkit-box-direction: normal;
| |
| − | -ms-flex-direction: row;
| |
| − | flex-direction: row;
| |
| − | -webkit-box-pack: justify;
| |
| − | -ms-flex-pack: justify;
| |
| − | justify-content: space-between;
| |
| − | -webkit-box-align: center;
| |
| − | -ms-flex-align: center;
| |
| − | align-items: center;
| |
| − | padding: 0 20px;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .menu img{
| |
| − | width: 128px;
| |
| − | max-width: 128px;
| |
| − | }
| |
| − |
| |
| − | #bodyContent nav li::before{
| |
| − | content:none;
| |
| − | }
| |
| − |
| |
| − | #bodyContent nav ul {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .menu li {
| |
| − | display: block;
| |
| − | list-style-type: none;
| |
| − | text-transform: uppercase;
| |
| − | padding-left: 0;
| |
| − | text-indent: 0;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .menu li a {
| |
| − | display: -webkit-box;
| |
| − | display: -ms-flexbox;
| |
| − | display: flex;
| |
| − | text-align: center;
| |
| − | -webkit-box-align:center;
| |
| − | -ms-flex-align:center;
| |
| − | align-items:center;
| |
| − | text-decoration: none;
| |
| − | color: #777;
| |
| − | padding: 15px;
| |
| − | font-size: 0.875rem;
| |
| − | font-weight: bold;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .menu > li > a{
| |
| − | height: 80px;
| |
| − | padding: 0 5px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #bodyContent .menu li a:hover {
| |
| − | background: #ccc;
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .menu-item-has-children > a:after {
| |
| − | font-family: "Genericons";
| |
| − | content: "\f431";
| |
| − | padding-left: 5px;
| |
| − | -webkit-transition: -webkit-transform 0.5s;
| |
| − | transition: -webkit-transform 0.5s;
| |
| − | -o-transition: transform 0.5s;
| |
| − | transition: transform 0.5s;
| |
| − | transition: transform 0.5s, -webkit-transform 0.5s;
| |
| − | }
| |
| − |
| |
| − | #bodyContent nav ul ul {
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | }
| |
| − |
| |
| − | #bodyContent nav ul li:hover > ul {
| |
| − | display: block;
| |
| − | color: #fff;
| |
| − | padding-left: 0;
| |
| − | background: #777;
| |
| − | }
| |
| − |
| |
| − | #bodyContent nav ul li:hover > ul a {
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .sub-menu li {
| |
| − | display: -webkit-box;
| |
| − | display: -ms-flexbox;
| |
| − | display: flex;
| |
| − | width: 340px;
| |
| − | }
| |
| − | #bodyContent .sub-menu li:hover,
| |
| − | #bodyContent .sub-menu li a:hover {
| |
| − | background: #ddd;
| |
| − | color: #777;
| |
| − | }
| |
| − |
| |
| − | #bodyContent nav ul ul ul {
| |
| − | margin: 0 0 0 100%;
| |
| − | -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
| |
| − | box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
| |
| − | }
| |
| − |
| |
| − | #bodyContent .menu-item-has-children .menu-item-has-children:hover > a:after {
| |
| − | -webkit-transform: rotate(-90deg);
| |
| − | -ms-transform: rotate(-90deg);
| |
| − | transform: rotate(-90deg);
| |
| − | -webkit-transform-origin: 50% 60%;
| |
| − | -ms-transform-origin: 50% 60%;
| |
| − | transform-origin: 50% 60%;
| |
| − | }
| |
| − |
| |
| − | /************************************************************************
| |
| − | Navigation Button
| |
| − | ************************************************************************/
| |
| − | #bodyContent #sidebar-btn {
| |
| − | width: 100%;
| |
| − | height: 50px;
| |
| − | padding: 0 5vw 0 0;
| |
| − | position: fixed;
| |
| − | top: 16px;
| |
| − | right: 0;
| |
| − | display: -webkit-box;
| |
| − | display: -ms-flexbox;
| |
| − | display: flex;
| |
| − | -webkit-box-orient: horizontal;
| |
| − | -webkit-box-direction: normal;
| |
| − | -ms-flex-direction: row;
| |
| − | flex-direction: row;
| |
| − | -webkit-box-pack: end;
| |
| − | -ms-flex-pack: end;
| |
| − | justify-content: flex-end;
| |
| − | -webkit-box-align: center;
| |
| − | -ms-flex-align: center;
| |
| − | align-items: center;
| |
| − | font-size: 24pt;
| |
| − | cursor: pointer;
| |
| − | z-index: 2;
| |
| − | color: white;
| |
| − | background: #1C1E1F;
| |
| − | border: none;
| |
| − | border-radius: 0;
| |
| − | -webkit-box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
| |
| − | box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
| |
| − | -webkit-transition: border 1s ease;
| |
| − | -o-transition: border 1s ease;
| |
| − | transition: border 1s ease;
| |
| − | }
| |
| − | #bodyContent #sidebar-btn:hover {
| |
| − | border: none; }
| |
| − |
| |
| − | #bodyContent #sidebar-btn i {
| |
| − | -webkit-transition: color 1s ease;
| |
| − | -o-transition: color 1s ease;
| |
| − | transition: color 1s ease;
| |
| − | }
| |
| − | #bodyContent #sidebar-btn:hover i {
| |
| − | color: #149375;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: 1024px) {
| |
| − | #bodyContent #sidebar-btn {
| |
| − | display:none;
| |
| − | width: 20px;
| |
| − | height: 20px;
| |
| − | padding: 28px;
| |
| − | left: 2vw;
| |
| − | top: 4vw;
| |
| − | -webkit-box-pack: center;
| |
| − | -ms-flex-pack: center;
| |
| − | justify-content: center;
| |
| − | background: #149375;
| |
| − | border: 3px solid white;
| |
| − | border-radius: 100%;
| |
| − | }
| |
| − |
| |
| − | #bodyContent #sidebar-btn:hover {
| |
| − | border: 3px solid black;
| |
| − | }
| |
| − | #bodyContent #sidebar-btn:hover i {
| |
| − | color: black;
| |
| − | }
| |
| − | #bodyContent #sidebar-btn.active {
| |
| − | opacity:0;
| |
| − | }
| |
| − | }
| |
| − | /************************************************************************
| |
| − | Navigation bar
| |
| − | ************************************************************************/
| |
| − | #bodyContent #sidebar {
| |
| − | z-index: 5;
| |
| − | background: #151718;
| |
| − | width: 250px;
| |
| − | height: 100%;
| |
| − | display: block;
| |
| − | position: fixed;
| |
| − | top: 16px;
| |
| − | left: 0;
| |
| − | visibility: hidden;
| |
| − | opacity: 0;
| |
| − | -webkit-transition: all 0.5s ease;
| |
| − | -o-transition: all 0.5s ease;
| |
| − | transition: all 0.5s ease;
| |
| − | overflow-y: auto;
| |
| − | }
| |
| − | #bodyContent #sidebar.visible {
| |
| − | visibility: visible;
| |
| − | opacity: 1;
| |
| − | }
| |
| − | #bodyContent #sidebar ul {
| |
| − | margin: 0px;
| |
| − | padding: 0px;
| |
| − | }
| |
| − | #bodyContent #sidebar ul li {
| |
| − | list-style: none;
| |
| − | -webkit-transition: all 0.5s ease;
| |
| − | -o-transition: all 0.5s ease;
| |
| − | transition: all 0.5s ease;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | text-indent: 0;
| |
| − | }
| |
| − |
| |
| − | #bodyContent #sidebar ul li::before{
| |
| − | content: none;
| |
| − | padding-right: 0;
| |
| − |
| |
| − | }
| |
| − | #bodyContent #sidebar ul li a {
| |
| − | font-size: 1rem;
| |
| − | background: #1C1E1F;
| |
| − | color: #ccc;
| |
| − | border-bottom: 1px solid #111;
| |
| − | display: block;
| |
| − | width: 250px;
| |
| − | padding: 10px;
| |
| − | text-decoration: none;
| |
| − | -webkit-transition: all 0.5s ease;
| |
| − | -o-transition: all 0.5s ease;
| |
| − | transition: all 0.5s ease;
| |
| − | }
| |
| − | #bodyContent #sidebar ul li a:hover {
| |
| − | background-color: rgba(255, 255, 255, 0.3)
| |
| − | }
| |
| − | #bodyContent #sidebar ul ul a {
| |
| − | font-size: 1rem;
| |
| − | background: #1C1E1F;
| |
| − | color: #ccc;
| |
| − | border-bottom: 1px solid #111;
| |
| − | display: block;
| |
| − | width: 250px;
| |
| − | padding: 10px;
| |
| − | text-decoration: none;
| |
| − | -webkit-transition: all 0.5s ease;
| |
| − | -o-transition: all 0.5s ease;
| |
| − | transition: all 0.5s ease;
| |
| − | }
| |
| − | #bodyContent #sidebar ul ul a:hover {
| |
| − | background-color: rgba(255, 255, 255, 0.3)
| |
| − | }
| |
| − | #bodyContent #sidebar ul ul.sub li {
| |
| − | display: none;
| |
| − | padding-left: 15px;
| |
| − | }
| |
| − | #bodyContent #sidebar ul ul.sub li.active {
| |
| − | display: block;
| |
| − | }
| |
| − | #bodyContent #overlay {
| |
| − | position: fixed;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | bottom: 0;
| |
| − | background-color: rgba(0, 0, 0, 0.5);
| |
| − | z-index: 1;
| |
| − | cursor: pointer;
| |
| − | visibility: hidden;
| |
| − | opacity: 0;
| |
| − | -webkit-transition: all 0.5s ease;
| |
| − | -o-transition: all 0.5s ease;
| |
| − | transition: all 0.5s ease;
| |
| − | }
| |
| − | #bodyContent #overlay.active {
| |
| − | visibility: visible;
| |
| − | opacity: 1;
| |
| − | }
| |
| − | #bodyContent footer {
| |
| − | display: -webkit-box;
| |
| − | display: -ms-flexbox;
| |
| − | display: flex;
| |
| − | -webkit-box-orient: horizontal;
| |
| − | -webkit-box-direction: normal;
| |
| − | -ms-flex-direction: row;
| |
| − | flex-direction: row;
| |
| − | -webkit-box-pack: center;
| |
| − | -ms-flex-pack: center;
| |
| − | justify-content: center;
| |
| − | -webkit-box-align: center;
| |
| − | -ms-flex-align: center;
| |
| − | align-items: center;
| |
| − | height: 15vw;
| |
| − | max-height: 250px;
| |
| − | background: #1C1E1F;
| |
| − | }
| |
| − | #bodyContent footer i {
| |
| − | color: rgba(255, 255, 255, 0.3);
| |
| − | padding: 20px;
| |
| − | font-size: 5vw;
| |
| − | -webkit-transition: all 0.5s ease;
| |
| − | -o-transition: all 0.5s ease;
| |
| − | transition: all 0.5s ease;
| |
| − | }
| |
| − | #bodyContent footer i:hover {
| |
| − | color: rgba(255, 255, 255, 1);
| |
| − | }
| |
| − |
| |
| − | /************************************************************************
| |
| − | General page styles
| |
| − | ************************************************************************/
| |
| − | #bodyContent img {
| |
| − | display: block;
| |
| − | max-width: 100%;
| |
| − | padding: 20px;
| |
| − | margin: 20px auto;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: 1024px){
| |
| − | #bodyContent .floatleft{
| |
| − | float:left;
| |
| − | margin:0;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .floatright{
| |
| − | float:right;
| |
| − | margin:0;
| |
| − | }
| |
| − | #bodyContent img.nomargin{
| |
| − | margin:0;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #bodyContent svg {
| |
| − | display:block;
| |
| − | }
| |
| − |
| |
| − | #bodyContent svg.fullscreen{
| |
| − | padding: 10% 0;
| |
| − | margin: 0 5%;
| |
| − | }
| |
| − |
| |
| − | #bodyContent video{
| |
| − | max-width:100%;
| |
| − | margin: 5% auto;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .max-width {
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .limited-height{
| |
| − | max-height: 500px;
| |
| − | width: auto;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .half-width{
| |
| − | width:100%;
| |
| − | margin:5% auto;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .quarter-width{
| |
| − | width:100%;
| |
| − | margin:5% auto;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @media (min-width: 1024px){
| |
| − | #bodyContent .half-width{
| |
| − | width:50%;
| |
| − | }
| |
| − | #bodyContent .quarter-width{
| |
| − | width:25%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | #bodyContent h1,h2,h3,h4,h5,h6 {
| |
| − | color: #149375;
| |
| − | border: none;
| |
| − | font-weight: normal;
| |
| − | font-style: normal;
| |
| − | text-rendering: optimizeLegibility;
| |
| − | font-family: 'Quicksand', sans-serif;
| |
| − | line-height: 1.3;
| |
| − | }
| |
| − | #bodyContent h1 {
| |
| − | font-size: 2.986rem;
| |
| − | margin: 20px 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: 1024px) {
| |
| − | #bodyContent h1{
| |
| − | text-transform: uppercase;
| |
| − | font-size: 6.854rem;
| |
| − | border-left: 5px solid #149375;
| |
| − | padding: 0 20px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | #bodyContent h2 {
| |
| − | font-size: 2.488rem;
| |
| − | margin: 18px 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: 1024px) {
| |
| − | #bodyContent h2{
| |
| − | font-size:4.236rem;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | #bodyContent h3 {
| |
| − | font-size: 2.074rem;
| |
| − | margin: 16px 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: 1024px) {
| |
| − | #bodyContent h3{
| |
| − | font-size:2.618rem;
| |
| − | }
| |
| − | }
| |
| − | #bodyContent h4 {
| |
| − | font-size: 1.728rem;
| |
| − | margin: 14px 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − | @media (min-width: 1024px) {
| |
| − | #bodyContent h4{
| |
| − | font-size:1.618rem;
| |
| − | }
| |
| − | }
| |
| − | #bodyContent h5 {
| |
| − | font-size: 1.44rem;
| |
| − | margin: 12px 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − | #bodyContent h6 {
| |
| − | font-size: 1.2rem;
| |
| − | margin: 10px 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | #bodyContent h1 a {font-size: inherit;}
| |
| − | #bodyContent h2 a {font-size: inherit;}
| |
| − | #bodyContent h3 a {font-size: inherit;}
| |
| − | #bodyContent h4 a {font-size: inherit;}
| |
| − | #bodyContent h5 a {font-size: inherit;}
| |
| − | #bodyContent h6 a {font-size: inherit;}
| |
| − |
| |
| − | #bodyContent p {
| |
| − | font-family: 'Quicksand', sans-serif;
| |
| − | font-size: 1.250rem;
| |
| − | text-align: justify;
| |
| − | line-height: 1.5;
| |
| − | margin:0 auto;
| |
| − | padding: 0;
| |
| − | }
| |
| − | #bodyContent article p {
| |
| − | padding: 10px 0;
| |
| − | }
| |
| − | #bodyContent em{}
| |
| − | #bodyContent b,strong {
| |
| − | font-weight: bold;
| |
| − | line-height: inherit;
| |
| − | color: #149375;
| |
| − | }
| |
| − | #bodyContent samp{}
| |
| − | #bodyContent kbd{}
| |
| − | #bodyContent mark{
| |
| − | background-color: #149375;
| |
| − | padding: 0 5px;
| |
| − | border-radius: 10px;
| |
| − | color: white;
| |
| − | }
| |
| − | #bodyContent cite{}
| |
| − | #bodyContent dfn{}
| |
| − |
| |
| − | #bodyContent abbr {
| |
| − | vertical-align: baseline;
| |
| − | font-size: inherit;
| |
| − | text-decoration: none;
| |
| − | color: rgba(0, 0, 0, 0.5);
| |
| − | font-size: 1.250rem;
| |
| − | }
| |
| − | #bodyContent abbr[title],.explain[title] {
| |
| − | border-bottom: none;
| |
| − | cursor: help;
| |
| − | }
| |
| − |
| |
| − | #bodyContent pre {
| |
| − | display:block;
| |
| − | overflow-x: auto;
| |
| − | background: rgba(0,0,0,0);
| |
| − | padding: 20px;
| |
| − | width: 100%;
| |
| − | border: none;
| |
| − | line-height: 1;
| |
| − | }
| |
| − | #bodyContent code {
| |
| − | background: rgba(158, 158, 158, 0.5);
| |
| − | padding: 0 5px;
| |
| − | border-radius: 5px;
| |
| − | border:none;
| |
| − | }
| |
| − | #bodyContent pre code{
| |
| − | background: none;
| |
| − | padding: 0;
| |
| − | border-radius: 0;
| |
| − | }
| |
| − |
| |
| − | #bodyContent figure {
| |
| − | margin-bottom: 20px;
| |
| − | }
| |
| − |
| |
| − | #bodyContent figcaption {
| |
| − | font-family: 'Quicksand', sans-serif;
| |
| − | font-size: 0.75rem;;
| |
| − | padding-left: 20px;
| |
| − | font-style: italic;
| |
| − | }
| |
| − |
| |
| − | #bodyContent figcaption a{
| |
| − | font-size: 0.75rem;;
| |
| − | }
| |
| − |
| |
| − | #bodyContent figcaption abbr{
| |
| − | font-size: 0.75rem;;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .flex-row-2{
| |
| − | display:-webkit-box;
| |
| − | display:-ms-flexbox;
| |
| − | display:flex;
| |
| − | -webkit-box-orient: vertical;
| |
| − | -webkit-box-direction: normal;
| |
| − | -ms-flex-direction: column;
| |
| − | flex-direction: column;
| |
| − | }
| |
| − | #bodyContent .flex-row-2 div{
| |
| − | display:-webkit-box;
| |
| − | display:-ms-flexbox;
| |
| − | display:flex;
| |
| − | -webkit-box-orient: vertical;
| |
| − | -webkit-box-direction: normal;
| |
| − | -ms-flex-direction: column;
| |
| − | flex-direction: column;
| |
| − | -webkit-box-pack: center;
| |
| − | -ms-flex-pack: center;
| |
| − | justify-content: center;
| |
| − | -webkit-box-align: center;
| |
| − | -ms-flex-align: center;
| |
| − | align-items: center;
| |
| − | width: 100%;
| |
| − | }
| |
| − | #bodyContent .flex-row-3{
| |
| − | display:-webkit-box;
| |
| − | display:-ms-flexbox;
| |
| − | display:flex;
| |
| − | -webkit-box-orient: vertical;
| |
| − | -webkit-box-direction: normal;
| |
| − | -ms-flex-direction: column;
| |
| − | flex-direction: column;
| |
| − | }
| |
| − | #bodyContent .flex-row-3 div{
| |
| − | display:-webkit-box;
| |
| − | display:-ms-flexbox;
| |
| − | display:flex;
| |
| − | -webkit-box-orient: vertical;
| |
| − | -webkit-box-direction: normal;
| |
| − | -ms-flex-direction: column;
| |
| − | flex-direction: column;
| |
| − | -webkit-box-pack: center;
| |
| − | -ms-flex-pack: center;
| |
| − | justify-content: center;
| |
| − | -webkit-box-align: center;
| |
| − | -ms-flex-align: center;
| |
| − | align-items: center;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: 1024px) {
| |
| − | #bodyContent .flex-row-2{
| |
| − | -webkit-box-orient: horizontal;
| |
| − | -webkit-box-direction: normal;
| |
| − | -ms-flex-direction: row;
| |
| − | flex-direction: row;
| |
| − | }
| |
| − | #bodyContent .flex-row-2 *{
| |
| − | -webkit-box-flex:1;
| |
| − | -ms-flex:1;
| |
| − | flex:1;
| |
| − | }
| |
| − | #bodyContent .flex-row-2 div{
| |
| − | width:50%;
| |
| − | }
| |
| − | #bodyContent .flex-row-2 img{
| |
| − | padding: 20px;
| |
| − | }
| |
| − | #bodyContent .flex-row-3{
| |
| − | -webkit-box-orient: horizontal;
| |
| − | -webkit-box-direction: normal;
| |
| − | -ms-flex-direction: row;
| |
| − | flex-direction: row;
| |
| − | }
| |
| − | #bodyContent .flex-row-3 *{
| |
| − | -webkit-box-flex:1;
| |
| − | -ms-flex:1;
| |
| − | flex:1;
| |
| − | }
| |
| − | #bodyContent .flex-row-3 div{
| |
| − | width:33%;
| |
| − | }
| |
| − | #bodyContent .flex-row-3 img{
| |
| − | padding: 20px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /************************************************************************
| |
| − | Special Text
| |
| − | ************************************************************************/
| |
| − | /* label */
| |
| − | span.label {
| |
| − | display: inline-block;
| |
| − | padding: 0 6px;
| |
| − | border-radius: 20px;
| |
| − | white-space: nowrap;
| |
| − | cursor: default;
| |
| − | background: #149375;
| |
| − | color: #fefefe;
| |
| − | }
| |
| − | /************************************************************************
| |
| − | Layout Elements
| |
| − | ************************************************************************/
| |
| − | /************************************************************************
| |
| − | Tabs
| |
| − | ************************************************************************/
| |
| − | #bodyContent .tab {
| |
| − | width: 100%;
| |
| − | display:-webkit-box;
| |
| − | display:-ms-flexbox;
| |
| − | display:flex;
| |
| − | -webkit-box-orient:horizontal;
| |
| − | -webkit-box-direction:normal;
| |
| − | -ms-flex-direction:row;
| |
| − | flex-direction:row;
| |
| − | -webkit-box-pack: center;
| |
| − | -ms-flex-pack: center;
| |
| − | justify-content: center;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .tab button {
| |
| − | background-color:#fff;
| |
| − | border:none;
| |
| − | border-bottom:5px solid #ccc;
| |
| − | outline:none;
| |
| − | -webkit-transition: 0.3s;
| |
| − | -o-transition: 0.3s;
| |
| − | transition: 0.3s;
| |
| − | width: 100%;
| |
| − | padding: 20px;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .tab button:hover{
| |
| − | background-color:#eee;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .tab button.active {
| |
| − | border-bottom:5px solid #149375;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .tab img{
| |
| − | padding: 20%;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .tabcontent {
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .tabcontent:first-child{
| |
| − | display:block;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .tabcontent {
| |
| − | -webkit-animation: fadeEffect 1s;
| |
| − | animation: fadeEffect 1s; /* Fading effect takes 1 second */
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes fadeEffect {
| |
| − | from {opacity: 0;}
| |
| − | to {opacity: 1;}
| |
| − | }
| |
| − |
| |
| − | @keyframes fadeEffect {
| |
| − | from {opacity: 0;}
| |
| − | to {opacity: 1;}
| |
| − | }
| |
| − | /************************************************************************
| |
| − | Callout
| |
| − | ************************************************************************/
| |
| − | #bodyContent div.callout {
| |
| − | margin: 24px 0;
| |
| − | padding: 20px;
| |
| − | border: 5px solid #149375;
| |
| − | border-radius: 20px;
| |
| − | }
| |
| − | /************************************************************************
| |
| − | Accordion
| |
| − | ************************************************************************/
| |
| − | #bodyContent button.accordion {
| |
| − | display:-webkit-box;
| |
| − | display:-ms-flexbox;
| |
| − | display:flex;
| |
| − | -webkit-box-orient:vertical;
| |
| − | -webkit-box-direction:normal;
| |
| − | -ms-flex-direction:column;
| |
| − | flex-direction:column;
| |
| − | -webkit-box-align:center;
| |
| − | -ms-flex-align:center;
| |
| − | align-items:center;
| |
| − | font-family: 'Quicksand', sans-serif;
| |
| − | margin: 10px;
| |
| − | border-radius: 10px;
| |
| − | background-color: rgba(20, 147, 117, 0.125);
| |
| − | cursor: pointer;
| |
| − | padding: 18px;
| |
| − | width: 100%;
| |
| − | border: none;
| |
| − | outline: none;
| |
| − | -webkit-transition: all 0.5s ease;
| |
| − | -o-transition: all 0.5s ease;
| |
| − | transition: all 0.5s ease;
| |
| − | }
| |
| − | #bodyContent button.accordion h2{
| |
| − | font-size: 1.250rem;
| |
| − | text-transform:uppercase;
| |
| − | letter-spacing: 7px;
| |
| − | }
| |
| − | #bodyContent button.accordion h3{
| |
| − | font-size: 1.250rem;
| |
| − | text-transform:uppercase;
| |
| − | letter-spacing: 7px;
| |
| − | }
| |
| − | #bodyContent button.accordion h4{
| |
| − | font-size: 1.250rem;
| |
| − | text-transform:uppercase;
| |
| − | letter-spacing: 7px;
| |
| − | }
| |
| − |
| |
| − | #bodyContent button.accordion:after{
| |
| − | //content:"\25BE";
| |
| − | content:"v";
| |
| − | font-size:1.25rem;
| |
| − | font-weight:bold;
| |
| − | margin: 18px 0;
| |
| − | width:100%;
| |
| − | text-align:center;
| |
| − | background-color:white;
| |
| − | border-radius: 10px;
| |
| − | }
| |
| − |
| |
| − | #bodyContent button.accordion.active,
| |
| − | #bodyContent button.accordion:hover {
| |
| − | background-color: rgba(20, 147, 117, 0.7);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .panel {
| |
| − | padding: 0 18px;
| |
| − | background-color: white;
| |
| − | display:none;
| |
| − | opacity: 1;
| |
| − | -webkit-animation: fade 1s;
| |
| − | animation: fade 1s;
| |
| − | }
| |
| − |
| |
| − | .panel.show {
| |
| − | display: block;
| |
| − | opacity: 1;
| |
| − | -webkit-animation: fade 1s;
| |
| − | animation: fade 1s;
| |
| − | }
| |
| − | @-webkit-keyframes fade {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − | @keyframes fade {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | }
| |
| − |
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − | #bodyContent .panel p {
| |
| − | font-size: 1.125rem;
| |
| − | }
| |
| − | #bodyContent .panel p {
| |
| − | font-size: 1.125rem;
| |
| − | }
| |
| − |
| |
| − | /************************************************************************
| |
| − | Tables
| |
| − | ************************************************************************/
| |
| − | #bodyContent table{
| |
| − | font: 18px Quicksand;
| |
| − | background: rgba(0,0,0,0);
| |
| − | border: none;
| |
| − | margin: 0;
| |
| − | width: 100%;
| |
| − | table-layout: fixed;
| |
| − | }
| |
| − | #bodyContent table thead {
| |
| − | display:none;
| |
| − | }
| |
| − | @media (min-width: 1024px) {
| |
| − | #bodyContent table thead {
| |
| − | display:table-header-group;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | #bodyContent table th{
| |
| − | border: none;
| |
| − | background-color: rgba(20, 147, 117, 0.5);
| |
| − | text-align: left;
| |
| − | }
| |
| − | #bodyContent table td {
| |
| − | border:none;
| |
| − | display:block;
| |
| − | }
| |
| − | #bodyContent table tbody td:before{
| |
| − | content: attr(data-th);
| |
| − | font-weight: bold;
| |
| − | display: inline-block;
| |
| − | width: 6rem;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: 1024px){
| |
| − | #bodyContent table tbody td{
| |
| − | display: table-cell;
| |
| − | padding: 10px;
| |
| − | border-collapse: collapse;
| |
| − | vertical-align: middle;
| |
| − | }
| |
| − | #bodyContent table tbody td:before{
| |
| − | content:none;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | #bodyContent table tr{
| |
| − | background-color: rgba(0,0,0,0);
| |
| − | -webkit-transition: all 0.5s ease;
| |
| − | -o-transition: all 0.5s ease;
| |
| − | transition: all 0.5s ease;
| |
| − | }
| |
| − | #bodyContent table tr:nth-child(even) {
| |
| − | background-color: rgba(20, 147, 117, 0.125);
| |
| − | }
| |
| − | #bodyContent table tr:hover {
| |
| − | background-color: rgba(20, 147, 117, 0.75);
| |
| − | }
| |
| − |
| |
| − | @media (min-width: 1024px){
| |
| − |
| |
| − | #bodyContent table th:first-child{
| |
| − | border-radius: 10px 0 0 10px;
| |
| − | }
| |
| − | #bodyContent table th:last-child{
| |
| − | border-radius: 0 10px 10px 0;
| |
| − | }
| |
| − | #bodyContent table td:first-child{
| |
| − | border-radius: 10px 0 0 10px;
| |
| − | }
| |
| − | #bodyContent table td:last-child{
| |
| − | border-radius: 0 10px 10px 0;
| |
| − | }
| |
| − | #bodyContent table.small_first th:first-child {
| |
| − | width: 120px;
| |
| − | }
| |
| − | #bodyContent table.small_first td:first-child {
| |
| − | width: 120px;
| |
| − | }
| |
| − | }
| |
| − | /************************************************************************
| |
| − | Lists
| |
| − | ************************************************************************/
| |
| − | #bodyContent ul {
| |
| − | list-style-type: none;
| |
| − | list-style-image: none;
| |
| − | color: black;
| |
| − | margin: 2rem 0 2rem 3rem;
| |
| − | padding: 0;
| |
| − | line-height: 1.5;
| |
| − | }
| |
| − |
| |
| − | #bodyContent ol {
| |
| − | color: black;
| |
| − | margin: 2rem 0 2rem 3rem;
| |
| − | padding: 0;
| |
| − | line-height: 1.5;
| |
| − | }
| |
| − |
| |
| − | #bodyContent li {
| |
| − | font-family: 'Quicksand', sans-serif;
| |
| − | font-size: 1.250rem;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | line-height: 1.5;
| |
| − | padding-left: 1rem;
| |
| − | text-indent: -.7rem;
| |
| − | }
| |
| − | #bodyContent li::before {
| |
| − | content: "•";
| |
| − | color: #149375;
| |
| − | padding-right: 7px;
| |
| − | }
| |
| − |
| |
| − | #bodyContent ul.eric{
| |
| − | display: flex;
| |
| − | flex-direction: column;
| |
| − | }
| |
| − |
| |
| − | #bodyContent ul.eric li{
| |
| − | text-indent: 0;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #bodyContent ul.eric li::before {
| |
| − | content: "";
| |
| − | color: #149375;
| |
| − | float: left;
| |
| − | padding-right: 10px;
| |
| − | display: block;
| |
| − | height: 32px;
| |
| − | width: 32px;
| |
| − | background-image: url(https://static.igem.org/mediawiki/2017/5/50/T--Cologne-Duesseldorf--check.jpeg);
| |
| − | background-repeat: no-repeat;
| |
| − | background-position: left center;
| |
| − | background-size: 26px;
| |
| − | }
| |
| − |
| |
| − | #bodyContent ol li::before {
| |
| − | content: none;
| |
| − | }
| |
| − | #bodyContent a {
| |
| − | font-family: 'Quicksand', sans-serif;
| |
| − | font-size: 1.250rem;
| |
| − | text-align: justify;
| |
| − | line-height: 1.5;
| |
| − | list-style-image: none;
| |
| − | list-style-type: none;
| |
| − | color: #149375;
| |
| − | -webkit-transition: all 0.5s ease;
| |
| − | -o-transition: all 0.5s ease;
| |
| − | transition: all 0.5s ease;
| |
| − | }
| |
| − | #bodyContent a:hover {
| |
| − | color: #0e6752;
| |
| − | }
| |
| − | #bodyContent a:active {
| |
| − | color: #0e6752;
| |
| − | }
| |
| − | #bodyContent a:visited {
| |
| − | color: #149375;
| |
| − | }
| |
| − | /************************************************************************
| |
| − | Flex gallery
| |
| − | ************************************************************************/
| |
| − | #bodyContent .flex-gallery {
| |
| − | display: -webkit-box;
| |
| − | display: -ms-flexbox;
| |
| − | display: flex;
| |
| − | -webkit-box-orient: vertical;
| |
| − | -webkit-box-direction: normal;
| |
| − | -ms-flex-direction: column;
| |
| − | flex-direction: column;
| |
| − | -ms-flex-wrap: initial;
| |
| − | flex-wrap: initial;
| |
| − | -webkit-box-pack: start;
| |
| − | -ms-flex-pack: start;
| |
| − | justify-content: flex-start;
| |
| − | -webkit-box-align: center;
| |
| − | -ms-flex-align: center;
| |
| − | align-items: center;
| |
| − | }
| |
| − | @media (min-width: 768px) {
| |
| − | #bodyContent .flex-gallery {
| |
| − | -webkit-box-orient: horizontal;
| |
| − | -webkit-box-direction: normal;
| |
| − | -ms-flex-direction: row;
| |
| − | flex-direction: row;
| |
| − | -ms-flex-wrap: wrap;
| |
| − | flex-wrap: wrap;
| |
| − | -webkit-box-align: end;
| |
| − | -ms-flex-align: end;
| |
| − | align-items: flex-end;
| |
| − | -webkit-box-pack: center;
| |
| − | -ms-flex-pack: center;
| |
| − | justify-content: center;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media (min-width: 768px) {
| |
| − | #bodyContent .center-gallery{
| |
| − | -webkit-box-align: center;
| |
| − | -ms-flex-align: center;
| |
| − | align-items: center;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | #bodyContent .flex-gallery div {
| |
| − | width: 200px;
| |
| − | height: auto;
| |
| − | display:-webkit-box;
| |
| − | display:-ms-flexbox;
| |
| − | display:flex;
| |
| − | -webkit-box-orient: vertical;
| |
| − | -webkit-box-direction: normal;
| |
| − | -ms-flex-flow: column;
| |
| − | flex-flow: column;
| |
| − | -webkit-box-pack: end;
| |
| − | -ms-flex-pack: end;
| |
| − | justify-content: flex-end;
| |
| − | margin: 0 10px;
| |
| − | }
| |
| − |
| |
| − | #bodyContent .flex-gallery img {
| |
| − | max-width: 100%;
| |
| − | height: auto;
| |
| − | margin: 0 auto 40px auto;
| |
| − | -webkit-filter: grayscale(100%);
| |
| − | filter: grayscale(100%);
| |
| − | -webkit-transition: all 0.5s ease;
| |
| − | -o-transition: all 0.5s ease;
| |
| − | transition: all 0.5s ease;
| |
| − | }
| |
| − | #bodyContent .flex-gallery img:hover {
| |
| − | -webkit-filter: grayscale(0%);
| |
| − | filter: grayscale(0%);
| |
| − | }
| |
| − | #bodyContent .modalDialog {
| |
| − | display:none;
| |
| − | opacity: 0;
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | right: 0;
| |
| − | bottom: 0;
| |
| − | left: 0;
| |
| − | background: rgba(0, 0, 0, 0.8);
| |
| − | z-index: 100;
| |
| − | -webkit-transition: opacity 0.5s ease-in;
| |
| − | -o-transition: opacity 0.5s ease-in;
| |
| − | transition: opacity 0.5s ease-in;
| |
| − | pointer-events: none;
| |
| − | }
| |
| − | #bodyContent .modalDialog:target {
| |
| − | display:block;
| |
| − | opacity: 1;
| |
| − | pointer-events: auto;
| |
| − | }
| |
| − | #bodyContent .modalDialog > div {
| |
| − | display:-webkit-box;
| |
| − | display:-ms-flexbox;
| |
| − | display:flex;
| |
| − | -webkit-box-orient: horizontal;
| |
| − | -webkit-box-direction: normal;
| |
| − | -ms-flex-direction: row;
| |
| − | flex-direction: row;
| |
| − | position: absolute;
| |
| − | top: 15vh;
| |
| − | left: 15vw;
| |
| − | right: 15vw;
| |
| − | border-radius: 20px;
| |
| − | background: #fff;
| |
| − | }
| |
| − | #bodyContent .modalDialog > div > div {
| |
| − | margin: 20px;
| |
| − | }
| |
| − | #bodyContent a.close {
| |
| − | font-size: 24pt;
| |
| − | z-index: 3;
| |
| − | position: fixed;
| |
| − | right: 13vw;
| |
| − | top: 11vh;
| |
| − | display: -webkit-box;
| |
| − | display: -ms-flexbox;
| |
| − | display: flex;
| |
| − | -webkit-box-orient: horizontal;
| |
| − | -webkit-box-direction: normal;
| |
| − | -ms-flex-direction: row;
| |
| − | flex-direction: row;
| |
| − | -webkit-box-pack: center;
| |
| − | -ms-flex-pack: center;
| |
| − | justify-content: center;
| |
| − | -webkit-box-align: center;
| |
| − | -ms-flex-align: center;
| |
| − | align-items: center;
| |
| − | width: 20px;
| |
| − | height: 20px;
| |
| − | cursor: pointer;
| |
| − | padding: 28px;
| |
| − | border: 3px solid white;
| |
| − | border-radius: 100%;
| |
| − | -webkit-box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
| |
| − | box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
| |
| − | }
| |
| − | #bodyContent a.close {
| |
| − | background: #149375;
| |
| − | color: white;
| |
| − | -webkit-transition: all 0.5s ease;
| |
| − | -o-transition: all 0.5s ease;
| |
| − | transition: all 0.5s ease;
| |
| − | }
| |
| − | #bodyContent a.close:visited {
| |
| − | color: white;
| |
| − | }
| |
| − | #bodyContent a.close:link {
| |
| − | color: white;
| |
| − | }
| |
| − | #bodyContent a.close:hover {
| |
| − | border: 3px solid black;
| |
| − | color: black;
| |
| − | }
| |
| − |
| |
| − | /************************************************************************
| |
| − | image carousel
| |
| − | ************************************************************************/
| |
| − | #bodyContent .slider{
| |
| − | position:relative;
| |
| − | }
| |
| − | #bodyContent .slide{
| |
| − | -webkit-transition: opacity 2s linear;
| |
| − | -o-transition: opacity 2s linear;
| |
| − | transition: opacity 2s linear;
| |
| − | padding:0;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #bodyContent .slider button {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | border: none;
| |
| − | height: 100%;
| |
| − | width: 50px;
| |
| − | cursor: pointer;
| |
| − | background: hsla(0, 0%, 50%, 0.5);
| |
| − | }
| |
| − | #bodyContent .slider button:hover{
| |
| − | background: hsla(0, 0%, 0%, 0.5);
| |
| − | }
| |
| − |
| |
| − | #bodyContent .btn-left{
| |
| − | left:0;
| |
| − | }
| |
| − | #bodyContent .btn-right{
| |
| − | right:0;
| |
| − | }
| |
| − |
| |
| − | /************************************************************************
| |
| − | Misc elements
| |
| − | ************************************************************************/
| |
| − | /************************************************************************
| |
| − | Upwards arrow
| |
| − | ************************************************************************/
| |
| − | #bodyContent #returnToTop {
| |
| − | position: fixed;
| |
| − | font-size: 35pt;
| |
| − | right: 3vw;
| |
| − | bottom: 3vw;
| |
| − | display: block;
| |
| − | text-decoration: none;
| |
| − | color: rgba(0, 0, 0, 0.6);
| |
| − | -webkit-transition: all 2s ease;
| |
| − | -o-transition: all 2s ease;
| |
| − | transition: all 2s ease;
| |
| − | }
| |
| − |
| |
| − | #bodyContent #returnToTop:hover{
| |
| − | color: black;
| |
| − | }
| |
| − |
| |
| − | /************************************************************************
| |
| − | Loader
| |
| − | ************************************************************************/
| |
| − | #loader-wrapper {
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | z-index: 1000;
| |
| − | }
| |
| − | #loader {
| |
| − | display: block;
| |
| − | position: relative;
| |
| − | left: 50%;
| |
| − | top: 50%;
| |
| − | width: 150px;
| |
| − | height: 150px;
| |
| − | margin: -75px 0 0 -75px;
| |
| − | border-radius: 50%;
| |
| − | border: 3px solid transparent;
| |
| − | border-top-color: #0e6752;
| |
| − |
| |
| − | -webkit-animation: spin 2s linear infinite;
| |
| − | animation: spin 2s linear infinite;
| |
| − |
| |
| − | z-index: 1001;
| |
| − | }
| |
| − |
| |
| − | #loader:before {
| |
| − | content: "";
| |
| − | position: absolute;
| |
| − | top: 5px;
| |
| − | left: 5px;
| |
| − | right: 5px;
| |
| − | bottom: 5px;
| |
| − | border-radius: 50%;
| |
| − | border: 3px solid transparent;
| |
| − | border-top-color: #149375;
| |
| − |
| |
| − | -webkit-animation: spin 3s linear infinite;
| |
| − | animation: spin 3s linear infinite;
| |
| − | }
| |
| − |
| |
| − | #loader:after {
| |
| − | content: "";
| |
| − | position: absolute;
| |
| − | top: 15px;
| |
| − | left: 15px;
| |
| − | right: 15px;
| |
| − | bottom: 15px;
| |
| − | border-radius: 50%;
| |
| − | border: 3px solid transparent;
| |
| − | border-top-color: #1ac19a;
| |
| − |
| |
| − | -webkit-animation: spin 1.5s linear infinite;
| |
| − | animation: spin 1.5s linear infinite;
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes spin {
| |
| − | 0% {
| |
| − | -webkit-transform: rotate(0deg);
| |
| − | -ms-transform: rotate(0deg);
| |
| − | transform: rotate(0deg);
| |
| − | }
| |
| − | 100% {
| |
| − | -webkit-transform: rotate(360deg);
| |
| − | -ms-transform: rotate(360deg);
| |
| − | transform: rotate(360deg);
| |
| − | }
| |
| − | }
| |
| − | @keyframes spin {
| |
| − | 0% {
| |
| − | -webkit-transform: rotate(0deg);
| |
| − | -ms-transform: rotate(0deg);
| |
| − | transform: rotate(0deg);
| |
| − | }
| |
| − | 100% {
| |
| − | -webkit-transform: rotate(360deg);
| |
| − | -ms-transform: rotate(360deg);
| |
| − | transform: rotate(360deg);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | #loader-wrapper .loader-section {
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | width: 51%;
| |
| − | height: 100%;
| |
| − | background: #222222;
| |
| − | z-index: 1000;
| |
| − | -webkit-transform: translateX(0);
| |
| − | -ms-transform: translateX(0);
| |
| − | transform: translateX(0);
| |
| − | }
| |
| − |
| |
| − | #loader-wrapper .loader-section.section-left {
| |
| − | left: 0;
| |
| − | }
| |
| − |
| |
| − | #loader-wrapper .loader-section.section-right {
| |
| − | right: 0;
| |
| − | }
| |
| − |
| |
| − | /* Loaded */
| |
| − | .loaded #loader-wrapper .loader-section.section-left {
| |
| − | -webkit-transform: translateX(-100%);
| |
| − | -ms-transform: translateX(-100%);
| |
| − | transform: translateX(-100%);
| |
| − | -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
| |
| − | -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
| |
| − | transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
| |
| − | }
| |
| − |
| |
| − | .loaded #loader-wrapper .loader-section.section-right {
| |
| − | -webkit-transform: translateX(100%);
| |
| − | -ms-transform: translateX(100%);
| |
| − | transform: translateX(100%);
| |
| − |
| |
| − | -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
| |
| − | -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
| |
| − | transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
| |
| − | }
| |
| − |
| |
| − | .loaded #loader {
| |
| − | opacity: 0;
| |
| − | -webkit-transition: all 0.3s ease-out;
| |
| − | -o-transition: all 0.3s ease-out;
| |
| − | transition: all 0.3s ease-out;
| |
| − | }
| |
| − | .loaded #loader-wrapper {
| |
| − | visibility: hidden;
| |
| − |
| |
| − | -webkit-transform: translateY(-100%);
| |
| − | -ms-transform: translateY(-100%);
| |
| − | transform: translateY(-100%);
| |
| − | -webkit-transition: all 0.3s 1s ease-out;
| |
| − | -o-transition: all 0.3s 1s ease-out;
| |
| − | transition: all 0.3s 1s ease-out;
| |
| − | }
| |
| − | /* JavaScript Turned Off */
| |
| − | .no-js #loader-wrapper {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #myCanvas{
| |
| − | position:fixed;
| |
| − | top: 0;
| |
| − | bottom: 0;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | z-index: -1;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| | | | |
| | html *{ | | html *{ |
