/* ==========================================================================

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

   ========================================================================== */



html,

button,

input,

select,

textarea {

    color: #999;

}



body {

    font-size: 1em;

    line-height: 1.4;
    overflow-x: hidden;

}



::-moz-selection {

    background: #333;

    text-shadow: none;

}



::selection {

    background: #333;

    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;

}

audio{

}

/* ===== Fonts Styles ==================================================

   By - fontsquirrel.com/fonts/PT-Sans

   ========================================================================== */



/* General Demo Style */



@font-face {

    font-family: 'Agenda';

    src: url('agenda-light-webfont.eot');

    src: url('agenda-light-webfont.eot?#iefix') format('embedded-opentype'),

         url('agenda-light-webfont.woff') format('woff'),

         url('agenda-light-webfont.ttf') format('truetype'),

         url('agenda-light-webfont.svg#ag_gendalight') format('svg');

    font-weight: normal;

    font-style: normal;

}

h2.sumario,

h3.sumario,

h4.sumario {

	font-family: 'Agenda', Arial, sans-serif;

	}

p {

	font: normal 19px/27px 'Agenda', Arial, sans-serif;

	}



/* ===== Initializr Styles ==================================================

   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template

   ========================================================================== */



body {

    font: 16px/26px 'Helvetica Neue', Helvetica, Arial, Sans-Serif;

}



.wrapper {

    width: 100%;

    margin: 0;

}

/* ===================

    ALL: MAM® Theme

   =================== */



.header-container {

    border-bottom: 2px solid #ee373d;

}

.main aside {

    border-top: 2px solid white;

}

.header-container {

	background: #fff;

	text-align: justify;

}

.main aside {

	background: #1f3459;

}

.footer-container {

	background: #fff;

	border-top: 2px solid #eee;

}



.title {

    width: 326px;

	height: 85px;

	background: transparent url(../images/logotipo.png) no-repeat left top;

	text-indent: -900px;

	font:normal 14pt 'Helvetica Neue', Helvetica, Arial, sans-serif;

	color:#ccc;

	text-transform:uppercase;

	padding-top:5px;

	margin-top:20px;

}



/* ==============

    MOBILE: Menu

   ============== */



nav ul {

    margin: 0;

    padding: 0;

}



nav a {

    display: block;

    margin-bottom: 10px;

    padding: 15px 0;



    text-align: center;

    text-decoration: none;

    font-weight: normal;



    color: #999;

    background: #fff;

    

    font: 18px/27px 'Agenda', Helvetica, Arial, sans-serif;

    text-transform: uppercase;

}

nav a:visited {

	color: #999;

	background: #fff;

}

nav a:hover {

    color: #1c75bc;

    background: #A2DCFF;

}



nav a:hover {

    text-decoration: none;

}



/* ==============

    MOBILE: Main

   ============== */



.main {

    padding: 30px 0 0 0;

}



.main article h2 {

    font-size: 4em;

    line-height: 1em;

    font-weight: normal;

}



.main article h3 {

    font-size: 1.6em;

    line-height: 1.1em;

    font-weight: normal;

    text-transform: uppercase;

}



.main article h4 {

    font-size: 1.6em;

    line-height: 1em;

    font-weight: normal;

    text-transform: uppercase;

}



.main aside {

    color: #999;

    padding: 0px 5% 10px;

}



.main aside h3 {

    font-family:'Agenda', Arial, sans-serif;

    font-size: 1.2em;

    line-height: 1em;

    font-weight: normal;

    text-transform: uppercase;

	color:#cecece;

}

.main aside h4 {

	font-family:'Agenda', Arial, sans-serif;

    font-size: 1.2em;

    line-height: 1em;

	color:#cecece;

    font-weight: normal;

    text-transform: uppercase;

	text-align:center;

	padding-bottom: 1.1em;

	border-bottom:#ccc solid 1px;

}

.main aside h4 a {

	color:#cecece;

	text-decoration:none;

}

.main aside h4 a:visited {

	color: #999;

	background: #fff;

}

.main aside h4 a:hover {

    color: #666;

}



.main aside h4 a:hover {

    text-decoration: none;

}



.footer-container footer {

    color: #666;

    padding: 20px 0;

}



