5* Template: Tivo - SaaS App HTML Landing Page Template
   Author: Inovatik
   Created: Sep 2019
   Description: Master CSS file
*/

/*****************************************
Table Of Contents:

01. General Styles
02. Preloader
03. Navigation
04. Header
05. Customers
06. Description
07. Features
08. Features Lightboxes
09. Details
10. Video
11. Pricing
12. Testimonials
13. Newsletter
14. Footer
15. Copyright
16. Back To Top Button
17. Extra Pages
18. Sign Up and Log In Pages
19. Media Queries
******************************************/

/*****************************************
Colors:
- Backgrounds, buttons, bullets, icons - blue #5f4dee
- Backgrounds, light button, light body text - light gray #f3f7fd
- Headings text - black #333
- Body text - dark gray #555
******************************************/

/*メイン画像
---------------------------------------------------------------------------*/
/*ブロック全体*/
#mainimg {
	background: var(--base-color) url("../images/mainimg_sp.png") no-repeat center center / cover;
	width: 100%;
	padding-top: 150%;	/*アスペクト比2:3（3÷2=1.5）*/
	position: relative;
	overflow: hidden;
}

	/*画面420px以上の追加指定*/
	@media screen and (min-width:500px) {

	#mainimg {
		background: var(--base-color) url("../images/kv-bg.png") no-repeat center center / cover;
		padding-top: 56.25%;	/*アスペクト比16:9（9÷16=0.5624）*/
	}

	}/*追加指定ここまで*/

#mainimg > div {
	position: absolute;
	top: 60px;	/*header分を確保*/
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start ;
	
}
	/*画面420px以上の追加指定*/
	@media screen and (min-width:500px) {

	#mainimg > div {
		left: var(--space-large);
		align-items: flex-start;
		justify-content: center;
	}

	}/*追加指定ここまで*/

#mainimg .text-pc {
	display: none;
}
/*テキストのブロック*/
@media screen and (min-width:500px) {
	#mainimg .text-pc {
		display: block;
		font-size: 3.5rem;	/*文字サイズ。*/
		font-weight: 800;	/*太字に*/
		line-height: 1.8;	/*行間*/
		text-align: left;	/*テキストをセンタリング*/
		padding-left: 0.75rem;
	}

	#mainimg .text-pc p{
		font-size: 2rem;
	}

		#mainimg .text-pc h1 {
			font-size: 4rem;
			font-weight: bold;
		}

	#mainimg .text-sp {
		display: none;
	}

	#mainimg .text-pc span {
	font-size: 5rem;
	color: #fad02c;
}

#mainimg .text-pc strong {
	background-color: #37ab9d;
	padding: 5px 15px;
	color: #fff;
}

}

#mainimg .text-sp {
	margin: 30px auto 0;
	width: 95%;
}

#mainimg .text-sp p {
	font-size: 1.5rem;
	font-weight: bold;
}

#mainimg .text-sp h1 {
	display: inline-block;
	font-size: 2.2rem;
	font-weight: bold;
	background-color: #fad02c;
	padding: 8px 15px;
}

#mainimg .text-sp h1 span {
	color: #fff;
	font-size: 3rem;
}

#mainimg p {margin: 0;}

	/*画面420px以上の追加指定*/
	@media screen and (min-width:500px) {

	#mainimg .text {
		text-align: left;	/*テキストを左寄せ*/
	}

	#mainimg .text h1 {
		font-size: 3.6vw;	/*文字サイズ。*/
		font-weight: bold;
	}

	#mainimg .text p {
		font-size: 1.5vw;
		font-weight: bold;
	}

	#mainimg .text span {
		font-size: 5vw;
	}

	#mainimg .text strong {
		padding: 5px 30px;
	}

	}/*追加指定ここまで*/


/*ボタン*/
#mainimg .btn {
	font-size: 1rem;	/*文字サイズ*/
	font-weight: 600;	/*少し太字に*/
	margin-top: 3vw;	/*上のテキストとボタンの間のスペース。*/
	display: flex;
	gap: 1rem;	/*ボタン同士の余白*/
}
#mainimg .btn a {
	display: block;text-decoration: none;
	padding: 1rem 3rem;	/*ボタン内の余白。上下、左右へ。1rem=1文字分です。*/
	margin-bottom: 10px;	/*ボタン同士の隙間*/
	font-size: 1.2rem;
}

/*マウスオン時*/
#mainimg .btn a:hover {
	opacity: 1;
	transform: scale(1.05);	/*105%に拡大*/
}

	/*画面420px以上の追加指定*/
	@media screen and (min-width:420px) {

	/*ボタン*/
	#mainimg .btn {
		font-size: 1.4vw;	/*文字サイズ*/
	}
	
	#mainimg .btn a {
		margin: 0;
		padding: 0.6rem 3rem;	/*ボタン内の余白。上下、左右へ。1rem=1文字分です。*/
	}

	}/*追加指定ここまで*/


/*1つ目のボタン（お問い合わせ）の追加設定*/
#mainimg .btn p:nth-of-type(1) a {
	background: var(--primary-color);		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: #333;	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	border-radius: 3px;
}

/*2つ目のボタン（資料請求）への追加設定*/
#mainimg .btn p:nth-of-type(2) a {
	background: var(--base-inverse-color);	/*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	color: var(--base-color);				/*文字色。冒頭のbase-colorを読み込みます。*/
	letter-spacing: 0.1em;					/*文字間隔を少しだけ広く*/
}

/*ボタン内のアイコン*/
#mainimg .btn i {
	transform: scale(1.4);	/*140%に拡大*/
	padding-right: 0.8rem;	/*アイコンとテキストとの間の余白*/
}


/*main（メインコンテンツ）
---------------------------------------------------------------------------*/
main {
	flex: 1 0 auto;
	/* overflow-x: hidden; */
}

/*h2見出し（共通）*/
main h2 {
	margin: 0;padding: 0;
	font-size: 1.4rem;		/*文字サイズ。240%。*/
	font-weight: 800;		/*太字に*/
	margin-bottom: 5vw;		/*下にスペースを空ける*/
	display: flex;
	flex-direction: column-reverse;
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	position: relative;
}

	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {

	main h2 {
		font-size: 2.4rem;		/*文字サイズ。240%。*/
	}

	}/*追加指定ここまで*/


/*テキストをセンタリングする場合*/
main h2.c {
	align-items: center;
}

/*h2内のspan（小文字）*/
main h2 span {
	font-size: 0.85rem;	/*文字サイズ85%*/
	opacity: 0.5;		/*透明度。色を50%だけ出す。*/
	font-weight: normal;	/*太字ではなく標準にする*/
}

/*h2内のimg画像（「そのお悩み」という手書き風のふきだしに使っています）*/
h2 .deco-img {
	width: 100px;	/*画像の幅*/
	transform: rotate(-10deg);	/*左に10度傾ける。そのままがいいならこの１行を削除。*/
	position: absolute;
	left: -10px;	/*左からの配置場所*/
	top: -60px;	/*上からの配置場所。マイナスがついているので本来とは逆の方向に移動します。*/
}

h2 img {
	width: 35%;
	vertical-align: middle;
	margin: 0 20px;
}

	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {

	h2 .deco-img {
		width: 140px;	/*画像の幅*/
		left: 150px;		/*左からの配置場所*/
	}

	}/*追加指定ここまで*/


/*フッター
---------------------------------------------------------------------------*/
footer {
	background: var(--primary-color);		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	padding: 2rem;	/*フッター内の余白。2文字分。*/
	display: flex;
	flex-direction: column-reverse;
}

/*フッター直下の1つ目ブロック（ロゴやSNSアイコンが入ったブロック）*/
footer div:nth-of-type(1) {
    text-align: center;
}

/*フッター直下の２つ目ブロック（メニューブロック）*/
footer div:nth-of-type(2) {
    flex: 1;
    display: flex;
    gap: 2rem;	/*このブロック内の直下のブロック同士に空ける余白。４文字分。*/
}


	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {

	footer {
		flex-direction: row;
		gap: 4rem;		/*フッター内の直下のブロック同士に空ける余白。４文字分。*/
		padding: 4rem;	/*フッター内の余白。４文字分。*/
	}

	/*フッター直下の1つ目ブロック（ロゴやSNSアイコンが入ったブロック）*/
	footer div:nth-of-type(1) {
		text-align: left;
		width: 30%;	/*幅*/
	}

	/*フッター直下の２つ目ブロック（メニューブロック）*/
	footer div:nth-of-type(2) {
		justify-content: flex-end;	/*ブロックを右に寄せる。この行を削除すれば、ロゴ画像の方によります。*/
		gap: 4rem;	/*このブロック内の直下のブロック同士に空ける余白。４文字分。*/
	}

	}/*追加指定ここまで*/


footer ul {
	margin: 0;padding: 0;list-style: none;
	margin-bottom: 2rem;
}


/*Copyright部分*/
footer small {
	display: block;
	padding-top: 2rem;	/*SNSアイコンとコピーライトの間の余白調整*/
}


