Difference between revisions of "Template:USTC-Software/css/mainpage"

m
 
(53 intermediate revisions by 4 users not shown)
Line 4: Line 4:
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
−
}
+
     font-family: Roboto, Arial, Helvetica, sans-serif;
−
 
+
−
body.disable-scroll {
+
−
     overflow: hidden;
+
 
}
 
}
  
Line 13: Line 10:
 
     padding-top: 50px;
 
     padding-top: 50px;
 
     padding-bottom: 50px;
 
     padding-bottom: 50px;
 +
}
 +
 +
.orbit+div h2 {
 +
    padding-top: 20px;
 
}
 
}
  
Line 23: Line 24:
 
}
 
}
  
 +
#globalWrapper {
 +
    padding-bottom: 0;
 +
}
 +
 +
#HQ_page div.row{
 +
    width: 100%;
 +
    max-width: none;
 +
    margin-left: 0;
 +
    margin-right: 0;
 +
    margin-top: 2rem;
 +
    padding-top: 3rem;
 +
    padding-bottom: 3rem;
 +
    padding-left: 2rem;
 +
    padding-right: 2rem;
 +
}
 +
#HQ_page .row img{
 +
    padding-top:3.8rem;
 +
}
 +
 +
#HQ_page #link2 {
 +
    background-color: #f5f5f5;
 +
}
 +
 +
#HQ_page #link2 h2{
 +
    margin-top:1rem;
 +
}
 +
 +
#HQ_page #link3 h2{
 +
    margin-top:2rem;
 +
}
 +
 +
#HQ_page #link4 {
 +
    background-color: #f5f5f5;
 +
}
 +
 +
#HQ_page #link5 h2{
 +
    margin-top:6rem;
 +
}
 +
 +
#HQ_page #link6 {
 +
    background-color: #e0f2f1;
 +
}
 +
 +
#HQ_page .row h2{
 +
    font-family:'Raleway';
 +
}
 +
 +
#HQ_page .row p{
 +
    font-size:20px;
 +
    margin-right:5%;
 +
}
 +
 +
#HQ_page a.button{
 +
    display: inline-block;
 +
    text-align: center;
 +
    line-height: 1;
 +
    height:40px;
 +
    cursor: pointer;
 +
    -webkit-appearance: none;
 +
    transition: background-color .25s ease-out,color .25s ease-out;
 +
    vertical-align: middle;
 +
    border: 1px solid transparent;
 +
    border-radius: 0;
 +
    padding: .85em 1em;
 +
    margin: 0 0 1rem;
 +
    font-size: .9rem;
 +
    background-color: #2199e8;
 +
    color: #fefefe;
 +
}
 +
 +
#HQ_page footer {
 +
    width: 100%;
 +
    max-width: none;
 +
    margin-left: 0;
 +
    margin-right: 0;
 +
    background-color: #f5f5f5;
 +
}
  
 
/*
 
/*
Line 51: Line 129:
 
}
 
}
  
−
nav.orbit-bullets {
+
 
−
     transform: translateY(-180%);
+
/*the style below is used to fix the igem bar*/
 +
 
 +
div#content {
 +
     width: 100%;
 +
    margin: -20px 0 0 0;
 +
    padding: 0;
 
}
 
}
  
−
div#content{
+
div#top_title {
−
     width:100%;
+
     display: none;
−
    margin:-20px 0 0 0;
+
−
    padding:0;
+
 
}
 
}
  
−
div#top_title{
+
#top_menu_under{
−
     display:none;
+
     height:16px;
 
}
 
}
  
−
#top_menu_inside #bars_item{
+
#top_menu_inside #bars_item {
 
     left: auto;
 
     left: auto;
 
     right: calc(1% + 170px);
 
     right: calc(1% + 170px);
 
}
 
}
  
−
div#sideMenu{
+
div#sideMenu {
−
     display:none;
+
     display: none;
 
     left: auto;
 
     left: auto;
 
     right: 1%;
 
     right: 1%;
−
     box-sizing:content-box;
+
     box-sizing: content-box;
−
     line-height:1.5em;
+
     line-height: 1.5em;
 
}
 
}
  
−
div#top_menu_14{
+
div#top_menu_14 {
−
     box-sizing:content-box;
