Team:NJU-China/CSS:header

/* ========================================================================== 

   4. HEADER
   ========================================================================= */
   /* grab cursor */

.ms-grab-cursor{cursor: url("NJU_China_iGEM_2017_grab.png"), move;} .ms-grabbing-cursor{cursor: url("NJU_China_iGEM_2017_grabbing.png"), move;}

  1. header-wrapper {
   width: 100%;
   position: fixed;
   top: 0;
   z-index: 1000;

} .ms-view{ 

   height:475px;

} .resize-header { 

   background-color: rgba(0,0,0,0.90);
   -webkit-animation: headerFadeIn 0.4s forwards;
   animation: headerFadeIn 0.4s forwards;

} @-webkit-keyframes headerFadeIn { 

   from { background-color: rgba(0,0,0,0.0); }
   to { background-color: rgba(0,0,0,0.90); }

} @keyframes headerFadeIn { 

   from { background-color: rgba(0,0,0,0.0); }
   to { background-color: rgba(0,0,0,0.90); }

} .resize-header .logo { 

   margin: 10px 0;

} .resize-header .logo img { 

   max-width: 100%;
   -webkit-animation: reduceLogo 0.1s forwards;
   animation: reduceLogo 0.1s forwards;

} @-webkit-keyframes reduceLogo { 

   from { max-width: 100%;}
   to { max-width: 60%; }

} @keyframes reduceLogo { 

   from { max-width: 100%;}
   to { max-width: 60%; }

} .resize-header #header .nav-left .pi-nav { 

   margin-top: 50px;
   -webkit-animation: reduceTopMargin 0.2s forwards;
   animation: reduceTopMargin 0.2s forwards;

} @-webkit-keyframes reduceTopMargin { 

   from { margin-top: 50px;}
   to { margin-top: 12px; }

} @keyframes reduceTopMargin { 

   from { margin-top: 50px;}
   to { margin-top: 12px; }

} .resize-header .navbar { 

   margin-bottom: 0;

} .header-inner .row, .main-nav .row { 

   margin-bottom: 0;

} .logo { 

   margin: 30px 0;

}

  1. header .nav-left .navbar-header {
   float: left;

}

  1. header .nav-left .pi-nav {
   float: left;
   margin-top: 50px;

}

  1. header .navbar-default .navbar-collapse,
  2. header .navbar-default .navbar-form {
   border: 0px solid transparent;

}

  1. header .navbar-default .navbar-nav > .open > a,
  2. header .navbar-default .navbar-nav > .open > a:hover,
  3. header .navbar-default .navbar-nav > .open > a:focus {
   background-color: transparent;

}

  1. header .navbar-collapse {
   padding: 0;
   float: right;

}

  1. header .navbar-default{
   background: none;
   border: 0px solid transparent;
   -webkit-box-shadow: none;
   box-shadow: none;

}

  1. header .navbar-nav.pi-nav > li > a {
   line-height: 25px;

}

  1. header .navbar-default .navbar-nav > li > a {
   border: none;
   font-family: 'Montserrat', Arial, sans-serif;
   font-size: 15px;
   text-transform: uppercase;
   color: #fff;
   margin: 0 4px;

}

  1. header .navbar-default .navbar-nav > .current-menu-item > a:before,
  2. header .navbar-default .navbar-nav > li>a:hover:before {
   position: absolute;
   font-family: 'FontAwesome';
   font-size: 6px;
   content: "♦";
   display: block;
   top: 16px;
   left: 0px;

}

  1. header .navbar-default .navbar-nav > li>a:hover:before {
   -webkit-animation: navItemMove 0.1s forwards;
   animation: navItemMove 0.1s forwards;

} @keyframes navItemMove { 

   from { opacity: 0; transform: translateX(20px); }
   to { opacity: 1; transform: translateX(0px); }

} @-webkit-keyframes navItemMove { 

   from { opacity: 0; -moz-transform: translateX(20px); }
   to { opacity: 1; -moz-transform: translateX(0px); }

}

  1. header .dropdown-menu > li > a {
   font-size: 14px;
   font-weight: 400;
   padding: 15px 40px 15px 25px;
   color: #A0A0A0;
   border-bottom: 1px solid #3C3C3C;

}

  1. header .dropdown-menu > li > a:hover,
  2. header .dropdown-menu > li > a:focus {
   background: #363636;
   background-color: #363636 !important;
   background-image: none;
   filter: none;

}

  1. header .dropdown-menu > li:last-child > a {
   border-bottom: none;

}

  1. header .dropdown.dropdown-submenu > a:after {
   position: absolute;
   font-family: 'FontAwesome';
   font-size: 12px;
   content: "\f0da";
   display: block;
   top: 50%;
   right: 25px;
   color: #A0A0A0;
   margin-top: -8px;
   -webkit-transition: all 0.2s ease 0s;
   -moz-transition: all 0.2s ease 0s;
   -o-transition: all 0.2s ease 0s;
   -ms-transition: all 0.2s ease 0s;
   transition: all 0.2s ease 0s;

}

  1. header .dropdown-menu {
   background: #252525;
   border: none;
   border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   min-width: 270px;
   padding: 0;
   -webkit-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
   box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);

}

  1. header .dropdown-menu > li > a .fa {
   margin-right: 15px;

}