/*フッター内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
.icons {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	justify-content: center;
	gap: 1rem;	/*アイコン同士のマージン的な要素。１文字分。*/
}

	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {
	
	.icons {
		justify-content: flex-start;
	}

	}/*追加指定ここまで*/

.icons i {
	font-size: 30px;	/*アイコンサイズ*/
}


/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
	text-decoration: none;
	display: block;
	background: rgba(0,0,0,0.9);
	text-align: right;
	color: #ccc;
	font-size: 10px;
}
.pr a::before {
	font-family: "Font Awesome 6 Free";
	content: "\e2ca";
	font-weight: bold;
	margin-right: 0.5em;
}


/*c2（２カラムレイアウト用）
---------------------------------------------------------------------------*/

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	.c2 {
		display: flex;
		gap: 2rem;
	}

	/*左側のタイトルブロックの幅*/
	.c2 .title {
		width: 30%;
	}

	/*右側のテキストブロック*/
	.c2 .text {
		flex: 1;
	}

	}/*追加指定ここまで*/


/*FAQ
---------------------------------------------------------------------------*/

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	.faq {
		font-size: 1.2rem;	/*文字サイズを120%*/
	}

	}/*追加指定ここまで*/

/*質問*/
.faq dt {
	display: flex;
	align-items: flex-start;
	border-radius: 3px;		/*角を少しだけ丸く*/
	margin-bottom: 1rem;	/*下に空けるスペース。質問ブロック同士の余白です。*/
	background: var(--base-color);		/*背景色。冒頭のbase-colorを読み込みます。*/
	color: var(--base-inverse-color);	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	padding: 1rem;	/*ブロック内の余白。１文字分。*/
}

/*「Q」アイコン*/
.faq dt::before {
	font-family: "Font Awesome 6 Free";
	content: "\51";	/*アイコン画像の指定*/
	margin-right: 0.5rem;	/*右側に空けるスペース*/
	background: var(--primary-color);		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	border-radius: 50%;	/*角を丸くする*/
	width: 30px;		/*幅*/
	line-height: 30px;	/*高さ*/
	text-align: center;
	flex-shrink: 0;
	margin-top: 0.2em;	/*微調整*/
}

/*回答*/
.faq dd {
	padding: 0 1rem 1rem 3.7rem;	/*ボックス内の余白。上、右、下、左への順番。*/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}