+
     box-sizing: content-box;
−
     line-height:1em;
+
     line-height: 1em;
 
}
 
}
  
−
div#top_menu_14 ul{
+
div#top_menu_14 ul {
−
     line-height:1.45em;
+
     line-height: 1.45em;
 
}
 
}
  
−
div#top_menu_14 #user_item{
+
div#top_menu_14 #user_item {
−
     padding-top:3px;
+
     padding-top: 3px;
 
}
 
}
  
−
div#top_menu_14 #bars_item>img{
+
div#top_menu_14 #bars_item>img {
−
     padding-top:.5px;
+
     padding-top: .5px;
 
}
 
}
  
−
div#sideMenu div.mainMenu_toggle{
+
div#sideMenu div.mainMenu_toggle {
−
     padding-top:12px;
+
     padding-top: 12px;
−
     padding-bottom:11px;
+
     padding-bottom: 11px;
 
}
 
}
  
−
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{
+
.mw-content-ltr ul,
−
     margin:0;
+
.mw-content-rtl .mw-content-ltr ul {
 +
     margin: 0;
 
}
 
}
 +
 +
#HQ_page {
 +
    width: 100%;
 +
    font-size: 1.2em;
 +
}
 +
 +
#HQ_page a:link {
 +
    text-decoration: none;
 +
}
 +
 +
#HQ_page a:hover {
 +
    text-decoration: none;
 +
}
 +
 +
 +
/*end of style to fix igem bar*/
  
 
div.large-6 {
 
div.large-6 {
Line 121: Line 219:
  
 
ul.dropdown.menu {
 
ul.dropdown.menu {
−
    font-size: .9em;
 
 
     font-weight: bold;
 
     font-weight: bold;
 +
    letter-spacing: .2px;
 
}
 
}
  
 
ul.dropdown.menu a:link {
 
ul.dropdown.menu a:link {
−
     color: #eee;
+
     color: white;
 
}
 
}
  
 
ul.dropdown.menu a:visited {
 
ul.dropdown.menu a:visited {
−
     color: #eee;
+
    color: white;
 +
}
 +
 
 +
ul.is-dropdown-submenu.menu>li>a:link {
 +
     color: #333;
 +
}
 +
 
 +
ul.is-dropdown-submenu.menu>li>a:visited {
 +
    color: #333;
 
}
 
}
  
Line 139: Line 245:
 
ul.is-dropdown-submenu.menu {
 
ul.is-dropdown-submenu.menu {
 
     border: none;
 
     border: none;
−
     background-color: #2c3840;
+
     background-color: white;
 +
    min-width: 180px;
 +
    margin-top: 10px;
 +
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 3px rgba(0, 0, 0, 0.24);
 
}
 
}
  
 
ul.is-dropdown-submenu.menu>li {
 
ul.is-dropdown-submenu.menu>li {
 
     padding: 2px 0;
 
     padding: 2px 0;
−
     background-color: #2c3840;
+
     margin-bottom: 5px;
 +
    margin-top: 5px;
 
}
 
}
  
−
figure#overlay {
+
ul.is-dropdown-submenu.menu>li:hover {
−
     position: fixed;
+
     background-color: #03a9f4;
−
    z-index: 10;
+
}
−
     display: block;
+
 
−
    visibility: hidden;
+
ul.is-dropdown-submenu.menu>li>a:hover {
−
    width: 100%;
+
     color: white;
−
    height: 100%;
+
}
−
     margin: 0;
+
 
−
     opacity: 0;
+
ul.menu li.menu-text a {
−
    background: rgba(29, 29, 31, .6);
+
     color: white;
 +
     text-transform: uppercase;
 
}
 
}
  
Line 175: Line 286:
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
−
    opacity: .8;
 
 
}
 
}
  
Line 183: Line 293:
  
 
.menu>li {
 
.menu>li {
−
     padding: 10px 5px;
+
     padding: 16px 5px;
−
}
+
−
 
+
−
#HQ_page{
+
−
    width: 100%;
+
 
}
 
}
  
Line 193: Line 299:
 
     position: absolute;
 
     position: absolute;
 
     z-index: 20;
 
     z-index: 20;
−
     top: 0;
+
     top: 5px;
 
     width: 100%;
 
     width: 100%;