/* ========================================================================== 

   4.1. MAIN NAVIGATION
   ========================================================================= */

.navbar-nav > li { 

   padding-bottom: 0;

}

.dropdown-submenu { 

   position: relative;

}

  1. header .dropdown-submenu > .dropdown-menu{
   top: -2px;
   left: 100%;
   -webkit-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
   box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);

}

  1. header .dropdown-submenu > .dropdown-menu {
   background-color: #363636 !important;

}

  1. header .dropdown-submenu > .dropdown-menu > li > a:hover {
   background-color: #252525 !important;

} .dropdown-submenu:hover > .dropdown-menu { 

   display: block;

} .dropdown.dropdown-submenu > a { 

   position: relative;

}


/* ========================================================================== 

   5. PAGE TITLE
   ========================================================================= */

.page-title.custom-img-background { 

   padding-top: 275px;

} .page-title { 

   padding-top: 275px;
   padding-bottom: 275px;

} .page-title .row { 

   margin-bottom: 0;

}


/* ========================================================================== 

   6. CUSTOM SECTION BACKGROUNDS
   ========================================================================= */

.custom-img-background { 

   background-repeat: no-repeat;
   background-size: cover;
   padding-top: 100px;

} .custom-background.bkg-grey { 

   background-color: #fdfdfc !important;

} .full-screen.custom-img-background { 

   padding-top: 0;

} .full-screen-content-wrapper { 

   display: table;
   width: 100%;
   padding: 0 30px;
   background-repeat: no-repeat;

} .full-screen-cell { 

   display: table-cell;
   vertical-align: middle;

}


.frame-box { 

   background-color: #fff;
   border: 17px solid #131822;
   padding: 125px 80px;
   box-shadow: 0 0 18px 7px rgba(0,0,0,0.3);
   -moz-box-shadow: 0 0 18px 7px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 0 18px 7px rgba(0,0,0,0.3);

} .custom-img-background.frame-box { 

   background-size: 100%;
   background-position: center;

} .frame-box .custom-heading { 

   padding-left: 0 !important;

} .frame-box.custom-img-background .custom-heading { 

   margin-bottom: 50px;

}


.custom-heading, .custom-img-background .open-table-widget-style-1 .custom-heading{ 

   position: relative;
   margin-bottom: 50px;

} .custom-img-background .open-table-widget-style-1 { 

   padding-left: 30px;
   padding-right: 30px;

} .custom-img-background .custom-heading { 

   margin-bottom: 0;

} .custom-heading h3 { 

   margin-bottom: 10px;

} .custom-heading h4 { 

   margin-bottom: 15px;

} .page-content.dark .custom-heading h1, .page-content.dark .custom-heading h3 { 

   color: #fff;

} .custom-heading.style-1 h3 span { 

   font-size: 36px;

} .custom-heading.style-1 h2 span { 

   font-size: 50px;

} .custom-heading.style-1 h1 span { 

   font-size: 60px;

}


