/* Mobile Portrait View */ @media screen and (max-width:479px) { *{ box-sizing:border-box; } .container { width:auto; padding:0 20px; } .header { width:100%; padding:0 20px; position:inherit !important; } .logo { float:none; text-align:center; } .services { position:relative; width:auto; } #services-box { width:auto; display:block; margin-right:0; margin-bottom:20px; padding:20px; top:0; } .copyright-wrapper .inner{ width:100%; } .footer-menu, .copyright{ float:none; text-align:center; margin-bottom:10px; } .sicons { width:auto; } .footer, .copyright { width:auto; padding:0 20px; } .copyright-txt, .design-by { text-align:center; float:none; } /* ------ Extra ------ */ .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:#f75800; } .nav{ display:none; } .header .header-inner .nav{ float:none; margin:0; position:relative; overflow-x:hidden; } .header .header-inner .nav ul{ background:#000000; color:#000; width:100%; float:none !important; margin-top:0; } .header .header-inner .nav ul li{ border-top:1px #303030 solid; display:block; float:none; text-align:left; } .header .header-inner .nav ul li a{ padding:5px 10px; display:block; color:#ffffff !important; } .header .header-inner .nav ul li a:hover{ color:#f75800 !important; } .nav ul li ul, .nav ul li ul ul{ display:block !important; } .nav ul li ul li a:before{ content:"\00BB \00a0"; } .nav ul li ul li a{ padding-left:20px !important; } .nav ul li ul li ul li a{ padding-left:30px !important; } .header .header-inner{ width:100%; padding:15px 0; } .header .header-inner .logo{ float:none; } #slider .top-bar p{ display:none; } section{ padding:40px 0 0; } /* --------- Pages ------- */ .content-area{ width:auto; margin:0 20px; padding:50px 0; } .site-main{ width:auto; margin:0; padding:0; float:none !important; } #sidebar{ width:auto; margin:60px 0 0; padding:0; float:none; } .nivo-caption{ top:0 !important; width:100% !important; left:0 !important; } #slider .top-bar{ top:24px !important; padding-bottom:17px; } #slider .top-bar h2{ font-size:17px !important; line-height:20px; padding:5px; text-align:center; } .nivo-directionNav a{ top:36%; } #slider .top-bar a.read-more{ display:none; } a.contact{ margin-top:5px !important; font-size:12px !important; } h2.section-title{ margin-bottom:5px; } .map iframe{ height:232px; } #sitemain iframe{ max-width:100%; height:auto; } } /* Mobile Landscape View */ @media screen and (max-width:719px) and (min-width:480px) { *{ box-sizing:border-box; } .alignleft, img.alignleft { width:100%; margin-right:0; } .container { width:auto; padding:0 20px; } .header { padding:0 20px; position:inherit !important; } .logo { float:none; text-align:center; } .services { position:relative; width:auto; } #services-box { width:auto; display:block; margin-bottom:20px; padding:20px; top:0; } .footer, .copyright { width:auto; padding:0 20px; } .copyright-txt, .design-by { text-align:center; float:none; } /* ------ Extra ------ */ .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:#f75800; } .toggle a.active{ color:#f75800; } .nav{ display:none; } .header .header-inner .nav{ float:none; margin:0; position:relative; overflow-x:hidden; } .header .header-inner .nav ul{ background:#000000; color:#000; width:100%; float:none !important; margin-top:0; } .header .header-inner .nav ul li{ border-top:1px #303030 solid; display:block; float:none; text-align:left; } .header .header-inner .nav ul li a{ padding:5px 10px; display:block; color:#ffffff !important; } .header .header-inner .nav ul li a:hover{ color:#f75800 !important; } .header .header-inner .nav ul li ul li a:before{ content:"\00BB \00a0"; } .header .header-inner .nav ul li ul li a{ padding-left:20px !important; } .header .header-inner .nav ul li ul li ul li a{ padding-left:30px !important; } .header .header-inner{ width:100%; padding:15px 0; } .header .header-inner .logo{ float:none; } #slider .top-bar p{ display:none; } #prevslide, #nextslide{ top:0; } .copyright-wrapper .inner{ width:100%; } .footer-menu, .copyright{ float:none; text-align:center; margin-bottom:10px; } section{ padding:40px 0 0; } /* --------- 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-caption{ top:0 !important; width:80% !important; height:90%; } #slider .top-bar{ top:35px !important; padding-bottom:32px; left:20px; } #slider .top-bar h2{ font-size:24px !important; line-height:35px; padding:10px; text-align:center } #slider .top-bar a.read-more{ display:none; } .nivo-directionNav a{ top:39% !important; } h2.section-title{ margin-bottom:5px; } .map iframe{ height:232px; } #sitemain iframe{ max-width:100%; height:auto; } } @media screen and (max-width:899px) and (min-width:320px) { h2.section-title { line-height:48px; font-size:35px !important; } .cat_comments{ height:auto; } #contact .column-2, #contact .column-2.last_column{ width:100%; float:none; margin:0 0 20px 0; } } /* Tablet View */ @media screen and (max-width:999px) and (min-width:720px) { *{ box-sizing:border-box; } .container { width:auto; padding:0 20px; } .header { padding:0 20px; } .nivo-caption{ top:0 !important; height:100% !important; width:69% !important; } .header { padding:0 20px; position:inherit !important; } #slider .top-bar{ top:70px !important; margin-bottom:0; left:10px; } .common_btn{ margin-top:2px; } a.read-more { padding:5px 10px; font-size:15px; margin:0; } #slider .top-bar p{ font-size:12px !important; line-height:17px !important; } #slider .top-bar h2{ font-size:25px !important; padding-top:5px; } .nivo-directionNav a{ top:42% !important; } /* ------ Extra ------ */ .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:#f75800; } .toggle a.active{ color:#f75800; } .nav{ display:none; } .header .header-inner .nav{ float:none; margin:0; position:relative; overflow-x:hidden; } .header .header-inner .nav ul{ background:#000000; color:#000; width:100%; float:none !important; margin-top:0; } .header .header-inner .nav ul li{ border-top:1px #303030 solid; display:block; float:none; text-align:left; } .header .header-inner .nav ul li a{ padding:5px 10px; display:block; color:#ffffff !important; } .header .header-inner .nav ul li a:hover{ color:#f75800 !important; } .header .header-inner .nav ul li ul li a:before{ content:"\00BB \00a0"; } .header .header-inner .nav ul li ul li a{ padding-left:20px !important; } .header .header-inner .nav ul li ul li ul li a{ padding-left:30px !important; } .header .header-inner{ width:100%; padding:15px 0; } .header .header-inner .logo{ float:none; text-align:center; } section { padding:30px 0 0; } /* --------- 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; } .services{ width:auto; } #services-box { width:46%; display:inline-block; margin-bottom:20px; margin-left:2% !important; padding:20px; top:-40px; } .footer, .copyright { width:auto; padding:0 20px; } .cat_comments .cat, .cat_comments .comnt{ font-size:10px; } .copyright-wrapper .inner{ width:95%; margin: auto; } .copyright ul li { font-size:13px !important; } } @media screen and (min-width: 1000px) { .header .header-inner .nav ul li ul li{ display:block; position:relative; float:none; } .header .header-inner .nav ul li ul li a{ color:#000; display:block; padding-top:10px; padding-bottom:10px; border-bottom:1px #313131 solid; } } @media screen and (min-width:1000px) and (max-width:1159px){ .header .header-inner, .container, .copyright-wrapper .inner{ width:95%; } .nivo-caption{ top:33% !important; height:auto !important; } a.read-more { padding:5px 20px; margin-top:5px; } .content-area { width:95%; } .site-main { width:70%; } section { padding:30px 0 0; } .services #services-box { top:-75px; } .services .about-left { width:73%; } .services .about-left h2 { padding-bottom:10px; } .services .about-left p { font-size:15px; line-height:25px; } .services .about-right { width:27%; height:210px; } .cat_comments .cat{ width:48%; } }