−
     background-color: #2c3840;
+
     background-color: #03A9F4;
 
}
 
}
  
−
#navbar-global ul>li:hover {
+
#navbar-global>div>ul>li>a {
−
     background-color: #41525e;
+
    transition: color .25s cubic-bezier(.75, 0, .1, 1);
 +
}
 +
 
 +
#navbar-global>div>ul>li:hover {
 +
     background-color: #9c27b0;
 +
}
 +
 
 +
#navbar-global>div>ul>li:hover>a {
 +
    opacity: .9;
 +
}
 +
 
 +
#navbar-global-mobile li {
 +
    margin: 0;
 +
    padding: 0;
 +
}
 +
 
 +
.title-bar {
 +
    background-color: #0288D1;
 +
}
 +
 
 +
#navbar-global-mobile ul {
 +
    background-color: #0288D1;
 +
}
 +
 
 +
#navbar-global-mobile li {
 +
    background-color: #0288D1;
 +
    color: white;
 +
}
 +
 
 +
#navbar-global-mobile li a::after {
 +
    border-color: #B3E5FC transparent transparent;
 +
}
 +
 
 +
#navbar-global-mobile li>a:link {
 +
    color: white;
 +
}
 +
 
 +
#navbar-global-mobile li>a:visited {
 +
    color: white;
 
}
 
}
  
 
nav#navbar-head {
 
nav#navbar-head {
−
    position: absolute;
 
−
    bottom: 0;
 
 
     width: 100%;
 
     width: 100%;
 
     transition: all .25s cubic-bezier(.75, 0, .1, 1);
 
     transition: all .25s cubic-bezier(.75, 0, .1, 1);
Line 225: Line 367:
  
 
#navbar-head>.top-bar-right li {
 
#navbar-head>.top-bar-right li {
−
     transition: color .1s ease-in-out;
+
     transition: color .2s ease-in-out;
 
     color: #2199e8;
 
     color: #2199e8;
 
}
 
}
Line 250: Line 392:
 
     position: relative;
 
     position: relative;
 
     padding: calc(.7rem + 15px) calc(1rem + 20px);
 
     padding: calc(.7rem + 15px) calc(1rem + 20px);
−
     padding-top: calc(.7rem + 30px)
+
     padding-top: calc(.7rem + 30px);
 
}
 
}
  
−
#navbar-head.navbar-head-pinned a::after {
+
#navbar-head a:hover {
−
     position: absolute;
+
     color: white;
−
    right: 100%;
+
−
    bottom: 0;
+
−
    width: 0;
+
−
    height: .25em;
+
−
    content: '';
+
−
    transition: all .15s ease-in-out;
+
−
    background-color: #41525e;
+
 
}
 
}
  
−
#navbar-head.navbar-head-pinned a.active::after {
+
#navbar-head.is-stuck a {
−
     right: 0;
+
     color: #0288d1;
−
     width: 100%;
+
     transition: all .3s ease-in-out;
 
}
 
}
  
−
 
+
#navbar-head.is-stuck a:hover {
−
/*
+
     background: #757575;
−
#navbar-head a::before {
+
     color: white;
−
    content: '';
+
−
    position: absolute;
+
−
    bottom: 0;
+
−
    right: 50%;
+
−
    height: .25em;
+
−
     background-color: #41525e;
+
−
     width: 0;
+
−
    transition: all .15s ease-in-out;
+
 
}
 
}
  
−
#navbar-head a::after {
+
#navbar-head.is-stuck a:active {
−
     content: '';
+
     background: rgba(0, 0, 0, .7);
−
    position: absolute;
+
     color: white;
−
    bottom: 0;
+
−
    left: 50%;
+
−
    height: .25em;
+
−
     background-color: #41525e;
+
−
    width: 0;
+
−
    transition: all .15s ease-in-out;
+
 
}
 
}
  
−
#navbar-head a.active::before {
+
div#sticky-wrapper {
−
     width: 50%;
+
     position: relative;
−
     /*box-shadow: 0 -.2em 0 #41525e inset;
+
     top: -84.4px;
 +
    z-index: 20;
 
}
 
}
−
 
−
#navbar-head a.active::after {
 
−
    width: 50%;
 
−
    /*box-shadow: 0 -.2em 0 #41525e inset;
 
−
}*/
 
  
 
