@charset "utf-8";

/*

    Familias y sexualidades: Prevención del embarazo en adolescentes
    INSTITUTO NACIONAL DE LAS MUJERES, INMUJERES.
	www.inmujeres.gob.mx

    Copyright © 2016 INMUJERES. All rights reserved.

*/

#page {
	background-image:none; /* NO BRICKS ON PAGE BACKGROUND */
}

#intro {
	background-color:#98E4D2;
}

#poster {
	padding-bottom: 45%;
}

#floor {
	background: url(../img/floor_plant_02.svg) no-repeat 4% bottom, url(../img/floor_wall.svg) repeat-x center bottom;
	background-color:#fff2d1;
}

hr {
	border-top-color: #98E4D2;
}

.accordion {
	background-color:#98E4D2; 
}

.accordion_item {
	background:#D1F3EB url(../img/cap_01_accordion_bullet.svg) no-repeat;
}

.accordion_item_content {
	border-top-color: #98E4D2;
}

/*******************/
/*** MEDIA QUERY ***/
/*******************/

@media only screen and (max-width: 768px) {
	
	.accordion_item {
		background-image: none;
		padding: 20px 60px 20px 20px;
	}
	
	#conclusion {
		padding: 40px 0 20px 0;
		justify-content:center;
	}
	
	#conclusion > .speech_bubble {
		width: 100%;
	}
	
	#conclusion > .speech_bubble_right:before {
		top:auto;
		bottom: -15px;
		right: 20%;
		box-shadow:	5px 5px 0 rgba(0,0,0, 0.1);
		transform:rotate(45deg) skew(15deg, 15deg);
		z-index:auto;
	}
	
	#conclusion > img {
		width: 50%;
	}
	
	#floor {
		background: url(../img/floor_plant_02.svg) no-repeat center bottom, url(../img/floor_wall.svg) repeat-x center bottom;
		background-color:#fff2d1;
	}
}

/* GROUP BOX */

/* CAP 01 TEM 04 GROUP BOX 01 */

.cap_01_tem_04_gb_01 > .group_box_item {
	background-color: #FFD876;
}

.cap_01_tem_04_gb_01 p {
	position:relative;
	margin: -20px;
	padding: 20px;
	background-color: #89E0CB;
	border-top: solid 6px #36BB9B;
	border-bottom: solid 6px #36BB9B;
}

.cap_01_tem_04_gb_01 p:before, .cap_01_tem_04_gb_01 p:after {
	content:'';
	position: absolute;
	left: 50%;
	top: 0;
	margin-left: -14px;
	width: 0;
	height: 0;
	border: 14px solid;
	border-color: #36BB9B transparent transparent transparent;
}

.cap_01_tem_04_gb_01 p:after {
	top: calc(100% + 6px);
}

.cap_01_tem_04_gb_01 .list_bullet {
	margin-top: 40px;
}

/* INTERACTIVE MECHANICS STYLES */

/* CUSTOM CLASSES USED WITH TOGGLE ON CLICK (toc.js) */

/* CAP 01 TEM 02 ACT 01 (a) */

.cap_01_tem_02a_text_a {
	width: 60%;
	right: 5%;
	top: 40%;
	font-size: 1.1em;
	font-weight:bold;
	text-align:center;
	transform: translateY(-50%);
}

.cap_01_tem_02a_text_b {
	width: 80%;
	right: 10%;
	top: 50%;
	font-size: 1.1em;
	font-weight:bold;
	text-align:center;
	transform: translateY(-50%);
	font-style: italic;
	color:#967A70;
	line-height: 1.2em;
}

.cap_01_tem_02a_text_b:before, .cap_01_tem_02a_text_b:after {
	position: relative;
	font-size: 2em;
	vertical-align: baseline;
	color: #49CFAE;
	line-height:0.1em;
}

.cap_01_tem_02a_text_b:before{
	content: "\201C";
	top: 0.2em;
	left: -0.1em;
}

.cap_01_tem_02a_text_b:after{
	content: "\201D";
	top: 0.3em;
}

/* CAP 01 TEM 05 ACT 02 (b) */

.cap_01_tem_05b_text_a {
	width: 50%;
	left: 40%;
	top: 32%;
	transform: translateY(-50%);
	font-size: 1.2em;
	font-weight:bold;
	text-align:center;
	color: #fff;
	text-shadow: 0 2px 0 rgba(0,0,0, 0.2);
}

.cap_01_tem_05b_text_b {
	width: 50%;
	left: 35%;
	top: 35%;
	transform: translateY(-50%);
	font-size: 1.1em;
	font-weight:bold;
	text-align:center;
	font-style: italic;
	line-height: 1.2em;	
}

.cap_01_tem_05b_text_b:before, .cap_01_tem_05b_text_b:after {
	position: relative;
	font-size: 2em;
	vertical-align: baseline;
	color: #49CFAE;
	line-height:0.1em;
}

.cap_01_tem_05b_text_b:before{
	content: "\201C";
	top: 0.2em;
	left: -0.1em;
}

.cap_01_tem_05b_text_b:after{
	content: "\201D";
	top: 0.3em;
}