/* CUSTOMIZR RESPONSIVE CSS -------------------------------------------------- */ /* Smooth resizing */ .is-customizing img, .is-customizing .container-fluid, .is-customizing .tc-footer-social-links-wrapper { -moz-transition: width 0.15s ease-in-out, left 0.15s ease-in-out, right 0.15s ease-in-out; -webkit-transition: width 0.15s ease-in-out, left 0.15s ease-in-out, right 0.15s ease-in-out; -moz-transition: width 0.15s ease-in-out, left 0.15s ease-in-out, right 0.15s ease-in-out; -o-transition: width 0.15s ease-in-out, left 0.15s ease-in-out, right 0.15s ease-in-out; transition: width 0.15s ease-in-out, left 0.15s ease-in-out, right 0.15s ease-in-out; } .is-customizing h1, .is-customizing h2, .is-customizing h3, .is-customizing h4, .is-customizing h5, .is-customizing h6, .is-customizing p { -moz-transition: font-size 0.15s ease-in-out, left 0.15s ease-in-out, right 0.15s ease-in-out; -webkit-transition: font-size 0.15s ease-in-out, left 0.15s ease-in-out, right 0.15s ease-in-out; -moz-transition: font-size 0.15s ease-in-out, left 0.15s ease-in-out, right 0.15s ease-in-out; -o-transition: font-size 0.15s ease-in-out, left 0.15s ease-in-out, right 0.15s ease-in-out; transition: font-size 0.2s ease-in-out, left 0.15s ease-in-out, right 0.15s ease-in-out; } /* Media queries */ @media (max-width: 1200px) { /* elements */ select { width: 100%; } /*Other*/ .carousel .item { line-height: 385px; overflow: hidden; min-height: 385px; max-height: 385px; } #left .round-div { left: -77px; } /* one sidebar case (span9) */ .span9.article-container .round-div { width: 153px; height: 153px; top: -59px; left: -69px; } .span9.article-container .thumb-wrapper img { max-width: 250px; } /* two sidebars case (span9) */ .span6.article-container .round-div { width: 95px; height: 95px; top: -82px; left: -80px; } /* MENU CHANGES SINCE V3.2.0 */ .menu > li > a { font-size: 15px; line-height: 20px; } .menu > li > ul li a { font-size: 12px; } } @media (min-width: 980px) { /* ROUND DIV FOR 3 columns Top or bottom thumb position SINCE V3.2.0*/ .span6 .thumb-position-top .round-div { width: 125px; height: 125px; top: -78px; left: -33px; } /* HOVER EFFECTS ON MENU SINCE V3.2.0*/ .tc-submenu-fade .nav > li > ul{ opacity: 0; top: 75%; visibility: hidden; display: block; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tc-submenu-fade .tc-hover-menu.nav li:hover > ul, .tc-submenu-fade .nav li.open > ul { opacity: 1; top: 95%; visibility: visible; } .tc-submenu-move .dropdown-menu > li >a { -webkit-transition: all ease 0.241s; -moz-transition: all ease 0.241s; -o-transition: all ease 0.241s; transition: all ease 0.241s; } .tc-open-on-click .dropdown-submenu:hover > .dropdown-menu { display: none; } /* Side Nav */ .tc-sn-inner.nav-collapse.collapse { height: 100% !important; overflow: auto !important; } //expand submenus for tablets in landscape mode // .tc-is-mobile .navbar .nav li > ul ul { // display: block; // } } @media (max-width: 979px) { .tc-header .outside { display:block; text-align:center; } .tc-header .brand { float:none; text-align: center; width: 100%; clear: both; } .container.navbar-wrapper { margin-bottom: 0; width: auto; } .navbar.resp { display:block; } .navbar.notresp { display:none; } .navbar-wrapper.clearfix.span9 { width: 100%; margin: 0%; } .navbar-wrapper .navbar { float: none; width: 100%; } .navbar-wrapper .navbar .site-description { display: none !important; } .navbar-inner .tc-nav-button { display:block; } .navbar .navbar-inner { padding: 0px 8px; text-align: center; position: relative; } /* Default Menu */ .nav-collapse, .nav-collapse.collapse { position: absolute; z-index:3000; right: 0px; top: 52px; background-color: #FAFAFA; background-image: -moz-linear-gradient(top, white, #F2F2F2); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#F2F2F2)); background-image: -webkit-linear-gradient(top, white, #F2F2F2); background-image: -o-linear-gradient(top, white, #F2F2F2); background-image: linear-gradient(to bottom, white, #F2F2F2); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff' , endColorstr='#fff2f2f2' , GradientType=0); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; .box-shadow(~"0 2px 10px rgba(0, 0, 0, 0.25)"); } /* Rocco's pull request : https://github.com/Nikeo/customizr/pull/23 This should fix some weird behavior on android devices: 1) menu links still reachable despite menu is closed https://wordpress.org/support/topic/bug-when-displayed-on-samsung-tab-2-70 2) menu appears always expanded in old android's versions https://wordpress.org/support/topic/customizr-mobile-menu-always-open */ .nav-collapse.collapse .nav{ display: none; } .nav-collapse, .nav-collapse.collapse.in .nav{ display: block; } .tc-header:not(.tc-second-menu-on) .navbar div > ul.nav > .menu-item:first-child > a { & when (@is_rtl = false){ padding-left: 15px; } & when (@is_rtl = true){ padding-right: 15px; } } .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a { font-weight:normal; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; margin-bottom: 0px; } .nav-collapse .dropdown-menu li + li a { margin-bottom: 0px; } .nav-collapse .dropdown-menu { margin-left: 0px; margin-right: 0px; } .nav-collapse .dropdown-menu li a { padding-left: 25px; } .nav-collapse .dropdown-menu li li a { padding-left: 30px; } /* Hover Menu */ .nav-collapse.tc-hover-menu-wrapper { width: 100%; } .tc-hover-menu.nav ul.dropdown-menu { display:block; } .tc-hover-menu.nav li { text-align: @textAlign; position: relative; } .tc-header:not(.tc-second-menu-on) .tc-hover-menu.nav a:after { border-top: none; border-right: none; border-left: none; } .tc-hover-menu.nav a { border-bottom: 1px solid #EEE; } .tc-hover-menu.nav .caret { display: none; } /* second menu placeholder */ .navbar .tc-menu-placeholder, .navbar .tc-main-menu-notice { display: none; } /* social blocks */ .social-block { float: @floatDirection; } .social-block.widget { float: none; } .carousel .item { line-height: 309px; overflow: hidden; min-height: 309px; max-height: 309px; } .featurette { height: auto; padding: 0; } .featurette-image.pull-left, .featurette-image.pull-right { display: block; float: none; max-width: 40%; margin: 0 auto 20px; } /*featured pages */ .widget-front.hover .round-div, article.hover .tc-thumbnail .round-div { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); cursor: pointer; } .widget-front .thumb-wrapper { height: 250px; width: 201px; max-width: none; } .widget-front .round-div { width: 150px; height: 150px; border: 94px solid #FAFAFA; top: -44px; left: -65px; } .thumb-wrapper { height: 250px; width: 201px; } .round-div { width: 150px; height: 150px; border: 94px solid #FAFAFA; top: -49px; left: -67px; } /* one sidebar case (span9) */ .span9.article-container .thumb-wrapper { left: 13px; } .span9.article-container .round-div { width: 125px; height: 125px; border: 94px solid #FAFAFA; top: -38px; left: -67px; } /* two sidebar case (span6) */ .span6.article-container .tc-thumbnail, .span6.article-container .tc-content { width:100% } .span6.article-container .round-div { top: -49px; left: -48px; } .thumb-wrapper img { min-height:initial; } .thumb-wrapper img { max-width: 236px; right: 14px; top: 15px; position: relative; } #left .round-div { left: -86px; } /* Disable the hover effect for desktop viewport SINCE V3.2.0*/ html.cssanimations.csstransitions .dropdown-menu { opacity: 1; top: 100%; visibility: visible; } .nav .dropdown-menu { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* PLACE LOGO / TITLE ON THE LEFT SINCE V3.2.0 */ .sticky-enabled .site-logo img { } .sticky-enabled .brand { float: @floatDirection; width: 80%; text-align: @textAlign; padding-left: 10px; position: relative; z-index: 2; } .sticky-enabled .tc-header { min-height: 40px; } .sticky-enabled .tc-header .brand { & when (@is_rtl = true){ float: left; text-align: left; } } .sticky-enabled .tc-header .outside { display: none; } /* Adjust button margin SINCE V3.2.0*/ .sticky-enabled .navbar .navbar-inner { margin: 0px; } .tc-header .navbar .btn-toggle-nav, .navbar .btn-navbar { display: block; margin: 10px 0; /*float: right;*/ } /* GIVE NAVBAR A SMALLER Z-index than logo / title SINCE V3.2.0*/ .sticky-enabled .navbar-wrapper { position: relative; z-index: 1; } .no-navbar .nav-collapse, .nav-collapse.collapse { /* default fallback */ background: rgb(255, 255, 255) transparent; /* nice browsers */ background: rgba(255, 255, 255, 0.9); /* IE 6/7 */ filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)"; /* IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)"; } .no-navbar .navbar .navbar-inner { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background: none; } .navbar .navbar-inner .social-block { width: auto!important; float: left; margin: 14px 0 0; } .logo-right .navbar .navbar-inner .social-block { float: right; } /* MENU CHANGES SINCE V3.2.0 */ .navbar .nav-collapse .dropdown-menu a { padding: 3px 5px; } .navbar .nav-collapse ul.nav > li li a { & when (@is_rtl = true) { padding-right: 30px; } & when (@is_rtl = false) { padding-left: 30px; } } .navbar .nav-collapse ul.nav > li li li a { & when (@is_rtl = true) { padding-right: 50px; } & when (@is_rtl = false) { padding-left: 50px; } } .dropdown-submenu>a:after { content: none; } .nav a { border-bottom: 1px solid #EEE; } .nav-collapse, .nav-collapse.collapse { width:100%; overflow-y: scroll; } .navbar .navbar-inner .nav li { text-align: @textAlign; position: relative; } .nav.nav li >ul { display: block; } /* GREY SIMPLE RESPONSIVE BUTTON MENU */ .simple-button .navbar .btn-navbar { background-image: none!important; background-color: #FFF; } .simple-button .navbar .btn-navbar:hover, .simple-button .navbar .btn-navbar:focus, .simple-button .navbar .btn-navbar:active, .simple-button .navbar .btn-navbar.active, .simple-button .navbar .btn-navbar.disabled, .simple-button .navbar .btn-navbar[disabled] { background-color: #7F7F7F; } .simple-button .navbar .btn-navbar .icon-bar { background-color: #7F7F7F; } .simple-button .navbar .btn-navbar:hover .icon-bar { background-color:#fff; } /* button.btn.btn-navbar { transition: all 0.1s ease-in-out; }*/ .btn-toggle-nav .menu-label { display: none; } } @media (max-width: 979px) and (min-width: 768px) { .sticky-enabled .navbar-wrapper { float: none; } } @media (max-width: 767px) { body { padding-left: 0px; padding-right: 0px; } #main-wrapper { padding-left: 10px; padding-right: 10px; } h1 { font-size: @honeFontSize * 0.8; line-height: @honeFontSize * 0.8 } h2 { font-size: @htwoFontSize * 0.8; line-height: @htwoFontSize * 0.8} h3 { font-size: @hthreeFontSize * 0.8; line-height: @hthreeFontSize * 0.8} h4 { font-size: @hfourFontSize * 0.8; line-height: @hfourFontSize * 0.8} h5 { font-size: @hfiveFontSize * 0.8; line-height: @hfiveFontSize * 0.8 } h6 { font-size: @hsixFontSize * 0.8; line-height: @hsixFontSize * 0.8 } .span6.article-container .round-div, .span9.article-container .round-div, .span12.article-container .round-div { width: 100px; height: 100px; top: -46px; left: -78px; } .span6.article-container .thumb-wrapper img, .span9.article-container .thumb-wrapper img, .span12.article-container .thumb-wrapper img { max-width: 190px; } .thumb-wrapper { height: 200px; max-width: 131px; } .tc-content .thumb-wrapper img { right: 0px; } /* hide left sidebar */ #left.widget-area { /* display:none; */ } /*hide the border and before effect for right sidebar*/ #right.widget-area { border-left:0px; } #right.widget-area:before{ border-left:0px; } .tc-no-sticky-header .navbar-wrapper, .sticky-disabled .navbar-wrapper { clear: both; } .navbar-inner { margin: -20px; } .carousel { /* margin-left: -20px; margin-right: -20px; */ } .carousel .item { line-height: 308px; overflow: hidden; min-height: 308px; max-height: 308px; } .item .carousel-caption h1 { font-size: 22px; } .carousel-caption .btn { font-size: 16px; } .marketing .span4 + .span4 { margin-top: 40px; } .featurette-heading { font-size: 30px; } .featurette .lead { font-size: 18px; line-height: 1.5; } #left .round-div { left: -66px; } /*force comment layout to be not responsive */ .row-fluid .comment-avatar.span2 { width: 14.893617021%; float: @floatDirection; margin-right: 2.762430939%; } footer#footer { text-align: center; } /* SINCE V3.2.0 */ .span6 .thumb-position-top .round-div { width: 125px; height: 125px; top: -59px; left: -63px; } .span6 .thumb-position-top .thumb-wrapper { max-width: none; } .site-title { font-size: 0.8em; } .sticky-enabled .navbar .btn-navbar { margin: 9px 0px; } /* POST GRID */ .featurette-divider.post-list-grid{ display: none; } .tc-post-list-grid .featurette-divider.__after_article{ display: block; } .tc-post-list-grid .entry-summary { padding: 5%; } .expanded .tc-grid-post figcaption { max-width: none; margin-left: 0; } [class*=grid-cols-] .tc-grid-post figure { height: 225px; max-height: 225px; line-height: 225px; } /* ICONS */ .tc-post-list-grid article .tc-grid-icon:before, .tc-post-list-grid article.format-quote .tc-grid-icon:before, .tc-post-list-grid article.format-status .tc-grid-icon:before, { font-size: 60px; } } @media (max-width: 480px) { .span6.article-container .thumb-wrapper img, .span9.article-container .thumb-wrapper img, .span12.article-container .thumb-wrapper img { max-width: 222px; right: 14px; top: -9px; } .span6.article-container .thumb-wrapper, .span9.article-container .thumb-wrapper, .span12.article-container .thumb-wrapper { height: 180px; left: 0px; } .tc-content .thumb-wrapper img { right: -4px; } .thumb-wrapper { max-width: 200px; } .span6.article-container .round-div, .span9.article-container .round-div, .span12.article-container .round-div { width: 125px; height: 125px; top: -68px; left: -57px; } .navbar-inner .social-block { padding:5px 0px 0px 0px; } .social-block a { padding-right: 10px; } .carousel .item { line-height: 190px; overflow: hidden; min-height: 190px; max-height: 190px; } .carousel-caption { padding: 2%; margin-left: 17%; position:relative; max-height: 130px; overflow: hidden; } .item .carousel-caption h1 { font-size: 20px; } .carousel-caption .lead, .carousel-caption .btn { font-size: 13px; line-height: 13px; max-height: 50px; overflow: hidden; } .carousel-caption .btn { padding:7px; } .tc-carousel-control { font-size: 90px; height: 32px; } .social-block a { font-size: 1em; } .sticky-enabled .brand .site-title { font-size: 0.5em; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .sticky-enabled .brand h1, .sticky-enabled .brand a { margin: 10px 0px 0px; } .navbar-inner .social-block a { padding-right: 6px; } /* GRID */ .tc-g-cont { max-height: 80px; overflow: hidden; } } /* Side Nav */ @media (max-width: 400px){ nav#tc-sn { width: 400px; max-width: 100%; } #tc-sn .nav-collapse { background: #fff; } /* when open, give to the menu a greater z-index */ .tc-sn-visible:not(.sn-close) #tc-sn { z-index: 9999; } .tc-sn-visible { overflow: hidden; } /* Hack*/ /* prevent pan in mobiles max-width: 400px: should we apply this for all tc-is-mobile losing the page scroll down ?? */ .tc-sn-visible #tc-page-wrap { position: absolute; width: 100%;} .tc-sn-visible:not(.sn-close) #tc-page-wrap { left: initial !important;} /*end prevent overflows in mobiles */ } @media (max-width: 320px) { .carousel .item { line-height: 140px; overflow: hidden; min-height: 140px; max-height: 140px; } .carousel-caption { padding: 2%; } .item .carousel-caption h1 { font-size: 16px; } .carousel-caption .btn { padding:5px; } .social-block a { font-size:0.9em } .navbar .navbar-inner .social-block { margin: 10px 0 0; font-size: 0.95em; } }