/* Navigation Box Icon Sections Portfolio Owl Carousel Social Icon Button Overlay Arrow Height Equal map History Vertical Divider (���δܶ�����) text style */ /*========================================== GENERAL ========================================== */ body{ background:#fff; font-family:'Noto Sans KR','Nanum Square', 'Poppins', sans-serif; line-height:1.8; font-size:16px; color:#111; font-weight:300; -ms-overflow-style:scrollbar; overflow-x:hidden; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family:'Poppins','Nanum Square', serif; text-transform:uppercase; letter-spacing:2px; font-weight:700; color:inherit; margin:0 0 20px; } .lead { margin-bottom: 40px; font-size: 18px; color:#555; } @media (min-width: 768px) { .lead { font-size: 20px; } } .block-md { display:block; } .block-sm { display:none; } @media (max-width: 767px) { .block-md { display:none; } .block-sm { display:block; } } .text-light, .text-light a:hover, .text-light h1, .text-light h2, .text-light h3, .text-light h4, .text-light h5, .text-light h6{ color:#fff !important; } .text-light a{ color:rgba(255, 255, 255, 0.7); } /* margin, padding */ .no-margin-top { margin-top: 0 !important; } .no-margin-bottom { margin-bottom: 0 !important; } .no-margin-left { margin-left: 0 !important; } .no-margin-right { margin-right: 0 !important; } .no-margin-side { margin-left: 0 !important; margin-right: 0 !important; } .no-margin { margin: 0 !important; } .mar-top-100 { margin-top: 100px !important; } .mar-top-50 { margin-top: 50px !important; } .mar-top-45 { margin-top: 45px !important; } .mar-top-40 { margin-top: 40px !important; } .mar-top-35 { margin-top: 35px !important; } .mar-top-30 { margin-top: 30px !important; } .mar-top-25 { margin-top: 25px !important; } .mar-top-20 { margin-top: 20px !important; } .mar-top-15 { margin-top: 15px !important; } .mar-top-10 { margin-top: 10px !important; } .mar-top-5 { margin-top: 5px !important; } .mar-bot-100 { margin-bottom: 100px !important; } .mar-bot-50 { margin-bottom: 50px !important; } .mar-bot-45 { margin-bottom: 45px !important; } .mar-bot-40 { margin-bottom: 40px !important; } .mar-bot-35 { margin-bottom: 35px !important; } .mar-bot-30 { margin-bottom: 30px !important; } .mar-bot-25 { margin-bottom: 25px !important; } .mar-bot-20 { margin-bottom: 20px !important; } .mar-bot-15 { margin-bottom: 15px !important; } .mar-bot-10 { margin-bottom: 10px !important; } .mar-bot-5 { margin-bottom: 5px !important; } .mar-left-100 { margin-left: 100px !important; } .mar-left-50 { margin-left: 50px !important; } .mar-left-45 { margin-left: 45px !important; } .mar-left-40 { margin-left: 40px !important; } .mar-left-35 { margin-left: 35px !important; } .mar-left-30 { margin-left: 30px !important; } .mar-left-25 { margin-left: 25px !important; } .mar-left-20 { margin-left: 20px !important; } .mar-left-15 { margin-left: 15px !important; } .mar-left-10 { margin-left: 10px !important; } .mar-left-5 { margin-left: 5px !important; } .mar-right-100 { margin-right: 100px !important; } .mar-right-50 { margin-right: 50px !important; } .mar-right-45 { margin-right: 45px !important; } .mar-right-40 { margin-right: 40px !important; } .mar-right-35 { margin-right: 35px !important; } .mar-right-30 { margin-right: 30px !important; } .mar-right-25 { margin-right: 25px !important; } .mar-right-20 { margin-right: 20px !important; } .mar-right-15 { margin-right: 15px !important; } .mar-right-10 { margin-right: 10px !important; } .mar-right-5 { margin-right: 5px !important; } .no-pad {padding:0 !important;}.no-padding-top { padding-top: 0 !important; } .no-padding-bottom { padding-bottom: 0 !important; } .no-padding-left { padding-left: 0 !important; } .no-padding-right { padding-right: 0 !important; } .no-padding-side { padding-left: 0 !important; padding-right: 0 !important; } .no-padding { padding: 0 !important; } .pad-left-100 { padding-left: 100px !important; } .pad-left-50 { padding-left: 50px !important; } .pad-left-45 { padding-left: 45px !important; } .pad-left-40 { padding-left: 40px !important; } .pad-left-35 { padding-left: 35px !important; } .pad-left-30 { padding-left: 30px !important; } .pad-left-25 { padding-left: 25px !important; } .pad-left-20 { padding-left: 20px !important; } .pad-left-15 { padding-left: 15px !important; } .pad-left-10 { padding-left: 10px !important; } .pad-left-5 { padding-left: 5px !important; } .pad-right-100 { padding-right: 100px !important; } .pad-right-50 { padding-right: 50px !important; } .pad-right-45 { padding-right: 45px !important; } .pad-right-40 { padding-right: 40px !important; } .pad-right-35 { padding-right: 35px !important; } .pad-right-30 { padding-right: 30px !important; } .pad-right-25 { padding-right: 25px !important; } .pad-right-20 { padding-right: 20px !important; } .pad-right-15 { padding-right: 15px !important; } .pad-right-10 { padding-right: 10px !important; } .pad-right-5 { padding-right: 5px !important; } .pad-top-100 { padding-top: 100px !important; } .pad-top-50 { padding-top: 50px !important; } .pad-top-45 { padding-top: 45px !important; } .pad-top-40 { padding-top: 40px !important; } .pad-top-35 { padding-top: 35px !important; } .pad-top-30 { padding-top: 30px !important; } .pad-top-25 { padding-top: 25px !important; } .pad-top-20 { padding-top: 20px !important; } .pad-top-15 { padding-top: 15px !important; } .pad-top-10 { padding-top: 10px !important; } .pad-top-5 { padding-top: 5px !important; } .pad-bot-100 { padding-bottom: 100px !important; } .pad-bot-70 { padding-bottom: 70px !important; } .pad-bot-50 { padding-bottom: 50px !important; } .pad-bot-45 { padding-bottom: 45px !important; } .pad-bot-40 { padding-bottom: 40px !important; } .pad-bot-35 { padding-bottom: 35px !important; } .pad-bot-30 { padding-bottom: 30px !important; } .pad-bot-25 { padding-bottom: 25px !important; } .pad-bot-20 { padding-bottom: 20px !important; } .pad-bot-15 { padding-bottom: 15px !important; } .pad-bot-10 { padding-bottom: 10px !important; } .pad-bot-5 { padding-bottom: 5px !important; } .va-middle { vertical-align:middle; } .right-align { float: right; } .left-align { float: left; } .read-only { display:none;} .inner {padding:120px 0 !important; }.inner-md {padding:100px 0 !important; }.inner-sm {padding:80px 0 !important; }.inner-xs {padding:40px 0 !important; } .outer {margin:120px 0 !important; }.outer-md {margin:100px 0 !important; }.outer-sm {margin:80px 0 !important; }.outer-xs {margin:40px 0 !important; } /*========================================== Navigation ==========================================*/ .navigation { min-height:80px; } .main-nav { border-bottom: 1px solid #161616; background-color: #000; height: 80px; display:block; -webkit-transition: height .3s cubic-bezier(0,0,1,1), background .3s cubic-bezier(0,0,1,1); -moz-transition: all .3s cubic-bezier(0,0,1,1); -o-transition: all .3s cubic-bezier(0,0,1,1); -ms-transition: all .3s cubic-bezier(0,0,1,1); transition: all .3s cubic-bezier(0,0,1,1); } .navigation .main-nav { border-bottom: 1px solid #111; background-color: #000; } .navigation.light .main-nav { border-bottom: 0px solid #222; background-color: #fff; } .main-nav > .navbar-default .container .nav, .main-nav > .navbar-default > .container { background-color: transparent; border: none; } .main-nav.shrink { position:fixed; height: 60px; width: 100%; background-color: #000; z-index: 500; top: 0; } .main-nav.shrink .navbar-container { height: 60px; } .main-nav .navbar.navbar-default { border-radius: 0; margin-bottom:0; border:0; height: 80px; background-color:transparent; -webkit-transition: all .3s cubic-bezier(0,0,1,1); -moz-transition: all .3s cubic-bezier(0,0,1,1); -o-transition: all .3s cubic-bezier(0,0,1,1); -ms-transition: all .3s cubic-bezier(0,0,1,1); transition: all .3s cubic-bezier(0,0,1,1); } .main-nav.shrink .navbar.navbar-default { height: 60px; z-index:501; } .main-nav a.logo { position: absolute; height: 80px; padding-top: 25px; padding-bottom: 25px; -webkit-transition: all .3s cubic-bezier(0,0,1,1); -moz-transition: all .3s cubic-bezier(0,0,1,1); -o-transition: all .3s cubic-bezier(0,0,1,1); -ms-transition: all .3s cubic-bezier(0,0,1,1); transition: all .3s cubic-bezier(0,0,1,1); } .main-nav.shrink a.logo { height: 60px; padding-top: 15px; padding-bottom: 15px; } .main-nav a.logo img { height: 40px; vertical-align: top; -webkit-transition: all .3s cubic-bezier(0,0,1,1); -moz-transition: all .3s cubic-bezier(0,0,1,1); -o-transition: all .3s cubic-bezier(0,0,1,1); -ms-transition: all .3s cubic-bezier(0,0,1,1); transition: all .3s cubic-bezier(0,0,1,1); } .main-nav.shrink a.logo img { height: 30px; vertical-align: top; } /* Dropdown */ .main-nav .navbar-nav .dropdown-menu { border: 1px solid #f1f1f1; border-radius: 0px; padding:0; text-transform:uppercase; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .main-nav .navbar-nav .dropdown-menu.animated { -webkit-animation-duration: .5s; animation-duration: .5s; } .main-nav .navbar-nav li a { color: #222; font-weight: 400; } .main-nav .navbar-nav > li > a { color: #222; } .main-nav .dropdown-menu > li > a { padding: 0 20px; height:40px; line-height:40px; color:#000; font-weight: 300; } .main-nav .dropdown-menu > li > a:focus { background-color: transparent; } .main-nav .navbar-nav .dropdown:hover > a[data-toggle=dropdown] + .dropdown-menu { display: none; } .main-nav .navbar-nav .dropdown.open > a[data-toggle=dropdown] + .dropdown-menu { display: block; padding-bottom: 10px; } .main-nav .dropdown-submenu { position: relative; } .main-nav .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: 0px; margin-left: -1px; } .main-nav .dropdown-submenu > a:focus { background-color: transparent; } .main-nav .dropdown-submenu>a:after { float: right; font-family:'FontAwesome'; content:"\f105"; color:inherit; position: absolute; right: 20px; } .main-nav .dropdown-submenu>a:hover:after { border-left-color: #fff !important; } .main-nav .nav .dropdown-submenu:hover >a:after { border-left-color: #fff !important; } .main-nav .menu-large { position:static!important; } .main-nav .megamenu{ padding: 20px 0px; } .main-nav .megamenu> li > ul { padding: 0; margin: 0; } .main-nav .megamenu> li > ul > li { list-style: none; } .main-nav .megamenu> li > ul > li > a { display: block; padding: 10px; clear: both; font-weight: normal; line-height: 1.428571429; color: #000; white-space: normal; } /* Media Query */ @media (max-width: 991px) { .main-nav { padding: 0; top:0; left:0; right: 0; -webkit-transition: background .3s cubic-bezier(0,0,1,1); -moz-transition: background .3s cubic-bezier(0,0,1,1); -o-transition: background .3s cubic-bezier(0,0,1,1); -ms-transition: background .3s cubic-bezier(0,0,1,1); transition: background .3s cubic-bezier(0,0,1,1); } .main-nav .navbar-header { float: none; height: 80px; -webkit-transition: height .3s cubic-bezier(0,0,1,1); -moz-transition: height .3s cubic-bezier(0,0,1,1); -o-transition: height .3s cubic-bezier(0,0,1,1); -ms-transition: height .3s cubic-bezier(0,0,1,1); transition: height .3s cubic-bezier(0,0,1,1); } .main-nav.shrink .navbar-header { float: none; height: 60px; } .main-nav.nav-icons-right .navbar-header { text-align: center; width: 100%; } .main-nav.nav-icons-right.header-icons .navbar-header { text-align: inherit; } .main-nav.nav-icons-right.header-icons a.logo { position: absolute; height: 80px; padding-top: 25px; padding-bottom: 25px; -webkit-transition: all .3s cubic-bezier(0,0,1,1); -moz-transition: all .3s cubic-bezier(0,0,1,1); -o-transition: all .3s cubic-bezier(0,0,1,1); -ms-transition: all .3s cubic-bezier(0,0,1,1); transition: all .3s cubic-bezier(0,0,1,1); } .navbar-left,.navbar-right { float: none !important; } .main-nav .navbar-icons { position: absolute; top: 0; right: 0; margin-right: 15px; } .header-icons .navbar-right li { margin-right:0px !important; } .main-nav .navbar-icons > ul.navbar-nav > li { float:left; height: 65px; margin-left: 0; margin-right: 0; -webkit-transition: all .3s cubic-bezier(0,0,1,1); -moz-transition: all .3s cubic-bezier(0,0,1,1); -o-transition: all .3s cubic-bezier(0,0,1,1); -ms-transition: all .3s cubic-bezier(0,0,1,1); transition: all .3s cubic-bezier(0,0,1,1); } .main-nav.shrink .navbar-icons > ul.navbar-nav > li { height: 45px; } .main-nav .navbar-icons > ul.navbar-nav > li:last-child { margin-right:0; /*margin-right:15px!important;*/ } .main-nav .navbar-icons > ul.navbar-nav > li.menu-icon > a { padding-top: 24.5px; /*padding-top: 24.5px;*/ -webkit-transition: all .3s cubic-bezier(0,0,1,1); -moz-transition: all .3s cubic-bezier(0,0,1,1); -o-transition: all .3s cubic-bezier(0,0,1,1); -ms-transition: all .3s cubic-bezier(0,0,1,1); transition: all .3s cubic-bezier(0,0,1,1); } .main-nav.shrink .navbar-icons > ul.navbar-nav > li.menu-icon > a { padding-top: 14.5px; /*padding-top: 14.5px;*/ } .main-nav .navbar-icons > ul.navbar-nav > li.nav-shop > a { padding-top: 21px; border:1px solid transparent; -webkit-transition: all .3s cubic-bezier(0,0,1,1); -moz-transition: all .3s cubic-bezier(0,0,1,1); -o-transition: all .3s cubic-bezier(0,0,1,1); -ms-transition: all .3s cubic-bezier(0,0,1,1); transition: all .3s cubic-bezier(0,0,1,1); } .main-nav.shrink .navbar-icons > ul.navbar-nav > li.nav-shop > a { padding-top: 11px; } .main-nav .navbar-toggle { display: block; margin-left: 15px; } .main-nav .navbar-toggle.navbar-toggle-centred { float: none; left: 50%; margin-left: -19px; } .main-nav .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .main-nav .navbar-collapse.in { overflow-y: auto!important; } .main-nav .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .main-nav .navbar-collapse.collapse { display: none!important; } .main-nav .navbar-nav { float: none!important; margin: 8.5px -15px; } .main-nav .navbar-nav > li { float: none; } .main-nav .navbar-nav> li > a { padding-top: 10px; padding-bottom: 10px; } .main-nav .collapse.in{ display:block !important; } .main-nav > .navbar-default > .container { padding-left: 0px; padding-right: 0px; } .main-nav > .navbar-default > .container > .navbar-header { margin-left: 0px; margin-right: 0px; } .main-nav a.logo, .main-nav.nav-icons-right.header-icons a.logo{ padding-left: 25px; } .main-nav.nav-icons-right.header-icons a.logo{ top:-25px; left: 44px; } .main-nav.nav-icons-right a.logo { padding-left: 0px; position: relative; } .main-nav.nav-icons-right a.logo span, .main-nav.nav-icons-right a.logo img { margin-top: 25px; margin-bottom: 25px; -webkit-transition: all .3s cubic-bezier(0,0,1,1); -moz-transition: all .3s cubic-bezier(0,0,1,1); -o-transition: all .3s cubic-bezier(0,0,1,1); -ms-transition: all .3s cubic-bezier(0,0,1,1); transition: all .3s cubic-bezier(0,0,1,1); } .main-nav.nav-icons-right.shrink a.logo img { margin-top: 15px; margin-bottom: 15px; } .main-nav .navbar-toggle { margin-top: 24px; margin-bottom: 3px; border-radius:0; -webkit-transition: all .3s cubic-bezier(0,0,1,1); -moz-transition: all .3s cubic-bezier(0,0,1,1); -o-transition: all .3s cubic-bezier(0,0,1,1); -ms-transition: all .3s cubic-bezier(0,0,1,1); transition: all .3s cubic-bezier(0,0,1,1); } .main-nav.nav-icons-right .navbar-toggle { float: left; position: absolute; } .main-nav.shrink .navbar-toggle { margin-top: 14px; margin-bottom: 3px; } .main-nav .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } .main-nav .navbar-toggle, .main-nav .navbar-toggle:focus, .main-nav .navbar-toggle:active { background-color: transparent; border: 0; } .main-nav .navbar-toggle:hover { background-color: transparent; border: 0; } .main-nav .navbar-container { background-color: #222; height: auto; } .main-nav.shrink .navbar-container { height: auto; } .main-nav .collapsing-nav { max-height: 300px; padding-right: 17px; position:relative; z-index: 999; background-color: #222; border: transparent !important; } .main-nav .navbar-nav > li { border-bottom: 1px solid #222; margin-left:15px; margin-right:15px; } .main-nav .nav li a { font-size:10px; letter-spacing: 2px; text-transform: uppercase; color: #bbb !important; font-weight: 400; background-color: transparent; -webkit-transition: color .3s ease; -moz-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; } .main-nav .nav li a:hover { background-color: transparent; } .main-nav .navbar-nav > .dropdown > a:focus{ color: #bbb; } .main-nav .navbar-nav > .dropdown > a:hover, .main-nav .navbar-nav > .dropdown.open > a{ color: #fff; } .main-nav .navbar-nav > .active > a, .main-nav .navbar-nav > .active > a:hover, .main-nav .navbar-nav > .active > a:focus { background-color: transparent; color: #fff; } .main-nav .nav > li.dropdown.open > a, .main-nav .nav > li.open:hover > a, .main-nav .nav > li.open:focus > a, .main-nav .nav .open > a, .main-nav .nav .open > a:focus { background-color: transparent; } .main-nav .nav.navbar-nav > li.dropdown > a:after, .main-nav .nav.navbar-nav > li.with-dropdown > a:after { font-family:'FontAwesome'; content:"\f105"; position: absolute; right: 15px; } .main-nav .navbar-nav .open .dropdown-menu { padding-bottom:15px; } .main-nav .navbar-nav .open .dropdown-menu > li { border-bottom:1px solid #222; margin-left:15px; } .main-nav .navbar-nav .open .dropdown-menu > li:last-child { border-bottom:0; } .main-nav .navbar-nav .open .dropdown-menu > li > a, .main-nav .navbar-nav .open .dropdown-menu .dropdown-header { padding: 0 10px; line-height: 40px; } .main-nav .navbar-nav .open .dropdown-menu > li > a { color: #bbb; } .main-nav .navbar-nav > .open .dropdown-menu > li > a:hover, .main-nav .navbar-nav > .open .dropdown-menu > li > a:focus { color: #fff; background-color:transparent; } .main-nav .navbar-nav .dropdown.open > a[data-toggle=dropdown] + .dropdown-menu { display: block; padding-bottom: 0px; } .main-nav .nav ul.dropdown-menu { padding-left: 15px; } .main-nav .dropdown-submenu>a:after { font-family:'FontAwesome'; content:"\f107"; margin-top: 1px; margin-right: -6px; } .main-nav .megamenu { padding: 0; } .main-nav .navbar-nav .open .dropdown-menu.megamenu > li { border-bottom: 0; margin-left:0; } .main-nav .navbar-nav .open .dropdown-menu.megamenu > li.col-sm-3 { padding: 0; margin-left:15px; } .main-nav .megamenu > li:last-child { padding-bottom: 15px; } .main-nav .megamenu > li:hover { background-color: transparent; } .main-nav .megamenu > li > ul > li { font-size: 11px; } .main-nav .megamenu > li > ul > li > a { text-decoration: none; } .main-nav .megamenu > li > ul > li > a:hover { color: #fff; } .main-nav .megamenu> li > ul > li > a { height: 40px; padding-top: 15px; color: #bbb; margin-left: 10px; border-bottom:1px solid #222; } .main-nav .megamenu> li:last-child > ul > li:last-child > a { border-bottom:none; } .main-nav .megamenu> li ul > li > a >.fa { padding-right:25px; } .main-nav .navbar-nav .open .dropdown-menu .dropdown-header { padding-top: 15px; font-size: 11px; color: #eee; text-transform: uppercase; letter-spacing:1px; } .main-nav .navbar-icons > ul > li { border: 0; } .main-nav .navbar-icons > ul > li > a:hover { border: 0; background-color: transparent; } } @media (min-width: 992px) { .main-nav .navbar-container { float: right; height: 80px; -webkit-transition: all .3s cubic-bezier(0,0,1,1); -moz-transition: all .3s cubic-bezier(0,0,1,1); -o-transition: all .3s cubic-bezier(0,0,1,1); -ms-transition: all .3s cubic-bezier(0,0,1,1); transition: all .3s cubic-bezier(0,0,1,1); } .main-nav .collapsing-nav { padding-left:0; padding-right:0; height: 80px; -webkit-transition: all .3s cubic-bezier(0,0,1,1); -moz-transition: all .3s cubic-bezier(0,0,1,1); -o-transition: all .3s cubic-bezier(0,0,1,1); -ms-transition: all .3s cubic-bezier(0,0,1,1); transition: all .3s cubic-bezier(0,0,1,1); } .main-nav.shrink .collapsing-nav { height: 60px !important; } .main-nav .navbar-nav .dropdown:hover { cursor: pointer; } .main-nav .navbar-nav .dropdown-menu { min-width:200px; padding:0; } .main-nav .navbar-nav > li > .dropdown-menu.menu-left { margin-left:160px; } .main-nav .dropdown-menu > .dropdown-submenu:hover > a { background-color: #f8f8f8; color:#222; } .main-nav .dropdown-submenu:hover> a:after { border-left-color: #555; } .main-nav .dropdown-menu > li > a:hover { background-color: #f8f8f8; color:#222; } .main-nav .navbar-nav > li { height: 80px; padding-top: 20px; } .main-nav .navbar-nav li a { font-size: 10px; letter-spacing: 2px; font-weight: 600; } .main-nav .nav-links li a { font-size: 11px; } .main-nav .navbar-nav .dropdown:hover > .dropdown-menu { display: block; } .main-nav .dropdown-submenu:hover>.dropdown-menu { display: block; } .main-nav .dropdown-submenu > .dropdown-menu.menu-left { margin-left:-320px; } .main-nav .navbar-nav.navbar-right:last-child { margin-right:0; padding-right:0; } .header-search-box .navbar-nav.nav-search .dropdown > a { padding-right:0; } .header-account .navbar-nav.nav-account .dropdown > a { padding-right:0; } .main-nav .navbar-nav.navbar-right { margin-left:5px; } .main-nav.nav-pill .navbar-nav.navbar-right { margin-left:10px; } .main-nav .navbar-nav li:hover > .megamenu { padding:0; visibility:visible; } .main-nav .navbar-nav .megamenu { display:table!important; visibility:hidden; } .main-nav .megamenu > li { display:table-cell; height:100%; min-height:100%; float:none; padding: 20px 0; vertical-align:top; max-width: 228.25px; min-width: 228.25px; width: 228.25px; } .main-nav .megamenu> li > ul { padding: 0 20px; } .main-nav .megamenu> li ul > li > a { font-size:14px; font-weight:400; } .main-nav .megamenu> li ul > li > a >.fa { padding-right:25px; } .main-nav .megamenu> li ul > li > a:hover { text-decoration: none; background-color:transparent; color:#666; } .main-nav .megamenu.disabled > a, .main-nav .megamenu.disabled > a:hover, .main-nav .megamenu.disabled > a:focus { color: #999999; } .main-nav .megamenu.disabled > a:hover, .main-nav .megamenu.disabled > a:focus { text-decoration: none; cursor: not-allowed; } .main-nav .navbar-nav .nav-account .dropdown-menu, .main-nav .navbar-nav .nav-shop .dropdown-menu, .main-nav .navbar-nav .nav-search .dropdown-menu { cursor:auto; } .main-nav .megamenu .dropdown-header { color: #000; font-size:12px; width:100%; margin-bottom:5px; margin-top:25px; padding:5px 10px; text-transform:uppercase; font-weight:600; letter-spacing:3px; } .main-nav .megamenu li:first-child.dropdown-header { margin-top:0; } .main-nav .megamenu .dropdown-header i { float:right; } } /* Safari Styles */ @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media { .main-nav { -webkit-transition: background .3s cubic-bezier(0,0,1,1) !important; -moz-transition: background .3s cubic-bezier(0,0,1,1) !important; -o-transition: background .3s cubic-bezier(0,0,1,1) !important; -ms-transition: background .3s cubic-bezier(0,0,1,1) !important; transition: background .3s cubic-bezier(0,0,1,1) !important; } }} /* Header > dark-dropdown */ @media (min-width: 992px) { .navigation.dark-dropdown .main-nav .navbar-nav .dropdown-menu { background-color: #222; border:1px solid #292929; } .navigation.dark-dropdown .main-nav .navbar-nav li a { color: #fff; } .navigation.dark-dropdown .main-nav .dropdown-menu > .dropdown-submenu:hover > a { background-color: #141414; color:#fff; } .navigation.dark-dropdown .main-nav .dropdown-submenu:hover> a:after { border-left-color: #ccc; } .navigation.dark-dropdown .main-nav .dropdown-menu > li > a:hover { background-color: #141414; color:#fff; } .navigation.dark-dropdown .main-nav .navbar-nav .dropdown:hover > .dropdown-menu { color: #fff; } .navigation.dark-dropdown .main-nav .navbar-nav .dropdown:hover > .dropdown-menu > .dropdown-submenu > .dropdown-menu { } } .menu-dropdown-link { position: relative; } .menu-dropdown { padding-left: 0; padding-top: 15px; -webkit-animation-duration: .3s; animation-duration: .3s; } .menu-dropdown > li { list-style: none; padding-bottom: 15px; } .menu-dropdown > li:last-child { padding-bottom: 0px; } .menu-dropdown > li > a { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #ccc; -webkit-transition: color .3s ease; -moz-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; } .menu-dropdown > li > a:hover { color: #fff; } .navigation.light .menu-dropdown > li > a { color: #666; } .navigation.light .menu-dropdown > li > a:hover { color: #000; } /* Header > main-nav > navbar > navbar-header > navbar-toggle > ul : bar-icon */ .main-nav .bar-icon-wrapper { padding: 0; margin:0; z-index:999; color: #fff; z-index:111; color: #222; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .navigation.light .main-nav .bar-icon-wrapper { color: #222; } .main-nav .bar-icon { height: 2px; width: 19px; background: #fff; display: block; opacity: 1; margin-top: 4px; -webkit-transition: -webkit-transform 0.15s linear; -o-transition: -o-transform 0.15s linear; -moz-transition: -moz-transform 0.15s linear; transition: transform 0.15s linear; -webkit-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%; } .navigation.light .main-nav .bar-icon { background: #222; } .main-nav .bar-icon:nth-child(1){ margin-top:0; } .main-nav .bar-icon:nth-child(2) { -webkit-transition: opacity 0.1s linear; -o-transition: opacity 0.1s linear; -moz-transition: opacity 0.1s linear; transition: opacity 0.1s linear; } .main-nav .nav > li.menu-icon > a.active .bar-icon:nth-child(1), .main-nav .navbar-toggle.active .bar-icon:nth-child(1) { -webkit-transform: rotate(45deg) translate3d(3.5px, 3.5px, 0); -o-transform: rotate(45deg) translate3d(3.5px, 3.5px, 0); -ms-transform: rotate(45deg) translate3d(3.5px, 3.5px, 0); -moz-transform: rotate(45deg) translate3d(3.5px, 3.5px, 0); transform: rotate(45deg) translate3d(3.5px, 3.5px, 0); } .main-nav .nav > li.menu-icon > a.active .bar-icon:nth-child(2), .main-nav .navbar-toggle.active .bar-icon:nth-child(2) { opacity: 0; } .main-nav .nav > li.menu-icon > a.active .bar-icon:nth-child(3), .main-nav .navbar-toggle.active .bar-icon:nth-child(3) { -webkit-transform: rotate(-45deg) translate3d(5px, -5px, 0); -o-transform: rotate(-45deg) translate3d(5px, -5px, 0); -ms-transform: rotate(-45deg) translate3d(5px, -5px, 0); -moz-transform: rotate(-45deg) translate3d(5px, -5px, 0); transform: rotate(-45deg) translate3d(5px, -5px, 0); } /* height large 100px */ @media (min-width: 992px) { .navigation.height-lg { min-height:100px; } .navigation.height-lg .main-nav, .navigation.height-lg .main-nav .navbar.navbar-default, .navigation.height-lg .main-nav a.logo, .navigation.height-lg .main-nav .navbar-container, .navigation.height-lg .main-nav .collapsing-nav, .navigation.height-lg .main-nav .navbar-nav > li { height:100px; } /* nav-pill */ .navigation.height-lg .main-nav.nav-pill .nav > li { padding-top: 35px; height:100px; } .navigation.height-lg .main-nav.shrink, .navigation.height-lg .main-nav.shrink .navbar.navbar-default, .navigation.height-lg .main-nav.shrink a.logo, .navigation.height-lg .main-nav.shrink .navbar-container, .navigation.height-lg .main-nav.shrink .collapsing-nav, .navigation.height-lg .main-nav.shrink .navbar-nav > li { height:60px; } } /*__________________________________________________________________________________________ Hearder > div : nav-hightlight or nav-pill or nav-pill-full or nav-border Screen size > 992px ____________________________________________________________________________________________*/ @media (min-width: 992px) { /* Highlight */ .main-nav.nav-highlight .nav > li > a { color: #fff; background-color: transparent; -webkit-transition: color .3s ease; -moz-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; text-transform:uppercase; font-size: 18px; } .header-centred.main-nav.nav-highlight .nav > li:first-child > a { padding-left: 0; } .header-centred.main-nav.nav-highlight .nav.navbar-right > li:first-child > a { padding-left: 15px; } .main-nav.nav-highlight .nav > li.active > a { color: #fff; background-color: transparent; } .main-nav.nav-highlight .nav > li > a:hover, .main-nav.nav-highlight .nav > li:hover > a { color: #f5fa6c !important; background-color: transparent; } body:not(.one-page) .main-nav.nav-highlight .nav > li > a:focus { color: #ccc; background-color: transparent; } /* Pill */ .main-nav.nav-pill .nav > li { margin-right:10px; } .main-nav.nav-pill .nav > li:last-child { margin-right:0px; } .main-nav.nav-pill .nav > li > a { height: 32px; border: 1px solid transparent; color: #ccc; background-color: transparent; text-transform:uppercase; -webkit-transition: color .3s ease, border .3s ease; -moz-transition: color .3s ease, border .3s ease; -o-transition: color .3s ease, border .3s ease; transition: color .3s ease, border .3s ease; font-size: 15px; } .main-nav.nav-pill .nav > li.active > a { color: #fff; border: 1px solid #fff; } .main-nav.nav-pill .nav > li > a:hover, .main-nav.nav-pill .nav > li:hover > a { color: #fff; border: 1px solid #fff !important; background-color: transparent; } .main-nav.nav-pill .nav > li.nav-shop > a:hover, .main-nav.nav-pill .nav > li.nav-shop:hover > a { border: 1px solid transparent !important; } body:not(.one-page) .main-nav.nav-pill .nav > li > a:focus { border: 1px solid transparent; background:transparent; } /* Pill - Full */ .main-nav.nav-pill.nav-pill-full .nav > li.active > a { color: #000; border: 1px solid transparent; background-color:#fff; } .main-nav.nav-pill.nav-pill-full .nav > li > a:hover, .main-nav.nav-pill.nav-pill-full .nav > li:hover > a { color: #000; border: 1px solid transparent !important; background-color: #fff; } .main-nav.nav-pill.nav-pill-full .nav > li.nav-shop > a:hover, .main-nav.nav-pill.nav-pill-full .nav > li.nav-shop:hover > a { border: 1px solid transparent !important; background-color:transparent; } body:not(.one-page) .main-nav.nav-pill.nav-pill-full .nav > li > a:focus { border: 1px solid transparent; background:transparent; color: #ccc; } /* Border */ .main-nav.nav-border .nav > li { margin-right:10px; } .main-nav.nav-border .nav > li:last-child { margin-right:0px; } .main-nav.nav-border .nav > li > a { height: 32px; border-bottom: 1px solid transparent; color: #fff; background-color: transparent !important; text-transform:uppercase; -webkit-transition: color .3s ease, border .3s ease; -moz-transition: color .3s ease, border .3s ease; -o-transition: color .3s ease, border .3s ease; transition: color .3s ease, border .3s ease; font-size: 14px; font-weight:700; padding-left: 0; padding-right: 0; margin-left: 5px; margin-right: 5px; } .main-nav.nav-border .nav > li.active > a { color: #fff; border-bottom: 1px solid #fff; } .main-nav.nav-border .nav > li > a:hover, .main-nav.nav-border .nav > li:hover > a { color: #fff; border-bottom: 1px solid #fff ; background-color: transparent; } .main-nav.nav-border .nav > li.nav-shop > a:hover, .main-nav.nav-border .nav > li.nav-shop:hover > a { border-bottom: 1px solid transparent !important; } body:not(.one-page) .main-nav.nav-border .nav > li > a:focus { color: #ccc; border-bottom: 1px solid transparent; } /* Light Color */ .navigation.transparent.light .main-nav.shrink { position:fixed; background-color: rgba(255,255,255,1); } /* Colored */ .navigation.transparent.colored .main-nav.shrink { position:fixed; background-color:#364c71; } /* Highlight */ .navigation .main-nav.nav-highlight .nav > li { padding-top: 25px; padding-bottom: 25px; height: 80px; -webkit-transition: all .3s cubic-bezier(0,0,1,1); -moz-transition: all .3s cubic-bezier(0,0,1,1); -o-transition: all .3s cubic-bezier(0,0,1,1); -ms-transition: all .3s cubic-bezier(0,0,1,1); transition: all .3s cubic-bezier(0,0,1,1); } .navigation .main-nav.nav-highlight.shrink .nav > li { padding-top: 15px; padding-bottom: 15px; height: 60px; } .navigation.light .main-nav.nav-highlight .nav > li > a { color: #888; } .navigation.light .main-nav.nav-highlight .nav > li.active > a { color: #000; } .navigation.light .main-nav.nav-highlight .nav > li > a:hover, .navigation.light .main-nav.nav-highlight .nav > li:hover > a { color: #000 !important; } body:not(.one-page) .navigation.light .main-nav.nav-highlight .nav > li > a:focus { color: #777; } /* Pill & Pill - Full */ .navigation .main-nav.nav-pill .nav > li { padding-top: 24px; padding-bottom: 24px; height: 80px; -webkit-transition: all .3s cubic-bezier(0,0,1,1); -moz-transition: all .3s cubic-bezier(0,0,1,1); -o-transition: all .3s cubic-bezier(0,0,1,1); -ms-transition: all .3s cubic-bezier(0,0,1,1); transition: all .3s cubic-bezier(0,0,1,1); } .navigation.light .main-nav.nav-pill.nav-pill-full .nav > li > a { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .navigation .main-nav.nav-pill.shrink .nav > li { padding-top: 14px; padding-bottom: 14px; height: 60px; } .navigation.light .main-nav.nav-pill .nav > li > a { color: #222; } .navigation.light .main-nav.nav-pill .nav > li.active > a { color: #000; border: 1px solid #000; } .navigation.light .main-nav.nav-pill .nav > li > a:hover, .navigation.light .main-nav.nav-pill .nav > li:hover > a { color: #000 !important; border: 1px solid #000 !important; } .navigation.light .main-nav.nav-pill.nav-pill-full .nav > li.active > a { color: #fff; border: 1px solid transparent; background-color:#000; } .navigation.light .main-nav.nav-pill.nav-pill-full .nav > li > a:hover, .navigation.light .main-nav.nav-pill.nav-pill-full .nav > li:hover > a { color: #fff !important; border: 1px solid transparent !important; background-color:#000; } .navigation.light .main-nav.nav-pill .nav > li.nav-shop > a:hover, .navigation.light .main-nav.nav-pill .nav > li.nav-shop:hover > a, .navigation.light .main-nav.nav-pill.nav-pill-full .nav > li.nav-shop > a:hover, .navigation.light .main-nav.nav-pill.nav-pill-full .nav > li.nav-shop:hover > a{ color: #000 !important; border: 1px solid transparent !important; background-color:transparent; } body:not(.one-page) .navigation.light .main-nav.nav-pill .nav > li > a:focus, body:not(.one-page) .navigation.light .main-nav.nav-pill.nav-pill-full .nav > li > a:focus{ border: 1px solid transparent; background:transparent; color: #222 !important; } /* Border */ .navigation .main-nav.nav-border .nav > li { padding-top: 25px; padding-bottom: 23px; height: 80px; -webkit-transition: all .3s cubic-bezier(0,0,1,1); -moz-transition: all .3s cubic-bezier(0,0,1,1); -o-transition: all .3s cubic-bezier(0,0,1,1); -ms-transition: all .3s cubic-bezier(0,0,1,1); transition: all .3s cubic-bezier(0,0,1,1); } .navigation .main-nav.nav-border.shrink .nav > li { padding-top: 14px; padding-bottom: 14px; height: 60px; } .navigation.light .main-nav.nav-border .nav > li > a { color: #222; } .navigation.light .main-nav.nav-border .nav > li.active > a { color: #000; border-bottom: 1px solid #000; } .navigation.light .main-nav.nav-border .nav > li > a:hover, .navigation.light .main-nav.nav-border .nav > li:hover > a { color: #000 !important; border-bottom: 1px solid #000 !important; } .navigation.light .main-nav.nav-border .nav > li.nav-shop > a:hover, .navigation.light .main-nav.nav-border .nav > li,nav-shop:hover > a { border-bottom: 1px solid transparent !important; } body:not(.one-page) .navigation.light .main-nav.nav-border .nav > li > a:focus { color: #222; } /* Menu Icon */ .navigation.light .main-nav.nav-pill .navbar-icons .nav > li.menu-icon > a, .navigation.light .main-nav.nav-pill .navbar-icons .nav > li.menu-icon > a { border: 1px solid transparent !important; } .navigation.light .main-nav.nav-border .navbar-icons .nav > li.menu-icon > a:hover, .navigation.light .main-nav.nav-border .navbar-icons .nav > li.menu-icon:hover > a { border-bottom: 1px solid transparent !important; } } /*_______________________________________________________________ Header > main-nav > full-screen-header ________________________________________________________________*/ .full-screen-header { position: fixed; top: 0; left:0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 50; display:none; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .navigation.light .full-screen-header { background: rgba(255,255,255,0.95); } .full-screen-header.active { display: block; } .full-screen-header .full-screen-nav { list-style:none; display:inline-block; padding: 0; margin:0; } .full-screen-header .full-screen-nav > li { padding: 6px 0; width: 250px; margin-bottom: 0px; } .full-screen-header .full-screen-nav > li.with-dropdown > a { padding-bottom: 10px; } .full-screen-header .full-screen-nav > li > a { font-size: 18px; text-transform:uppercase; color: #ccc; letter-spacing: 3px; -webkit-transition: color .3s ease; -moz-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; font-family: 'Playfair Display' , serif; font-weight: 400; } .full-screen-header .full-screen-nav > li.active > a, .full-screen-header .full-screen-nav > li:hover > a, .full-screen-header .full-screen-nav > li:active > a, .full-screen-header .full-screen-nav > li > a.active-dropdown { border-bottom: 1px solid #fff; } .navigation.light .full-screen-header .full-screen-nav > li.active > a, .navigation.light .full-screen-header .full-screen-nav > li:hover > a, .navigation.light .full-screen-header .full-screen-nav > li:active > a, .navigation.light .full-screen-header .full-screen-nav > li > a.active-dropdown { border-bottom: 1px solid #000; } .navigation.light .full-screen-header .full-screen-nav > li > a { color: #666; } .full-screen-header .full-screen-nav > li > a:hover { color: #fff; } .navigation.light .full-screen-header .full-screen-nav > li > a:hover { color: #000; } .full-screen-header .menu-dropdown > li { list-style: none; padding: 5px; margin-bottom: 0px; } .full-screen-header .menu-dropdown > li > a { font-size: 14px; letter-spacing: 2px; } .full-screen-header .menu-dropdown > li:last-child { padding-bottom: 5px; } .full-screen-header .nav-container { display: table; width: 100%; height: 100%; } .full-screen-header .nav-holder { display: table-cell; vertical-align: middle; width: 100%; text-align: center; } .full-screen-header .nav-holder .inner-content { max-height: 500px; overflow-y: auto; margin-right: -17px; -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .full-screen-header .menu-dropdown-link.active-dropdown { color: #fff; } .navigation.light .full-screen-header .menu-dropdown-link.active-dropdown { color: #000; } .full-screen-header .menu-dropdown-link .dropdown-icon { margin-bottom: 0; display:inline-block; position:relative; top:0; height:14px; width:14px; } .full-screen-header .menu-dropdown-link .dropdown-icon::before { position: absolute; top: 50%; left: 50%; width: 14px; height: 1px; background: #ccc; content: ''; -webkit-transition: -webkit-transform 0.35s; -moz-transition: -moz-transform 0.35s; -o-transition: -o-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .navigation.light .full-screen-header .menu-dropdown-link .dropdown-icon::before { background: #222; } .full-screen-header .menu-dropdown-link .dropdown-icon::after { position: absolute; top: 50%; left: 50%; width: 1px; height: 14px; background: #ccc; content: ''; -webkit-transition: -webkit-transform 0.35s; -moz-transition: -moz-transform 0.35s; -o-transition: -o-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .full-screen-header .credits { position: fixed; bottom: 40px; width: 100%; left: 0; text-align: center; letter-spacing: 2px; color: #ccc; font-size: 12px; text-transform: uppercase; margin-right: -17px; font-weight: 400; } .navigation.light .full-screen-header .credits { color: #000; } .navigation.light .full-screen-header .menu-dropdown-link .dropdown-icon::after { background: #222; } .full-screen-header .menu-dropdown-link.active-dropdown .dropdown-icon { margin-bottom:1px; } .full-screen-header .menu-dropdown-link:hover .dropdown-icon::after, .full-screen-header .menu-dropdown-link:hover .dropdown-icon::before, .full-screen-header .menu-dropdown-link.active-dropdown .dropdown-icon::after, .full-screen-header .menu-dropdown-link.active-dropdown .dropdown-icon::before { background: #fff; } .navigation.light .full-screen-header .menu-dropdown-link:hover .dropdown-icon::after, .navigation.light .full-screen-header .menu-dropdown-link:hover .dropdown-icon::before, .navigation.light .full-screen-header .menu-dropdown-link.active-dropdown .dropdown-icon::after, .navigation.light .full-screen-header .menu-dropdown-link.active-dropdown .dropdown-icon::before { background: #000; } .full-screen-header .menu-dropdown-link.active-dropdown .dropdown-icon::before { top:50%; -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg); -moz-transform: translate3d(-50%,-50%,0) rotate(45deg); -ms-transform: translate3d(-50%,-50%,0) rotate(45deg); -o-transform: translate3d(-50%,-50%,0) rotate(45deg); transform: translate3d(-50%,-50%,0) rotate(45deg); } .full-screen-header .menu-dropdown-link.active-dropdown .dropdown-icon::after { top:50%; -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg); -moz-transform: translate3d(-50%,-50%,0) rotate(45deg); -ms-transform: translate3d(-50%,-50%,0) rotate(45deg); -o-transform: translate3d(-50%,-50%,0) rotate(45deg); transform: translate3d(-50%,-50%,0) rotate(45deg); } .full-screen-header .menu-dropdown { padding-top:25px; padding-bottom: 0px; } .navigation .full-screen-menu-trigger { z-index: 9999; } @media (min-width: 992px) { .full-screen-header .full-screen-nav > li > a { font-size: 30px; letter-spacing: 1px; padding-bottom: 5px; text-transform:uppercase; color: #fff; } } @media (max-width: 500px) { .full-screen-header .nav-holder .inner-content { max-height: 250px; } } /*___________________________________________________________________ Header > side-header __________________________________________________________________*/ @media (max-width: 991px) { .header-left-side .navbar-toggle { right: 0; margin-right: 15px; } .header-left-side .navbar-icons { right: auto; left: 0; margin-left: 25px; } .side-header-top { display:table; width:100%; height:100%; padding: 40px 10px 40px 40px; } .side-header-top-content { display:table-cell; vertical-align: middle; } .side-header-logo { padding-right:15px; max-width:150px; } a.side-header-close span { padding-top:4px; padding-right:20px; } } @media (min-width: 992px) { .header-left-side .main-nav > .navbar-default > .container { position: relative; } .header-left-side .main-nav a.logo { left: 70px; } .header-left-side .main-nav .nav > li { height: 60px; padding-top: 15px; } .side-header-secondary-nav.side-header-bottom { position:absolute; bottom:0; } .side-header-close { display:none; } .side-header-logo { padding: 40px 40px 30px; } } .side-header { position:fixed; top:0; height:100%; width: 250px; background-color: #000; z-index: 999; overflow: hidden; -webkit-transition: all .3s cubic-bezier(0.42,0,0.58,1); -moz-transition: all .3s cubic-bezier(0.42,0,0.58,1); -o-transition: all .3s cubic-bezier(0.42,0,0.58,1); -ms-transition: all .3s cubic-bezier(0.42,0,0.58,1); transition: all .3s cubic-bezier(0.42,0,0.58,1); } a.side-header-close { color: #fff; } .navigation.light a.side-header-close { color: #000; } .navigation.light .side-header { background-color: #fafafa; } .side-header.right { right:-250px; } .side-header.right.active { right: 0; } .header-right-side .page-content { position: relative; right: 0; -webkit-transition: all .3s cubic-bezier(0.42,0,0.58,1); -moz-transition: all .3s cubic-bezier(0.42,0,0.58,1); -o-transition: all .3s cubic-bezier(0.42,0,0.58,1); -ms-transition: all .3s cubic-bezier(0.42,0,0.58,1); transition: all .3s cubic-bezier(0.42,0,0.58,1); } .header-right-side.in .page-content { right: 250px; } .header-right-side .main-nav { right: 0px !important; left:0px !important; -webkit-transition: all .3s cubic-bezier(0.42,0,0.58,1); -moz-transition: all .3s cubic-bezier(0.42,0,0.58,1); -o-transition: all .3s cubic-bezier(0.42,0,0.58,1); -ms-transition: all .3s cubic-bezier(0.42,0,0.58,1); transition: all .3s cubic-bezier(0.42,0,0.58,1); } .header-right-side.in .main-nav { right: 250px !important; left: -250px !important; } .header-right-side.in .main-nav.shrink { right: 250px; left: -250px; } .side-header.left { left: -250px; } .header-left-side .main-nav { left: 0px; -webkit-transition: all .3s cubic-bezier(0.42,0,0.58,1); -moz-transition: all .3s cubic-bezier(0.42,0,0.58,1); -o-transition: all .3s cubic-bezier(0.42,0,0.58,1); -ms-transition: all .3s cubic-bezier(0.42,0,0.58,1); transition: all .3s cubic-bezier(0.42,0,0.58,1); } /* Firefox Styles */ @-moz-document url-prefix() { .header-right-side .navigation.transparent .main-nav { position: fixed !important; } .header-left-side .navigation.transparent .main-nav { position: fixed !important; width: 100% !important; } } @media screen and (min-width:0\0) { .header-left-side .main-nav { -webkit-transition: left .3s cubic-bezier(0.42,0,0.58,1) !important; -moz-transition: left .3s cubic-bezier(0.42,0,0.58,1) !important; -o-transition: left .3s cubic-bezier(0.42,0,0.58,1) !important; -ms-transition: left .3s cubic-bezier(0.42,0,0.58,1) !important; transition: left .3s cubic-bezier(0.42,0,0.58,1) !important; } .header-right-side .main-nav { -webkit-transition: left .3s cubic-bezier(0.42,0,0.58,1),right .3s cubic-bezier(0.42,0,0.58,1) !important; -moz-transition: left .3s cubic-bezier(0.42,0,0.58,1),right .3s cubic-bezier(0.42,0,0.58,1) !important; -o-transition: left .3s cubic-bezier(0.42,0,0.58,1),right .3s cubic-bezier(0.42,0,0.58,1) !important; -ms-transition: left .3s cubic-bezier(0.42,0,0.58,1),right .3s cubic-bezier(0.42,0,0.58,1) !important; transition: left .3s cubic-bezier(0.42,0,0.58,1),right .3s cubic-bezier(0.42,0,0.58,1) !important; } } @media screen and (-webkit-min-device-pixel-ratio:0) { ::i-block-chrome, .header-left-side .main-nav { -webkit-transition: left .3s cubic-bezier(0.42,0,0.58,1) !important; -moz-transition: left .3s cubic-bezier(0.42,0,0.58,1) !important; -o-transition: left .3s cubic-bezier(0.42,0,0.58,1) !important; -ms-transition: left .3s cubic-bezier(0.42,0,0.58,1) !important; transition: left .3s cubic-bezier(0.42,0,0.58,1) !important; } ::i-block-chrome, .header-right-side .main-nav { -webkit-transition: left .3s cubic-bezier(0.42,0,0.58,1),right .3s cubic-bezier(0.42,0,0.58,1) !important; -moz-transition: left .3s cubic-bezier(0.42,0,0.58,1),right .3s cubic-bezier(0.42,0,0.58,1) !important; -o-transition: left .3s cubic-bezier(0.42,0,0.58,1),right .3s cubic-bezier(0.42,0,0.58,1) !important; -ms-transition: left .3s cubic-bezier(0.42,0,0.58,1),right .3s cubic-bezier(0.42,0,0.58,1) !important; transition: left .3s cubic-bezier(0.42,0,0.58,1),right .3s cubic-bezier(0.42,0,0.58,1) !important; } } .header-left-side.in .main-nav { left: 250px; } .side-header.left.active { left: 0; } .header-left-side .page-content { position: relative; z-index: 2; left: 0; -webkit-transition: all .3s cubic-bezier(0.42,0,0.58,1); -moz-transition: all .3s cubic-bezier(0.42,0,0.58,1); -o-transition: all .3s cubic-bezier(0.42,0,0.58,1); -ms-transition: all .3s cubic-bezier(0.42,0,0.58,1); transition: all .3s cubic-bezier(0.42,0,0.58,1); } .header-left-side.in .page-content { left: 250px; } .side-header .side-header-nav .menu-dropdown a { font-family: 'Lato', sans-serif; padding-left:15px; font-weight:400; } .side-header .side-header-nav, .side-header .side-header-secondary-nav { list-style: none; padding: 0; } .side-header .side-header-container { overflow-y: scroll; overflow-x: hidden; height: 100%; } .side-header.right .side-header-container { margin-right: -20px; } .side-header.left .side-header-container { width: 267px; } .side-header.right .side-header-container { width: 267px; } .side-header .side-header-nav { padding: 0 0 40px 0; margin-bottom: 0; border-bottom: none; } .navigation.light .side-header .side-header-nav { border-bottom: 1px solid #eee; } .side-header .side-header-secondary-nav { padding: 40px 0; margin-bottom: 0; border-bottom: 1px solid #191919; } .navigation.light .side-header .side-header-secondary-nav { border-bottom: 1px solid #eee; } .side-header .side-header-nav > li { padding: 7px 40px; } .side-header .side-header-nav > li:last-child { padding: 7px 40px 1px; } .side-header .side-header-secondary-nav > li { padding: 2px 40px; } .side-header .side-header-nav > li > a{ font-family: 'Lato', sans-serif; text-transform: uppercase; font-weight: 400; color: #aaa; font-size: 12px; letter-spacing: 2px; -webkit-transition: color .3s ease; -moz-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; } .side-header .side-header-nav > li > a.menu-dropdown-link.active-dropdown { color: #fff; } .navigation.light .side-header .side-header-nav > li > a { color: #777; } .navigation.light .side-header .side-header-nav > li > a.menu-dropdown-link.active-dropdown { color: #000; } .side-header .side-header-secondary-nav > li > a{ font-family: 'Lato', sans-serif; color: #aaa; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; -webkit-transition: color .3s ease; -moz-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; } .navigation.light .side-header .side-header-secondary-nav > li > a{ color: #999; } .side-header .side-header-secondary-nav > li.title{ padding: 7px 40px; margin-bottom: 20px; } .side-header .side-header-secondary-nav > li.title > span{ font-family: 'Lato', sans-serif; color: #ccc; font-size: 14px; font-weight: 400; text-transform: uppercase; letter-spacing:1px; text-align: center; border: 1px solid #ccc; padding: 5px 10px; } .navigation.light .side-header .side-header-secondary-nav > li.title > span{ color: #222; border: 1px solid #222; } .navigation.light .side-header { background-color: #fafafa; } .side-header .side-header-nav > li > a:hover, .side-header .side-header-secondary-nav > li > a:hover{ color: #fff; } .navigation.light .side-header .side-header-nav > li > a:hover, .navigation.light .side-header .side-header-secondary-nav > li > a:hover{ color: #000; } p.side-header .side-header-nav > li:first-child{ padding-top: 40px; } .side-header .menu-dropdown-link .dropdown-icon { padding: 7.5px 15px; display:inline-block; position:absolute; right:-30px; top:0; } .side-header .menu-dropdown-link .dropdown-icon::before { position: absolute; top: 50%; left: 50%; width: 10px; height: 1px; background: #ccc; content: ''; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; -moz-transition: opacity 0.35s, -moz-transform 0.35s; -o-transition: opacity 0.35s, -o-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .side-header .menu-dropdown-link .dropdown-icon::after { position: absolute; top: 50%; left: 50%; width: 1px; height: 10px; background: #ccc; content: ''; -webkit-transition: -webkit-transform 0.35s; -moz-transition: -moz-transform 0.35s; -o-transition: -o-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .side-header .menu-dropdown-link.active-dropdown .dropdown-icon::before { top:50%; -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg); -moz-transform: translate3d(-50%,-50%,0) rotate(45deg); -ms-transform: translate3d(-50%,-50%,0) rotate(45deg); -o-transform: translate3d(-50%,-50%,0) rotate(45deg); transform: translate3d(-50%,-50%,0) rotate(45deg); } .navigation.light .side-header .menu-dropdown-link .dropdown-icon::after, .navigation.light .side-header .menu-dropdown-link .dropdown-icon::before { background: #777; } .side-header .menu-dropdown-link:hover .dropdown-icon::after, .side-header .menu-dropdown-link:hover .dropdown-icon::before, .side-header .menu-dropdown-link.active-dropdown .dropdown-icon::after, .side-header .menu-dropdown-link.active-dropdown .dropdown-icon::before { background: #fff; } .navigation.light .side-header .menu-dropdown-link:hover .dropdown-icon::after, .navigation.light .side-header .menu-dropdown-link:hover .dropdown-icon::before, .navigation.light .side-header .menu-dropdown-link.active-dropdown .dropdown-icon::after, .navigation.light .side-header .menu-dropdown-link.active-dropdown .dropdown-icon::before { background: #000; } .side-header .menu-dropdown-link.active-dropdown .dropdown-icon::after { top:50%; -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg); -moz-transform: translate3d(-50%,-50%,0) rotate(45deg); -ms-transform: translate3d(-50%,-50%,0) rotate(45deg); -o-transform: translate3d(-50%,-50%,0) rotate(45deg); transform: translate3d(-50%,-50%,0) rotate(45deg); } .side-header-secondary-nav.side-header-bottom { border-bottom:none; padding:40px; } .side-header-copyright { text-transform: uppercase; font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 400; color:#aaa; } .navigation.light .side-header-copyright { color:#222; } @media (max-width: 991px) { .header-right-side .navigation, .header-right-side .main-nav, .header-left-side .navigation, .header-left-side .main-nav { top: auto !important; } .header-right-side.nav-icons-right .navbar-header, .header-left-side.nav-icons-right .navbar-header { text-align: center; } } /*________________________________________________________________________ Header - transparent _______________________________________________________________________*/ .navigation.transparent { z-index: 500; position:fixed; } .navigation.transparent .main-nav { background-color:transparent; border-bottom: 0; } .navigation.transparent .main-nav.shrink { background-color: #000; } .navigation.transparent.light .main-nav.shrink { background-color: #fff; } .navigation.transparent .main-nav .navbar-default { /*position: inherit;*/ } .navigation:not(.transparent):not(.light){ background: #000; } @media (max-width: 991px) { .navigation.transparent { background-color: transparent; top:0; width:100%; } .navigation.transparent .main-nav { padding: 0; } .navigation.transparent .navbar-collapse { border-top:0; } } @media (min-width: 992px) { .navigation.transparent { background-color: transparent; width:100%; } .navigation.transparent .main-nav .collapsing-nav { height: inherit !important; } } /*________________________________________________________________________ Header > div : full-width _______________________________________________________________________*/ @media (min-width: 992px) { .main-nav.full-width > .navbar-default > .container { width: 100%; padding-left:20px; padding-right:20px; } } /*________________________________________________________________________ Header > div : header-right / header-centered only Screen > 992px _______________________________________________________________________*/ @media (min-width: 992px) { /* Right*/ .header-right .navbar-default { height: 60px; } .header-right .collapsing-nav { float: right; } .header-right .nav > li { height: 60px; padding-top:10px; } .header-right .nav > li > a { height: 30px; padding-top: 5px; padding-bottom:5px; border-radius: 0px; color: #000; } /* Center */ .header-centred.main-nav .navbar-container { width: 100%; } .header-centred.main-nav .collapsing-nav { float: none; width:100%; text-align: center; clear:both; } .header-centred.main-nav .nav.navbar-nav { text-align: center; float:none; display:inline-block; } .header-centred.main-nav .nav.navbar-right { width:auto; text-align: none; position:absolute; right: 30px; } .header-centred .nav > li > a { height: 30px; padding-top: 5px; padding-bottom:5px; border-radius: 0px; color: #000; } .navigation:not(.transparent) .header-centred .navbar-nav.nav .megamenu { top: 80px; } .navigation .header-centred.shrink .navbar-nav.nav .megamenu { top: 60px; } } /* =============================================================== Box Icon ================================================================== */ .box-icon { margin:30px 0; } .box-icon>a, .box-icon .box-icon-title { text-decoration:none !important; display:block; } .box-icon .box-icon-title>i { height: 60px; width: 60px; line-height: 62px; font-size: 30px; margin-right:15px; background-color:#222; text-align:center; color:#fff; -webkit-transition: all .200s; -moz-transition: all .200s; -o-transition: all .200s; transition: all .200s; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } section.dark .box-icon .box-icon-title>i { background-color:#666; } .box-icon .box-icon-title.box-icon-transparent>i { color:#414141; background-color:transparent; } section.dark .box-icon .box-icon-title.box-icon-transparent>i { color:#fff; } .box-icon.box-icon-left .box-icon-title>i { float:left; } .box-icon.box-icon-round .box-icon-title>i { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .box-icon .box-icon-title>h3 { font-size:18px; line-height:22px; margin:0; -webkit-transition: all .200s; -moz-transition: all .200s; -o-transition: all .200s; transition: all .200s; } .box-icon .box-icon-title>img+h2, .box-icon .box-icon-title>img+h3, .box-icon .box-icon-title>img+h4, .box-icon .box-icon-title>img+h5 { font-size:16px; line-height:16px; margin-top:20px; } .box-icon p { margin:15px 0; } .box-icon a.box-icon-more { display:block; text-align:right; position:relative; color:#000; } section.dark .box-icon a.box-icon-more { color:#fff; } .box-icon a.box-icon-more:after { font-family: FontAwesome; content: "\f105"; padding-left:10px; top:50%; margin-top:-2px; } .box-icon.box-icon-right .box-icon-title>i { float:right; margin-right:0; margin-left:10px; } .box-icon.box-icon-right { text-align:right; } @media only screen and (max-width: 760px) { .box-icon.box-icon-right .box-icon-title>i { float:left; margin-right:10px; margin-left:0; } .box-icon.box-icon-right { text-align:left; } .box-icon .box-icon-title>h3 { font-size:14px; } } /* ========================================================================== Sections ============================================================================= */ section { padding-top: 100px; padding-bottom: 100px; } .section-video.pad-lg, .section-colored.pad-lg, .section-pattern.pad-lg, .section-parallax.pad-lg .section-overlay-colored { padding-top:200px !important; padding-bottom:200px !important; } .section-video { background-repeat: no-repeat; background-color: #000; background-position: center 0; width: 100%; padding: 100px 0; overflow: hidden; position: relative; } .section-video.video-lg { padding: 400px 0; } .section-video .embed, .section-video object, .section-video video { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .section-video .video-overlay { background: rgba(0,0,0,0.2); position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1; } .section-video .video-overlay.video-overlay-dark { background: rgba(0,0,0,0.5); } .video-content { z-index: 1; } .section-colored { background-color: #fff; padding-top: 100px; padding-bottom: 100px; } .section-pattern { padding-top: 100px; padding-bottom: 100px; } .section-parallax { background-size: 100%; background-attachment: fixed; padding-top: 100px; padding-bottom: 100px; } .section-img { background-size: cover; padding-top: 100px; padding-bottom: 100px; } .section-side-image { padding: 0px; position: relative; } .section-side-image .image-container { overflow: hidden; position: absolute; height: 100%; padding: 0px; top: 0px; } .image-holder { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-size: cover !important; z-index: 0; } .section-side-image .image-container.pull-right{ right: 0; } .side-image-content { padding-top: 100px; padding-bottom: 100px; } .section-border-image { position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; border: 1px solid #fff; z-index: 1; } .section-border-image-dark { border: 1px solid #000; } .with-overlay { padding: 0; } .with-overlay .section-overlay { padding-top: 100px; padding-bottom: 100px; background-color: rgba(0, 0, 0, 0.6); } .with-overlay .section-overlay-light { padding-top: 100px; padding-bottom: 100px; background-color: rgba(255, 255, 255, 0.6); } section.text-light { color:#fff; } section.text-dark { color:#222; } @media (max-width: 767px) { section, .section-colored { padding-top: 50px; padding-bottom: 50px; } } /* ========================================================================== Portfolio ============================================================================= */ .filters{ text-align:center; list-style:none; padding:0; margin:0 0 70px; } .filters li{ display:inline-block; margin:10px 10px 0 0; } .filters li > a{ border:2px solid transparent; font-weight:400; font-size:20px; text-transform:uppercase; color:inherit; padding:5px 15px; } .filters li > a.current{ background:#111; color:#fff; border-color:#111; } .works-grid-wrapper{ margin-left:-8px; margin-right:-8px; padding:8px 0; } .work-item{ position:relative; overflow:hidden; width:25%; } .work-grid-3 .work-item{ width:33.3333%; } .work-grid-2 .work-item{ width:50%; } .works-grid-gutter .work-item{ padding:8px 8px; } .work-wrapper{ position:relative; } .work-item .work-thumbnail:after{ position:absolute; display:block; content:""; bottom:0; right:0; left:0; top:0; z-index:1; -webkit-transition:all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000); -moz-transition:all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000); -o-transition:all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000); transition:all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000); } .work-item:hover .work-thumbnail:after{ background:rgba(255, 255, 255, 0.8); } .work-item img{ height:auto; width:100%; } .work-caption{ position:absolute; top:50%; width:100%; padding:0 20px; text-align:center; z-index:1; opacity:0; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); -webkit-transition-delay:.2s; -moz-transition-delay:.2s; -o-transition-delay:.2s; transition-delay:.2s; } .work-item:hover .work-caption{ opacity:1; } .work-title{ letter-spacing:4px; font-weight:700; font-size:13px; opacity:0; margin:0 0 15px; -webkit-transform:translateY(10px); -moz-transform:translateY(10px); -o-transform:translateY(10px); transform:translateY(10px); -webkit-transition:.3s cubic-bezier(.215, .61, .355, 1) 0s; -moz-transition:.3s cubic-bezier(.215, .61, .355, 1) 0s; -o-transition:.3s cubic-bezier(.215, .61, .355, 1) 0s; transition:.3s cubic-bezier(.215, .61, .355, 1) 0s; } .work-item:hover .work-title{ -webkit-transition-delay:.2s; -moz-transition-delay:.2s; -o-transition-delay:.2s; transition-delay:.2s; } .work-category{ font-style:italic; font-weight:400; font-size:12px; opacity:0; margin:0; -webkit-transform:translateY(-10px); -moz-transform:translateY(-10px); -o-transform:translateY(-10px); transform:translateY(-10px); -webkit-transition:.3s cubic-bezier(.215, .61, .355, 1) 0s; -moz-transition:.3s cubic-bezier(.215, .61, .355, 1) 0s; -o-transition:.3s cubic-bezier(.215, .61, .355, 1) 0s; transition:.3s cubic-bezier(.215, .61, .355, 1) 0s; } .work-category a{ color:#999; } .work-item:hover .work-category{ -webkit-transition-delay:.3s; -moz-transition-delay:.3s; -o-transition-delay:.3s; transition-delay:.3s; } .work-item:hover .work-title, .work-item:hover .work-category{ opacity:1; -webkit-transform:translateY(0); -moz-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0); } .work-link{ position:absolute; bottom:0; right:0; left:0; top:0; z-index:3; } @media (max-width: 1200px){ .work-item{ width:50%; } } @media (max-width: 767px){ .work-item, .work-grid-2 .work-item, .work-grid-3 .work-item { width:100%; } } /*!------------------------------------------------------------------ [Portfolio Single] */ .portfolio-post blockquote{ text-align:left; font-size:22px; margin:0 0 30px; } .portfolio-post blockquote:before{ content:none; } /* ========================================================================== Owl Carousel ============================================================================= */ /*Dark/Default Pagination*/ .owl-theme .owl-controls .owl-page span, .owl-theme .owl-controls .owl-page.active span { background-color: #000; opacity: 0.2; width: 25px; height: 3px; margin: 5px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .owl-theme .owl-controls .owl-page.active span { opacity: 1; } .owl-theme.owl-arrows .owl-controls .owl-buttons div { opacity: 0; position: absolute; top: 50%; background: #222; color: #fff; padding: 0; height: 70px; width: 40px; border-radius: 0; line-height: 70px; font-size: 18px; margin-top: -35px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .owl-theme.owl-arrows .owl-controls .owl-buttons div:hover { background: #000; } .owl-theme.owl-arrows .owl-controls .owl-buttons .owl-prev { left:-40px; } .owl-theme.owl-arrows .owl-controls .owl-buttons .owl-next { right:-40px; } .owl-theme.owl-arrows:hover .owl-controls .owl-buttons div { opacity: 1; } .owl-theme.owl-arrows:hover .owl-controls .owl-buttons .owl-prev { left:0; } .owl-theme.owl-arrows:hover .owl-controls .owl-buttons .owl-next { right:0; } /*Light Pagination*/ .owl-theme-light.owl-theme .owl-controls .owl-page span, .owl-theme-light.owl-theme .owl-controls .owl-page.active span { background-color: #fff; opacity: 0.4; width: 25px; height: 3px; margin: 5px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .owl-theme-light.owl-theme .owl-controls .owl-page.active span { opacity: 1; } .owl-theme-light.owl-arrows .owl-controls .owl-buttons div { background: #eee; color: #000; } .owl-theme-light.owl-arrows .owl-controls .owl-buttons div:hover { background: #fff; } /* Arrow On View */ .owl-theme.owl-arrows.owl-arrows-view .owl-controls .owl-buttons div { opacity: 1; } .owl-theme.owl-arrows.owl-arrows-view .owl-controls .owl-buttons .owl-prev { left:0; } .owl-theme.owl-arrows.owl-arrows-view .owl-controls .owl-buttons .owl-next { right:0; } /* Plain Arrows */ .owl-theme.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons div { background: transparent; color: #999; width:auto; font-size:50px; } .owl-theme.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons div:hover { color: #000; background:transparent; } .owl-theme-light.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons div { color: #ccc; background:transparent; } .owl-theme-light.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons div:hover { background:transparent; } .owl-theme.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons .fa { display:none; } .owl-theme.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons .owl-next { position:absolute; top:50%; margin-top:-15px; border-right: 1.5px solid #999; border-bottom: 1.5px solid #999; width: 30px; height: 30px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .owl-theme.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons .owl-next:hover { border-right: 1.5px solid #000; border-bottom: 1.5px solid #000; } .owl-theme-light.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons .owl-next { border-right: 1.5px solid #aaa; border-bottom: 1.5px solid #aaa; } .owl-theme-light.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons .owl-next:hover { border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; } .owl-theme.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons .owl-prev { position:absolute; top:50%; margin-top:-15px; border-left: 1.5px solid #999; border-top: 1.5px solid #999; width: 30px; height: 30px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .owl-theme.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons .owl-prev:hover { border-left: 1.5px solid #000; border-top: 1.5px solid #000; } .owl-theme-light.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons .owl-prev { border-left: 1.5px solid #aaa; border-top: 1.5px solid #aaa; } .owl-theme-light.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons .owl-prev:hover { border-left: 1.5px solid #fff; border-top: 1.5px solid #fff; } .owl-theme.owl-arrows.owl-arrows-plain.owl-arrows-view .owl-controls .owl-buttons .owl-next, .owl-theme.owl-arrows.owl-arrows-plain:hover .owl-controls .owl-buttons .owl-next { right:10px; } .owl-theme.owl-arrows.owl-arrows-plain.owl-arrows-view .owl-controls .owl-buttons .owl-prev, .owl-theme.owl-arrows.owl-arrows-plain:hover .owl-controls .owl-buttons .owl-prev { left:10px; } /* Owl Slider */ .owl-theme.owl-slider .item, .owl-theme.owl-slider.owl-arrows { padding:0; } .owl-theme.owl-slider .owl-pagination { position:absolute; bottom:0; left:0; right:0; margin:0; z-index:1; cursor:auto; } .owl-theme.owl-slider.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons .owl-prev, .owl-theme.owl-slider.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons .owl-next { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform:none; border:none; margin:0; width: 50%; height: 100%; top: 0; left: 0; cursor: url('../owl-prev.png'), pointer; } .owl-theme.owl-slider.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons .owl-next { left:inherit; right:0; cursor:url('../owl-next.png'), pointer; } .owl-theme.owl-theme-light.owl-slider.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons .owl-prev { cursor: url('../owl-prev-light.png'), pointer; } .owl-theme.owl-theme-light.owl-slider.owl-arrows.owl-arrows-plain .owl-controls .owl-buttons .owl-next { left:inherit; right:0; cursor:url('../owl-next-light.png'), pointer; } /* Full Screen Owl Slider */ .slider-item { width: 100%; height: 100%; background-size: cover; background-position:fixed; } .owl-theme.full-width { padding: 0; } .owl-theme.full-width .item { padding: 0; } .owl-theme.full-width.owl-arrows.owl-arrows-plain.owl-arrows-view .owl-controls .owl-buttons .owl-prev, .owl-theme.full-width.owl-arrows.owl-arrows-plain:hover .owl-controls .owl-buttons .owl-prev { left:50px; } .owl-theme.full-width.owl-arrows.owl-arrows-plain.owl-arrows-view .owl-controls .owl-buttons .owl-next, .owl-theme.full-width.owl-arrows.owl-arrows-plain:hover .owl-controls .owl-buttons .owl-next { right:50px; } /*Default Theme Settings*/ .owl-carousel .item{ padding: 0 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .owl-arrows.owl-carousel { padding: 0 80px; } .owl-theme .owl-controls { margin-top:50px; } .owl-theme.owl-arrows .owl-controls { margin-top:0px; } .owl-theme .item:hover > img { opacity: 1; } .owl-theme.pagination-left .item, .owl-theme.pagination-right .item { padding:0; } .owl-theme.pagination-left .owl-controls .owl-pagination { text-align:left; } .owl-theme.pagination-left .owl-controls .owl-page span, .owl-theme.pagination-left .owl-controls .owl-page.active span { margin-right:10px; margin-left:0; } .owl-theme.pagination-right .owl-controls .owl-pagination { text-align:right; } .owl-theme.pagination-right .owl-controls .owl-page span, .owl-theme.pagination-right .owl-controls .owl-page.active span { margin-right:0; margin-left:10px; } /*Featured - Style 1*/ .featured-owl .owl-arrows.owl-carousel { margin-bottom: 70px; padding:0; } .featured-owl .owl-arrows.owl-carousel .item { padding: 350px 100px 0; } .featured-owl .owl-arrows.owl-carousel .item:hover img { opacity:1; } .featured-owl .featured-heading { position: absolute; top: 200px; width: 100%; left: 0; right: 0; text-align: center; margin: 0; text-transform: uppercase; letter-spacing: 1px; } .featured-owl .owl-theme.owl-arrows .owl-controls .owl-pagination { position: absolute; top: 250px; left: 0; right: 0; } .featured-owl .owl-theme.owl-arrows .owl-controls .owl-buttons div { opacity: 1; position: absolute; top: 100%; background: #000; color: #fff; padding: 0; height: 70px; width: 47.5%; margin-top: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; border-top: 1px solid #161616; border-bottom: 1px solid #161616; margin:0; } .featured-owl .owl-theme-light.owl-theme.owl-arrows .owl-controls .owl-buttons div { background: #fff; color: #000; border-top: 1px solid #f6f6f6; border-bottom: 1px solid #f6f6f6; } .featured-owl .owl-theme.owl-arrows .owl-controls .owl-buttons .owl-prev { left:0; margin-left:0; } .featured-owl .owl-theme.owl-arrows .owl-controls .owl-buttons .owl-prev:after { content:'PREV'; letter-spacing: 2px; margin-left:10px; } .featured-owl .owl-theme.owl-arrows .owl-controls .owl-buttons .owl-prev:hover { padding-right: 30px; } .featured-owl .owl-theme.owl-arrows .owl-controls .owl-buttons .owl-next { right:0; margin-right:0; } .featured-owl .owl-theme.owl-arrows .owl-controls .owl-buttons .owl-next:before { content:'NEXT'; letter-spacing: 2px; margin-right: 10px; } .featured-owl .owl-theme.owl-arrows .owl-controls .owl-buttons .owl-next:hover { padding-left: 30px; } .featured-owl .btn-featured { position: absolute; bottom: 0; left:47.5%; height: 70px; width: 5%; font-size: 20px; line-height: 60px; border: 1px solid #262626 !important; background-color:#000; color:#fff; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .featured-owl .btn-featured:hover { background-color:#262626; } .featured-owl .btn-featured.btn-featured-light { border: 1px solid #f6f6f6 !important; background-color: #fff; color:#000; } .featured-owl .btn-featured.btn-featured-light:hover { background-color:#fafafa; } /*Featured - Style 2*/ .featured-owl-side .owl-arrows.owl-carousel { padding: 0; } .featured-owl-side .owl-theme.owl-arrows .owl-controls .owl-buttons div { opacity: 1; top:inherit; bottom: 25px; background: transparent; border: 2px solid #000; color: #000; font-weight: bold; height: 50px; width: 50px; line-height: 50px; } .featured-owl-side .owl-theme.owl-arrows .owl-controls .owl-buttons div:hover { background: #000; color: #fff; } .featured-owl-side .owl-theme-light.owl-theme.owl-arrows .owl-controls .owl-buttons div { border: 2px solid #fff; color: #fff; } .featured-owl-side .owl-theme-light.owl-theme.owl-arrows .owl-controls .owl-buttons div:hover { background: #fff; color: #000; } .featured-owl-side .owl-theme.owl-arrows .owl-controls .owl-buttons .owl-prev { right: 55px; left: inherit; } .featured-owl-side .owl-theme.owl-arrows .owl-controls .owl-buttons .owl-next { right:0; } /* Full Width */ .owl-carousel.full-width { padding: 0; } .owl-carousel.full-width .item { padding: 0; } /* ========================================================================== Social Icon ============================================================================= */ .social-icon { margin: 0 5px 5px 0; width: 80px; height: 80px; /*text-shadow: 1px 1px 1px rgba(0,0,0,.3);*/ border-color: transparent; overflow: hidden; display:inline-block; text-decoration:none !important; text-align: center; cursor: pointer; font-style: normal; letter-spacing: 0em !important; color: #eaeaea !important; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .social-icon:hover>i { color:#fff; } .social-icon i { display: block; position: relative; width: 80px; height: 80px; margin-top:6px; font-size: 40px; } .social-icons h5 { font-weight:100; } .social-icons li { padding:0 20px; } /* Large */ .social-icon.icon-lg { width: 120px; height: 120px; } .social-icon.icon-lg i { width: 120px; height: 120px; font-size: 60px; } body:not(.device-touch) .social-icon { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } body:not(.device-touch) .social-icon i { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .social-facebook:hover { background-color: #3B5998 !important; } .social-facebook { background-color: #3B5998; } .social-twitter:hover { background-color: #00ACEE !important; } .social-twitter { background-color: #00ACEE; } .social-youtube:hover { background-color: #C4302B !important; } .social-youtube { background-color: #C4302B; } .social-vimeo:hover { background-color: #86C9EF !important; } .social-vimeo { background-color: #86C9EF; } .social-googleplay:hover { background-color: #DD4B39 !important; } .social-googleplay { background-color: #DD4B39; } .social-instagram:hover { background-color: #a57d60 !important; } .social-instagram { background-color: #a57d60; } /* ========================================================================== Button style ============================================================================= */ button { font-family: 'Roboto Condensed' sans-serif; } .btn:focus, .btn:active:focus, .btn.active:focus { outline: none; } .btn { border-radius: 0px; font-size: 14px !important; padding: 10px 20px !important; font-weight:400; font-family:'Open Sans','Nanum Gothic', serif; text-transform: none; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .btn-lg { font-size: 18px !important; padding:14px 22px !important; } .btn-xs { font-size: 12px !important; padding: 5px 15px !important; } .btn-round { -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px } .btn:active, .btn.active { box-shadow: none; } .btn-default, .btn-default:focus, .tp-caption .btn-default, .tp-caption .btn-default:focus { color: #fff !important; background-color: #222 !important; border: 1px solid #222 !important; } .btn-default:hover, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default, .tp-caption .btn-default:hover, .tp-caption .btn-default:active, .tp-caption .btn-default.active, .open > .tp-caption .dropdown-toggle.btn-default { color: #fff !important; background-color: #222 !important; border: 1px solid #222 !important; } .btn-light, .btn-light:focus, .tp-caption .btn-light, .tp-caption .btn-light:focus { color: #222 !important; background-color: #fff !important; border: 1px solid #fff !important; } .btn-dark, .btn-dark:focus, .tp-caption .btn-dark, .tp-caption .btn-dark:focus { color: #fff !important; background-color: #222 !important; border: 1px solid #222 !important; } .btn-dark:hover, .btn-dark:active, .btn-dark.active, .open > .dropdown-toggle.btn-dark, .tp-caption .btn-dark:hover, .tp-caption .btn-dark:active, .tp-caption .btn-dark.active, .open > .tp-caption .dropdown-toggle.btn-dark { color: #fff !important; } .btn-light.btn-colored:hover, .btn-light.btn-colored:active, .tp-caption .btn-light.btn-colored:hover, .tp-caption .btn-light.btn-colored:active { background-color: #222 !important; border: 1px solid #222 !important; } .btn-light.btn-colored:focus, .tp-caption .btn-light.btn-colored:focus { background-color: #fff !important; border: 1px solid #fff !important; } .btn-dark.btn-light:hover, .btn-dark.btn-light:active, .tp-caption .btn-dark.btn-light:hover, .tp-caption .btn-dark.btn-light:active { color: #222 !important; background-color: #fff !important; border: 1px solid #fff !important; } .btn-solid:hover, .btn-solid:active, .btn-solid.active, .open > .dropdown-toggle.btn-solid, .tp-caption .btn-solid:hover, .tp-caption .btn-solid:active, .tp-caption .btn-solid.active, .open > .tp-caption .dropdown-toggle.btn-solid { color: #222 !important; background-color: #fff !important; } .btn-solid, .btn-solid:focus, .tp-caption .btn-solid, .tp-caption .btn-solid:focus { background-color: transparent !important; border: 1px solid #fff !important; color: #fff !important; } .btn-solid-dark:hover, .btn-solid-dark:active, .btn-solid-dark.active, .open > .dropdown-toggle.btn-solid-dark, .tp-caption .btn-solid-dark:hover, .tp-caption .btn-solid-dark:active, .tp-caption .btn-solid-dark.active, .open > .tp-caption .dropdown-toggle.btn-solid-dark { color: #fff !important; background-color: #222 !important; border: 1px solid #222 !important; } .btn-solid-dark, .btn-solid-dark:focus, .tp-caption .btn-solid-dark, .tp-caption .btn-solid-dark:focus { background-color: transparent !important; border: 1px solid #222 !important; color: #222 !important; } .btn-full-width { width: 100%; } /* ================================================================ Overlay ================================================================*/ .overlay-film:before, .overlay-30:before, .overlay-60:before, .overlay-90:before{ position:absolute; height:100%; width:100%; z-index:0; } .overlay-30:before{ background:rgba(0, 0, 0, 0.3); content:""; left:0; top:0; } .overlay-60:before{ background:rgba(0, 0, 0, 0.5); content:""; left:0; top:0; } .overlay-90:before{ background:rgba(0, 0, 0, 0.9); content:""; left:0; top:0; } .overlay-film:before{ background-image:url(../images/dot.gif); opacity:0.15; content:""; left:0; top:0; } .overlay-film, .overlay-30, .overlay-60, .overlay-90{ color:#fff; } .overlay-film h1, .overlay-film h2, .overlay-film h3, .overlay-film h4, .overlay-film h5, .overlay-film h6, .overlay-film .module-subtitle, .overlay-30 h1, .overlay-30 h2, .overlay-30 h3, .overlay-30 h4, .overlay-30 h5, .overlay-30 h6, .overlay-30 .module-subtitle, .overlay-60 h1, .overlay-60 h2, .overlay-60 h3, .overlay-60 h4, .overlay-60 h5, .overlay-60 h6, .overlay-60 .module-subtitle, .overlay-90 h1, .overlay-90 h2, .overlay-90 h3, .overlay-90 h4, .overlay-90 h5, .overlay-90 h6, .overlay-90 .module-subtitle{ color:#fff; } /* ================================================================ Arrow ================================================================*/ .arrow-left, .arrow-right, .arrow-top, .arrow-bottom { position: relative; } .arrow-left:after, .arrow-right:after, .arrow-top:after, .arrow-bottom:after { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(221, 221, 221, 0); border-width: 50px; } .arrow-left:after { right: 100%; top: 50%; border-right-color:#46b8e7; margin-top: -50px; } .arrow-right:after { left: 100%; top: 50%; border-left-color:#46b8e7; margin-top: -50px; } .arrow-top:after { bottom: 100%; left: 50%; border-bottom-color: #c4edfd; margin-left: -50px; } .arrow-bottom:after { top: 100%; left: 50%; border-top-color: #eee; margin-left: -50px; } @media (max-width:768px){ .arrow-left:after, .arrow-right:after { display:none; } } /* ========================================================================== Height Equal ============================================================================= */ .inside { margin-top: 20px; margin-bottom: 20px; background: #ededed; background: -webkit-gradient(linear, left top, left bottom,color-stop(0%, #f4f4f4), color-stop(100%, #ededed)); background: -moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%); background: -ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%); } .inside-full-height { /* // if you want to give content full height give him height: 100%; // with content full height you can't apply margins to the content // content full height does not work in ie http://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100 */ height: 100%; margin-top: 0; margin-bottom: 0; } /* columns of same height styles */ .row-height { display: table; table-layout: fixed; height: 100%; width: 100%; } .col-height { display: table-cell; float: none; height: 100%; } .col-top { vertical-align: top; } .col-middle { vertical-align: middle; } .col-bottom { vertical-align: bottom; } @media (min-width: 480px) { .row-xs-height { display: table; table-layout: fixed; height: 100%; width: 100%; } .col-xs-height { display: table-cell; float: none; height: 100%; } .col-xs-top { vertical-align: top; } .col-xs-middle { vertical-align: middle; } .col-xs-bottom { vertical-align: bottom; } } @media (min-width: 768px) { .row-sm-height { display: table; table-layout: fixed; height: 100%; width: 100%; } .col-sm-height { display: table-cell; float: none; height: 100%; } .col-sm-top { vertical-align: top; } .col-sm-middle { vertical-align: middle; } .col-sm-bottom { vertical-align: bottom; } } @media (min-width: 992px) { .row-md-height { display: table; table-layout: fixed; height: 100%; width: 100%; } .col-md-height { display: table-cell; float: none; height: 100%; } .col-md-top { vertical-align: top; } .col-md-middle { vertical-align: middle; } .col-md-bottom { vertical-align: bottom; } } @media (min-width: 1200px) { .row-lg-height { display: table; table-layout: fixed; height: 100%; width: 100%; } .col-lg-height { display: table-cell; float: none; height: 100%; } .col-lg-top { vertical-align: top; } .col-lg-middle { vertical-align: middle; } .col-lg-bottom { vertical-align: bottom; } } /* ============================================================== Map ================================================================= */ .map-show { width:100%; height:300px; } @media (min-width: 768px) { .map-show { height:100%; } } .map-show.small { height:400px; } /* ============================================================== History ================================================================= */ .yami-content { background:none; font-size:16px; /*width:100%; height:100%;*/ } .yami-content a { color:inherit; text-decoration:none; } .yami-content a:hover { text-decoration:underline; } .yami-container { overflow:hidden; } .yami-thumbnails { margin-top:10px; } .yami-thumbnails ul { display:inline-block; padding:0; } .yami-thumbnails ul li { display:inline-block; vertical-align:text-top; width:44%; } .is-hidden { visibility:hidden; } .default-effect { visibility:visible; -moz-animation:default-effect .6s ease-in-out; -o-animation:default-effect .6s ease-in-out; -webkit-animation:default-effect .6s ease-in-out; animation:default-effect .6s ease-in-out; } /* history style-1 */ .yami-timeline-1 { border-left:4px solid #222; /*�����÷�*/ border-bottom-right-radius:4px; border-top-right-radius:4px; background:rgba(255,255,255,.03); color:#222; font-family:'Source Sans Pro',sans-serif; margin:50px auto; letter-spacing:.5px; position:relative; line-height:1.4em; font-size:1.03em; padding:50px; list-style:none; text-align:left; font-weight:100; max-width:100%; } .yami-timeline-1 h1,.yami-timeline-1 h2,.yami-timeline-1 h3 { letter-spacing:1.5px; font-weight:600; font-size:1.4em; } .yami-timeline-1 .event { border-bottom:1px dashed rgba(255,255,255,.1); padding-bottom:25px; margin-bottom:50px; position:relative; } .yami-timeline-1 .event .event-content { margin-top:10px; } .yami-timeline-1 .event:last-of-type { padding-bottom:0; margin-bottom:0; border:none; } .yami-timeline-1 .event:before,.yami-timeline-1 .event:after { position:absolute; display:block; top:0; } .yami-timeline-1 .event:before { left:-217.5px; content:attr(data-date); text-align:right; font-weight:100; font-size:.9em; min-width:120px; } .yami-timeline-1 .event:after { left:-61.85px; border-radius:50%; height:20px; width:20px; content:""; top:0px; } .yami-timeline-body { padding-left:200px; } .yami-timeline-1 .event:before { color:#222; } .yami-timeline-1 .event:after { background:#ff4141; } @media only screen and (max-width:959px) { .yami-timeline-1 { max-width:100%; margin:25px 0 25px 25px; } .yami-timeline-1 .event-content:before { content:attr(data-date); display:block; font-size:14px; margin-bottom:5px; color:#ff4141; } .yami-timeline-1 .event:before { content:''; } .yami-timeline-body { padding-left:0; } } /* ========================================================================== Tabs ============================================================================= */ .tab-theme .tab-content > .active { padding: 0; border: none; } ul.tab-theme > li { display: inline-block; } ul.tab-theme > li > a { text-transform: uppercase; letter-spacing: 1px; font-size: 15px; color: #222; margin-bottom: 5px; } ul.tab-theme > li:last-child > a { margin-bottom:0; } .tab-theme.tab-bg, .tab-theme.tab-border, .tab-theme.tab-highlight, .tab-theme.tab-underline, .tab-theme.tab-lined { padding-top:0px; } /*Tabs Icons*/ ul.tab-icons { text-align: center; padding-top:0px; } .tab-icons i { font-size:40px; } .tab-icons > li > a { background-color: transparent; padding: 25px 50px; text-align: center; } .tab-icons > li > a > span.icon-tab { font-size: 50px; } .tab-icons > li > a > .icon-text { margin:0; font-size:16px } .tab-icons > li > a > .icon-text, .tab-icons > li > a > .icon-tab { color: #222; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tab-icons > li.active > a > .icon-text, .tab-icons> li > a:hover> .icon-text, .tab-icons > li > a:focus > .icon-text, .tab-icons > li.active > a > .icon-tab, .tab-icons> li > a:hover > .icon-tab, .tab-icons > li > a:focus> .icon-tab { color: #222; } .tab-icons > li.active > a, .tab-icons > li.active > a:hover, .tab-icons > li.active > a:focus, .tab-icons > li.active > a, .tab-icons > li.active > a:hover, .tab-icons > li.active > a:focus, .tab-icons> li > a:hover, .tab-icons > li > a:focus { background-color: transparent; } /*Tabs Underline*/ .tab-underline > li > a { background-color: transparent; padding: 0 15px 10px; margin:0 20px; border-bottom: 3px solid transparent; } .tab-underline > li.active > a, .tab-underline > li.active > a:hover, .tab-underline > li.active > a:focus, .tab-underline > li.active > a, .tab-underline > li.active > a:hover, .tab-underline > li.active > a:focus, .tab-underline> li > a:hover, .tab-underline > li > a:focus { border-bottom: 3px solid #2cc185; background-color: transparent; } @media (max-width: 768px){ .tab-underline > li > a { margin:0; } } /* ========================================================================== Accordion ============================================================================= */ .panel-heading { cursor: pointer; } .panel-icon-right .panel-title { padding-right: 25px; } .panel-icon-left .panel-title { padding-left: 25px; } /*Directional Icons*/ /* CSS Method for adding Font Awesome Chevron Icons */ .accordion-toggle:before { content:"Q"; position: absolute; left: 5px; color:#2cc185; font-size:20px; margin-top:-1.5px; display:block; } .accordion-toggle span { padding-left:30px; } .chevron.accordion-toggle:after, .chevron-left.accordion-toggle:after { /* symbol for "closed" panels */ font-family:'FontAwesome'; content:"\f106"; position: absolute; right: 15px; color: #777; font-size:20px; margin-top:-1.5px; } .no-border.no-color .chevron.accordion-toggle:after, .no-border.no-color .chevron-left.accordion-toggle:after { right: 15px; } .panel-heading.collapsed .chevron.accordion-toggle:after, .panel-heading.collapsed .chevron-left.accordion-toggle:after { /* symbol for "open" panels */ content:"\f107"; } /* CSS Method for adding Font Awesome Plus-Minus Icons */ .plus.accordion-toggle:after, .plus-left.accordion-toggle:after { /* symbol for "close" panels */ font-family:'ElegantIcons'; content: "\4b"; position: absolute; right: 15px; color: inherit; font-size: 15px; margin-top: -1.5px; } .panel-heading.collapsed .plus.accordion-toggle:after, .panel-heading.collapsed .plus-left.accordion-toggle:after { /* symbol for "open" panels */ content: "\4c"; } /*Left Directional Icons*/ .chevron-left.accordion-toggle:after, .plus-left.accordion-toggle:after { position: absolute; right: inherit; left:15px; } .no-border.no-color .chevron-left.accordion-toggle:after, .no-border.no-color .plus-left.accordion-toggle:after { left:0px; } /*Directional Icons For Borderless & Transparent Accordion*/ .no-border.no-color.panel-icon-left .panel-heading .panel-title { padding-left: 30px; } .no-border.no-color.panel-icon-right .panel-heading .panel-title { padding-right: 20px; } /*Default Accordion*/ .panel-default > .panel-heading { padding: 20px; } .panel-heading { color: #000; } .panel-heading a:hover { text-decoration: none; } .panel-title{ font-size: 18px; font-weight: 400; letter-spacing: 0; text-transform: uppercase; } .panel-default { background-color: transparent; } .panel-default>.panel-heading+.panel-collapse>.panel-body { padding: 30px; } .theme-panel .panel { border-color: #eee; } .theme-panel-dark .panel { border-color: transparent; } .theme-panel .panel-heading { background-color: transparent; } .theme-panel-dark .panel-heading { background-color: #000; color: #fff; } .panel-group { position:relative; margin:0; border-top:1px solid #eee; } .panel-group .panel { -webkit-box-shadow: none; box-shadow: none; } .theme-panel .panel-default>.panel-heading+.panel-collapse>.panel-body { border-top-color: #eee; } .theme-panel-dark .panel-default>.panel-heading+.panel-collapse>.panel-body { border: 1px solid #eee; border-top: none; color:#000; } /*Borderless Panel Body*/ .no-border .panel-default { border:none; -webkit-box-shadow: none; box-shadow: none; } .no-border .panel-heading+.panel-collapse>.panel-body { border-top: none; } .no-border.theme-panel-dark .panel-default>.panel-heading+.panel-collapse>.panel-body { border: none; } /*Borderless + Transparent Background*/ .no-color .panel-heading { background-color: transparent !important; padding-left: 0px; border-bottom: none; } .no-color .panel-heading.collapsed { border-bottom: 1px solid #eee; background-color: transparent !important; padding-left: 0px; color:inherit; } .no-color.panel-group .panel-heading+.panel-collapse>.panel-body { border-top: none; border-bottom: 1px solid #eee; background-color:#f7f7f7; } @media (max-width: 768px){ .panel-title{ font-size:15px; } } /*------------------------------------------------- image box ----------------------------------------------------*/ .overlay-container { position:relative; display:block; text-align:center; overflow:hidden } .overlay-bottom,.overlay-to-top,.overlay-top { color:#fff; position:absolute; top:auto; background-color:rgba(30,30,30,.5); opacity:0; filter:alpha(opacity=0) } .overlay-bottom,.overlay-top { padding:15px; bottom:0; left:0; right:0; overflow:hidden; -webkit-transition:all ease-in-out .25s; -o-transition:all ease-in-out .25s; transition:all ease-in-out .25s; height:0 } .overlay-bottom.links,.overlay-to-top.links { z-index:11 } .overlay-to-top { padding:10px; bottom:-30px; transition:all ease-in-out .25s } .overlay-link,.overlay-to-top { left:0; right:0; -webkit-transition:all ease-in-out .25s; -o-transition:all ease-in-out .25s } .overlay-top { top:0 } .overlay-visible .overlay-bottom,.overlay-visible .overlay-top { opacity:1; filter:alpha(opacity=100); height:auto!important; padding-bottom:20px } .overlay-visible.overlay-container:hover .overlay-bottom:not(.links),.overlay-visible.overlay-container:hover .overlay-top { opacity:.5; filter:alpha(opacity=50) } .overlay-bottom a,.overlay-to-top a,.overlay-top a { color:#fff } .overlay-container .text { padding:0 20px; position:relative } .overlay-container .text h3,.overlay-container .text h3 .small { margin-top:0; color:#fff } .overlay-container .text a:hover { color:#fff } .overlay-bottom .btn,.overlay-top .btn { color:#fff; border-color:#fff; margin:0 } .overlay-bottom .btn:hover,.overlay-top .btn:hover { color:#777; background-color:#fff } .image-box.style-2:hover .overlay-bottom,.image-box.style-2:hover .overlay-top,.overlay-container:hover .overlay-bottom,.overlay-container:hover .overlay-top { height:50%; opacity:1; filter:alpha(opacity=100); -webkit-backface-visibility:hidden; -webkit-transform:translateZ(0)scale(1,1) } .image-box:hover .overlay-to-top,.overlay-container:hover .overlay-to-top { opacity:1; filter:alpha(opacity=100); bottom:0 } .overlay-link { position:absolute; z-index:10; top:0; padding:15px; bottom:0; background-color:rgba(30,30,30,.5); overflow:hidden; opacity:0; filter:alpha(opacity=0); transition:all ease-in-out .25s; color:#fff } .overlay-link i { -webkit-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; transition:all .2s ease-in-out; width:80px; height:80px; border:1px solid #fff; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; color:#fff; position:absolute; top:50%; left:50%; margin:-40px 0 0 -40px; font-size:32px; line-height:80px } .overlay-link i:hover { background-color:#fff; color:#777 } .jumbotron,.main-navigation .badge { background-color:transparent } .overlay-link.small i { width:25px; height:25px; margin:-12.5px 0 0 -12.5px; font-size:14px; line-height:25px } .overlay-container:hover .overlay-link { height:100%; opacity:1; filter:alpha(opacity=100) } @media (min-width:1200px) { .overlay-container .text { top:30% } } @media (max-width:480px) { .overlay-container .text { top:30% } .overlay-container .text p:not(.mobile-visible) { display:none } } @media (min-width:480px)and (max-width:1199px) { .overlay-container:not(.overlay-visible) .overlay-top~.overlay-bottom { padding-top:5px; padding-bottom:5px } } /* separator */ .separator { position:relative; display:block; height:2px; background-color:#eaeaea; margin:10px 0 } .separator.transparent { background-color:transparent } .separator.small { background-color:#303030; height:2px; position:relative; width:22px; display:block; margin:10px auto 20px } .separator.small.left { margin-left:0; margin-right:0 } .separator.small.right { margin-left:0; margin-right:auto } /*====================================================== subMenu ========================================================*/ .subMenu { position: relative; overflow: hidden; margin: 0 auto; width: 100%; font-weight: 300; font-size: 1.25em; } /* Nav */ .subMenu nav { text-align: center; } .subMenu nav ul { position: relative; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; margin: 0 auto; padding: 0; list-style: none; -ms-box-orient: horizontal; -ms-box-pack: center; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .subMenu nav ul li { position: relative; z-index: 1; display: block; margin: 0; text-align: center; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .subMenu nav a { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 2.5; } .subMenu nav a span { vertical-align: middle; font-size: 16px; } .subMenu nav li.tab-current a { color: #111; } .subMenu nav a:focus { outline: none; } /*====================================================== Vertical Divider ========================================================*/ .vertical-line-left { border-left: 1px solid #eee; } .vertical-line-right { border-right: 1px solid #eee; } .vll-light, .vlr-light { border-color: #999; } h2.vertical-title { margin:0 0 50px; } @media screen and (max-width:991px){ /*Vertical Divider*/ .vertical-line-left { border-top: 1px solid #eee; border-left: none; padding-top:100px; margin-top:100px; } .vertical-line-right { border-bottom: 1px solid #eee; border-right: none; padding-bottom:100px; margin-bottom:100px; } .vll-light { border-top: 1px solid #333; } .vlr-light { border-bottom: 1px solid #333; } } /*====================================================== Text Style ========================================================*/ .cross-border:before, .cross-border:after { content: ''; display: inline-block; width: 48px; height: 1px; background-color: #222; position: relative; top: -10px; left: -30px; } .cross-border:after { left: inherit; right: -30px; } @media (max-width: 767px) { .cross-border:before, .cross-border:after { display:none; } } .full-border { display: block; position: relative; z-index: 1; } .full-border:before { border-top: 1px solid #111; content: ""; position: absolute; top: 25px; left: 0; width: 100%; z-index: -1; } .full-border span { background-color:#fff; padding:0 30px; }