* {margin: 0; padding: 0; box-sizing: border-box;}
hr {width: 54%;margin-left:23%; opacity: .3;}

#Rainbow div {height: 77px;transition: all .2s; cursor: pointer;border-radius: 0 20px 0 0;box-shadow: 0px 1px 2px gray;position: relative;color:lime;}
#Rainbow div.on {height: 60px;}
p.fir {position: absolute;z-index: 1;width: 100%;height: 100%;background-image: url(../img/img_i.jpg);background-size: cover;opacity: 1;}
#Rainbow {position: absolute;width: 100%;height: 100%;transition: all .5s;z-index:4;}
#Rainbow div:nth-child(1) {background: red;}
#Rainbow div:nth-child(2) {background: orange;}
#Rainbow div:nth-child(3) {background: yellow;}
#Rainbow div:nth-child(4) {background: green;}
#Rainbow div:nth-child(5) {background: blue;}
#Rainbow div:nth-child(6) {background: navy;}
#Rainbow div:nth-child(7) {background: purple;}
#Rainbow div:nth-child(8) {background: red;}
#Rainbow p {font-size: 35px;height: 100%;line-height: normal;padding-top:20px ;text-align: center;padding-right: 10px;transition: all .3s;}
#Rainbow span {opacity: 0;margin-right: 10px;display:none;}
#Rainbow p:hover span.subcolor {opacity: 1;margin-right: 10px;color: black;display:inline-block;color:gray;}

#grayLayer {position: absolute;z-index: 3;width: 100%;height: 100%;background: black;opacity: .75;top:0;left: 0;}

section {position: absolute;left: 0;top: 0;z-index: 2;width: 100%;height: 100%;}
article {position: fixed ;width: 100%; height: 100%;left: 0;top: 0;display: none;}
article:nth-child(1).active {background: url(../img/img_red.jpg);background-size:cover;display: block;}
article:nth-child(2).active {background: url(../img/img_orange.jpg);background-size:cover;display: block;}
article:nth-child(3).active {background: url(../img/img_yellow.jpg);background-size:cover;display: block;}
article:nth-child(4).active {background: url(../img/img_green.jpg);background-size:cover;display: block;}
article:nth-child(5).active {background: url(../img/img_blue.jpg);background-size:cover;display: block;}
article:nth-child(6).active {background: url(../img/img_navy.jpg);background-size:cover;display: block;}
article:nth-child(7).active {background: url(../img/img_purple.jpg);background-size:cover;display: block;}
section article h1 {position: relative;left: 50%;margin-left: -120px;width:250px;height: 35px;font-size: 35px;color:white;text-shadow:0px 1px 2px gray;margin-top: 10px;margin-bottom: 70px;}
section article h1 b {font-size: 65px;}
section article p {position: relative;left: 150%;margin-left: -350px;width: 700px;font-size: 20px;color:white;padding-left: -250px;margin-top: 10px;text-align: justify;opacity: 0.9;}

section article p.txt1 {transition: all 0.7s ease;}
section article p.txt2 {transition: all 1.2s ease;}
section article p.txt3 {transition: all 1.7s ease;}