@import url('reset.css');
@import url('fonts.css');

*{
    box-sizing:initial;
    -webkit-box-sizing:initial;
    -moz-box-sizing:initial;
    zoom:1;
}

body {
    position:relative;
    font-size: .9em;
    font-family: 'CronosPro', Sans-Serif;
    font-style:normal;
    color: #555;
    background-color: #fbfbfb;
}

header, footer, nav, section {
    display: block;
}

h1{
    font-size:200%;
    font-weight:normal;
    margin-bottom:50px;
}
h2{
    font-size:130%;
    margin-bottom:20px;
}
p{
    margin-bottom:15px;
}
a{
    text-decoration:none;
    transition:all ease-out .2s;
    -moz-transition:all ease-out .2s;
    -webkit-transition:all ease-out .2s;
    -o-transition:all ease-out .2s;
}

/* HEADER
-----------------------------------------------------------*/
header{
    background:#fff;
    text-align:center;
    box-shadow:0 0px 3px 0px rgba(0,0,0,0.3);
}
header h1{
    margin-bottom:0;
}
header img{
    width:10%;
    padding:20px 0;}

/* MAIN
-----------------------------------------------------------*/
#main{
    width:70%;
    margin:0 auto;
    padding:50px 0;
    font-size:150%;
}

    #main #wrapper h1{
        text-align:center;
    }
    #main nav{
        margin-top:50px;
        width:auto;
    }
        #main nav:after{
            content:"";
            display:block;
            width:1px;
            height:1px;
            position:relative;
            clear:both;
        }
        #main nav ul li{
            display:block;
            position:relative;
            float:left;
            margin-bottom:15px;
        }
            #main nav li a{
                display:block;
                position:relative;
                width:30px;
                background:#fbfbfb;
                height:30px;
                line-height:30px;
                margin:0 20px;
                text-align:center;
                padding:10px;
                border-radius:50%;
                border:1px solid #ccc;
                color:#555;
            }
                #main nav ul li:before{
                    content:"";
                    display:block;
                    width:40px;
                    height:1px;
                    background:#ccc;
                    position:absolute;
                    top:50%;
                    right:-21px;
                }
                #main nav ul li:last-child:before{
                    width:0;
                    right:0;
                }
                #main nav ul li:after{
                    content:"";
                    display:block;
                    position:absolute;
                    width:16px;
                    height:16px;
                    top:50%;
                    right:-10px;
                    margin-top:-7px;
                    background-image:url(../Images/Arrowhead-Right.png);
                    background-repeat:no-repeat;
                }
                #main nav ul li:last-child:after{
                    display:none;
                }
            #main nav ul li.activo a{
                background:#555;
                color:#fff;
                border-color:#555;
                box-shadow:0 0 0 6px rgba(85,85,85,1);
            }

            #main nav ul li.concluido a{
                background:#ddd;
                color:#aaa;
            }
                #main nav ul li a:hover{
                    box-shadow:0 0 0 6px rgba(85,85,85,1);
                }
                #main nav ul li.activo a:hover{
                    background:#555;
                box-shadow:0 0 0 6px rgba(85,85,85,1);
                    cursor:default;
                }
                #main nav ul li.concluido a:hover{
                    background:#ddd;
                }

/* CONTENT
-----------------------------------------------------------*/
    #content{
        display:none;
        width:80%;
        margin:50px auto;
    }
        #content section{
            clear:both;
            margin-bottom:30px;
            padding-bottom:30px;
            border-bottom:1px dashed #ccc;
        }
            #content section:after{
                content:"";
                display:block;
                width:1px;
                height:1px;
                position:relative;
                clear:both;
            }
            #content section div.title{
                margin-bottom:30px;
            }
            #content section img{
                width:60%;
                border:5px solid #555;
                box-shadow:0 0 10px 0 rgba(0,0,0,0.3);
            }

/* CUSTOM
-----------------------------------------------------------*/
.floatLeft{
    float:left;
    margin-right:20px;
    margin-bottom:20px;
}
.floatRight{
    float:right;
    margin-left:20px;
    margin-bottom:20px;
}
.centrado{
    display:block;
    margin:0 auto;
    margin-bottom:20px;
}
.bold{
    font-weight:bold;
}
.red{
    color:#ff0000;
}

/* ADAPTIVE
-----------------------------------------------------------*/
@media screen and (max-width: 850px) {
    header img{
        width:50%;
    }
    #main{
        width:90%;
    }
    #content{
        width:100%;
    }
}