/**
 * AWK - Geigenbauwettbewerb 2017
 *
 * LICENSE
 *
 * This software and its source code is protected by copyright law (Sec. 69a ff. UrhG).
 * It is not allowed to make any kinds of modifications, nor must it be copied,
 * or published without explicit permission. Misuse will lead to persecution.
 *
 * @copyright  2017 infomax websolutions GmbH
 * @link       http://www.infomax-it.de
 * @package    css
 * @subpackage article init
 * @author     degener
 * @since      21.03.2017
 * @version    $Id$
 **/
/*  =========================================================
headlines
paragraph
list
images
========================================================== */

/*  =========================================================
headlines
========================================================= */
@media screen {
  
  .bodyText h1 {
    width: 784px;
    font: 400 italic 3rem/1.1 'Gentium Basic', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 3rem;
    line-height: 1.1;
    font-family: 'Gentium Basic', Georgia, serif;
    color: #355586;
    padding: 1.5rem 0;
    hyphens: auto;
  }
  .bodyText h2,
  .bodyText h3,
  .bodyText h4,
  .bodyText h5,
  .bodyText h6 {
    font: 400 italic 2.25rem/1.1 'Gentium Basic', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 2.25rem;
    line-height: 1.1;
    font-family: 'Gentium Basic', Georgia, serif;
    color: #355586;
    text-align: left;
    padding: 1.5rem 0 0 0;
    hyphens: auto;
  }
  
}


@media screen and (max-width: 1230px) {
  .bodyText h1 {
    width: 100%;
  }
}

@media screen and (max-width: 481px) {
  .bodyText h1 {
    font-size: 1.625rem;
    padding: 1rem 0;
  }
}

@media screen and (max-width: 481px) {
  .bodyText h2,
  .bodyText h3,
  .bodyText h4,
  .bodyText h5,
  .bodyText h6 {
    font-size: 1.5rem;
    padding-top: 1rem;
  }
}


/*  =========================================================
paragraph
========================================================= */
@media screen {
  
  .bodyText p {
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 400;
    color: #595959;
    text-align: left;
    padding: 1.5rem 0;
  }
  .bodyText p a:link,
  .bodyText p a:visited {
    color: #355586;
    text-decoration: underline;
  }
  .bodyText p a:hover,
  .bodyText p a:active,
  .bodyText p a:focus {
    text-decoration: none;
  }
  .bodyText p strong {
    font-weight: 700;
  }
  .bodyText p em,
  .bodyText p i {
    font-style: italic;
  }
  
}


@media screen and (max-width: 481px) {
  .bodyText p {
    font-size: 0.938rem;
    padding: 0.5rem 0 1rem 0;
  }
}


/*  =========================================================
paragraph
========================================================= */
@media screen {
  
  .bodyText ul {
    margin-left: 30px;
  }
  .bodyText li {
    position: relative;
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 400;
    color: #595959;
    text-align: left;
    padding: 0.5rem 0;
  }
  .bodyText li::before {
    content: '';
    width: 45px;
    height: 45px;
    display: inline-block;
    background: transparent url(../../images/base/clef.svg) no-repeat 0 0;
    background-size: contain;
    position: absolute;
    top: 1.7rem;
    left: -40px;
    z-index: 1;
  }
  .bodyText li p {
    padding: 0;
  }
  .bodyText li a:link,
  .bodyText li a:visited {
    color: #355586;
    text-decoration: underline;
  }
  .bodyText li a:hover,
  .bodyText li a:active,
  .bodyText li a:focus {
    text-decoration: none;
  }
  .bodyText li strong {
    font-weight: 700;
  }
  .bodyText li em,
  .bodyText li i {
    font-style: italic;
  }
  
}


@media screen and (max-width: 481px) {
  .bodyText li {
    font-size: 0.938rem;
  }
}


/*  =========================================================
images
========================================================= */
@media screen {
  .bodyText img {
    float: left;
    margin: 30px 24px 12px 0;
  }
}

@media screen and (max-width: 481px) {
  .bodyText img {
    margin: 12px 12px 12px 0;
  }
}