/*お知らせブロック
---------------------------------------------------------------------------*/
/*記事の下に空ける余白*/
.new dd {
	padding-bottom: 1rem;
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new dt span {
	display: inline-block;
	text-align: center;
	line-height: 1.8;		/*行間（アイコンの高さ）*/
	border-radius: 2px;		/*角を丸くする指定*/
	padding: 0 1rem;		/*上下、左右へのブロック内の余白*/
	width: 8rem;			/*幅。8文字分。*/
	transform: scale(0.85);	/*85%のサイズに縮小*/
	border: 1px solid #777;	/*枠線の幅、線種、色*/
}

/*icon-bg1。サンプルテンプレートでは「重要」と書いてあるマーク*/
.new .icon-bg1 {
	border-color: transparent;	/*枠線を透明に*/
	background: #cd0000;		/*背景色*/
	color: #fff;				/*文字色*/
}

/*icon-bg2。サンプルテンプレートでは「サービス」と書いてあるマーク*/
.new .icon-bg2 {
	border-color: transparent;				/*枠線を透明に*/
	background: var(--primary-color);		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*ブロック全体*/
	.new {
		display: grid;	/*gridを使う指定*/
		grid-template-columns: auto 1fr;	/*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
	}

	}/*追加指定ここまで*/


/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*画像たちを囲むブロック*/
.slide-thumbnail1 .img {
	display: flex;
}

/*画像*/
.slide-thumbnail1 .img img {
	padding: 5px;	/*画像の余白*/
}

/*右から左へ、左から右へ、のアニメーション*/
.slide-thumbnail1 .rtl, .slide-thumbnail1 .ltr {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.slide-thumbnail1 .rtl {animation-name: slide-rtl;}
.slide-thumbnail1 .ltr {animation-name: slide-ltr;}

@keyframes slide-rtl {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}


/*テキストスライド
---------------------------------------------------------------------------*/
.text-slide-wrapper {
	overflow-x: hidden;
	margin-top: calc(-1 * (1.6 * var(--space-large)));	/*本来の位置より上にずらす。ずらしたくなければこの１行を削除。*/
}

.text-slide {
	font-family: "Jost", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	display: flex;
	white-space: nowrap;
    font-size: 15vw;	/*文字サイズ*/
	opacity: 0.05;		/*透明度。色が5%出た状態。*/
}

.text-slide span {
	padding: 0 20px;
}


/*btn1（ボタン）
---------------------------------------------------------------------------*/
.btn1 a {
	text-shadow: none;display: block;text-decoration: none;
	background: var(--primary-color);		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	font-size: 1.4rem;		/*文字サイズ。140%に。*/
	padding: 0.5rem 2rem;	/*ボタン内の余白。上下、左右へ。*/
	border-radius: 100px;	/*角を丸くする*/
	text-align: center;		/*テキストをセンタリング*/
}

/*bg-primary-colorの上で使う場合*/
.bg-primary-color .btn1 a {
	background: var(--primary-inverse-color);		/*背景色。冒頭のprimary-inverse-colorを読み込みます。*/
	color: var(--primary-color);	/*文字色。冒頭のprimary-colorを読み込みます。*/
}

/*マウスオン時*/
.btn1 a:hover {
	opacity: 1;
	transform: scale(1.05);	/*105%に拡大*/
	background: var(--primary-inverse-color);	/*背景色。冒頭のprimary-inverse-colorを読み込みます。*/
	color: var(--primary-color);				/*文字色。冒頭のprimary-colorを読み込みます。*/
}

/*bg-primary-colorの上で使う場合*/
.bg-primary-color .btn1 a:hover {
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*矢印アイコン*/
.btn1 a::after {
	font-family: "Font Awesome 6 Free";	/*Font Awesomeを使う指示*/
	content: "\f0a9";		/*使いたいアイコン名（Font Awesome）をここで指定*/
	font-weight: bold;		/*この手の設定がないとアイコンが出ない場合があります*/
	margin-left: 0.5em;		/*アイコンとテキストとの間に空けるスペース*/
}


/*bg-primary-color
---------------------------------------------------------------------------*/
.bg-primary-color {
	background: var(--primary-color);		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}


/*bg1
---------------------------------------------------------------------------*/
.bg1 {
	background-color: var(--base-inverse-color);	/*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	color: var(--base-color);	/*文字色。冒頭のbase-colorを読み込みます。*/
}


/*bg2
---------------------------------------------------------------------------*/
.bg2 {
	background: #f3f3e9;	/*背景色*/
}


/*bg3
---------------------------------------------------------------------------*/
.bg3 {
	background: #fff;	/*背景色*/
}


/*パターン背景
---------------------------------------------------------------------------*/
/*bg-pattern1*/
.bg-pattern1 {
	background-image: url("../images/bg_pattern1.png");	/*背景パターンの読み込み*/
	background-repeat: repeat;
	background-position: center top;
	background-size: 10px;	/*サイズ*/
}

/*bg-pattern2*/
.bg-pattern2 {
	background-image: url("../images/bg_pattern2.png");	/*背景パターンの読み込み*/
	background-repeat: repeat;
	background-position: center top;
	background-size: 10px;	/*サイズ*/
}

/*bg-pattern3*/
.bg-pattern3 {
	background-image: url("../images/bg_pattern3.png");	/*背景パターンの読み込み*/
	background-repeat: repeat;
	background-position: center top;
	background-size: 10px;	/*サイズ*/
}


/*ボックス下部を三角形（▼）にする場合。三角形の高さ自体はmask-imageのd=の中にある２つの「95」という数値で変更できます。小さいほど角度が大きくなります。
---------------------------------------------------------------------------*/
.arrow {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,95 L50,100 L0,95 Z' fill='%23000000'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*三角形の高さの再設定。95を90に変更しています。*/
	.arrow {
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,90 L50,100 L0,90 Z' fill='%23000000'/%3E%3C/svg%3E");
		padding-bottom: 150px;
	}
	

	}/*追加指定ここまで*/


/*背景色が切れているのが見えないように微調整*/
.arrow + section {
	padding-top: calc(var(--space-large) + 150px);
	margin-top: -150px;
}


/*list-grid-simple（制作実績ブロック）
---------------------------------------------------------------------------*/
.list-grid-simple .list * {margin: 0;padding: 0;}

/*listブロック全体を囲むブロック*/
.list-grid-simple {
    display: grid;
    grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
    gap: 3rem;	/*ブロックの間に空けるマージン的な指定*/
		margin-bottom: 50px;
}

/*ボックス１個あたり*/
.list-grid-simple .list {
    display: grid;
	position: relative;
}

.list-grid-simple .list a:hover {
	transform: scale(1.1);
}

/*h4見出し*/
.list-grid-simple .list h4 {
	margin-top: 0.5rem;		/*上に0.5文字分のスペースを空ける*/
	font-weight: normal;	/*太さを標準に*/
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*listブロック全体を囲むブロック*/
	.list-grid-simple {
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	}

	}/*追加指定ここまで*/


/*list-grid1（３カラムボックス）
---------------------------------------------------------------------------*/
.list-grid1 .list * {margin: 0;padding: 0;}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*listブロック全体を囲むブロック*/
	.list-grid1 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 3vw;	/*ブロックの間に空けるマージン的な指定*/
	}

	}/*追加指定ここまで*/


/*ボックス１個あたり*/
.list-grid1 .list {
    display: grid;
	margin-bottom: 3rem;	/*ボックスの下に空けるスペース*/
	position: relative;
	border-radius: 5px;	/*角を少しだけ丸く*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
	box-shadow: 2px 5px 5px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.1は色が10%出た状態。*/
	padding: 2rem;	/*ボックス内の余白。２文字分。*/
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*ボックス１個あたり*/
	.list-grid1 .list {
		margin-bottom: 0;	/*下に空けるスペースをなくす*/
	}

	}/*追加指定ここまで*/


/*bg-black内のボックスへの追加設定*/
.list-grid1 .list.bg-black {
	background: #111;	/*背景色*/
	color: #fff;		/*文字色*/
}

/*ナンバー（01〜03の飾り番号）*/
.list-grid1 .list .num {
	position: absolute;
	left: -20px;		/*左からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	top: -30px;			/*上からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	font-size: 60px;	/*文字サイズ*/
	line-height: 1;
	font-family: "MonteCarlo", cursive;	/*フォント指定*/
	opacity: 0.2;	/*透明度。色を20%出す。*/
}

/*引用符（“）の装飾*/
.list-grid1 .list h4.kazari::before {
	content: "“";	/*わかりづらいですが、中央にあるのが引用符でこの文字を出力しています。*/
	position: absolute;
	left: -1rem;	/*左からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	top: -40px;		/*上からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	opacity: 0.2;	/*透明度。色を20%出す。*/
	font-size: 60px;	/*文字サイズ*/
	line-height: 1;
}

/*ボックス内のh4見出し*/
.list-grid1 .list h4 {
	font-size: 1.4rem;	/*文字サイズを140%に*/
	line-height: 1.6;	/*行間*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
	position: relative;
}

/*ボックス内のp要素*/
.list-grid1 .list p {
	font-size: 0.9rem;	/*文字サイズを90%に*/
	line-height: 1.6;	/*行間*/
	font-weight: normal;
}

/*bg-black内のp要素への追加設定*/
.list-grid1 .list.bg-black p {
	color: #999;	/*文字色*/
}

/*ボックス内のfigure画像*/
.list-grid1 .list figure.icon {
	margin: 0 auto;
	width: 100px;		/*画像サイズ*/
	margin-top: -40px;	/*本来の場所より上にずらす*/
}

/*bg1内のfigureへの追加設定*/
.bg1 .list-grid1 .list figure.icon {
	filter: grayscale(100%) brightness(90%);	/*画像をグレースケールにし、明るさも少し暗くする。そのままの画像色を出したければこの１行を削除。*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*ボックス内のfigure画像*/
	.list-grid1 .list figure.icon {
		width: 150px;		/*画像サイズ*/
		margin-top: -50px;	/*本来の場所より上にずらす*/
	}

	}/*追加指定ここまで*/



/*list-c2（お問い合わせ、資料請求）
---------------------------------------------------------------------------*/
.list-c2 > a {
    text-decoration: none;
    display: block;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	/*２つのボックスを囲むボックス*/
	.list-c2 {
		display: flex;	/*横並びにする*/
		gap: 2vw;		/*ブロックの間に空けるマージン的な指定*/
		width: 90%;
	}

	}/*追加指定ここまで*/


/*ボックス１個あたり*/
.list-c2 .list {
	width: 90%;
	text-align: center;
	position: relative;
	overflow-y: hidden;
	color: #fff;		/*文字色*/
	text-shadow: 0px 0px 10px rgba(0,0,0,0.6);	/*テキストの影。右へ、下へ、ぼかす量、0,0,0は黒のことで0.6は色が出た状態。*/
	padding: 2rem 2rem;	/*上下、左右へのボックス内の余白*/
	margin: 1rem auto;		/*上下、左右へのマージン*/
	border-radius: 30px;	/*角を丸くする指定*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	.list-c2 > * {
		flex: 1;
	}
	.list-c2 .list {
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.list-c2 > a .list {
		height: 100%;
	}
	
	/*1つ目のボックス（お問い合わせ）*/
	.list-c2 .list:nth-of-type(1) {
		border-radius: 0px 30px 30px 0px;	/*角丸の上書き。左上、右上、右下、左下への順番。*/
	}
	
	/*2つ目のボックス（資料請求）*/
	.list-c2 .list:nth-of-type(2) {
		border-radius: 30px 0px 0px 30px;	/*角丸の上書き。左上、右上、右下、左下への順番。*/
	}
	
	}/*追加指定ここまで*/


/*左側ボックスの背景*/
.list-c2 .list.image1 {
	background: url("../images/bg_contact.jpg") no-repeat center center / cover;
	padding: 50px;
}

/*右側ボックスの背景*/
.list-c2 .list.image2 {
	background: url("../images/bg_request.jpg") no-repeat center center / cover;
}

/*h4見出し*/
.list-c2 h4 {
	line-height: 1.2;	/*行間を狭く*/
	font-family: "Jost", sans-serif;	/*フォント指定*/
	font-optical-sizing: auto;
	font-weight: 300;	/*フォントの太さ。100〜900の間で指定が可能。大きいほど太くなります。*/
}

/*h4見出し内のメインテキスト（main-text）*/
.list-c2 h4 .main-text {
	display: block;
	font-size: 3rem;		/*文字サイズ。3倍。*/
	padding-top: 1.0rem;	/*上に空ける余白*/
	padding-bottom: 2rem;	/*下に空ける余白*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	.list-c2 h4 .main-text {
		font-size: 4rem;	/*文字サイズ。4倍。*/
	}

	}/*追加指定ここまで*/


/*テキスト*/
.list-c2 .list .text {
	position: relative;z-index: 1;
	font-size: 0.85rem;	/*文字サイズ85%*/
}

/*マウスオン用のアニメーション*/
.list-c2 .list::before {
	content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
	background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transition: transform 0.3s 0.1s;	/*アニメーションの速度（0.3秒）と待機時間（0.1秒）。*/
}
.list-c2 .list:hover::before {
	transform: translateY(100%);
}


/*背景画像が少しずつ上に移動する
---------------------------------------------------------------------------*/
/*ブロック全体*/
.bg-slideup {
	margin-left: calc(-1 * var(--space-large));
	margin-right: calc(-1 * var(--space-large));
}

section > .bg-slideup:first-child {
	margin-top: calc(-1 * var(--space-large));
}

/*画像ボックス*/
.bg-slideup .image {
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	padding: 8vw 20px;	/*上下、左右へのボックス内の余白。画面幅100% = 100vwです。*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 3rem;		/*英語テキストと日本語テキストの間のスペース。３文字分。*/
	color: #fff;	/*文字色*/
}

/* 英語テキスト */
.en-text {
	writing-mode: horizontal-tb;
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/* 日本語テキスト */
.jp-text {
	writing-mode: vertical-rl;
	text-orientation: upright;
}

/*制作実績ブロックの画像指定*/
#products .bg-slideup .image {
	background-image: url("../images/bg_works.jpg");	/*背景画像の指定*/
}

/*会社概要ブロックの画像指定*/
#company .bg-slideup .image {
	background-image: url("../images/bg_company.jpg");	/*背景画像の指定*/
}


/*list-normal1（「お客様の声」「制作の流れ」ブロックで使用）
---------------------------------------------------------------------------*/
.list-normal1 * {margin: 0;padding: 0;}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*テキストブロック*/
	.list-normal1 .text {
		flex: 1;
	}
	
	/*画像とテキストの左右を入れ替えたい場合（600px以上のみ使用可能）*/
	.reverse {
		flex-direction: row-reverse;
		background-position: left bottom !important;
	}
	
	}/*追加指定ここまで*/


/*ブロック１個あたり*/
.list-normal1 .list {
	background: var(--base-color) url("../images/bg-dot.png") no-repeat right bottom / 200px;
	color: var(--base-inverse-color);	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	padding: 3rem;
	margin-bottom: 2rem;
	box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
	position: relative;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*ブロック１個あたり*/
	.list-normal1 .list {
		display: flex;
		gap: 2rem;	/*画像とテキストの間のスペース。２文字分。画像がない場合はこれは適用されません。*/
	}
	
	}/*追加指定ここまで*/


/*画像ブロック*/
.list-normal1 figure {
	width: 30%;	/*幅*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*画像の下マージンのリセット*/
	.list-normal1 figure {
		margin-bottom: 0;
	}

	}/*追加指定ここまで*/


/*h4見出し*/
.list-normal1 h4 {
	font-size: 1.2rem;	/*文字サイズ200%*/
	line-height: 1.5;	/*行間*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	.list-normal1 h4 {
		font-size: 2rem;	/*文字サイズ200%*/
		line-height: 1.8;	/*行間*/
	}

	}/*追加指定ここまで*/


