/* ==========================================================================
style.css ========================================================================= */
@font-face {
font-family: proxima-novabold; src: url("https://static.igem.org/mediawiki/2017/8/84/NJU_China_iGEM_2017_ProximaNova-Bold.otf");
} @font-face {
font-family: proxima-novalight; src: url("https://static.igem.org/mediawiki/2017/6/64/NJU_China_iGEM_2017_ProximaNova-Light.otf")
} @font-face {
font-family: proxima-nova; src: url("https://static.igem.org/mediawiki/2017/a/a4/NJU_China_iGEM_2017_ProximaNova-Regular.otf")
}
/* ==========================================================================
1. CSS RESET ========================================================================= */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;
} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
} body {
line-height: 1;
} blockquote, q {
quotes: none;
} blockquote:after, blockquote:before, q:after, q:before {
content: ; content: none;
} table {
border-collapse: collapse; border-spacing: 0;
}
- focus {
outline: 0; text-decoration: none;
} a:focus, a:active {
text-decoration: none; outline: 0;
}
/* ==========================================================================
2. DOCUMENT STYLES ========================================================================= */
body {
font-family: proxima-nova,'Microsoft YaHei', Arial, sans-serif; font-size: 15px; line-height: 23px; color: black; background-color: #fff;
} .row {
margin-bottom: 100px;
}
.centered {
text-align: center;
}
/* ==========================================================================
3. TYPOGRAPHY ========================================================================= */
p, a {
color: #777777;
} p, a, span {
font-family: proxima-nova, Arial, sans-serif; line-height: 25px;
} p {
padding-bottom: 15px;
} a {
-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; text-decoration: none;
} a:hover {
text-decoration: none;
} h1, h2, h3, h4{
color: #161d27; margin-top: 0; margin-bottom: 15px; text-transform: uppercase;
}
h5, h6 {
color: #161d27; margin-top: 0; margin-bottom: 0; text-transform: uppercase;
} h1 {
font-size: 60px; line-height: 60px;
} h2 {
font-size: 44px; line-height: 44px;
} h3 {
font-size: 36px; line-height: 36px;
} h4 {
font-size: 27px; line-height: 28px;
} h5 {
font-size: 18px; line-height: 24px; margin-bottom: 3px;
} h6 {
font-size: 15px; line-height: 15px;
} h5 .sans-serif {
font-size: 21px;
} .dark h5 .sans-serif {
color: #fff;
} strong {
font-weight: 600;
} strong a:hover {
text-decoration: underline;
}
.custom-col-padding {
padding: 275px 0 195px 0!important;
} .padding-0 {
padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
} a.more-details{
font-family: 'Suranna', serif; text-transform: uppercase; font-size: 21px; border-bottom: 1px solid; color: #161d27; display: inline-block; padding-bottom: 3px; margin-top: 10px;
-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;
} a.more-details .fa{
position: relative; top: -2px; margin-left: 7px; font-size: 14px;
}
.mb-0 {
margin-bottom: 0 !important;
} .mb-20 {
margin-bottom: 20px !important;
} .mb-40 {
margin-bottom: 40px !important;
} .mb-60 {
margin-bottom: 60px !important;
} .mb-80 {
margin-bottom: 80px !important;
} .mb-100 {
margin-bottom: 100px !important;
} .pt-0 {
padding-top: 0 !important;
} .pt-20 {
padding-top: 20px !important;
} .pt-40 {
padding-top: 40px !important;
} .pt-60 {
padding-top: 60px !important;
} .pt-80 {
padding-top: 80px !important;
} .pt-100 {
padding-top: 100px !important;
} .pt-120 {
padding-top: 100px !important;
} .pt-150 {
padding-top: 150px !important;
} .pt-160 {
padding-top: 160px !important;
}
.pb-80 {
padding-bottom: 80px !important;
}
.custom-heading.style-1 span, .custom-heading.style-2 span, .menu-item-price p{
font-family: 'Montez', cursive; text-transform: none;
}
/* ==========================================================================
4. HEADER ========================================================================= */
- header-wrapper {
width: 100%; position: fixed; top: 0; z-index: 1000;
} .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;
}
- header .nav-left .navbar-header {
float: left;
}
- header .nav-left .pi-nav {
float: left; margin-top: 50px;
}
- header .navbar-default .navbar-collapse,
- header .navbar-default .navbar-form {
border: 0px solid transparent;
}
- header .navbar-default .navbar-nav > .open > a,
- header .navbar-default .navbar-nav > .open > a:hover,
- header .navbar-default .navbar-nav > .open > a:focus {
background-color: transparent;
}
- header .navbar-collapse {
padding: 0; float: right;
}
- header .navbar-default{
background: none; border: 0px solid transparent; -webkit-box-shadow: none; box-shadow: none;
}
- header .navbar-nav.pi-nav > li > a {
line-height: 25px;
}
- 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;
}
- header .navbar-default .navbar-nav > .current-menu-item > a:before,
- header .navbar-default .navbar-nav > li>a:hover:before {
position: absolute; font-family: 'FontAwesome'; font-size: 6px; content: "♦"; display: block; top: 16px; left: 0px;
}
- 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); }
}
- header .dropdown-menu > li > a {
font-size: 14px; font-weight: 400; padding: 15px 40px 15px 25px; color: #A0A0A0; border-bottom: 1px solid #3C3C3C;
}
- header .dropdown-menu > li > a:hover,
- header .dropdown-menu > li > a:focus {
background: #363636; background-color: #363636 !important; background-image: none; filter: none;
}
- header .dropdown-menu > li:last-child > a {
border-bottom: none;
}
- 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;
}
- 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);
}
- header .dropdown-menu > li > a .fa {
margin-right: 15px;
}
/* ==========================================================================
4.1. MAIN NAVIGATION ========================================================================= */
.navbar-nav > li {
padding-bottom: 0;
}
.dropdown-submenu {
position: relative;
}
- 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);
}
- header .dropdown-submenu > .dropdown-menu {
background-color: #363636 !important;
}
- 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: 15px solid #131822; padding: 80px 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;
} .frame-box p {
font-size: 20px; font-family: 'Microsoft YaHei'; color: black; opacity: 0.9; line-height: 30px;
}
.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; font-family: proxima-nova, Arial, sans-serif,'Microsoft YaHei'; color: #2F1E04;
} .custom-heading.style-1 h2 span {
font-size: 50px;
} .custom-heading.style-1 h1 span {
font-size: 60px;
}
.master-slider .pi-caption01 {
font-family:"Arial",Gadget,sans-serif,serif; color: #fff; font-size: 70px; line-height: 78px;
} .master-slider .pi-caption02 {
font-family:"Arial",Gadget,sans-serif,cursive; font-size: 72px; text-transform: none;
} .master-slider .pi-text01 {
font-family: proxima-nova, Arial, sans-serif,'Montserrat', Arial, sans-serif; color: #fff; font-size: 30px;
} .master-slider .pi-text02, .master-slider .pi-text02 span {
font-family: proxima-nova, Arial, sans-serif;
} .master-slider .pi-text02 {
color: #fff; font-size: 18px;
} .master-slider .pi-text02 span {
color: #acb8c4;
} .master-slider .divider {
width: 29.5em; text-align: center;
} .master-slider .divider .hr-double.left:before {
position:absolute; content: ""; width: 10em; height: 1px; left: 2em; top: 1.8em;
} .master-slider .divider .hr-double.left:after {
position:absolute; content: ""; width: 12em; height: 1px; top: 2.2em; left: 0;
} .master-slider .divider .hr-double.right:before {
position:absolute; content: ""; width: 10em; height: 1px; right: 2em; top: 1.8em;
} .master-slider .divider .hr-double.right:after {
position:absolute; content: ""; width: 12em; height: 1px; top: 2.2em; right: 0;
}
.master-slider .divider-svg {
display: inline-block; width: 3em; height: 4em;
} .master-slider .divider .divider-svg img{
width: 3em; height: 4em;
}
/* ==========================================================================
7.6. DIVIDERS ========================================================================= */
.divider {
position: relative;
}
.divider.style-1 {
width: 90px;
} .custom-heading.style-2 .divider.style-1, .divider.style-3 {
width: 47px;
}
.divider.style-1.center {
margin: 15px auto 0 auto;
} .divider .hr-simple {
position:absolute; height: 1px; width: 30px;
} .divider .hr-simple.left{
left: 0;
} .divider .hr-simple.right{
right: 0;
} .divider .hr-icon {
position: absolute; font-size: 6px; top: -3px; left: 0;
} .divider.center .hr-icon {
right: 0; top: -2px;
} .divider.style-2.center {
margin: 0 auto 0 auto;
} .divider.style-2 {
width: 240px; text-align: center;
} .divider .hr-double.left:before {
position:absolute; content: ""; width: 76px; height: 1px; left: 17px; top: 14px;
} .divider .hr-double.left:after {
position:absolute; content: ""; width: 93px; height: 1px; top: 18px; left: 0;
} .divider .hr-double.right:before {
position:absolute; content: ""; width: 76px; height: 1px; right: 17px; top: 14px;
} .divider .hr-double.right:after {
position:absolute; content: ""; width: 93px; height: 1px; top: 18px; right: 0;
} .divider-svg {
display: inline-block;
} .divider .divider-svg img{
width: 23px; height: 30px;
}
.divider .divider-svg {
width: 23px; height: 30px; margin-left: 4px;
}
.simple-divider {
width: 30px; height: 2px; display: inline-block; margin-bottom: 25px; margin-top: 15px;
}
/* ==========================================================================
color-default.css
============================================================================= */
- header .navbar-default .navbar-nav > li > a:hover,
- header .navbar-default .navbar-nav > .current-menu-item > a,
- header .dropdown-menu > li.current-menu-item > a,
- header .navbar-default .navbar-nav > li>a:hover,
- header .navbar-default .navbar-nav > li >a:focus,
- header .dropdown-menu > li > a:hover,
- header .dropdown-menu > li > a:focus,
- header .dropdown.dropdown-submenu > a:hover::after,
- 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,
span, a:hover, .custom-heading.style-1:before, .custom-heading.style-1:after, .custom-heading .divider .hr-icon, .page-content ul li:before, h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
.owl-carousel .owl-controls .owl-buttons .owl-next:hover:before,
.owl-carousel .owl-controls .owl-buttons .owl-prev:hover:before{
color: #CCB994;
} .divider .hr-simple, .hr-simple, .divider .hr-double:before, .divider .hr-double:after, .page-content.dark .open-table-widget-style-1 .divider .hr-simple, .btn.black:hover, .btn.gold:hover,
- footer-wrapper .newsletter .submit:hover,
.tab-menu-price .menu-price, .simple-divider {
background-color: #b48c80;
}
/* ==========================================================================
masterslider.css
============================================================================= */
.master-slider{ position: relative; visibility: hidden; -moz-transform: translate3d(0 , 0 , 0); }
.master-slider a { -webkit-transition: none; -o-transition: none; transition: none; }
.master-slider, .master-slider * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
.master-slider img, .ms-slide-bgvideocont video {max-width:none;}
/* grab cursor */ .ms-grab-cursor{cursor: url(""), move;} .ms-grabbing-cursor{cursor: url(""), move;}
.ms-view {
margin:0px auto;
overflow:hidden;
background:black;
position:relative;
-webkit-perspective: 2000px;
-moz-perspective: 2000px;
-ms-perspective: 2000px;
perspective: 2000px;
}
.ms-view .ms-slide-container{position:relative;}
.ms-slide { position:absolute; height:100%; -webkit-transform: translateZ(0px); -ms-transform: translateZ(0px); -o-transform: translateZ(0px); transform: translateZ(0px); }
.ms-wk .ms-slide { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .ms-slide.selected {}
.ms-slide .ms-slide-bgcont, .ms-slide .ms-slide-bgvideocont{ position: absolute; overflow:hidden; width: 100%; }
.ms-slide .ms-slide-link { display: block; width: 100%; height: 100%; position: absolute; top:0; z-index: 110; }
.ms-slide .ms-slide-bgvideocont{ z-index: 105; height: 100%; }
.ms-wk .ms-slide .ms-slide-bgvideocont, .ms-wk .ms-slide-bgvideocont>video{ -webkit-transform: translateZ(0.3px); transform: translateZ(0.3px); }
.ms-slide .ms-slide-bgvideo{ position: absolute; top: 0px; }
.ms-inner-controls-cont, .ms-container {position: relative; margin:0 auto;} .ms-slide .ms-slide-bgcont img , .ms-container , .ms-inner-controls-cont{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.ms-slide .ms-layer, .ms-fixed-layers .ms-layer {position:absolute;pointer-events: auto}
.ms-slide .ms-slide-layers, .ms-fixed-layers { position: absolute; overflow:hidden; width:100%; height: 100%; z-index: 109; top:0px; pointer-events: none; }
.ms-slide .ms-slide-video{ position:absolute; top:0; z-index: 111; background:black; padding:0; margin: 0; border: none; }
.ms-parallax-layer { width: 100%; position: absolute; top: 0; }
.ms-scroll-parallax-cont{ position: absolute; top:0; width: 100%; height: 100%; }
.ms-wk .ms-scroll-parallax-cont{ -webkit-transform: translateZ(0.4px); transform: translateZ(0.4px); }
/*.ms-scroll-parallax .ms-sl-selected .ms-scroll-parallax-cont, .ms-scroll-parallax .ms-sl-selected .ms-slide-bgcont{} .ms-scroll-parallax .ms-slide-bgcont{}*/ .ms-layer.video-box{background:black;} .ms-layer.video-box iframe{ padding:0; margin: 0; border: none; position: absolute; z-index: 111; }
.ms-slide .ms-slide-vpbtn , .ms-slide .ms-video-btn{ position:absolute; cursor: pointer; z-index: 112; }
.ms-slide .ms-slide-vcbtn{ position:absolute; cursor: pointer; z-index: 113; }
.ms-slide-vcbtn-mobile{ position: relative; bottom: 0; left:0; width:100%; height: 28px; background-color: black; color: white; text-align: center; cursor: pointer; z-index: 113; }
.ms-slide-vcbtn-mobile .ms-vcbtn-txt {
text-transform: uppercase; font-family: sans-serif; font-size: 0.75em; display: inline-block; background: url(video-close-btn.png) no-repeat 0px 3px; padding-left: 15px; height: 15px; color: #DBDBDB; margin-top: 7px;
}
.ms-wk .ms-slide .ms-slide-vcbtn, .ms-wk .ms-slide .ms-slide-layers, .ms-wk .ms-slide .ms-slide-vpbtn, .ms-wk .ms-slide .ms-slide-video, .ms-wk .ms-slide-link { -webkit-transform: translateZ(0.44px); transform: translateZ(0.44px); }
.ms-video-img{ position:absolute; width:100%; height:100%; top:0; left:0; }
.ms-mask-frame{ overflow:hidden; position:absolute; float:left; }
.ms-slide-info {position: absolute;} .ms-slide-info.ms-dir-v {top:0;} .ms-slide-info.ms-dir-h {width:100%;}
@keyframes point-anim{ 0% {transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); -ms-transform: scale(0.5); opacity: 1; } 100% {transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); opacity: 0; } }
@-webkit-keyframes point-anim{ 0% {-webkit-transform: scale(0.5); opacity: 1; } 100% {-webkit-transform: scale(1.5); opacity: 0; } }
/* In Android browser, using css animations over slider causes some crashes */ .ms-android .ms-tooltip-point .ms-point-border{ animation:none; -moz-animation:none; -webkit-animation:none; -o-animation:none; } /* ==========================================================================
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}}
- 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 --------------------------------------------------------------------- */ .master-slider .pi-text01, .master-slider .pi-text02, .master-slider .pi-text02 span, .master-slider .divider { visibility: hidden; }
.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; }