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

Line 1: Line 1:
 +
html,
 +
body {
 +
    position: relative;
 +
    width: 100%;
 +
    height: 100%;
 +
}
  
−
div#content
+
body.disable-scroll {
−
{
+
    overflow: hidden;
−
width:100%;
+
−
padding:0;
+
−
margin:0 0 0 0;
+
 
}
 
}
−
div#top_title
+
 
−
{
+
h2 {
−
display:none;
+
    padding-top: 50px;
 +
    padding-bottom: 50px;
 
}
 
}
  
−
top_menu_inside #bars_item
+
div.inner-text-container {
−
{
+
    position: relative;
−
left: auto;
+
−
right: calc(1% + 170px);
+
 
}
 
}
  
−
div#sideMenu
+
div.inner-text-container>img {
−
{
+
    width: 100%;
−
display:none;
+
−
left: auto;
+
−
right: 1%;
+
−
box-sizing:content-box;
+
−
line-height:1.5em;
+
 
}
 
}
  
−
div#top_menu_14
+
 
−
{
+
/*
−
box-sizing:content-box;
+
div.inner-text-container:hover>img {
−
line-height:1em;
+
    -webkit-filter: brightness(.5);
 +
    filter: brightness(.5);
 +
    transition: all .3s ease-in-out;
 
}
 
}
  
−
div#top_menu_14 ul
+
div.inner-text-container:hover>h3 {
−
{
+
    top: 43%;
−
line-height:1.45em;
+
    opacity: 1;
 
}
 
}
 +
*/
  
−
div#top_menu_14 #user_item
+
h3.inner-text {
−
{
+
    position: absolute;
−
padding-top:3px;
+
    top: 120%;
 +
    left: 35%;
 +
    opacity: 0;
 +
    /*
 +
    transition: all .38s cubic-bezier(.75, 0, .1, 1);
 +
    color: white;*/
 
}
 
}
  
−
div#top_menu_14 #bars_item > img
+
nav.top-bar ul {
−
{
+
    background-color: transparent;
−
padding-top:.5px;
+
 
}
 
}
  
−
div#sideMenu div.mainMenu_toggle
+
nav.orbit-bullets {
−
{
+
    transform: translateY(-180%);
−
padding-top:12px;
+
−
padding-bottom:11px;
+
 
}
 
}
  
−
div#sideMenu ul li
+
 
−
{
+
/*the style below is used to fix the igem bar*/
−
display:inline-block;
+
 
−
margin-bottom:-6px !important;
+
div#content{
 +
    width:100%;
 +
    margin:-20px 0 0 0;
 +
    padding:0;
 
}
 
}
  
−
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul
+
div#top_title{
−
{
+
    display:none;
−
margin:0;
+
 
}
 
}
  
−
*
+
#top_menu_inside #bars_item{
−
{
+
    left: auto;
−
font-family:Helvetica,"Century Gothic",Consolas,sans-serif !important;
+
    right: calc(1% + 170px);
 
}
 
}
  
−
a:hover
+
div#sideMenu{
−
{
+
    display:none;
−
text-decoration:none;
+
    left: auto;
 +
    right: 1%;
 +
    box-sizing:content-box;
 +
    line-height:1.5em;
 
}
 
}
  
−
a:focus
+
div#top_menu_14{
−
{
+
    box-sizing:content-box;
−
text-decoration:none;
+
    line-height:1em;
 
}
 
}
  
−
.row
+
div#top_menu_14 ul{
−
{
+
    line-height:1.45em;
−
max-width:none !important;
+
 
}
 
}
  
−
#mw-content-text
+
div#top_menu_14 #user_item{
−
{
+
    padding-top:3px;
−
width:100%;
+
−
clear:both;
+
−
margin:auto;
+
−
background-image:url("../img/a2.jpg");
+
 
}
 
}
  
−
#mw-content-text > .ar0
+
div#top_menu_14 #bars_item>img{
−
{
+
    padding-top:.5px;
−
width:75%;
+
−
margin:auto;
+
−
padding-bottom:15px;
+
−
border-radius:6px;
+
−
background-color:rgba(255,255,255,0.78);
+
 
}
 
}
  
−
#mw-content-text > .ar0 > .ar0
+
div#sideMenu div.mainMenu_toggle{
−
{
+
    padding-top:12px;
−
text-align:center;
+
    padding-bottom:11px;
−
height:150px;
+
−
width:100%;
+
 
}
 
}
  
