/*  Colapsible tab 01     */
/*  Colapsible tab 01     */
/*  Colapsible tab 01     */


.wrap-collabsible {
	margin-bottom: 1.2rem 0;
}
input[type='checkbox'] {
	display: none;
}
.lbl-toggle {
	display: block;
	font-weight: bold;
	font-family: monospace;
	font-size: 1.2rem;
	text-transform: uppercase;
	text-align: center;
	padding: 1rem;
	color: #ffffff;
	background: #000000;
	cursor: pointer;
	transition: all 0.25s ease-out;
	width:95%;
	margin: auto;
	height: 50px;	
	
	
}
.lbl-toggle:hover {
	color: #00bbf0;
}


.toggle:checked + .lbl-toggle::before {
	transform: rotate(135deg);
	transform-origin: center;
}


.lbl-toggle::before {
	content: ' + ';
	display: inline-block;
	vertical-align: middle;
	margin-right: -2.3px;
	transform: translateY(-2px);
	transition: transform .2s ease-out;
	width: 20px;
	height: 20px;
	float: right;
	font-size: 1.5em;
	padding: 2px;
}

.collapsible-content {
	
	overflow: hidden;
	transition: max-height .25s ease-in-out;
	position: relative;
	
}
.toggle:checked + .lbl-toggle + .collapsible-content {
	max-height: 1500px;

}
.toggle:checked + .lbl-toggle {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.collapsible-content .content-inner {
	padding: .5rem 1rem;
	width: 95%;
	margin: auto;
}



/*  Colapsible tab 02     */
/*  Colapsible tab 02     */
/*  Colapsible tab 02     */


.wrap-collabsible_02 {
	margin-bottom: 1.2rem 0;
}
input[type='checkbox'] {
	display: none;
}
.lbl-toggle_02 {
	display: block;
	font-weight: bold;
	font-family: monospace;
	font-size: 1.2rem;
	text-transform: uppercase;
	text-align: center;
	padding: 1rem;
	color: #ffffff;
	background: #000000;
	cursor: pointer;
	transition: all 0.25s ease-out;
	width:95%;
	margin: auto;
	height: 50px;
	
	
}
.lbl-toggle_02:hover {
	color: #00bbf0;
}


.toggle_02:checked + .lbl-toggle_02::before {
	transform: rotate(135deg);
	transform-origin: center;
}


.lbl-toggle_02::before {
	content: ' + ';
	display: inline-block;
	vertical-align: middle;
	margin-right: -2.3px;
	transform: translateY(-2px);
	transition: transform .2s ease-out;
	width: 20px;
	height: 20px;
	float: right;
	font-size: 1.5em;
	padding: 2px;
}

.collapsible-content_02 {
	overflow: hidden;
	transition: max-height .25s ease-in-out;
}
.toggle_02:checked + .lbl-toggle_02 + .collapsible-content_02 {
	max-height: 1500px;
}
.toggle_02:checked + .lbl-toggle_02 {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.collapsible-content_02 .content-inner_02 {
	padding: .5rem 1rem;
	width: 95%;
	margin: auto;
}




/*  Colapsible tab 03     */
/*  Colapsible tab 03     */
/*  Colapsible tab 03     */


.wrap-collabsible_03 {
	margin-bottom: 1.2rem 0;
}
input[type='checkbox'] {
	display: none;
}
.lbl-toggle_03 {
	display: block;
	font-weight: bold;
	font-family: monospace;
	font-size: 1.2rem;
	text-transform: uppercase;
	text-align: center;
	padding: 1rem;
	color: #ffffff;
	background: #000000;
	cursor: pointer;
	transition: all 0.25s ease-out;
	width:95%;
	margin: auto;
	height: 50px;
	
	
}
.lbl-toggle_03:hover {
	color: #00bbf0;
}


.toggle_03:checked + .lbl-toggle_03::before {
	transform: rotate(135deg);
	transform-origin: center;
}


.lbl-toggle_03::before {
	content: ' + ';
	display: inline-block;
	vertical-align: middle;
	margin-right: -2.3px;
	transform: translateY(-2px);
	transition: transform .2s ease-out;
	width: 20px;
	height: 20px;
	float: right;
	font-size: 1.5em;
	padding: 2px;
}

.collapsible-content_03 {
	overflow: hidden;
	transition: max-height .25s ease-in-out;
}
.toggle_03:checked + .lbl-toggle_03 + .collapsible-content_03 {
	max-height: 1500px;
}
.toggle_03:checked + .lbl-toggle_03 {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.collapsible-content_03 .content-inner_03 {
	padding: .5rem 1rem;
	width: 95%;
	margin: auto;
}


/*  Colapsible tab 04    Logo Design Process    */
/*  Colapsible tab 04    Logo Design Process    */
/*  Colapsible tab 04    Logo Design Process    */


.wrap-collabsible_04 {
	margin-bottom: 1.2rem 0;
	width: 100%;
}
input[type='checkbox'] {
	display: none;
}
.lbl-toggle_04 {
	display: block;
	font-weight: bold;
	font-family: monospace;
	font-size: 1.2rem;
	text-transform: uppercase;
	text-align: center;
	padding: 1rem;
	color: #ffffff;
	background: #000000;
	cursor: pointer;
	transition: all 0.25s ease-out;
	width:100%;
	margin: 20px auto auto;
	height: 50px;
	
	
}
.lbl-toggle_04:hover {
	color: #00bbf0;
}


.toggle_04:checked + .lbl-toggle_04::before {
	transform: rotate(135deg);
	transform-origin: center;
}


.lbl-toggle_04::before {
	content: ' + ';
	display: inline-block;
	vertical-align: middle;
	margin-right: -2.3px;
	transform: translateY(-2px);
	transition: transform .2s ease-out;
	width: 20px;
	height: 20px;
	float: right;
	font-size: 1.5em;
	padding: 2px;
}

.collapsible-content_04 {
	overflow: hidden;
	transition: max-height .25s ease-in-out;
	
}
.toggle_04:checked + .lbl-toggle_04 + .collapsible-content_04{
	max-height: 1500px;
	border-color: black;
	border-style: solid;
	border-width: 0 1px 1px 1px;
}
.toggle_04:checked + .lbl-toggle_04 {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.collapsible-content_04 .content-inner_04 {
	padding: .5rem 1rem;
	width: 95%;
	margin: auto;
}

.content_04_01_box_01,
.content_04_01_box_02{
	
	height: 100px;
	
}


/*  Colapsible tab 05    Graphic Design Process    */
/*  Colapsible tab 05    Graphic Design Process    */
/*  Colapsible tab 05    Graphic Design Process    */


.wrap-collabsible_05 {
	margin-bottom: 1.2rem 0;
	width: 100%;
}
input[type='checkbox'] {
	display: none;
}
.lbl-toggle_05 {
	display: block;
	font-weight: bold;
	font-family: monospace;
	font-size: 1.2rem;
	text-transform: uppercase;
	text-align: center;
	padding: 1rem;
	color: #ffffff;
	background: #000000;
	cursor: pointer;
	transition: all 0.25s ease-out;
	width:100%;
	margin: 20px auto auto;
	height: 50px;
	
	
}
.lbl-toggle_05:hover {
	color: #00bbf0;
}


.toggle_05:checked + .lbl-toggle_05::before {
	transform: rotate(135deg);
	transform-origin: center;
}


.lbl-toggle_05::before {
	content: ' + ';
	display: inline-block;
	vertical-align: middle;
	margin-right: -2.3px;
	transform: translateY(-2px);
	transition: transform .2s ease-out;
	width: 20px;
	height: 20px;
	float: right;
	font-size: 1.5em;
	padding: 2px;
}

.collapsible-content_05 {
	overflow: hidden;
	transition: max-height .25s ease-in-out;
	
}
.toggle_05:checked + .lbl-toggle_05 + .collapsible-content_05{
	max-height: 1500px;
	border-color: black;
	border-style: solid;
	border-width: 0 1px 1px 1px;
}
.toggle_05:checked + .lbl-toggle_05 {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.collapsible-content_05 .content-inner_05{
	padding: .5rem 1rem;
	width: 95%;
	margin: auto;
}

.content_04_01_box_01,
.content_04_01_box_02{
	
	height: 100px;
	
}




/*   Price_card Exemple Tab    */
/*   Price_card Exemple Tab    */
/*   Price_card Exemple Tab    */


/* =============== Tab  01  ==============  */


.content_03_exemple {
	width: 100%;
	height: auto;
}
h1 {
	text-align: center;
}
.half {
	float: left;
	width: 50%;
	padding: 0 1em;
}
/* Acordeon styles */
.tab {
	position: relative;
	margin: 10px auto;
	width: 95%;
	color: white;
	overflow:vi;
	font-size: 1.2em;
	font-family: "Roboto", sans-serif;
}
.tab input {
	position: absolute;
	opacity: 0;
	z-index: -1;
}
.tab label {
	position: relative;
	display: block;
	padding: 0 0 0 1em;
	background: #00bbf0;
	font-weight: bold;
	line-height: 3;
	cursor: pointer;
}
.blue label {
}
.tab-content {
	max-height: 0;
	overflow: hidden;
	background: #fff;

	-webkit-transition: max-height .35s;
	-o-transition: max-height .35s;
	transition: max-height .35s;
}
.blue .tab-content {
	background: #3498db;
}
.tab-content p {
	margin: 1em;
}
/* :checked */
.tab input:checked ~ .tab-content {
	max-height: 100vh;
	border-color: black;
	border-style: solid;
	border-width: 0 1px 1px 1px;
}
/* Icon */
.tab label::after {
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	width: 3em;
	height: 3em;
	line-height: 3;
	text-align: center;
	-webkit-transition: all .35s;
	-o-transition: all .35s;
	transition: all .35s;
}
.tab input[type=checkbox] + label::after {
	content: "+";
}
.tab input[type=radio] + label::after {
	content: "\25BC";
}
.tab input[type=checkbox]:checked + label::after {
	transform: rotate(315deg);
}
.tab input[type=radio]:checked + label::after {
	transform: rotateX(180deg);
}

/* =============== Tab  02  ==============  */

h1 {
	text-align: center;
}
.half_02 {
	float: left;
	width: 50%;
	padding: 0 1em;
}
/* Acordeon styles */
.tab_02 {
	position: relative;
	margin: 10px auto;
	width: 95%;
	color: white;
	overflow:vi;
	font-size: 1.2em;
	font-family: "Roboto", sans-serif;
}
.tab_02 input {
	position: absolute;
	opacity: 0;
	z-index: -1;
}
.tab_02 label {
	position: relative;
	display: block;
	padding: 0 0 0 1em;
	background: #00bbf0;
	font-weight: bold;
	line-height: 3;
	cursor: pointer;
}
.blue_02 label {
}
.tab-content_02 {
	max-height: 0;
	overflow: hidden;
	background: #fff;
	-webkit-transition: max-height .35s;
	-o-transition: max-height .35s;
	transition: max-height .35s;
}
.blue_02 .tab-content_02 {
	background: #3498db;
}
.tab-content_02 p {
	margin: 1em;
}
/* :checked */
.tab_02 input:checked ~ .tab-content_02 {
	max-height: 100vh;
	border-color: black;
	border-style: solid;
	border-width: 0 1px 1px 1px;
}
/* Icon */
.tab_02 label::after {
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	width: 3em;
	height: 3em;
	line-height: 3;
	text-align: center;
	-webkit-transition: all .35s;
	-o-transition: all .35s;
	transition: all .35s;
}
.tab_02 input[type=checkbox] + label::after {
	content: "+";
}
.tab_02 input[type=radio] + label::after {
	content: "\25BC";
}
.tab_02 input[type=checkbox]:checked + label::after {
	transform: rotate(315deg);
}
.tab_02 input[type=radio]:checked + label::after {
	transform: rotateX(180deg);
}



/* =============== Tab  03  ==============  */

h1 {
	text-align: center;
}
.half_03 {
	float: left;
	width: 50%;
	padding: 0 1em;
}
/* Acordeon styles */
.tab_03 {
	position: relative;
	margin: 10px auto;
	width: 95%;
	color: white;
	overflow:vi;
	font-size: 1.2em;
	font-family: "Roboto", sans-serif;
}
.tab_03 input {
	position: absolute;
	opacity: 0;
	z-index: -1;
}
.tab_03 label {
	position: relative;
	display: block;
	padding: 0 0 0 1em;
	background: #00bbf0;
	font-weight: bold;
	line-height: 3;
	cursor: pointer;
}
.blue_03 label {
}
.tab-content_03 {
	max-height: 0;
	overflow: hidden;
	background: #fff;
	-webkit-transition: max-height .35s;
	-o-transition: max-height .35s;
	transition: max-height .35s;
}
.blue_03 .tab-content_03 {
	background: #3498db;
}
.tab-content_03 p {
	margin: 1em;
}
/* :checked */
.tab_03 input:checked ~ .tab-content_03 {
	max-height: 100vh;
	border-color: black;
	border-style: solid;
	border-width: 0 1px 1px 1px;
}
/* Icon */
.tab_03 label::after {
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	width: 3em;
	height: 3em;
	line-height: 3;
	text-align: center;
	-webkit-transition: all .35s;
	-o-transition: all .35s;
	transition: all .35s;
}
.tab_03 input[type=checkbox] + label::after {
	content: "+";
}
.tab_03 input[type=radio] + label::after {
	content: "\25BC";
}
.tab_03 input[type=checkbox]:checked + label::after {
	transform: rotate(315deg);
}
.tab_03 input[type=radio]:checked + label::after {
	transform: rotateX(180deg);
}




/* =============== Tab  04   Logo Design Process  ==============  */

h1 {
	text-align: center;
}
.half_04 {
	float: left;
	width: 50%;
	padding: 0 1em;
}
/* Acordeon styles */
.tab_04 {
	position: relative;
	margin: 10px auto;
	width: 100%;
	color: white;
	overflow:vi;
	font-size: 1.2em;
	font-family: "Roboto", sans-serif;
}
.tab_04 input {
	position: absolute;
	opacity: 0;
	z-index: -1;
}
.tab_04 label {
	position: relative;
	display: block;
	padding: 0 0 0 1em;
	background: #00bbf0;
	font-weight: bold;
	line-height: 3;
	cursor: pointer;
}
.blue_04 label {
}
.tab-content_04 {
	max-height: 0;
	overflow: hidden;
	background: #fff;

	-webkit-transition: max-height .35s;
	-o-transition: max-height .35s;
	transition: max-height .35s;
}
.blue_04 .tab-content_04 {
	background: #3498db;
}
.tab-content_04 p {
	margin: 1em;
}
/* :checked */
.tab_04 input:checked ~ .tab-content_04 {
	max-height: 100vh;
	border-color: black;
	border-style: solid;
	border-width: 0 1px 1px 1px;
}
/* Icon */
.tab_04 label::after {
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	width: 3em;
	height: 3em;
	line-height: 3;
	text-align: center;
	-webkit-transition: all .35s;
	-o-transition: all .35s;
	transition: all .35s;
}
.tab_04 input[type=checkbox] + label::after {
	content: "+";
}
.tab_04 input[type=radio] + label::after {
	content: "\25BC";
}
.tab_04 input[type=checkbox]:checked + label::after {
	transform: rotate(315deg);
}
.tab_04 input[type=radio]:checked + label::after {
	transform: rotateX(180deg);
}





/* =============== Tab  05   Graphic Design Process  ==============  */

h1 {
	text-align: center;
}
.half_05 {
	float: left;
	width: 50%;
	padding: 0 1em;
}
/* Acordeon styles */
.tab_05 {
	position: relative;
	margin: 10px auto;
	width: 100%;
	color: white;
	overflow:vi;
	font-size: 1.2em;
	font-family: "Roboto", sans-serif;
}
.tab_05 input {
	position: absolute;
	opacity: 0;
	z-index: -1;
}
.tab_05 label {
	position: relative;
	display: block;
	padding: 0 0 0 1em;
	background: #00bbf0;
	font-weight: bold;
	line-height: 3;
	cursor: pointer;
}
.blue_05 label {
}
.tab-content_05 {
	max-height: 0;
	overflow: hidden;
	background: #fff;

	-webkit-transition: max-height .35s;
	-o-transition: max-height .35s;
	transition: max-height .35s;
}
.blue_05 .tab-content_05 {
	background: #3498db;
}
.tab-content_04 p {
	margin: 1em;
}
/* :checked */
.tab_05 input:checked ~ .tab-content_05 {
	max-height: 100vh;
	border-color: black;
	border-style: solid;
	border-width: 0 1px 1px 1px;
}
/* Icon */
.tab_05 label::after {
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	width: 3em;
	height: 3em;
	line-height: 3;
	text-align: center;
	-webkit-transition: all .35s;
	-o-transition: all .35s;
	transition: all .35s;
}
.tab_05 input[type=checkbox] + label::after {
	content: "+";
}
.tab_05 input[type=radio] + label::after {
	content: "\25BC";
}
.tab_05 input[type=checkbox]:checked + label::after {
	transform: rotate(315deg);
}
.tab_05 input[type=radio]:checked + label::after {
	transform: rotateX(180deg);
}







/* Small devices (portrait tablets and large phones, 800px and up) */
@media only screen and (max-width: 800px) {
	
	
	.collapsible-content,
	.collapsible-content_01,
	.collapsible-content_02,
	.collapsible-content_03,
	.collapsible-content_04,	
	.collapsible-content_05 {
		
		max-height: 0px;
	
	
}
	
}













/* Small devices (portrait tablets and large phones, 800px and up) */
@media only screen and (max-width: 800px) {
}


 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
...
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
...
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
...
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
...
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
...
}