/*h4内にアイコンを配置した場合（制作の流れの見出し左のアイコン）*/
.list-normal1.flow h4 i {
	margin-right: 1rem;	/*アイコンとテキストとの間の余白*/
}

/*名前*/
.list-normal1 .name {
	text-align: right;	/*右寄せ*/
	margin-top: 1rem;	/*上に空けるスペース*/
}

/*制作の流れで使用しているブロック間の「▼」の矢印*/
.list-normal1.flow .list::after {
	content: "▼";	/*このテキストを出力します*/
	position: absolute;
	left: 50%;		/*左からの配置場所。厳密ではありませんが、文字が小さいので問題ないかと。*/
	bottom: -2rem;	/*下からの配置場所。マイナスがつくので本来の場所とは逆向きに移動。*/
	transform: scaleX(1.5);	/*横幅を150%に*/
	opacity: 0.5;			/*透明度。色が50%出た状態。*/
}

/*最後のボックスだけ下矢印を出さない*/
.list-normal1.flow .list:last-child::after {
	content: none;
}


/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	font-weight: bold;		/*太字に*/
	padding: 0.5rem 1rem;	/*ボックス内の余白*/
	background: var(--base-inverse-color);	/*背景色*/
	color: var(--base-color);				/*文字色*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	width: 100%;				/*幅*/
	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	margin-bottom: 2rem;		/*テーブルの下に空けるスペース。２文字分。*/
}
/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid #ccc;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 td, .ta1 th {
	word-break: break-all;
	background: var(--base-color);		/*背景色。冒頭のbase-colorを読み込みます。*/
	color: var(--base-inverse-color);	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	text-align: left;	/*左よせにする*/
	padding: 0.5rem;	/*余白*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 25%;			/*幅*/
	text-align: center;	/*テキストをセンタリング*/
}


/*テーブル（プラン）　※基本的な設定は上のta1で設定
---------------------------------------------------------------------------*/
.ta1.plan, .ta1.plan td, .ta1.plan th {
	text-align: center;
	border: 2px solid var(--base-inverse-color);	/*テーブルの枠線の幅、線種、varは色のことで冒頭のbase-inverse-colorを読み込みます*/
	padding: 0.5rem;
}

	/*画面幅801px以上の追加指定*/
	@media screen and (min-width:801px) {

	.ta1.plan, .ta1.plan td, .ta1.plan th {
		font-size: 1.2rem;
		padding: 2rem 1rem;
	}

	}/*追加指定ここまで*/


/*一番左側の縦列の幅*/
.ta1.plan th:first-child,
.ta1.plan td:first-child {
    width: 12rem;	/*目安としては約12文字分。*/
}

/*１行目のプランブロック*/
.ta1.plan th {
	width: auto;
	position: relative;
	overflow: hidden;
}

/*１行目のプランブロック内の「おすすめ」表示*/
.ta1.plan th .osusume {
	position: absolute;
	left: 0px;
	top: 0px;
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 0.8rem;		/*文字サイズ80%*/
	width: 120px;
	text-align: center;
	padding-top: 43px;
	padding-bottom: 2px;
	transform: rotate(-45deg) translate(-18px, -60px);
}

/*１行目のプランブロック内のアイコン（王冠マーク）*/
.ta1.plan th i {
	display: block;
	font-size: 1.4rem;	/*サイズ*/
}

/* 左から2つ目の「エコノミープラン」の見出し（th）に背景色を設定 */
.ta1.plan th:nth-child(2) {
	background: #fffcda;
}
/* 左から2つ目の「エコノミープラン」の列（td）に背景色を設定 */
.ta1.plan td:nth-child(2) {
	background: #fffcda;
}

/* 左から３つ目の「スタンダードプラン」の見出し（th）に背景色を設定 */
.ta1.plan th:nth-child(3) {
	background: var(--primary-color);		/*背景色。冒頭のprimary-colorを読み込みます。*/
}
/* 左から３つ目の「スタンダードプラン」の列（td）に背景色を設定 */
.ta1.plan td:nth-child(3) {
	background: var(--primary-color);		/*背景色。冒頭のprimary-colorを読み込みます。*/
}

/* 左から４つ目の「プレミアムプラン」の見出し（th）に背景色を設定 */
.ta1.plan th:nth-child(4) {
	background: #fffcda;
}
/* 左から４つ目の「プレミアムプラン」の列（td）に背景色を設定 */
.ta1.plan td:nth-child(4) {
	background: #fffcda;
}

/*１行目の金額*/
.plan th > span {
	display: block;
	font-size: 1.6rem;	/*文字サイズを160%*/
	font-family: "Oswald", sans-serif;	/*フォント指定*/
	font-optical-sizing: auto;
	font-weight: 700;	/*太さ。200〜900まで指定できます。数値が大きいほど太くなる。*/
}

	/*画面幅801px以上の追加指定*/
	@media screen and (min-width:801px) {

	/*１行目の金額*/
	.plan th > span {
		font-size: 2.4rem;	/*文字サイズを240%*/
	}

	}/*追加指定ここまで*/


	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

	.scroll .ta1.plan {width: 500px;}
	.scroll {overflow-x: auto;}
	#container {
		width: 100%;
		margin: 0;
	}

	}/*追加指定ここまで*/


/*調整用スタイル
---------------------------------------------------------------------------*/
.padding0 {
	padding: 0 !important;
}
.padding-lr0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.pt-100 {
	padding-top: 100px !important;
}

.pt-0 {
	padding-top: 0px !important;
}

.pr-0 {
	padding-right: 0px !important;
}

.pb-0 {
	padding-bottom: 0px !important;
}

.pl-0 {
	padding-left: 0px !important;
}

@media screen and (max-width:800px) {
	.pt-sp-30 {
		padding-top: 30px !important;
	}
}



/*マニュアルページ用
---------------------------------------------------------------------------*/
#manual #container {
	all: unset;
}
.manual {
	background: #fff;
	color: #333;
	padding: 5vw;
}
.manual .look {background: #eee;}
.manual h2 {
	margin-top: 2rem;
	font-size: 2rem;
	text-align: center;
}
.manual h3 {
	line-height: 3;
	margin-top: 2rem;
}
.manual h3 span {
	background: linear-gradient(transparent 60%, yellow);
}
.manual h3 + p {margin-top: -0.5rem;}
.manual.margin-left {padding-left: 300px;}

	/*画面幅999px以下の追加指定*/
	@media screen and (max-width:999px) {

	.manual.margin-left {padding-left: 4vw;}

	}/*画面幅900px以上の追加指定ここまで*/


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb-space-large {margin-bottom: var(--space-large) !important;}
.look {line-height: 1.5 !important; display: inline-block;padding: 5px 10px;background: rgba(0,0,0,0.1);border: 1px solid rgba(0,0,0,0.3);border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}
.inline-block {display: inline-block !important;}
.relative {position: relative;}
.marker {background: linear-gradient(transparent 50%, yellow);}
pre {white-space: pre-wrap;word-wrap: break-word;overflow-wrap: break-word;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}

	}/*追加指定ここまで*/

/*ヘッダー内メニュー
---------------------------------------------------------------------------*/
/*900px未満では非表示*/
#menubar header nav ul {display: none;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
		
	/*メニューブロック全体の設定*/
	#menubar header > nav > ul {
		margin-right: 100px;	/*ハンバーガーアイコンに重ならないように余白*/
		display: flex;			/*横並びにする*/
	}

	/*メニュー１個あたりの設定*/
	#menubar header nav li a {
		display: block;text-decoration: none;
		font-size: 0.9rem;		/*文字サイズ90%*/
		padding: 0.5rem 1rem;	/*メニュー内の余白。上下、左右へ。*/
	}
	
	/*ドロップダウンメニュー冒頭の矢印アイコン*/
	#menubar header nav i {
		padding-right: 0.5rem;	/*右に空ける余白*/
	}

	}/*追加設定ここまで*/


/*ヘッダー内メニュー、開閉メニュー、共通のドロップダウン設定
---------------------------------------------------------------------------*/
#menubar header nav ul ul,
#menubar ul ul {
	animation: fadeIn 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}


/*ヘッダー内メニューのドロップダウン
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
#menubar header nav ul ul {
	position: absolute;z-index: 100;
	margin-left: 1rem;
}

/*メニュー１個あたりの設定*/
#menubar header nav ul ul a {
	padding: 0.3em 1em;					/*上下、左右へのメニュー内の余白*/
	margin-top: 4px;					/*上に空けるスペース。ドロップダウン同士の隙間。*/
	background: var(--base-color);		/*背景色。冒頭のbase-colorを読み込みます。*/
	color: var(--base-inverse-color);	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	border: 1px solid var(--base-inverse-color);	/*枠線の幅、線種、varは色の指定で冒頭のbase-inverse-colorを読み込みます。*/
	border-radius: 3px;					/*角を少し丸くする指定*/
}


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar a {display: block;text-decoration: none;}

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {display: block;}
#menubar.display-block {display: block;}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {display: none;}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
	font-family: "Font Awesome 6 Free";	/*Font Awesomeを使う指示*/
	content: "\f078";		/*使いたいアイコン名（Font Awesome）をここで指定*/
	font-weight: bold;		/*この手の設定がないとアイコンが出ない場合があります*/
	margin-right: 0.5em;	/*アイコンとテキストとの間に空けるスペース*/
}