#navbar-head ul {
 
#navbar-head ul {
Line 307: Line 424:
 
}
 
}
  
−
nav#navbar-head.navbar-head-pinned {
+
nav#navbar-head.is-stuck {
 
     background-color: white;
 
     background-color: white;
 
     box-shadow: 0 0 8px rgba(0, 0, 0, .4);
 
     box-shadow: 0 0 8px rgba(0, 0, 0, .4);
 
}
 
}
  
−
nav#navbar-head.navbar-head-pinned li#nav-top {
+
nav#navbar-head.is-stuck li#nav-top {
 
     visibility: visible;
 
     visibility: visible;
 
}
 
}
  
−
#navbar-head.navbar-head-pinned>div.top-bar-right>ul.menu>li>h3 {
+
#navbar-head.is-stuck>div.top-bar-right>ul.menu>li>h3 {
 
     color: #333;
 
     color: #333;
 
}
 
}
  
−
#navbar-head.navbar-head-pinned>div.top-bar-right>ul.menu>li>h3:hover {
+
#navbar-head.is-stuck>div.top-bar-right>ul.menu>li>h3:hover {
 
     color: #aaa;
 
     color: #aaa;
 
}
 
}
  
−
#nav-sidebar-content {
+
button.orbit-next,
−
     position: fixed;
+
button.orbit-previous {
−
    z-index: 15;
+
     opacity: 0;
−
    top: 0;
+
     transition: all .2s ease-in-out;
−
     right: -300px;
+
−
    width: 300px;
+
−
    height: 100%;
+
−
    background-color: rgba(1, 1, 1, .8);
+
 
}
 
}
  
−
#nav-sidebar-content>ul {
+
ul.orbit-container:hover button.orbit-next {
−
    font-size: 1.4em;
+
−
    height: 85%;
+
−
    margin-top: 50px;
+
−
    list-style: none;
+
 
     opacity: 1;
 
     opacity: 1;
 
}
 
}
  
−
#nav-sidebar-content>ul>li {
+
ul.orbit-container:hover button.orbit-previous {
−
    height: 13%;
+
−
    margin-top: 0;
+
−
}
+
−
 
+
−
#nav-sidebar-content>ul>li>a {
+
−
    text-decoration: none;
+
−
    color: #fff;
+
−
}
+
−
 
+
−
#nav-sidebar-content>ul>li>a:hover {
+
−
    transition: color .3s ease;
+
−
    color: #9b9baf;
+
−
}
+
−
 
+
−
#nav-sidebar {
+
−
    position: fixed;
+
−
    z-index: 16;
+
−
    top: 17px;
+
−
    right: 5%;
+
−
    width: 30px;
+
−
    height: 25px;
+
−
    cursor: pointer;
+
−
    -webkit-transition: .5s ease-in-out;
+
−
    -moz-transition: .5s ease-in-out;
+
−
    -o-transition: .5s ease-in-out;
+
−
    transition: .5s ease-in-out;
+
−
    -webkit-transform: rotate(0deg);
+
−
    -moz-transform: rotate(0deg);
+
−
    -o-transform: rotate(0deg);
+
−
    transform: rotate(0deg);
+
−
}
+
−
 
+
−
#nav-sidebar span {
+
−
    position: absolute;
+
−
    left: 0;
+
−
    display: block;
+
−
    width: 100%;
+
−
    height: 3px;
+
−
    -webkit-transition: .25s ease-in-out;
+
−
    -moz-transition: .25s ease-in-out;
+
−
    -o-transition: .25s ease-in-out;
+
−
    transition: .25s ease-in-out;
+
−
    -webkit-transform: rotate(0deg);
+
−
    -moz-transform: rotate(0deg);
+
−
    -o-transform: rotate(0deg);
+
−
    transform: rotate(0deg);
+
 
     opacity: 1;
 
     opacity: 1;
−
    border-radius: 3px;
 
−
    background: #fff;
 
 
}
 
}
  
−
#nav-sidebar.nav-sidebar-toggle span {
+
button.orbit-next:focus {
−
     background-color: #666;
+
     background: transparent;
 
}
 
}
  
