/* Mobile Portrait View */ @media screen and (max-width: 479px) { * { box-sizing: border-box; } #slider .top-bar{ text-align:center; } .nivo-controlNav{ display:none !important; } .nivo-caption { width: 95% !important; bottom: 40px !important; padding: 10px; left:0 !important; top:0 !important; } .nivo-caption p { display: none !important; } #slider .top-bar a.slide-button { font-size:12px; padding:10px 20px; } .nivo-caption h2 { font-size: 22px !important; line-height: 32px !important; text-align: center; margin-bottom: 0; padding:25px 0 20px !important; } .container { width: 95%; } /* Header Css */ .top-header{ line-height:30px; text-align:center; padding:15px 0; } .top-head-box{ display:block; width:100%; } .top-head-box:first-child, .top-head-box:last-child{ text-align:inherit !important; } .header { position: inherit !important; padding: 15px 0; } .header .header-inner { width: 95%; text-align:center; } .logo { float: none; text-align: center; margin-bottom:30px !important; } .header_right{ width:auto; float:none; padding:0; text-align:center; } .toggle { display: block; } .toggle a { width: 100%; color: #ffffff; background: url(../images/mobile_nav_right.png) no-repeat right center #373a3f; padding: 10px 10px; margin-top: 20px; font-size: 16px; } .toggle a:hover { color: #ffffff !important; } .toggle a.active { color: #ffffff; } #navigation{ width:auto; background-color:transparent !important; position:relative !important; } .sitenav { display: none; margin-top:0; width:100%; } .sitenav ul { background: #000000; color: #000; width: 100%; float: none; margin-top: 0; } .sitenav ul li { border-top: 1px #303030 solid; display: block; float: none; text-align: left; } .sitenav ul li ul { color: #fff; opacity: 0; padding:0; position: absolute; right: 9999rem; top: calc(100% + 2rem); transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s; transform: translateY(0.6rem); width: 20rem; z-index: 1; } .sitenav ul li.menu-item-has-children:hover > ul, .sitenav ul li.menu-item-has-children:focus > ul, .sitenav ul li.menu-item-has-children.focus > ul { left: 0; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; background-color:#303030; top:0; position: relative; } .sitenav ul li a { padding: 5px 10px; display: block; color: #ffffff !important; text-align:left; } .sitenav ul li a:hover { color: #ffffff !important; } .sitenav ul li ul, .sitenav ul li ul ul { display: block !important; } .sitenav ul li ul li a:before { content: "\00BB \00a0"; } .sitenav ul li ul li a { padding-left: 20px !important; } .sitenav ul li ul li ul li a { padding-left: 30px !important; } .sitenav ul li.current_page_item a{ background-color:transparent !important; } .sitenav ul li:hover, .sitenav ul li.current_page_item{ background-color:inherit !important; } /* ------ Extra ------ */ #sitemain iframe { max-width: 100%; height: auto; } /* --------- Pages ------- */ .content-area { width: 95%; margin: 0 auto; padding: 50px 0; } .site-main { width: 100%; margin: 0; padding: 0; float: none; } #sidebar { width: auto; margin: 60px 0 0; padding: 0; float: none; } .nivo-directionNav a { top: 36% !important; } section{ padding:0; } .pagearea-inner{ position:inherit; top:0; margin-top:20px; margin-bottom:0; } .main-container{ margin-top:0; } .home-content, .home-thumb{ width:90%; margin:0 auto; float:none; } .home-thumb{ margin-top:20px; } .home-content h3{ font-size:26px; } } /* Mobile Landscape View */ @media screen and (max-width: 719px) and (min-width: 480px) { * { box-sizing: border-box; } #slider .top-bar{ text-align:center; } .nivo-controlNav{ display:none !important; } .nivo-caption { width: 95% !important; bottom: 25% !important; padding: 10px; text-align:center; left:0 !important; } .nivo-caption p { display: none !important; } #slider .top-bar a.slide-button { font-size:12px; padding:10px 20px; } .nivo-caption h2 { font-size: 25px !important; line-height: 32px !important; text-align: center; margin-bottom: 0; padding:25px 0 20px !important; } .container { width: 95%; } /* Header Css */ .top-header{ line-height:30px; text-align:center; padding:15px 0; } .top-head-box{ display:block; width:100%; } .top-head-box:first-child, .top-head-box:last-child{ text-align:inherit !important; } /* Header Css */ .header { position: inherit !important; padding: 15px 0; } .header .header-inner { width: 95%; text-align:center; } .logo { float: none; text-align: center; margin-bottom:30px !important; } .header_right{ width:auto; float:none; padding:0; text-align:center; } .toggle { display: block; } .toggle a { width: 100%; color: #ffffff; background: url(../images/mobile_nav_right.png) no-repeat right center #373a3f; padding: 10px 10px; margin-top: 20px; font-size: 16px; } .toggle a:hover { color: #ffffff !important; } .toggle a.active { color: #ffffff; } .sitenav { display: none; margin-top:0; width:100%; } #navigation { width:auto; background-color:transparent !important; position:relative !important; } .sitenav ul { background: #000000; color: #000; width: 100%; float: none; margin-top: 0; } .sitenav ul li { border-top: 1px #303030 solid; display: block; float: none; text-align: left; } .sitenav ul li ul { color: #fff; opacity: 0; padding:0; position: absolute; right: 9999rem; top: calc(100% + 2rem); transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s; transform: translateY(0.6rem); width: 20rem; z-index: 1; } .sitenav ul li.menu-item-has-children:hover > ul, .sitenav ul li.menu-item-has-children:focus > ul, .sitenav ul li.menu-item-has-children.focus > ul { left: 0; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; background-color:#303030; top:0; position: relative; } .sitenav ul li a { padding: 5px 10px; display: block; color: #ffffff !important; text-align:left !important; } .sitenav ul li a:hover { color: #ffffff !important; } .sitenav ul li ul, .sitenav ul li ul ul { display: block !important; } .sitenav ul li ul li a:before { content: "\00BB \00a0"; } .sitenav ul li ul li a { padding-left: 20px !important; } .sitenav ul li ul li ul li a { padding-left: 30px !important; } .sitenav ul li.current_page_item a{ background-color:transparent !important; } .sitenav ul li:hover, .sitenav ul li.current_page_item{ background-color:inherit !important; } /* ------ Extra ------ */ #sitemain iframe { max-width: 100%; height: auto; } /* --------- Pages ------- */ .content-area { width: auto; margin: 0 20px; padding: 50px 0; } .site-main { width: auto; margin: 0; padding: 0; float: none; } #sidebar { width: auto; margin: 60px 0 0; padding: 0; float: none; } .nivo-directionNav a { top: 36% !important; } .home-content, .home-thumb{ width:90%; margin:0 auto; float:none; } .home-thumb{ margin-top:20px; } .home-content h3{ font-size:32px; } .pagearea-inner{ position:inherit; top:0; margin-top:20px; margin-bottom:0; } section{ padding:0; } h2.section_title{ font-size:30px; } .main-container{ margin-top:0; } } @media screen and (max-width: 899px) and (min-width: 320px) { h2.section-title { line-height: 48px; font-size: 35px !important; } .cat_comments { height: auto; } } /* Tablet View */ @media screen and (max-width: 999px) and (min-width: 720px) { * { box-sizing: border-box; } .pagearea-inner{ margin-top:20px; margin-bottom:0; } .nivo-caption { width: 70% !important; bottom:8% !important; } #slider .top-bar h2{ font:700 40px 'Oswald'; } .container { width: 95%; } .top-head-box .top-head-box-text{ font-size:10px; } .header { position: inherit !important; padding:15px 0; } .header .header-inner { width: 95%; } .header_right{ float:right; } .logo { float: left; } .toggle { display: block; } .toggle a { width: 100%; color: #ffffff; background: url(../images/mobile_nav_right.png) no-repeat right center #373a3f; padding: 10px 10px; margin-top: 20px; font-size: 16px; } .toggle a:hover { color: #ffffff !important; } .toggle a.active { color: #ffffff; } .sitenav { display: none; float:none; } #navigation{ width:auto; background-color: transparent !important; position:relative !important; } .sitenav ul { background: #000000; color: #000; width: 100%; float: none; margin-top: 0; } .sitenav ul li { border-top: 1px #303030 solid; display: block; float: none; text-align: left; } .sitenav ul li ul { color: #fff; opacity: 0; padding:0; position: absolute; right: 9999rem; top: calc(100% + 2rem); transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s; transform: translateY(0.6rem); width: 20rem; z-index: 1; } .sitenav ul li.menu-item-has-children:hover > ul, .sitenav ul li.menu-item-has-children:focus > ul, .sitenav ul li.menu-item-has-children.focus > ul { left: 0; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; background-color:#303030; top:0; position: relative; } .sitenav ul li a { padding: 5px 10px; display: block; color: #ffffff !important; text-align:left; } .sitenav ul li a:hover { color: #ffffff !important; } .sitenav ul li ul li a:before { content: "\00BB \00a0"; } .sitenav ul li ul li a { padding-left: 20px !important; } .sitenav ul li ul li ul li a { padding-left: 30px !important; } .sitenav ul li:hover, .sitenav ul li.current_page_item{ background-color:inherit !important; } /* --------- Pages ------- */ .content-area { width: auto; margin: 0 20px; padding: 50px 0; } .site-main { width: 60%; margin: 0; padding: 0; float: left; } #sidebar { width: 35%; margin: 0; padding: 0; float: right; } section{ padding-bottom:0; } .home-content h3{ font-size:30px; } .main-container{ margin-top:0; } } @media screen and (min-width: 1000px) { .sitenav ul li ul li { display: block; position: relative; float: none; } .sitenav ul li ul li a { display: block; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px #313131 solid; } .site-main { width: 70%; } } @media screen and (min-width: 1000px) and (max-width: 1159px) { .container { width: 95%; } .header .header-inner { width: 95%; } .sitenav ul{ font-size:12px; } .sitenav ul li:hover > ul{ top:52px; } .nivo-caption { top: 17% !important; height: auto !important; } .cat_comments { left: 35px; width: 25%; } .content-area { width: 95%; } #navigation{ width:auto; } .nivo-caption{ width:82% !important; } }