.divREd{
  border: 2px solid red;    
}

body{
  background: #333;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 0px;
  background-attachment: scroll;
}
/*
body{
  background: #333;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  font-family: Arial,Helvetica,sans-serif;
  text-align: center;
  font-size: 14px;;
}
*/

              /*=== Panno Lable ===*/
.FirstBoxFull{
  width: 1000px;
/*  margin-top: 20px;*/
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  padding-top: 25px;
  padding-bottom: 35px;
}

.LableDemo{
  display: inline-block;
  width: 125px;
  vertical-align: middle;
  position: relative; 
  z-index: 2;
}

.LableDemo:hover{
  -webkit-transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
  transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
  -webkit-transform: scale(1.1) translate3d(0, 0, 0);
          transform: scale(1.1) translate3d(0, 0, 0);
}

.bigPairingLeft{
  margin-right: -125px;/*-50.0%;*/

  animation: blink 0.4s 2.4s ease-in-out 3;
  -webkit-animation: blink 0.4s 2.4s ease-in-out 3;
}

.bigPingRight{
  margin-left: -125px;/*-50.0%;*/

  animation: blink 0.4s 6.2s ease-in-out 3;
  -webkit-animation: blink 0.4s 6.2s ease-in-out 3;
}

.PannoTr{
 display: inline-block;
/* width: 1100px;*/
 width: 125px;
 height: 105px;
 background: rgba(111, 155, 45, 0.5);
/* position: relative; */
 vertical-align: middle;
/* opacity: 0.6;*/
 z-index: 1;
 border-radius: 8px;

 animation: ress 1s 0.3s ease-in-out 1 forwards;
 -webkit-animation: ress 1s 0.3s ease-in-out 1 forwards;
 
}

@keyframes ress {
  from {width: 125px;}
  to   {width: 1000px;}  
}

@-webkit-keyframes ress {
  from {width: 125px;}
  to   {width: 1000px;}  
}

.pannoImg {
  width: 100%;
  border-radius: 8%;
}

@keyframes blink {
  from {opacity: 1;}
  to   {opacity: 0;}  
}

@-webkit-keyframes blink {
  from {opacity: 1;}
  to   {opacity: 0;}  
}

                /*=== ======= ===*/

.lists{
  width: 1000px;
  height: 450px;
/*  margin-top: -3px;*/
  margin-right: auto;
  margin-left: auto;
}

.leftList{
  float: left;
  width: 400px;
}

.rightList{
  float: right;
  width: 400px;
}

.element{
  width: 100%;
  height: 70px;  
  text-align: center;
  margin-bottom: 10px;
  border-radius: 8px;
  position: relative; 
  z-index: 1;
}

.element a{
  font-size: 30px;
  font-weight: bold;
  color: white;
  font-family: arial;
  text-shadow: black 1px 1px 0, black -1px -1px 0,   
               black -1px 1px 0, black 1px -1px 0;
}

.element a:hover{
  color: gray;
  text-shadow: white 1px 1px 0, white -1px -1px 0,   
               white -1px 1px 0, white 1px -1px 0;
}

.leftElement{
  opacity: 0;
  margin-bottom: 15px;
/*  background: rgba(111, 155, 45, 0.6);*/
}

.rightElement{
  opacity: 0;
/*  background: rgba(178, 223, 238, 1);*/
  background: rgba(91, 152, 173, 1);
  position: relative; 
  z-index: 1;
}

.imgLeft{
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 8px;
}

#left1{
  animation: emerging 0.5s 3.6s ease-in-out 1 forwards;
  -webkit-animation: emerging 0.5s 3.6s ease-in-out 1 forwards;
}

#left2{
  animation: emerging 0.5s 4.1s ease-in-out 1 forwards;
  -webkit-animation: emerging 0.5s 4.1s ease-in-out 1 forwards;
}
#left3{
  animation: emerging 0.5s 4.6s ease-in-out 1 forwards;
  -webkit-animation: emerging 0.5s 4.6s ease-in-out 1 forwards;
}

