/* ==========================================================
   PORTAL DAS JORNADAS CIENTÍFICAS
   Universidade Jean Piaget de Angola
   Ficheiro: typography.css
   ========================================================== */

/*==========================================================
  BODY
==========================================================*/

body{

    font-family:var(--font-primary);

    font-size:var(--fs-md);

    font-weight:400;

    line-height:1.7;

    color:var(--text);

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

/*==========================================================
  TÍTULOS
==========================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0 0 1rem;

    font-family:var(--font-title);

    font-weight:700;

    color:var(--primary);

    line-height:1.3;

}

h1{

    font-size:3.5rem;

}

h2{

    font-size:2.8rem;

}

h3{

    font-size:2rem;

}

h4{

    font-size:1.5rem;

}

h5{

    font-size:1.25rem;

}

h6{

    font-size:1rem;

}

/*==========================================================
  PARÁGRAFOS
==========================================================*/

p{

    margin:0 0 1rem;

    color:var(--text-light);

    font-size:1rem;

    line-height:1.8;

}

/*==========================================================
  LINKS
==========================================================*/

a{

    color:var(--gold);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--gold-dark);

}

/*==========================================================
  TEXTO
==========================================================*/

.text-primary{

    color:var(--primary)!important;

}

.text-gold{

    color:var(--gold)!important;

}

.text-white{

    color:#fcfcfc;

}

.text-muted{

    color:var(--text-light)!important;

}

.text-success{

    color:var(--success)!important;

}

.text-danger{

    color:var(--danger)!important;

}

.text-warning{

    color:var(--warning)!important;

}

.text-center{

    text-align:center;

}

.text-start{

    text-align:left;

}

.text-end{

    text-align:right;

}

/*==========================================================
  LEAD
==========================================================*/

.lead{

    font-size:1.2rem;

    font-weight:300;

    line-height:1.9;

    color:var(--text-light);

}

/*==========================================================
  SMALL
==========================================================*/

small{

    font-size:.875rem;

    color:var(--text-light);

}

/*==========================================================
  TÍTULO DAS SECÇÕES
==========================================================*/

.section-title{

    margin-bottom:60px;

    text-align:center;

}

.section-title span{

    display:inline-block;

    padding:8px 20px;

    margin-bottom:15px;

    background:rgba(200,154,50,.12);

    color:var(--gold-dark);

    border-radius:50px;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}

.section-title h2{

    position:relative;

    display:inline-block;

    padding-bottom:18px;

}

.section-title h2::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:70px;

    height:4px;

    background:var(--gold);

    border-radius:50px;

}

.section-title p{

    max-width:750px;

    margin:25px auto 0;

}

/*==========================================================
  HERO
==========================================================*/

.hero h1{

    color:#000000;

    font-size:4rem;

    margin-bottom:20px;

}

.hero h3{

    color:var(--gold-light);

    font-family:var(--font-primary);

    font-weight:500;

    margin-bottom:25px;

}

.hero p{

    color:rgba(255,255,255,.92);

}

/*==========================================================
  LISTAS
==========================================================*/

ul{

    padding:0;

    margin:0;

}

ul li{

    list-style:none;

}

/*==========================================================
  BLOCKQUOTE
==========================================================*/

blockquote{

    padding:30px;

    margin:30px 0;

    border-left:5px solid var(--gold);

    background:#FFF;

    color:var(--text-light);

    font-style:italic;

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

}

/*==========================================================
  CÓDIGO
==========================================================*/

code{

    padding:3px 8px;

    background:#F4F4F4;

    color:#C62828;

    border-radius:5px;

    font-size:.9rem;

}

pre{

    padding:20px;

    background:#222;

    color:#FFF;

    border-radius:var(--radius);

    overflow:auto;

}

/*==========================================================
  SELEÇÃO
==========================================================*/

::selection{

    background:var(--gold);

    color:#FFF;

}

::-moz-selection{

    background:var(--gold);

    color:#FFF;

}

/*==========================================================
  RESPONSIVO
==========================================================*/

@media(max-width:992px){

    h1{

        font-size:3rem;

    }

    h2{

        font-size:2.4rem;

    }

    .hero h1{

        font-size:3rem;

    }

}

@media(max-width:768px){

    h1{

        font-size:2.4rem;

    }

    h2{

        font-size:2rem;

    }

    h3{

        font-size:1.6rem;

    }

    .hero h1{

        font-size:2.4rem;

    }

    .hero h3{

        font-size:1.2rem;

    }

    .section-title{

        margin-bottom:40px;

    }

}

@media(max-width:576px){

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.7rem;

    }

    h3{

        font-size:1.4rem;

    }

    p{

        font-size:.95rem;

    }

    .lead{

        font-size:1rem;

    }

}