−
#mw-content-text > .ar0 > .ar1
+
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{
−
{
+
    margin:0;
−
width:90%;
+
}
−
box-shadow:0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+
 
−
margin-top:20px;
+
/*end of style to fix igem bar*/
−
margin-left:auto;
+
 
−
margin-right:auto;
+
 
 +
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-size: .9em;
 +
    font-weight: bold;
 +
}
 +
 
 +
ul.dropdown.menu a:link {
 +
    color: #eee;
 +
}
 +
 
 +
ul.dropdown.menu a:visited {
 +
    color: #eee;
 +
}
 +
 
 +
ul.dropdown.menu>li.is-dropdown-submenu-parent>a::after {
 +
    content: none;
 +
}
 +
 
 +
ul.is-dropdown-submenu.menu {
 +
    border: none;
 +
    background-color: #2c3840;
 +
}
 +
 
 +
ul.is-dropdown-submenu.menu>li {
 +
    padding: 2px 0;
 +
    background-color: #2c3840;
 +
}
 +
 
 +
figure#overlay {
 +
    position: fixed;
 +
    z-index: 10;
 +
    display: block;
 +
    visibility: hidden;
 +
    width: 100%;
 +
    height: 100%;
 +
    margin: 0;
 +
    opacity: 0;
 +
    background: rgba(29, 29, 31, .6);
 +
}
 +
 
 +
.img-fixed-position {
 +
    height: 169px;
 +
    margin-top: 10px;
 +
    background-repeat: no-repeat;
 +
    background-position: center;
 +
    background-size: 100%;
 +
}
 +
 
 +
#main-img-container {
 +
    position: relative;
 +
    z-index: 9;
 +
}
 +
 
 +
#main-img {
 +
    width: 100%;
 +
    height: 100%;
 +
    opacity: .8;
 +
}
 +
 
 +
.top-bar {
 +
    padding: 0;
 +
}
 +
 
 +
.menu>li {
 +
    padding: 10px 5px;
 +
}
 +
 
 +
#HQ_page{
 +
    width: 100%;
 +
    font-size:1.2em;
 +
}
 +
 
 +
#HQ_page a:link{
 +
    text-decoration:none;
 +
}
 +
 
 +
#HQ_page a:hover{
 +
    text-decoration:none;
 +
}
 +
 
 +
#navbar-global {
 +
    position: absolute;
 +
    z-index: 20;
 +
    top: 0;
 +
    width: 100%;
 +
    background-color: #2c3840;
 +
}
 +
 
 +
#navbar-global ul>li:hover {
 +
    background-color: #41525e;
 +
}
 +
 
 +
nav#navbar-head {
 +
    position: absolute;
 +
    bottom: 0;
 +
    width: 100%;
 +
    transition: all .25s cubic-bezier(.75, 0, .1, 1);
 +
    background-color: transparent;
 +
}
 +
 
 +
#navbar-head h3 {
 +
    font-size: 1rem;
 +
    margin-bottom: 0;
 +
    padding: .7rem 1rem;
 +
}
 +
 
 +
#navbar-head #nav-top {
 +
    visibility: hidden;
 +
}
 +
 
 +
#navbar-head>div.top-bar-right {
 +
    padding-right: 30px;
 +
}
 +
 
 +
#navbar-head>.top-bar-right li {
 +
    transition: color .1s ease-in-out;
 +
    color: #2199e8;
 +
}
 +
 
 +
#navbar-head>.top-bar-right li:hover {
 +
    color: #ddd;
 +
}
 +
 
 +
#navbar-head>.top-bar-title li>h3 {
 +
    font-weight: bold;
 +
    color: #aaa;
 +
}
 +
 
 +
#navbar-head h3:hover {
 +
    cursor: pointer;
 +
}
 +
 
 +
#navbar-head li {
 +
    padding: 0;
 +
    background-color: transparent;
 +
}
 +
 
 +
#navbar-head a {
 +
    position: relative;
 +
    padding: calc(.7rem + 15px) calc(1rem + 20px);
 +
    padding-top: calc(.7rem + 30px)
 +
}
 +
 
 +
 
 +
#navbar-head.navbar-head-pinned a {
 +
    transition: all .3s ease-in-out;
 +
}
 +
 
 +
#navbar-head.navbar-head-pinned a.active {
 +
    box-shadow: 0 -.25em 0 #41525e inset;
 +
}
 +
 
 +