/* ========================================================================== 

  color-default.css

============================================================================= */

  1. header .navbar-default .navbar-nav > li > a:hover,
  2. header .navbar-default .navbar-nav > .current-menu-item > a,
  3. header .dropdown-menu > li.current-menu-item > a,
  4. header .navbar-default .navbar-nav > li>a:hover,
  5. header .navbar-default .navbar-nav > li >a:focus,
  6. header .dropdown-menu > li > a:hover,
  7. header .dropdown-menu > li > a:focus,
  8. header .dropdown.dropdown-submenu > a:hover::after,
  9. header .navbar-default .navbar-nav > .current-menu-item > a:before,

.dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after, .dl-menuwrapper li.dl-back:after, strong a, .master-slider .pi-caption02, .page-content.dark .custom-heading .divider .hr-circle,

.owl-carousel .owl-controls .owl-buttons .owl-next:hover:before, .owl-carousel .owl-controls .owl-buttons .owl-prev:hover:before{ 

   color: #b48c80;

}

/* ========================================================================== 

  responsive.css

============================================================================= */

@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}@media (min-width:768px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}@media (min-width:768px){.navbar-right .dropdown-menu{left:auto;right:0}.navbar-right .dropdown-menu-left{left:0;right:auto}}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border-bottom-color:#fff}}@media (min-width:768px){.nav-justified>li{display:table-cell;width:1%}.nav-justified>li>a{margin-bottom:0}}@media (min-width:768px){.nav-tabs-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border-bottom-color:#fff}}@media (min-width:768px){.navbar{border-radius:4px}}@media (min-width:768px){.navbar-header{float:left}}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}.navbar-collapse.in{overflow-y:visible}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse{padding-left:0;padding-right:0}}@media (max-width:480px) and (orientation:landscape){.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:200px}}@media (min-width:768px){.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:0;margin-left:0}}@media (min-width:768px){.navbar-static-top{border-radius:0}}@media (min-width:768px){.navbar-fixed-bottom,.navbar-fixed-top{border-radius:0}}@media (min-width:768px){.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}}@media (min-width:768px){.navbar-toggle{display:none}}@media (max-width:767px){.navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;box-shadow:none}.navbar-nav .open .dropdown-menu .dropdown-header,.navbar-nav .open .dropdown-menu>li>a{padding:5px 15px 5px 25px}.navbar-nav .open .dropdown-menu>li>a{line-height:20px}.navbar-nav .open .dropdown-menu>li>a:focus,.navbar-nav .open .dropdown-menu>li>a:hover{background-image:none}}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px}.navbar-nav.navbar-right:last-child{margin-right:-15px}}@media (min-width:768px){.navbar-left{float:left!important}.navbar-right{float:right!important}}@media (min-width:768px){.navbar-form .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.navbar-form .form-control{display:inline-block;width:auto;vertical-align:middle}.navbar-form .input-group{display:inline-table;vertical-align:middle}.navbar-form .input-group .form-control,.navbar-form .input-group .input-group-addon,.navbar-form .input-group .input-group-btn{width:auto}.navbar-form .input-group>.form-control{width:100%}.navbar-form .control-label{margin-bottom:0;vertical-align:middle}.navbar-form .checkbox,.navbar-form .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.navbar-form .checkbox label,.navbar-form .radio label{padding-left:0}.navbar-form .checkbox input[type=checkbox],.navbar-form .radio input[type=radio]{position:relative;margin-left:0}.navbar-form .has-feedback .form-control-feedback{top:0}}@media (max-width:767px){.navbar-form .form-group{margin-bottom:5px}}@media (min-width:768px){.navbar-form{width:auto;border:0;margin-left:0;margin-right:0;padding-top:0;padding-bottom:0;-webkit-box-shadow:none;box-shadow:none}.navbar-form.navbar-right:last-child{margin-right:-15px}}@media (min-width:768px){.navbar-text{float:left;margin-left:15px;margin-right:15px}.navbar-text.navbar-right:last-child{margin-right:0}}@media (max-width:767px){.visible-xs{display:block!important}table.visible-xs{display:table}tr.visible-xs{display:table-row!important}td.visible-xs,th.visible-xs{display:table-cell!important}}@media (max-width:767px){.visible-xs-block{display:block!important}}@media (max-width:767px){.visible-xs-inline{display:inline!important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block!important}table.visible-sm{display:table}tr.visible-sm{display:table-row!important}td.visible-sm,th.visible-sm{display:table-cell!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block!important}table.visible-md{display:table}tr.visible-md{display:table-row!important}td.visible-md,th.visible-md{display:table-cell!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-block{display:block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline{display:inline!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline-block{display:inline-block!important}}@media (min-width:1200px){.visible-lg{display:block!important}table.visible-lg{display:table}tr.visible-lg{display:table-row!important}td.visible-lg,th.visible-lg{display:table-cell!important}}@media (min-width:1200px){.visible-lg-block{display:block!important}}@media (min-width:1200px){.visible-lg-inline{display:inline!important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block!important}}@media (max-width:767px){.hidden-xs{display:none!important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none!important}}@media (min-width:1200px){.hidden-lg{display:none!important}}


  1. dl-menu{
   display: none;

}