/*メニューブロック内のロゴ画像の幅*/
#menubar .logo {
	width: 200px;
}


/*開閉メニュー
---------------------------------------------------------------------------*/
/*animation1のキーフレーム設定*/
@keyframes animation1 {
	0% {right: -100vw;}
	100% {right: 0px;}
}

/*メニューブロック設定*/
#menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	right: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 90px 10vw 50px;				/*ブロック内の余白。上、左右、下への順番。*/
	background: var(--primary-color);		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	animation: animation1 0.2s both;		/*animation1を実行する。0.2sは0.2秒の事。*/
}

/*メニュー１個あたりの設定*/
#menubar li {
	margin: 1rem 0;			/*メニューの外側に空けるスペース。上下、左右への順番。*/
}
#menubar a {
	border-radius: 5px;		/*角を丸くする指定*/
	padding: 1rem 2rem;		/*メニュー内の余白。上下、左右へ。*/
	background: var(--base-inverse-color);		/*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	color: var(--base-color);					/*背景色。冒頭のbase-colorを読み込みます。*/
}

/*子メニュー*/
#menubar ul ul a {
	background: var(--base-color);		/*背景色。冒頭のbase-colorを読み込みます。*/
	color: var(--base-inverse-color);	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	border: 1px solid var(--base-inverse-color);	/*枠線の幅、線種、varは色の指定で冒頭のbase-inverse-colorを読み込みます。*/
	margin-left: 2rem;	/*左に空けるスペース*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/

#menubar_hdr {
	animation: fadeIn 0s 0.2s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	right: 0px;				/*右からの配置場所指定*/
	top: 0px;				/*上からの配置場所指定*/
	padding: 20px 15px;		/*上下、左右への余白*/
	width: 60px;			/*幅（３本バーが出ている場合の幅になります）*/
	height: 60px;			/*高さ*/
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transform-origin: right top;
	background: var(--base-inverse-color);	/*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	border-radius: 0px 0px 0px 10px;		/*角を丸くする指定。左上、右上、右下、左下への順番。*/
}

	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {

	#menubar_hdr {
		display: none;
	}

	}/*追加指定ここまで*/


/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	border-top: 1.5px solid var(--base-color);	/*線の幅、線種、varは色のことで冒頭のbase-colorを読み込みます。*/
}

/*×印が出ている状態の3本バーの背景色*/
#menubar_hdr.ham {
	background: #ff0000;
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	/*変形の起点。センターに。*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(6px, 5.8px);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(7px, -7px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示にする*/
}




















/*************************/
/*     05. Customers     */
/*************************/
.slider-1 {
	padding-top: 5rem;
	padding-bottom: 3.25rem;
}

.slider-1 .slider-container {
	text-align: center;
}

/* #worries ul {
	display: flex;
	justify-content: space-around;
	width: 60%;
	margin: auto;
	text-align: left;
} */

/* #worries ul li {
	font-weight: bold;
	list-style: none;
	width: 25%;
	color: #4C5253;
} */

#worries  .card .card-image {
	/* width: 50%; */
	padding: 20px;
	border-radius: 50%;
	background-color: #F2F5F9;
	margin: 0 auto 30px;
}

#worries  img {
	width: 100%;
}




/***************************/
/*     06. Description     */
/***************************/
.cards-1 {
	padding-top: 3.25rem;
	padding-bottom: 3rem;
	text-align: center;
}

.cards-1 .heading-wrap {
	background-color: #586365;
	width: 70%;
	margin: auto;
	margin-bottom: 3.5rem;
	/* border: 2px solid #333; */
	border-radius: 100vh;
	padding: 15px 0;
}

.cards-1 .heading-wrap h2 {
	color: #fff;
	margin-bottom: 0;
}

.cards-1 .card {
	max-width: 21rem;
	margin-right: auto;
	margin-bottom: 3.5rem;
	margin-left: auto;
	padding: 0;
	border: none;
}

.cards-1 .card-image {
	max-width: 16rem;
	margin-right: auto;
	margin-bottom: 2rem;
	margin-left: auto;
}

.cards-1 .card-title {
	margin-bottom: 0.5rem;
}

.cards-1 .card-body {
	padding: 0;
}

/******************
  production-solution
******************/
#solution {
	width: 60%;
	margin: auto;
	text-align: center;
	color: #37ab9d;
	margin-top: 120px;
	position: relative;
}

#solution::before {
	position: absolute;
	top: -130px;
	left: 50%;
	font-family: "Font Awesome 5 Free";
  content: '\f103';
  font-weight: 900;
	font-size: 5em;
	transform: translateX(-50%);
}

#solution .solution__title {
	margin-bottom: 30px;
}

#solution .solution__title span {
	font-size: 2em;
	font-weight: bold;
	position: relative;
	color: #4C5253;
}

#solution .solution__title span::before,
#solution .solution__title span::after {
	display: inline-block;
  position: absolute;
  top: 50%;
  width: 25px;
  height: 3px;
  border-radius: 5px;
  background-color: #4C5253;
  content: "";
}

#solution .solution__title span::before {
  left: -30px;
  -webkit-transform: rotate( 50deg );
  transform: rotate( 50deg );
}
#solution .solution__title span::after {
  right: -30px;
  -webkit-transform: rotate( -50deg );
  transform: rotate( -50deg );
}

#solution p {
	color: #4C5253;
	font-weight: bold;
	text-align: left;
	margin-bottom: 30px;
}

#solution .solution__content-wrap .solution__content {
	display: flex;
  justify-content: space-around;
  /* width: 10%; */
  margin: auto;
  margin-bottom: 50px;
  padding: 10px 0;
  border: 2px solid #37ab9d;
  border-radius: 10px;
}

#solution .solution__content-wrap .solution__content .solution__content--text {
  width: 50%;
}

#solution .solution__content-wrap .solution__content h2 {
  color: #4C5253;
  margin-top: 30px;
  margin-bottom: 30px;
	text-align: left;
}

#solution .solution__content-wrap .solution__content h2 .blue {
  color: #37ab9d;
}

#solution .solution__content-wrap .solution__content p {
  font-size: 1.2em;
  font-weight: bold;
  color: #4C5253;
}

#solution .solution__content-wrap .solution__content-image {
  width: 25%;
	display: flex;
	align-items: center;
}

#solution .solution__content-wrap .solution__content-image img {
  width: 100%;
}

/******************
  production-plan
******************/
#plan {
	/* background-color: #37ab9d; */
}

#plan .section__title,
#plan .plan__content-wrap {
	background-color: #37ab9d;
}

#plan .section__title h2 {
	margin-bottom: 0;
	padding-bottom: 5rem;
}

#plan .button--blue {
	background-color: #37ab9d;
	margin-top: 0;
	padding-top: 30px;
}

.plan__content-wrap {
	/* width: 80%; */
	/* margin: auto; */
	/* display: flex; */
	justify-content: space-around;
	/* margin-top: 30px; */
}

.plan__content-wrap .plan__content {
	width: 30%;
	background-color: #fff;
	border-radius: 15px;
	text-align: left;
	box-shadow: 4px 4px 10px 0 #586365;
}

.demo__content .plan__content {
	width: 100%;
	padding-bottom: 50px;
	background-color: #fff;
	border-radius: 15px;
	text-align: left;
	box-shadow: 4px 4px 10px 0 #d6e0e3;
}

.plan__content-wrap .plan__content .plan__title,
.demo__content .plan__title {
	padding: 15px 0;
	border-radius: 15px 15px 0 0;
	background-color: #333;
	color: #fff;
	text-align: center;
	font-size: 1.5em;
}

.plan__title h3 {
	color: #fff;
}

.demo__content .plan__title {
	width: 100%;
}

.plan__content-wrap .plan__content .plan__price,
.demo__content .plan__price {
	margin-top: 15px;
	text-align: center;
}

.plan__content-wrap .plan__content p,
.demo__content .plan__price p {
	font-size: 1.5em;
	font-weight: bold;
}

.plan__content-wrap .plan__content .plan__price--span,
.demo__content .plan__price--span {
	font-size: 2em;
	margin-left: 10px;
	color: #37ab9d;
}


.plan__content-wrap .plan__content ul {
	width: 80%;
	margin: auto;
	padding: 15px 30px;
	margin-top: 15px;
	border-top: 1px solid #ececec;
}

.plan__content-wrap .plan__content ul li {
	list-style: none;
	font-weight: bold;
	color: #4C5253;
}

.service__button a {
  background: #2FC1FF;
	color: #FFF;
	padding: 15px 30px;
	border-radius: 8px;
	font-weight: bold;
}
.service__button a:after {
content: "";
position: absolute;
top: 50%;
bottom: 0;
right: 2rem;
font-size: 90%;
display: flex;
justify-content: center;
align-items: center;
transition: right 0.3s;
width: 6px;
height: 6px;
border-top: solid 2px currentColor;
border-right: solid 2px currentColor;
transform: translateY(-50%) rotate(45deg);
}

