/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

*{box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */}
.left{ float:left}
.right{ float:right}
.img-left{ float:left; margin-right:10px}
.img-right{ float:right; margin-left:10px}

body{ background:#e1e0de; font-size:1.2em; color:#535353; font-family: 'Open Sans', sans-serif;}

h1,h2{ line-height:1em}
.inicio h2{ font-size:24px}
.container{ max-width:996px; margin:0 auto}

/*columns*/

#aplication-header{ padding:20px 0; overflow:auto}
#aplication-header a.logo{ width:337px; height:88px; display:block; background: url(../img/logo-haceclick.png); float:left}
#aplication-header .menu-container{ float: right}
#aplication-header .menu{ padding:0; margin:0; text-align:right; font-size:0}


#aplication-content .panes h2, h2.actividad-title{ font-size:18px; text-transform:uppercase; margin:0}
#aplication-content .panes h3{ font-style:italic; margin:6px 0; font-size:120%}
#aplication-content p { margin:0 0 15px 0}
h1.header-title{ text-align:right; margin:22px 0 0 0; clear:both; font-weight:normal; font-size:125%; text-transform:uppercase}

ul.menu{}
ul.menu li { width:32px; height:32px; display:inline-block; margin-left:5px}
ul.menu li a{ display:block; height:100%; font-size:8px; font-weight:900; text-decoration:none; padding-top:33px; text-align:center; text-transform:uppercase; color:#ed1651} 
ul.menu li a:hover{ background:rgba(0,0,0,0.1)}
ul.menu li.home-button{ background:url(../img/menu-button.png) no-repeat}

.back-button{ background:url(../img/menu-button.png) no-repeat -38px 0}

.close-button{background:url(../img/menu-button.png) no-repeat -76px 0}
#aplication-content{ position:relative}

/*aplication comon styles*/
.bloque-title{  padding:20px; border-radius:10px; font-size:30px; color:#fff; margin:12px 0; text-align:center}
.aplication-center{ padding:20px; background:#FFFFFF; border-radius:10px}
.aplication-container{ padding-top:12px}
.button{ display:block; padding:10px 20px; font-size:30px; color:#fff; text-align:center;border-radius:10px; margin:12px 0; text-transform:uppercase;background:#525252}
.button:hover{ background:#2e2e2e; cursor:pointer}
/*.aplication-container .button{background:#525252}*/

/*aplication own styles*/

.iniciacion-afectiva h4 { color:#ed164f; background:url(../img/bubble-icon.png) no-repeat 0 10px; padding-left:46px; font-size:30px; margin:0px 0  26px 0}
.iniciacion-afectiva .bloque-title{ background:#ed164f}

.diversidad-sexual h4 { color:#0072bc; background:url(../img/bubble-icon.png) no-repeat 0 10px; padding-left:46px; font-size:30px; margin:0px 0  26px 0}
.diversidad-sexual .bloque-title{ background:#0072bc}

.violencia h4{}
.violencia .bloque-title{ background:#0eaf4f}

.metodos-anticonceptivos .bloque-title{ background:#6f2c91}

.browse{width:36px; height:36px; display:block; position:absolute; z-index:999;bottom:26px;}
.next{  background:url(../img/next-button.png) no-repeat;  right:10px;}
.prev{ background:url(../img/prev-button.png) no-repeat; right:60px; }
.browse:hover{ opacity: 0.8; cursor:pointer}

.glosario-section{}
.glosario-section .row .columns article{ text-align:left}
.glosario-section .search{ background:url(../img/lupa-icon.png) no-repeat 6px 8px; background-color:#0eaf4f; border-radius:4px; padding-top:5px; color:#FFF; height:40px; margin-bottom:10px; padding-left:40px}
.glosario-section .search label{ display:}
.glosario-section .search input{ border:none; height:30px; margin-left:3px; display:inline; width:200px}
.glosario-section .definicion{  height:335px}
.glosario-section .definicion p {overflow:auto; height:240px}
.glosario-section .definicion h2 { color:#0eaf4f}

.glosario{  background:#fff; height:465px; overflow: auto; border-radius:4px;
padding:5px 0px}
.glosario ul, .glosario ul li { list-style:none; padding:0; margin:0}
.glosario ul li a { text-decoration:none; color:#525252; font-size:20px; display:block; padding:3px 6px}
.glosario ul li a:hover{ background:#0eaf4f; color:#fff}
/*slider*/
/*.slider{ height:500px;float:left;position:relative; width:100%; margin:0 auto}
.slider > div {
    display:none;
    position:absolute;
    top:0;
    left:0;
    height:256px;
	width:100%;
}*/


/*scrolable*/

/*
root element for the scrollable.  when scrolling occurs this
element stays still.
*/
.scrollable {
  /* required settings */
  position:relative;
  overflow:hidden;
  width: 758px;
 
}
 
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accommodate scrollable
items.  it's enough that you set width and height for the root element
and not for this element.
*/
.scrollable .items {
  /* this cannot be too large */
  width:20000em;
  position:relative;
 
}

/*
a single item. must be floated in horizontal scrolling.  typically,
this element is the one that *you* will style the most.
*/
.items > div.slide {
  float:left;
  width:758px;
}


.row:before, .row:after {
    content: " ";
    display: table;
}
.row .row:after {
    clear: both;
}
.row{ overflow:auto}
.row .columns{ padding: 0 10px; float:left; position:relative; margin-bottom:20px }
.row .columns:first-of-type{ padding-left:0}
.row .columns:last-of-type{ padding-right:0}
.tree-columns{ width:33.333%}
.half-four-columns{ width:66.666%}
.four-columns{ width:25%}
.half-columns{ width:50%}

.full-column{ width:758px; margin: 0 auto}
.row  .half-columns:first-of-type{ width:52%}
.row  .half-columns:last-of-type{ width:48%}
.row .columns article{ text-align:center}

/*columns*/
.columns .panes{ width:100%}
.ipanes{ max-height:400px; overflow:auto; background:#d5d5d5; padding:20px; }
.ipanes p,  .ipanes li {font-size:0.8em}
.ipanes p{ text-align:justify}
.ipanes p a{ color:#0072bb}
.menu-inicio .tabs li{ width:100%; background:#CCCCCC;line-height:30px; margin-bottom:4px;}

.menu-inicio .tabs li a{ text-decoration:none; color:#fff; font-weight:600; display:block; width:100%; height:100%; padding:10px 20px}

.tabs .btn-inicio a{ background:#0072bb}
.tabs .btn-inicio a:hover{ background:#0066a7}
.tabs .btn-presentacion a{ background:#ed1651}
.tabs .btn-presentacion a:hover{ background:#d71248}
.tabs .btn-presentacion-pes a{ background:#6f2d91}
.tabs .btn-presentacion-pes a:hover{ background:#61277f}

.tabs .btn-creditos a{ background:#0eaf4f}
.tabs .btn-creditos a:hover{ background:#0d9f48}

.play-button{ text-align:center; width:180px; margin:0 auto; padding-top:40px}
.play-button a{ font-weight:bold; text-decoration:none; color:#0072bb; text-transform:uppercase; margin-top:20px}
.play-button a:hover{color:#ed1651}
.circle{ width:180px; background:#FFF; border-radius:180px; text-align:center; height:180px; padding-top:30px; margin-bottom:20px}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	
	border-left: 14px solid #0072bb;
	margin:0 auto;
	display: inline-block; margin-right:8px;
}
.circle:hover .arrow-right{ border-left: 160px solid #ed1651}
.circle:hover{ background:#efefef}
.big-button{ height:320px;margin:0 auto; margin-bottom:15px; border-radius:1px; width:100%;
-webkit-transition:all 0.2s ease-out;  /* Chrome y Safari */
  -o-transition:all 0.2s ease-out;  /* Opera */
  -moz-transition:all 0.2s ease-out;  /* Mozilla Firefox */
  -ms-transition:all 0.2s ease-out;   /* Internet Explorer */
  transition:all 0.2s ease-out;
  cursor:pointer
    /* W3C */}
.big-button img{ margin-top:70px}
/*.big-button:hover{ width:99%; height: 316px }*/
.big-button.blue{ background:#0072bb; color:#FFFFFF}
.big-button.blue:hover{ background:#005083 }
.big-button.red{ background:#ed1651; color:#FFFFFF}
.big-button.red:hover{ background:#bf1141 }
.big-button.violet{ background:#6f2d91; color:#FFFFFF}
.big-button.violet:hover{ background:#531e6d}

.big-button.green{ background:#0eaf4f; color:#fff}
.big-button.green:hover{ background:#0d8d41}
.big-button a{ text-decoration:none}
.big-button a h5{ color:#fff; text-decoration:none; font-size:1.5em; padding-top:30px; margin-top:0}
.pdf-button{height:120px;margin:0 auto; margin-bottom:15px; border-radius:1px; width:100%;
padding-top:0px;
-webkit-transition:all 0.2s ease-out;  /* Chrome y Safari */
  -o-transition:all 0.2s ease-out;  /* Opera */
  -moz-transition:all 0.2s ease-out;  /* Mozilla Firefox */
  -ms-transition:all 0.2s ease-out;   /* Internet Explorer */
  transition:all 0.2s ease-out;
  cursor:pointer; background:#ccc}
  
 /*.big-button:hover{ width:99%; height: 316px }*/
.pdf-button.blue{ background:#0072bb; color:#FFFFFF}
.pdf-button.blue:hover{ background:#005083 }
.pdf-button.red{ background:#ed1651; color:#FFFFFF}
.pdf-button.red:hover{ background:#bf1141 }
.pdf-button.violet{ background:#6f2d91; color:#FFFFFF}
.pdf-button.violet:hover{ background:#531e6d}


.modulos-docentes .big-button{ height:220px; border-radius:6px}
.pdf-button.green{ background:#0eaf4f; color:#fff}
.pdf-button.green:hover{ background:#0d8d41} 
 .pdf-button a{ text-decoration:none; color:#fff; height:100%; width:100%; display:block; padding-top:10px} 
 .pdf-button a h2  { color:#FFFFFF; text-decoration:none; font-size:20px; padding:0 10px; margin:5px 0} 
 
.tabs{ margin:0; padding:0}
#aplication-content .panes { min-height:480px}
#aplication-content .panes article{ text-align:left; padding-top:20px}
.actividades-interactivas-tabs li{  list-style:none; display:inline-block; max-width:250px; width:50%; height:250px; border-radius:8px; float:left; padding: 0 10px 20px 10px; position:relative }
.actividades-interactivas-tabs li a{ display:block; height:100%; margin: 0; border-radius:10px; position:relative; overflow:hidden; padding:10px; font-size:200%; line-height:1em; margin:0 auto}
.actividades-interactivas-tabs li a{ font-size:160%}
.actividades-interactivas-tabs li a span{ display:block; position: absolute; width:50px; height:50px; font-weight:bold; text-align:center; padding-top:8px; font-size:110%;

-o-transition:all 0.2s ease-out;  /* Opera */
  -moz-transition:all 0.2s ease-out;  /* Mozilla Firefox */
  -ms-transition:all 0.2s ease-out;   /* Internet Explorer */
  transition:all 0.2s ease-out; }
.actividades-interactivas-tabs li a .table{ width:100%; height:100%; display:table}
.tr{ display:table-row}
.td{ display:table-cell; vertical-align:middle}
.actividades-interactivas-tabs li:nth-child(1), .actividades-interactivas-tabs li:nth-child(3){ padding-left:0px}
.actividades-interactivas-tabs li:nth-child(2), .actividades-interactivas-tabs li:nth-child(4){ padding-right:0px}

.med-button{ text-align:center; color:#FFF; text-decoration:none; -webkit-transition:all 0.2s ease-out;  /* Chrome y Safari */
  -o-transition:all 0.2s ease-out;  /* Opera */
  -moz-transition:all 0.2s ease-out;  /* Mozilla Firefox */
  -ms-transition:all 0.2s ease-out;   /* Internet Explorer */
  transition:all 0.2s ease-out;
  cursor:pointer}
.med-button:hover span{ width:100%; height:100%; border-radius:0 !important; background:rgba(0,0,0,0.2) !important;}
.med-button.blue{ background:#0072bb; color:#FFFFFF}
.med-button.blue span{ right:0; bottom:0; background:rgba(255,255,255,0.5); color:#0072bb; border-radius:60px 0 0  0; text-indent:8px}
.med-button.red{ background:#ed1651; color:#FFFFFF}
.med-button.red span{left:0; bottom:0; background:rgba(255,255,255,0.5); color:#ed1651; border-radius:0px 60px 0  0;text-indent:-8px}

.med-button.green{ background:#0eaf4f; color: #fff}
.med-button.green span{	right:0; top:0; background:rgba(255,255,255,0.5); color:#0eaf4f; border-radius:0px 0px 0  60px; text-indent:8px}
/*.med-button.orange{ background:#f37022; color:#FFFFFF}
.med-button.orange span{
	right:0; top:0; background:rgba(255,255,255,0.5); color:#f37022; border-radius:0px 0px 0  60px; text-indent:8px
	}*/
	.med-button.violet{ background:#6f2d91; color:#FFFFFF}
.med-button.violet span{left:0; top:0; background:rgba(255,255,255,0.5); color:#6f2d91; border-radius:0px 0px 60px  0px; text-indent:-8px}


.blue{ color:#0072bb;}
.red{ color:#ed1651; }
.violet{color:#6f2d91;}
.green{ color:#0eaf4f}
.organe{ color:#f37022;}

.featured{ margin: 10px 0 0 0; padding: 20px 0 10px 0; clear:both; text-align:justify}
.featured h2{ font-style: italic; margin:0 0 10px 0}
.featured p { margin: 10px 0 0 0}
.border-top{ }
.border-top-red{ border-top:solid 2px #ed1651;}
.border-bottom-red{border-bottom:solid 2px #ed1651;}

.border-top-green{border-top:solid 2px #0eaf4f;}
.border-bottom-green{border-bottom:solid 2px #0eaf4f;}

footer ul{ margin:0; padding:0; text-align:right; list-style:none}
footer ul li { display:inline-block; text-align:right; margin:26px 10px}







/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}