.dl-menuwrapper { 

   width: 100%;
   max-width: 300px;
   float: left;
   position: relative;
   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   perspective: 1000;
   -webkit-perspective-origin: 50% 200%;
   -moz-perspective-origin: 50% 200%;
   perspective-origin: 50% 200%;
   display: none;
   z-index: 1002;

}

.dl-menuwrapper:first-child { 

   margin-right: 100px;

}

.dl-menuwrapper button { 

   background: #ccc;
   border: none;
   width: 100%;
   height: 45px;
   overflow: hidden;
   position: relative;
   cursor: pointer;
   outline: none;
   color: #fff;
   text-transform: uppercase;
   text-align: left;
   padding-left: 60px;
   font-family: 'Montserrat', Arial, sans-serif;

}

.dl-menuwrapper button:hover, .dl-menuwrapper button.dl-active, .dl-menuwrapper ul { 

   background: #aaa;

}

.dl-menuwrapper button:after { 

   content: ;
   position: absolute;
   width: 30px;
   height: 1px;
   background: #fff;
   top: 14px;
   left: 10px;
   box-shadow: 
       0 8px 0 #fff, 
       0 16px 0 #fff;

}

.dl-menuwrapper ul { 

   padding: 0;
   list-style: none;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   transform-style: preserve-3d;

}

.dl-menuwrapper li { 

   position: relative;

}

.dl-menuwrapper li a { 

   display: block;
   position: relative;
   padding: 12px 15px;
   font-size: 13px;
   line-height: 22px;
   font-weight: 400;
   color: #A0A0A0;
   border-bottom: 1px solid #3C3C3C;
   outline: none;

}

.dl-menuwrapper li:last-child a { 

   border-bottom: none;

}

.no-touch .dl-menuwrapper li a:hover{ 

   background: #363636;

}

.dl-menuwrapper li.dl-back > a { 

   padding-left: 30px;
   background: rgba(0,0,0,0.1);

}

.dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after { 

   position: absolute;
   top: 0;
   speak: none;
   -webkit-font-smoothing: antialiased;
   line-height: 45px;
   font-size: 10px;
   font-family: 'FontAwesome';
   content: "\f054";

}

.dl-menuwrapper li.dl-back:after { 

   left: 10px;
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   transform: rotate(180deg);

}