#left4{
  animation: emerging 0.5s 5.1s ease-in-out 1 forwards;
  -webkit-animation: emerging 0.5s 5.1s ease-in-out 1 forwards;
}

#left5{
  animation: emerging 0.5s 5.6s ease-in-out 1 forwards;
  -webkit-animation: emerging 0.5s 5.6s ease-in-out 1 forwards;
}

#right1{
  animation: emergingR 0.5s 7.5s ease-in-out 1 forwards;
  -webkit-animation: emergingR 0.5s 7.5s ease-in-out 1 forwards;
}

#right2{
  animation: emergingR 0.5s 8s ease-in-out 1 forwards;
  -webkit-animation: emergingR 0.5s 8s ease-in-out 1 forwards;
}
#right3{
  animation: emergingR 0.5s 8.5s ease-in-out 1 forwards;
  -webkit-animation: emergingR 0.5s 8.5s ease-in-out 1 forwards;
}
#right4{
  animation: emergingR 0.5s 9s ease-in-out 1 forwards;
  -webkit-animation: emergingR 0.5s 9s ease-in-out 1 forwards;
}
#right5{
  animation: emergingR 0.5s 9.5s ease-in-out 1 forwards;
  -webkit-animation: emergingR 0.5s 9.5s ease-in-out 1 forwards;
}

@keyframes emerging {
  from {opacity: 0;
/*        background: rgba(111, 155, 45, 1)*/
       }
  to   {opacity: 1;
/*        background: rgba(111, 155, 45, 1)*/
       }  
}

@-webkit-keyframes emerging {
  from {opacity: 0;
/*        background: rgba(111, 155, 45, 1)*/
       }
  to   {opacity: 1;
/*        background: rgba(111, 155, 45, 1)*/
       }  
}

@keyframes emergingR {
  from {opacity: 0;
/*        background: rgba(178, 223, 238, 1)*/
        background: rgba(91, 152, 173, 1)
       }
  to   {opacity: 1;
/*        background: rgba(178, 223, 238, 1)*/
        background: rgba(91, 152, 173, 1)
       }  
}

@-webkit-keyframes emergingR {
  from {opacity: 0;
/*        background: rgba(178, 223, 238, 1)*/
        background: rgba(91, 152, 173, 1)
       }
  to   {opacity: 1;
/*        background: rgba(178, 223, 238, 1)*/
        background: rgba(91, 152, 173, 1)
       }  
}

.preImgBall{
  display: inline-block;
  vertical-align: middle;
  width: 75%;
  opacity: 1;
  position: relative; 
  z-index: 2;
  font-size: 30px;
  font-weight: bold;
}

.imgBall{
  margin-top: 3px;
  display: inline-block;
  height: 70px;
  vertical-align: middle;
  position: relative; 
  opacity: 2;
}

.img_ball{
  height: 5%;
}

.imgBall img {
  height: 65px;
  border-radius: 8px;
}

.slogan01{
  margin-top: 2px;
  margin-bottom: 10px;
  color: #ff9;
/* #33235B, #D62229, #E97639, #792042, #33235B */  
/*  color: #c00;*/
/*
  color: red;
  text-shadow: red 1px 1px 0, black -1px -1px 0,   
               red -1px 1px 0, black 1px -1px 0;
*/               
  color: white;
  text-shadow: black 1px 1px 0, black -1px -1px 0,   
               black -1px 1px 0, black 1px -1px 0;
  opacity: 0;
  animation: emerging 0.5s 10.1s ease-in-out 1 forwards;
  -webkit-animation: emerging 0.5s 10.1s ease-in-out 1 forwards;
}

.textBright{
  width: 800px;
  text-align: center;
  font-family: arial; /*calibri;*/
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  font-weight: bold;
  color: red;
  margin-top: 10px;
  margin-bottom: 10px;
  opacity: 0;
/*  
  animation: emerging 0.5s 10.5s ease-in-out 1 forwards;
  -webkit-animation: emerging 0.5s 10.5s ease-in-out 1 forwards;
*/  
  animation: emerging 0.5s 1.7s ease-in-out 1 forwards;
  -webkit-animation: emerging 0.5s 1.7s ease-in-out 1 forwards;
}
/*
.footer{
  width: 800px;
  text-align: center;
  font-family: arial;
  margin-top: 15px;
  padding-top: 5px;
  border-top: 2px solid gray;    
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  animation: emerging 0.5s 2.0s ease-in-out 1 forwards;
  -webkit-animation: emerging 0.5s 2.0s ease-in-out 1 forwards;
}
*/

