@charset "UTF-8";

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

   article, footer, header, main, nav, section,
   html,body,h1,h2,h3,ul,li,a,p {
     padding: 0;
     margin: 0;
   }
   
   /* resize images */
   .container img {
       width: 100%;
       height: auto;
       float: right;
   }

.watermark {
    position: absolute;
    font-size: 140px;
    text-align: center;
    opacity: 0.2;
    color: red;
    top: 30%;
    right: 6.5%
}


.wordwrap {
  white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  white-space: pre-wrap;       /* css-3 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
  word-break: break-all;
  white-space: normal;
}


   aside {
   //background-color: yellow;
   overflow: auto;
   float: left;
   width: 30%;
   height: auto;
   margin: auto;
   padding: 10px;
   }

   body {
     //background-color: #f0f0f0;
     background: lightgray;
     width: 100%;
     
     //width: 960px
     //height: 720px
     margin-left: 5px;
     font-family:Helvetica, Arial, sans-serif;
     font-size: 15px;
     // --- ticker only
     //padding-bottom: 5rem;
   }

   main {
     //background: red;
     //vertical-align: center;
     //horizontal-align: center;
     overflow: auto;
     //height: 100%;
   }

   section {
     //background: green;
     //background-color: #b1b1b1;
     overflow: auto;
     //width: 68%;
     height: 100%
     float: right;
     vertical-align: top;
     margin: auto;
   }

   section1 {
     background-color: red;
     overflow: auto;
     //width: 105%;
     //float: auto;
     float: left;
     margin: auto;
     //padding: 5px;
   }

    img {
    //width:540px; /* you can use % */
     width: 100%;
    height: auto;
   }

   h2 {
     color: yellow;
   }
   h3 {
     color: black;
   }

   p {
     font-size: 20px;
     color: black;
   }

   nav {
     background-color: #20416c;
     padding: 5px;
     margin-top: 1px;
   }

   li a {
     color: white;
   }

   li {
     //color: red;
     display: inline;
     margin-left: 15px;
     margin-left: 15px;
     font-size: 20px;
     font-variant: small-caps;
     font-weight: bold;
   }





.example1 {
  background-color: #20416c;
  height: 30px;
  overflow: hidden;
  position: relative;
}

.example1 h3 {
 //font-size: 3em;
 font-size: 25px;
 color: white;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 30px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);
 transform:translateX(100%);
 /* Apply animation to this element */
 -moz-animation: example1 15s linear infinite;
 -webkit-animation: example1 15s linear infinite;
 animation: example1 15s linear infinite;
}

/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   {
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);
 }
 100% {
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%);
 }
}


.ticker-wrap {
  position: fixed;
  bottom: 0;
    left: 0;
  width: 100%;
  overflow: hidden;
  height: 4rem;
  background-color: #e41b17;
  box-sizing: content-box;
}

.ticker-wrap .ticker {
  display: inline-block;
  height: 4rem;
  line-height: 4rem;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
}

.ticker-wrap .ticker__item {
  display: inline-block;
  padding: 0 2rem;
  font-size: 2rem;
  color: white;
}


@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}