/*------------------------------- RESET ----------------------------------------- */
html, body, div, span, a, h1, h2, h3, h4, h5, h6, p, blockquote, img, ol, ul, li, input, label, select, table, tbody, tfoot, thead, tr, th, td, footer, header, menu, nav, section, video
{margin: 0; padding: 0; list-style: none; border: 0; outline: 0;}

/*-----------------------------BREAKPOINTS--------------------------------------*/
/* _______________  980 to 100000 __________*/
@media screen and (min-width: 980px) and (max-width: 10000px) {html {font-size: 23px;} .container {margin: auto;} .template {padding: 2.2% 4.2% .9% 4.3%;}

 .header {padding: 2.1% 4.3% 0 4.2%;}}

/* _______________  940 to 980 _______________  */
@media screen and (min-width: 940px) and (max-width: 980px) {html {font-size: 22.2px;}  .template {padding: 2.1% 4.1% .9% 4.2%;} 

.header {padding: 2.2% 4.3% .9% 4.3%;}}

/* _______________  900 to 940 _______________  */
@media screen and (min-width: 900px) and (max-width: 940px) {html {font-size: 21.36px;} .template {padding: 2.1% 4% .85% 4.1%;}}

/* _______________  860 to 900 _______________  */
@media screen and (min-width: 860px) and (max-width: 900px) {html {font-size: 20.77px;}  .template {padding: 2.1% 3.2% .85% 3.3%}}

/* _______________  820 to 860 _______________  */
@media screen and (min-width: 820px) and (max-width: 860px) {html {font-size: 20.07px;}  .template {padding: 2.1% 2.6% .77% 2.7%;}}
/* _______________  780 to 820 _______________  */
@media screen and (min-width: 780px) and (max-width: 820px) {html {font-size: 19.25px;} .template {padding: 2.1% 2.2% .74% 2.3%;}}

/* _______________  740  to 780 _______________  */
@media screen and (min-width: 740px) and (max-width: 780px) {html {font-size: 18.39px;}  .template {padding: 2.1% 2% .65% 2.1%;}}

/* _______________  700 to 740 _______________  */
@media screen and (min-width: 700px) and (max-width: 740px) {html {font-size: 17.55px;} .template {padding: 2.1% 1.8% .63% 1.9%;}}

/* _______________  660 to 700 _______________  */
@media screen and (min-width: 660px) and (max-width: 700px) {html {font-size: 16.98px;} .template {padding: 2.1% 1.45% .63% 1.55%;}}

/* _______________  620 to 660 _______________  */
@media screen and (min-width: 620px) and (max-width: 660px) {html {font-size: 17.31px;} .template {padding: 2.1% 1.45% .61% 1.55%;}}

/* _______________  580 to 620  _______________  */
@media screen and (min-width: 580px) and (max-width: 620px) {html {font-size: 15.6px;} .template {padding: 2.1% 1.41% .54% 1.51%;}}

/* _______________  540 to 580 _______________  */
@media screen and (min-width: 540px) and (max-width: 580px) {html {font-size: 15.78px;} .template {padding: 2.1% 1.25% .47% 1.35%;}}

/* _______________  500 to 540 _______________  */
@media screen and (min-width: 500px) and (max-width: 540px) {html {font-size: 15.6px;} .template {padding: 2.1% 1.23% 1.8% 1.33%;}}

/* _______________ 460 to 500  _______________  */
@media screen and (min-width: 460px) and (max-width: 500px) {html {font-size: 15.3px;}  .template {padding: 2.1% 1.22% 1.8% 1.32%;}}

/* _______________  420 to 460 _______________  */
@media screen and (min-width: 420px) and (max-width: 460px) {html {font-size: 14.711px;}.template {padding: 2.1% 1.2% 1.8% 1.3%;}}

/* _______________   380 to 420_______________  */
@media screen and (min-width: 380px) and (max-width: 420px) {html {font-size: 13.6px;} .template {padding: 2.1% 1.1% 1.8% 1.2%;}}

/* _______________ 340 to 380  _______________  */
@media screen and (min-width: 340px) and (max-width: 380px) {html {font-size: 12.51px;} .template {padding: 2.1% 1% 1.8% 1.1%;}}

/* _______________   300 to 340 _______________  */
@media screen and (min-width: 300px) and (max-width: 340px) {html {font-size: 12.65px;} .template {padding: 2.1% 1% 1.8% 1.1%;}}


/* _______________   260 to 300 _______________  */
@media screen and (min-width: 260px) and (max-width: 300px) {html {font-size: 11px;}    .template {padding: 2.1% 1.2% 1.8% 1.2%;}}