.service__button a:hover {
background: #FFF;
color: #313131;
}

.service__button a:hover:after {
right: 1.4rem;
}

/******************
  flow
******************/
/* #flow {
  margin-top: 100px;
  background-color: #FFF;
} */

#flow .flow__contents {
  width: 80%;
  margin: auto;
  margin-top: 30px;
  position: relative;
}

#flow .flow__contents .prev-arrow {
  position: absolute;
  top: 50%;
  left: 20%;
	transform: translate(20%,-50%);
  font-size: 4em;
  color: #fad02c;
  z-index: 1;
	transition: all 0.5s;
}

#flow .flow__contents .next-arrow {
  position: absolute;
  top: 50%;
  right: 20%;
	transform: translate(-20%,-50%);
  font-size: 4em;
  color:  #fad02c;
	transition: all 0.5s;
}

#flow .flow__contents .prev-arrow:hover ,
#flow .flow__contents .next-arrow:hover {
  opacity: 0.5;
  transition: all 0.5s;
}

#flow .slick-slide {
	opacity: 0.5;
	transition: 0.5s;
}
#flow .slick-current {
	opacity: 1;
	transition: 0.5s;
}

#flow .flow__contents .flow__content {
  width: 350px;
  height: 33vw;
	min-height: 450px;
  border: 2px solid #fad02c;
  border-radius: 15px;
  padding: 15px 30px;
  margin: 0 50px;
  text-align: center;
}

#flow .flow__contents .flow__content span {
  font-size: 3em;
  color: #fad02c;
  font-weight: bold;
}

#flow .flow__contents .flow__content h2 {
  font-size: 2em;
	margin-bottom: 2vw;
}

#flow .flow__contents .flow__content p {
  font-weight: bold;
  color: #4C5253;
  text-align: left;
}

#flow .flow__contents .flow__content .flow__content-image {
  width: 50%;
  margin: auto;
  margin-bottom: 15px;
}

#flow .flow__contents .flow__content .flow__content-image img {
  width: 100%;
}


/************************/
/*     07. Features     */
/************************/
.tabs {
	padding-top: 8rem;
	padding-bottom: 8.125rem;
	background-color: #f3f7fd;
}

.tabs .h2-heading,
.tabs .p-heading {
	text-align: center;
}

.tabs .nav-tabs {
	display: block;
	margin-bottom: 2.25rem;
	border-bottom: none;
}

.tabs .nav-link {
	padding: 0.375rem 1rem 0.375rem 1rem;
	border: none;
	color: #86929b;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.75rem;
	text-align: center;
	text-decoration: none;
	transition: all 0.2s ease;
}

.tabs .nav-link:hover,
.tabs .nav-link.active {
	background: transparent;
	color: #60CAAD;
}

.tabs .nav-link .fas {
	margin-right: 0.625rem;
}

.tabs .image-container {
	margin-bottom: 2.75rem;
}

.tabs .list-unstyled .fas {
	color: #60CAAD;
	font-size: 0.5rem;
	line-height: 1.625rem;
}

.tabs .list-unstyled .media-body {
	margin-left: 0.625rem;
}

.tabs #tab-1 h3 {
	margin-bottom: 0.75rem;
}

.tabs #tab-1 .list-unstyled {
	margin-bottom: 1.5rem;
}

.tabs #tab-2 h3 {
	margin-bottom: 0.75rem;
}

.tabs #tab-2 .list-unstyled {
	margin-bottom: 1.5rem;
}

.tabs #tab-3 h3 {
	margin-bottom: 0.75rem;
}

.tabs #tab-3 .list-unstyled {
	margin-bottom: 1.5rem;
}


/***********************************/
/*     08. Features Lightboxes     */
/***********************************/
.lightbox-basic {
	margin: 2.5rem auto;
	padding: 2rem 1.5rem 2rem 1.5rem;
	border-radius: 0.25rem;
	background: #fff;
	text-align: left;
}

.lightbox-basic .container {
	padding-right: 0;
	padding-left: 0;
}

.lightbox-basic .image-container {
	max-width: 33.75rem;
	margin-right: auto;
	margin-bottom: 3rem;
	margin-left: auto;
}

.lightbox-basic h3 {
	margin-bottom: 0.5rem;
}

.lightbox-basic hr {
	width: 2.5rem;
	height: 0.125rem;
	margin-top: 0;
	margin-bottom: 0.875rem;
	margin-left: 0;
	border: 0;
	background-color: #5f4dee;
	text-align: left;
}

.lightbox-basic h4 {
	margin-bottom: 1rem;
}

.lightbox-basic .list-unstyled .fas {
	color:#5f4dee;
	font-size: 0.5rem;
	line-height: 1.625rem;
}

.lightbox-basic .list-unstyled .media-body {
	margin-left: 0.625rem;
}

.lightbox-basic .btn-outline-reg,
.lightbox-basic .btn-solid-reg {
	margin-top: 0.75rem;
}

/* Signup Button */
.lightbox-basic .btn-solid-reg.mfp-close {
	position: relative;
	width: auto;
	height: auto;
	color: #fff;
	opacity: 1;
}

.lightbox-basic .btn-solid-reg.mfp-close:hover {
	color: #5f4dee;
}
/* end of signup Button */

/* Back Button */
.lightbox-basic a.mfp-close.as-button {
	position: relative;
	width: auto;
	height: auto;
	margin-left: 0.375rem;
	color: #5f4dee;
	opacity: 1;
}

.lightbox-basic a.mfp-close.as-button:hover {
	color: #fff;
}
/* end of back button */

.lightbox-basic button.mfp-close.x-button {
	position: absolute;
	top: -0.125rem;
	right: -0.125rem;
	width: 2.75rem;
	height: 2.75rem;
	color: #707984;
}


/***********************/
/*     09. Details     */
/***********************/
.basic-1 {
	padding-top: 7.5rem;
	padding-bottom: 8rem;
}

.basic-1 .text-container {
	margin-bottom: 3.75rem;
}

.basic-1 .list-unstyled {
	margin-bottom: 1.375rem;
}

.basic-1 .list-unstyled .fas {
	color: #60CAAD;
	font-size: 0.5rem;
	line-height: 1.625rem;
}

.basic-1 .list-unstyled .media-body {
	margin-left: 0.625rem;
}


/*********************/
/*     10. Video     */
/*********************/
.basic-2 {
	padding-top: 8rem;
	padding-bottom: 6.75rem;
	background-color: #f3f7fd;
	text-align: center;
}

.basic-2 .image-container {
	margin-bottom: 2rem;
}

.basic-2 .image-container img {
	border-radius: 0.75rem;
}

.basic-2 .video-wrapper {
	position: relative;
}