−
#nav-sidebar span:nth-child(1) {
+
button.orbit-next:hover:focus {
−
     top: 0;
+
     background: hsla(0, 0%, 4%, .5)
 
}
 
}
  
−
#nav-sidebar span:nth-child(2),
+
button.orbit-previous:focus {
−
#nav-sidebar span:nth-child(3) {
+
    background: transparent;
−
     top: 9px;
+
     ;
 
}
 
}
  
−
#nav-sidebar span:nth-child(4) {
+
button.orbit-previous:hover:focus {
−
     top: 18px;
+
     background: hsla(0, 0%, 4%, .5);
 
}
 
}
  
−
#nav-sidebar.open span:nth-child(1) {
+
.animation>* {
−
     top: 9px;
+
     visibility: hidden;
−
    left: 50%;
+
−
    width: 0;
+
 
}
 
}
  
−
#nav-sidebar.open span:nth-child(2) {
+
.orbit-image {
−
     -webkit-transform: rotate(45deg);
+
     height: calc(100vh - 13px);
−
    -moz-transform: rotate(45deg);
+
−
    -o-transform: rotate(45deg);
+
−
    transform: rotate(45deg);
+
 
}
 
}
  
−
#nav-sidebar.open span:nth-child(3) {
+
section {
−
     -webkit-transform: rotate(-45deg);
+
     overflow: hidden;
−
    -moz-transform: rotate(-45deg);
+
−
    -o-transform: rotate(-45deg);
+
−
    transform: rotate(-45deg);
+
 
}
 
}
  
−
#nav-sidebar.open span:nth-child(4) {
+
@media(min-width: 1024px) {
−
     top: 9px;
+
     section {
−
     left: 50%;
+
        margin-top: -50px;
−
    width: 0;
+
     }
−
}
+
−
 
+
−
@media(min-width: 768px) {
+
 
     .content-container {
 
     .content-container {
 
         padding-top: 25px;
 
         padding-top: 25px;
 
         padding-bottom: 25px;
 
         padding-bottom: 25px;
 
     }
 
     }
−
     #main-img-container {
+
     .orbit+div h2 {
 +
        padding-top: 50px;
 +
    }
 +
}
 +
 
 +
@media(min-width: 768px) {
 +
  /*  #main-img-container {
 
         width: 100%;
 
         width: 100%;
−
         height: 100vh;
+
         height: calc(100vh - 14px);
 
     }
 
     }
 +
  */
 
     .img-fixed-position {
 
     .img-fixed-position {
 
         min-height: 500px;
 
         min-height: 500px;
Line 451: Line 508:
 
         background-attachment: fixed;
 
         background-attachment: fixed;
 
         background-size: cover;
 
         background-size: cover;
−
    }
 
−
}
 
−
 
−
@media screen and (-ms-high-contrast: active),
 
−
(-ms-high-contrast: none) {
 
−
    .scrollmagic-pin-spacer {
 
−
        bottom: 68px !important;
 
 
     }
 
     }
 
}
 
}

Latest revision as of 03:49, 20 October 2016

html, body { 

   position: relative;
   width: 100%;
   height: 100%;
   font-family: Roboto, Arial, Helvetica, sans-serif;

}

h2 { 

   padding-top: 50px;
   padding-bottom: 50px;

}

.orbit+div h2 { 

   padding-top: 20px;

}

div.inner-text-container { 

   position: relative;

}

div.inner-text-container>img { 

   width: 100%;

}

  1. globalWrapper {
   padding-bottom: 0;

}

  1. HQ_page div.row{
   width: 100%;
   max-width: none;
   margin-left: 0;
   margin-right: 0;
   margin-top: 2rem;
   padding-top: 3rem;
   padding-bottom: 3rem;
   padding-left: 2rem;
   padding-right: 2rem;

}

  1. HQ_page .row img{
   padding-top:3.8rem;

}

  1. HQ_page #link2 {
   background-color: #f5f5f5;

}

  1. HQ_page #link2 h2{
   margin-top:1rem;

}

  1. HQ_page #link3 h2{
   margin-top:2rem;

}

  1. HQ_page #link4 {
   background-color: #f5f5f5;

}

  1. HQ_page #link5 h2{
   margin-top:6rem;

}

  1. HQ_page #link6 {
   background-color: #e0f2f1;

}

  1. HQ_page .row h2{
   font-family:'Raleway';

}

  1. HQ_page .row p{
   font-size:20px;
   margin-right:5%;

}

  1. HQ_page a.button{
   display: inline-block;
   text-align: center;
   line-height: 1;
   height:40px;
   cursor: pointer;
   -webkit-appearance: none;
   transition: background-color .25s ease-out,color .25s ease-out;
   vertical-align: middle;
   border: 1px solid transparent;
   border-radius: 0;
   padding: .85em 1em;
   margin: 0 0 1rem;
   font-size: .9rem;
   background-color: #2199e8;
   color: #fefefe;

}

  1. HQ_page footer {
   width: 100%;
   max-width: none;
   margin-left: 0;
   margin-right: 0;
   background-color: #f5f5f5;

}