/* _______________   220 to 260_______________  */
@media screen and (min-width: 220px) and (max-width: 260px) {html {font-size: 10.2px;} .template {padding: 2.1% 1.2% 1.8% 1.2%;}}

/* _______________   180 to 220 _______________  */
@media screen and (min-width: 180px) and (max-width: 220px) {html {font-size: 9.2px;} .template {padding: 2.1% 1.1% 1.8% 1.1%;}}

/* _______________   140 to 180 _______________  */
@media screen and (min-width: 140px) and (max-width: 180px) {html {font-size: 8.2px;} .template {padding: 2.7% 1% 1.8% 1%;}}

/* _______________   100 to 140 _______________  */
@media screen and (min-width: 100px) and (max-width: 140px) {html {font-size: 7.2px;} .template {padding: 2.1% .9% 1.8% .9%;}}


/* ---------------------------------DIVs------------------------------------*/
body {margin: 0 auto 0; background-color: black; max-width: 980px; padding: 0 1% 0 1%;}

.container {background-color: black; margin: 0 auto 0; padding: 2% 0 0 0;}

/*.header {background-color: #ffffcc; margin: 0 auto 2%;  border: .6em double red; border-radius: .8em; padding: 2.1% 4.3% 1.8% 4.3%;}*/

/* -----------------------------START MY DIV---------------------------------*/
.mydiv {

margin: 0 auto 2%;  border: .6em double red; border-radius: .8em; padding: 2.1% 4.3% 1.8% 4.3%;


  /*width:100%;*/
  /*height:100%;*/
  /*color:black;*/ 
  /*font-weight:bold;*/
 /* animation: myanimation 7s infinite;*/
   animation: myanimation 10s infinite ease-in-out;
}




@keyframes myanimation {
  0%   {background-color:#FFFFCC;}
  25%  {background-color:#E3E6FE;}
  50%  {background-color:#FDD8D8;}
  75%  {background-color:#C9FBD5;}
  100% {background-color:#FFFFCC;}
}





/* BLUE #D8DCFD  RED #FDD8D8*
@keyframes myanimation {
  0% {background-color: #FFFFCC;}
  25%{background-color:#FFFFCC;}
  50%{background-color:#E3E6FE;}
  75%{background-color:#FDD8D8;}
  100% {background-color:#C9FBD5;}}*/

/* -----------------------------END  MY DIV---------------------------------*/

.template {background-color: #ffe4b3; margin: 0 auto 2%; border: .48em double red; border-radius: .8em;}


/* ---------------------TYPOGRAPHY--------------------------------------*/
h1 {font-size: 1.59em; color: #800000; font-weight: bold; line-height: 1; text-align: center; margin: 0 0 .11em 0; font-family: Georgia, serif;}

h2 {font-size: 1.33em; color: #800000; font-weight: bold; text-align: center; margin: 0 0 .1em 0; font-family: Georgia, serif; text-decoration: none; line-height: 1;}

h3 {font-size: 1.31em; color: #800000; font-weight: bold; text-align: center; margin: 0 0 .1em 0; font-family: Georgia, serif;}

h4 {font-size: 1.11em; color: #800000; font-weight: bold; text-align: left; font-family: Georgia, serif; margin: .2em 0  .08em 0;}

p {font-size: 1em; color: black; line-height: 1.33; margin: 0 0 1% 0; font-family: Verdana, sans-serif;}

p.redstardivider {font-size: 1em; color: red; line-height: 1; margin: 1% 0 0 0; font-family: Verdana, sans-serif;}

p.head {font-size: 1.059em; color: black; line-height: 1.2; font-weight: 100; margin: 0 0 1% 0; font-family: Georgia, serif;}

p.signature {font-style: italic; margin-left: 2em;}

/* ----------------------LINKS-------------------------------------*/
a {color: #0000FF;}

a:visited {color: grey;}

a:focus, a:hover {color: green; text-decoration: none;}

/*a:active {}*/

/* ------------------------SPANS-----------------------------------*/
.italic {font-style: italic;}
.bold {font-weight: bold;}
.linkblue {color: #0000ff;}
.underline {text-decoration: underline;}
.green {color: #009900;}
.red {color: red;}
.redbrown {color: #800000;}

/* ----------------------MEDIA ELEMENTS-------------------------------------*/
.video {width: 100%; height: auto; aspect-ratio: 16 / 9;}
.img {max-width: 100%; height: auto; margin-top: .3em; border: .21em solid #990000;}

/* ------------------------HR STYLES-----------------------------------*/

hr {width: 79%;  border: .1em dashed red;}