responsive.css (38871B)
1 /* Medium Layout: 1200px. */ 2 @media only screen and (min-width: 1590px) and (max-width: 1700px){ 3 .appside-header-09-shape-image { 4 left: 10%; 5 } 6 } 7 @media only screen and (min-width: 1400px) and (max-width: 1500px){ 8 .appside-header-09-shape-image { 9 left: 20%; 10 } 11 } 12 @media only screen and (min-width: 1201px) and (max-width: 1366px){ 13 .header-area .header-right-image { 14 right: 0%; 15 } 16 .team-member-area .bg-shape-3 { 17 right: -10%; 18 } 19 .screeshort-carousel-wrap-02 .mobile-cover{ 20 display: none; 21 } 22 .customer-reply-area .right-image { 23 position: absolute; 24 right: -20%; 25 top: 0; 26 } 27 .appside-header-09-shape-image { 28 left: 24%; 29 } 30 } 31 @media only screen and (min-width: 1100px) and (max-width: 1200px){ 32 .appside-header-09-shape-image { 33 left: 30%; 34 } 35 } 36 37 @media only screen and (min-width: 992px) and (max-width: 1200px) { 38 .navbar-area .navbar-collapse .navbar-nav .nav-item { 39 display: inline-block; 40 font-size: 14px; 41 line-height: 45px; 42 text-transform: uppercase; 43 font-weight: 700; 44 padding: 20px 5px; 45 position: relative; 46 } 47 .header-area .header-right-image { 48 right: -15%; 49 } 50 .team-member-area .bg-shape-3 { 51 right: -40%; 52 } 53 .header-area.header-bg { 54 background-position: left top; 55 } 56 .header-area .header-inner .title { 57 font-size: 55px; 58 } 59 .video-area .right-content-area { 60 margin-top: 0px; 61 } 62 .single-why-us-item.margin-top-60 { 63 margin-top: 0; 64 } 65 .widget_popular_posts .single-popular-post-item .content .title { 66 font-size: 16px; 67 line-height: 26px; 68 } 69 .screenshort-area .shape-1, 70 .screenshort-area .shape-2, 71 .testimonial-area .shape-1, 72 .testimonial-area .shape-2, 73 .how-it-work-area .shape-1, 74 .how-it-work-area .shape-2, 75 .how-it-work-area .shape-3, 76 .how-it-work-area .shape-4, 77 .header-area .shape-1, 78 .header-area .shape-2, 79 .header-area .shape-3, 80 .header-area.dark-home-1 .shape-4, 81 .about-us-area .shape-1, 82 .about-us-area .shape-2, 83 .header-area.dark-home-2 .shape-4{ 84 display: none; 85 } 86 .screeshort-carousel-wrap-02 .mobile-cover{ 87 display: none; 88 } 89 .customer-reply-area .right-image { 90 position: absolute; 91 right: -40%; 92 top: 0; 93 } 94 .call-to-action-inner-style-02 .title { 95 font-size: 40px; 96 line-height: 60px; 97 } 98 .header-area.style-11 .header-inner .title, 99 .header-area.style-10 .header-inner .title , 100 .header-area.style-09 .header-inner .title{ 101 color: #fff; 102 font-size: 55px; 103 line-height: 68px; 104 } 105 .section-title .title, 106 .contact-area-wrapper .title , 107 .price-plan-left-content .section-title .title{ 108 font-size: 40px; 109 line-height: 58px; 110 } 111 .section-title .subtitle { 112 font-size: 18px; 113 line-height: 30px; 114 } 115 .full-width-area-feature-wrap .right-content-area .title { 116 font-size: 42px; 117 } 118 .feature-list-04 .single-feature-list-item-04 .content .title{ 119 font-size: 24px; 120 } 121 } 122 123 124 /* Tablet Layout: 768px. */ 125 126 @media only screen and (min-width: 768px) and (max-width: 991px) { 127 128 .navbar-area .navbar-collapse { 129 position: absolute; 130 top: 100%; 131 background: #fff; 132 z-index: 9; 133 right: 14%; 134 width: 100%; 135 padding-left: 20px; 136 margin-top: 10px; 137 box-shadow: 0 0 25px 0 rgba(0,0,0,.08); 138 } 139 .navbar-area.navbar.navbar-light .navbar-toggler { 140 background: #fff; 141 } 142 .navbar-area .navbar-collapse .navbar-nav .nav-item .nav-link.pl-0 { 143 padding-left: 0.4rem !important; 144 } 145 .navbar-area .navbar-collapse .navbar-nav .nav-item { 146 padding: 0; 147 } 148 .dropdown-item { 149 background: #fff; 150 color: #fff; 151 } 152 .navbar-area { 153 padding: 20px; 154 } 155 .navbar-area .navbar-collapse .navbar-nav .nav-item .dropdown-menu.show, 156 .navbar-area .navbar-collapse .navbar-nav .nav-item:hover .dropdown-menu { 157 border: none; 158 } 159 .header-area .right-content-area { 160 display: none; 161 } 162 .navbar-area .navbar-collapse .navbar-nav .nav-item{ 163 line-height: 40px; 164 } 165 .navbar-area .navbar-collapse .navbar-nav .nav-item .nav-link, 166 .navbar-area .navbar-collapse .navbar-nav .nav-item.show .nav-link { 167 color: #8e96a0; 168 } 169 170 .navbar-area .navbar-collapse .navbar-nav .nav-item.active .nav-link{ 171 color: #5254F9; 172 } 173 .navbar-area .navbar-collapse .navbar-nav .nav-item.navbar-btn-wrapper { 174 padding-top: 0; 175 } 176 177 .navbar-area .navbar-collapse .navbar-nav .nav-item .nav-link.boxed-btn { 178 width: auto; 179 height: auto; 180 color: #8e96a0; 181 font-size: 14px; 182 } 183 .navbar-area .navbar-collapse .navbar-nav .nav-item:hover .nav-link{ 184 color: #8e96a0; 185 } 186 .navbar-area .navbar-collapse .navbar-nav .nav-item .dropdown-menu { 187 height: 0; 188 overflow: hidden; 189 transition: height .3s ease-in; 190 } 191 192 .navbar-area .navbar-collapse .navbar-nav .nav-item.show .dropdown-menu { 193 height: fit-content; 194 } 195 196 .header-area .header-right-image { 197 display: none; 198 } 199 .header-area.header-bg { 200 background-position: left top; 201 } 202 .header-area .header-inner p{ 203 color: #444; 204 } 205 .header-area { 206 border-bottom: 1px solid #ededed; 207 } 208 .about-us-area.style-two .feature-list .single-feature-list{ 209 width: calc(50% - 30px); 210 margin: 0 15px; 211 margin-bottom: 30px; 212 } 213 .about-us-area.style-two { 214 padding-bottom: 70px; 215 } 216 .feature-list .single-feature-list{ 217 width: calc(50% - 30px); 218 border: 1px solid #ededed; 219 margin: 0 15px; 220 margin-bottom: 30px; 221 } 222 .feature-list .single-feature-list:last-child { 223 border-right: 1px solid #ededed; 224 } 225 .feature-list{ 226 flex-wrap: wrap; 227 border: none; 228 } 229 .about-us-area .btn-wrapper { 230 margin-top: 30px; 231 } 232 .single-counter-item{ 233 margin-bottom: 30px; 234 } 235 .counterup-area { 236 padding: 100px 0 90px 0; 237 } 238 .single-why-us-item.margin-top-60{ 239 margin-top: 0px; 240 } 241 .why-choose-area .center-image { 242 margin-bottom: 60px; 243 } 244 .how-it-works-tab-content .right-content-area { 245 margin-top: 20px; 246 } 247 .single-testimonial-item .hover { 248 right: -30px; 249 top: auto; 250 bottom: 0; 251 } 252 .single-testimonial-item .hover .hover-inner { 253 padding: 50px 30px 43px 30px; 254 } 255 .single-testimonial-item .hover .hover-inner p { 256 font-size: 18px; 257 line-height: 28px; 258 } 259 .single-price-plan-01{ 260 margin-bottom: 30px; 261 } 262 .pricing-plan-area{ 263 padding-bottom: 90px; 264 } 265 .download-area-wrapper { 266 padding: 93px 60px 100px 60px; 267 } 268 .download-area-wrapper .btn-wrapper .boxed-btn { 269 margin: 0 5px; 270 width: 170px; 271 } 272 .team-member-area .bg-shape-3 { 273 right: -50%; 274 bottom: 17%; 275 } 276 .footer-widget { 277 margin-bottom: 30px; 278 } 279 .footer-top { 280 padding-bottom: 70px; 281 } 282 .header-area.header-bg-2 { 283 background-position: left top; 284 } 285 .video-area.style-two:after { 286 display: none; 287 } 288 .video-area.style-two { 289 background-color: #f6f2fd; 290 } 291 .sidebar { 292 margin-top: 60px; 293 } 294 .widget_popular_posts .single-popular-post-item { 295 margin-bottom: 20px; 296 } 297 .header-form-area .header-form-inner{ 298 margin-top: 40px; 299 } 300 /* new */ 301 .screeshort-carousel-wrap-02 .mobile-cover{ 302 display: none; 303 } 304 .customer-reply-area .right-image { 305 position: absolute; 306 right: -40%; 307 top: 0; 308 } 309 .call-to-action-inner-style-02 .title , 310 .connect-area .right-content-area .title{ 311 font-size: 40px; 312 line-height: 60px; 313 } 314 .header-area.style-11 .header-inner .title, 315 .header-area.style-10 .header-inner .title , 316 .header-area.style-09 .header-inner .title, 317 .appside-header-09 .header-inner .title{ 318 color: #fff; 319 font-size: 55px; 320 line-height: 68px; 321 text-align: center; 322 } 323 .header-area.style-09 .header-inner .btn-wrapper, 324 .header-area.style-10 .header-inner .btn-wrapper , 325 .header-area.style-11 .header-inner .btn-wrapper { 326 text-align: center; 327 } 328 .header-area.style-09 .header-inner p, 329 .header-area.style-11 .header-inner p, 330 .header-area.style-10 .header-inner p { 331 margin: 0 auto; 332 } 333 .section-title .title, 334 .contact-area-wrapper .title { 335 font-size: 40px; 336 line-height: 58px; 337 } 338 .section-title .subtitle { 339 font-size: 18px; 340 line-height: 30px; 341 } 342 .full-width-area-feature-wrap .right-content-area .title { 343 font-size: 42px; 344 } 345 .feature-list-04 .single-feature-list-item-04 .content .title{ 346 font-size: 24px; 347 } 348 .header-area.style-09 .right-img { 349 text-align: center; 350 margin-top: 60px; 351 } 352 .single-counterup-style-02 { 353 text-align: center; 354 margin-bottom: 30px; 355 } 356 .margin-top-minus-290{ 357 margin-top: 0px; 358 } 359 .about-app-area .img-wrapper { 360 display: none; 361 } 362 .full-width-feature-style-03 .img-wrapper { 363 margin-bottom: 40px; 364 } 365 .navbar-area .nav-right-content, 366 .navbar-area.header-style-09 .nav-container .nav-right-content ul li .boxed-btn, 367 .contact-form-area-02 .img-wrapper{ 368 display: none; 369 } 370 371 .responsive-mobile-menu { 372 display: block; 373 width: 100%; 374 position:relative; 375 } 376 377 .responsive-mobile-menu .navbar-toggler { 378 float: right; 379 margin-top: 12px; 380 } 381 382 .responsive-mobile-menu .logo-wrapper { 383 display: inline-block; 384 } 385 .navbar-area.header-style-09 .navbar-collapse{ 386 right: 0; 387 } 388 .navbar-area.white.header-style-09 .nav-container .navbar-collapse .navbar-nav li a { 389 color: var(--paragraph-color); 390 } 391 .full-width-feature-area-03 { 392 padding-bottom: 70px; 393 } 394 .single-price-plan-02{ 395 margin-bottom: 30px; 396 } 397 .header-area.style-11 .right-img , 398 .header-area.style-10 .right-img { 399 text-align: center; 400 margin-top: 40px; 401 } 402 403 .full-width-feature-area-04 .img-wrapper { 404 margin-bottom: 40px; 405 } 406 .connect-area .right-content-area { 407 margin-top: 40px; 408 } 409 .customer-reply-area .right-image, 410 .navbar-area.header-style-12 .nav-container .nav-right-content ul li{ 411 display: none; 412 } 413 .header-area.style-12 .header-inner .title { 414 font-size: 50px; 415 line-height: 60px; 416 } 417 .single-feature-item-02 { 418 margin-bottom: 30px; 419 } 420 .navbar-area.white .nav-container .navbar-collapse .navbar-nav li a { 421 color: var(--paragraph-color); 422 } 423 .navbar-area.white .nav-container .navbar-collapse .navbar-nav li.current-menu-item a { 424 color: var(--main-color-one); 425 } 426 .navbar-area .navbar-collapse{ 427 right: 0; 428 } 429 .appside-header-09-shape-image { 430 display: none; 431 } 432 .appside-header-09 .img-wrapper { 433 margin-top: 40px; 434 text-align: center; 435 } 436 437 .appside-header-09 .header-inner p { 438 text-align: center; 439 } 440 441 .appside-header-09 .header-inner .btn-wrapper { 442 margin: 0 auto; 443 margin-top: 30px; 444 } 445 .icon-box-list li { 446 max-width: 130px; 447 } 448 .price-plan-tab-nav { 449 margin-bottom: 60px; 450 } 451 .feature-list.appside_feature_box_one{ 452 border: none; 453 } 454 } 455 456 /* Tablet Layout wide: 768px. */ 457 458 @media only screen and (max-width: 767px) { 459 460 .navbar-light .navbar-toggler { 461 background-color: #fff; 462 } 463 .navbar-area .responsive-mobile-menu { 464 padding: 20px; 465 } 466 .navbar-area .navbar-collapse { 467 position: absolute; 468 top: 105px; 469 background: #fff; 470 z-index: 9; 471 right: 0; 472 width: 100%; 473 padding-left: 20px; 474 } 475 .navbar-area.navbar.navbar-light .navbar-toggler { 476 background: #fff; 477 } 478 .navbar-area .navbar-collapse .navbar-nav .nav-item .nav-link.pl-0 { 479 padding-left: 0.4rem !important; 480 } 481 .navbar-area .navbar-collapse .navbar-nav .nav-item { 482 padding: 0; 483 } 484 .dropdown-item { 485 background: #fff; 486 color: #fff; 487 } 488 489 .navbar-area .navbar-collapse .navbar-nav .nav-item .dropdown-menu.show, 490 .navbar-area .navbar-collapse .navbar-nav .nav-item:hover .dropdown-menu { 491 border: none; 492 } 493 .navbar-area .navbar-collapse .navbar-nav .nav-item .nav-link{ 494 line-height: 35px; 495 } 496 .navbar-area .navbar-collapse .navbar-nav .nav-item .nav-link, 497 .navbar-area .navbar-collapse .navbar-nav .nav-item.show .nav-link { 498 color: #8e96a0; 499 } 500 .navbar-area .navbar-collapse .navbar-nav .nav-item.active .nav-link{ 501 color: #5254F9; 502 } 503 .navbar-area .navbar-collapse .navbar-nav .nav-item.navbar-btn-wrapper { 504 padding-top: 0; 505 } 506 507 .navbar-area .navbar-collapse .navbar-nav .nav-item .nav-link.boxed-btn { 508 width: auto; 509 height: auto; 510 color: #8e96a0; 511 } 512 .navbar-area .navbar-collapse .navbar-nav .nav-item .dropdown-menu { 513 height: 0; 514 overflow: hidden; 515 transition: height .3s ease-in; 516 } 517 518 .navbar-area .navbar-collapse .navbar-nav .nav-item.show .dropdown-menu { 519 height: fit-content; 520 } 521 .navbar-area .navbar-collapse .navbar-nav .nav-item:hover .nav-link{ 522 color: #8e96a0; 523 } 524 .navbar-area .navbar-collapse .navbar-nav .nav-item.navbar-btn-wrapper { 525 padding-top: 0; 526 } 527 528 .navbar-area .navbar-collapse .navbar-nav .nav-item .nav-link.boxed-btn { 529 width: auto; 530 height: auto; 531 color: #8e96a0; 532 font-size: 14px; 533 } 534 535 .navbar-area .container { 536 position: relative; 537 } 538 .header-area.header-bg { 539 background-position: left top; 540 } 541 .header-area .header-right-image{ 542 display: none; 543 } 544 .header-area { 545 border-bottom: 1px solid #e2e2e2; 546 } 547 .header-area .header-inner .title { 548 font-size: 50px; 549 line-height: 60px; 550 } 551 .header-area .header-inner p { 552 color: #444; 553 } 554 .section-title .title, 555 .video-area .right-content-area .title, 556 .download-area-wrapper .title , 557 .contact-area-wrapper .title, 558 .price-plan-left-content .section-title .title{ 559 font-size: 38px; 560 line-height: 48px; 561 } 562 .section-title .subtitle, 563 .video-area .right-content-area .subtitle, 564 .download-area-wrapper .subtitle, 565 .contact-area-wrapper .subtitle { 566 font-size: 18px; 567 line-height: 28px; 568 } 569 .feature-list{ 570 flex-wrap: wrap; 571 border: none; 572 } 573 .feature-list .single-feature-list { 574 border: 2px solid #ededed; 575 margin-bottom: 30px; 576 } 577 .feature-list .single-feature-list:last-child{ 578 margin-bottom: 0; 579 } 580 .about-us-area .btn-wrapper .boxed-btn{ 581 margin-bottom: 10px; 582 } 583 .about-us-area{ 584 padding-bottom: 110px; 585 } 586 .single-counter-item { 587 text-align: center; 588 width: 100%; 589 justify-content: center; 590 margin-bottom: 30px; 591 } 592 .counterup-area, 593 .why-choose-area, 594 .pricing-plan-area{ 595 padding-bottom: 90px; 596 } 597 .single-why-us-item.margin-top-60{ 598 margin-top: 0px; 599 } 600 .why-choose-area .center-image { 601 margin-bottom: 30px; 602 } 603 .how-it-work-tab-nav .nav-tabs .nav-item .nav-link{ 604 margin-bottom: 30px; 605 } 606 .how-it-work-tab-nav .nav-tabs .nav-item{ 607 border-right: none; 608 } 609 .how-it-works-tab-content .right-content-area { 610 margin-top: 30px; 611 } 612 .single-price-plan-01{ 613 margin-bottom: 30px; 614 } 615 .download-area-wrapper { 616 padding: 93px 40px 80px 40px; 617 } 618 .download-area-wrapper .btn-wrapper .boxed-btn { 619 width: 160px; 620 margin-bottom: 20px; 621 } 622 .team-member-area .bg-shape-3 { 623 display: none; 624 } 625 .footer-widget { 626 margin-bottom: 30px; 627 } 628 .footer-top{ 629 padding-bottom: 65px; 630 } 631 .single-testimonial-item .hover .hover-inner { 632 text-align: center; 633 padding: 50px 30px 0px 30px; 634 } 635 .single-testimonial-item .hover { 636 position: absolute; 637 right: 0; 638 bottom: 0; 639 width: 100%; 640 margin-right: 0; 641 transform: none; 642 top: auto; 643 } 644 .single-testimonial-item .hover .hover-inner p { 645 font-size: 18px; 646 line-height: 28px; 647 } 648 .testimonial-area{ 649 padding-bottom: 110px; 650 } 651 .about-us-area.style-two .section-title{ 652 padding-right: 0; 653 } 654 .single-blog-grid-item .thumb img{ 655 width: 100%; 656 } 657 .widget-area{ 658 margin-top: 60px; 659 } 660 .header-form-area .header-form-inner{ 661 margin-top: 60px; 662 } 663 /* new css */ 664 .navbar-area .nav-right-content, 665 .navbar-area.header-style-12 .nav-right-content, 666 .navbar-area.header-style-09 .nav-right-content 667 { 668 display: none; 669 } 670 671 .navbar-area .responsive-mobile-menu, 672 .navbar-area.header-style-12 .responsive-mobile-menu, 673 .navbar-area.header-style-09 .responsive-mobile-menu 674 { 675 display: block; 676 width: 100%; 677 } 678 679 .navbar-area .responsive-mobile-menu .logo-wrapper, 680 .navbar-area.header-style-12 .responsive-mobile-menu .logo-wrapper, 681 .navbar-area.header-style-09 .responsive-mobile-menu .logo-wrapper 682 { 683 display: inline-block; 684 } 685 686 .navbar-area .responsive-mobile-menu .navbar-toggler, 687 .navbar-area.header-style-12 .responsive-mobile-menu .navbar-toggler, 688 .navbar-area.header-style-09 .responsive-mobile-menu .navbar-toggler 689 { 690 float: right; 691 margin-top: 12px; 692 } 693 .header-area.style-11 .header-inner .btn-wrapper , 694 .header-area.style-10 .header-inner .btn-wrapper , 695 .header-area.style-09 .header-inner .btn-wrapper { 696 text-align: center; 697 } 698 .header-area.style-11 .header-inner p , 699 .header-area.style-10 .header-inner p , 700 .header-area.style-09 .header-inner p { 701 margin: 0 auto; 702 text-align: center; 703 } 704 .header-area.style-11 .header-inner .title , 705 .header-area.style-10 .header-inner .title , 706 .header-area.style-09 .header-inner .title , 707 .appside-header-09 .header-inner .title{ 708 text-align: center; 709 font-size: 50px; 710 line-height: 60px; 711 } 712 .header-area.style-11 .right-img , 713 .header-area.style-10 .right-img , 714 .header-area.style-09 .right-img 715 { 716 margin-top: 40px; 717 text-align: center; 718 } 719 .single-counterup-style-02{ 720 margin-bottom: 30px; 721 } 722 .full-width-video-area.margin-top-minus-290{ 723 margin-top: 0px; 724 } 725 .about-app-area .img-wrapper{ 726 margin-bottom: 30px; 727 } 728 .full-width-feature-style-03 .img-wrapper { 729 margin-bottom: 40px; 730 } 731 .screeshort-carousel-wrap-02 .mobile-cover{ 732 display: none; 733 } 734 .single-price-plan-02{ 735 margin-bottom: 30px; 736 } 737 .contact-form-area-02 .img-wrapper{ 738 display: none; 739 } 740 .call-to-action-inner-style-02 .title { 741 font-size: 30px; 742 line-height: 46px; 743 } 744 .navbar-area.white.header-style-09 .nav-container .navbar-collapse .navbar-nav li a { 745 color: var(--paragraph-color); 746 } 747 .single-discover-item{ 748 margin-bottom: 30px; 749 } 750 .full-width-feature-area-04 .img-wrapper { 751 margin-top: 0px; 752 margin-bottom: 40px; 753 } 754 .full-width-feature-area-04 .right-content-area .title { 755 font-size: 42px; 756 line-height: 52px; 757 } 758 .feature-list-04 .single-feature-list-item-04 .content .title{ 759 font-size: 24px; 760 } 761 .full-width-feature-area-03.has-video-with-img { 762 padding-bottom: 80px; 763 } 764 .connect-area .right-content-area .title { 765 font-size: 40px; 766 line-height: 55px; 767 } 768 769 .connect-area .right-content-area { 770 margin-top: 40px; 771 } 772 .customer-reply-area .right-image{ 773 display: none; 774 } 775 .video-play-area.margin-minus { 776 margin-bottom: -100px; 777 } 778 .testimonial-area-three.mirgin-minus { 779 padding-top: 210px; 780 } 781 .header-area.style-12 .header-inner .title { 782 font-size: 50px; 783 line-height: 60px; 784 } 785 .single-feature-item-02{ 786 margin-bottom: 30px; 787 } 788 .full-width-feature-style-03.bg-cover.padding-top-120 { 789 padding-top: 60px; 790 } 791 .appside-header-09-shape-image { 792 display: none; 793 } 794 .icon-box-list li { 795 max-width: 130px; 796 } 797 .price-plan-tab-nav { 798 margin-bottom: 60px; 799 } 800 .feature-list.appside_feature_box_one{ 801 border: none; 802 } 803 .feature-list.appside_feature_box_one .single-feature-list{ 804 border-right: none; 805 } 806 .feature-list.appside_feature_box_one .single-feature-list:last-child { 807 border-right: 2px solid #ededed; 808 } 809 810 } 811 812 @media only screen and (min-width:500px) and (max-width: 770px){ 813 .appside-header-09 .img-wrapper { 814 margin-top: 40px; 815 text-align: center; 816 } 817 818 .appside-header-09 .header-inner p { 819 text-align: center; 820 } 821 822 .appside-header-09 .header-inner .btn-wrapper { 823 margin: 0 auto; 824 margin-top: 30px; 825 } 826 } 827 828 /* medium tablet layout 599px */ 829 830 @media only screen and (max-width: 510px) { 831 832 .navbar-area .navbar-collapse { 833 top: 105px; 834 right: 0; 835 } 836 837 .breadcrumb-area .page-title { 838 font-size: 40px; 839 line-height: 50px; 840 } 841 .header-area .header-inner .title { 842 font-size: 45px; 843 line-height: 55px; 844 } 845 .header-area .header-inner p { 846 font-size: 18px; 847 line-height: 30px; 848 } 849 .section-title .title, 850 .video-area .right-content-area .title, 851 .download-area-wrapper .title, 852 .contact-area-wrapper .title, 853 .price-plan-left-content .section-title .title { 854 font-size: 34px; 855 line-height: 44px; 856 } 857 .single-team-member { 858 text-align: center; 859 display: block; 860 } 861 .download-area-wrapper .btn-wrapper .boxed-btn { 862 margin: 0 5px; 863 } 864 .single-counter-item .icon { 865 font-size: 60px; 866 line-height: 70px; 867 } 868 .counterup-area { 869 padding-bottom: 70px; 870 } 871 .download-area-wrapper .btn-wrapper .boxed-btn { 872 margin: 0 5px; 873 margin-bottom: 10px; 874 } 875 .download-area-wrapper { 876 padding-bottom: 110px; 877 } 878 .section-title .subtitle, 879 .video-area .right-content-area .subtitle, 880 .download-area-wrapper .subtitle, 881 .contact-area-wrapper .subtitle { 882 font-size: 16px; 883 line-height: 26px; 884 } 885 .single-why-us-item .content .title{ 886 font-weight: 600; 887 } 888 .single-price-plan-01 .price-header .price-wrap .price { 889 font-size: 35px; 890 line-height: 45px; 891 } 892 .copyright-inner .left-content-area { 893 display: block; 894 text-align: center; 895 margin-bottom: 10px; 896 } 897 898 .copyright-inner .right-content-area { 899 display: block; 900 text-align: center; 901 float: none; 902 } 903 .navbar-area.nav-fixed.style-two .navbar-collapse .navbar-nav .nav-item.active .nav-link, 904 .navbar-area.nav-fixed.style-two .navbar-collapse .navbar-nav .nav-item:hover .nav-link { 905 color: #333; 906 } 907 .navbar-area.nav-fixed.style-two .navbar-collapse .navbar-nav .nav-item .nav-link { 908 color: #777; 909 } 910 .navbar-area.nav-fixed.style-two .navbar-collapse .navbar-nav .nav-item .nav-link.boxed-btn{ 911 border: none; 912 } 913 .about-us-area.style-two{ 914 padding-bottom: 0; 915 } 916 .about-us-area.style-two .feature-list .single-feature-list { 917 margin-bottom: 20px; 918 width: 100%; 919 border: none; 920 padding: 0 20px; 921 text-align: left; 922 } 923 .about-us-area.style-two .feature-list .single-feature-list:last-child{ 924 margin-bottom: 0; 925 } 926 .video-area.style-two{ 927 padding-top: 96px; 928 } 929 .breadcrumb-area .page-title { 930 font-size: 35px; 931 line-height: 45px; 932 margin-bottom: 15px; 933 font-weight: 600; 934 } 935 .single-post-details-item .entry-content .title { 936 font-size: 26px; 937 line-height: 36px; 938 font-weight: 600; 939 margin-bottom: 15px; 940 } 941 .widget_popular_posts .single-popular-post-item .content .time { 942 font-size: 14px; 943 line-height: 24px; 944 } 945 .header-area.style-12 .header-inner .title { 946 font-size: 45px; 947 line-height: 55px; 948 } 949 .single-testimonial-item-02 .img-wrapper .bg-image { 950 display: block; 951 min-height: 350px; 952 } 953 954 .single-testimonial-item-02 { 955 display: block; 956 } 957 958 .single-testimonial-item-02 .img-wrapper { 959 width: 100%; 960 min-height: 260px; 961 } 962 963 .single-testimonial-item-02 .content-area { 964 width: 100%; 965 padding: 40px; 966 } 967 .connect-area .right-content-area .title { 968 font-size: 36px; 969 line-height: 55px; 970 } 971 .full-width-feature-area-04 .right-content-area .title { 972 font-size: 36px; 973 line-height: 48px; 974 } 975 .appside-header-09 .img-wrapper { 976 margin-top: 40px; 977 text-align: center; 978 } 979 980 .appside-header-09 .header-inner p { 981 text-align: center; 982 } 983 984 .appside-header-09 .header-inner .btn-wrapper { 985 margin: 0 auto; 986 margin-top: 30px; 987 } 988 .appside-button-group .boxed_img_btn img { 989 max-width: 160px; 990 } 991 .appside-header-09 .header-inner .btn-wrapper .boxed_img_btn img { 992 max-width: 160px; 993 } 994 } 995 996 @media only screen and (max-width: 450px) { 997 .header-area .header-inner .title { 998 font-size: 40px; 999 line-height: 50px; 1000 } 1001 .section-title .title, 1002 .video-area .right-content-area .title, 1003 .download-area-wrapper .title, 1004 .contact-area-wrapper .title { 1005 font-size: 32px; 1006 line-height: 44px; 1007 } 1008 .comment-area .comment-list li .single-comment-wrap .content .title { 1009 font-weight: 600; 1010 } 1011 .header-area.style-11 .header-inner .title, 1012 .header-area.style-10 .header-inner .title, 1013 .header-area.style-09 .header-inner .title , 1014 .appside-header-09 .header-inner .title{ 1015 text-align: center; 1016 font-size: 42px; 1017 line-height: 52px; 1018 } 1019 .header-area.style-11 .header-inner p, 1020 .header-area.style-10 .header-inner p, 1021 .header-area.style-09 .header-inner p { 1022 font-size: 16px; 1023 } 1024 .full-width-feature-area-04 .right-content-area .title , 1025 .connect-area .right-content-area .title{ 1026 font-size: 32px; 1027 line-height: 48px; 1028 } 1029 .feature-list-04 .single-feature-list-item-04 .content .title { 1030 font-size: 22px; 1031 } 1032 } 1033 1034 /* mobile tablet layout 414px */ 1035 1036 @media only screen and (max-width: 414px) { 1037 .header-area { 1038 padding: 260px 0 155px 0; 1039 } 1040 .header-area .header-inner .title { 1041 font-size: 38px; 1042 line-height: 48px; 1043 } 1044 .header-area .header-inner .btn-wrapper .boxed-btn { 1045 margin: 0 5px; 1046 width: 160px; 1047 } 1048 .img-with-video .img-wrap .hover .video-play-btn { 1049 color: #500ade; 1050 width: 80px; 1051 height: 80px; 1052 line-height: 80px; 1053 } 1054 .img-with-video .img-wrap .hover .video-play-btn:before { 1055 width: 90px; 1056 height: 90px; 1057 } 1058 .single-counter-item .icon { 1059 font-size: 50px; 1060 line-height: 60px; 1061 } 1062 1063 .single-testimonial-item { 1064 margin-top: 50px; 1065 } 1066 .single-testimonial-item .hover .hover-inner p { 1067 font-size: 18px; 1068 line-height: 32px; 1069 } 1070 .single-testimonial-item .hover .hover-inner { 1071 text-align: center; 1072 padding: 40px 30px 0px 30px; 1073 } 1074 .footer-widget .widget-title { 1075 font-weight: 600; 1076 } 1077 .breadcrumb-area { 1078 padding: 200px 0 100px 0; 1079 } 1080 .breadcrumb-area.extra { 1081 padding-top: 200px; 1082 } 1083 .navbar-area.nav-fixed .navbar-collapse .navbar-nav .nav-item .nav-link.boxed-btn{ 1084 border:none; 1085 } 1086 .header-area.style-12 .header-inner .title { 1087 font-size: 42px; 1088 line-height: 50px; 1089 } 1090 .single-amazing-feature-01 .content .title { 1091 font-size: 22px; 1092 line-height: 30px; 1093 } 1094 .single-price-plan-02 .price-header .price-wrap .price { 1095 font-size: 40px; 1096 line-height: 50px; 1097 } 1098 .appside-header-09 .header-inner p { 1099 font-size: 16px; 1100 line-height: 28px; 1101 } 1102 .single-counterup-style-03 .count-wrap { 1103 font-size: 55px; 1104 line-height: 65px; 1105 } 1106 .appside-button-group .boxed-btn-02+.boxed-btn-02 { 1107 margin-left: 0; 1108 margin-top: 20px; 1109 } 1110 .btn-wrapper .boxed-btn + .boxed-btn{ 1111 margin-left: 0px; 1112 margin-top: 10px; 1113 } 1114 .single-blog-classic-item .content .post-meta li { 1115 margin-right: 10px; 1116 } 1117 .single-blog-classic-item .content .post-meta li:last-child { 1118 margin-left: 0; 1119 } 1120 } 1121 1122 1123 /* mobile tablet layout 375px */ 1124 1125 @media only screen and (max-width: 384px) { 1126 .navbar-light .navbar-brand { 1127 margin-right: 0; 1128 } 1129 .header-area .header-inner .btn-wrapper .boxed-btn { 1130 margin: 0 5px; 1131 width: 155px; 1132 } 1133 .header-area .header-inner .title { 1134 font-size: 35px; 1135 line-height: 46px; 1136 } 1137 .section-title .title, 1138 .video-area .right-content-area .title, 1139 .download-area-wrapper .title, 1140 .contact-area-wrapper .title { 1141 font-size: 29px; 1142 line-height: 40px; 1143 } 1144 .single-post-details-item .entry-footer .right { 1145 display: block; 1146 float: none; 1147 margin-top: 15px; 1148 } 1149 .comment-area .comment-list li ul li { 1150 margin-left: 30px; 1151 list-style-type: none; 1152 list-style: none; 1153 } 1154 .single-post-details-item .entry-content .title { 1155 font-size: 24px; 1156 line-height: 34px; 1157 font-weight: 600; 1158 margin-bottom: 15px; 1159 } 1160 .breadcrumb-area .page-navigation { 1161 font-size: 16px; 1162 line-height: 20px; 1163 } 1164 .breadcrumb-area .page-title { 1165 font-size: 30px; 1166 line-height: 40px; 1167 } 1168 .header-area.style-11 .header-inner .title, 1169 .header-area.style-10 .header-inner .title, 1170 .header-area.style-09 .header-inner .title , 1171 .appside-header-09 .header-inner .title{ 1172 text-align: center; 1173 font-size: 40px; 1174 line-height: 50px; 1175 } 1176 .boxed-btn-02 { 1177 padding: 0 20px; 1178 } 1179 .single-icon-box-03 .content .title { 1180 font-size: 22px; 1181 font-weight: 600; 1182 } 1183 .single-testimonial-item-02 .content-area { 1184 padding: 40px 30px; 1185 } 1186 .single-testimonial-item-02 .content-area p { 1187 font-size: 18px; 1188 line-height: 30px; 1189 } 1190 .single-testimonial-item-02 .content-area .author-meta .title { 1191 font-size: 24px; 1192 font-weight: 600; 1193 } 1194 .call-to-action-inner-style-02 .btn-wrapper .boxed-btn-02 + .boxed-btn-02 { 1195 margin-left: 10px; 1196 } 1197 .call-to-action-inner-style-02 .title { 1198 font-size: 28px; 1199 line-height: 40px; 1200 } 1201 .single-discover-item .content .title { 1202 font-size: 22px; 1203 font-weight: 600; 1204 } 1205 .feature-list-04 .single-feature-list-item-04 .content .title { 1206 font-size: 22px; 1207 font-weight: 600; 1208 } 1209 .video-play-area.margin-minus { 1210 margin-bottom: 0; 1211 } 1212 .full-width-feature-area-03.has-video-with-img { 1213 padding-top: 120px; 1214 } 1215 .customer-reply-area { 1216 padding-top: 60px; 1217 } 1218 .testimonial-area-three.mirgin-minus { 1219 padding-top: 180px; 1220 margin-top: -70px; 1221 } 1222 .header-area.style-12 .header-inner .title { 1223 font-size: 40px; 1224 line-height: 50px; 1225 } 1226 .img-full-width-video .hover .play-video-btn { 1227 padding: 12px 20px; 1228 } 1229 .single-icon-box-03 .icon { 1230 width: 80px; 1231 height: 80px; 1232 line-height: 80px; 1233 } 1234 .icon-box-list li { 1235 margin-bottom: 30px; 1236 } 1237 1238 .icon-box-list li +li { 1239 margin-left: 0px; 1240 } 1241 .icon-box-list { 1242 display: block; 1243 } 1244 .appside-header-09 .header-inner .btn-wrapper .boxed_img_btn img, 1245 .appside-button-group .boxed_img_btn img { 1246 max-width: 150px; 1247 } 1248 .appside-header-09 .header-inner .btn-wrapper .boxed_img_btn + .boxed_img_btn , 1249 .appside-button-group .boxed_img_btn + .boxed_img_btn{ 1250 margin-left: 10px; 1251 } 1252 .feature-list-04 .single-feature-list-item-04 .icon { 1253 margin-bottom: 20px; 1254 } 1255 .single-price-plan-03 .price-header .price-wrap .price { 1256 font-size: 50px; 1257 line-height: 60px; 1258 } 1259 .btn-wrapper .boxed-btn + .boxed-btn{ 1260 margin-left: 0px; 1261 } 1262 .blog-pagination ul li, .woocommerce-pagination ul li { 1263 margin-bottom: 10px; 1264 } 1265 } 1266 1267 1268 /* mobile tablet layout 360px */ 1269 1270 @media only screen and (max-width: 360px) { 1271 .navbar-light .navbar-brand { 1272 margin-right: 0; 1273 width: 170px; 1274 } 1275 1276 .breadcrumb-area .page-title { 1277 font-size: 28px; 1278 line-height: 38px; 1279 } 1280 .breadcrumb-area .page-navigation li { 1281 font-size: 16px; 1282 } 1283 .header-area .header-inner .title { 1284 font-size: 32px; 1285 line-height: 44px; 1286 } 1287 .header-area .header-inner .btn-wrapper .boxed-btn { 1288 margin: 0px 3px; 1289 width: 145px; 1290 } 1291 .section-title .title, 1292 .video-area .right-content-area .title, 1293 .download-area-wrapper .title, 1294 .contact-area-wrapper .title { 1295 font-size: 27px; 1296 line-height: 40px; 1297 } 1298 .single-testimonial-item .hover .hover-inner { 1299 text-align: center; 1300 padding: 40px 30px 0px 30px; 1301 } 1302 .single-price-plan-01 .price-header .price-wrap .price { 1303 font-size: 30px; 1304 line-height: 40px; 1305 } 1306 .single-price-plan-01 .boxed-btn { 1307 width: 170px; 1308 } 1309 .header-form-area .header-form-inner { 1310 padding: 40px 30px 50px 30px; 1311 } 1312 .header-area.style-four .header-inner .free-trail-form .submit-btn { 1313 width: 110px; 1314 } 1315 .header-area.style-12 .header-inner .title { 1316 font-size: 36px; 1317 line-height: 46px; 1318 } 1319 .boxed-btn-02 { 1320 padding: 0 10px; 1321 font-size: 14px; 1322 } 1323 .section-title .title, 1324 .video-area .right-content-area .title, 1325 .download-area-wrapper .title, 1326 .contact-area-wrapper .title , 1327 .price-plan-left-content .section-title .title{ 1328 font-size: 30px; 1329 line-height: 40px; 1330 } 1331 .call-to-action-inner-style-02 .title { 1332 font-size: 26px; 1333 line-height: 38px; 1334 } 1335 .header-area.style-11 .header-inner .title, 1336 .header-area.style-10 .header-inner .title, 1337 .header-area.style-09 .header-inner .title, 1338 .appside-header-09 .header-inner .title { 1339 text-align: center; 1340 font-size: 36px; 1341 line-height: 50px; 1342 } 1343 .full-width-feature-area-04 .right-content-area .title, 1344 .connect-area .right-content-area .title { 1345 font-size: 30px; 1346 line-height: 48px; 1347 } 1348 .single-amazing-feature-01 { 1349 display: block; 1350 text-align: center; 1351 } 1352 1353 .single-amazing-feature-01 .icon { 1354 margin: 0 auto; 1355 margin-bottom: 25px; 1356 } 1357 .feature-list-04 .single-feature-list-item-04 { 1358 display: block; 1359 } 1360 .single-icon-box-03 { 1361 display: block; 1362 } 1363 1364 .single-icon-box-03 .icon { 1365 margin-bottom: 25px; 1366 } 1367 .appside-header-09 .header-inner .btn-wrapper .boxed_img_btn img, 1368 .appside-button-group .boxed_img_btn img { 1369 max-width: 140px; 1370 } 1371 .appside-header-09 .header-inner .btn-wrapper .boxed_img_btn + .boxed_img_btn , 1372 .appside-button-group .boxed_img_btn + .boxed_img_btn{ 1373 margin-left: 10px; 1374 } 1375 } 1376 1377 1378 /* mobile tablet layout 320px */ 1379 1380 @media only screen and (max-width: 330px) { 1381 .navbar-light .navbar-brand { 1382 margin-right: 0; 1383 } 1384 .header-area .header-inner .title { 1385 font-size: 30px; 1386 line-height: 40px; 1387 } 1388 .header-area .header-inner p { 1389 font-size: 16px; 1390 line-height: 26px; 1391 } 1392 .header-area .header-inner .btn-wrapper .boxed-btn { 1393 margin: 0px 0px; 1394 width: 141px; 1395 font-size: 14px; 1396 } 1397 .section-title .title, 1398 .video-area .right-content-area .title, 1399 .download-area-wrapper .title, 1400 .contact-area-wrapper .title , 1401 .price-plan-left-content .section-title .title{ 1402 font-size: 25px; 1403 line-height: 35px; 1404 } 1405 .single-counter-item .content .count-num { 1406 font-size: 30px; 1407 line-height: 40px; 1408 } 1409 .single-counter-item .icon { 1410 font-size: 40px; 1411 line-height: 70px; 1412 } 1413 .single-testimonial-item .hover .hover-inner p { 1414 font-size: 16px; 1415 line-height: 30px; 1416 } 1417 .single-testimonial-item .hover .hover-inner { 1418 text-align: center; 1419 padding: 50px 30px 0px 30px; 1420 } 1421 .single-post-details-item .entry-content .title, 1422 .comment-area .comment-title, 1423 .comment-form-wrap .title { 1424 font-size: 24px; 1425 line-height: 34px; 1426 } 1427 .comment-area .comment-list li ul li { 1428 margin-left: 20px; 1429 list-style-type: none; 1430 list-style: none; 1431 } 1432 .header-area.style-11 .header-inner .title, 1433 .header-area.style-10 .header-inner .title, 1434 .header-area.style-09 .header-inner .title , 1435 .appside-header-09 .header-inner .title{ 1436 text-align: center; 1437 font-size: 34px; 1438 line-height: 50px; 1439 } 1440 .call-to-action-inner-style-02 { 1441 padding: 60px 25px; 1442 } 1443 .call-to-action-inner-style-02 .title { 1444 font-size: 24px; 1445 line-height: 38px; 1446 } 1447 .call-to-action-inner-style-02 .btn-wrapper .boxed-btn-02 + .boxed-btn-02 { 1448 margin-left: 0px; 1449 margin-top: 20px; 1450 } 1451 .full-width-feature-area-04 .right-content-area .title { 1452 line-height: 40px; 1453 } 1454 .single-price-plan-02 .price-header .price-wrap .price { 1455 font-size: 36px; 1456 line-height: 46px; 1457 } 1458 .header-area.style-12 .header-inner .title { 1459 font-size: 34px; 1460 line-height: 46px; 1461 } 1462 } 1463 1464 1465 @media only screen and (max-width:768px){ 1466 .single-testimonial-item .thumb { 1467 width: 100%; 1468 height: 630px; 1469 } 1470 } 1471 1472 @media only screen and (max-width:500px){ 1473 .single-testimonial-item .thumb { 1474 width: 100%; 1475 height: 530px; 1476 } 1477 } 1478 1479 @media only screen and (max-width: 414px){ 1480 .single-testimonial-item .hover { 1481 top: 50%; 1482 } 1483 }