/* ===============

    ALL: IE Fixes

   =============== */



.ie7 .title {

    padding-top: 20px;

}



/* ==========================================================================

   Author's custom styles

   ========================================================================== 

   ========================================================================== */

.texto {

    position: relative;

    overflow: hidden;

}



.texto article {

    position: relative;

    text-align: center;

    margin: 30px auto;

}



.principal {

	font-size: 20pt;

	line-height: 1.1em;

	text-transform:uppercase;

	padding-top:20px;

}



.datos {

	font-size: 10pt;

	text-align: center;

}



/* Formulario */

.formulario {

	width: 90%;

	padding-bottom: 20px;

	margin-bottom: 20px;	

	border-bottom: 1px solid #eee;

	margin:20px;

}



.formulario input, textarea {

	min-width: 252px;

	width: 100%;

	margin-bottom: 20px;

	padding: 12px 10px 0.8em 10px;

	border: 1px solid #999;

	font-family: 'Agenda', Arial, sans-serif;

	color: #666;

	outline: 0;

	background: #eee;

}

.formulario input:hover,

.formulario input:focus,

.formulario textarea:hover,

.formulario textarea:focus { 

	border: 1px solid #cecece; 

	-webkit-box-shadow:  0px 0px 8px 0px rgba(0, 0, 0, .3);

    box-shadow:  0px 0px 8px 0px rgba(0, 0, 0, .3);

	}

.formulario .boton input {

	width: auto;

	padding: 12px 15px 0.4em 15px;

	background: #cecece;

	border: 0;

	font-size: 22px;

	font-family: 'Agenda', Arial, sans-serif;

	color: #fff;

	-webkit-border-radius: 5px;

    border-radius: 5px;

    text-transform: uppercase;

	}









/* ==========================================================================

   Botones

   ========================================================================== */

/* General button style (reset) */

.btn {

	border: none;

	font-family: inherit;

	font-size: inherit;

	color: inherit;

	background: none;

	cursor: pointer;

	padding: 25px 80px;

	display: inline-block;

	margin: 15px 30px;

	text-transform: uppercase;

	letter-spacing: 1px;

	font-weight: 700;

	outline: none;

	position: relative;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;

	left:27%;

}



.btn:after {

	content: '';

	position: absolute;

	z-index: -1;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;

}

/* Button 1 */

.btn-1 {

	border: 3px solid #fff;

	color: #fff;

}

/* Button 1b */

.btn-1b:after {

	width: 100%;

	height: 0;

	top: 0;

	left: 0;

	background: #fff;

}



.btn-1b:hover,

.btn-1b:active {

	color: #cecece;

}



.btn-1b:hover:after,

.btn-1b:active:after {

	height: 100%;

}

/* Botón 2 */

.btn2 {

	border: none;

	font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;

    text-transform: uppercase;

	color: #fff;

	background: none;

	cursor: pointer;

	padding: 25px 80px;

	display: inline-block;

	margin: 15px 30px;

	text-transform: uppercase;

	letter-spacing: 1px;

	font-weight: 700;

	outline: none;

	position: relative;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;

	left:0;

}



.btn2:after {

	content: '';

	position: absolute;

	z-index: -1;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;

}

/* Button 2 */

.btn-2 {

	border: 3px solid #fff;

	color: #fff;

}

/* Button 2b */

.btn-2b:after {

	width: 100%;

	height: 0;

	top: 0;

	left: 0;

	background: #fff;

}



.btn-2b:hover,

.btn-2b:active {

	color: #333;

	z-index: 2;

}



.btn-2b:hover:after,

.btn-2b:active:after {

	height: 100%;

}

/* Botón 3 */

.btn3 {

	border: none;

	font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;

    text-transform: uppercase;

	color: #cecece;

	background: none;

	cursor: pointer;

	padding: 25px 80px;

	display: inline-block;

	margin: 15px 30px;

	text-transform: uppercase;

	letter-spacing: 1px;

	font-weight: 700;

	outline: none;

	position: relative;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;

	left:0;

}



.btn3:after {

	content: '';

	position: absolute;

	z-index: -1;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;

}

/* Button 3 */

.btn-3 {

	border: 3px solid #cecece;

	color: #cecece;

}

/* Button 3b */