/*
 +
#navbar-head.navbar-head-pinned a::after {
 +
    position: absolute;
 +
    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 {
 +
    right: 0;
 +
    width: 100%;
 +
}
 +
 
 +
#navbar-head a::before {
 +
    content: '';
 +
    position: absolute;
 +
    bottom: 0;
 +
    right: 50%;
 +
    height: .25em;
 +
    background-color: #41525e;
 +
    width: 0;
 +
    transition: all .15s ease-in-out;
 +
}
 +
 
 +
#navbar-head a::after {
 +
    content: '';
 +
    position: absolute;
 +
    bottom: 0;
 +
    left: 50%;
 +
    height: .25em;
 +
    background-color: #41525e;
 +
    width: 0;
 +
    transition: all .15s ease-in-out;
 +
}
 +
 
 +
#navbar-head a.active::before {
 +
    width: 50%;
 +
    /*box-shadow: 0 -.2em 0 #41525e inset;
 +
}
 +
 
 +
#navbar-head a.active::after {
 +
    width: 50%;
 +
    /*box-shadow: 0 -.2em 0 #41525e inset;
 +
}*/
 +
 
 +
#navbar-head ul {
 +
    background-color: transparent;
 
}
 
}
  
−
#mw-content-text > .ar0 > .ar1 > *
+
nav#navbar-head.navbar-head-pinned {
−
{
+
    background-color: white;
−
width:12.5%;
+
    box-shadow: 0 0 8px rgba(0, 0, 0, .4);
−
display:inline-block;
+
−
height:50px;
+
−
line-height:50px;
+
−
text-align:center;
+
−
color:rgb(255,255,255);
+
−
font-size:15px;
+
 
}
 
}
  
−
#mw-content-text > .ar0 > .ar1 > .ar0
+
nav#navbar-head.navbar-head-pinned li#nav-top {
−
{
+
    visibility: visible;
−
background-color:rgb(112,144,240);
+
 
}
 
}
  
−
#mw-content-text > .ar0 > .ar1 > .ar1
+
#navbar-head.navbar-head-pinned>div.top-bar-right>ul.menu>li>h3 {
−
{
+
    color: #333;
−
background-color:rgb(96,160,224);
+
 
}
 
}
  
−
#mw-content-text > .ar0 > .ar1 > .ar2
+
#navbar-head.navbar-head-pinned>div.top-bar-right>ul.menu>li>h3:hover {
−
{
+
    color: #aaa;
−
background-color:rgb(80,176,208);
+
 
}
 
}
  
−
#mw-content-text > .ar0 > .ar1 > .ar3
+
#nav-sidebar-content {
−
{
+
    position: fixed;
−
background-color:rgb(64,192,192);
+
    z-index: 15;
 +
    top: 0;
 +
    right: -300px;
 +
    width: 300px;
 +
    height: 100%;
 +
    background-color: rgba(1, 1, 1, .8);
 
}
 
}
  
−
#mw-content-text > .ar0 > .ar1 > .ar4
+
#nav-sidebar-content>ul {
−
{
+
    font-size: 1.4em;
−
background-color:rgb(48,208,176);
+
    height: 85%;
 +
    margin-top: 50px;
 +
    list-style: none;
 +
    opacity: 1;
 
}
 
}
  
−
#mw-content-text > .ar0 > .ar1 > .ar5
+
#nav-sidebar-content>ul>li {
−
{
+
    height: 13%;
−
background-color:rgb(32,224,160);
+
    margin-top: 0;
 
}
 
}
  
−
#mw-content-text > .ar0 > .ar1 > .ar6
+
#nav-sidebar-content>ul>li>a {
−
{
+
    text-decoration: none;
−
background-color:rgb(16,240,144);
+
    color: #fff;
 
}
 
}
  
−
#mw-content-text > .ar0 > .ar1 > .ar7
+
#nav-sidebar-content>ul>li>a:hover {
−
{
+
    transition: color .3s ease;
−
background-color:rgb(0,255,128);
+
    color: #9b9baf;
 
}
 
}
  
−
/* #navigation-bar = #mw-content-text > .ar0 > .ar2 */
+
#nav-sidebar {
−
#navigation-bar
+
    position: fixed;
−
{
+
    z-index: 16;
−
width:90%;
+
    top: 17px;
−
margin-top:30px;
+
    right: 5%;
−
margin-left:auto;
+
    width: 30px;
−
margin-right:auto;
+
    height: 25px;
−
padding-top:15px;
+
    cursor: pointer;
−
font-size:14px;
+
    -webkit-transition: .5s ease-in-out;
−
background-color:rgba(255,255,255,0);
+
    -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);
 
}
 
}
  