/* Video Play Button */
.basic-2 .video-play-button {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	display: block;
	box-sizing: content-box;
	width: 2rem;
	height: 2.75rem;
	padding: 1.125rem 1.25rem 1.125rem 1.75rem;
	border-radius: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
  
.basic-2 .video-play-button:before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	display: block;
	width: 4.75rem;
	height: 4.75rem;
	border-radius: 50%;
	background: #5f4dee;
	animation: pulse-border 1500ms ease-out infinite;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
  
.basic-2 .video-play-button:after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	display: block;
	width: 4.375rem;
	height: 4.375rem;
	border-radius: 50%;
	background: #5f4dee;
	transition: all 200ms;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
  
.basic-2 .video-play-button span {
	position: relative;
	display: block;
	z-index: 3;
	top: 0.375rem;
	left: 0.25rem;
	width: 0;
	height: 0;
	border-left: 1.625rem solid #fff;
	border-top: 1rem solid transparent;
	border-bottom: 1rem solid transparent;
}
  
@keyframes pulse-border {
	0% {
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		opacity: 1;
	}
	100% {
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		opacity: 0;
	}
}
/* end of video play button */  

.basic-2 .p-heading {
	margin-bottom: 1rem;
}


/***********************/
/*     11. Pricing     */
/***********************/
.cards-2 {
	padding-top: 7.875rem;
	padding-bottom: 2.25rem;
	text-align: center;
}

.cards-2 .h2-heading {
	margin-bottom: 3.75rem;
}

.cards-2 .card {
	display: block;
	max-width: 19rem;
	margin-right: auto;
	margin-bottom: 3rem;
	margin-left: auto;
	border: 1px solid #ccd3df;
	border-radius: 0.375rem;
}

.cards-2 .card .card-body {
	padding: 2.5rem 2rem 2.75rem 2em;
}

.cards-2 .card .card-title {
	margin-bottom: 0.5rem;
	color: #60CAAD;
	font: 700 1.125rem/1.5rem "Open Sans", sans-serif;
}

.cards-2 .card .price .currency {
	margin-right: 0.25rem;
	color: #434c54;
	font-weight: 700;
	font-size: 1.5rem;
	vertical-align: 40%;
}

.cards-2 .card .price .value {
	color: #434c54;
	font: 700 3.25rem/3.5rem "Open Sans", sans-serif;
	text-align: center;
}

.cards-2 .card .frequency {
	font-size: 0.875rem;
}

.cards-2 .card .divider {
	height: 1px;
	margin-top: 1.75rem;
	margin-bottom: 2rem;
	border: none;
	background-color: #ccd3df;
}

.cards-2 .card .list-unstyled {
	margin-top: 1.875rem;
	margin-bottom: 1.625rem;
	text-align: left;
}

.cards-2 .card .list-unstyled .media {
	margin-bottom: 0.5rem;
}

.cards-2 .card .list-unstyled .fas {
	color: #60CAAD;
	font-size: 0.875rem;
	line-height: 1.625rem;
}

.cards-2 .card .list-unstyled .fas.fa-times {
	margin-left: 0.1875rem;
	margin-right: 0.125rem;
	color: #555;
}

.cards-2 .card .list-unstyled .media-body {
	margin-left: 0.625rem;
}


/****************************/
/*     12. Testimonials     */
/****************************/
.slider-2 {
	padding-top: 2.75rem;
	padding-bottom: 4rem;
}

.slider-2 .slider-container {
	position: relative;
}

.slider-2 .swiper-container {
	position: static;
	width: 82%;
	text-align: center;
}

.slider-2 .image-wrapper {
	width: 6rem;
	margin-right: auto;
	margin-bottom: 1rem;
	margin-left: auto;
}

.slider-2 .image-wrapper img {
	border-radius: 50%;
}

.slider-2 .testimonial-text {
	margin-bottom: 0.5rem;
}

.slider-2 .testimonial-author {
	color: #333;
}

.slider-2 .swiper-button-prev,
.slider-2 .swiper-button-next {
	width: 1.125rem;
}

.slider-2 .swiper-button-prev:focus,
.slider-2 .swiper-button-next:focus {
	/* even if you can't see it chrome you can see it on mobile device */
	outline: none;
}

.slider-2 .swiper-button-prev {
	left: -0.375rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23505c67'%2F%3E%3C%2Fsvg%3E");
	background-size: 1.125rem 1.75rem;
}

.slider-2 .swiper-button-next {
	right: -0.375rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23505c67'%2F%3E%3C%2Fsvg%3E");
	background-size: 1.125rem 1.75rem;
}


/**************************/
/*     13. Newsletter     */
/**************************/
.form {
	padding-top: 4rem;
	padding-bottom: 6rem;
}

.form .text-container {
	margin-bottom: 3.5rem;
	padding: 3.5rem 1rem 2.5rem 1rem;
	border-radius: 0.5rem;
	background-color: #f3f7fd;
}

.form h2 {
	margin-bottom: 2.75rem;
	text-align: center;
}

.form .icon-container {
	text-align: center;
}

.form .fa-stack {
	width: 2em;
	margin-bottom: 0.75rem;
	margin-right: 0.375rem;
	font-size: 1.5rem;
}

.form .fa-stack .fa-stack-1x {
    color: #fff;
	transition: all 0.2s ease;
}

.form .fa-stack .fa-stack-2x {
	color: #5f4dee;
	transition: all 0.2s ease;
}

.form .fa-stack:hover .fa-stack-1x {
	color: #5f4dee;
}

.form .fa-stack:hover .fa-stack-2x {
    color: #f3f7fd;
}


/**********************/
/*     14. Footer     */
/**********************/
.footer-frame {
	width: 100%;
	height: 1.5rem;
}

.footer {
	padding-top: 3rem;
	padding-bottom: 0.5rem;
	background-color: #60CAAD;
}

.footer .footer-col {
	margin-bottom: 2.25rem;
}

.footer h4 {
	margin-bottom: 0.625rem;
	color: #fff;
}

.footer .list-unstyled,
.footer p {
	color: #f3f7fd;
}

.footer .footer-col.middle .list-unstyled .fas {
	color: #fff;
	font-size: 0.5rem;
	line-height: 1.5rem;
}

.footer .footer-col.middle .list-unstyled .media-body {
	margin-left: 0.5rem;
}

.footer .footer-col.last .list-unstyled .fas {
	color: #fff;
	font-size: 0.875rem;
	line-height: 1.5rem;
}

.footer .footer-col.last .list-unstyled .media-body {
	margin-left: 0.625rem;
}

.footer .footer-col.last .list-unstyled .fas.fa-globe {
	margin-left: 1rem;
	margin-right: 0.625rem;
}


/*************************/
/*     15. Copyright     */
/*************************/
/* .copyright {
	padding-top: 1rem;
	padding-bottom: 0.375rem;
	background-color: #60CAAD;
	text-align: center;
} */

.copyright .p-small {
	padding-top: 1.375rem;
	border-top: 1px solid #e9e9e9;
	color: #f3f7fd;
}

.copyright a {
	color: #f3f7fd;
	text-decoration: none;
}


/**********************************/
/*     16. Back To Top Button     */
/**********************************/
a.back-to-top {
	position: fixed;
	z-index: 999;
	right: 0.75rem;
	bottom: 0.75rem;
	display: none;
	width: 2.625rem;
	height: 2.625rem;
	border-radius: 1.875rem;
	background: #60CAAD url("../images/up-arrow.png") no-repeat center 47%;
	background-size: 1.125rem 1.125rem;
	text-indent: -9999px;
}

a:hover.back-to-top {
	background-color: #37ab9d; 
}


/***************************/
/*     17. Extra Pages     */
/***************************/
.ex-header {
	padding-top: 8rem;
	padding-bottom: 5rem;
	background-color: #5f4dee;
	text-align: center;
}

.ex-header h1 {
	color: #fff;
}

.ex-basic-1 {
	padding-top: 2rem;
	padding-bottom: 0.875rem;
	background-color: #f3f7fd;
}

.ex-basic-1 .breadcrumbs {
	margin-bottom: 1.125rem;
}

.ex-basic-1 .breadcrumbs .fa {
	margin-right: 0.5rem;
	margin-left: 0.625rem;
}

.ex-basic-2 {
	padding-top: 4.75rem;
	padding-bottom: 4rem;
}

.ex-basic-2 h3 {
	margin-bottom: 1rem;
}

.ex-basic-2 .text-container {
	margin-bottom: 3.625rem;
}

.ex-basic-2 .text-container.last {
	margin-bottom: 0;
}

.ex-basic-2 .text-container.dark {
	padding: 1.625rem 1.5rem 0.75rem 2rem;
	background-color: #f3f7fd;
}

.ex-basic-2 .image-container-large {
	margin-bottom: 4rem;
}

.ex-basic-2 .image-container-large img {
	border-radius: 0.25rem;
}

.ex-basic-2 .image-container-small img {
	border-radius: 0.25rem;
}

.ex-basic-2 .list-unstyled .fas {
	color: #5f4dee;
	font-size: 0.5rem;
	line-height: 1.625rem;
}

.ex-basic-2 .list-unstyled .media-body {
	margin-left: 0.625rem;
}

.ex-basic-2 .form-container {
	margin-top: 3rem;
}

.ex-basic-2 .btn-outline-reg {
	margin-top: 1.75rem;
}

.ex-footer-frame {
	width: 100%;
	height: 2.75rem;
	background-color: #f3f7fd;
}


/****************************************/
/*     18. Sign Up and Log In Pages     */
/****************************************/
.ex-2-header {
	padding-top: 9rem;
	background-color: #5f4dee;
	text-align: center;
	min-height: 100vh;
}

.ex-2-header h1,
.ex-2-header p {
	color: #fff;
}

.ex-2-header p {
	max-width: 24rem;
	margin-right: auto;
	margin-bottom: 2.5rem;
	margin-left: auto;
}

.ex-2-header .form-container {
	max-width: 26rem;
	margin-right: auto;
	margin-left: auto;
	padding: 2.25rem 1.25rem 1.25rem 1.25rem;
	border-radius: 0.5rem;
	background-color: #f3f7fd;
}

.ex-2-header .checkbox {
	text-align: left;
}


/*****************************/
/*     19. Media Queries     */
/*****************************/	
/* Min-width width 768px */
@media (min-width: 768px) {
	
	/* General Styles */
	.p-heading {
		width: 85%;
		margin-right: auto;
		margin-left: auto;
	}

	.h2-heading {
		width: 80%;
		margin-right: auto;
		margin-left: auto;
	}
	/* end of general styles */


	/* Header */
	.header .text-container {
		margin-bottom: 4rem;
	}

	.header h1 {
		font-size: 3.5rem;
		line-height: 4.125rem;
	}

	.header .btn-solid-lg {
		margin-bottom: 0;
		margin-left: 0;
	}

	.header-frame {
		height: 5.5rem;
	}
	/* end of header */


	/* Testimonials */
	.slider-2 .swiper-button-prev {
		width: 1.375rem;
		background-size: 1.375rem 2.125rem;
	}
	
	.slider-2 .swiper-button-next {
		width: 1.375rem;
		background-size: 1.375rem 2.125rem;
	}
	/* end of testimonials */


	/* Newsletter */
	.form .text-container {
		padding: 4rem 2.5rem 3rem 2.5rem;
	}

	.form form {
		margin-right: 4rem;
		margin-left: 4rem;
	}
	/* end of newsletter */


	/* Footer */
	.footer-frame {
		height: 5rem;
	}
	/* end of footer */


	/* Extra Pages */
	.ex-header {
		padding-top: 11rem;
		padding-bottom: 9rem;
	}

	.ex-basic-2 .text-container.dark {
		padding: 2.5rem 3rem 2rem 3rem;
	}

	.ex-basic-2 .form-container {
		margin-top: 0;
	}
	/* end of extra pages */


	/* Sign Up And Log In Pages */
	.ex-2-header {
		padding-top: 11rem;
	}

	.ex-2-header .form-container {
		padding: 2.25rem 1.75rem 1.25rem 1.75rem;
	}
	/* end of sign up and log in pages */
}
/* end of min-width width 768px */


/* Min-width width 992px */
@media (min-width: 992px) {
	
	/* Navigation */
	.navbar-custom {
		padding: 2.125rem 1.5rem 2.125rem 2rem;
        background: transparent;
		box-shadow: none;
	}

	.navbar-custom .navbar-nav {
		margin-top: 0;
		margin-bottom: 0;
	}

	.navbar-custom .nav-item .nav-link {
		padding: 0.25rem 0.75rem 0.25rem 0.75rem;
	}
	
	.navbar-custom .nav-item .nav-link:hover,
	.navbar-custom .nav-item .nav-link.active {
		opacity: 1;
	}

	.navbar-custom.top-nav-collapse {
        padding: 0.5rem 1.5rem 0.5rem 2rem;
		background-color: #60CAAD;
		box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
	}

	.navbar-custom.top-nav-collapse .nav-item .nav-link:hover,
	.navbar-custom.top-nav-collapse .nav-item .nav-link.active {
		color: #fff;
	}

	.navbar-custom .dropdown-menu {
		padding-top: 1rem;
		padding-bottom: 1rem;
		border-top: 0.25rem solid rgba(0, 0, 0, 0);
		border-radius: 0.25rem;
	}

	.navbar-custom.top-nav-collapse .dropdown-menu {
		border-top: 0.25rem solid rgba(0, 0, 0, 0);
		box-shadow: 0 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.02);
	}

	.navbar-custom .dropdown-item {
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
	}

	.navbar-custom .dropdown-items-divide-hr {
		width: 84%;
	}

	.navbar-custom .nav-item .btn-outline-sm {
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 1rem;
	}
	/* end of navigation */


	/* General Styles */
	.p-heading {
		width: 65%;
	}

	.h2-heading {
		width: 60%;
	}
	/* end of general styles */


	/* Header */
	.header .header-content {
		text-align: left;
	}

	.header .text-container {
		margin-top: 4rem;
		margin-bottom: 0;
	}

	.header .image-container {
		position: relative;
		margin-top: 3rem;
	}
	
	.header .image-container .img-wrapper {
		position: absolute;
		display: block;
		width: 470px;
	}

	.header-frame {
		height: 8rem;
	}
	/* end of header */


	/* Description */
	.cards-1 .card {
		display: inline-block;
		width: 17rem;
		max-width: 100%;
		margin-right: 1rem;
		margin-left: 1rem;
		vertical-align: top;
	}

	.cards-1 .card-image {
		width: 9rem;
	}
	/* end of description */


	/* Features */
	.tabs .nav-tabs {
		display: flex;
		justify-content: center;
		margin-bottom: 2.75rem;
	} 

	.tabs .nav-link {
		padding-right: 1.25rem;
		padding-left: 1.25rem;
		border-bottom: 2px solid rgb(202, 202, 202);
	}
	
	.tabs .nav-link:hover,
	.tabs .nav-link.active {
		border-bottom: 2px solid #60CAAD;
	}

	.tabs .image-container {
		margin-bottom: 0;
	}
	/* end of features */


	/* Features Lightboxes */
	.lightbox-basic {
		max-width: 62.5rem;
		padding: 2.5rem 2.5rem 2.5rem 2.5rem;
	}

	.lightbox-basic .image-container {
		max-width: 100%;
		margin-right: 2rem;
		margin-bottom: 0;
		margin-left: 0.5rem;
	}
	
	.lightbox-basic h3 {
		margin-top: 0.5rem;
	}
	/* end of features lightboxes */


	/* Details */
	.basic-1 {
		padding-top: 8rem;
	}

	.basic-1 .text-container {
		margin-bottom: 0;
	}
	/* end of details */


	/* Video */
	.basic-2 .image-container {
		max-width: 53.125rem;
		margin-right: auto;
		margin-left: auto;
	}

	.basic-2 p {
		width: 65%;
		margin-right: auto;
		margin-left: auto;
	}
	/* end of video */


	/* Pricing */
	.cards-2 .card {
		display: inline-block;
		margin-right: 0.5rem;
		margin-left: 0.5rem;
		vertical-align: top;
	}
	/* end of pricing */


	/* Testimonials */
	.slider-2 .swiper-container {
		width: 92%;
		text-align: left;
	}

	.slider-2 .image-wrapper {
		float: left;
		width: 10rem;
		margin-bottom: 0;
	}

	.slider-2 .text-wrapper {
		max-width: 100%;
		margin-top: 1.25rem;
		margin-left: 13rem;
	}

	.slider-2 .swiper-button-prev {
		left: -0.75rem;
	}
	
	.slider-2 .swiper-button-next {
		right: -0.75rem;
	}
	/* end of testimonials */


	/* Newsletter */
	.form .text-container {
		width: 55rem;
		margin-right: auto;
		margin-left: auto;
		padding-top: 5rem;
		padding-bottom: 4.5rem;
	}

	.form h2 {
		margin-right: 7rem;
		margin-left: 7rem;
	}

	.form form {
		margin-right: 9rem;
		margin-left: 9rem;
	}
	/* end of newsletter */


	/* Extra Pages */
	.ex-header h1 {
		width: 80%;
		margin-right: auto;
		margin-left: auto;
	}

	.ex-basic-2 {
		padding-bottom: 5rem;
	}
	/* end of extra pages */
}
/* end of min-width width 992px */


