/* Responsive Styles ================================================== */ /* All size smaller than 1301 */ @media only screen and (max-width: 1300px) { .container, .boxed-layout #page, .boxed-layout-small #page { width: 970px; } .boxed-layout .container, .boxed-layout-small .container { width: 904px; } .widget_search input.s { width: 75%; } .widget_portfolio .three-column-full-width .slide-caption { padding-top: 10px; } .parallax_video_text { padding: 5% 0 0; } } /* All size smaller than 1024 ================================================== */ @media only screen and (max-width: 1023px) { .container, .boxed-layout #page, .boxed-layout-small #page, #site-title a img { width: 708px; } .boxed-layout .container, .boxed-layout-small .container, .boxed-layout #site-title a img { width: 668px; } .main-slider .image-slider { padding: 15% 0; } .main-slider .image-slider, .parallax_content, .parallax_video_content, .widget_client .client-content { background-attachment: scroll; } .widget-sub-title { padding: 0 20px; margin-bottom: 50px; } .tf-business-template .widget-title { font-size: 22px; line-height: 30px; } .slider-content .slider-title a { font-size: 24px; line-height: 31px; } .slider-content .slider-text h3 { font-size: 14px; line-height: 21px; } a.slider-prev, a.slider-next { font-size: 14px; } .widget_parallax_video .widget-title { font-weight: 400; font-size: 18px; line-height: 25px; } .widget_parallax_video h3 { font-weight: 200; font-size: 18px; line-height: 25px; } .parallax_video_text { padding: 0; } .min_slider { width: 660px; } #primary, #secondary { margin-bottom: 50px; padding: 0px; float: none; width: 100%; border: none; } .left-sidebar-layout #primary { float: none; padding-left: 0px; } .left-sidebar-layout #secondary { float: none; padding-right: 0px; border: none; } .no-sidebar-layout #main { margin: 0 ; width: 100%; } /* ----- Column ----- */ .column { margin: 0 -10px; } .two-column, .three-column, .four-column { padding: 0 10px 40px; } .two-column, .four-column, .three-column, .three-column-full-width, .business-sidebar .three-column { width: 50%; } .widget_about_us .two-column { padding: 0 0 30px; width: 100%; } .three-column:nth-child(3n+4), .four-column:nth-child(4n+5), .column-2:nth-child(2n+3), .column-3:nth-child(3n+4), .column-4:nth-child(4n+5) { clear: none; } .three-column:nth-child(2n+3), .four-column:nth-child(2n+3) { clear: both; } #colophon .widget-area { margin: 0; } #colophon .column-1, #colophon .column-2, #colophon .column-3, #colophon .column-4 { width: 100%; float: none; padding: 0; } } /* All Mobile Screen ( smaller than 768px ) ================================================== */ @media only screen and (max-width: 767px) { .container, .boxed-layout #page, .boxed-layout-small #page { width: 460px; } .boxed-layout .container, .boxed-layout-small .container { width: 440px; } .comments-title, #respond h3#reply-title { font-size: 26px; line-height: 32px; } #main h1, #main h2, #main h3, #main h4, #main h5, #main h6 { padding-bottom: 10px; } hr { margin-bottom: 30px; } input[type="text"], input[type="email"], input[type="search"], input[type="password"], textarea, input[type="reset"], input[type="button"], input[type="submit"] { margin-bottom: 20px; } input.s { margin: 0; } .boxed-layout #colophon, .boxed-layout-small #colophon { margin-bottom: 20px; } .header { padding: 30px 0; } .header-inner h2 { font-size: 24px; margin-bottom: 20px; line-height: 31px; } .header-inner .btn-default { padding: 10px; font-size: 13px; } #site-branding, #site-title a img { max-width: 420px; } .boxed-layout #site-branding, .boxed-layout #site-title a img, .boxed-layout-small #site-branding, .boxed-layout-small #site-title a img { max-width: 400px; } .main-slider .image-slider { padding: 15% 0; } .navbar-right { padding-right: 0; } .header-search, .header-search-x { display: none; } .header-social-block { border: none; float: left; } .top-info-bar .info { display: none; } /* ----- Responsive Navigation ----- */ #sticky_header { position: relative !important; } .menu-toggle { display: block; background-color: rgba(0, 0, 0, 0); font-size: 0; border: 0 none; padding: 0; color: #666; width: 32px; float: right; margin-top: 20px; cursor: pointer; } .line-one, .line-two, .line-three { backface-visibility: hidden; display: block; height: 3px; margin: 5px auto; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; width: 100%; } .menu-toggle.on .line-one { transform: rotate(-45deg) translate(-5px, 5px); } .menu-toggle.on .line-two { opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); } .menu-toggle.on .line-three { transform: rotate(45deg) translate(-6px, -6px); } .navbar-right { clear: both; float: none; } .menu { display: none; } .widget_nav_menu .menu { display: block; } .toggled-on .menu { display: block; } .sub-menu-toggle { background-color: #333; border: none; color: #fff; float: right; width: 30px; height: 30px; text-align: center; line-height: 30px; margin: 6px; cursor: pointer; position: relative; z-index: 9; } .sub-menu-toggle:hover, .sub-menu-toggle:focus { background-color: #888; } .plus-ico { font-size: 20px; font-style: normal; } .plus-ico.back-ico { display: block; transform: rotate(45deg); transition: all .40s ease; } .main-navigation { float: none; } .main-navigation > ul > li { position: inherit; width: 100%; border-top: 1px dotted #ddd; margin-left: 0; } .main-navigation > ul > li::before { border-right: none; } .main-navigation a { float: none; padding: 10px 0; height: inherit; } /* ----- Dropdown ----- */ .main-navigation ul li:hover ul { top: auto; } .main-navigation ul li ul { top: auto; width: 100%; left: 40px; display: block; opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100); visibility:visible; position: static; box-shadow: none; transition: none; } .main-navigation ul li ul li { float: none; margin: 0; position: relative; text-align: left; width: 100%; z-index: 1; display: block; opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100); visibility:visible; } .main-navigation ul li ul li { border-top: 1px dotted #ddd; } .main-navigation ul li ul li::before { position: static; } .main-navigation ul li ul li ul { left: 160px; display: block; opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100); visibility:visible; } #site-navigation ul ul ul a { padding-left: 40px; } .main-navigation ul ul li:hover ul { top: 0; display: block; opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100); visibility:visible; } .slider-content { width: 100%; } .slider-content .btn-default { margin: 10px 5px 20px; padding: 10px 13px; } .slider-content { margin: 0px; } .page-header { padding: 10px 20px; } #content { padding-top: 50px; } /* ----- Column ----- */ .column { margin: 0; } .two-column, .three-column { padding: 0 0 30px; width: 100%; } .three-column-full-width { margin: 0; width: 100%; } #primary .three-column, #primary .three-column-full-width, #primary .four-column { margin: 0; width: 100%; } .widget_team .column { margin: 0 -10px; } .four-column { padding: 0 10px 30px; width: 50%; } .three-column:nth-child(2n+3) { clear: none; } #main .post { padding-bottom: 40px; } .small_image_blog .post-featured-image { width: 100%; } #main .sticky { padding: 10px 10px 0; margin-bottom: 40px; } #wp_page_numbers, .wp-pagenavi, #main ul.default-wp-page, .pagination { margin-bottom: 40px; } #wp_page_numbers ul li.page_info, .wp-pagenavi .pages { display: none; } .widget { margin-bottom: 40px; } .widget_custom-tagcloud { margin-bottom: 32px; } .widget_posts { margin-bottom: 20px; } .our_feature, .widget_parallax, .widget_about_us, .widget_portfolio, .widget_tf_section, .widget_team, .widget_latest_blog, .widget_parallax_video, .widget_testimonial, .widget_client, .widget_newsletterwidget { margin-bottom: 0; } .our_feature { padding: 60px 0 30px; } .parallax_content { padding: 50px 0 30px; } .widget_parallax .widget-title { font-size: 20px; line-height: 27px; } .widget_about_us .container { padding: 60px 0 10px; } .widget_portfolio { padding: 60px 0 0; } .widget_tf_section .container { padding: 60px 0 40px; } .tf_section-content { padding-bottom: 10px; } .widget_tf_section .tf_section-content, .widget_tf_section .tf-section-image { float: none; width: 100%; text-align: center; } .widget_tf_section .tf-section-image figure { text-align: center; padding: 0 5%; } .widget_tf_section .tf-section-image figure img { max-height: 250px; } .widget_team { 60px 0 30px; } .widget_testimonial { padding: 60px 0; } .min_slider, #primary .min_slider { width: 440px; } .tnp-widget .tnp-field { width: auto; } #colophon .widget_posts { margin-bottom: 20px; } .site-info .social-links, .site-info .copyright { float: none; width: 100%; } .site-info .social-links ul { text-align: center; float: none; } .site-info .social-links ul li { display: inline-block; float: none; } .site-info .copyright { padding-top: 20px; text-align: center; } } /* All Mobile Screen ( smaller than 481px ) ================================================== */ @media only screen and (max-width: 480px) { .container, .boxed-layout #page, .boxed-layout-small #page { width: 300px; } .boxed-layout .container, .boxed-layout-small .container { width: 280px; } .boxed-layout #colophon, .boxed-layout-small #colophon { margin-bottom: 10px; } #site-branding { margin-bottom: 13px; margin-top: 13px; max-width: 265px; } #site-title a img { max-width: 265px; } .boxed-layout #site-branding, .boxed-layout #site-title a img, .boxed-layout-small #site-branding, .boxed-layout-small #site-title a img { max-width: 240px; } /* ----- Column ----- */ .column { margin: 0; } .widget_team .column { margin: 0; } .four-column { padding: 0 0 30px; width: 100%; } .three-column-full-width { width: 100%; margin: 0; } .four-column:nth-child(2n+3) { clear: none; } .widget_portfolio .three-column-full-width h3 a, .widget_portfolio .three-column-full-width p { font-size: 13px; line-height: 20px; padding-bottom: 5px; margin-bottom: 0px; } #main .sticky { padding: 15px 15px 0; } .slider-content .slider-title a { font-size: 18px; line-height: 25px; font-weight: 500; } .slider-content .slider-text h3 { font-size: 13px; line-height: 20px; } .min_slider, #primary .min_slider { width: 220px; } } /* All Mobile ( smaller than 320px ) ================================================== */ @media only screen and (max-width: 319px) { .container, .boxed-layout #page, .boxed-layout .container, .boxed-layout-small #page, .boxed-layout-small .container { width: 96%; } }