−
.navigation-bar-trans
+
#nav-sidebar span {
−
{
+
    position: absolute;
−
background-color:rgb(243,243,243) !important;
+
    left: 0;
−
background-image:none;
+
    display: block;
−
box-shadow:0 3px 6px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+
    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;
 +
    border-radius: 3px;
 +
    background: #fff;
 
}
 
}
  
−
.navigation-bar-trans > ul > li > a.active
+
#nav-sidebar.nav-sidebar-toggle span {
−
{
+
    background-color: #666;
−
box-shadow:0 -4px 0 rgba(128,128,232,1) inset;
+
 
}
 
}
  
−
#mw-content-text > .ar0 > .ar3
+
#nav-sidebar span:nth-child(1) {
−
{
+
    top: 0;
−
width:100%;
+
−
padding-left:5%;
+
−
padding-right:5%;
+
 
}
 
}
  
−
#mw-content-text > .ar0 > .ar3 > *
+
#nav-sidebar span:nth-child(2),
−
{
+
#nav-sidebar span:nth-child(3) {
−
width:90%;
+
    top: 9px;
−
margin-left:5%;
+
−
margin-right:5%;
+
−
margin-top:20px;
+
−
margin-bottom:40px;
+
−
margin-top:40px;
+
−
transition:all 0.2s cubic-bezier(0.25,0.8,0.25,1);
+
 
}
 
}
  
−
#mw-content-text > .ar0 > .ar3 h1
+
#nav-sidebar span:nth-child(4) {
−
{
+
    top: 18px;
−
font-size:32px;
+
−
font-weight: normal;
+
 
}
 
}
  
−
#mw-content-text > .ar0 > .ar3 p
+
#nav-sidebar.open span:nth-child(1) {
−
{
+
    top: 9px;
−
font-size:18px;
+
    left: 50%;
−
line-height:28px;
+
    width: 0;
−
margin-bottom:40px;
+
 
}
 
}
  
−
#mw-content-text > .ar0 > .ar3 img
+
#nav-sidebar.open span:nth-child(2) {
−
{
+
    -webkit-transform: rotate(45deg);
−
margin-top:32px;
+
    -moz-transform: rotate(45deg);
−
width:100%;
+
    -o-transform: rotate(45deg);
 +
    transform: rotate(45deg);
 
}
 
}
  
−
#mw-content-text > .ar1
+
#nav-sidebar.open span:nth-child(3) {
−
{
+
    -webkit-transform: rotate(-45deg);
−
height:400px;
+
    -moz-transform: rotate(-45deg);
−
width:100%;
+
    -o-transform: rotate(-45deg);
−
padding-top:25px;
+
    transform: rotate(-45deg);
−
border-top:1px solid rgb(0,0,0);
+
−
margin-top:60px;
+
−
background-color:rgba(255,255,255,0.95);
+
 
}
 
}
  
−
#mw-content-text > .ar1 > .ar0
+
#nav-sidebar.open span:nth-child(4) {
−
{
+
    top: 9px;
−
height:120px;
+
    left: 50%;
−
padding:5px 5px 5px 5px;
+
    width: 0;
−
color:rgb(255,255,255);
+
−
font-size:24px;
+
−
text-align:center;
+
 
}
 
}
  
−
#mw-content-text > .ar1 > .ar0 > img
+
@media(min-width: 768px) {
−
{
+
    .content-container {
−
width:100%;
+
        padding-top: 25px;
 +
        padding-bottom: 25px;
 +
    }
 +
    #main-img-container {
 +
        width: 100%;
 +
        height: 100vh;
 +
    }
 +
    .img-fixed-position {
 +
        min-height: 500px;
 +
        background-repeat: no-repeat;
 +
        background-attachment: fixed;
 +
        background-size: cover;
 +
    }
 
}
 
}
  
−
#mw-content-text > .ar1 > .ar1 > p
+
@media screen and (-ms-high-contrast: active),
−
{
+
(-ms-high-contrast: none) {
−
font-size:16px;
+
    .scrollmagic-pin-spacer {
 +
        bottom: 82.73px !important;
 +
    }
 
}
 
}

Revision as of 14:31, 9 October 2016

html, body { 

   position: relative;
   width: 100%;
   height: 100%;

}

body.disable-scroll { 

   overflow: hidden;

}

h2 { 

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

}

div.inner-text-container { 

   position: relative;

}

div.inner-text-container>img { 

   width: 100%;

}