/* Min-width width 1200px */
@media (min-width: 1200px) {
	
	/* General Styles */
	.h2-heading {
		width: 100%;
		font-size: 30px;
	}
	/* end of general styles */


	/* Header */
	.header .header-content {
		padding-bottom: 3rem;
	}

	.header .text-container {
		margin-top: 3rem;
		margin-right: 0.5rem;
		text-align: center;
	}

	.header .image-container {
		margin-top: 1rem;
		margin-left: 1.5rem;
	}

	.header .image-container .img-wrapper {
		width: 630px;
	}

	.header-frame {
		height: 9.375rem;
	}
	/* end of header */
	

	/* Customer */
	.slider-1 .slider-container {
		margin-right: 3rem;
		margin-left: 3rem;
	}
	/* end of customer */


	/* Description */
	.cards-1 .card {
		width: 18.875rem;
		margin-right: 2rem;
		margin-left: 2rem;
	}

	.cards-1 .card-image {
		width: 12.5rem;
	}
	/* end of description */


	/* Features */
	.tabs .image-container {
		margin-right: 1.5rem;
		margin-left: 1rem;
	}
	
	.tabs .text-container {
		margin-top: 1.5rem;
		margin-right: 1rem;
		margin-left: 1.5rem;
	}
	/* end of features */


	/* Details */
	.basic-1 .image-container {
		margin-right: 1rem;
		margin-left: 1.5rem;
	}
	
	.basic-1 .text-container {
		margin-top: 1rem;
		margin-right: 1.5rem;
		margin-left: 1rem;
	}

	.basic-1 h2 {
		margin-bottom: 1rem;
	}
	/* end of details */


	/* Pricing */
	.cards-2 .card {
		width: 19.375rem;
		max-width: 100%;
		margin-right: 1.75rem;
		margin-left: 1.75rem;
	}

	.cards-2 .card .card-body {
		padding-right: 2.25rem;
		padding-left: 2.25rem;
	}
	/* end of pricing */


	/* Testimonials */
	.slider-2 .slider-container {
		width: 64.125rem;
		margin-right: auto;
		margin-left: auto;
	}
	/* end of testimonials */


	/* Newsletter */
	.form .text-container {
		width: 64.75rem;
		padding-top: 6rem;
		padding-bottom: 5.5rem;
	}

	.form h2 {
		margin-right: 12rem;
		margin-left: 12rem;
	}

	.form form {
		margin-right: 15rem;
		margin-left: 15rem;
	}
	/* end of newsletter */


	/* Footer */
	.footer .footer-col.first {
		margin-right: 1.5rem;
	}

	.footer .footer-col.middle {
		margin-right: 0.75rem;
		margin-left: 0.75rem;
	}

	.footer .footer-col.last {
		margin-left: 1.5rem;
	}
	/* end of footer */


	/* Extra Pages */
	.ex-header h1 {
		width: 60%;
		margin-right: auto;
		margin-left: auto;
	}

	.ex-basic-2 .form-container {
		margin-left: 1.75rem;
	}

	.ex-basic-2 .image-container-small {
		margin-left: 1.75rem;
	}
	/* end of extra pages */
}
/* end of min-width width 1200px */