/* div.inner-text-container:hover>img { 

   -webkit-filter: brightness(.5);
   filter: brightness(.5);
   transition: all .3s ease-in-out;

}

div.inner-text-container:hover>h3 { 

   top: 43%;
   opacity: 1;

}

  • /

h3.inner-text { 

   position: absolute;
   top: 120%;
   left: 35%;
   opacity: 0;
   /*
   transition: all .38s cubic-bezier(.75, 0, .1, 1);
   color: white;*/

}

nav.top-bar ul { 

   background-color: transparent;

}


/*the style below is used to fix the igem bar*/

div#content { 

   width: 100%;
   margin: -20px 0 0 0;
   padding: 0;

}

div#top_title { 

   display: none;

}

  1. top_menu_under{
   height:16px;

}

  1. top_menu_inside #bars_item {
   left: auto;
   right: calc(1% + 170px);

}

div#sideMenu { 

   display: none;
   left: auto;
   right: 1%;
   box-sizing: content-box;
   line-height: 1.5em;

}

div#top_menu_14 { 

   box-sizing: content-box;
   line-height: 1em;

}

div#top_menu_14 ul { 

   line-height: 1.45em;

}

div#top_menu_14 #user_item { 

   padding-top: 3px;

}

div#top_menu_14 #bars_item>img { 

   padding-top: .5px;

}

div#sideMenu div.mainMenu_toggle { 

   padding-top: 12px;
   padding-bottom: 11px;

}

.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { 

   margin: 0;

}

  1. HQ_page {
   width: 100%;
   font-size: 1.2em;

}

  1. HQ_page a:link {
   text-decoration: none;

}

  1. HQ_page a:hover {
   text-decoration: none;

}


/*end of style to fix igem bar*/

div.large-6 { 

   font-size: .9em;

}

div.large-6>img { 

   padding-top: 5px;

}

div.sticky { 

   z-index: 15;

}

div.sticky.is-stuck { 

   z-index: 15;

}

ul.dropdown.menu { 

   font-weight: bold;
   letter-spacing: .2px;

}

ul.dropdown.menu a:link { 

   color: white;

}

ul.dropdown.menu a:visited { 

   color: white;

}

ul.is-dropdown-submenu.menu>li>a:link { 

   color: #333;

}

ul.is-dropdown-submenu.menu>li>a:visited { 

   color: #333;

}

ul.dropdown.menu>li.is-dropdown-submenu-parent>a::after { 

   content: none;

}

ul.is-dropdown-submenu.menu { 

   border: none;
   background-color: white;
   min-width: 180px;
   margin-top: 10px;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 3px rgba(0, 0, 0, 0.24);

}

ul.is-dropdown-submenu.menu>li { 

   padding: 2px 0;
   margin-bottom: 5px;
   margin-top: 5px;

}

ul.is-dropdown-submenu.menu>li:hover { 

   background-color: #03a9f4;

}

ul.is-dropdown-submenu.menu>li>a:hover { 

   color: white;

}

ul.menu li.menu-text a { 

   color: white;
   text-transform: uppercase;

}

.img-fixed-position { 

   height: 169px;
   margin-top: 10px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100%;

}

  1. main-img-container {
   position: relative;
   z-index: 9;

}

  1. main-img {
   width: 100%;
   height: 100%;

}

.top-bar { 

   padding: 0;

}