/* 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;

}

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#top_title{ 

   display:none;

}

  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;

}

/*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-size: .9em;
   font-weight: bold;

}

ul.dropdown.menu a:link { 

   color: #eee;

}

ul.dropdown.menu a:visited { 

   color: #eee;

}

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

   content: none;

}

ul.is-dropdown-submenu.menu { 

   border: none;
   background-color: #2c3840;

}

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

   padding: 2px 0;
   background-color: #2c3840;

}

figure#overlay { 

   position: fixed;
   z-index: 10;
   display: block;
   visibility: hidden;
   width: 100%;
   height: 100%;
   margin: 0;
   opacity: 0;
   background: rgba(29, 29, 31, .6);

}

.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%;
   opacity: .8;

}

.top-bar { 

   padding: 0;

}

.menu>li { 

   padding: 10px 5px;

}

  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;

}

  1. navbar-global {
   position: absolute;
   z-index: 20;
   top: 0;
   width: 100%;
   background-color: #2c3840;

}

  1. navbar-global ul>li:hover {
   background-color: #41525e;

}

nav#navbar-head { 

   position: absolute;
   bottom: 0;
   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 .1s 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.navbar-head-pinned a {
   transition: all .3s ease-in-out;

}

  1. navbar-head.navbar-head-pinned a.active {
   box-shadow: 0 -.25em 0 #41525e inset;

}

/*

  1. navbar-head.navbar-head-pinned a::after {
   position: absolute;
   right: 100%;
   bottom: 0;
   width: 0;
   height: .25em;
   content: ;
   transition: all .15s ease-in-out;
   background-color: #41525e;

}

  1. navbar-head.navbar-head-pinned a.active::after {
   right: 0;
   width: 100%;

}

  1. navbar-head a::before {
   content: ;
   position: absolute;
   bottom: 0;
   right: 50%;
   height: .25em;
   background-color: #41525e;
   width: 0;
   transition: all .15s ease-in-out;

}

  1. navbar-head a::after {
   content: ;
   position: absolute;
   bottom: 0;
   left: 50%;
   height: .25em;
   background-color: #41525e;
   width: 0;
   transition: all .15s ease-in-out;

}

  1. navbar-head a.active::before {
   width: 50%;
   /*box-shadow: 0 -.2em 0 #41525e inset;

}

  1. navbar-head a.active::after {
   width: 50%;
   /*box-shadow: 0 -.2em 0 #41525e inset;

}*/

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

}

nav#navbar-head.navbar-head-pinned { 

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

}

nav#navbar-head.navbar-head-pinned li#nav-top { 

   visibility: visible;

}

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

}

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

}

  1. nav-sidebar-content {
   position: fixed;
   z-index: 15;
   top: 0;
   right: -300px;
   width: 300px;
   height: 100%;
   background-color: rgba(1, 1, 1, .8);

}

  1. nav-sidebar-content>ul {
   font-size: 1.4em;
   height: 85%;
   margin-top: 50px;
   list-style: none;
   opacity: 1;

}

  1. nav-sidebar-content>ul>li {
   height: 13%;
   margin-top: 0;

}

  1. nav-sidebar-content>ul>li>a {
   text-decoration: none;
   color: #fff;

}

  1. nav-sidebar-content>ul>li>a:hover {
   transition: color .3s ease;
   color: #9b9baf;

}

  1. 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);

}

  1. 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;
   border-radius: 3px;
   background: #fff;

}

  1. nav-sidebar.nav-sidebar-toggle span {
   background-color: #666;

}

  1. nav-sidebar span:nth-child(1) {
   top: 0;

}

  1. nav-sidebar span:nth-child(2),
  2. nav-sidebar span:nth-child(3) {
   top: 9px;

}

  1. nav-sidebar span:nth-child(4) {
   top: 18px;

}

  1. nav-sidebar.open span:nth-child(1) {
   top: 9px;
   left: 50%;
   width: 0;

}

  1. nav-sidebar.open span:nth-child(2) {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);

}

  1. nav-sidebar.open span:nth-child(3) {
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);

}

  1. nav-sidebar.open span:nth-child(4) {
   top: 9px;
   left: 50%;
   width: 0;

}

@media(min-width: 768px) { 

   .content-container {
       padding-top: 25px;
       padding-bottom: 25px;
   }
   #main-img-container {
       width: 100%;
       height: 100vh;
   }
   .img-fixed-position {
       min-height: 500px;
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-size: cover;
   }

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 

   .scrollmagic-pin-spacer {
       bottom: 82.73px !important;
   }

}