/* #Media Queries Responsive ================================================== */ /* Desktop large ------------------------- */ @media (min-width: 1200px) { #full-body #portfolio > li > div { min-height: 280px; } #header #mobile-nav { display: none; } } /* Desktop ------------------------- */ @media (min-width: 980px) and (max-width: 1199px) { #header #mobile-nav { display: none; } #home-intro .caption h1 { font-size: 25px; } #featured .featured-items > li > div h3 { font-size: 21px; } /*Website Page Start*/ #full-body #portfolio > li > div { min-height: 230px; } /*Website Page Ends*/ /*Virtual-tour Page Start*/ #full-body #portfolio-items.virtual-tours > ul > li { width: 33.33333%; } /*Virtual-tour Page Ends*/ } /* Tablet to desktop ------------------------- */ @media (min-width: 768px) and (max-width: 979px) { #header #mobile-nav { display: none; } #home-intro .caption { max-width: 430px; } #home-intro .caption { bottom: 125px; } #home-intro .caption h1 { font-size: 27px; } #featured .featured-items > li > div h3 { font-size: 21px; } #header #main-menu > li.highlight > a { padding: 10px 5px; } #header #main-menu > li { margin: 0px; } #pre-footer ul.contact-info > li > div { font-size: 22px; } /*index ends*/ #full-body #strength-graph-container { display: none; } #pre-footer ul.contact-info > li:first-child > div { border-right: 0px solid; } #pre-footer ul.contact-info > li > div { font-size: 21px; } /*Website Page Start*/ #full-body #portfolio > li { width: 50%; } #full-body #portfolio > li > div { min-height: 180px; } /*Website Page Ends*/ /*Virtual-tour Page Start*/ #full-body #portfolio-items.virtual-tours > ul > li { width: 50%; } /*Virtual-tour Page Ends*/ /*Contact Page Start*/ #contact-page-content #contact-types .play .diagonal { border-width: 0 0 461px 100px; } /*Contact Page Ends*/ } /* All Mobile Sizes (devices and browser) ------------------------- */ @media only screen and (max-width: 767px) { } /* Mobile Landscape & Tablet Portrait ------------------------- */ @media only screen and (min-width: 480px) and (max-width: 767px) { #header { position: relative; background: #fff; } #home-intro .caption { position: relative; left: 0px; padding: 0px 20px; bottom: 0px; text-align: left;} #header.fixed { display: none; } #header #main-menu { display: none; } #header .logo { position: relative; top: 0px; left: 0px; display: block; margin: 0 auto; } #header #mobile-nav { width: 55px; height: 28px; padding: 14px; top: 10px; left: 10px; } #backToTop.showit { z-index: 5; } #home-intro .scroll-down { margin: 20px 0px; } #home-intro .image { position: relative; max-width: 100%; bottom: 0px; right: 0px;} #home-intro .caption h1 { font-size: 24px; line-height: 34px; margin-top: 30px; } #home-intro .caption a.more { margin-bottom: 30px; } ul.clientsList.active { padding: 0px; } #our-clients div.clientsTabs ul.clientsList li { width: 50%; margin: 10px 0px; } #our-clients div.clientsTabs ul.clientsList li > div { padding: 0px; } #pre-footer ul.contact-info > li { width: 100%; padding: 5px 0px; } #pre-footer ul.contact-info > li > div { padding: 0px; text-align: center; } #pre-footer ul.contact-info > li:first-child > div { text-align: center; border-right: 0px solid; } #footer p { text-align: center; margin-bottom: 6px;} #footer ul.social { padding: 0px; text-align: center; } #full-body { padding: 0px 0px 0px; } #full-body #services > li { width: 50%; } #full-body #services > li > a > div h2 { font-size: 19px; text-align: center; } #full-body #strength-graph-container { display: none; } /*Website Page Start*/ #full-body #portfolio > li { width: 100%; } #full-body #portfolio > li > div { min-height: 330px; } /*Website Page Ends*/ /*Virtual-tour Page Start*/ #full-body #portfolio-items.virtual-tours > ul > li { width: 50%; } /*Virtual-tour Page Ends*/ /*Contact Page Start*/ #contact-page-content #contact-types { display: block; max-width: 850px; margin: 0 auto 40px; } #contact-page-content #contact-types .work { display: block; width: 100%; } #contact-page-content #contact-types .work > div { padding: 0px 2% 0px 20px; } #contact-page-content #contact-types .play > div { padding: 0px; } #contact-page-content .loc { font-size: 25px; } /*Contact Page Ends*/ /*Start a Project Page Start*/ #full-body #form-container form { max-width: 90%; } #full-body #form-container form .price-range { display: none; } /*Start a Project Page Ends*/ } /* Mobile Portrait ------------------------- */ @media only screen and (max-width: 479px) { #header { position: relative; background: #fff; } #header #main-menu { display: none; } #header.fixed { display: none; } #backToTop.showit { z-index: 5; } #home-intro { min-height: 0px; } #header .logo { display: block; position: relative; top: 0px; left: 0px; margin: 0 auto; text-align: center; } #header #mobile-nav { width: 55px; height: 50px; padding: 14px; top: 10px; left: 10px; } #home-intro .caption { position: relative; left: 0px; padding: 0px 20px; bottom: 0px; text-align: center; } #home-intro .caption h1 { font-size: 20px; line-height: 30px; } #home-intro .caption a.more { margin-top: 0px; } #home-intro .image { position: relative; bottom: 0px; right: 0px; max-width: 100%; padding: 30px 0px; } #home-intro{ color: 000; z-index: 2; min-height: 500px; background: transparent url(../images/intro-bg.jpg) center center;} #home-intro .scroll-down { bottom: 0px; } #home-intro .caption a.more { margin-bottom: 60px; } #our-clients div.clientsTabs ul.clientsList li > div { padding: 15px 5px; } #featured .featured-items { padding: 40px 0px; } #featured .featured-items > li > div h3 { font-size: 19px; padding-bottom: 20px; } #featured .featured-items > li { width: 100%; } #featured .featured-items > li > div .number { margin: 0 auto 0px; padding: 10px 0px; line-height: 80px;} #full-body #portfolio > li > div > div.name { top: 0%; } ul.clientsList.active { padding: 0px; } #our-clients div.clientsTabs ul.clientsList li { width: 49%; } #what-we-do .serviceList > li > div h3 { font-size: 18px; } #what-we-do .serviceList > li > div div.icon { width: 70px; height: 70px; } #what-we-do .serviceList > li > div div.icon > img { margin-top: -60px; } #pre-footer h2 { margin: 0px; } #pre-footer ul.contact-info > li { width: 100%; padding: 5px 0px; } #pre-footer ul.contact-info > li > div { padding: 0px; text-align: center; line-height: 30px; font-size: 21px; } #pre-footer ul.contact-info > li > div i { margin-right: 0px; } #pre-footer ul.contact-info > li:first-child > div { border-right: 0px solid; text-align: center; } #footer { font-size: 9px; } #footer p { text-align: center; margin-bottom: 6px;} #footer ul.social { padding: 0px; text-align: center; } /* index page ends */ h1 {font-size: 25px; line-height: 35px; } #full-body { padding: 10px 0px 0px; } #full-body #portfolio > li > div > div.logo { top: 30%; } #full-body .page-title p { font-size: 20px; line-height: 30px; } #full-body #services > li { width: 100%; } #full-body #strength-graph-container { display: none; } #full-body #services > li > a { text-align: center; } #full-body #services > li > a > div h2 { text-align: center; } /*Website Page Start*/ #full-body #portfolio > li { width: 100%; } #full-body #portfolio > li > div { min-height: 200px; } /*Website Page Ends*/ /*Virtual-tour Page Start*/ #full-body #portfolio-items.virtual-tours > ul > li { width: 100%; } /*Virtual-tour Page Ends*/ /*Contact Page Start*/ #contact-page-content #contact-types { display: block; max-width: 620px; margin: 0 auto 40px; } #contact-page-content #contact-types .work { display: block; width: 100%; } #contact-page-content #contact-types .work > div { padding: 0px 2% 0px 20px; } #contact-page-content #contact-types .play > div { padding: 0px; } #contact-page-content .loc { font-size: 22px; } /*Contact Page Ends*/ /*Start a Project Start*/ #full-body #form-container form { max-width: 100%; } #full-body #form-container form .project-type div { text-align: left; left: 30%; width: 100%; } #full-body #form-container form .field { margin: 10px 20px; } #full-body #form-container form .price-range { display: none; } #full-body #form-container form textarea { width: 90%; } /*Start a Project Ends*/ #contact-page-content .ph {flex-direction: column;} #contact-page-content .ph i.fa.fa-phone {margin-right: 0;} #contact-page-content .ph i.fa.fa-whatsapp {margin-right: 0;} #full-body .page-subtitle p { padding: 10px 15px; line-height: 28px; } #contactList ul { flex-direction: column; } #contactList ul li { width: 89%; margin: 10px 21px; } .google-maps {margin: 25px 20px;} }