.btn-3b:after {

	width: 100%;

	height: 0;

	top: 0;

	left: 0;

	background: #cecece;

}



.btn-3b:hover,

.btn-3b:active {

	color: #fff;

	z-index: 2;

}



.btn-3b:hover:after,

.btn-3b:active:after {

	height: 100%;

}

/* ==========================================================================

   brasas

   ========================================================================== */

.azul {

	background: #fff url(../images/bg-azul.png) top center no-repeat;

	border-top:2px solid #1f3459;

	}

.blanco {

	color:#666;

}

.encabezado {

	border-bottom:2px solid #1f3459;

}

.encabezado header {

	background: #fff;

}

.encabezado header h2 {

	color:#ccc;

	font: normal 60pt 'Agenda', Arial, Helvetica, sans-serif;

	text-transform:uppercase;

	text-align:center;

	padding:40px 0 0.35em 0;

	margin:0;

}



.sumario {

	font: normal 14pt 'Agenda', Arial, Helvetica, sans-serif;

}

.lectura {

	font: normal 14pt/20pt 'Helvetica Neue', Helvetica, Arial, sans-serif;

}



.sumario2 {

	font: normal 16pt/20pt 'Agenda', Arial, Helvetica, sans-serif;

	color:#333;

	text-transform:uppercase;

}





/* ==========================================================================

   Media Queries

   ========================================================================== */



@media only screen and (min-width: 480px) {



/* ====================

    INTERMEDIATE: Menu

   ==================== */



    nav a {

        float: left;

        width: 17%;

        margin: 0 1.7%;

        padding: 25px 2%;

        margin-bottom: 0;

    }



    nav li:first-child a {

    	margin-left: 0;

    }



    nav li:last-child a {

        margin-right: 0;

    }



/* ========================

    INTERMEDIATE: IE Fixes

   ======================== */



    nav ul li {

        display: inline;

    }



    .oldie nav a {

        margin: 0 0.7%;

    }

	.step {	

	width: 480px;

    height: 480px;

	display: block;

	-webkit-transition: opacity 1s;

	-moz-transition:    opacity 1s;

	-ms-transition:     opacity 1s;

	-o-transition:      opacity 1s;

	transition:         opacity 1s;

}

	.btn {

	

	left:10%;

}

	.title {

  	margin-left:20px;

}



	

}



@media only screen and (min-width: 768px) {



/* ====================

    WIDE: CSS3 Effects

   ==================== */



    .header-container {

        -webkit-box-shadow: 0 5px 10px #999;

           -moz-box-shadow: 0 5px 10px #999;

                box-shadow: 0 5px 10px #999;

    }

    .main aside {

	    background: #1f3459;

    }

	.step {	

	width: 780px;

    height: 480px;

	display: block;

	-webkit-transition: opacity 1s;

	-moz-transition:    opacity 1s;

	-ms-transition:     opacity 1s;

	-o-transition:      opacity 1s;

	transition:         opacity 1s;

}

	.btn {

	

	left:24%;

}



	

/* ============

    WIDE: Menu

   ============ */



    .title {

        float: left;

		margin-left:20px;

    }



    nav {

        float: right;

        width: 55%;

    }



/* ============

    WIDE: Main

   ============ */



    .main article {

        float: left;

        width: 57%;

		padding-top:40px;

    }



    .main aside {

        float: right;

        width: 28%;

    }

	.main2 article {

        float: left;

        width: 10%;

		padding-top:40px;

    }



    .main2 aside {

        float: right;

        width: 75%;

    }

	

}



@media only screen and (min-width: 1140px) {



/* ===============

    Maximal Width

   =============== */



    .wrapper {

        width: 1026px; /* 1140px - 10% for margins */

        margin: 0 auto;

    }

	

}



/* ==========================================================================

   Helper classes

   ========================================================================== */



.ir {

    background-color: transparent;

    border: 0;

    overflow: hidden;

    *text-indent: -9999px;

}



.ir:before {

    content: "";

    display: block;

    width: 0;

    height: 100%;

}



.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;

}

.title {

	margin-left:20px;

	text-decoration:none;

	text-align: center;

}







/* ==========================================================================

   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;

	text-align: center;

    }



    h2,

    h3 {

        page-break-after: avoid;

    }

}