.dl-menuwrapper li > a:after { 

   right: 10px;
   color: rgba(0,0,0,0.15);

}

.dl-menuwrapper .dl-menu { 

   margin: 5px 0 0 0;
   position: absolute;
   width: 100%;
   opacity: 0;
   pointer-events: none;
   -webkit-transform: translateY(10px);
   -moz-transform: translateY(10px);
   transform: translateY(10px);
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   backface-visibility: hidden;

}

.dl-menuwrapper .dl-menu.dl-menu-toggle { 

   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   transition: all 0.3s ease;

}

.dl-menuwrapper .dl-menu.dl-menuopen { 

   opacity: 1;
   pointer-events: auto;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   transform: translateY(0px);

}

/* Hide the inner submenus */ .dl-menuwrapper li .dl-submenu { 

   display: none;

}

/* When a submenu is openend, we will hide all li siblings. For that we give a class to the parent menu called "dl-subview". We also hide the submenu link. The opened submenu will get the class "dl-subviewopen". All this is done for any sub-level being entered.

  • /

.dl-menu.dl-subview li, .dl-menu.dl-subview li.dl-subviewopen > a, .dl-menu.dl-subview li.dl-subview > a { 

   display: none;

}

.dl-menu.dl-subview li.dl-subview, .dl-menu.dl-subview li.dl-subview .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li { 

   display: block;

}

/* Dynamically added submenu outside of the menu context */ .dl-menuwrapper > .dl-submenu { 

   position: absolute;
   width: 100%;
   top: 50px;
   left: 0;
   margin: 0;

}

/* Animation classes for moving out and in */ .dl-menu.dl-animate-out-2 { 

   -webkit-animation: MenuAnimOut2 0.3s ease-in-out;
   -moz-animation: MenuAnimOut2 0.3s ease-in-out;
   animation: MenuAnimOut2 0.3s ease-in-out;

}

@-webkit-keyframes MenuAnimOut2 { 

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

}

@-moz-keyframes MenuAnimOut2 { 

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

}

@keyframes MenuAnimOut2 { 

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

}

.dl-menu.dl-animate-in-2 { 

   -webkit-animation: MenuAnimIn2 0.3s ease-in-out;
   -moz-animation: MenuAnimIn2 0.3s ease-in-out;
   animation: MenuAnimIn2 0.3s ease-in-out;

}

@-webkit-keyframes MenuAnimIn2 { 

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

}

@-moz-keyframes MenuAnimIn2 { 

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

}

@keyframes MenuAnimIn2 { 

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

}

.dl-menuwrapper > .dl-submenu.dl-animate-in-2 { 

   -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
   -moz-animation: SubMenuAnimIn2 0.3s ease-in-out;
   animation: SubMenuAnimIn2 0.3s ease-in-out;

}

@-webkit-keyframes SubMenuAnimIn2 { 

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

}

@-moz-keyframes SubMenuAnimIn2 { 

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

}

@keyframes SubMenuAnimIn2 { 

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

}

.dl-menuwrapper > .dl-submenu.dl-animate-out-2 { 

   -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
   -moz-animation: SubMenuAnimOut2 0.3s ease-in-out;
   animation: SubMenuAnimOut2 0.3s ease-in-out;

}

@-webkit-keyframes SubMenuAnimOut2 { 

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

}

@-moz-keyframes SubMenuAnimOut2 { 

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

}

@keyframes SubMenuAnimOut2 { 

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

}

/* No JS Fallback */ .no-js .dl-menuwrapper .dl-menu { 

   position: relative;
   opacity: 1;
   -webkit-transform: none;
   -moz-transform: none;
   transform: none;

}

.no-js .dl-menuwrapper li .dl-submenu { 

   display: block;

}

.no-js .dl-menuwrapper li.dl-back { 

   display: none;

}

.no-js .dl-menuwrapper li > a:not(:only-child) { 

   background: rgba(0,0,0,0.1);

}

.no-js .dl-menuwrapper li > a:not(:only-child):after { 

   content: ;

}