.menu>li { 

   padding: 16px 5px;

}

  1. navbar-global {
   position: absolute;
   z-index: 20;
   top: 5px;
   width: 100%;
   background-color: #03A9F4;

}

  1. navbar-global>div>ul>li>a {
   transition: color .25s cubic-bezier(.75, 0, .1, 1);

}

  1. navbar-global>div>ul>li:hover {
   background-color: #9c27b0;

}

  1. navbar-global>div>ul>li:hover>a {
   opacity: .9;

}

  1. navbar-global-mobile li {
   margin: 0;
   padding: 0;

}

.title-bar { 

   background-color: #0288D1;

}

  1. navbar-global-mobile ul {
   background-color: #0288D1;

}

  1. navbar-global-mobile li {
   background-color: #0288D1;
   color: white;

}

  1. navbar-global-mobile li a::after {
   border-color: #B3E5FC transparent transparent;

}

  1. navbar-global-mobile li>a:link {
   color: white;

}

  1. navbar-global-mobile li>a:visited {
   color: white;

}

nav#navbar-head { 

   width: 100%;
   transition: all .25s cubic-bezier(.75, 0, .1, 1);
   background-color: transparent;

}

  1. navbar-head h3 {
   font-size: 1rem;
   margin-bottom: 0;
   padding: .7rem 1rem;

}

  1. navbar-head #nav-top {
   visibility: hidden;

}

  1. navbar-head>div.top-bar-right {
   padding-right: 30px;

}

  1. navbar-head>.top-bar-right li {
   transition: color .2s ease-in-out;
   color: #2199e8;

}

  1. navbar-head>.top-bar-right li:hover {
   color: #ddd;

}

  1. navbar-head>.top-bar-title li>h3 {
   font-weight: bold;
   color: #aaa;

}

  1. navbar-head h3:hover {
   cursor: pointer;

}

  1. navbar-head li {
   padding: 0;
   background-color: transparent;

}

  1. navbar-head a {
   position: relative;
   padding: calc(.7rem + 15px) calc(1rem + 20px);
   padding-top: calc(.7rem + 30px);

}

  1. navbar-head a:hover {
   color: white;

}

  1. navbar-head.is-stuck a {
   color: #0288d1;
   transition: all .3s ease-in-out;

}

  1. navbar-head.is-stuck a:hover {
   background: #757575;
   color: white;

}

  1. navbar-head.is-stuck a:active {
   background: rgba(0, 0, 0, .7);
   color: white;

}

div#sticky-wrapper { 

   position: relative;
   top: -84.4px;
   z-index: 20;

}

  1. navbar-head ul {
   background-color: transparent;

}

nav#navbar-head.is-stuck { 

   background-color: white;
   box-shadow: 0 0 8px rgba(0, 0, 0, .4);

}

nav#navbar-head.is-stuck li#nav-top { 

   visibility: visible;

}

  1. navbar-head.is-stuck>div.top-bar-right>ul.menu>li>h3 {
   color: #333;

}

  1. navbar-head.is-stuck>div.top-bar-right>ul.menu>li>h3:hover {
   color: #aaa;

}

button.orbit-next, button.orbit-previous { 

   opacity: 0;
   transition: all .2s ease-in-out;

}

ul.orbit-container:hover button.orbit-next { 

   opacity: 1;

}

ul.orbit-container:hover button.orbit-previous { 

   opacity: 1;

}

button.orbit-next:focus { 

   background: transparent;

}

button.orbit-next:hover:focus { 

   background: hsla(0, 0%, 4%, .5)

}

button.orbit-previous:focus { 

   background: transparent;
   ;

}

button.orbit-previous:hover:focus { 

   background: hsla(0, 0%, 4%, .5);

}

.animation>* { 

   visibility: hidden;

}

.orbit-image { 

   height: calc(100vh - 13px);

}

section { 

   overflow: hidden;

}

@media(min-width: 1024px) { 

   section {
       margin-top: -50px;
   }
   .content-container {
       padding-top: 25px;
       padding-bottom: 25px;
   }
   .orbit+div h2 {
       padding-top: 50px;
   }

}

@media(min-width: 768px) { 

 /*  #main-img-container {
       width: 100%;
       height: calc(100vh - 14px);
   }
 */
   .img-fixed-position {
       min-height: 500px;
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-size: cover;
   }

}