/* שמע ישראל יהוה אלהינו יהוה אחד׃ ואהבת את יהוה אלהיך בכל לבבך ובכל נפשך ובכל מאדך׃ דברים ו Web Elegance - Website Design and Development Main stylesheet. Table of Contents: 1. General Style 1.1. Typography 1.2. Header Styling 1.3. Footer Styling 2. Common Styling for all pages 3. Specific pages styling 3.1. Home page 3.2. Services Page Style 3.2.1. Web Design Page Style 3.2.2. SEO Page Style 3.2.3. WordPress Development Page Style 3.2.4. Mobile App Development Page Style 3.2.5. Database Development Page Style 3.2.6. Digital Marketing Page Style 3.2.7. Logo Design and Branding Page Style 3.2.8. Logo Design and Branding Page Style 3.2.9. Hosting and Domain Name Page Style 3.2.10. Maintenance and Support Page Style 3.3. Our Process Page Style 3.4. Portfolio Page Style 3.4.1. Portfolio Sub-Pages Common Style 3.4.2. Portfolio Sub-Page "Website STACHS" Style 3.4.3. Portfolio Sub-Page "Website LVA" Style 3.4.4. Portfolio Sub-Page "Website Digital MAPR" Style 3.4.5. Portfolio Sub-Page "Website WHS 2U" Style 3.4.6. Portfolio Sub-Page "Website CYKAT" Style 3.4.7. Portfolio Sub-Page "Website David Lam Designs" Style 3.5. Packages Page Style 3.6. About Page Style 3.7. Our Team Page Style 3.8. Our Team Page Style 3.9. Contact Page Style 3.10. Privacy Policy Page Style 3.11. Copyright Policy Page Style 3.12. Site Map Page Style 3.13. Blog Page Style 4. Private Area 4.1. Login Page Style 4.2. Admin Page Style 4.3. Posts Page Style 4.4. New Post Page Style 5. Media Queries --------------------------------------------------------------- --------------------- 1. GENERAL STYLE ----------------------- --------------------------------------------------------------- */ html {height:100%;} html.ieedge{overflow: hidden;} body { font-family: helvetica; font-size: 100%; margin: 0; padding: 0; background: #f2f2f2; /* below is the fix for jittery background for IE browser */ width: 100%; height: 100%; overflow: hidden; overflow-y: auto; } #wrap { margin: 0 auto; width: 100%; height: auto; background: #f2f2f2; } /* 1.1. Typography ---------------------------------------------- */ p { font-family: 'Roboto', sans-serif; } h6, h5, h4, h3 { font-family: 'Roboto', sans-serif; } /* 1.2. Header Styling -------------------------------------------- */ header { position: fixed; top: 0; width: 100%; height: auto; float: left; background: #fff; padding-top: 0.5em; padding-bottom: 0.8em; box-shadow: 1px 1px 10px #000; opacity: 1; z-index: 999; /* transition into the smaller header on scroll */ transition: height 1.2s, background-color 1.2s ease; -webkit-transition: height 1.2s, background-color 1.2s ease; -moz-transition: height 1.2s, background-color 1.2s ease; -ms-transition: height 1.2s, background-color 1.2s ease; -o-transition: height 1.2s, background-color 1.2s ease; } /* ------------------- Logo ------------------- */ #logo { /* margin-top: -50px; */ } header h1 { font-family: 'Julius Sans One', sans-serif; font-size: 1.9em; text-align: center; position: relative; /* transition into the smaller logo on scroll */ transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; } .main_logo { width: 170px; height: auto; margin-bottom: -10px; margin-top: -23px; } /* ---------------------------- Old on-scroll style: header.smaller { height: 88px; } header.smaller h1 { font-size: 1em; font-weight: normal; } header.smaller .main_logo { width: 85px; margin-bottom: -10px; margin-top: -15px; } */ /* ------------------- Navigation Menu Bar ------------------- */ nav { position: relative; width: 650px; height: auto; left: 50%; margin-left: -325px; margin-bottom: -1.5em; } nav ul { margin-left: -30px; list-style-type: none; overflow: hidden; } nav ul li { display: inline; padding-left: 7px; padding-right: 7px; color: #4D4D4D; height: 30px; } nav ul li:last-child { font-weight: bold; } nav ul li a { text-decoration: none; padding-bottom: 10px; color: #4D4D4D; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 14px; /* transition into the smaller navigation menu on scroll */ transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; } nav ul li a:hover, nav ul li a:focus, .active { text-decoration: underline; transition: all 0.3s; opacity: 0.7; } /* Navigation menu Unordered List Drop-down Style */ .dropbtn { display: inline-block; position: relative; z-index: 999; } nav ul li.dropdown { display: inline-block; z-index: 999; } .dropdown-content { display: none; position: absolute; background-color: #fff; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 999; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; font-size: 14px; z-index: 999; } .dropdown:hover .dropdown-content, .dropdown:focus .dropdown-content { display: block; position: absolute; margin-left: -20px; margin-top: -5px; } .dropdown-content a:hover, .dropdown-content a:focus { text-decoration: underline; opacity: 0.5; filter: alpha(opacity=50); } /* Mobile Navigation Section */ #trigger, #mobile-menu { display: none; } /* Header On-scroll Animation */ body.scrolled header { padding-bottom: 7px; transition: all .5s; } body.scrolled .main_logo { width: 100px; transition: all 0.5s; margin-bottom: -15px; } /* 1.3. Footer Styling --------------------------------------------- */ footer { width: %100; height: auto; bottom: 0; margin-bottom: -1em; padding-top: 2em; padding-bottom: 4em; color: #fff; font-family: sans-serif; opacity: 0.99; filter: alpha(opacity=99); } .footer-div { position: relative; z-index: 999; } footer #p1 {margin-bottom: -3em;padding-top: 3em;} footer h2 {padding-top: 2em;font-family: 'Julius Sans One', sans-serif;text-align: center;} footer p {text-align: center;font-size: 13px;} footer #copyright {font-size: 0.85em;} footer ul { width: 80px; position:relative; left:50%; margin-left: -60px; } footer ul li { display: inline;} footer img {width: 30px;} .footer_link {color: #fff; transition: color 0.5s;} .footer_link:hover, .footer_link:focus {color: #000; transition: color 0.5s;} /* Social buttons */ .fab { padding: 5px;font-size: 50px;width: 10px; text-align: center; text-decoration: none;margin: 5px 2px;cursor: pointer;} .fa-facebook-f { color: white; margin-right: 10px; opacity: 1; } .fa-linkedin-in { color: white; opacity: 1; } .fa-facebook-f:hover, .fa-facebook-f:focus, .fa-linkedin-in:hover, .fa-linkedin-in:focus {color: #111;transition: all 0.5s;} /* Home page Footer */ .home-page-footer { position:relative; z-index:990; } /* Privacy page, Copyright page and Site-map page Footer */ .dark-footer { background: #1a1a1a; } /* --------------------------------------------------------------- ------------- 2. COMMON STYLING FOR ALL PAGES ------------- --------------------------------------------------------------- */ .blank-bg-h1 { position: relative;background: #1a1a1a; padding-top: 220px; padding-bottom: 30px;} .blank-bg-h1 h1 { text-align: center; color: #fff; font-weight: normal; font-family: 'Great Vibes', cursive; font-size: 50px; font-weight: normal; } .main { width: 100%; height: auto; margin-left: 0; margin-right: 0; z-index: 999; opacity: 0.95; filter: alpha(opacity=95); position: relative; z-index: 888; opacity: 1; filter: alpha(opacity=1); } /* ------------------- Animated Handwritten Roll out Slogan style ------------------- */ .message { margin-top: 170px;padding-top: 70px; color: #FFF;text-align: center; font-size: 50px;font-family: 'Great Vibes', cursive; z-index: 999; } .message h1{ text-align: center; color: #fff; font-weight: normal; font-family: 'Great Vibes', cursive; font-size: 50px; font-weight: normal; } .header_underline, .header_underline-wp-dev, .header_underline-packages, .header_underline-process { font-family: 'Satisfy', cursive; font-weight: normal; font-size: 22px; text-align: center; color: #fff; } /* Common main page content container */ .container-common { background: #f2f2f2; color: #4d4d4d; overflow: hidden; } .container-common h2 { font-family: 'Roboto', sans-serif; text-align: center; } .container-common p { text-align: justify; } .inner-container { width: 70%; height: auto; margin-left: 15%; overflow: hidden; } .inner_cont-portfolio {color: #4d4d4d;} .break-line { border: 1px solid #ccc; position: relative; } /* ------------------- Common Buttons ------------------- */ #inner-button { width: 20%;height: 50px;margin-left: 40%;margin-top: 3em;} #inner-button a {text-decoration: none;} #inner-button h3 { font-family: "Roboto", sans-serif; font-size: 1.2em; font-weight: normal; width: 100%; height: 40px; text-align: center; color: #fff; padding-top: 20px; border: 2px solid #fff; border-radius: 5px; transition: 0.3s; box-shadow: 0 0 0 #000; } #inner-button h3:hover, #inner-button h3:focus { border: 2px solid #80ff80;background: #80ff80;transition: 0.3s;box-shadow: 5px 5px 15px #000;color: #000; } /* Blog button */ .blog-button, .blog-button-home {position: fixed;right: 0;bottom: 50%;z-index: 999;} .blog-button-home {animation-delay: 4s;} .blog-button a, .blog-button-home a { border: 1px solid #08636E; border-top-left-radius: 3px;border-bottom-left-radius: 3px; padding:10px;background: #08636E;box-shadow: 3px 3px 10px #1a1a1a; color: #f2f2f2;text-decoration:none;display:block;transition: all 0.5s; } .blog-button-text {display:none;} .blog-button a:hover, .blog-button-home a:hover, .blog-button a:focus, .blog-button-home a:focus { border: 1px solid #f2f2f2;background: #f2f2f2;color:#1a1a1a;padding-right:20px;transition: all 0.5s; } /* ------------------- PARALLAX STYLING ------------------- */ /* Parallax: Services page*/ section.module.parallax-services-1 { height: 250px; background-image: url("../images/photo-1467241850596-6a0de48568da.jpg"); -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } section.module.parallax-services-footer-3 { height: 16em;padding-bottom: 8.5em; background-image: url("../images/New-images/alex-blajan-101879-unsplash.jpg"); -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } /* Parallax: Web design page */ section.module.parallax {background-position: 50% 50%; background-attachment: fixed; background-size: cover;} section.module.parallax-1 { height: 250px; background-image: url("../images/web_des/img_1.jpg"); -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } section.module.parallax-2 {height: 16em;background-image: url("../images/New-images/dan-stark-69804-unsplash.jpg");} section.module.parallax-3 {height: 16em;padding-bottom: 8.5em;background-image: url("../images/New-images/bryce-evans-202178-unsplash.jpg");} /* Parallax: SEO page */ section.module.parallax-seo-1 { height: 250px; background-image: url("../images/seo/photo-1446071103084-c257b5f70672.jpg"); -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } section.module.parallax-seo-2 {height: 16em;background-image: url("../images/New-images/jonatan-pie-216311-unsplash.jpg");} section.module.parallax-seo-3 {height: 16em;padding-bottom: 8.5em;background-image: url("../images/New-images/binit-sharma-227839-unsplash.jpg");} /* Parallax: WordPress page */ section.module.parallax-wp-dev-1 { height: 250px; background-image: url("../images/photo-1471696035578-3d8c78d99684.jpg"); -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } section.module.parallax-footer-wp-dev-3 {height: 16em;padding-bottom: 8.5em;background-image: url("../images/New-images/annie-spratt-176628-unsplash.jpg");} /* Parallax: Database development page */ section.module.parallax-db-dev-1 { height: 250px; background-image: url("../images/philipp-reiner-686.jpg"); -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } section.module.parallax-footer-db-dev-3 {height: 16em;padding-bottom: 8.5em;background-image: url("../images/New-images/oscar-keys-39379-unsplash.jpg");} /* Parallax: Digital marketing */ section.module.parallax-market-dev-1 { height: 250px; background-image: url("../images/photo-1459664018906-085c36f472af.jpg"); -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } section.module.parallax-footer-dm-3 {height: 16em;padding-bottom: 8.5em;background-image: url("../images/New-images/john-french-400-unsplash.jpg");} /* Parallax: Logo Design and Branding */ section.module.parallax-branding-dev-1 { height: 250px; background-image: url("../images/branding_bg.jpg"); -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } section.module.parallax-footer-brand-3 {height: 16em;padding-bottom: 8.5em;background-image: url("../images/New-images/felix-russell-saw-107214-unsplash.jpg");} /* Parallax: Hosting and Domain page */ section.module.parallax-hosting-dev-1 { height: 250px; background-image: url("../images/photo-1471551504096-a481c161e109.jpg"); -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } section.module.parallax-footer-hosting-3 {height: 16em;padding-bottom: 8.5em;background-image: url("../images/New-images/amith-nair-241655-unsplash.jpg");} /* Parallax: Maintenance and Support page */ section.module.parallax-support-dev-1 { height: 250px; background-image: url("../images/photo-1469975696786-49748c495f56.jpg"); -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } section.module.parallax-footer-mnsup-3 {height: 16em;padding-bottom: 8.5em;background-image: url("../images/New-images/jordan-sanchez-46261-unsplash.jpg");} /* Parallax: Portfolio page */ section.module.parallax-portfolio-1 { height: 250px; background-image: url("../images/portfolio_bg.jpg"); -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } section.module.parallax-f-portf-3 {height: 16em;padding-bottom: 8.5em;background-image: url("../images/New-images/ian-schneider-41926-unsplash.jpg");} /* Parallax: Packages page */ section.module.parallax-packages-1 { height: 250px; background-image: url("../images/packages/06.jpg"); -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } section.module.parallax-packages-2 {height: 16em;background-image: url("../images/New-images/arj-567106-unsplash.jpg");} section.module.parallax-packages-3 {height: 16em;padding-bottom: 8.5em;background-image: url("../images/packages/03.jpg");} /* Parallax: About page */ section.module.parallax-about-1 { height: 250px; background-image: url("../images/about.jpg"); -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } section.module.parallax-about-2 { height: 200px;padding-top: 0;background-image: url("../images/victor-dittiere-578448-unsplash.jpg");} section.module.parallax-f-ab-3 {height: 16em;padding-bottom: 8.5em;background-image: url("../images/New-images/brett-ritchie-567662-unsplash.jpg");} /* Parallax: Our Team page */ section.module.parallax-team-1 { height: 250px; background-image: url("../images/ben-dumond-70964.jpg"); -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } section.module.parallax-f-team-3 {height: 16em;padding-bottom: 8.5em;background-image: url("../images/New-images/sven-schlager-758-unsplash.jpg");} /* Parallax: Contact page */ section.module.parallax-contact-1 { height: 250px; background-image: url("../images/services_bg1.jpg"); -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } section.module.parallax-f-cont-3 {height: 16em;padding-bottom: 8.5em;background-image: url("../images/New-images/andrew-coelho-215805-unsplash.jpg");} /* Parallax: Blog page */ section.module.parallax-blog-1 { height: 250px; background-image: url("../images/riccardo-trimeloni-318271-unsplash.jpg"); -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } section.module.parallax-f-blog-3 {height: 16em;padding-bottom: 8.5em;background-image: url("../images/teddy-kelley-106391-unsplash.jpg");} /* Parallax: Common page Animation */ @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1 } 17% { opacity: 1 } 25% { opacity: 1 } 100% { opacity: 1 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1 } 17% { opacity: 1 } 25% { opacity: 1 } 100% { opacity: 1 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1 } 17% { opacity: 1 } 25% { opacity: 1 } 100% { opacity: 1 } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1 } 17% { opacity: 1 } 25% { opacity: 1 } 100% { opacity: 1 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1 } 17% { opacity: 1 } 25% { opacity: 1 } 100% { opacity: 1 } } /* --------------------------------------------------------------- ------------------- 3. SPECIFIC PAGES STYLE ------------------ --------------------------------------------------------------- 3.1. HOME PAGE STYLE ----------------------------------------- ------------------- Background Style show ------------------- */ .cb-slideshow, .cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; list-style: none; z-index: 0; } .cb-slideshow:after { content: ''; background: transparent url(../images/pattern.png) repeat top left; } .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; filter: alpha(opacity=0); z-index: 0; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s; } .cb-slideshow li:nth-child(1) span { background-image: url(../images/p6.jpg); } .cb-slideshow li:nth-child(2) span { background-image: url(../images/p1.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .cb-slideshow li:nth-child(3) span { background-image: url(../images/p7.jpg); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .cb-slideshow li:nth-child(4) span { background-image: url(../images/p2.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .cb-slideshow li:nth-child(5) span { background-image: url(../images/p4.jpg); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .cb-slideshow li:nth-child(6) span { background-image: url(../images/p3.jpg); -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } /* Animation for the slideshow images (note: causes bg imgs to disappear temporarily) @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-animation-timing-function: ease-out; } 17% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-animation-timing-function: ease-out; } 17% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-animation-timing-function: ease-out; } 17% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-animation-timing-function: ease-out; } 17% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } } */ /* Show at least something when animation is not supported */ .no-cssanimations .cb-slideshow li span{ opacity: 1; filter: alpha(opacity=100); } /* ------------------- Buttons style ------------------- */ .button1, .button3 { position: relative; width: 240px; height: 3.3em; left: 50%; margin-top: 3em; margin-left: -120px; opacity: 0.95; filter: alpha(opacity=95); } .button1 {margin-bottom: 60px; } .button1 a, .button3 a { display: block; font-size: 1em; text-decoration: none; color: #FFF; font-family: 'Roboto', sans-serif; height: 3.3em; border: 2px solid #FFF; border-radius: 5px; box-shadow: 2px 2px 3 px #000000; text-align: center; box-shadow: 0px 0px 0px #000; transition: all 0.5s; } .button1 a:hover, .button1 a:focus, .button3 a:hover, .button3 a:focus { box-shadow: 5px 5px 15px #000; transition: all 0.5s; } .button2 { margin-left: 30%; width: 40%; height: auto; margin-top: 0px; text-align: center; margin-bottom: 2em; } .button2 a { font-size: 2.2em; padding-left: 6em; color: #fff; font-family: 'Great Vibes', cursive; transition: all 0.5s; text-decoration: none; } .button2 a:hover, .button2 a:focus { color: #8C8C8C;text-decoration:underline;transition: all 0.5s; } .button3 a:hover, .button3 a:focus { border: 2px solid #ccc; color: #ccc; transition: all 0.5s; } /* ------------------- Information Blocks Style (Older version, changed on 3/5/18) ------------------- */ #container_blocks { width: 100%; height: auto; background: #fff; position: relative; z-index: 888; opacity: 0.99; filter: alpha(opacity=99); overflow: hidden; } #container_inner { width: 80%; margin-left: 10%; height: auto; overflow: auto; } .block1, .block2, .block3, .block4, .block5, .block6 { position: relative; float: left; max-width: 29%; height: 280px; margin-left: 30px; margin-bottom: 0px; margin-top: 10px; padding-bottom: 2em; padding-top:20px; font-size: 0.95em; font-family: helvetica; text-align: justify; overflow: hidden; border-top: 5px solid #e6e6e6; border-bottom: 5px solid #e6e6e6; transition:all 0.5s; } .block1 h3, .block2 h3, .block3 h3, .block4 h3, .block5 h3, .block6 h3 { font-size: 1.2em; font-weight: normal; font-family: 'Roboto', sans-serif; text-align: center; text-shadow: 2px 2px 10px #ccc; color: #00334d; } .block-pic { padding-top: 0;margin-top: -20px; } .block1 p, .block2 p, .block3 p, .block4 p, .block5 p, .block6 p { color: #4D4D4D; } .block1 a, .block2 a, .block3 a, .block4 a, .block5 a, .block6 a { text-decoration: none; display: block; } .block1:hover, .block2:hover, .block3:hover, .block4:hover, .block5:hover, .block6:hover { border-top: 5px solid #00334d; border-bottom: 5px solid #00334d; transition: all 0.5s; } .block1 a:hover, .block2 a:hover, .block3 a:hover, .block4 a:hover, .block5 a:hover, .block6 a:hover, .block1 a:focus, .block2 a:focus, .block3 a:focus, .block4 a:focus, .block5 a:focus, .block6 a:focus { text-decoration: none; color: #333399; } .clearfix { clear: both; } /* ------------------- Container blocks animation (Older version, changed on 3/5/18) ------------------- /Note: make keyframes that tell the start state and the end state of our object */ @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } .block1, .block2, .block3, .block4, .block5, .block6 { opacity:0; /* make things invisible upon start */ -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:0.5s; -moz-animation-duration:0.5s; animation-duration:0.5s; } .block1 { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; animation-delay: 0.7s; } .block2 { -webkit-animation-delay: 1s;-moz-animation-delay:1s;animation-delay: 1s;} .block3 {-webkit-animation-delay: 1.3s;-moz-animation-delay: 1.3s;animation-delay: 1.3s;} .block4 {-webkit-animation-delay: 1.6s;-moz-animation-delay: 1.6s;animation-delay: 1.6s;} .block5 {-webkit-animation-delay: 1.9s;-moz-animation-delay: 1.9s;animation-delay: 1.9s;} .block6 {-webkit-animation-delay: 2.2s;-moz-animation-delay: 2.2s;animation-delay: 2.2s;} /* -------------------- Business Description Text ---------------------- */ .key-description {text-align:center;font-size:17px;} .key-description-idea {font-size: 22px;font-style:italic;padding-bottom:5px;padding-top:5px; border-top: 3px solid #ccc;border-bottom:3px solid #ccc;color:#08636E;} .portfolio-link {text-align: center;} .portfolio-link a {color: #4d4d4d;} .portfolio-link a:hover, .portfolio-link a:focus {color: #08636E;} /* ------------------- Corner decorative ornaments ------------------- */ .corner { position: relative; width: 80px; height: auto; } .corner-left-top, .corner-left-bottom: { float: left; padding-left: 10px;} .corner-right-top, .corner-right-bottom { float: right;padding-right: 10px; } .corner-left-top, .corner-right-top {margin-top: 10px;} .corner-left-bottom, .corner-right-bottom {padding-bottom: 10px;} /* ------------------- First Transparent break Style ------------------- */ #transp_break { width: 100%; height: 8em; position: relative; z-index: 888; opacity: 0.99; filter: alpha(opacity=99); /* Background transparent gradient */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ } /* ------------------- Information Section Style ------------------- */ #info { width: 100%; height: auto; margin: 0; padding-top: 1em; padding-bottom: 2em; background: #E6E6E6; color: #000; font-size: 1em; color: #4D4D4D; position: relative; z-index: 888; opacity: 0.99; filter: alpha(opacity=99); } #info h3 { font-weight: normal; font-family: 'Roboto', sans-serif; font-size: 1.2em; color: #000; } #info_text { /* display: none; */ padding-left: 12.5%; padding-right: 12.5%; text-align: justify;} .portfolio-section-header {text-align:center;font-weight:normal;font-family: 'Roboto', sans-serif;} /* ------------------- Second Transparent break Style ------------------- */ #transp_break_2 { width: 100%;height: auto; padding-top: 10px;padding-bottom: 60px; position: relative; z-index: 888; opacity: 0.99; filter: alpha(opacity=99); } /* ------------------- Contact Form Styling ------------------- */ /* Note: currently this styling is used for other pages too !!! */ .contact-form-home-page h3 { text-align: center; padding-top: 20px; font-family: 'Roboto', sans-serif; } .contact-form-home-page p { text-align: center; font-family: 'Roboto', sans-serif; } .contact-form-home-page a { color: #000; } .contact-form-home-page .quote { font-weight: bold; font-size: 18px; color: #000; font-family: 'Roboto', sans-serif; transition: all 0.5s; } .contact-form-home-page .quote:hover, .contact_form .quote:focus { color: #333399; transition: all 0.5s; } .contact-form-home-page { width: 100%; overflow: hidden; height: auto; background: #f2f2f2; position: relative; padding-bottom: 2em; z-index:888; } form { width: 60%; margin-left: 18%; padding-top: 0.5em; padding-bottom: 0.5em; } form h3 { padding-left: 1.5em; font-family: 'Julius Sans One', sans-serif; } form .left_col { position: relative; width: 49%; float: left; padding-top: 1em; } form .right_col { position: relative; width: 49%; float: right; padding-top: 1em; } /* Form fields */ form .row .detail { width: 90%; height: 2.2em; margin-bottom: 1.5em; margin-left: 8%; border: 0.1px solid #ccc; border-radius: 3px; padding: 2px; background: #f2f2f2; } form .row .detail:focus{ background: #ffffff; } form .row .mess { width: 90%; max-width: 90%; height: 9.6em; max-height: 9.6em; margin-bottom: 1em; margin-left: 8%; border: 0.1px solid #ccc; border-radius: 3px; padding: 0.5em; padding-left: 0.5em; font-size: 1em; font-family: sans-serif; background: #f2f2f2; } form .row .mess:focus { background: #ffffff; } #name { padding-left: 0.5em; font-size: 1em; } #phone{ padding-left: 0.5em; font-size: 1em; } #emailAddress { padding-left: 0.5em; font-size: 1em; } textarea #comment { padding-left: 0.5em; font-size: 1em; } #submit { width: 12em; height: 3em; cursor: pointer; color: #fff; font-family: sans-serif; background: #808080; border: #808080; border-radius: 2px; margin-left: 2.2em; margin-top: 1em; float: left; } #submit:hover, #submit:focus { background: #4d4d4d; } /* 3.2. SERVICES PAGE STYLE --------------------------------------- */ .container-services { background: #000; } .inner-container-services { width: 84%;margin-left: 8%; position: relative; hieght: auto;} /* Styling of Rotating Cubes Elements a. Positioning of cubes within the page: */ .cube1, .cube2, .cube3 { margin-top: 1.5em; } .cube1, .cube4 { margin-left: 5%; } .cube4, .cube5, .cube6{ margin-bottom: 4em; } /* b. Container box: setting the sides relative to: */ .cube1, .cube2, .cube3, .cube4, .cube5, .cube6 { width: 30%; text-align: center; height: 200px; float: left; -webkit-transition: -webkit-transform .33s; -o-transition: -o-transform .33s; -moz-transition: -mos-transform .33s; transition: transform .33s; /* Animate the transform properties */ -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; /* <-NB */ } .block_dscrp { padding-left:5px;padding-right:5px; } /* c. Two faces of a cube: */ .flippety1, .flop1, .flippety2, .flop2, .flippety3, .flop3, .flippety4, .flop4, .flippety5, .flop5, .flippety6, .flop6 { height: 200px; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189, .8); -webkit-border-radius: 3px; border-radius: 3px; } /* d. Position the faces: */ .flippety1, .flippety2, .flippety3, .flippety4, .flippety5, .flippety6 { -webkit-transform: translateZ(97px); transform: translateZ(97px); } .flippety1 h3, .flippety2 h3, .flippety3 h3, .flippety4 h3, .flippety5 h3, .flippety6 h3 { font-family: 'Roboto', sans-serif; padding-bottom: 20px; } .flop1, .flop2, .flop3, .flop4, .flop5, .flop6 { -webkit-transform: rotateX(-90deg) translateZ(-100px); -o-transform: rotateX(-90deg) translateZ(-100px); -mos-transform: rotateX(-90deg) translateZ(-100px); transform: rotateX(-90deg) translateZ(-100px); } .flop1 img, .flop2 img, .flop3 img, .flop4 img, .flop5 img, .flop6 img { width: 100%; height: 200px; } /* e. Rotate the cube */ .cube1:hover, .cube2:hover, .cube3:hover, .cube4:hover, .cube5:hover, .cube6:hover, .cube1:focus, .cube2:focus, .cube3:focus, .cube4:focus, .cube5:focus, .cube6:focus { -webkit-transform: rotateX(89deg); -o-transform: rotateX(89deg); -mos-transform: rotateX(89deg); transform: rotateX(89deg); } /* 3.2.1. WEB DESIGN PAGE STYLE ----------------------------------- */ /* Containers area style: Container 1 */ #image_h3 { position: relative; z-index: 900; font-family: "Roboto", sans-serif;font-size: 1.5em;font-weight:normal; text-align: center; padding-top: 20px; right: -150%; -webkit-animation: slide2 0.7s forwards; -webkit-animation-delay: 0.2s; animation: slide2 0.7s forwards; animation-delay: 0.2s; } @-webkit-keyframes slide2 {100% { right: 0; }} @keyframes slide2 {100% { right: 0; }} p.web-design-p { width: 80%; margin-left: 10%; text-align: center; padding-top: 10px; padding-bottom: 10px; color: #000; font-size: 17px; } h3.web-des-link-to-blog {text-align: center;padding-bottom: 20px;} h3.web-des-link-to-blog a {opacity: 0.9;text-decoration: underline;color: #990000;transition: all 0.3s;} h3.web-des-link-to-blog a:hover, h3.web-des-link-to-blog a:focus {opacity: 0.7; transition: all 0.3s;} .bus_strat { width: 500px; height: auto; position: relative; z-index: 800; left: 50%; margin-left: -250px; padding-bottom: 10px; } /* Containers area style: Container 2 */ .inner_container-web-design-2 {position:relative;left:50%;width: 220px;margin-left:-110px;} .inner_container-web-design-2 a {text-decoration: none;} .inner_container-web-design-2 h3 { text-align: center; font-family: "Roboto", sans-serif; font-size: 1.2em; font-weight: normal; color: #1a1a1a; border: 2px solid #4d4d4d; border-radius: 2px; box-shadow: 2px 2px 3 px #000000; padding-top: 1em; padding-bottom: 1em; -webkit-transition: 0.3s; /* For Safari 3.1 to 6.0 */ transition: 0.3s; margin-bottom: 30px; } .inner_container-web-design-2 h3:hover, .inner_container-web-design-2 h3:focus { transition: 0.3s;background: #009999;border: 2px solid #009999;color:#f2f2f2; } /* Containers area style: Container 3 */ #container-web-design-3 { position: relative; height: auto; padding-top: 0.5em; padding-bottom: 16em; /* <<<-- height is here */ text-align: justify; z-index: 800; /* background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); */ } .inner_container-web-design-3 h3 {text-align: center;font-size:45px;font-weight: normal;margin-top:100px;font-family:'great vibes';} .inner_container-web-design-3 a {color: #fff;text-shadow: 3px 3px 15px #1a1a1a;transition: all 0.3s;} .inner_container-web-design-3 a:hover, .inner_container-web-design-3 a:focus {text-shadow: 3px 3px 3px #000;transition: all 0.3s;} /* Containers area style: Container 4 */ #container-web-design-4 { position: relative;height: auto;padding-top: 0.5em;padding-bottom: 1em; background: #333;text-align: justify;color: #fff; } .inner_container-web-design-4 { background: #1a1a1a; box-shadow: 2px 2px 20px #1a1a1a; width: 70%; height: auto; margin-left: 15%; } .inner_container-web-design-4 h3 { border-bottom: 1px solid #1a1a1a; padding-top: 1em; padding-bottom: 20px; background: #1a1a1a; text-align: center; font-family: "Roboto", sans-serif; font-size: 1.5em; font-weight: normal; } .inner_container-web-design-4 p { font-family: "Roboto", sans-serif; border-bottom: 1px solid #fff; padding-bottom: 1em; } .inner_container-web-design-4 ul {position: relative;height: auto;padding-bottom: 1em;} .inner_container-web-design-4 ul li {display: inline-block;margin-right: 5%;color: #f2f2f2;} .inner_container-web-design-4 ul li a {color:#66a3ff;} .inner_container-web-design-4 ul li a:hover, .inner_container-web-design-4 ul li a:focus {color: #fff;} .inner_container-web-design-4 ul li h4 {font-family: "Roboto", sans-serif;margin-top: 1em;} .list_imgs {width: 30px;height: auto;} .list_img2 {opacity: 0.7;} .list_img3 {width: 45px;margin-left: -10px;} #contact_form-web-des { width: 100%; overflow: hidden; height: auto; background: #333; position: relative; margin-top: -1em; padding-bottom: 3em; } .contact_note { font-family: "Roboto", sans-serif; font-size: 1.2em; text-align: center; color: #f2f2f2; margin-bottom: -1em; } /* 3.2.2. SEO PAGE STYLE ------------------------------------------ */ .cont-seo-1-left, .cont-seo-1-right { width: 35%; height: auto; float: left; position: relative; margin-top: 1em; } .cont-seo-1-left h2, .cont-seo-1-right h2 { font-family: 'Julius Sans One', sans-serif; } .cont-seo-1-left p, .cont-seo-1-right p { text-align: justify; } .cont-seo-1-left { margin-left: 14%; left: -150%; -webkit-animation: slide 0.7s forwards; -webkit-animation-delay: 0.2s; animation: slide 0.7s forwards; animation-delay: 0.2s; } @-webkit-keyframes slide {100% { left: 0; }} @keyframes slide {100% { left: 0; }} .cont-seo-1-right { margin-left: 2%; right: -150%; -webkit-animation: slide2 0.7s forwards; -webkit-animation-delay: 0.2s; animation: slide2 0.7s forwards; animation-delay: 0.2s; } @-webkit-keyframes slide2 {100% { right: 0; }} @keyframes slide2 {100% { right: 0; }} #cont-left-img { width: 100%; height: auto; margin-left: 0; overflow: hidden; } /* container-contact-button styling */ .container-contact-button { width: 100%;position: relative; margin-top: 50px;padding-top: 50px; } #inner-button-seo h3 { font-family: "Roboto", sans-serif;font-size: 1.2em;font-weight: normal; position: relative;left:50%;margin-left:-100px;margin-top:45px;padding-top: 20px; width: 200px;height: 40px; text-align: center;color: #fff; border: 2px solid #fff;border-radius: 5px;box-shadow: 0 0 0 #000; transition: 0.3s; } #inner-button-seo a {text-decoration:none;} #inner-button-seo h3:hover, #inner-button-seo h3:focus { border: 2px solid #006666;background: #006666;transition: 0.3s;box-shadow: 5px 5px 15px #000; } .container-seo-2 { position: relative; width: 100%; height: auto; padding-top: 2em; padding-bottom: 2em; background: #4d4d4d; } #inner-cont-seo-2 { width: 75%; height: auto; margin-left: 12.5%; border-top: 1px solid #4d4d4d; box-shadow: 2px 2px 20px #1a1a1a; background: #333; } #inner-cont-seo-2 h2 { font-family: 'Julius Sans One', sans-serif; font-size: 1.7em; color: #fff; text-align: center; } #inner-cont-seo-2 ul { margin-left: 0; margin-right: 2em; padding-bottom: 2em; } #inner-cont-seo-2 ul li { list-style: none; display: inline; } #inner-cont-seo-2 ul li h4 { font-family: 'Julius Sans One', sans-serif; color: #e6e6e6; } #inner-cont-seo-2 ul li p { color: #e6e6e6; text-align: justify; } /* 3.2.3. WORDPRESS DEVELOPMENT PAGE STYLE ----------------------- Container Elements */ .cc-wp-dev { background: #d9d9f2; } .wp-dev_block_left { width: 35%; margin-left: 15%; padding-right: 10px; float: left; } .wp-dev_block_right { width: 35%; float: left; } .wp-dev_block_right img { margin-left: 20%; margin-top: 20px; width: 60%; position: relative; } #wp-dev_block_2 { width: 100%; margin-left: 0; color: #f2f2f2; background: #4d4d4d; font-family: 'Roboto', sans-serif; margin-top: -20px; } #wp-dev_block_2 h2, #wp-dev_block_2 p { margin-left: 15%; width: 70%; font-family: 'Roboto', sans-serif; } #wp-dev_block_2 h2 { padding-top: 50px; } #wp-dev_block_2 p { padding-bottom: 50px;text-align: justify; } /* 3.2.4. Mobile App Development Page Style ----------------------- */ /* 3.2.5. Database Development Page Style ------------------------ */ .cc-db { background: #ecffb3; } /* 3.2.6. Digital Marketing Page Style ------------------------------ */ .cc-market { background: #e6e6ff; } /* 3.2.7. Logo Design and Branding Page Style ---------------------- */ .cc-branding { background: #ffff99; } /* 3.2.8. Hosting and Domain Name Page Style ---------------------- */ .cc-hosting { background: #ddffcc; } /* 3.2.9. Maintenance and Support Page Style --------------------- */ .cc-support { background: #ffffe6; } /* 3.3. Our Process Page Style -------------------------------------- */ .bg_image { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: url(../images/our_process2.jpg); background-size: cover; background-repeat: none; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } .our-process-message { padding-top: 120px;} #text_container { width:80%;height:auto;position:relative;float:left;margin-left:10%;padding-bottom:0em;padding-top:8em; color: #4D4D4D;z-index: 800; } #text_container p { margin-left: 1em;margin-left: 10%;width: 80%; } /* Container Header */ #container_header { margin-top: -100px;font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;font-size: 1.3em; text-align: center;color: #fff; } #container_header h1 { font-family: 'Great Vibes', cursive; font-size: 50px; font-weight: normal; color: #fff; margin-bottom: -0.3em; } /* Bookmark bar: */ #bookmarks_bar { width:820px; height: auto; left:50%; position: absolute; margin-left:-410px; margin-top: 170px; z-index: 900; } #bookmarks_bar ul { margin-left: 0; position: relative; } #bookmarks_bar ul li { list-style: none; } #bookmarks_bar ul li a { display:block;position: relative;float: left;width: 89px; height: 4em;margin-left: 2px;margin-right: 2px; padding-top:15px;text-decoration: none; text-align:center; font-family: "Roboto", sans-serif; font-size: 13px; color: #4d4d4d; background: #ffffe6; box-shadow: 1px 1px 10px #000; border-radius: 3px; z-index: 800; cursor:pointer; transition: all 0.5s; } #bookmarks_bar ul li a:hover, #bookmarks_bar ul li a:focus { color: #ffffe6; background: #4d4d4d; padding-top:25px; transition: all 0.5s; } .step-nmbr { display: block; font-weight: bold; } .step-wrd { display: none; font-weight:bold; } /* Slide-show container */ .container_step_1, .container_step_2, .container_step_3, .container_step_4, .container_step_5, .container_step_6, .container_step_7, .container_step_8 { display: none;width: 80%;height: auto;min-height: 23em;position: relative;float: left;margin-left: 10%;margin-top: 140px; padding-bottom: 1em;border-radius: 3px;background: #fff; opacity: 1; } .container_step_1 h3, .container_step_2 h3, .container_step_3 h3, .container_step_4 h3, .container_step_5 h3, .container_step_6 h3, .container_step_7 h3, .container_step_8 h3 { position: relative;width: auto;margin-top: 10px;padding: 10px;text-align: center;color: #000; font-family: 'Roboto', sans-serif;font-size: 16px;font-weight: bold;z-index: 2; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */ background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } .container_step_1 ul, .container_step_2 ul, .container_step_3 ul, .container_step_4 ul, .container_step_5 ul, .container_step_6 ul, .container_step_7 ul, .container_step_8 ul { margin: 0; } .container_step_1 ul li, .container_step_2 ul li, .container_step_3 ul li, .container_step_4 ul li, .container_step_5 ul li, .container_step_6 ul li, .container_step_7 ul li, .container_step_8 ul li { list-style-type: none;display: block;width: 95%; } .container_step_1 h4, .container_step_2 h4, .container_step_3 h4, .container_step_4 h4, .container_step_5 h4, .container_step_6 h4, .container_step_7 h4, .container_step_8 h4 { text-align: center;font-family: "Roboto", sans-serif;margin-top: -20px; } .container_step_1 ul li h5, .container_step_2 ul li h5, .container_step_3 ul li h5, .container_step_4 ul li h5, .container_step_5 ul li h5, .container_step_6 ul li h5, .container_step_7 ul li h5, .container_step_8 ul li h5 { margin-left: 10%;margin-top: -5px;font-family: "Roboto", sans-serif;font-size: 0.95em;text-align: justify; } .container_step_1 ul li p, .container_step_2 ul li p, .container_step_3 ul li p, .container_step_4 ul li p, .container_step_5 ul li p, .container_step_6 ul li p, .container_step_7 ul li p, .container_step_8 ul li p { margin-top: -20px;font-family: "Roboto", sans-serif;font-size: 14px;text-align: justify; } .steps_img { position: relative;width: 60%;margin-left: 20%;margin-bottom: 2em;margin-top: -15px;z-index: 1; } /* 3.4. Portfolio Page Style ----------------------------------------- */ .portfolio-area {position:relative;width:1070px;left:50%;margin-left:-535px; height: auto; overflow:auto; background:#fff;clear:all;} .website {position:relative;width: 300px;float:left;border:1px solid #ccc;margin-left: 40px;margin-bottom:20px;margin-top:20px; box-shadow: 3px 3px 7px #ccc;transition: all 0.5s;} .website-screenshot {width:280px;border:10px solid #fff;transition: all o.5s;} .mask-over {transition: .5s ease;opacity: 0;position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); text-align: center;transition: all o.5s; } .website:hover {box-shadow: 3px 3px 20px #1a1a1a;transition: all 0.5s;} .website:hover .website-screenshot {opacity: 0.5;transition: all o.5s;} .website:hover .mask-over {opacity: 1;transition: all o.5s;} .text {display:block; padding: 16px 32px;background-color: rgba(0, 0, 0, 0.9);color: white;font-size: 14px;} .portfolio-area-for-home-page {background:#e6e6e6; height: auto;} /* 3.4.1. Portfolio Sub-Pages Common Style ----------------------------------------- */ .back-link-area {padding-top: 20px;padding-bottom:20px;background: #fff;} .back-link {margin-left:15%;color: #4d4d4d;display:block;padding:10px;width:170px;border:1px solid #4d4d4d;border-radius:5px;text-align:center;} .portfolio-area-website {width: 100%;} .desktop-screenshot-container {position:relative;background:#fff;padding-top:20px;padding-bottom:20px;} .desktop-screenshot {width: 76%;margin-left:12%; overflow:hidden;border:1px solid #ccc;box-shadow:3px 3px 10px #ccc;} .mobile-screenshot {width:250px;float:left;padding-left:30px;margin-right:50px;} .website-info {width: 100%;margin-left:0%;margin-top:-5px;padding-top:20px;padding-bottom:20px;overflow:auto;} .website-info h4, .website-info p {width: 70%;margin-left:15%;font-family:"Roboto", sans-serif;color:#4d4d4d;} .website-info ul {width:70%;margin-left:15%;} .website-info ul li {font-family:"Roboto", sans-serif;color:#4d4d4d;} .website-link-area {padding-top:20px;padding-bottom:50px;} .website-link-area h4 {text-align:center;color:#1a1a1a;font-weight:normal;} .website-link {display:block;position:relative;width:300px;padding:20px;left:50%;margin-left:-175px; text-align:center;font-size:20px;color:#f2f2f2;text-decoration:none;transition:all 0.5s;} /* 3.4.2. Portfolio Sub-Page "Website STACHS" Style ----------------------------------------- */ .website-info-stachs {background:#f2f2f2;} .website-link-area-stachs {background:#c6d9eb;} .website-link-stachs {background:#004d99;transition:all 0.5s;} .website-link-stachs:hover, .website-link-stachs:focus {background:#00264d; transition:all 0.5s;text-decoration:underline;} /* 3.4.3. Portfolio Sub-Page "Website LVA" Style ----------------------------------------- */ .website-info-lva {background:#f2f2f2;} .website-link-area-lva {background:#c6d9eb;} .desktop-screenshot-container-lva {width:100%;} /* 3.4.4. Portfolio Sub-Page "Website Digital MAPR" Style ----------------------------------------- */ /* 3.4.5. Portfolio Sub-Page "Website WHS 2U" Style ----------------------------------------- */ /* 3.4.6. Portfolio Sub-Page "Website CYKAT" Style ----------------------------------------- */ /* 3.4.7. Portfolio Sub-Page "Website David Lam Designs" Style ----------------------------------------- */ /* Old page styling */ .cc-support { background: #ffffe6; } #container2 { position: relative; height: auto; background: #ccccff; padding-top: 0.5em; padding-bottom: 1em; text-align: justify; margin-top: -1.5em; } #container4 { position: relative; height: auto; background: #ebccff; padding-top: 0.5em; padding-bottom: 1em; text-align: justify; margin-top: -1.5em; margin-bottom: 0; color: #4d4d4d; } .website-name { font-family: 'Roboto', sans-serif; color: #1a1a1a; font-size: 18px; } .website-image { position: relative; width: 100%; height: auto; } /* 3.5. Packages Page Style ---------------------------------------- */ .container-packages { width: 100%; height: 50em; position: relative; background: #f2f2f2; } .pack-1, .pack-2, .pack-3 {width: 30%;height: 43em;float: left;position: relative;border: 1px solid #ccc;} .pack-1, .pack-3 {background: #e6e6e6;} .pack-2 {background: #d9d9d9;} .pack-1 h3, .pack-2 h3, .pack-3 h3 {text-align: center; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;margin-top: 0;} .pack-1 h3, .pack-3 h3 { background: #fff; color: #4d4d4d; } .pack-2 h3 { background: #cc0066; color: #f2f2f2; } .price { text-align: center;font-size: 2em;font-weight: heavy;margin-top: -0.2em; } .price_detail { text-align: center; font-size: 0.8em; color: #8c8c8c; margin-top: -2em; } .description { text-align: center; color: #4d4d4d; padding-left: 10px; padding-right: 10px; } .pack_head { color: #1a1a1a; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; text-align: center; } .pack-1 ul li, .pack-2 ul li , .pack-3 ul li { list-style: none; color: #4d4d4d; } .pack-1 ul li:before, .pack-2 ul li:before, .pack-3 ul li:before { content: "•"; /* Insert content that looks like bullets */ padding-right: 8px; color: #cc0066; /* Or a color you prefer */ } .star_note { font-size: 0.8em; font-style: italic; color: #4d4d4d; padding-left: 1.5em; } /* Standard package: */ .pack-1 { margin-left: 5%; margin-top: 3em; } /* Pro package: */ .pack-2 { box-shadow: 0px 5px 20px #808080; margin-top: 2em; padding-bottom: 2em; z-index: 900; } .pro_text { text-align: center; color: #8c8c8c; margin-top: -0.5em; } /* Ultimate package */ .pack-3 { margin-top: 3em; z-index: 800; } /* Packages Animation */ @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } .pack-1, .pack-2, .pack-3 { opacity:0; /* make things invisible upon start */ -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:0.5s; -moz-animation-duration:0.5s; animation-duration:0.5s; } .pack-1 { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; } .pack-2 { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s; } .pack-3 { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; } .enquire { margin-left: 20px; } .pack-1 a, .pack-2 a, .pack-3 a { color: #000; } .pack-1 a:hover, .pack-2 a:hover, .pack-3 a:hover, .pack-1 a:focus, .pack-2 a:focus, .pack-3 a:focus { color: #ff3300; } /* Area below packages */ .space2 { width: 100%; height: 5em; position: relative; padding-top: 4em; } #button_link-packages a{ display: block;position: relative;left:50%; height: 7em;width: 300px;margin-left: -150px;padding-top: 1em; text-align: center;text-decoration: none;color: #fff; border: 1px solid rgba(0,0,0,0.65); background: rgba(0 ,0, 0, 0.4); -webkit-transition: background 0.3s; /* For Safari 3.1 to 6.0 */ transition: all 0.3s; } #button_link-packages a:hover, #button_link-packages a:focus { background: #cc0066; border: 1px solid #cc0066; transition: all 0.3s; } /* Contact Form Area */ .contact-form-packages-page {background:#fff;padding-bottom: 20px;} .two-cols {position:relative;overflow:auto;margin-top:-20px;} .packages-form {position:relative;left:50%;margin-left: -30%;width: 60%;padding-top: 10px;overflow:auto;} .packages-form h3 { font-family: 'Julius Sans One', sans-serif; } .packages-form .left_col {position: relative;width: 49%;float: left;padding-top: 1em;} .packages-form .right_col {position: relative;width: 49%;float: right;padding-top: 1em;} .packages-form .row {margin-bottom:20px;} .packages-form .row .detail { width: 95%;height: 2.2em;margin-left: 30px;border: 1px solid #ccc;border-radius: 3px;padding: 2px;background: #f2f2f2;} .packages-form .row .detail:focus{background: #ffffff;} .packages-form .row .clientComment { width: 85%;max-width: 85%;height: 130px;min-height: 130px; margin-left: 30px;margin-top:0;border: 1px solid #ccc;border-radius: 3px; padding: 0.5em;padding-left: 0.5em;font-size: 1em;font-family: sans-serif; background: #f2f2f2;resize:none;overflow:auto;} .packages-form .row .clientComment:focus {background: #ffffff;} .message-area {padding-left: 0.5em;font-size: 1em;} .submit-packages-form { /* positioning of the button within the form */ margin-top: 10px; margin-left: 30px;} #submit-packages-page { width: 12em;height: 3em;margin-left: 0px;float: left;cursor: pointer;color: #fff; font-family: sans-serif;background: #808080;border: #808080;border-radius:2px;transition:all 0.5s; } #submit-packages-page:hover {background: #4d4d4d;transition:all 0.5s;} .errorMsg, .errorMsg-comment {position:relative;color:red;margin-left:30px;font-size:12px;clear:all;} .errorMsg-comment {margin-top: 130px;} /* 3.6. About Page Style ------------------------------------------- */ .container-common-about {background:#1a1a1a;} /* NOT USED CURRENTLY #about_container { width: 100%; height: 27em; position: relative; margin-top: 1.9em; background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 99%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); } */ .about-h2 {color: #f2f2f2; font-family: 'Roboto', sans-serif;} .about_left {width: 35%; height: 27em; margin-left: 15%;float: left; position: relative; color: #e6e6e6; } .about_left img { width: 100%; } .about_left p { margin-left: 5%; margin-right: 1em; text-align: justify; color: #e6e6e6; } .about_right { width: 35%; height: 27em; float: left; position: relative; } .about_right h2 { margin-left: 5%; font-family: "Roboto", sans-serif; color: #f2f2f2; } .about_right p { margin-left: 5%; margin-right: 1em; text-align: justify; color: #e6e6e6; } .about_right ul li { font-family: helvetica; color: #e6e6e6; } /* Director Image */ .ekat_photo_div { width: 150px; height: auto; margin-left: 0px; float: left; padding-right: 20px; } .ekat_photo {border:1px solid #1a1a1a; border-radius:50%;} .ekat-title-one { font-family: "Roboto", sans-serif; font-size: 20px; padding-top: 15px; } .ekat-title-two { font-style: italic; margin-top: -10px; } /* Animation of left and right containers */ .about_left { left: 0; /* left: -150%; -webkit-animation: slide 0.7s forwards; -webkit-animation-delay: 0.2s; animation: slide 0.7s forwards; animation-delay: 0.2s; */ } /* @-webkit-keyframes slide { 100% { left: 0; } } @keyframes slide { 100% { left: 0; } } */ .about_right { right: 0; /* right: -150%; -webkit-animation: slide2 0.7s forwards; -webkit-animation-delay: 0.2s; animation: slide2 0.7s forwards; animation-delay: 0.2s; */ } /* @-webkit-keyframes slide2 { 100% { right: 0; } } @keyframes slide2 { 100% { right: 0; } } */ /* 2.3 How we work Information Container */ .our_process_cont { position: relative; width: 100%; padding-top: 0.5em; padding-bottom: 0.5em; margin-top: -0.5em; } .button_link_line { width: 70%; font-family: 'David Libre', serif; font-size: 1em; padding-top: 5px; padding-bottom: 5px; text-align: center; border-radius: 5px; margin-bottom: -20px; } #button_link-about { width: 30%; margin-left: 35%; margin-top: 65px; } #button_link-about a { text-align: center; font-family: "Roboto", sans-serif; text-decoration: none; } #button_link-about h3 { color: #fff; width: 100%; height: 100%; font-weight: normal; padding-top: 0.6em; padding-bottom: 0.5em; font-size: 1.4em; border: 1px solid #fff; border-radius: 3px; -webkit-transition: background 0.3s; /* For Safari 3.1 to 6.0 */ transition: background 0.3s; } #button_link-about h3:hover, #button_link-about h3:focus { background: #8600b3; border: 1px solid #8600b3; } .our_process_cont p { color: #fff; text-align: center; margin-left: 15%; margin-right: 15%; font-size: 1em; font-family: "Roboto", sans-serif; color: #f2f2f2; } .testim_cont { width: 100%; height: auto; position: relative; border-top: 1px solid #000; font-family: "Roboto", sans-serif; text-align: center; font-weight: normal; margin-bottom: 1em; } .inner_cont2 { width: 70%; height: auto; margin-left: 15%; } .inner_cont2 h3 { color: #fff; font-size: 1.5em; } .inner_cont2 p { color: #fff; font-size: 1.1em; border-bottom: 1px solid #fff; padding-bottom: 1em; } #contact_us { width: 100%; height: 13em; position: relative; background: #e6e6e6; } .inner_contact_cont { width: 70%; height: 12em; /* fix later */ margin-left: 15%; } /* ------- BLOCKS Styling ------- */ .block-1, .block-2, .block-3 { width: 30%;margin-left: 2%;position: relative;float: left;} /* BLOCK-1 Styling */ .call_word { font-weight: normal; color: #660033; margin-left: 1em; } .call_numb { margin-top: -15px;margin-left: 2em;margin-right: 2em;padding-bottom: 1em; font-family: 'David Libre', serif; font-weight: normal; font-size: 1.2em; border-bottom: 1px solid #000; } .email_send { font-weight: normal; color: #660033; margin-top: 0px; margin-left: 1em; } .email_addr {font-weight: normal;margin-top: -15px;font-size: 15px;margin-left: 2em;} /* BLOCK-2 Styling */ .note { text-align: center; font-weight: normal; color: #660033; } .block-2_line { font-family: 'David Libre', serif; font-size: 1em; padding-top: 5px; padding-bottom: 5px; text-align: center; background: #ccc; border-radius: 5px; } #button_link2 { width: 90%; margin-left: 5%; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e570e7+0,c85ec7+47,a849a3+100;Pink+3D+%233 */ background: rgb(229,112,231); /* Old browsers */ background: -moz-linear-gradient(top, rgba(229,112,231,1) 0%, rgba(200,94,199,1) 47%, rgba(168,73,163,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); /* IE6-9 */ } #button_link2 a { text-decoration: none; } #button_link2 h3 { text-align: center; color: #fff; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; width: 100%; height: 100%; padding-top: 0.3em; padding-bottom: 0.3em; font-size: 1em; font-weight: normal; border-radius: 3px; cursor: pointer; -webkit-transition: background 0.3s; /* For Safari 3.1 to 6.0 */ transition: background 0.3s; } #button_link2 h3:hover, #button_link2 h3:focus { background: #8600b3; } /* BLOCK-3 Styling */ .WE { font-weight: normal; color: #660033; margin-left: 1em; } .WE-logo { width: 200px; height: auto; margin-left: 1em; margin-top: 20px;} .punch_line { font-family: 'Great Vibes', cursive; font-size: 1.7em; font-style: italic; margin-left: 1em; } .punch_line2 { font-family: 'Great Vibes', cursive;font-size: 1.7em;margin-left: 3em;margin-top: -0.5em;} /* 3.7. Our Team Page Style ---------------------------------------- */ /* 3.8. Contact Page Style ------------------------------------------ */ /* Map and Contact Details Container */ #map_container { position: relative;background: #ccc;padding-top: 2em; padding-bottom: 2em;width: 100%; height: auto; /* change later */ } #inner_box { margin-left: 20%; width: 60%; height: auto; overflow: auto; /* change height later */ } #left_map{ width: 65%; height: 20em;float: left; } #map { width: 100%; height: 20em; position: relative; } #right_address { width: 30%; height: 20em; float: left; } #right_address h3 { margin-left: 20px; font-family: "Roboto", sans-serif; font-weight: normal; } #right_address p { margin-left: 20px; font-family: "Roboto", sans-serif; color: #4d4d4d; font-size: 14px; } /* Partners Info Container */ #partners-area { position: relative; background: #f2f2f2;padding-top: 20px; padding-bottom: 20px;width: 100%; height: auto; /* change later */ } #partners-area h4 { text-align: center; font-family: "Roboto", sans-serif; } #partners-area ul { position: relative; width: 620px; height: auto; left: 50%; margin-left: -330px; } #partners-area ul li { display: inline-block;padding-left: 20px;padding-right: 20px;list-style: none; } #partners-area ul li a { display:block;text-decoration:none;color:#000;opacity:1;transition:all 0.3s;border-bottom:5px solid #f2f2f2;} #partners-area ul li a:hover, #partners-area ul li a:focus {border-bottom: 5px solid #000;opacity: 0.6;transition: all 0.3s;} #partners-area h5 {text-align: center;} .we_logo {position: relative;width: 300px;left: 50%;margin-left: -150px;} .partners_logo {width: 100px;height: auto;} /* Contact Form */ #form_container { width: 100%;height: auto;position: relative;padding-top: 2em;padding-bottom: 2em;background: #f2f2f2;} .contact-page-form { width: 58%;height: auto;margin-left: 20%;padding: 1%; border-radius: 5px;background: #fff; box-shadow: 0px 5px 20px #808080;color: #4d4d4d; } form h3 { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;font-weight: normal; margin-top: 0;margin-left: 0;padding-top: 1em;padding-bottom: 1em;text-align: center;color: #4d4d4d; } #form_fields { width: 100%;height: auto;padding-bottom: 2em;background: #e6e6e6;border-radius: 5px;overflow:hidden;} .field-question-and-input { position: relative; overflow: hidden; } .field_name {margin-left: 5%;padding-bottom: 5px;padding-top: 10px;color: #4d4d4d; overflow:auto; } .row { width:94%;height: 2em;margin-left: 0%;margin-bottom: 10px; } .input { width: 100%;height: 2em;color: #4d4d4d;} .detail {width: 99%;height: 2em;padding-left: 1%;border: 1px solid #fff;border-radius: 3px;font-size: 14px;} .field_name_bold {margin-left: 5%;padding-top: 1.5em;padding-bottom: 1em;font-weight: bold;font-size: 1.2em;color: #000;} .check_box {margin-left: 5%;margin-bottom: 5px;margin-top: 8px;} .last_box {margin-bottom: 3em;} select {width: 50%;height: 2em;margin-left: 5%;margin-bottom: 1em;border: 1px solid #fff;border-radius: 3px;font-size:1em;} option {padding-bottom: 2px;font-size: 1em;color:#4d4d4d;} textarea {width: 90%;height: 12em;margin-top: 5px;} .mess { width: 99%;height: 12em;max-width: 99%;max-height: 12em;padding-left: 1%;padding-top: 5px; border: 1px solid #000;border-radius: 3px;font-size: 14px;font-family: sans-serif; } .submit { /* positioning of the button within the form */ margin-top: 180px;margin-left: 5%; } #submit { /* styling of the button */ width: 8em;height: 3em;cursor: pointer; } .error { color: #FF0000;padding-left: 50px;font-size: 14px;} #success_msg { width: 58%;height: auto;margin-left: 20%;padding: 1%; border-radius: 5px; background: #fff;box-shadow: 0px 5px 20px #808080; color: #4d4d4d;} /* 3.10. Privacy Policy Page Style ----------------------------------- */ /* 3.11. Copyright Policy Page Style --------------------------------- */ /* 3.12. Site Map Page Style ---------------------------------------- */ /* 3.12. Blog Page Style ---------------------------------------- */ .blogs-area {padding-top: 0px;padding-bottom:0px;width:70%;position:relative;margin-left:15%;} .blog-post {background:#fff;padding: 10px;} .blog-body ol li {list-style:none;} .blog-img-060418 {width: 800px;position:relative;left:50%;margin-left:-400px;} .number {font-weight:bold;font-size:18px;} .blog-h4-060418 {color:green;} .blog-author {font-size: 14px;color:#4d4d4d;border-top:1px solid #ccc;padding-top:20px;} .blog-date {font-size: 14px;} .source {font-size: 12px; color: #4d4d4d;padding-top: 10px;} /* --------------------------------------------------------------- ---------------------- 4. PRIVATE AREA ----------------------- --------------------------------------------------------------- 4.1. Login Page Style ------------------------------------------ */ .bg_image-login { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: url(../images/New-images/vectorbeast-90-unsplash.jpg); background-size: cover; background-repeat: none; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 15s linear; -moz-animation: imageAnimation 15s linear; -o-animation: imageAnimation 15s linear; -ms-animation: imageAnimation 15s linear; animation: imageAnimation 15s linear; } .login-footnote {position:relative;z-index:999;color:#fff;text-align:center;font-size:12px;padding-top:20px;} .login-footnote-dark {position:relative;z-index:999;color:#4d4d4d;text-align:center;font-size:12px;padding-top:20px;} .login-form { position:relative;left:50%;margin-left:-150px;margin-top:70px;width: 300px;height: auto;} .we-logo-login {width: 300px;} .container-login {width: 89%;margin-left:5%;overflow: hidden;padding-bottom:20px;} .login-button {position:relative;float:right;width: 8em;height: 3em;cursor: pointer;background:#4d4d4d; border:1px solid #4d4d4d;border-radius: 3px; color:#f2f2f2;transition:all 0.5s;} .login-button:hover, .login-button:focus {background:#f2f2f2;color:#4d4d4d;transition:all 0.5s;} /* Note: Form elements are styled in the section 3.8 (Contact Page Style) */ /* 4.2. Admin Page Style ------------------------------------------ */ .admin-hello {text-align:center;font-family:'Roboto', sans-serif;color: #4d4d4d;} .admin-menu {border:1px solid #ccc;width:460px;position:relative;left:50%;margin-left:-230px; border-radius:5px;background:#fff;box-shadow:2px 2px 10px #4d4d4d;} .admin-menu ul li {list-style:none;display:inline-block;} .admin-menu ul li a {display:block;border: 1px solid #ccc;border-radius:3px;padding: 5px; width:60px;text-align:center; font-size:12px;text-decoration:none;background:#4da6ff;color:#fff;transition:all 0.5s;} .admin-menu ul li a:hover, .admin-menu ul li a:focus {background:#00264d;transition:all 0.5s;} /* 4.3. Posts Page Style ------------------------------------------ */ .table-container {position:relative;width:80%;left:50%;margin-left:-40%;border: 1px solid #ccc;background:#fff;padding:10px;} table { font-family: arial, sans-serif;border-collapse: collapse;width: 100%;} td, th { border: 1px solid #dddddd;text-align: left;padding: 8px;} tr:nth-child(even) { background-color: #dddddd; } /* 4.4. New Post Page Style ------------------------------------------ */ .field_name-new-post {} .input-new-post {width: 300px;margin-left: 30px;} .input-new-post-textarea {margin-left: 30px;} .post-button {margin-left:30px;} /* --------------------------------------------------------------- ---------------------- 5. MEDIA QUERIES ---------------------- --------------------------------------------------------------- */ @media only screen and (min-width: 2040px) { /* Home page Media*/ #container_inner { margin-left: 12%; } } @media only screen and (min-width: 1800px) and (max-width: 2039px) { /* Home page Media*/ .block1, .block2, .block3, .block4, .block5, .block6 { width: 34.5%; margin-left: 40px; } #container_inner { margin-left: 11%; } } @media only screen and (min-width: 1600px) and (max-width: 1799px) { /* Home page Media*/ .block1, .block2, .block3, .block4, .block5, .block6 { width: 33%; margin-left: 50px; } } @media only screen and (min-width: 1440px) and (max-width: 1599px) { /* Home page Media*/ .block1, .block2, .block3, .block4, .block5, .block6 { width: 33%; margin-left: 40px; } } @media only screen and (min-width: 1025px) and (max-width: 1439px) { /* Home page Media*/ .block1, .block2, .block3, .block4, .block5, .block6 { width: 33%; margin-left: 35px;} } @media only screen and (max-width: 1290px) { /* Home page Media*/ .block1, .block2, .block3, .block4, .block5, .block6 { height: 300px; } } @media only screen and (max-width: 1160px) { /* Home page Media*/ .block1, .block2, .block3, .block4, .block5, .block6 { height: 310px; } } @media only screen and (max-width: 1130px) { /* Home page Media*/ .block1, .block2, .block3, .block4, .block5, .block6 { height: 320px; } } @media only screen and (max-width: 1125px) { /* About page Media */ .about_left, .about_right {height: auto;padding-bottom:20px; } } @media only screen and (max-width: 1100px) { /* Home page Media*/ .block1, .block2, .block3, .block4, .block5, .block6 { height: 300px; font-size:14px; } /* Portfolio page Media */ .portfolio-area {position:relative;width:730px;left:50%;margin-left:-365px;} } @media only screen and (max-width: 1024px) { /* Common Media */ /* section.module.parallax-1, section.module.parallax-seo-1 {margin-top:-30px;} */ /* Home page Media*/ .button1 a { font-size: 15px; } #container_inner { width: 90%; margin-left: 5%;} .block1, .block2, .block3, .block4, .block5, .block6 { width: 30%; } .button2 { width: 80%; margin-left: 10%;} /* Services page Media */ .cube1, .cube2, .cube3, .cube4, .cube5, .cube6 {height: 220px;} .flippety1, .flop1, .flippety2, .flop2, .flippety3, .flop3, .flippety4, .flop4, .flippety5, .flop5, .flippety6, .flop6 {height: 220px;} .flop1 img, .flop2 img, .flop3 img, .flop4 img, .flop5 img, .flop6 img {width: 100%;height: 220px;} #container {width: 98%;height: auto;margin-left: 1%;} #container h1 {padding-top: 10px;} .flippety1 h3, .flippety2 h3, .flippety3 h3, .flippety4 h3, .flippety5 h3, .flippety6 h3 {padding-bottom: 10px;} /* WordPress Development page Media */ /* section.module.parallax-wp-dev-1 { height: 290px; margin-top: -70px; } */ /* Our Process page Media */ #bookmarks_bar { margin-left:-410px; } /* About page Media */ .inner_contact_cont { width: 100%; height: auto; margin-left: 0%; } .block-1, .block-2, .block-3 { width: 30%;margin-left: 0;} .block-1 {margin-left: 5%;} .block-3 {padding-left: 30px;} /* Contact page Media */ form { width: 80%; margin-left: 10%; } } @media only screen and (max-width: 980px) { /* Home page Media*/ #container_inner { width: 100%; margin-left: 0; } } @media only screen and (max-width: 945px) { /* Services page Media */ .cube1, .cube2, .cube3, .cube4, .cube5, .cube6 {height: 200px;} .flippety1, .flop1, .flippety2, .flop2, .flippety3, .flop3, .flippety4, .flop4, .flippety5, .flop5, .flippety6, .flop6 {height: 200px;} .flop1 img, .flop2 img, .flop3 img, .flop4 img, .flop5 img, .flop6 img {width: 100%;height: 200px;} .flippety1 h3, .flippety2 h3, .flippety3 h3, .flippety4 h3, .flippety5 h3, .flippety6 h3 {padding-bottom: 0px;margin-bottom: -5px;} } @media only screen and (max-width: 890px) { /* Packages page Media */ .pack-1 ul, .pack-2 ul, .pack-3 ul {margin-left: 0;padding-left: 20px;} .pack-1 ul li, .pack-2 ul li , .pack-3 ul li {font-size: 14px;} .pack-1, .pack-2, .pack-3 {width: 32%;height: 40em;} .pack-1 {margin-left: 1.5%;} .packages-form {margin-left: -40%;width: 80%;} .packages-form .row .detail {margin-left: 10px;} .submit-packages-form {margin-left: 10px;} .message-area {margin-left: 10px;} } @media only screen and (max-width: 880px) { /* Home page Media*/ .block1, .block2, .block3, .block4, .block5, .block6 { margin-left: 28px; } /* About page Media */ #button_link-about {width: 300px;position:relative;left:50%;margin-left: -150px;} } @media only screen and (max-width: 850px) { /* About page Media */ .about_left {width: 90%;margin-left: 4%;padding-bottom:0;} .about_right {width: 90%;margin-left: 4%;} .ekat_photo_div {margin-left: 50px;} .about_right ul li {margin-left: 50px;} } @media only screen and (max-width: 830px) { /* Services page Media */ .cube1, .cube2, .cube3, .cube4, .cube5, .cube6 {height: 200px;} .flippety1, .flop1, .flippety2, .flop2, .flippety3, .flop3, .flippety4, .flop4, .flippety5, .flop5, .flippety6, .flop6 {height: 200px;} .flop1 img, .flop2 img, .flop3 img, .flop4 img, .flop5 img, .flop6 img {width: 100%;height: 200px;} .flippety1 h3, .flippety2 h3, .flippety3 h3, .flippety4 h3, .flippety5 h3, .flippety6 h3 {font-size: 16px;} .flippety1 p, .flippety2 p, .flippety3 p, .flippety4 p, .flippety5 p, .flippety6 p { font-size: 15px; } #container { width: 100%; margin-left: 0; } } @media only screen and (max-width: 820px) { /* Home page Media*/ #main { height: 16em; } #message { font-size: 40px; } .block1, .block2, .block3, .block4, .block5, .block6 { margin-left: 25px; } /* Our Process page Media */ #bookmarks_bar { width:800px; margin-left:-410px; } /* About page Media */ .inner_contact_cont { width: 100%; height: auto; margin-left: 0%; padding-top:10px; } .block-1, .block-3 {display: none; } .block-2 { width: 100%;margin-left: 0;} #button_link2 {width: 200px;position: relative; left:50%;margin-left: -100px;} /* Blog page Media */ .blogs-area {position:relative;width: 80%;margin-left:10%;} .blog-img-060418 {width: 400px;position:relative;left:50%;margin-left:-200px;} } @media only screen and (max-width: 768px) { /* Home page Media*/ #main { height: 12em; } #message { margin-top: -50px; } .block1 h3, .block2 h3, .block3 h3, .block4 h3, .block5 h3, .block6 h3 { font-size: 14px; } .block1, .block2, .block3, .block4, .block5, .block6 { max-width: 32%; margin-left: 17px; font-size: 13px; } #transp_break { height: 7em; } .button2 a { font-size: 30px; } #info { font-size: 13px; } .button3 a { font-size: 15px; } /* Services page Media */ .cube1, .cube2, .cube3, .cube4, .cube5, .cube6 {width: 45%;} .cube1, .cube2 {margin-top: 1.5em;} .cube3, .cube4, .cube5, .cube6 {margin-top: 0;} .cube1, .cube3, .cube5 {margin-left: 5%;} .cube2, .cube4, .cube6 {margin-left: 0;} .cube3, .cube4 {margin-bottom: 0;} .cube5, .cube6{margin-bottom: 4em;} .flippety1 h3, .flippety2 h3, .flippety3 h3,.flippety4 h3, .flippety5 h3, .flippety6 h3 {font-size: 18px;padding-top: 5px;} .flippety1 p, .flippety2 p, .flippety3 p, .flippety4 p, .flippety5 p, .flippety6 p { font-size: 16px; } /* SEO page Media */ .cont-seo-1-left, .cont-seo-1-right {width: 45%;} .cont-seo-1-left {margin-left: 5%;} .cont-seo-1-left h2, .cont-seo-1-right h2, #inner-cont-2 h2 {font-size: 22px;} .cont-seo-1-left p, .cont-seo-1-right p, #inner-cont-2 ul li p {font-size: 13px;} #inner-cont-seo-2 {width: 90%;margin-left: 5%;} /* Contact page Media */ #right_address h3 { font-size: 18px; } #right_address p { font-size: 13px; } /* Our Process page Media */ #bookmarks_bar { width:100%; margin-left:5px; left:0; } #bookmarks_bar ul li a { width: 11%; } /* Portfolio page Media */ .portfolio-area {position:relative;width:390px;left:50%;margin-left:-195px;} /* Packages page Media */ .container-packages {padding-bottom:30px;height: auto;} .description {font-size: 14px;} .pro_text, .enquire {font-size: 15px;} } @media only screen and (max-width: 700px) { /* Packages page Media */ .packages-form {margin-left: -45%;width: 90%;} /* Contact page Media */ #map_container {cheight: 15em;} #inner_box {height: 15em;} #left_map{ width: 55%;height: 15em;} #map {height: 15em;} #right_address {width: 40%;height: 15em;} #right_address h3 {font-size: 16px;} #right_address p { font-size: 11px; } #partners-area ul { width: 80%;left: 0;margin-left: 7%;} #partners-area ul li {padding-left: 20px;padding-right: 20px;} .partners_logo { width: 70px;height: auto;} } @media only screen and (max-width: 680px) { /* Home page Media*/ #main { height: 10em;} #container_inner {width: 90%;margin-left: 5%;} .block1, .block2, .block3, .block4, .block5, .block6 { width: 45%; max-width: 50%; min-height: 200px; margin-bottom: 0px; padding-bottom: 10px; } } @media only screen and (max-width: 660px) { /* GENERAL MEDIA */ nav { display: none;} header {margin-left: 0;margin-right: 0;padding-bottom: 0;} header.smaller { height: 70px; } /* Common elements Media */ section.module.parallax-1 { margin-top: -30px; } section.module.parallax-services-1 { margin-top: -30px; } section.module.parallax-seo-1 { margin-top: -30px; } section.module.parallax-wp-dev-1 { margin-top: -30px; } section.module.parallax-db-dev-1 { margin-top: -30px; } section.module.parallax-market-dev-1 { margin-top: -30px; } section.module.parallax-branding-dev-1 { margin-top: -30px; } section.module.parallax-hosting-dev-1 { margin-top: -30px; } section.module.parallax-support-dev-1 { margin-top: -30px; } section.module.parallax-portfolio-1 { margin-top: -30px; } section.module.parallax-packages-1 { margin-top: -30px; } section.module.parallax-about-1 { margin-top: -30px; } section.module.parallax-team-1 { margin-top: -30px; } section.module.parallax-contact-1 { margin-top: -30px; } section.module.parallax-blog-1 { margin-top: -30px; } /* Trigger Style */ #trigger {display: block;position: fixed;top: 10px;left: 17px;font-size: 30px;color: #000;z-index: 999;cursor:pointer;} #trigger:hover, #trigger:focus {color: #0066ff;} /* Navigation menu Style */ #mobile-menu { position: fixed; top: 0; left: 0; width: 100%; margin-left:0; margin-right: 0; height: auto; background: #fff; z-index: 900; } #mobile-menu ul { width: 87%; } #mobile-menu ul li { list-style: none;text-align: center;padding: 5px; } #mobile-menu ul li a { text-align: center;text-decoration: none;color: #4d4d4d; } #mobile-menu ul li a:hover, #mobile-menu ul li a:focus { color: #0066ff;text-decoration: underline; } /* Web Design page Media */ .inner_container-web-design-4 { width:90%;margin-left:5%;} /* WordPress page Media */ .wp-dev_block_left { width: 80%; margin-left: 10%; padding-right: 0px; float: left; } .wp-dev_block_right { width: 80%; margin-left: 10%; padding-bottom: 20px; float: left; } .wp-dev_block_right img { margin-left: 20%; margin-top: 20px; width: 60%; position: relative; } /* Our Process page Media */ .our-process-message { padding-top: 80px;} #bookmarks_bar { margin-top:140px; } .container_step_1, .container_step_2, .container_step_3, .container_step_4, .container_step_5, .container_step_6, .container_step_7, .container_step_8 { margin-top: 105px; } /* Packages page Media */ .description {font-size: 13px;} .pro_text, .enquire {font-size: 13px;} .pack-1 ul, .pack-2 ul, .pack-3 ul {margin-left: 0;padding-left: 10px;} .pack-1 ul li, .pack-2 ul li , .pack-3 ul li {font-size: 12px;} .pack_head {font-size: 13px;} /* Contact page Media */ form { width: 90%; margin-left: 5%; } #comment {width: 85%;} .mess {width: 85%;max-width: 85%;height: 12em;padding-left: 1%;} #map_container {height: auto;padding-bottom:30px;} #inner_box {height: auto;overflow: hidden;padding-bottom:0;} } @media only screen and (max-width: 640px) { /* Contact page Media */ #partners-area ul {width: 80%;left: 0;margin-left: 10%;} #partners-area ul li {padding-left: 10px;padding-right: 10px;} } @media only screen and (max-width: 620px) { /* Our Process page Media */ #bookmarks_bar { margin-left:-1%; } #bookmarks_bar ul li a { height: 2em; } .step-desc {display:none;} .container_step_1, .container_step_2, .container_step_3, .container_step_4, .container_step_5, .container_step_6, .container_step_7, .container_step_8 { margin-top: 125px; } #text_container { padding-top:5em; } .ul_steps li { margin-left: -15px; } .container_step_1, .container_step_2, .container_step_3, .container_step_4, .container_step_5, .container_step_6, .container_step_7, .container_step_8 { width: 100%;margin-left: 0%; } } @media only screen and (max-width: 615px) { /* SEO page Media*/ .cont-seo-1-left, .cont-seo-1-right {width: 90%;margin-left: 5%;} } @media only screen and (max-width: 600px) { /* Packages page Media */ .packages-form .left_col {width: 90%;margin-left:5%;float: none;padding-top: 0px;} .packages-form .right_col {width: 90%;margin-left:5%;float: none;padding-top: 1em;} .packages-form .row .detail {width: 100%;margin-left:0px;} .message-area {width: 100%;margin-left:0px;padding-left: 0em;font-size: 1em;border:1px solid red;} .packages-form .row .message-area {width: 98.5%;max-width: 98.5%;height: 130px;margin-left: 0;margin-top:0;} .submit-packages-form {margin-top: 150px; margin-left: 20px;} /* Contact page Media*/ #inner_box {width: 90%;margin-left: 5%;} #partners-area ul {width: 80%;left: 0;margin-left: 8%;} /* Blog page Media */ .blogs-area {position:relative;width: 90%;margin-left:5%;} .blog-img-060418 {width: 400px;position:relative;left:50%;margin-left:-200px;} .blog-body ol {margin-right: 30px;} .blog-body ol li {font-size: 14px;} } @media only screen and (max-width: 570px) { /* Services page Media */ #container {width: 90%;margin-left: 5%;} .header_underline {font-size: 18px;} .cube1, .cube2, .cube3, .cube4, .cube5, .cube6 {width: 60%;margin-left: 20%;} .cube1 {margin-bottom: 2px;} .cube2, .cube3, .cube4, .cube5, .cube6 {margin-bottom: 20px;} /* Packages page Media */ .pack-1, .pack-2, .pack-3 {width: 90%;margin-left: 5%;padding-bottom: 15px;height: auto;float: none;position: relative;} .pack-1 {margin-top: 20px;} .pack-2 {padding-bottom: 10px;} .pack-3 {margin-top: 30px;} .pack-1 ul, .pack-2 ul, .pack-3 ul {margin-left: 10%;padding-left: 10px;} .enquire {padding-bottom: 20px;} /* Contact page Media*/ #partners-area ul {margin-left: 6%;} } @media only screen and (max-width: 550px) { /* Home page Media*/ #main {height: 9em;} #message {font-size: 30px;margin-top: -50px;} .button1 a {font-size: 12px;} .block1, .block2, .block3, .block4, .block5, .block6 { width: 90%; max-width: 90%; height: auto; min-height: auto; margin-bottom: 0px; padding-bottom: 10px; } #transp_break {height: 5.5em;} .button2 a {font-size: 25px;} .button3 a {font-size: 12px;} .contact_form {margin-top: 30px;} .contact_form h3 {font-size: 15px;} .contact_form p {font-size: 13px;} .contact_form .quote {font-size: 13px;} /* Services page Media */ #container h1 {font-size: 35px;margin-top: -20px;padding-bottom: 10px;} .cube1, .cube2, .cube3, .cube4, .cube5, .cube6 {width: 70%;margin-left: 15%;} /* Contact page Media*/ #partners-area ul {margin-left: 5%;} } @media only screen and (max-width: 520px) { /* Contact page Media*/ #partners-area ul {margin-left: 4%;} } @media only screen and (max-width: 500px) { /* General Media */ #mobile-menu ul { width: 80%; } /* Common elements Media */ .message {margin-top: 170px;padding-top: 85px;font-size: 36px;} .message h1{ font-size: 36px; } /* About page Media */ .ekat_photo_div {width: 100px;margin-left: 20px;} /* Contact page Media*/ #map_container {height:auto;padding-bottom:0;} #inner_box {height: auto;overflow: hidden;} #left_map{display: none;} #right_address {width: 90%;margin-left: 5%;} #partners-area h4 {padding-left:10px;padding-right:10px;} #partners-area ul li { display: inline-block;padding-left: 20px;padding-right: 20px;list-style: none;} .partners_logo {width: 70px;height: auto;} } @media only screen and (max-width: 460px) { /* Our Process page Media */ #bookmarks_bar { margin-left:-3%; } #bookmarks_bar ul li a { height: 2em; } .step-desc {display:none;} .container_step_1, .container_step_2, .container_step_3, .container_step_4, .container_step_5, .container_step_6, .container_step_7, .container_step_8 { margin-top: 125px; } #text_container { padding-top:5em; } .ul_steps li { margin-left: -15px; } .container_step_1, .container_step_2, .container_step_3, .container_step_4, .container_step_5, .container_step_6, .container_step_7, .container_step_8 { width: 100%;margin-left: 0%; } .step-nmbr { display: none; } .step-wrd { display: block; } /* Contact page Media*/ .we_logo {position: relative;width: 200px;left: 50%;margin-left: -100px;} #partners-area ul {padding-left:30px;width: 250px;position:relative;left:50%;margin-left:-140px;} #partners-area ul li {padding-left:0px;padding-right:10px;} .partners_logo {width: 100px;height: auto;} /* Blog page Media */ .blog-body {width: 115%;} .blog-body ol { margin-left: -30px; padding-right: 30px;} .blog-img-060418 {width: 380px;position:relative;left:50%;margin-left:-190px;} } @media only screen and (max-width: 425px) { /* Blog page Media */ .blog-img-060418 {width: 360px;position:relative;left:50%;margin-left:-180px;} } @media only screen and (max-width: 425px) { /* Services page Media */ .cube1, .cube2, .cube3, .cube4, .cube5, .cube6 {width: 80%;margin-left: 10%;} } @media only screen and (max-width: 400px) { /* Common elements Media */ .message {margin-top: 170px;padding-top: 70px;font-size: 34px;} .message h1{ font-size: 34px; } /* Portfolio page and Portfolio Home page section Media */ #info_text {padding-left: 0; padding-right: 0;} .portfolio-area {position:relative;width:100%;left:0;margin-left:0;} .website {width: 270px; float:none; left:50%; margin-left: -135px;} .website-screenshot {width:250px;} /* Blog page Media */ .blog-img-060418 {width: 340px;position:relative;left:50%;margin-left:-170px;} } @media only screen and (max-width: 380px) { /* Blog page Media */ .blog-img-060418 {width: 320px;position:relative;left:50%;margin-left:-160px;} .blog-body ol { padding-right: 25px;} } @media only screen and (max-width: 375px) { /* Home page Media*/ #message {font-size: 25px;margin-top: -50px;} /* Services page Media */ .cube1, .cube2, .cube3, .cube4, .cube5, .cube6 {width: 90%;margin-left: 5%;} } @media only screen and (max-width: 360px) { /* General Media */ #mobile-menu ul { width: 75%; } /* Our Process page Media */ #bookmarks_bar { margin-left:-5%; } /* Blog page Media */ .blog-img-060418 {width: 280px;position:relative;left:50%;margin-left:-140px;} .blog-body ol { padding-right: 20px;} } @media only screen and (max-width: 320px) { /* Home page Media*/ #message {font-size: 25px;} #container_blocks {width: 100%;margin: 0;padding: 0;} #transp_break {height: 4.5em;} .button2 a {font-size: 20px;} }