.dl-menuwrapper button { 

   background: #252525;

}

.dl-menuwrapper button:hover { 

   background: #363636;

}

.dl-menuwrapper button.dl-active, .dl-menuwrapper ul { 

   background: #252525;

}

@media only screen and (min-width: 320px) and (max-width: 479px){ 

   .page-content .row{
       margin-bottom: 0px;
   }
   .page-content *[class*="col-"] {
       margin-bottom: 80px;
   }
   *[class*="col-"] *[class*="col-"]{
       margin-left: 0 !important;
   }
   *[class*="col-"] img:only-child  {
       display: table;
       margin-left: auto;
       margin-right: auto;
   }

   /*  HEADER WRAPPER
   --------------------------------------------------------------------- */

   #header-wrapper{
       position: relative;
       background-color: rgba(0,0,0,1.0);
   }
   #header-wrapper + *{
       margin-top: 0 !important;
   }

   /*  NAVIGATION
   --------------------------------------------------------------------- */
   #header .nav-left .navbar-header {
       width: 100%;
   }
   .navbar-nav.pi-nav{
       display: none;
   }
   .dl-menuwrapper {
       max-width: 100%;
   }
   #dl-menu{
       display: block;
   }
   .collapse.navbar-collapse{
       width: 100%;
   }
   .navbar-header,
   #header.header-type-1 .nav-left .navbar-header{
       float: none;
   }
   .logo{
       display: table;
       margin: 20px auto;
   }
   .logo img {
       height: 80px;
   }



   .col-md-6 .blockquote.style-1 {
       width: 100%;
   }

   --------------------------------------------------------------------- */

   #header-wrapper{
       position: relative;
       background-color: rgba(0,0,0,1.0);
   }
   #header-wrapper + *{
       margin-top: 0 !important;
   }



   /*  NAVIGATION
   --------------------------------------------------------------------- */
   #header .nav-left .navbar-header {
       width: 100%;
   }
   .navbar-nav.pi-nav{
       display: none;
   }
   .dl-menuwrapper {
       max-width: 100%;
   }
   #dl-menu{
       display: block;
   }
   .collapse.navbar-collapse{
       width: 100%;
   }
   .navbar-header,
   #header.header-type-1 .nav-left .navbar-header{
       float: none;
   }
   .logo{
       display: table;
       margin: 20px auto;
   }
   .logo img {
       height: 80px;
   }

   .col-md-6 .blockquote.style-1 {
       width: 100%;
   }



   /*  MASTER SLIDER
   --------------------------------------------------------------------- */
   .scroll-up {
       bottom: 20px;
       right: 20px;
   }

}

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

   .page-content .row{
       margin-bottom: 0px;
   }
   .page-content *[class*="col-"] {
       margin-bottom: 80px;
   }
   *[class*="col-"] *[class*="col-"]{
       margin-left: 0 !important;
   }
   *[class*="col-"] img:only-child  {
       display: table;
       margin-left: auto;
       margin-right: auto;
   }

   /*  HEADER WRAPPER
   --------------------------------------------------------------------- */

   #header-wrapper{
       position: relative;
       background-color: rgba(0,0,0,1.0);
   }
   #header-wrapper + *{
       margin-top: 0 !important;
   }

   /*  NAVIGATION
   --------------------------------------------------------------------- */
   #header .nav-left .navbar-header {
       width: auto;
   }
   .navbar-nav.pi-nav{
       display: none;
   }
   .dl-menuwrapper {
       max-width: 100%;
   }
   #dl-menu{
       display: block;
   }
   .collapse.navbar-collapse{
       width: 60%;
       float: left;
       margin-top: 20px;
   }
   .navbar-header,
   #header.header-type-1 .nav-left .navbar-header{
       float: none;
   }
   .logo{
       display: table;
       margin: 10px auto;
   }
   .logo img {
       height: 65px;
   }
   .navbar {
       margin-bottom: 0;
   }