<!--  html -->

<div class="block-tabs">
	<!-- Вкладки на CSS -->
	<input type="radio" id="tab-1" name="tabs" checked>
	<label class="tab" for="tab-1" title="Вкладка 1">Доставка</label>
	<input type="radio" name="tabs" id="tab-2">
	<label class="tab" for="tab-2" title="Вкладка 2">Оплата</label>
	<input type="radio" name="tabs" id="tab-3">
	<label class="tab" for="tab-3" title="Вкладка 3">Гарантия</label>

	<div id="content-1" class="tab-content">
		<p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ut excepturi assumenda, quas voluptates consequatur atque voluptate odit eius necessitatibus labore tempore iste quod corporis accusantium, quibusdam facilis. Accusamus, quod?:</p>
	</div>
	<div id="content-2" class="tab-content">
		<p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque voluptas mollitia iste, adipisci. Ipsa, neque, id explicabo eligendi, similique nisi placeat minima animi modi ratione sint impedit itaque possimus minus!</p>
	</div>
	<div id="content-3" class="tab-content">
		<p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium vero ullam eum aliquam eligendi animi porro aut, nihil earum quidem assumenda, modi perspiciatis nulla quas, voluptas enim. Nam, velit.</p>
	</div>
</div>

<!-- css -->


/*tabs*/
.block-tabs {
	padding: 10px;
	width: 100%;
}
.block-tabs input {
	display: block;
	width: 100%;
}
.tab-content {
	display: none;
	padding: 20px 5px 5px 0;
	border-top: 1px solid  #ccc;
	color: #555;
}
.tab-content.active,
#tab-1:checked ~ #content-1,
#tab-2:checked ~ #content-2,
#tab-3:checked ~ #content-3 {
	display: block;
}
label.tab {
	color: #555;
	font-weight: 600;
	padding: 15px;
	display: inline-block;
	border-radius: 3px 3px 0 0;
	margin-bottom: -1px;
	cursor: pointer;
}
label.tab.active,
input[name="tabs"]:checked + label {
	color: #E03602;
	border-bottom: 2px solid #E03602;
}
input[name="tabs"] {
	display: none;
}

/* Формы */
.input {
	font-size: 16px;
	border: 2px solid green;
	padding: 12px 14px;
	box-sizing: border-box;
	margin-bottom: 22px;
	color: #555;
	outline: none;
}

::-webkit-input-placeholder {color:#555;}/* webkit */
::-moz-placeholder          {color:#E03602;}/* Firefox 19+ */
:-moz-placeholder           {color:#E03602;}/* Firefox 18- */
:-ms-input-placeholder      {color:#E03602;}/* IE */


/* end tabs*/