.footer{
  display: inline-block;
/*  width: 800px;*/
  width: 1000px;
  text-align: center;
  font-family: arial;
  margin-top: 15px;
  padding-top: 5px;
  border-top: 2px solid gray;    
  margin-left: auto;
  margin-right: auto;
  color: white;
}

              /*=== LOgo blink ===*/
@media only screen {
  .chatoy {
    background: -webkit-linear-gradient(left, #33235B, #D62229, #E97639, #792042, #33235B);
    background: linear-gradient(left, #33235B, #D62229, #E97639, #792042, #33235B);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-animation: animate-logo;
    -webkit-animation-delay: 0;
    -webkit-animation-duration: 7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-fill-mode: forwards;
    transition: font-size 500ms ease-in-out;
  }
}
@-webkit-keyframes animate-logo {
  0% {
    background-position: 0 3200px;
  }
  100% {
    background-position: 3200px 0;
  }
}

                 /*=== ======= ===*/

.subBack{
  width: 100%;
  position: fixed;
  z-index: -1;
}

.subBack0{
  width: 100%;
  height: 100vh;
  position: relative;
  box-sizing: content-box;
  text-align: left;
  color: white;
  font-family: Helvetica,Arial,sans-serif;
  font-size: 25px;
  letter-spacing: 0.05em;
/*  letter-spacing: 4px;*/
}

.backIMG1{
/*  height: 780px;*/
  width: 100%;
  height: 100vh;
/*  
  background: url("/image/subImg/photo-1556962021-9d0303621643.jpg");
  background: url("/image/subImg/photo-1504016798967-59a258e9386d.jpg");
  background: url("/image/subImg/photo-1434648957308-5e6a859697e8.jpg");
  background: url("/image/subImg/photo-1525270132335-4622d4607e5c.jpg");
  background: url("/image/subImg/stadium.jpg");
*/  
  background: url("/image/subImg/World-Cup-Final-France-v-Croatia.jpg");
  background-size: cover;
}

.boast0{
  float: left;
/*  width: 26%;*/
  width: 35%;
  text-align: left;
  color: white;
  font-weight: bold;
/*    
  text-shadow: black 2px 2px 0, black -2px -2px 0,   
               black -2px 2px 0, black 2px -2px 0;
               
  background-color: rgba( 250,250,250,0.2);
*/  
  padding-left: 10px;
  padding-right: 10px;
}

.boast0 p{
  text-indent: 40px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.boast1{
  margin-left: 3%;
  margin-top: 8%;
  width: 70%;
  text-shadow: black 2px 2px 0, black -2px -2px 0,   
               black -2px 2px 0, black 2px -2px 0;
  background-color: rgba( 250,250,250,0.4);
}

.boast2{
/*
  margin-left: 7%;
  margin-top: 19%;
*/
  margin-left: 20%;
  margin-top: 13%;
  
  text-shadow: black 2px 2px 0, black -2px -2px 0,   
               black -2px 2px 0, black 2px -2px 0;
  background-color: rgba( 250,250,250,0.4);
}

.boast3{
/*
  margin-left: 6%;
  margin-top: 35%;
*/  
  margin-left: 6%;
  margin-top: 13%;
  
  text-shadow: black 2px 2px 0, black -2px -2px 0,   
               black -2px 2px 0, black 2px -2px 0;
  background-color: rgba( 250,250,250,0.4);
}

.boast4{
  margin-left: 20%;
  margin-top: 12%;
  margin-bottom: 12%;
  width: 50%;
}

.boast5{
  margin-left: 20%;
  margin-top: 17%;
  margin-bottom: 17%;
  width: 50%;
}

.fullscreen{
  width: 100%;
  height: 100vh;
}