/*--------------------------------------------------------------
：
：
：　　　旧「style.css」
：
：
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# カスタムプロパティ
--------------------------------------------------------------*/
/*
テキスト
*/
/*
基本配色
#053D8B;
#1164b0;
#298bc8;
#3f87db;
#5cd5eb;
#444444;
#cccccc;
*/
/*本文*/ :root {
 --myMainText: #666666;
 --myMainTextLink: #053D8B;
 --myMainTextLinkHover: #3f87db;
 --myLargeText: #053D8B;
 --my-sctionHeaderH3: #053D8B;
 --my-sctionHeaderP: #666666;
}
:root {
 --myWhite: #ffffff;
}
:root {
 --myFooterText: #444444;
 --myFooterTextLink: #444444;
 --myFooterTextLinkHover: #3f87db;
}
/*タイトル*/
/*
背景色
*/ :root {
 --myKeyColorA: #444444;
 --myKeyColorA: #cccccc;
}
/*
セクションごとの背景色
*/ :root {
 --ecIntro: #ffffff;
 --ecSectionA: #ececec; /*未使用*/
 --ecWorks: #ececec;
 --ecAboutMe: #ffffff;
 --ecSectionB: #ffffff; /*未使用*/
 --ecCollection: #ececec;
 --ecTestimonials: #ffffff;
 --ecTeam: #ececec;
 --ecPencils: #ffffff;
 --ecClients: #ececec; /*未使用*/
 --ecPricing: #ffffff; /*未使用*/
 --ecFaq: #ececec; /*未使用*/
 --ecContact: #ffffff;
}
/* Header */ :root {
 --myheaderBG: #ffffff;
 /*【未使用】ロゴ画像の代わりにテキストを配備する場合に使用*/
 --myheaderText: #444444;
 --myHeaderNaviMenu: #1164b0;
 --myHeaderNaviMenuHover: green;
}
/* ナビPC */ :root {
 --myPCNaviMenu: #999999;
 --myPCNaviMenuHover: #1164b0;
}
/* ナビMobole */ :root {
 --myMobileNaviBg: rgba(0, 0, 20, 0.7);
 --myMobileNaviOverlay: rgba(0, 0, 20, 0.4);
 --myMobileNaviMenu: #CCCCCC;
 --myMobileNaviMenuHover: #5cd5eb;
 --mobile-nav-toggle1: #999999;
 --mobile-nav-toggle2: #eeeeee;
}
/* カウンター */ :root {
 --myCounter1: #053D8B;
 --myCounter2: #1164B0;
}
:root {
 --myCopyrightText: #999999;
 --myCopyrightTextLink: #88888;
 --myCopyrightTextLinkHover: #3f87db;
}
:root {
 --myCreditText: #bbbbbb;
 --myCreditTextLink: #bbbbbb;
 --myCreditTextLinkHover: #3f87db;
}
:root {
 --my-bg-colorAFAFAF: #afafaf;
}
:root {
 --my-bg-colorK: #969996;
 --my-bg-colorK: yellow;
 /*フッターのテキスト */
}
:root {
 --my-bg-colorJ: #cce5ff;
 --my-bg-colorI: #d8eafe;
 --my-bg-colorH: #bfddfe;
 --my-bg-colorG: #003b7a;
 --my-bg-color333333: #333333;
 /*使用箇所不明*/
 --my-bg-colorF: #d9dde6;
 --my-bg-colorE: #00458f;
 --my-bg-colorD: #004a99;
 --my-bg-colorC: #b1f9ff;
 --my-bg-colorB: #ecf5ff;
 --my-bg-colorA: #4a506a;
 --my-bg-colorA: brown;
 /*Adout Me の サブ 名前のところ */
 --my-bg-color0: #2b416d;
 --my-bg-color1: #053D8B;
 /*--my-bg-color1: cyan;*/
 /*ナビのテキスト、作品ギャラリーのhover背景 */
 --my-bg-color2: #1164B0;
 --my-bg-color25: #0067d5;
 --my-bg-color3: #298BC8; /*ecWorksのボタンの色など*/
 --my-bg-color4: #3F87DB;
 --my-bg-color45: #3FB7DB;
 --my-bg-color5: #5CD5E8;
 --my-bg-color6: #ddeeee;
}
/*
  Theme Name: NewBiz
  Theme URL: https://bootstrapmade.com/newbiz-bootstrap-business-template/
  Author: BootstrapMade.com
  License: https://bootstrapmade.com/license/
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
 background: var(--myWhite);
 color: var(--myMainText);
 font-family: "Open Sans", sans-serif;
}
a {
 color: var(--myMainTextLink);
 transition: 0.5s;
}
a:hover, a:active, a:focus {
 outline: none;
 text-decoration: none;
}
a:hover {
 color: var(--myMainTextLinkHover);
 text-decoration: underline;
}
p {
 padding: 0;
 margin: 0 0 30px 0;
}
h1, h2, h3, h4, h5, h6 {
 font-family: "Montserrat", sans-serif;
 font-weight: 400;
 margin: 0 0 20px 0;
 padding: 0;
 color: var(--myLargeText);
}
/* Back to top button */
.back-to-top {
 position: fixed;
 display: none;
 background: var(--myKeyColorA);
 color: var(--myWhite);
 width: 44px;
 height: 44px;
 text-align: center;
 line-height: 1;
 font-size: 16px;
 border-radius: 50%;
 right: 15px;
 bottom: 15px;
 transition: background 0.5s;
 z-index: 11;
}
.back-to-top i {
 padding-top: 12px;
 color: var(--myWhite);
}
/* Prelaoder */
#preloader {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 9999;
 overflow: hidden;
 background: var(--myWhite);
}
#preloader:before {
 content: "";
 position: fixed;
 top: calc(50% - 30px);
 left: calc(50% - 30px);
 border: 6px solid #f2f2f2;
 border-top: 6px solid var(--my-bg-color3);
 border-radius: 50%;
 width: 60px;
 height: 60px;
 -webkit-animation: animate-preloader 1s linear infinite;
 animation: animate-preloader 1s linear infinite;
}
@-webkit-keyframes animate-preloader {
 0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
 }
 100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
 }
}
@keyframes animate-preloader {
 0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
 }
 100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
 }
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
 height: 80px;
 transition: all 0.5s;
 z-index: 997;
 transition: all 0.5s;
 padding: 20px 0;
 background: var(--myheaderBG);
 box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.3);
}
#header.header-scrolled, #header.header-pages {
 height: 60px;
 padding: 10px 0;
}
#header .logo h1 {
 /*font-size: 36px;*/
 font-size: 32px;
 margin: 0;
 padding: 0;
 line-height: 1;
 font-weight: 400;
 /*letter-spacing: 3px;*/
 /*text-transform: uppercase;*/
}
#header .logo h1 a, #header .logo h1 a:hover {
 /*【未使用】ロゴ画像の代わりにテキストを配備する場合に使用*/
 color: var(--myheaderText);
 text-decoration: none;
}
#header .logo img {
 padding: 0;
 margin: 7px 0;
 margin: 0px 0;
 max-height: 26px;
 max-height: 42px;
}
.main-pages {
 margin-top: 60px;
}
/*--------------------------------------------------------------
# Intro Section
--------------------------------------------------------------*/
#ecHero {
 width: 100%;
 position: relative;
 background: url("../img/header-bg3.png") center bottom no-repeat;
 background-size: cover;
 padding: 200px 0 120px 0;
}
#ecHero .intro-img {
 width: 50%;
 float: right;
}
#ecHero .intro-info {
 width: 50%;
 float: left;
}
#ecHero .intro-info h2 {
 color: var(--myWhite);
 /*margin-bottom: 40px;*/
 font-size: 48px;
 font-weight: 700;
}
#ecHero .intro-info h2 span {
 /*color: #74b5fc;
  text-decoration: underline;*/
 font-weight: 400;
}
#ecHero .intro-info h2 small { /*add*/
 font-weight: 400;
 font-size: 20px;
 line-height: 1.0em !important;
}
#ecHero .intro-info h5 { /*add*/
 color: var(--myWhite);
 font-weight: 400;
 font-size: 20px;
 line-height: 24px !important;
}
#ecHero .intro-info h5 small { /*add*/
 /*color: var(--myWhite);
 font-weight: 400;*/
 font-size: 14px;
}
#ecHero .intro-info .btn-get-started, #ecHero .intro-info .btn-services {
 font-family: "Montserrat", sans-serif;
 font-size: 14px;
 font-weight: 600;
 letter-spacing: 1px;
 display: inline-block;
 padding: 10px 32px;
 border-radius: 50px;
 transition: 0.5s;
 margin: 0 20px 20px 0;
 color: var(--myWhite);
}
#ecHero .intro-info .btn-get-started {
 background: var(--my-bg-color3);
 border: 2px solid var(--my-bg-color3);
 color: var(--myWhite);
}
#ecHero .intro-info .btn-get-started:hover {
 background: none;
 border-color: var(--myWhite);
 color: var(--myWhite);
}
#ecHero .intro-info .btn-services {
 border: 2px solid var(--myWhite);
}
#ecHero .intro-info .btn-services:hover {
 background: var(--my-bg-color3);
 border-color: var(--my-bg-color3);
 color: var(--myWhite);
}
#ecHero .intro-info a {
 color: var(--myWhite);
 text-decoration: underline;
}
#ecHero .intro-info a:hover {
 color: var(--my-bg-colorAFAFAF);
 text-decoration: none;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
