/* tabs */
.tabs
{
	position: relative;
	list-style: none;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.tabs li
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.tabs .tab
{
	cursor: pointer;
}

.tabs .tab-content
{
	display: none;
}

.tabs[data-active-tab="tab-00"] .tab-00,
.tabs[data-active-tab="tab-01"] .tab-01,
.tabs[data-active-tab="tab-02"] .tab-02,
.tabs[data-active-tab="tab-03"] .tab-03,
.tabs[data-active-tab="tab-04"] .tab-04,
.tabs[data-active-tab="tab-05"] .tab-05,
.tabs[data-active-tab="tab-06"] .tab-06,
.tabs[data-active-tab="tab-07"] .tab-07,
.tabs[data-active-tab="tab-08"] .tab-08,
.tabs[data-active-tab="tab-09"] .tab-09
{
	display: block;
}

@media screen and (min-width: 800px)
{
	.tabs.grid .tab-content
	{
		padding: 0px 20px 20px;
	}

	.tabs.grid .tab
	{
		position: relative;
		display: block;
		width: 100%;
		padding: 1.5rem 4rem 1.5rem 1.5rem;
		color: #FFF;
		font-size: 1.5rem;
		line-height: 1.2;
		background: #3BB0C9;
		border-bottom: 2px solid #FFF;
	}

	.tabs.grid .tab *
	{
		color: #355;
	}

	.tabs.grid .tab:after
	{
		content: '';
		position: absolute;
		top: 50%;
		right: 10px;
		width: 0;
		height: 0;
		border-top: 10px solid transparent;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;

		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}


	.tabs.grid[data-active-tab="tab-00"] .tab[data-tab-name="tab-00"],
	.tabs.grid[data-active-tab="tab-01"] .tab[data-tab-name="tab-01"],
	.tabs.grid[data-active-tab="tab-02"] .tab[data-tab-name="tab-02"],
	.tabs.grid[data-active-tab="tab-03"] .tab[data-tab-name="tab-03"],
	.tabs.grid[data-active-tab="tab-04"] .tab[data-tab-name="tab-04"],
	.tabs.grid[data-active-tab="tab-05"] .tab[data-tab-name="tab-05"],
	.tabs.grid[data-active-tab="tab-06"] .tab[data-tab-name="tab-06"],
	.tabs.grid[data-active-tab="tab-07"] .tab[data-tab-name="tab-07"],
	.tabs.grid[data-active-tab="tab-08"] .tab[data-tab-name="tab-08"],
	.tabs.grid[data-active-tab="tab-09"] .tab[data-tab-name="tab-09"]
	{
		background: #000;
		border-bottom: 2px solid #FFF;
	}

	.tabs.grid[data-active-tab="tab-00"] .tab[data-tab-name="tab-00"]:after,
	.tabs.grid[data-active-tab="tab-01"] .tab[data-tab-name="tab-01"]:after,
	.tabs.grid[data-active-tab="tab-02"] .tab[data-tab-name="tab-02"]:after,
	.tabs.grid[data-active-tab="tab-03"] .tab[data-tab-name="tab-03"]:after,
	.tabs.grid[data-active-tab="tab-04"] .tab[data-tab-name="tab-04"]:after,
	.tabs.grid[data-active-tab="tab-05"] .tab[data-tab-name="tab-05"]:after,
	.tabs.grid[data-active-tab="tab-06"] .tab[data-tab-name="tab-06"]:after,
	.tabs.grid[data-active-tab="tab-07"] .tab[data-tab-name="tab-07"]:after,
	.tabs.grid[data-active-tab="tab-08"] .tab[data-tab-name="tab-08"]:after,
	.tabs.grid[data-active-tab="tab-09"] .tab[data-tab-name="tab-09"]:after
	{
		border-bottom: none;
		border-left: 10px solid #FFF;
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
	}


	.arc-tabs
	{
		margin-bottom: 60px;
	}

	.arc-tabs .tabs
	{
		margin-top: -100px;
		padding-top: 100px;
	}

	.arc-tabs .arc
	{
		position: relative;
		left: -5%;
		width: 110%;
		height: 100px;
		margin-top: 8rem;
		border: 1px solid transparent;
		border-top-color: #DBE0E2;
		border-radius: 25em/4em;
	}

	.arc-tabs .tab
	{
		cursor: pointer;
		position: absolute;
		display: block;
		width: 12rem;
		height: 12rem;
		padding: 1rem;
		background-color: #FFF;
		border: 1px solid #DBE0E2;
		border-radius: 50%;
		box-shadow: 0 0.3rem 0.4rem rgba(0,0,0,0.07), inset 0 0 0 0 #5DA9BA;

		-webkit-transform: translateX(-50%) scale(0.7);
		-moz-transform: translateX(-50%) scale(0.7);
		-ms-transform: translateX(-50%) scale(0.7);
		-o-transform: translateX(-50%) scale(0.7);
		transform: translateX(-50%) scale(0.7);

		will-change: background-color, border, transform, box-shadow;

		-webkit-transition: all 0.15s ease-in-out;
		-moz-transition: all 0.15s ease-in-out;
		-ms-transition: all 0.15s ease-in-out;
		-o-transition: all 0.15s ease-in-out;
		transition: all 0.15s ease-in-out;
	}

	.arc-tabs .tab:hover
	{
		background-color: #5da9ba;
		box-shadow: 0 0.3rem 0.4rem rgba(0,0,0,0.07), inset 0 0 0 5rem #5DA9BA;
	}

	.arc-tabs .tabs[data-active-tab="tab-00"] .tab[data-tab-name="tab-00"],
	.arc-tabs .tabs[data-active-tab="tab-01"] .tab[data-tab-name="tab-01"],
	.arc-tabs .tabs[data-active-tab="tab-02"] .tab[data-tab-name="tab-02"],
	.arc-tabs .tabs[data-active-tab="tab-03"] .tab[data-tab-name="tab-03"]
  	{
		cursor: default;
		border: 3px solid #EE7933;
		background: #FFF;
		box-shadow: 0 0.3rem 0.4rem rgba(0,0,0,0.07);

		-webkit-transform: translateX(-50%) scale(0.8);
		-moz-transform: translateX(-50%) scale(0.8);
		-ms-transform: translateX(-50%) scale(0.8);
		-o-transform: translateX(-50%) scale(0.8);
		transform: translateX(-50%) scale(0.8);
	}

	.arc-tabs .tabs[data-active-tab="tab-00"] .tab[data-tab-name="tab-00"]:after,
	.arc-tabs .tabs[data-active-tab="tab-01"] .tab[data-tab-name="tab-01"]:after,
	.arc-tabs .tabs[data-active-tab="tab-02"] .tab[data-tab-name="tab-02"]:after,
	.arc-tabs .tabs[data-active-tab="tab-03"] .tab[data-tab-name="tab-03"]:after
  	{
		content: '';
		display: block;
		position: absolute;
		bottom: -4.3rem;
		left: 50%;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 1.5rem;
		border-color: transparent transparent #F2F4F5 transparent;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.arc-tabs .tabs[data-active-tab="tab-01"] .tab[data-tab-name="tab-01"]:after,
	.arc-tabs .tabs[data-active-tab="tab-02"] .tab[data-tab-name="tab-02"]:after
	{
		bottom: -5.3rem;
	}

	article.page section:nth-child(even) .arc-tabs .tabs[data-active-tab="tab-00"] .tab[data-tab-name="tab-00"]:after,
	article.page section:nth-child(even) .arc-tabs .tabs[data-active-tab="tab-01"] .tab[data-tab-name="tab-01"]:after,
	article.page section:nth-child(even) .arc-tabs .tabs[data-active-tab="tab-02"] .tab[data-tab-name="tab-02"]:after,
	article.page section:nth-child(even) .arc-tabs .tabs[data-active-tab="tab-03"] .tab[data-tab-name="tab-03"]:after
  	{
		border-color: transparent transparent #FFF transparent;
	}

	.arc-tabs .tab[data-tab-name="tab-00"] { top: -4rem; left: 12%; }
	.arc-tabs .tab[data-tab-name="tab-01"] { top: -5rem; left: 37%; }
	.arc-tabs .tab[data-tab-name="tab-02"] { top: -5rem; left: 63%; }
	.arc-tabs .tab[data-tab-name="tab-03"] { top: -4rem; left: 88%; }

	.arc-tabs .tab h3
	{
		display: block;
		position: relative;
		top: 50%;
		left: 50%;
		margin: 0;
		color: #7F8E8F;
		font-size: 1.9rem;
		font-weight: 300;
		line-height: 1.2;
		text-align: center;

		-webkit-transform: translateX(-50%) translateY(-50%);
		-moz-transform: translateX(-50%) translateY(-50%);
		-ms-transform: translateX(-50%) translateY(-50%);
		-o-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);

		will-change: color, top, line-height;
		-webkit-transition: color 0.15s ease-in-out, top 0.15s ease-in-out, line-height 0.15s ease-in-out;
		-moz-transition: color 0.15s ease-in-out, top 0.15s ease-in-out, line-height 0.15s ease-in-out;
		-ms-transition: color 0.15s ease-in-out, top 0.15s ease-in-out, line-height 0.15s ease-in-out;
		-o-transition: color 0.15s ease-in-out, top 0.15s ease-in-out, line-height 0.15s ease-in-out;
		transition: color 0.15s ease-in-out, top 0.15s ease-in-out, line-height 0.15s ease-in-out;
	}

	.arc-tabs .tab:hover h3
	{
		color: #FFF;
	}

	.arc-tabs .tabs[data-active-tab="tab-00"] .tab[data-tab-name="tab-00"] h3,
	.arc-tabs .tabs[data-active-tab="tab-01"] .tab[data-tab-name="tab-01"] h3,
	.arc-tabs .tabs[data-active-tab="tab-02"] .tab[data-tab-name="tab-02"] h3,
	.arc-tabs .tabs[data-active-tab="tab-03"] .tab[data-tab-name="tab-03"] h3
  	{
		top: 52%;
		color: #515A5B;
		line-height: 1.1;
	}

	.arc-tabs .tab-content
	{
		padding: 4.4rem 3.2rem;
		background-color: #F2F4F5;
		border-bottom: 2px solid #DBE0E2;
	}

	article.page section:nth-child(even) .arc-tabs .tab-content
	{
		background-color: #FFF;
		border-bottom-color: #C0C7C8;
	}
}


@media screen and (min-width: 1000px)
{
	.arc-tabs .tab
	{
		-webkit-transform: translateX(-50%) scale(0.833333333);
		-moz-transform: translateX(-50%) scale(0.833333333);
		-ms-transform: translateX(-50%) scale(0.833333333);
		-o-transform: translateX(-50%) scale(0.833333333);
		transform: translateX(-50%) scale(0.833333333);
	}

	.arc-tabs .tabs[data-active-tab="tab-00"] .tab[data-tab-name="tab-00"],
	.arc-tabs .tabs[data-active-tab="tab-01"] .tab[data-tab-name="tab-01"],
	.arc-tabs .tabs[data-active-tab="tab-02"] .tab[data-tab-name="tab-02"],
	.arc-tabs .tabs[data-active-tab="tab-03"] .tab[data-tab-name="tab-03"]
  	{
		-webkit-transform: translateX(-50%) scale(1);
		-moz-transform: translateX(-50%) scale(1);
		-ms-transform: translateX(-50%) scale(1);
		-o-transform: translateX(-50%) scale(1);
		transform: translateX(-50%) scale(1);
	}

	.arc-tabs .tab-content
	{
		margin-top: 20px;
	}
}


@media screen and (max-width: 799px)
{
	.tabs { margin-bottom: 4rem; }

	.tabs .tab
	{
		position: relative;
		display: block;
		padding: 0.7rem 4rem 0.5rem 1rem;
		color: #FFF;
		font-size: 2.5rem;
		line-height: 4rem;
		background: #3BB0C9;
		border-bottom: 2px solid #FFF;
	}

	.tabs .tab *
	{
		color: #355;
	}

	.tabs .tab:after
	{
		content: '';
		position: absolute;
		top: 50%;
		right: 15px;
		width: 0;
		height: 0;
		border-left: 10px solid #000;
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;

		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.tabs[data-active-tab="tab-00"] .tab[data-tab-name="tab-00"],
	.tabs[data-active-tab="tab-01"] .tab[data-tab-name="tab-01"],
	.tabs[data-active-tab="tab-02"] .tab[data-tab-name="tab-02"],
	.tabs[data-active-tab="tab-03"] .tab[data-tab-name="tab-03"],
	.tabs[data-active-tab="tab-04"] .tab[data-tab-name="tab-04"],
	.tabs[data-active-tab="tab-05"] .tab[data-tab-name="tab-05"],
	.tabs[data-active-tab="tab-06"] .tab[data-tab-name="tab-06"],
	.tabs[data-active-tab="tab-07"] .tab[data-tab-name="tab-07"],
	.tabs[data-active-tab="tab-08"] .tab[data-tab-name="tab-08"],
	.tabs[data-active-tab="tab-09"] .tab[data-tab-name="tab-09"]
	{
		background: #000;
		border-bottom: 2px solid #FFF;
	}

	.tabs[data-active-tab="tab-00"] .tab[data-tab-name="tab-00"]:after,
	.tabs[data-active-tab="tab-01"] .tab[data-tab-name="tab-01"]:after,
	.tabs[data-active-tab="tab-02"] .tab[data-tab-name="tab-02"]:after,
	.tabs[data-active-tab="tab-03"] .tab[data-tab-name="tab-03"]:after,
	.tabs[data-active-tab="tab-04"] .tab[data-tab-name="tab-04"]:after,
	.tabs[data-active-tab="tab-05"] .tab[data-tab-name="tab-05"]:after,
	.tabs[data-active-tab="tab-06"] .tab[data-tab-name="tab-06"]:after,
	.tabs[data-active-tab="tab-07"] .tab[data-tab-name="tab-07"]:after,
	.tabs[data-active-tab="tab-08"] .tab[data-tab-name="tab-08"]:after,
	.tabs[data-active-tab="tab-09"] .tab[data-tab-name="tab-09"]:after
	{
		border-bottom: none;
		border-top: 10px solid #FFF;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
	}

	.tabs[data-active-tab="tab-00"] .tab[data-tab-name="tab-00"] *,
	.tabs[data-active-tab="tab-01"] .tab[data-tab-name="tab-01"] *,
	.tabs[data-active-tab="tab-02"] .tab[data-tab-name="tab-02"] *,
	.tabs[data-active-tab="tab-03"] .tab[data-tab-name="tab-03"] *,
	.tabs[data-active-tab="tab-04"] .tab[data-tab-name="tab-04"] *,
	.tabs[data-active-tab="tab-05"] .tab[data-tab-name="tab-05"] *,
	.tabs[data-active-tab="tab-06"] .tab[data-tab-name="tab-06"] *,
	.tabs[data-active-tab="tab-07"] .tab[data-tab-name="tab-07"] *,
	.tabs[data-active-tab="tab-08"] .tab[data-tab-name="tab-08"] *,
	.tabs[data-active-tab="tab-09"] .tab[data-tab-name="tab-09"] *
	{
		color: #FFF;
		text-shadow: -1px -1px 0px rgba(0,0,0,0.1);
	}

	.tabs .tab-icon
	{
		display: inline-block;
		width: auto;
		padding: 0 1rem;
		font-size: 3rem;
		line-height: 4rem;
		vertical-align: top;
	}

	.tabs .tab-content
	{
		overflow: hidden;
		height: 0;
		padding: 1.5rem;
		background: #FFF;
		border-bottom: 6px solid #FFF;

		-webkit-transition: 0.25s height ease-in-out;
		-moz-transition: 0.25s height ease-in-out;
		-ms-transition: 0.25s height ease-in-out;
		-o-transition: 0.25s height ease-in-out;
		transition: 0.25s height ease-in-out;
	}

	section:nth-child(odd) .tabs .tab-content
	{
		background: #EEE;
	}

	.tabs[data-active-tab="tab-00"] .tab-00,
	.tabs[data-active-tab="tab-01"] .tab-01,
	.tabs[data-active-tab="tab-02"] .tab-02,
	.tabs[data-active-tab="tab-03"] .tab-03,
	.tabs[data-active-tab="tab-04"] .tab-04,
	.tabs[data-active-tab="tab-05"] .tab-05,
	.tabs[data-active-tab="tab-06"] .tab-06,
	.tabs[data-active-tab="tab-07"] .tab-07,
	.tabs[data-active-tab="tab-08"] .tab-08,
	.tabs[data-active-tab="tab-09"] .tab-09
	{
		height: auto;
	}

	.tabs .tab-content .inner
	{
		padding: 1.5rem;
	}
}

@media screen and (max-width: 599px)
{
	.tabs .tab-icon
	{
		font-size: 3rem;
	}
}