/*------------------------------------------------------------------ Version:1.0 -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 1. IMPORT FONTS 2. IMPORT FILES 3. SKELETON 4. WP CORE 5. HEADER 6. SECTIONS 7. SECTIONS 8. PORTFOLIO 9. TESTIMONIALS 10. PRICING TABLES 11. ICON BOXES 12. MESSAGE BOXES 13. FEATURES 14. CONTACT 15. FOOTER 16. MISC 17. BUTTONS -------------------------------------------------------------------*/ /*------------------------------------------------------------------ IMPORT FONTS -------------------------------------------------------------------*/ /*@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,900');*/ /*------------------------------------------------------------------ SKELETON -------------------------------------------------------------------*/ body { color:#333; font-size:16px; font-family:'Noto Serif TC', 'Noto Sans TC', 'Microsoft JhengHei', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; line-height:1.6; } body.demos .section { background:#f2f3f5; } body.demos .section-title img { max-width:280px; display:block; margin:10px auto; } body.demos .service-widget h3 { border-bottom:1px solid #ededed; font-size:18px; padding:20px 0; background-color:#fff; } body.demos .service-widget { margin:0 0 30px; padding:30px; background-color:#fff } body.demos .container-fluid { max-width:1080px } a { color:#1f1f1f; text-decoration:none !important; outline:none !important; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; } h1, h2, h3, h4, h5, h6 { letter-spacing:0; font-weight:bold; position:relative; padding:0 0 10px 0; font-weight:normal; line-height:1.2em !important; color:#1f1f1f; margin:0 } h1 { font-size:24px } h2 { font-size:22px } h3 { font-size:18px } h4 { font-size:16px } h5 { font-size:14px } h6 { font-size:13px } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color:#212121; text-decoration:none!important; opacity:1 } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { opacity:.8 } a { color:#1f1f1f; text-decoration:none; outline:none; } a, .btn { text-decoration:none !important; outline:none !important; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; } .btn-custom { margin-top:20px; background-color:transparent !important; border:2px solid #ddd; padding:12px 40px; font-size:16px; } .lead { font-size:18px; line-height:30px; color:#767676; margin:0; padding:0; } ul, li, ol{ margin:0px; padding:0px; list-style:none; } /*------------------------------------------------------------------ WP CORE -------------------------------------------------------------------*/ .first { clear:both } .last { margin-right:0 } .alignnone { margin:5px 20px 20px 0; } .aligncenter, div.aligncenter { display:block; margin:5px auto 5px auto; } .alignright { float:right; margin:10px 0 20px 20px; } .alignleft { float:left; margin:10px 20px 20px 0; } a img.alignright { float:right; margin:10px 0 20px 20px; } a img.alignnone { margin:10px 20px 20px 0; } a img.alignleft { float:left; margin:10px 20px 20px 0; } a img.aligncenter { display:block; margin-left:auto; margin-right:auto } .wp-caption { background:#fff; border:1px solid #f0f0f0; max-width:96%; padding:5px 3px 10px; text-align:center; } .wp-caption.alignnone { margin:5px 20px 20px 0; } .wp-caption.alignleft { margin:5px 20px 20px 0; } .wp-caption.alignright { margin:5px 0 20px 20px; } .wp-caption img { border:0 none; height:auto; margin:0; max-width:98.5%; padding:0; width:auto; } .wp-caption p.wp-caption-text { font-size:11px; line-height:17px; margin:0; padding:0 4px 5px; } /* Text meant only for screen readers. */ .screen-reader-text { clip:rect(1px, 1px, 1px, 1px); position:absolute !important; height:1px; width:1px; overflow:hidden; } .screen-reader-text:focus { background-color:#f1f1f1; border-radius:3px; box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.6); clip:auto !important; color:#21759b; display:block; font-size:14px; font-size:0.875rem; font-weight:bold; height:auto; left:5px; line-height:normal; padding:15px 23px 14px; text-decoration:none; top:5px; width:auto; z-index:100000; /* Above WP toolbar. */ } /*------------------------------------------------------------------ Top head -------------------------------------------------------------------*/ .top-bar { background:#008061; padding:5px 20px; } .left-top { padding:3px 0px; } .email-box { float:left; display:inline-block; font-size:15px; } .email-box a { color:#fff; font-size:15px; } .email-box a:hover { color:#fd6802; } .email-box a i { padding:0px 5px; } /* .phone-box{ display:inline-block; } .phone-box a{ color:#fff; font-size:16px; } .phone-box a:hover{ color:#fd6802; } .phone-box a i{ padding:0px 5px; } */ .social-box { float:right; padding-top:0; font-size:15px; } .social-box ul li { display:inline-block; padding-left:10px; } .social-box ul li a { color:#fff; font-size:15px; } .social-box ul li a:hover { color:#fd6802; } /*------------------------------------------------------------------ HEADER -------------------------------------------------------------------*/ .megamenu .nav, .megamenu .collapse, .megamenu .dropup, .megamenu .dropdown { position:static; } .megamenu .container-fluid { position:relative; } .megamenu .dropdown-menu { left:auto; } .megamenu .megamenu-content { padding:20px 30px; } .megamenu .dropdown.megamenu-fw .dropdown-menu { left:0; right:0; } .megamenu .list-unstyled { min-width:200px; } .header_style_01 { background-color:#fff; display:block; left:0; padding:15px 20px !important; position:relative; right:0; top:0; width:100%; -webkit-box-shadow:0px 2px 5px 0px rgba(0,0,0,0.30); -moz-box-shadow:0px 2px 5px 0px rgba(0,0,0,0.30); box-shadow:0px 2px 5px 0px rgba(0,0,0,0.30); z-index:111; } .header_style_01 .navbar-default { background-color:transparent; border:0; border-radius:0px; } .header_style_01 .navbar, .header_style_01 .navbar-nav, .header_style_01 .navbar-default, .header_style_01 .nav { margin-bottom:0 !important; } .header_style_01 .navbar-brand { padding:2px 15px 0 15px; height:auto; } .header_style_01 .navbar-default .navbar-nav > li > a { border-radius:0; color:#fff; font-family:'Microsoft JhengHei', sans-serif; font-size:1.9rem; font-style:normal; font-weight:600; text-transform:capitalize; background-color:transparent; } .header_style_01 .navbar-default .navbar-nav > li a { color:#e3720b; padding:10px 10px; } .header_style_01 .navbar-default .navbar-nav > li a.active{ color:#ff6; box-shadow:0 2px 2px 0 rgba(5, 16, 44, .2); border-radius:10px 0px 10px 0px; background:#fd6802; } .header_style_01 .navbar-default .navbar-nav > li:hover a, .header_style_01 .navbar-default .navbar-nav > li:focus a { color:#fff; box-shadow:0 2px 2px 0 rgba(5, 16, 44, .15); border-radius:10px 0px 10px 0px; background:#fd6802; } .header_style_01 .navbar-default .sub_menu .navbar-nav > li a { color:#0282ea; } .header_style_01 .navbar-default .sub_menu .navbar-nav > li a.active{ color:#ff6; background:#0282ea; } .header_style_01 .navbar-default .sub_menu .navbar-nav > li:hover a, .header_style_01 .navbar-default .sub_menu .navbar-nav > li:focus a { color:#fff; background:#0282ea; } .header_style_01 .navbar-right > li { /*margin-top:2px;*/ -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; } .header_style_01 .navbar-right > li > a { padding-bottom:10px; padding-top:10px; } li.social-links { margin:0 8px; } li.social-links a { padding:13px 0 !important; } .navbar-nav li { position:relative; margin:0px 5px; } .navbar-nav span { font-size:24px; position:absolute; right:2px; top:13px; } /*------------------------------------------------------------------ Banner Slider -------------------------------------------------------------------*/ .slider-bg-one { background-image:url("uploads/slider_01.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; } .slider-bg-two { background-image:url("uploads/slider_02.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; } .slider-bg-three { background-image:url("uploads/slider_03.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; } .slider-content-area { height:100vh; position:relative; } .home-one-slider-otem .slider-content-area { height:650px; position:relative; } .slide-text { position:absolute; top:50%; transform:translateY(-50%); width:100%; z-index:1; } .slide-text h1 { color:#fff; font-size:70px; font-weight:700; text-transform:capitalize; text-shadow:0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); } .slide-text h1 span{ color:#fd6802; } .slide-text h2 { color:#fff; font-size:22px; letter-spacing:1px; margin-bottom:20px; text-shadow:0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); } .slider-wrapper .owl-nav .owl-prev, .slider-wrapper .owl-nav .owl-next { background:#393939; height:60px; top:50%; transform:translateY(-50%); transition:all 0.4s ease-in-out 0s; width:60px; border-radius:25px 0px 25px 0px; } .slider-wrapper .owl-nav .owl-prev:hover, .slider-wrapper .owl-nav .owl-next:hover { background:#fd6802; } .slider-wrapper .owl-nav .owl-prev { margin-left:0%; left:0px; position:absolute; } .slider-wrapper .owl-nav .owl-prev i{ position:absolute; left:0px; right:0; width:auto; height:auto; background:none; color:#fff; } .slider-wrapper .owl-nav .owl-next { margin-right:0%; right:0; position:absolute; } .slider-wrapper .owl-nav .owl-next i{ position:absolute; right:0; left:0px; width:auto; height:auto; background:none; color:#fff; } .home-one-slider-otem::before{ content:""; position:absolute; background:rgba(0,0,0, 0.8); width:100%; height:100%; top:0%; left:100%; z-index:1 } /*------------------------------------------------------------------ SECTIONS -------------------------------------------------------------------*/ .parallax { background-attachment:fixed; background-size:cover; height:100%; padding:120px 0; position:relative; width:100%; } .parallax.parallax-off { background-attachment:scroll !important; display:block; height:100%; min-height:100%; overflow:hidden; position:relative; background-position:center center; vertical-align:sub; width:100%; z-index:2; } .no-scroll-xy { overflow:hidden !important; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; transition:all .4s ease-in-out; } .section { display:block; position:relative; overflow:hidden; padding:10px 0; } .noover { overflow:visible; } .noover .btn-dark { border:0 !important; } .nopad { padding:0; } .nopadtop { padding-top:0; } .section.wb { background-color:#fff; } .section.lb { background-color:#f2f3f5; } .section.db { background-color:#1f1f1f; } .section.color1 { background-color:#448AFF; } .first-section { display:block; position:relative; overflow:hidden; padding:16em 0 13em; } .first-section h2 { color:#fff; font-size:68px; font-weight:300; text-transform:capitalize; display:block; margin:0; padding:0 0 30px; position:relative; } .first-section .lead { font-size:21px; font-weight:300; padding:0 0 40px; margin:0; line-height:inherit; color:#fff; } .macbookright { width:980px; position:absolute; right:-15%; bottom:-6%; } .section-title { display:block; position:relative; margin-bottom:30px; } .section-title p { color:#999; font-weight:400; font-size:18px; line-height:33px; margin:0; } .section-title h3 { font-size:27px; font-weight:600; line-height:62px; margin:0 0 25px; padding:0; text-transform:none; } .section.colorsection p, .section.colorsection h3, .section.db h3 { color:#fff; } .service-widget{ background:#fff; } .section.lb .service-dit h3{ padding:12px 0px; } .service-dit{ padding:20px 15px; } /*------------------------------------------------------------------ PORTFOLIO -------------------------------------------------------------------*/ .item-h2, .item-h1 { height:100% !important; height:auto !important; } .isotope-item { z-index:2; padding:0; } .isotope-hidden.isotope-item { pointer-events:none; z-index:1; } .isotope, .isotope .isotope-item { /* change duration value to whatever you like */ -webkit-transition-duration:0.8s; -moz-transition-duration:0.8s; transition-duration:0.8s; } .isotope { -webkit-transition-property:height, width; -moz-transition-property:height, width; transition-property:height, width; } .isotope .isotope-item { -webkit-transition-property:-webkit-transform, opacity; -moz-transition-property:-moz-transform, opacity; transition-property:transform, opacity; } .portfolio-filter ul { padding:0; z-index:2; display:block; position:relative; margin:0; } .portfolio-filter ul li { border-radius:0; display:inline-block; margin:0 5px 0 0; text-decoration:none; text-transform:uppercase; vertical-align:middle; } .portfolio-filter ul li:last-child:after { content:""; } .portfolio-filter ul li .btn-dark { box-shadow:none; background-color:transparent; border:2px solid #fd6802 !important; color:#393939; font-weight:500; font-size:14px; padding:15px 35px; } .da-thumbs { list-style:none; position:relative; padding:0; } .da-thumbs .pitem { margin:0; padding:15px; position:relative; } .da-thumbs .pitem a, .da-thumbs .pitem a img { display:block; position:relative; } .da-thumbs .pitem a { overflow:hidden; } .da-thumbs .pitem a div { position:absolute; background-color:rgba(0, 0, 0, 0.8); width:100%; height:100%; } .da-thumbs .pitem a div h3 { display:block; color:#fff; font-size:20px; padding:30px 15px; text-transform:capitalize; font-weight:normal; } .da-thumbs .pitem a div h3 small { display:block; color:#fff; margin-top:5px; font-size:13px; font-weight:300; } .da-thumbs .pitem a div i { background-color:#fd6802; position:absolute; color:#fff !important; bottom:0; font-size:15px; z-index:12; right:0; width:50px; height:50px; line-height:50px; text-align:center; border-radius:25px 0px 0px 0px; } /*------------------------------------------------------------------ TESTIMONIALS -------------------------------------------------------------------*/ .logos img { margin:auto; display:block; text-align:center; width:100%; opacity:0.3; } .logos img:hover { opacity:0.5; } .desc h3 i { color:#fd6802; font-size:37px; vertical-align:middle; margin-right:12px; } .desc { padding:30px; position:relative; background:#c4e6f4; border:1px solid #c4e6f4; -webkit-border-radius:25px 0px 25px 0px; -moz-border-radius:25px 0px 25px 0px; border-radius:25px 0px 25px 0px; } .testi-meta { display:block; margin-top:20px; } .testimonial h4 { font-size:18px; color:#fff; padding:13px 0 0; } .testimonial img { max-width:55px; } .testimonial small { margin-top:7px; font-size:16px; display:block; } .testimonial { background-color:transparent; } .testimonial h3 { padding:0 0 10px; font-size:20px; font-weight:600; } .testimonial small, .testimonial .lead, .desc .lead { background-color:transparent; color:#000; display:block; font-size:17px; font-weight:500; line-height:30px; margin:0; padding:0; position:relative; } .testimonial p:after { display:none; } /*------------------------------------------------------------------ PRICING TABLES -------------------------------------------------------------------*/ .pricing-table { margin:50px 0 0 0; background:#fff; box-shadow:0 5px 14px rgba(0, 0, 0, 0.1); } .pricing-table i { width:30px; color:#c2c2c2; display:inline-block; margin-right:10px; padding-right:5px; border-right:1px solid #ececec; } .pricing-table .btn-dark { padding:10px 24px; font-size:15px; } .pricing-table strong { font-weight:600; margin-right:6px; color:#1f1f1f; } .pricing-table-header { padding:30px 0 25px 0; background:#fff; } .pricing-table-header h2 { font-size:31px; margin:0; padding:0; font-weight:300; } .pricing-table-header h3 { font-size:15px; font-weight:600; color:#aaaaaa; margin-top:10px; text-transform:uppercase; } .pricing-table-space { height:10px; } .pricing-table-text { margin:15px 30px 0 30px; padding:0 10px 15px 10px; border-bottom:1px solid #ececec; font-weight:300; line-height:30px; color:#c2c2c2; font-size:16px; } .pricing-table-text p { font-weight:400; } .pricing-table-features { margin:15px 30px 0 30px; padding:0 10px 15px 30px; border-bottom:1px solid #ececec; text-align:left; line-height:30px; font-size:16px; color:#c2c2c2; } .pricing-table-highlighted h3, .pricing-table-highlighted h2 { color:#fff !important; } .pricing-table-sign-up { margin-top:25px; padding-bottom:30px; } /* Highlighted table */ .pricing-table-highlighted { margin-top:0; } .m130 { margin-top:130px; } .nav-pills { border:1px solid #e1e1e1; } .nav-pills > li { width:50%; padding:10px; float:left; margin:0 !important; } .nav-pills > li > a { margin:0!important; text-align:center; background-color:#f4f4f4; } /*------------------------------------------------------------------ ICON BOXES -------------------------------------------------------------------*/ .icon-wrapper { position:relative; cursor:pointer; display:block; z-index:1; } .icon-wrapper i { width:75px; height:75px; text-align:center; line-height:75px; font-size:28px; background-color:#f2f3f5; color:#1f1f1f; margin-top:0; } .small-icons.icon-wrapper:hover i, .small-icons.icon-wrapper:hover i:hover, .small-icons.icon-wrapper i { width:auto !important; height:auto !important; line-height:1 !important; padding:0 !important; color:#e3e3e3 !important; background-color:transparent !important; background:none !important; margin-right:10px !important; vertical-align:middle; font-size:24px !important; } .small-icons.icon-wrapper h3 { font-size:18px; padding-bottom:5px; } .small-icons.icon-wrapper p { padding:0; margin:0; } .icon-wrapper h3 { font-size:21px; padding:0 0 15px; margin:0; } .icon-wrapper p { margin-bottom:0; padding-left:95px; } .icon-wrapper p small { display:block; color:#999; margin-top:10px; text-transform:none; font-weight:600; font-size:16px; } .icon-wrapper p small:after { content:"\f105"; font-family:FontAwesome; margin-left:5px; font-size:11px; } .effect-1 { display:inline-block; cursor:pointer; text-align:center; position:relative; text-decoration:none; z-index:1; } .effect-1:after { pointer-events:none; position:absolute; width:100%; height:100%; border-radius:50%; content:''; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; } .effect-1 { -webkit-transition:background 0.2s, color 0.2s; -moz-transition:background 0.2s, color 0.2s; transition:background 0.2s, color 0.2s; } .effect-1:after { top:-7px; left:-7px; padding:7px; box-shadow:0 0 0 2px #fcbf02; -webkit-transition:-webkit-transform 0.2s, opacity 0.2s; -webkit-transform:scale(.8); -moz-transition:-moz-transform 0.2s, opacity 0.2s; -moz-transform:scale(.8); -ms-transform:scale(.8); transition:transform 0.2s, opacity 0.2s; transform:scale(.8); opacity:0; } .effect-1:hover:after { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1); opacity:1; } .effect-1:after { -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); transform:scale(1.2); } .effect-1:hover:after { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1); opacity:1; } /*------------------------------------------------------------------ MESSAGE BOXES -------------------------------------------------------------------*/ .service-widget h3 { font-size:22px; color:#fff; padding:20px 0 12px; margin:0; font-weight:600; } .service-widget h3 a, .section.wb .service-widget h3, .section.lb .service-widget h3 { color:#1f1f1f; } .service-widget p { margin-bottom:0; padding-bottom:0; } .message-box h4 { text-transform:uppercase; padding:0; margin:0 0 5px; font-weight:600; letter-spacing:0.5px; font-size:15px; color:#999; } .message-box h2 a.topictitle { text-transform:uppercase; padding:0; margin:0 0 5px; font-weight:600; letter-spacing:0.5px; font-size:21px; } .message-box h2 { font-size:28px; font-weight:500; padding:0 0 10px; margin:0; line-height:62px; margin-top:0; text-transform:none; } .message-box p { margin-bottom:10px; font-size:15px; letter-spacing:1px; } .message-box .lead { padding-top:10px; font-size:19px; font-style:italic; color:#999; padding-bottom:0; } .post-media { position:relative; } .post-media img { width:100%; } .playbutton { position:absolute; color:#fff !important; top:40%; font-size:60px; z-index:12; left:0; right:0; text-align:center; margin:-20px auto; } .hoverbutton { background-color:#fd6802; position:absolute; color:#fff !important; top:48%; font-size:21px; z-index:12; left:0; opacity:0; right:0; width:50px; height:50px; line-height:50px; text-align:center; margin:-20px auto; } .service-widget:hover .hoverbutton { opacity:1; } hr.hr1 { position:relative; margin:20px 0; border:1px dashed #f2f3f5; } hr.hr2 { position:relative; margin:17px 0; border:1px dashed #f2f3f5; } hr.hr3 { position:relative; margin:25px 0 30px 0; border:1px dashed #f2f3f5; } hr.invis { border-color:transparent; } hr.invis1 { margin:10px 0; border-color:transparent; } .section.parallax hr.hr1 { border-color:rgba(255, 255, 255, 0.1); } .sep1 { display:block; position:absolute; content:''; width:40px; height:40px; bottom:-20px; left:50%; margin-left:-14px; background-color:#1f1f1f; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); z-index:1; } .sep2 { display:block; position:absolute; content:''; width:40px; height:40px; top:-20px; left:50%; margin-left:-14px; background-color:#1f1f1f; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); z-index:1; } /* Divider Styles */ .divider-wrapper { width:100%; box-shadow:0 5px 14px rgba(0, 0, 0, 0.1); height:540px; margin:0 auto; position:relative; } .divider-wrapper:hover { cursor:none; } .divider-bar { position:absolute; width:10px; left:50%; top:-10px; bottom:-15px; } .code-wrapper { border:1px solid #fff; display:block; overflow:hidden; width:100%; height:100%; position:relative; background:url("uploads/code.jpg") no-repeat; } .design-wrapper { overflow:hidden; position:absolute; top:0; left:0; right:0; bottom:0; -webkit-transform:translateX(50%); transform:translateX(50%); } .design-image { display:block; width:100%; height:100%; position:relative; -webkit-transform:translateX(-50%); transform:translateX(-50%); background:url("uploads/design.jpg") no-repeat; } /*------------------------------------------------------------------ FEATURES -------------------------------------------------------------------*/ .customwidget h1 { font-size:44px; color:#fff; padding:15px 0 25px; margin:0; line-height:1 !important; font-weight:500; } .customwidget ul { padding:0; display:block; margin-bottom:30px; } .customwidget li i { margin-right:5px; } .customwidget li { color:#fff; margin-right:10px; } .image-center img { position:relative; margin:0 0 -208px; z-index:10; padding-right:30px; text-align:center; } .customwidget p { font-style:italic; font-size:18px; padding:0 0 10px; } .img-center img { width:100%; box-shadow:0 5px 14px rgba(0, 0, 0, 0.1); } .img-center { margin:auto; } #features li p { margin-bottom:0; padding-bottom:0; } #features li { display:table; width:100%; margin-bottom:15px; cursor:pointer; -webkit-box-shadow:0px 3px 6px 0px rgba(200, 200, 200, 0.15); box-shadow:0px 3px 6px 0px rgba(200, 200, 200, 0.15); background:#d5f4f9; border:solid 1px #99e3f0; border-radius:15px 0px 15px 0px; transition:all 0.1s ease-in-out; } #features li:hover { transform:scale(1.07); transition:all 0.1s ease-in-out; z-index:1000; } .features-left, .features-right { padding:0 10px; } .features-right li:last-child, .features-left li:last-child { margin-bottom:0px; padding-bottom:0 !important; } .features-right li i, .features-left li i { width:30px; height:30px; line-height:30px; display:table; border-radius:15px; font-size:18px; background:#2283e3; margin:20px 10px; position:relative; text-align:center; z-index:55; transition:.4s; padding:0; } .features-right li i:hover, .features-left li i:hover { background:#186cc0; } #features i img { display:table; margin:0 auto; } .features-left li i:before, .features-right li i:before { text-align:center; } .features-right li i .ico-current, .features-left li i .ico-current { opacity:1; transition:.4s; visibility:visible; } .features-right li i .ico-hover, .features-left li i .ico-hover { opacity:0; transition:.4s; visibility:hidden; top:19px; } .features-right li:hover .ico-current, .features-left li:hover .ico-current { opacity:0; transition:.4s; visibility:hidden; } .features-right li:hover .ico-hover, .features-left li:hover .ico-hover { opacity:1; transition:.4s; visibility:visible; } .features-right i { float:left; } .fr-inner { margin:10px 10px 10px 60px; } .features-left i { float:right; } .fl-inner { text-align:right; margin-right:90px; } #features h4 { text-transform:capitalize; margin:0; font-size:19px; color:#fff; } /*------------------------------------------------------------------ CONTACT -------------------------------------------------------------------*/ .bootstrap-select { width:100% \0; /*IE9 and below*/ } .bootstrap-select > .dropdown-toggle { width:100%; padding-right:25px; } .has-error .bootstrap-select .dropdown-toggle, .error .bootstrap-select .dropdown-toggle { border-color:#b94a48; } .bootstrap-select.fit-width { width:auto !important; } .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { width:100%; } .bootstrap-select .dropdown-toggle:focus { outline:thin dotted #333333 !important; outline:5px auto -webkit-focus-ring-color !important; outline-offset:-2px; } .bootstrap-select.form-control { margin-bottom:0; padding:0; border:none; } .bootstrap-select.form-control:not([class*="col-"]) { width:100%; } .bootstrap-select.form-control.input-group-btn { z-index:auto; } .bootstrap-select.btn-group:not(.input-group-btn), .bootstrap-select.btn-group[class*="col-"] { float:none; display:inline-block; margin-left:0; } .bootstrap-select.btn-group.dropdown-menu-right, .bootstrap-select.btn-group[class*="col-"].dropdown-menu-right, .row .bootstrap-select.btn-group[class*="col-"].dropdown-menu-right { float:right; } .form-inline .bootstrap-select.btn-group, .form-horizontal .bootstrap-select.btn-group, .form-group .bootstrap-select.btn-group { margin-bottom:0; } .form-group-lg .bootstrap-select.btn-group.form-control, .form-group-sm .bootstrap-select.btn-group.form-control { padding:0; } .form-inline .bootstrap-select.btn-group .form-control { width:100%; } .bootstrap-select.btn-group.disabled, .bootstrap-select.btn-group > .disabled { cursor:not-allowed; } .bootstrap-select.btn-group.disabled:focus, .bootstrap-select.btn-group > .disabled:focus { outline:none !important; } .bootstrap-select.btn-group .dropdown-toggle .filter-option { display:inline-block; overflow:hidden; width:100%; text-align:left; } .bootstrap-select.btn-group .dropdown-toggle .fa-angle-down { position:absolute; top:30% !important; right:-5px; vertical-align:middle; } .bootstrap-select.btn-group[class*="col-"] .dropdown-toggle { width:100%; } .bootstrap-select.btn-group .dropdown-menu { border:1px solid #ededed; box-shadow:none; box-sizing:border-box; min-width:100%; padding:20px 10px; z-index:1035; } .dropdown-menu > li > a { background-color:transparent !important; color:#bcbcbc !important; font-size:15px; padding:10px 20px; } .bootstrap-select.btn-group .dropdown-menu.inner { position:static; float:none; border:0; padding:0; margin:0; border-radius:0; -webkit-box-shadow:none; box-shadow:none; } .bootstrap-select.btn-group .dropdown-menu li { position:relative; } .bootstrap-select.btn-group .dropdown-menu li.active small { color:#fff; } .bootstrap-select.btn-group .dropdown-menu li.disabled a { cursor:not-allowed; } .bootstrap-select.btn-group .dropdown-menu li a { cursor:pointer; } .bootstrap-select.btn-group .dropdown-menu li a.opt { position:relative; padding-left:2.25em; } .bootstrap-select.btn-group .dropdown-menu li a span.check-mark { display:none; } .bootstrap-select.btn-group .dropdown-menu li a span.text { display:inline-block; } .bootstrap-select.btn-group .dropdown-menu li small { padding-left:0.5em; } .bootstrap-select.btn-group .dropdown-menu .notify { position:absolute; bottom:5px; width:96%; margin:0 2%; min-height:26px; padding:3px 5px; background:#f5f5f5; border:1px solid #e3e3e3; -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05); pointer-events:none; opacity:0.9; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .bootstrap-select.btn-group .no-results { padding:3px; background:#f5f5f5; margin:0 5px; white-space:nowrap; } .bootstrap-select.btn-group.fit-width .dropdown-toggle .filter-option { position:static; } .bootstrap-select.btn-group.fit-width .dropdown-toggle .caret { position:static; top:auto; margin-top:4px; } .bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark { position:absolute; display:inline-block; right:15px; margin-top:5px; } .bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text { margin-right:34px; } .bootstrap-select.show-menu-arrow.open > .dropdown-toggle { z-index:1036; } .bootstrap-select.show-menu-arrow .dropdown-toggle:before { content:''; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:7px solid rgba(204, 204, 204, 0.2); position:absolute; bottom:-4px; left:9px; display:none; } .bootstrap-select.show-menu-arrow .dropdown-toggle:after { content:''; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid white; position:absolute; bottom:-4px; left:10px; display:none; } .bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before { bottom:auto; top:-3px; border-top:7px solid rgba(204, 204, 204, 0.2); border-bottom:0; } .bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after { bottom:auto; top:-3px; border-top:6px solid white; border-bottom:0; } .bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before { right:12px; left:auto; } .bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after { right:13px; left:auto; } .bootstrap-select.show-menu-arrow.open > .dropdown-toggle:before, .bootstrap-select.show-menu-arrow.open > .dropdown-toggle:after { display:block; } .bs-searchbox, .bs-actionsbox, .bs-donebutton { padding:4px 8px; } .bs-actionsbox { float:left; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .bs-actionsbox .btn-group button { width:50%; } .bs-donebutton { float:left; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .bs-donebutton .btn-group button { width:100%; } .bs-searchbox + .bs-actionsbox { padding:0 8px 4px; } .bs-searchbox .form-control { margin-bottom:0; width:100%; } select.bs-select-hidden, select.selectpicker { display:none !important; } select.mobile-device { position:absolute !important; top:0; left:0; display:block !important; width:100%; height:100% !important; opacity:0; } .bootstrap-select > .btn { background:rgba(0, 0, 0, 0) none repeat scroll 0 0; font-size:15px; height:33px; box-shadow:none !important; border:0 !important; padding:0; width:100%; color:#bcbcbc !important; } .contact_form { border:1px solid #ededed; box-shadow:0 3px 8px rgba(0, 0, 0, 0.1); background-color:#feeede; padding:30px 20px; } .contact_form .form-control { background-color:#fff; margin-bottom:10px; /*border:1px solid #ebebeb;*/ box-sizing:border-box; color:#bcbcbc; font-size:16px; outline:0 none; height:35px; resize:none; /*box-shadow:none !important;*/ width:100%; } .contact_form textarea { color:#bcbcbc; padding:20px 25px !important; height:160px !important; } .contact_form .form-control::-webkit-input-placeholder { color:#bcbcbc; } .contact_form .form-control::-moz-placeholder { opacity:1; color:#bcbcbc; } .contact_form .form-control::-ms-input-placeholder { color:#bcbcbc; } #contact { background:url(images/bg.png) no-repeat center center #fff; } /*------------------------------------------------------------------ FOOTER -------------------------------------------------------------------*/ .cac { background-color:#232323; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; } .cac:hover a h3 { color:#fff !important; } .cac a h3 { color:#999; } .cac h3 { padding:60px 0; margin:0; font-weight:400; font-size:20px; text-transform:capitalize; line-height:!important; } .footer { font-family:'Microsoft JhengHei', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; padding:20px 0 20px !important; color:#fff; text-shadow:1px 1px 2px #000; background-color:#ed1b2d; } .footer .widget-title { position:relative; display:block; margin-bottom:0px; } .footer .widget-title small { color:#999; display:block; padding:0 58px; text-transform:uppercase; } .footer .widget-title h3 { color:#fff; font-weight:500; font-size:21px; padding:0; margin:0; line-height:1 !important; } .footer-links { list-style:none; padding:0; } .footer-links a { color:#999; display:block; } .footer-links.hov a span{ opacity:0; transition:all 1s ease-in-out; } .footer-links.hov a:hover{ padding-left:15px; } .footer-links.hov a:hover span{ opacity:1; padding-left:10px; transition:all 1s ease-in-out; } .footer-links a:hover, .footer a, .footer a:hover { color:#fff !important; } .footer-links li { margin-bottom:10px; display:block; width:100%; border-bottom:1px dashed rgba(255, 255, 255, 0.1); padding-bottom:10px; } .twitter-widget li { margin-bottom:0; border:0 !important; } .twitter-widget li i { border-right:0 !important; margin-right:0; } .footer-links li:last-child { margin-bottom:0; padding-bottom:0; border:0; } .footer-links i { display:inline-block; width:25px; margin-right:10px; border-right:1px dashed rgba(255, 255, 255, 0.1); } .copyrights { border-top:1px dashed rgba(255, 255, 255, 0.1); background-color:#008061; box-sizing:border-box; width:100%; text-align:left; padding:5px; overflow:hidden; } /* Footer left */ .footer-distributed .footer-left { float:none; text-align:center; } .footer-distributed .footer-links { margin:0 0 10px; text-transform:uppercase; padding:0; } .footer-distributed .footer-links a { display:inline-block; line-height:1.8; margin:0 10px 0 10px; text-decoration:none; } .footer-distributed .footer-company-name { font-size:1.4rem; font-weight:400; margin:0 10px; color:#fff; padding:0; } .footer-distributed .footer-company-name a{ color:#ffc; } .footer-distributed .footer-company-name a:hover{ color:#fd6802; } /* Footer right */ .footer-distributed .footer-right { float:none; } /* The search form */ .footer-distributed .widget-title p{ padding-top:0px; } .footer-distributed form { position:relative; } .footer-distributed form input { display:block; border-radius:3px; box-sizing:border-box; background-color:#181818; border:none; font:inherit; font-size:15px; font-weight:normal; color:#999; width:100%; padding:18px 50px 18px 18px; } .footer-distributed form input:focus { outline:none; } /* Changing the placeholder color */ .footer-distributed form input::-webkit-input-placeholder { color:#999; } .footer-distributed form input::-moz-placeholder { opacity:1; color:#999; } .footer-distributed form input:-ms-input-placeholder { color:#999; } /* The magnify glass icon */ .footer-distributed form i { width:18px; height:18px; position:absolute; top:16px; right:18px; color:#999; font-size:18px; margin-top:6px; } /*------------------------------------------------------------------ MISC -------------------------------------------------------------------*/ .progress { background-color:#f2f3f5; border-radius:0; box-shadow:none; height:5px; margin-bottom:20px; overflow:hidden; } .skills h3 { color:#999999; font-size:15px; } .dmtop { background:#888; opacity:0.5; z-index:100; width:50px; height:50px; line-height:50px; position:fixed; bottom:-500px; border-radius:5px; right:10px; text-align:center; font-size:15px; cursor:pointer; -webkit-transition:all .7s ease-in-out; -moz-transition:all .7s ease-in-out; -o-transition:all .7s ease-in-out; -ms-transition:all .7s ease-in-out; transition:all .7s ease-in-out; } a.dmtop i { color:#000; margin-top:.3em } .dmtop:hover { background:#f60; } .icon_wrap { background-color:#fd6802; width:100px; height:100px; display:block; line-height:100px; font-size:34px; color:#fff; margin:0 auto; text-align:center; padding:0 !important; border:0 !important; } .stat-wrap h3 { font-size:22px; font-weight:600; color:#fcbf02; margin:0 !important; padding:0 !important; line-height:1 !important:} .stat-wrap p { font-size:38px; color:#fff; margin:0; font-weight:700; padding:4px 0 0; line-height:1 !important:} #preloader { width:100%; height:100%; top:0; right:0; bottom:0; left:0; background:#fd6802; z-index:11000; position:fixed; display:block; display:flex; align-items:center; justify-content:center; } .preloader { position:absolute; margin:0 auto; left:1%; right:1%; top:45%; width:95px; height:95px; background:center center no-repeat none; background-size:95px 95px; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; border-radius:50% } .loader { position:absolute; margin:0 auto; left:1%; right:1%; top:45%; width:75px; height:100px; } .loader__bar { position:absolute; bottom:0; width:10px; height:50%; background:#fff; -webkit-transform-origin:center bottom; transform-origin:center bottom; box-shadow:1px 1px 0 rgba(0, 0, 0, 0.2); } .loader__bar:nth-child(1) { left:0px; -webkit-transform:scale(1, 0.2); transform:scale(1, 0.2); -webkit-animation:barUp1 4s infinite; animation:barUp1 4s infinite; } .loader__bar:nth-child(2) { left:15px; -webkit-transform:scale(1, 0.4); transform:scale(1, 0.4); -webkit-animation:barUp2 4s infinite; animation:barUp2 4s infinite; } .loader__bar:nth-child(3) { left:30px; -webkit-transform:scale(1, 0.6); transform:scale(1, 0.6); -webkit-animation:barUp3 4s infinite; animation:barUp3 4s infinite; } .loader__bar:nth-child(4) { left:45px; -webkit-transform:scale(1, 0.8); transform:scale(1, 0.8); -webkit-animation:barUp4 4s infinite; animation:barUp4 4s infinite; } .loader__bar:nth-child(5) { left:60px; -webkit-transform:scale(1, 1); transform:scale(1, 1); -webkit-animation:barUp5 4s infinite; animation:barUp5 4s infinite; } .loader__ball { position:absolute; bottom:10px; left:0; width:10px; height:10px; background:#fff; border-radius:50%; -webkit-animation:ball 4s infinite; animation:ball 4s infinite; } @-webkit-keyframes ball { 0% { -webkit-transform:translate(0, 0); transform:translate(0, 0); } 5% { -webkit-transform:translate(8px, -14px); transform:translate(8px, -14px); } 10% { -webkit-transform:translate(15px, -10px); transform:translate(15px, -10px); } 17% { -webkit-transform:translate(23px, -24px); transform:translate(23px, -24px); } 20% { -webkit-transform:translate(30px, -20px); transform:translate(30px, -20px); } 27% { -webkit-transform:translate(38px, -34px); transform:translate(38px, -34px); } 30% { -webkit-transform:translate(45px, -30px); transform:translate(45px, -30px); } 37% { -webkit-transform:translate(53px, -44px); transform:translate(53px, -44px); } 40% { -webkit-transform:translate(60px, -40px); transform:translate(60px, -40px); } 50% { -webkit-transform:translate(60px, 0); transform:translate(60px, 0); } 57% { -webkit-transform:translate(53px, -14px); transform:translate(53px, -14px); } 60% { -webkit-transform:translate(45px, -10px); transform:translate(45px, -10px); } 67% { -webkit-transform:translate(37px, -24px); transform:translate(37px, -24px); } 70% { -webkit-transform:translate(30px, -20px); transform:translate(30px, -20px); } 77% { -webkit-transform:translate(22px, -34px); transform:translate(22px, -34px); } 80% { -webkit-transform:translate(15px, -30px); transform:translate(15px, -30px); } 87% { -webkit-transform:translate(7px, -44px); transform:translate(7px, -44px); } 90% { -webkit-transform:translate(0, -40px); transform:translate(0, -40px); } 100% { -webkit-transform:translate(0, 0); transform:translate(0, 0); } } @keyframes ball { 0% { -webkit-transform:translate(0, 0); transform:translate(0, 0); } 5% { -webkit-transform:translate(8px, -14px); transform:translate(8px, -14px); } 10% { -webkit-transform:translate(15px, -10px); transform:translate(15px, -10px); } 17% { -webkit-transform:translate(23px, -24px); transform:translate(23px, -24px); } 20% { -webkit-transform:translate(30px, -20px); transform:translate(30px, -20px); } 27% { -webkit-transform:translate(38px, -34px); transform:translate(38px, -34px); } 30% { -webkit-transform:translate(45px, -30px); transform:translate(45px, -30px); } 37% { -webkit-transform:translate(53px, -44px); transform:translate(53px, -44px); } 40% { -webkit-transform:translate(60px, -40px); transform:translate(60px, -40px); } 50% { -webkit-transform:translate(60px, 0); transform:translate(60px, 0); } 57% { -webkit-transform:translate(53px, -14px); transform:translate(53px, -14px); } 60% { -webkit-transform:translate(45px, -10px); transform:translate(45px, -10px); } 67% { -webkit-transform:translate(37px, -24px); transform:translate(37px, -24px); } 70% { -webkit-transform:translate(30px, -20px); transform:translate(30px, -20px); } 77% { -webkit-transform:translate(22px, -34px); transform:translate(22px, -34px); } 80% { -webkit-transform:translate(15px, -30px); transform:translate(15px, -30px); } 87% { -webkit-transform:translate(7px, -44px); transform:translate(7px, -44px); } 90% { -webkit-transform:translate(0, -40px); transform:translate(0, -40px); } 100% { -webkit-transform:translate(0, 0); transform:translate(0, 0); } } @-webkit-keyframes barUp1 { 0% { -webkit-transform:scale(1, 0.2); transform:scale(1, 0.2); } 40% { -webkit-transform:scale(1, 0.2); transform:scale(1, 0.2); } 50% { -webkit-transform:scale(1, 1); transform:scale(1, 1); } 90% { -webkit-transform:scale(1, 1); transform:scale(1, 1); } 100% { -webkit-transform:scale(1, 0.2); transform:scale(1, 0.2); } } @keyframes barUp1 { 0% { -webkit-transform:scale(1, 0.2); transform:scale(1, 0.2); } 40% { -webkit-transform:scale(1, 0.2); transform:scale(1, 0.2); } 50% { -webkit-transform:scale(1, 1); transform:scale(1, 1); } 90% { -webkit-transform:scale(1, 1); transform:scale(1, 1); } 100% { -webkit-transform:scale(1, 0.2); transform:scale(1, 0.2); } } @-webkit-keyframes barUp2 { 0% { -webkit-transform:scale(1, 0.4); transform:scale(1, 0.4); } 40% { -webkit-transform:scale(1, 0.4); transform:scale(1, 0.4); } 50% { -webkit-transform:scale(1, 0.8); transform:scale(1, 0.8); } 90% { -webkit-transform:scale(1, 0.8); transform:scale(1, 0.8); } 100% { -webkit-transform:scale(1, 0.4); transform:scale(1, 0.4); } } @keyframes barUp2 { 0% { -webkit-transform:scale(1, 0.4); transform:scale(1, 0.4); } 40% { -webkit-transform:scale(1, 0.4); transform:scale(1, 0.4); } 50% { -webkit-transform:scale(1, 0.8); transform:scale(1, 0.8); } 90% { -webkit-transform:scale(1, 0.8); transform:scale(1, 0.8); } 100% { -webkit-transform:scale(1, 0.4); transform:scale(1, 0.4); } } @-webkit-keyframes barUp3 { 0% { -webkit-transform:scale(1, 0.6); transform:scale(1, 0.6); } 100% { -webkit-transform:scale(1, 0.6); transform:scale(1, 0.6); } } @keyframes barUp3 { 0% { -webkit-transform:scale(1, 0.6); transform:scale(1, 0.6); } 100% { -webkit-transform:scale(1, 0.6); transform:scale(1, 0.6); } } @-webkit-keyframes barUp4 { 0% { -webkit-transform:scale(1, 0.8); transform:scale(1, 0.8); } 40% { -webkit-transform:scale(1, 0.8); transform:scale(1, 0.8); } 50% { -webkit-transform:scale(1, 0.4); transform:scale(1, 0.4); } 90% { -webkit-transform:scale(1, 0.4); transform:scale(1, 0.4); } 100% { -webkit-transform:scale(1, 0.8); transform:scale(1, 0.8); } } @keyframes barUp4 { 0% { -webkit-transform:scale(1, 0.8); transform:scale(1, 0.8); } 40% { -webkit-transform:scale(1, 0.8); transform:scale(1, 0.8); } 50% { -webkit-transform:scale(1, 0.4); transform:scale(1, 0.4); } 90% { -webkit-transform:scale(1, 0.4); transform:scale(1, 0.4); } 100% { -webkit-transform:scale(1, 0.8); transform:scale(1, 0.8); } } @-webkit-keyframes barUp5 { 0% { -webkit-transform:scale(1, 1); transform:scale(1, 1); } 40% { -webkit-transform:scale(1, 1); transform:scale(1, 1); } 50% { -webkit-transform:scale(1, 0.2); transform:scale(1, 0.2); } 90% { -webkit-transform:scale(1, 0.2); transform:scale(1, 0.2); } 100% { -webkit-transform:scale(1, 1); transform:scale(1, 1); } } @keyframes barUp5 { 0% { -webkit-transform:scale(1, 1); transform:scale(1, 1); } 40% { -webkit-transform:scale(1, 1); transform:scale(1, 1); } 50% { -webkit-transform:scale(1, 0.2); transform:scale(1, 0.2); } 90% { -webkit-transform:scale(1, 0.2); transform:scale(1, 0.2); } 100% { -webkit-transform:scale(1, 1); transform:scale(1, 1); } } /*------------------------------------------------------------------ BUTTONS -------------------------------------------------------------------*/ .navbar-default .btn-light { padding:0 20px; margin-left:15px; } .nav-pills, .effect-1:after, .nav-pills > li > a, .global-radius, .btn-brd { -webkit-border-radius:25px 0px 25px 0px; -moz-border-radius:25px 0px 25px 0px; border-radius:25px 0px 25px 0px; } .btn-light { padding:13px 40px; font-size:18px; border:2px solid #fd6802; color:#fff; background-color:#fd6802; } a.btn-light { padding:10px 20px; font-size:16px; border:2px solid #fd6802; color:#fff; background-color:#fd6802; } .btn-dark { padding:13px 40px; font-size:18px; border:1px solid #ececec !important; color:#1f1f1f; background-color:transparent; } .btn-light:hover, .btn-light:focus { border-color:#fd6802; color:rgba(255, 255, 255); background:#393939; } /*------------------------------------------------------------------ inner Page CSS -------------------------------------------------------------------*/ .fixed-menu .navbar-default{ position:fixed; visibility:hidden; left:0px; top:0px; width:100%; padding:0px 0px; background:#fff; z-index:0; transition:all 1s ease-in-out; z-index:999; opacity:1; visibility:visible; -ms-animation-name:fadeInDown; -moz-animation-name:fadeInDown; -op-animation-name:fadeInDown; -webkit-animation-name:fadeInDown; animation-name:fadeInDown; -ms-animation-duration:500ms; -moz-animation-duration:500ms; -op-animation-duration:500ms; -webkit-animation-duration:500ms; animation-duration:500ms; -ms-animation-timing-function:linear; -moz-animation-timing-function:linear; -op-animation-timing-function:linear; -webkit-animation-timing-function:linear; animation-timing-function:linear; -ms-animation-iteration-count:1; -moz-animation-iteration-count:1; -op-animation-iteration-count:1; -webkit-animation-iteration-count:1; animation-iteration-count:1; } .fixed-menu .navbar-default { padding:10px 0px; box-shadow:0 0 8px 0 rgba(0,0,0,.2); } .banner-bg-1{ background:url(uploads/inner-bg.jpg); padding:120px 0; background-clip:initial; background-color:rgba(0, 0, 0, 0); background-origin:initial; background-position:center center; background-repeat:no-repeat; background-size:cover; position:relative; z-index:0; } .banner-bg-1::before{ content:""; display:inline-block; height:100%; left:0; position:absolute; top:0; width:100%; z-index:-1; background:rgba(34, 34, 34, 0.4); } .banner{ position:relative; } .banner h2{ color:#f1f1f1; font-size:45px; font-weight:700; letter-spacing:1px; margin-left:20px; position:relative; } .banner h2::after { background:#fd6802; content:""; height:35px; left:-15px; position:absolute; top:8px; width:6px; } .page-title-link { padding:15px 0; } .page-title-link li{ display:inline-block; position:relative; font-size:1.1em; } .page-title-link li a { color:#218def; letter-spacing:0; margin:0 10px; text-transform:uppercase; font-weight:500; } .page-title-link li a:hover { color:#fd6802; } .page-title-link li::after { background:#fcbf02; bottom:8px; content:""; height:2px; margin-left:-6px; position:absolute; width:15px; } .page-title-link li:last-child::after { content:""; width:0; height:0; } .about-item{ background:#fff; box-shadow:0 5px 10px rgba(0, 0, 0, 0.3); padding-bottom:10px; /*transition:all 1s ease-in-out;*/ margin-bottom:30px; border-radius:5px; } .about-icon{ padding:20px 0 10px 0; /*transition:all 1s ease-in-out;*/ } .about-icon span{ font-size:48px; color:#393939; } .about-text h3{ font-size:22px; font-weight:600; padding:10px 0px; } .about-text h3 a{ color:#393939; } .about-text h3 a:hover{ color:#fd6802; } .about-item:hover .about-icon{ transform:rotate(-360deg); /*transition:all 1s ease-in-out;*/ } .about-item:hover .about-icon span{ color:#fd6802; /*transition:all 1s ease-in-out;*/ } .portfolio-filter ul li .btn-dark.active{ background:#fcbf02; color:#fff; } #test-box .testimonial h3{ color:#fff; } #test-box .testimonial h4{ color:#393939; } :root{ --pricingTable-yellow:#fd6802; --pricingTable-purple:#fd6802; --pricingTable-blue:#fd6802; } .pricingTable{ padding-bottom:10px; background:#fff; border-bottom:15px solid var(--pricingTable-yellow); text-align:center; overflow:hidden; position:relative; transition:all 0.3s ease-in-out; } .pricingTable:hover{ cursor:pointer; box-shadow:0px 2px 30px rgba(0, 0, 0, 0.1); transform:scale(1.04); } .pricingTable:before{ content:""; width:100%; height:350px; background:var(--pricingTable-yellow); position:absolute; top:-150px; left:0; transform:skewY(-20deg); } .pricingTable .pricingTable-header{ padding:20px 20px 60px; text-align:left; position:relative; } .pricingTable .title{ font-size:30px; font-weight:600; color:#fff; text-transform:uppercase; margin:0; } .pricingTable .sub-title{ display:block; font-size:16px; color:#fff; text-transform:uppercase; } .pricingTable .year{ width:80px; height:55px; background:#fff; padding:7px 0; font-size:15px; font-weight:600; font-style:normal; line-height:20px; color:var(--pricingTable-yellow); text-align:center; position:absolute; top:30px; right:20px; z-index:1; } .pricingTable .year:before, .pricingTable .year:after{ content:""; width:57px; height:57px; background:#fff; position:absolute; top:-28px; left:50%; z-index:-1; transform:translateX(-50%) scaleY(0.5) rotate(45deg); } .pricingTable .year:after{ top:auto; bottom:-28px; } .pricingTable .price-value{ display:inline-block; width:170px; height:110px; padding:15px; border:2px solid var(--pricingTable-yellow); border-top:none; border-bottom:none; position:relative; } .pricingTable .price-value:before, .pricingTable .price-value:after{ content:""; width:121px; height:121px; border:3px solid var(--pricingTable-yellow); border-right:none; border-bottom:none; position:absolute; top:-60px; left:50%; transform:translateX(-50%) scaleY(0.5) rotate(45deg); } .pricingTable .price-value:after{ border-top:none; border-left:none; border-bottom:3px solid var(--pricingTable-yellow); border-right:3px solid var(--pricingTable-yellow); top:auto; bottom:-60px; } .pricingTable .value{ width:100%; height:100%; background:#fff; border:2px solid var(--pricingTable-yellow); border-top:none; border-bottom:none; color:var(--pricingTable-yellow); z-index:1; position:relative; } .pricingTable .value:before, .pricingTable .value:after{ content:""; width:97px; height:97px; background:#fff; border:3px solid var(--pricingTable-yellow); border-bottom:none; border-right:none; position:absolute; top:-48px; left:50%; z-index:-1; transform:translateX(-50%) scaleY(0.5) rotate(45deg); } .pricingTable .value:after{ border-right:3px solid var(--pricingTable-yellow); border-bottom:3px solid var(--pricingTable-yellow); border-top:none; border-left:none; top:auto; bottom:-48px; } .pricingTable .currency{ display:inline-block; font-size:30px; margin-top:7px; vertical-align:top; } .pricingTable .amount{ display:inline-block; font-size:40px; font-weight:600; line-height:65px; } .pricingTable .amount span{ display:inline-block; font-size:30px; font-weight:normal; vertical-align:top; margin-top:-7px; } .pricingTable .month{ display:block; font-size:16px; line-height:0; } .pricingTable .pricing-content{ padding:50px 0 0 80px; margin-bottom:20px; list-style:none; text-align:left; transition:all 0.3s ease 0s; } .pricingTable .pricing-content li{ padding:7px 0; font-size:16px; color:#808080; position:relative; } .pricingTable .pricing-content li:before, .pricingTable .pricing-content li.disable:before{ content:"\e963"; font-family:'IcoMoon-Free'; font-weight:900; width:25px; height:25px; line-height:25px; border-radius:50%; background:#98c458; text-align:center; color:#fff; position:absolute; left:-50px; } .pricingTable .pricing-content li.disable:before{ content:"\e95f"; background:#fe6c6c; } .pricingTable .pricingTable-signup{ display:inline-block; padding:0px 20px; height:50px; line-height:50px; font-size:22px; font-weight:700; color:var(--pricingTable-yellow); text-transform:capitalize; border:2px solid var(--pricingTable-yellow); margin:0 auto 10px; position:relative; transition:all 0.3s ease 0s; } .pricingTable .pricingTable-signup:hover{ background:var(--pricingTable-yellow); color:#fff; } .pricingTable.purple{ border-bottom-color:var(--pricingTable-purple); } .pricingTable.purple:before{ background:var(--pricingTable-purple); } .pricingTable.purple .year{ color:var(--pricingTable-purple); } .pricingTable.purple .price-value{ border-left-color:var(--pricingTable-purple); border-right-color:var(--pricingTable-purple); } .pricingTable.purple .price-value:before{ border-left-color:var(--pricingTable-purple); border-top-color:var(--pricingTable-purple); } .pricingTable.purple .price-value:after{ border-right-color:var(--pricingTable-purple); border-bottom-color:var(--pricingTable-purple); } .pricingTable.purple .value{ border-left-color:var(--pricingTable-purple); border-right-color:var(--pricingTable-purple); color:var(--pricingTable-purple); } .pricingTable.purple .value:before{ border-left-color:var(--pricingTable-purple); border-top-color:var(--pricingTable-purple); } .pricingTable.purple .value:after{ border-right-color:var(--pricingTable-purple); border-bottom-color:var(--pricingTable-purple); } .pricingTable.purple .pricingTable-signup{ color:var(--pricingTable-purple); border-color:var(--pricingTable-purple); } .pricingTable.purple .pricingTable-signup:hover{ color:#fff; background:var(--pricingTable-purple); } .pricingTable.blue{ border-bottom-color:var(--pricingTable-blue); } .pricingTable.blue:before{ background:var(--pricingTable-blue); } .pricingTable.blue .year{ color:var(--pricingTable-blue); } .pricingTable.blue .price-value{ border-left-color:var(--pricingTable-blue); border-right-color:var(--pricingTable-blue); } .pricingTable.blue .price-value:before{ border-left-color:var(--pricingTable-blue); border-top-color:var(--pricingTable-blue); } .pricingTable.blue .price-value:after{ border-right-color:var(--pricingTable-blue); border-bottom-color:var(--pricingTable-blue); } .pricingTable.blue .value{ border-left-color:var(--pricingTable-blue); border-right-color:var(--pricingTable-blue); color:var(--pricingTable-blue); } .pricingTable.blue .value:before{ border-left-color:var(--pricingTable-blue); border-top-color:var(--pricingTable-blue); } .pricingTable.blue .value:after{ border-right-color:var(--pricingTable-blue); border-bottom-color:var(--pricingTable-blue); } .pricingTable.blue .pricingTable-signup{ color:var(--pricingTable-blue); border-color:var(--pricingTable-blue); } .pricingTable.blue .pricingTable-signup:hover{ color:#fff; background:var(--pricingTable-blue); } @media only screen and (max-width:990px){ .pricingTable{ margin-bottom:30px; } } @media only screen and (max-width:767px){ .pricingTable:before{ transform:skewY(-15deg); } .pricingTable .title{ font-size:22px; } } .pd-add{ padding:70px 0px; } .address-item{ float:left; margin:0 11px; padding:0px 15px; width:31%; box-shadow:0 5px 14px rgba(0, 0, 0, 0.1); } .address-icon{ padding:15px 0px; } .address-icon i{ font-size:38px; color:#393939; } .address-item h3{ font-size:28px; font-weight:600; color:#fd6802; } .dmtop.show { bottom:10px; } a.navbar-brand .logo-pic { max-width:280px; } .fixed-menu a.navbar-brand .logo-pic { max-width:240px; }