.main-nav {
 /* Drop Down */
 /* Deep Drop Down */
}
.main-nav, .main-nav * {
 margin: 0;
 padding: 0;
 list-style: none;
}
.main-nav > ul > li {
 position: relative;
 white-space: nowrap;
 float: left;
}
.main-nav a {
 display: block;
 position: relative;
 color: var(--myPCNaviMenu);
 padding: 10px 15px;
 transition: 0.3s;
 font-size: 14px;
 font-family: "Montserrat", sans-serif;
 font-weight: 500;
}
.main-nav a:hover, .main-nav .active > a, .main-nav li:hover > a {
 color: var(--myPCNaviMenuHover);
 text-decoration: none;
}
.main-nav .drop-down ul {
 display: block;
 position: absolute;
 left: 0;
 top: calc(100% + 30px);
 z-index: 99;
 opacity: 0;
 visibility: hidden;
 padding: 10px 0;
 background: var(--myWhite);
 box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
 transition: ease all 0.3s;
}
.main-nav .drop-down:hover > ul {
 opacity: 1;
 top: 100%;
 visibility: visible;
}
.main-nav .drop-down li {
 min-width: 180px;
 position: relative;
}
.main-nav .drop-down ul a {
 padding: 10px 20px;
 font-size: 13px;
 color: var(--my-bg-color1);
}
.main-nav .drop-down ul a:hover, .main-nav .drop-down ul .active > a, .main-nav .drop-down ul li:hover > a {
 color: var(--my-bg-color3);
}
.main-nav .drop-down > a:after {
 content: "\f107";
 font-family: "Font Awesome 5 Free";
 padding-left: 10px;
}
.main-nav .drop-down .drop-down ul {
 top: 0;
 left: calc(100% - 30px);
}
.main-nav .drop-down .drop-down:hover > ul {
 opacity: 1;
 top: 0;
 left: 100%;
}
.main-nav .drop-down .drop-down > a {
 padding-right: 35px;
}
.main-nav .drop-down .drop-down > a:after {
 content: "\f105";
 position: absolute;
 right: 15px;
}
/* Mobile Navigation */
.mobile-nav {
 position: fixed;
 top: 0;
 bottom: 0;
 z-index: 9999;
 overflow-y: auto;
 left: -260px;
 width: 260px;
 padding-top: 18px;
 /*background: rgba(19, 39, 57, 0.8);*/ background: var(--myMobileNaviBg);
 transition: 0.4s;
}
.mobile-nav * {
 margin: 0;
 padding: 0;
 list-style: none;
}
.mobile-nav a {
 display: block;
 position: relative;
 color: var(--myMobileNaviMenu);
 padding: 10px 20px;
 font-weight: 500;
}
.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
 /*color: #74b5fc;*/
 color: var(--myMobileNaviMenuHover);
 text-decoration: none;
}
.mobile-nav .drop-down > a:after {
 content: "\f078";
 font-family: "Font Awesome 5 Free";
 padding-left: 10px;
 position: absolute;
 right: 15px;
}
.mobile-nav .active.drop-down > a:after {
 content: "\f077";
}
.mobile-nav .drop-down > a {
 padding-right: 35px;
}
.mobile-nav .drop-down ul {
 display: none;
 overflow: hidden;
}
.mobile-nav .drop-down li {
 padding-left: 20px;
}
.mobile-nav-toggle {
 position: fixed;
 right: 0;
 top: 0;
 z-index: 9998;
 border: 0;
 background: none;
 font-size: 24px;
 transition: all 0.4s;
 outline: none !important;
 line-height: 1;
 cursor: pointer;
 text-align: right;
}
.mobile-nav-toggle i {
 margin: 18px 18px 0 0;
 color: var(--mobile-nav-toggle1);
}
.mobile-nav-overly {
 width: 100%;
 height: 100%;
 z-index: 9997;
 top: 0;
 left: 0;
 position: fixed;
 /*background: rgba(19, 39, 57, 0.8);*/
 /*background: rgba(0, 28, 77, 0.6);*/
 background: var(--myMobileNaviOverlay); /*モバイルのナビのオーバーレイ*/
 overflow: hidden;
 display: none;
}
.mobile-nav-active {
 overflow: hidden;
}
.mobile-nav-active .mobile-nav {
 left: 0;
}
.mobile-nav-active .mobile-nav-toggle i {
 color: var(--mobile-nav-toggle2);
}
/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
/* Sections Header
--------------------------------*/
.section-header h3 {
 font-size: 36px;
 color: var(--my-sctionHeaderH3);
 text-align: center;
 font-weight: 500;
 position: relative;
}
.section-header p {
 text-align: center;
 margin: auto;
 font-size: 15px;
 padding-bottom: 60px;
 color: var(--my-sctionHeaderP);
 width: 50%;
}
/* Section with background
--------------------------------*/
.section-bg {
 background: var(--my-bg-colorB);
}
/* About Us Section
--------------------------------*/
#ecIntro {
 background: var(--ecIntro);
 padding: 60px 0;
}
#ecIntro .about-container .background {
 margin: 20px 0;
}
#ecIntro .about-container .content {
 background: var(--ecIntro);
}
#ecIntro .about-container .title {
 color: var(--my-bg-color333333);
 font-weight: 700;
 font-size: 32px;
}
#ecIntro .about-container p {
 line-height: 26px;
}
#ecIntro .about-container p:last-child {
 margin-bottom: 0;
}
#ecIntro .about-container .icon-box {
 background: var(--ecIntro);
 background-size: cover;
 padding: 0 0 30px 0;
}
#ecIntro .about-container .icon-box .icon {
 float: left;
 background: var(--ecIntro);
 width: 64px;
 height: 64px;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
 text-align: center;
 border-radius: 50%;
 border: 2px solid var(--my-bg-color3);
 transition: all 0.3s ease-in-out;
}
#ecIntro .about-container .icon-box .icon i {
 color: var(--my-bg-color3);
 font-size: 24px;
}
#ecIntro .about-container .icon-box:hover .icon {
 background: var(--my-bg-color3);
}
#ecIntro .about-container .icon-box:hover .icon i {
 color: var(--myWhite);
}
#ecIntro .about-container .icon-box .title {
 margin-left: 80px;
 font-weight: 600;
 margin-bottom: 5px;
 font-size: 18px;
}
#ecIntro .about-container .icon-box .title a {
 color: var(--my-bg-color0);
}
#ecIntro .about-container .icon-box .description {
 margin-left: 80px;
 line-height: 24px;
 font-size: 14px;
}
#ecIntro .about-extra {
 padding-top: 60px;
}
#ecIntro .about-extra h4 {
 font-weight: 600;
 font-size: 24px;
}
/* ecSectionA Section
--------------------------------*/
#ecSectionA {
 padding: 60px 0 40px 0;
 box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
 background: var(--ecSectionA);
}
#ecSectionA .box {
 padding: 30px;
 position: relative;
 overflow: hidden;
 border-radius: 10px;
 margin: 0 10px 40px 10px;
 background: var(--myWhite);
 box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
 transition: all 0.3s ease-in-out;
}
#ecSectionA .box:hover {
 -webkit-transform: translateY(-5px);
 transform: translateY(-5px);
}
#ecSectionA .icon {
 position: absolute;
 left: -10px;
 top: calc(50% - 32px);
}
#ecSectionA .icon i {
 font-size: 64px;
 line-height: 1;
 transition: 0.5s;
}
#ecSectionA .title {
 margin-left: 40px;
 font-weight: 700;
 margin-bottom: 15px;
 font-size: 18px;
}
#ecSectionA .title a {
 color: #111;
}
#ecSectionA .box:hover .title a {
 color: var(--my-bg-color3);
}
#ecSectionA .description {
 font-size: 14px;
 margin-left: 40px;
 line-height: 24px;
 margin-bottom: 0;
}
/* ecSectionB Section
--------------------------------*/
#ecSectionB {
 padding: 60px 0 40px 0;
 background: var(--ecSectionB);
}
#ecSectionB .box {
 padding: 30px;
 position: relative;
 overflow: hidden;
 border-radius: 10px;
 margin: 0 10px 40px 10px;
 background: var(--ecSectionB);
 box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
 transition: all 0.3s ease-in-out;
 text-align: center;
}
#ecSectionB .box:hover {
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
}
#ecSectionB .icon {
 margin: 0 auto 15px auto;
 padding-top: 12px;
 display: inline-block;
 text-align: center;
 border-radius: 50%;
 width: 60px;
 height: 60px;
}
#ecSectionB .icon i {
 font-size: 36px;
 line-height: 1;
}
#ecSectionB .title {
 font-weight: 700;
 margin-bottom: 15px;
 font-size: 18px;
}
#ecSectionB .title a {
 color: #111;
}
#ecSectionB .box:hover .title a {
 color: var(--my-bg-color45);
}
#ecSectionB .description {
 font-size: 14px;
 line-height: 28px;
 margin-bottom: 0;
 text-align: left;
}
/* ecWorks Section
--------------------------------*/
#ecWorks {
 padding: 60px 0;
 box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
 background: var(--ecWorks);
}
#ecWorks #ecWorks-flters {
 padding: 0;
 margin: 5px 0 35px 0;
 list-style: none;
 text-align: center;
}
#ecWorks #ecWorks-flters li {
 cursor: pointer;
 margin: 15px 15px 15px 0;
 display: inline-block;
 padding: 6px 20px;
 font-size: 12px;
 line-height: 20px;
 /*text-transform: uppercase;*/
 color: var(--my-bg-color3);
 border-radius: 50px;
 /*border: solid 1px var(--my-bg-color3);*/
 /*background: var(--my-bg-colorB);*/
 background: var(--myWhite);
 margin-bottom: 5px;
 transition: all 0.3s ease-in-out;
}
#ecWorks #ecWorks-flters li:hover, #ecWorks #ecWorks-flters li.filter-active {
 background: var(--my-bg-color3);
 color: var(--myWhite);
}
#ecWorks #ecWorks-flters li:last-child {
 margin-right: 0;
}
#ecWorks .ecWorks-item {
 position: relative;
 overflow: hidden;
 margin-bottom: 30px;
}
#ecWorks .ecWorks-item .ecWorks-wrap {
 overflow: hidden;
 position: relative;
 border-radius: 6px;
 margin: 0;
}
#ecWorks .ecWorks-item .ecWorks-wrap:hover img {
 opacity: 0.4;
 transition: 0.3s;
}
#ecWorks .ecWorks-item .ecWorks-wrap .ecWorks-info {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
 text-align: center;
 opacity: 0;
 transition: 0.2s linear;
}
#ecWorks .ecWorks-item .ecWorks-wrap .ecWorks-info h4 {
 font-size: 22px;
 line-height: 1px;
 font-weight: 700;
 margin-bottom: 14px;
 padding-bottom: 0;
}
#ecWorks .ecWorks-item .ecWorks-wrap .ecWorks-info h4 a {
 color: var(--myWhite);
}
#ecWorks .ecWorks-item .ecWorks-wrap .ecWorks-info h4 a:hover {
 color: var(--my-bg-color5);
}
#ecWorks .ecWorks-item .ecWorks-wrap .ecWorks-info p {
 padding: 0;
 margin: 0;
 color: #e2effe;
 font-weight: 500;
 font-size: 14px;
 text-transform: uppercase;
}
#ecWorks .ecWorks-item .ecWorks-wrap .ecWorks-info .link-preview, #ecWorks .ecWorks-item .ecWorks-wrap .ecWorks-info .link-details {
 display: inline-block;
 line-height: 1;
 text-align: center;
 width: 36px;
 height: 36px;
 background: var(--my-bg-color3);
 border-radius: 50%;
 margin: 10px 4px 0 4px;
}
#ecWorks .ecWorks-item .ecWorks-wrap .ecWorks-info .link-preview i, #ecWorks .ecWorks-item .ecWorks-wrap .ecWorks-info .link-details i {
 padding-top: 6px;
 font-size: 22px;
 color: var(--myWhite);
}
#ecWorks .ecWorks-item .ecWorks-wrap .ecWorks-info .link-preview:hover, #ecWorks .ecWorks-item .ecWorks-wrap .ecWorks-info .link-details:hover {
 background: #37a34a;
}
#ecWorks .ecWorks-item .ecWorks-wrap .ecWorks-info .link-preview:hover i, #ecWorks .ecWorks-item .ecWorks-wrap .ecWorks-info .link-details:hover i {
 color: var(--myWhite);
}
#ecWorks .ecWorks-item .ecWorks-wrap:hover {
 background: var(--my-bg-color1);
}
#ecWorks .ecWorks-item .ecWorks-wrap:hover .ecWorks-info {
 opacity: 1;
}
/* ecTestimonials Section
--------------------------------*/
#ecTestimonials {
 padding: 60px 0;
 box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
 background: var(--ecTestimonials);
}
#ecTestimonials .section-header {
 margin-bottom: 40px;
}
#ecTestimonials .testimonial-item .testimonial-img {
 width: 120px;
 border-radius: 50%;
 border: 4px solid var(--myWhite);
 float: left;
}
#ecTestimonials .testimonial-item h3 {
 font-size: 20px;
 font-weight: bold;
 margin: 10px 0 5px 0;
 color: #111;
 margin-left: 140px;
}
#ecTestimonials .testimonial-item h4 {
 font-size: 14px;
 color: #999;
 margin: 0 0 15px 0;
 margin-left: 140px;
}
#ecTestimonials .testimonial-item p {
 /*font-style: italic;*/
 margin: 0 0 15px 140px;
}
#ecTestimonials .owl-nav, #ecTestimonials .owl-dots {
 margin-top: 5px;
 text-align: center;
}
#ecTestimonials .owl-dot {
 display: inline-block;
 margin: 0 5px;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background-color: #ddd;
}
#ecTestimonials .owl-dot.active {
 background-color: var(--my-bg-color3);
}
/* ecTeam Section 編集
--------------------------------*/
#ecTeam {
 padding: 60px 0;
 background: var(--ecTeam);
}
#ecTeam .member {
 text-align: center;
 margin-bottom: 20px;
 position: relative;
 overflow: hidden;
}
#ecTeam .member .member-info {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 transition: 0.2s;
 padding: 15px 0;
 background: rgba(29, 28, 41, 0.6);
}
#ecTeam .member .member-info-content {
 transition: margin 0.2s;
 height: 40px;
 transition: height 0.4s;
}
#ecTeam .member:hover .member-info {
 transition: 0.4s;
}
#ecTeam .member:hover .member-info-content {
 height: 80px;
}
#ecTeam .member h4 {
 font-weight: 700;
 margin-bottom: 2px;
 font-size: 18px;
 color: #fff;
}
#ecTeam .member span {
 /*font-style: italic;*/
 display: block;
 font-size: 13px;
 color: #fff;
}
#ecTeam .member .social {
 margin-top: 15px;
}
#ecTeam .member .social a {
 transition: none;
 color: #fff;
}
#ecTeam .member .social a:hover {
 color: #387d39;
}
#ecTeam .member .social i {
 font-size: 18px;
 margin: 0 2px;
}
/* ecPencils Section
--------------------------------*/
#ecPencils {
 background: var(--ecPencils);
 padding: 60px 0;
 box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
}
#ecPencils .member {
 text-align: center;
 margin-bottom: 20px;
 position: relative;
 border-radius: 5%;
 overflow: hidden;
}
#ecPencils .member .member-info {
 opacity: 0;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 position: absolute;
 bottom: 0;
 top: 0;
 left: 0;
 right: 0;
 transition: 0.2s;
 border-radius: 5%;
}
#ecPencils .member .member-info-content {
 margin-top: 50px;
 transition: margin 0.2s;
}
#ecPencils .member:hover .member-info {
 background: rgba(0, 62, 128, 0.7);
 opacity: 1;
 transition: 0.4s;
}
#ecPencils .member:hover .member-info-content {
 margin-top: 0;
 transition: margin 0.4s;
}
#ecPencils .member h4 {
 font-weight: 700;
 margin-bottom: 2px;
 font-size: 18px;
 color: var(--myWhite);
}
#ecPencils .member span {
 /*font-style: italic;*/
 display: block;
 font-size: 13px;
 color: var(--myWhite);
}
#ecPencils .member .social {
 margin-top: 15px;
}
#ecPencils .member .social a {
 transition: none;
 color: var(--myWhite);
}
#ecPencils .member .social a:hover {
 color: var(--my-bg-color3);
}
#ecPencils .member .social i {
 font-size: 18px;
 margin: 0 2px;
}
/* Clients Section
--------------------------------*/
#ecClients {
 padding: 60px 0;
 box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
 background: var(--ecClients);
}
#ecClients .clients-wrap {
 border-top: 1px solid #d6eaff;
 border-left: 1px solid #d6eaff;
 margin-bottom: 30px;
}
#ecClients .client-logo {
 padding: 64px;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 border-right: 1px solid #d6eaff;
 border-bottom: 1px solid #d6eaff;
 overflow: hidden;
 background: var(--myWhite);
 height: 160px;
}
#ecClients .client-logo:hover img {
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
#ecClients img {
 transition: all 0.4s ease-in-out;
 /*
 max-width: 80%;
	opacity: 0.5;
	transition: 0.3s;
	padding: 15px 0;
*/
}
#ecClients img:hover {
 /*
 opacity: 1;
 */
}
/* Contact Section
--------------------------------*/
#ecContact {
 box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
 padding: 60px 0;
 overflow: hidden;
 background: var(--ecContact);
}
#ecContact .section-header {
 padding-bottom: 30px;
}
#ecContact .contact-about h3 {
 font-size: 36px;
 margin: 0 0 10px 0;
 padding: 0;
 line-height: 1;
 font-family: "Montserrat", sans-serif;
 font-weight: 300;
 letter-spacing: 3px;
 text-transform: uppercase;
 color: var(--my-bg-color3);
}
#ecContact .contact-about p {
 font-size: 14px;
 line-height: 24px;
 font-family: "Montserrat", sans-serif;
 color: #888;
}
#ecContact .social-links {
 padding-bottom: 20px;
}
#ecContact .social-links a {
 font-size: 18px;
 display: inline-block;
 background: var(--ecContact);
 color: var(--my-bg-color3);
 line-height: 1;
 padding: 8px 0;
 margin-right: 4px;
 border-radius: 50%;
 text-align: center;
 width: 36px;
 height: 36px;
 transition: 0.3s;
 border: 1px solid var(--my-bg-color3);
}
#ecContact .social-links a:hover {
 background: var(--my-bg-color3);
 color: var(--myWhite);
}
#ecContact .info {
 color: var(--my-bg-color0);
}
#ecContact .info i {
 font-size: 32px;
 color: var(--my-bg-color3);
 float: left;
 line-height: 1;
}
#ecContact .info p {
 padding: 0 0 10px 36px;
 line-height: 28px;
 font-size: 14px;
}
#ecContact .form #sendmessage {
 color: var(--my-bg-color3);
 border: 1px solid var(--my-bg-color3);
 display: none;
 text-align: center;
 padding: 15px;
 font-weight: 600;
 margin-bottom: 15px;
}
#ecContact .form #errormessage {
 color: red;
 display: none;
 border: 1px solid red;
 text-align: center;
 padding: 15px;
 font-weight: 600;
 margin-bottom: 15px;
}
#ecContact .form #sendmessage.show, #ecContact .form #errormessage.show, #ecContact .form .show {
 display: block;
}
#ecContact .form .validation {
 color: red;
 display: none;
 margin: 0 0 20px;
 font-weight: 400;
 font-size: 13px;
}
#ecContact .form input, #ecContact .form textarea {
 border-radius: 0;
 box-shadow: none;
 font-size: 14px;
}
#ecContact .form button[type="submit"] {
 background: var(--my-bg-color3);
 border: 0;
 border-radius: 20px;
 padding: 8px 30px;
 color: var(--myWhite);
 transition: 0.3s;
}
#ecContact .form button[type="submit"]:hover {
 background: var(--my-bg-color25);
 cursor: pointer;
}
/*--------------------------------------------------------------
# Responsive Media Queries
--------------------------------------------------------------*/
@media (min-width: 992px) {
 #ecTestimonials .testimonial-item p {
  width: 80%;
 }
 .showHide {
  display: none;
 }
}
@media (max-width: 991px) {
 #header {
  height: 60px;
  padding: 10px 0;
 }
 #header .logo h1 {
  font-size: 28px;
  padding: 8px 0;
 }
 #ecHero {
  padding: 140px 0 60px 0;
 }
 #ecHero .intro-img {
  width: 80%;
  float: none;
  margin: 0 auto 25px auto;
 }
 #ecHero .intro-info {
  width: 80%;
  float: none;
  margin: auto;
  text-align: center;
 }
 #why-us .card {
  margin: 0;
 } /*多分不要*/
}
@media (max-width: 768px) {
 .back-to-top {
  bottom: 15px;
 }
}
@media (max-width: 767px) {
 #ecHero .intro-info {
  width: 100%;
 }
 #ecHero .intro-info h2 {
  font-size: 34px;
  margin-bottom: 30px;
 }
 .section-header p {
  width: 100%;
 }
 #ecTestimonials .testimonial-item {
  text-align: center;
 }
 #ecTestimonials .testimonial-item .testimonial-img {
  float: none;
  margin: auto;
 }
 #ecTestimonials .testimonial-item h3, #ecTestimonials .testimonial-item h4, #ecTestimonials .testimonial-item p {
  margin-left: 0;
 }
}
@media (max-width: 574px) {
 #ecHero {
  padding: 100px 0 20px 0;
 }
}
/*--------------------------------------------------------------
：
：
：　　　旧「style_Rapid.css」
：
：
--------------------------------------------------------------*/
/*
  Theme Name: Rapid
  Theme URL: https://bootstrapmade.com/rapid-multipurpose-bootstrap-business-template/
  Author: BootstrapMade.com
  License: https://bootstrapmade.com/license/
*/
/*--------------------------------------------------------------
# Top Bar 未使用？
--------------------------------------------------------------*/
/*
#topbar {
  padding: 0 0 10px 0;
  font-size: 14px;
  transition: all 0.5s;
}
#topbar .social-links {
  text-align: right;
}
#topbar .social-links a {
  color: var(--my-bg-color1);
  padding: 4px 12px;
  display: inline-block;
  line-height: 1px;
}
#topbar .social-links a:hover {
  color: var(--my-bg-color45);
}
#topbar .social-links a:first-child {
  border-left: 0;
}
*/
/* About Us_Rapid Section 編集
--------------------------------*/
#ecAboutMe {
 padding: 80px 0;
 background: var(--ecAboutMe);
}
#ecAboutMe .about-content {
 padding-top: 40px;
}
#ecAboutMe .about-content h2 {
 color: var(--my-bg-color0);
 font-family: "Montserrat", sans-serif;
 font-weight: 700;
}
#ecAboutMe .about-content h3 {
 color: var(--my-bg-colorA);
 font-weight: 400;
 font-size: 22px;
 /*font-style: italic;*/
}
#ecAboutMe .about-content ul {
 list-style: none;
 padding: 0;
}
#ecAboutMe .about-content ul li {
 padding-bottom: 10px;
 font-size: 14px; /*add*/
}
#ecAboutMe .about-content ul li i {
 /*font-size: 20px;*/
 font-size: 14px;
 padding-right: 4px;
 /*color: var(--my-bg-color45);*/
 color: var(--my-bg-color3);
}
#ecAboutMe .about-img {
 position: relative;
 margin: 30px 30px 30px 30px;
}
#ecAboutMe .about-img img {
 width: 100%;
 border: 8px solid var(--myWhite);
 transition: .5s;
}
#ecAboutMe .about-img img:hover {
 width: 100%;
 -webkit-transform: scale(1.03);
 transform: scale(1.03);
}
#ecAboutMe .about-img::before {
 position: absolute;
 left: -31px;
 top: -30px;
 width: 90%;
 height: 92%;
 z-index: -1;
 content: '';
 /*background-color: var(--my-bg-color6);*/
 background-color: #dddddd;
 transition: .5s;
}
#ecAboutMe .about-img::after {
 position: absolute;
 right: -31px;
 bottom: -30px;
 width: 90%;
 height: 92%;
 z-index: -1;
 content: '';
 /*background-color: var(--my-bg-color6);*/
 background-color: #dddddd;
 transition: .5s;
}
#ecAboutMe a:hover {
 text-decoration: underline;
}
/* Why Us_Rapid Section
--------------------------------*/
#ecCollection {
 padding: 60px 0;
 background: var(--ecCollection);
}
#ecCollection .why-us-content .features {
 margin: 0 0 15px 0;
 padding: 0;
 transition: 0.3s ease-in-out;
}
#ecCollection .why-us-content .features i {
 font-size: 36px;
 float: left;
}
#ecCollection .why-us-content .features h4 {
 font-size: 24px;
 font-weight: 600;
 margin-left: 56px;
 color: var(--my-bg-color0);
 margin-bottom: 5px;
}
#ecCollection .why-us-content .features p {
 font-size: 16px;
 margin-left: 56px;
 color: var(--my-bg-color2);
}
#ecCollection .counters {
 padding-top: 40px;
}
#ecCollection .counters span {
 font-family: "Montserrat", sans-serif;
 font-weight: bold;
 font-size: 48px;
 display: block;
 color: var(--myCounter1);
}
#ecCollection .counters p {
 padding: 0;
 margin: 0 0 20px 0;
 font-family: "Montserrat", sans-serif;
 font-size: 14px;
 color: var(--myCounter2);
}
/* Call To Action Section
--------------------------------*/
#call-to-action {
 background: #2d2b46;
 background: var(--call-to-action);
 background-size: cover;
 padding: 40px 0;
}
#call-to-action .cta-title {
 color: var(--myWhite);
 font-size: 28px;
 font-weight: 700;
}
#call-to-action .cta-text {
 color: var(--myWhite);
}
#call-to-action .cta-btn {
 font-family: "Montserrat", sans-serif;
 font-weight: 700;
 font-size: 16px;
 letter-spacing: 1px;
 display: inline-block;
 padding: 8px 26px;
 border-radius: 3px;
 transition: 0.5s;
 margin: 10px;
 border: 3px solid var(--myWhite);
 color: var(--myWhite);
}
#call-to-action .cta-btn:hover {
 background: var(--my-bg-color45);
 border: 3px solid var(--my-bg-color45);
}
/* Features Section
--------------------------------*/
#features {
 padding: 80px 0;
}
#features h4 {
 font-weight: 600;
 font-size: 24px;
}
/* ecPencils_Rapid Section 編集
--------------------------------*/
#ecPencils_Rapid {
 padding: 60px 0;
 background: var(--ecPencils_Rapid);
}
#ecPencils_Rapid .member {
 text-align: center;
 margin-bottom: 20px;
 position: relative;
 overflow: hidden;
}
#ecPencils_Rapid .member .member-info {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 transition: 0.2s;
 padding: 15px 0;
 background: rgba(29, 28, 41, 0.6);
}
#ecPencils_Rapid .member .member-info-content {
 transition: margin 0.2s;
 height: 40px;
 transition: height 0.4s;
}
#ecPencils_Rapid .member:hover .member-info {
 transition: 0.4s;
}
#ecPencils_Rapid .member:hover .member-info-content {
 height: 80px;
}
#ecPencils_Rapid .member h4 {
 font-weight: 700;
 margin-bottom: 2px;
 font-size: 18px;
 color: var(--myWhite);
}
#ecPencils_Rapid .member span {
 /*font-style: italic;*/
 display: block;
 font-size: 13px;
 color: var(--myWhite);
}
#ecPencils_Rapid .member .social {
 margin-top: 15px;
}
#ecPencils_Rapid .member .social a {
 transition: none;
 color: var(--myWhite);
}
#ecPencils_Rapid .member .social a:hover {
 color: var(--my-bg-color45);
}
#ecPencils_Rapid .member .social i {
 font-size: 18px;
 margin: 0 2px;
}
/* ecPricing Section
--------------------------------*/
#ecPricing {
 padding: 80px 0;
 background: var(--ecPricing);
}
#ecPricing .card {
 border: 0;
 border-radius: 0px;
 box-shadow: 0 3px 0px 0 rgba(65, 62, 102, 0.08);
 transition: all .3s ease-in-out;
 padding: 36px 0;
 position: relative;
}
#ecPricing .card:after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 0%;
 height: 5px;
 background-color: var(--my-bg-color3);
 transition: 0.5s;
}
#ecPricing .card:hover {
 -webkit-transform: scale(1.05);
 transform: scale(1.05);
 box-shadow: 0 20px 35px 0 rgba(0, 0, 0, 0.08);
}
#ecPricing .card:hover:after {
 width: 100%;
}
#ecPricing .card .card-header {
 background-color: white;
 border-bottom: 0px;
 -moz-text-align-last: center;
 text-align-last: center;
}
#ecPricing .card .card-title {
 margin-bottom: 16px;
 color: var(--my-bg-color3);
}
#ecPricing .card .card-block {
 padding-top: 0;
 text-align: center;
}
#ecPricing .card .list-group-item {
 border: 0px;
 padding: 6px;
 color: red;
 color: var(--myMainText);
 font-weight: 300;
}
#ecPricing .card h3 {
 font-size: 64px;
 margin-bottom: 0px;
 color: var(--my-bg-color2);
}
#ecPricing .card h3 .currency {
 font-size: 30px;
 position: relative;
 font-weight: 400;
 top: -30px;
 letter-spacing: 0px;
}
#ecPricing .card h3 .period {
 font-size: 16px;
 color: var(--my-bg-color2);
 letter-spacing: 0px;
}
#ecPricing .card .list-group {
 margin-bottom: 15px;
}
#ecPricing .card .btn {
 text-transform: uppercase;
 font-size: 13px;
 font-weight: 500;
 border-radius: 0;
 padding: 10px 24px;
 letter-spacing: 1px;
 border-radius: 3px;
 display: inline-block;
 background: var(--my-bg-color3);
 color: var(--myWhite);
}
#ecPricing .card .btn:hover {
 background: var(--my-bg-color2);
}
/* Frequently Asked Questions Section
--------------------------------*/
#ecFaq {
 padding: 60px 0;
 overflow: hidden;
 background: var(--ecFaq);
}
#ecFaq #faq-list {
 padding: 0;
 list-style: none;
}
#ecFaq #faq-list li {
 border-bottom: 1px solid #ebebeb;
}
#ecFaq #faq-list a {
 padding: 22px 0;
 display: block;
 position: relative;
 font-family: "Montserrat", sans-serif;
 font-size: 20px;
 line-height: 1;
 font-weight: 400;
 padding-right: 20px;
}
#ecFaq #faq-list i {
 font-size: 24px;
 position: absolute;
 right: 0;
 top: 20px;
}
#ecFaq #faq-list p {
 margin-bottom: 20px;
}
#ecFaq #faq-list a.collapse {
 color: var(--my-bg-color45);
}
#ecFaq #faq-list a.collapsed {
 color: #000;
}
#ecFaq #faq-list a.collapsed i::before {
 content: "\f2c7" !important;
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
 padding: 0 0 30px 0;
 font-size: 14px;
 background: var(--myWhite);
}
#footer .footer-top {
 padding: 60px 0 30px 0;
 background: #eeeeee;
}
#footer .footer-top .footer-info {
 margin-bottom: 30px;
}
#footer .footer-top .footer-info h3 {
 font-size: 34px;
 margin: 0 0 20px 0;
 padding: 2px 0 2px 0;
 line-height: 1;
 font-family: "Montserrat", sans-serif;
 color: var(--my-bg-color0);
 font-weight: 400;
 letter-spacing: 3px;
 /*text-transform: uppercase;*/
}
#footer .footer-top .footer-info p {
 font-size: 13px;
 line-height: 24px;
 margin-bottom: 0;
 font-family: "Montserrat", sans-serif;
 /*color: var(--my-bg-color1);*/
 color: var(--myFooterText);
}
#footer .footer-top .social-links a {
 font-size: 18px;
 display: inline-block;
 background: var(--my-bg-color45);
 color: var(--myWhite);
 line-height: 1;
 padding: 8px 0;
 margin-right: 4px;
 border-radius: 50%;
 text-align: center;
 width: 36px;
 height: 36px;
 transition: 0.3s;
}
#footer .footer-top .social-links a:hover {
 background: var(--my-bg-color3);
 color: var(--myWhite);
}
#footer .footer-top h4 {
 font-size: 14px;
 font-weight: bold;
 color: var(--my-bg-color0);
 /*text-transform: uppercase;*/
 position: relative;
 padding-bottom: 10px;
}
#footer .footer-top .footer-links {
 margin-bottom: 30px;
}
#footer .footer-top .footer-links ul {
 list-style: none;
 padding: 0;
 margin: 0;
}
#footer .footer-top .footer-links ul li {
 padding: 8px 0;
}
#footer .footer-top .footer-links ul li:first-child {
 padding-top: 0;
}
#footer .footer-top .footer-links ul a {
 color: var(--my-bg-colorA);
}
#footer .footer-top .footer-links ul a:hover {
 color: var(--my-bg-color45);
}
#footer .footer-top .footer-contact {
 margin-bottom: 30px;
}
#footer .footer-top .footer-contact p {
 line-height: 26px;
}
#footer .footer-top .footer-newsletter {
 margin-bottom: 30px;
}
#footer .footer-top .footer-newsletter input[type="email"] {
 border: 0;
 padding: 6px 8px;
 width: 65%;
 border: 1px solid var(--my-bg-colorF);
}
#footer .footer-top .footer-newsletter input[type="submit"] {
 background: var(--my-bg-color45);
 border: 1px solid var(--my-bg-color45);
 width: 35%;
 padding: 6px 0;
 text-align: center;
 color: var(--myWhite);
 transition: 0.3s;
 cursor: pointer;
}
#footer .footer-top .footer-newsletter input[type="submit"]:hover {
 background: var(--my-bg-color3);
}
#footer .footer-top .form .form-group {
 margin-bottom: 15px;
}
#footer .footer-top .form #sendmessage {
 color: var(--myWhite);
 background: var(--my-bg-color45);
 display: none;
 text-align: center;
 padding: 15px;
 font-weight: 600;
 margin-bottom: 15px;
}
#footer .footer-top .form #errormessage {
 color: var(--myWhite);
 display: none;
 background: red;
 text-align: center;
 padding: 15px;
 font-weight: 600;
 margin-bottom: 15px;
}
#footer .footer-top .form #sendmessage.show, #footer .footer-top .form #errormessage.show, #footer .footer-top .form .show {
 display: block;
}
#footer .footer-top .form .validation {
 color: red;
 display: none;
 margin: 0 0 20px;
 font-weight: 400;
 font-size: 13px;
}
#footer .footer-top .form label {
 color: var(--my-bg-color0);
 font-weight: 500;
}
#footer .footer-top .form input, #footer .footer-top .form textarea {
 border-radius: 0;
 box-shadow: none;
 border: 1px solid #dce1ec;
 font-size: 14px;
}
#footer .footer-top .form input::-webkit-input-placeholder, #footer .footer-top .form textarea::-webkit-input-placeholder {
 color: var(--my-bg-colorC);
}
#footer .footer-top .form input::-moz-placeholder, #footer .footer-top .form textarea::-moz-placeholder {
 color: var(--my-bg-colorC);
}
#footer .footer-top .form input:-ms-input-placeholder, #footer .footer-top .form textarea:-ms-input-placeholder {
 color: var(--my-bg-colorC);
}
#footer .footer-top .form input::placeholder, #footer .footer-top .form textarea::placeholder {
 color: var(--my-bg-colorC);
}
#footer .footer-top .form button[type="submit"] {
 background: var(--my-bg-color45);
 border: 0;
 border-radius: 3px;
 padding: 8px 30px;
 color: var(--myWhite);
 transition: 0.3s;
}
#footer .footer-top .form button[type="submit"]:hover {
 background: var(--my-bg-color3);
 cursor: pointer;
}
#footer .copyright {
 text-align: center;
 padding-top: 30px;
 color: var(--myCopyrightText);
 font-size: 15px;
}
#footer .copyright a {
 text-align: center;
 padding-top: 30px;
 color: var(--myCopyrightTextLink);
 font-size: 15px;
}
#footer .copyright a:hover {
 color: var(--myCopyrightTextLinkHover);
 text-decoration: underline;
}
#footer .credits {
 text-align: center;
 font-size: 14px;
 padding-top: 4px;
 color: var(--myCreditText);
}
#footer .credits a {
 color: var(--myCreditTextLink);
}
#footer .credits a:hover {
 color: var(--myCreditTextLinkHover);
}
/*--------------------------------------------------------------
# Responsive Media Queries
--------------------------------------------------------------*/
@media (min-width: 991px) {
 #call-to-action .cta-btn-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
 }
}
@media (min-width: 992px) {
 #ecHero .intro-info {
  padding-top: 80px;
 }
}
@media (max-width: 991px) {
 #topbar {
  display: none;
 }
 #header {
  height: 70px;
  padding: 15px 0;
 }
 #header .logo h1 {
  font-size: 28px;
  padding: 8px 0;
 }
 #ecCollection_Rapid .why-us-content {
  padding-top: 30px;
 }
 #ecPricing {
  padding-bottom: 30px;
 }
 #ecPricing .card {
  margin-bottom: 50px;
 }
}
@media (max-width: 768px) {
 .back-to-top {
  bottom: 15px;
 }
 #ecFaq #faq-list a {
  font-size: 18px;
 }
 #ecFaq #faq-list i {
  top: 13px;
 }
}
@media (max-width: 767px) {
 #ecHero {
  height: auto;
  padding: 80px 0 60px 0;
 }
 #ecHero .container {
  height: auto !important;
 }
 #ecHero .intro-img {
  width: 80%;
 }
 #ecHero .intro-info {
  text-align: center;
  padding-top: 40px;
 }
 #ecHero .intro-info h2 {
  font-size: 34px;
  margin-bottom: 30px;
 }
 .section-header p {
  width: 100%;
 }
}
@media (max-width: 574px) {
 #footer .footer-top .social-links a {
  margin-bottom: 25px;
 }
}
@media screen and (max-width: 400px) {
 h2 {
  font-size:32px !important;
 }
 h2 small {
  font-size:18px !important;
 }
 h3 {
  font-size:30px !important;
 }
#ecHero .intro-info h5 { /*add*/
 color: var(--myWhite);
 font-weight: 400;
 font-size: 18px;
 line-height: 22px !important;
}
#ecHero .intro-info h5 small { /*add*/
 /*color: var(--myWhite);
 font-weight: 400;*/
 font-size: 12px;
}
 #ecAboutMe h3 {
  font-size:20px !important;
 }
 p {
  font-size:13px !important;
  line-height:18px !important;
 }
 br {
  display: none;
 }
 br.iruyo {
  display: inline;
 }
}