#sectionresults {
  height: auto;
  overflow: auto;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
}













.dec {
  height: 3px;
  width: 40px;
  background-color: white;
  display: block;
  margin-left: 5px;
  margin-top: 30px;
}

h5 {
  font-size: 30px;
  text-align: left;
  margin-top:10px;
  margin-bottom:10px;
  font-family: 'Droid Sans', sans-serif;
  color: white;
  padding-left: 5px;
  padding-top: 30px;
}


.helpme {
  font-size: 17px;
  font-weight: normal;
  line-height: 40px;
  vertical-align: center;
  word-wrap: break-word;
}

.helpme2 {
  font-size: 23px;
  font-weight: bold;
  padding-top: 20px;
  word-wrap: break-word;
}

.h52 {
  font-size: 25px;
  text-align: left;
  margin-top: 0;
  margin-bottom:10px;
  font-family: 'Droid Sans', sans-serif;
  color: #1a3352;
  padding-left: 20px;
  padding-top: 0;
}


.resultp {
  font-size: 15px;
  font-family: 'Roboto';
  padding-left: 20px;
  color: #1a3352;
  font-weight: bold;
}

.dec2 {
  height: 3px;
  width: 40px;
  background-color: #96bc42;
  display: block;
  margin-left: 20px;
  margin-top: 30px;
  animation: sizing 2s infinite;
}

@keyframes sizing {

  0% {
     width: 2px;
     transform: scale(0.6);
  }

  100% {
    width: 40px;
    transform: scale(1.1);
  }

}









/*ERGEBNISSE UND GEGNER*/


.clearer {
  clear: both;
}

#section3 {
  width: 86%;
  height: auto;
  overflow: auto;
  background-color: #f6f7f2;
  padding-left: 7%;
  padding-right: 7%;
}

#container-wrapper {
  height: auto;
  background-color: #f6f7f2;
  overflow: auto;
  width: 1430px;
  display: block;
  margin: 0 auto;
}

#content-wrapper {
  display: block;
  margin: 0 auto;
  height: auto;
  width: 90%;
}


#container-left {
  width: 500px;
  height: auto;
  background-color: #96bc42;
  display: block;
  overflow: auto;
  padding-bottom: 60px;
  float: left;
  margin-right: 30px;
}


#container-left-opponents {
  width: 75%;
  min-height: 124px;
  height: 70px;
  background: #9fc355;
  overflow: auto;
  float: left;
  margin-top: 20px;
  text-align: center;
  color: white;
  font-weight: bold;
  font-family: 'Arimo';
  padding-top: 30px;
  vertical-align: center;
}



#box1 {
  width:20%;
  height: auto;
  background: white;
  margin-top: 20px;
  overflow: auto;
  float: left;
  margin-left: 5px;
  text-align: center;
  color: #96bc42;
  font-weight: bold;
  font-size: 23px;
  font-family: 'Arimo';
  padding-top: 28px;
}



@keyframes bordering {

  0% {
     width: 0%;
  }

  100% {
    width: 100%;
  }

}


#row {
  display: flex;
}

p {
  word-wrap: break-word;
  color: white;
}







#container-right {
  width: 900px;
  height: auto;
  overflow: hidden;
  background-color: transparent;
  float: none;
  padding-bottom: 7px;
  margin-top: 100px;
  text-align: left;
  margin-top: 150px;
}


#playerwrapper1 {
  height: auto;
  width: auto;
  margin-left: 20px;
  margin-top: 50px;
  background-color: transparent;
  position: relative;
}


#playerwrapper2 {
  height: auto;
  width: auto;
  margin-right: 20px;
  margin-top: 50px;
  position: relative;
}

.opponentimg1 {
  width: 7cm;
  display: block;
  border: 3px solid #f46c0e;
}

#playerwrapper2:hover .span1 {
  font-size: 19px;
  color: white;
  font-family: 'Arimo';
  display: block;
}

#playerwrapper1:hover .span1 {
  font-size: 19px;
  color: white;
  font-family: 'Arimo';
  display: block;
}

#playerwrapper2:hover .alter {
  width: 100%;
  height: 100%;
  background: rgba(155,0,0,0.8);
  text-align: left;
  padding: 20px;
  box-sizing: border-box;
  transform-origin: bottom;
  animation: finally 0.3s;
  transition: all 200ms ease-in-out;
}

#playerwrapper1:hover .alter {
  width: 100%;
  height: 100%;
  background: rgba(155,0,0,0.8);
  text-align: left;
  padding: 20px;
  box-sizing: border-box;
  transform-origin: bottom;
  animation: finally 0.3s ease-in-out;
}

.alter {
  position: absolute;
  padding-top: 0%;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.span1 {
  color: red;
  display: none;
}

@keyframes finally {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}


.opponentimg2 {
  display: block;
  width: 7cm;
  border: 3px solid white;
}

#name1 {
  height: auto;
  width: 250px;
  background-color: #1a3352;
  text-align: center;
  padding: 10px;

}

#name2 {
  height: auto;
  width: 248px;
  background-color: #1a3352;
  text-align: center;
  padding: 10px;
}

.nametext {
  color: white;
  font-family: 'Arimo';
  font-weight: bold;
}

#middleresult {
  width: 15%;
  background-color: transparent;
  height: auto;
  top: 45px;
  overflow: auto;
  position: relative;
  word-wrap: break-word;
  padding: 10px;
}

.middletext {
  color: black;
  font-family: 'Arimo';
  font-size: 34px;
  margin: 0;
  background-color: #f6f7f2;
  padding: 13px;
  font-weight: bold;

}

.toptext {
  color: grey;
  font-family: 'Arimo';
  font-size: 23px;
  margin: 0;
  margin-bottom: 14px;
  font-weight: bold;

}

.bottext {
  color: #96bc42;
  font-family: 'Arimo';
  font-size: 23px;
  margin: 0;
  margin-top: 14px;
  font-weight: bold;

}

.square {
    text-align:center;
}

.square3 {
    text-align:center;
    margin: 0 auto  !important;
}

.square2 {
    text-align:center;
    float: right;
}

.square1 {
    text-align:center;
    float: left;
}

#middleresulthidden {
  display: none;
}











/*ERGEBNISSE UND GEGNER*/




/*1. Break Section2 */

@media screen and (max-width: 1560px) {


#container-wrapper {
height: auto;
background-color: transparent;
overflow: hidden;
width: 100%;
display: block;
margin: 0;
}

#content-wrapper {
display: block;
margin: 0 auto;
height: auto;
width: 90%;
}


#container-left {
width: 33%;
height: 737px;
background-color: #96bc42;
display: block;
overflow: auto;
padding-bottom: 20px;
float: left;
margin-right: 80px;
}


#container-right {
width: 60%;
height: auto;
overflow: auto;
background-color: transparent;
float: none;
padding-bottom: 7px;
margin-top: 100px;
text-align: left;
margin-top: 250px;
}





}








/*2. Break Section2 */

@media screen and (max-width: 1150px) {



.clearer {
clear: both;
}

#section3 {
width: 86%;
height: auto;
overflow: auto;
background-color: #f6f7f2;
padding-left: 7%;
padding-right: 7%;
}

#content-wrapper {
display: block;
margin: 0 auto;
height: auto;
width: 90%;
}


#container-left {
width: 100%;
height: 737px;
background-color: #96bc42;
display: block;
overflow: auto;
padding-bottom: 20px;
float: none;
}


#container-left-opponents {
width: 75%;
min-height: 124px;
height: auto;
background: #9fc355;
overflow: auto;
float: left;
padding: 1%;
margin-top: 20px;
padding-top: 40px;
}



#box1 {
width:20%;
height: auto;
background: white;
margin-top: 20px;
overflow: auto;
padding: 1%;
float: left;
padding-top: 40px;
}


#row {
display: flex;
}

p {
word-wrap: break-word;
color: white;
}


#container-right {
width: 100%;
height: auto;
overflow: auto;
background-color: transparent;
float: none;
padding-bottom: 7px;
margin-top: 100px;
text-align: left;
margin-left: 0;
}


#playerwrapper1 {
height: auto;
width: 8cm;
}

#playerwrapper2 {
height: auto;
width: 8cm;
}

.opponentimg1 {
display: block;
width: 8cm;
}

.opponentimg2 {
display: block;
width: 8cm;
}

#name1 {
height: auto;
width: 283px;
background-color: #1a3352;
text-align: center;
padding: 10px;

}

#name2 {
height: auto;
width: 283px;
background-color: #1a3352;
text-align: center;
padding: 10px;
}

#middleresult {
width: 10%;
height: auto;
top: px;
}

.square {
text-align:center;
}

.square3 {
text-align:center;
margin: 0 auto  !important;
}

.square2 {
text-align:center;
float: right;
}

.square1 {
text-align:center;
float: left;
}

#middleresulthidden {
display: none;
}



}








/*3. Break Section2 Veränderungen middle*/

@media screen and (max-width:777px) {


#content-wrapper {
display: block;
margin: 0 auto;
height: auto;
width: 90%;
}


#container-left {
width: 100%;
height: auto;
background-color: #96bc42;
display: block;
overflow: auto;
padding-bottom: 20px;
float: none;
}


#container-left-opponents {
width: 75%;
height: 115px;
background: #9fc355;
overflow: auto;
float: left;
margin-top: 30px;
padding-top: 30px;
}



#playerwrapper1 {
height: auto;
width: 6cm;
float: none;
display: block;
margin:  0 auto;
margin-top: 50px;
}

#playerwrapper2 {
height: auto;
width: 6cm;
float: none;
display: block;
margin:  0 auto;
}



#container-right {
width: 100%;
height: auto;
overflow: auto;
background-color: transparent;
float: none;
display: block;
}


.opponentimg1 {
width: 6cm;
display: block;
margin: 0 auto;
height: auto;
float: none;
}

.opponentimg2 {
width: 6cm;
display: block;
margin: 0 auto;
height: auto;
float: none;
border: none;
}

#name1 {
height: auto;
width: 207px;
background-color: #1a3352;
text-align: center;
padding: 10px;
display: block;
margin: 0 auto;
}

#name2 {
height: auto;
width: 207px;
background-color: #1a3352;
text-align: center;
padding: 10px;
display: block;
margin: 0 auto;
}

#middleresult {
display: none;
}

#middleresulthidden {
width: 130px;
height: auto;
display: block;
margin: 0 auto;
text-align: center;
margin-top: 25px;
margin-bottom: 25px;
}

}








/*kleine Veränderungen Section2 */

@media screen and (max-width: 930px) {

#container-left-opponents {
width: 75%;
height: auto;
background: #9fc355;
overflow: auto;
float: left;
margin-top: 30px;
padding-top: 30px;
}



#box1 {
width:29%;
height: auto;
background: white;
margin-top: 20px;
overflow: auto;
float: left;
margin-top: 30px;
padding-top: 35px;
}

.opponentimg1 {
width: 6cm;
display: block;
margin: 0 auto;
height: auto;
float: none;
}

.opponentimg2 {
width: 6cm;
display: block;
margin: 0 auto;
height: auto;
float: none;
}

#playerwrapper1, #playerwrapper2 {
  width: 6cm;
}


#name1 {
height: auto;
width: 213px;
background-color: #1a3352;
text-align: center;
padding: 10px;
display: block;
margin: 0 auto;
}

#name2 {
height: auto;
width: 207px;
background-color: #1a3352;
text-align: center;
padding: 10px;
display: block;
margin: 0 auto;
}
}







/*alles left Section2 unten*/

@media screen and (max-width: 350px) {

#container-left-opponents {
width: 75%;
height: auto;
background: #9fc355;
overflow: auto;
float: left;
margin-top: 30px;
padding-top: 30px;
}



#box1 {
width:29%;
height: auto;
background: white;
margin-top: 20px;
overflow: auto;
float: left;
margin-top: 30px;
padding-top: 35px;
}

.opponentimg1 {
width: 5.5cm;
display: block;
margin: 0;
height: auto;
float: none;
}

.opponentimg2 {
width: 5.5cm;
display: block;
margin: 0;
height: auto;
float: none;
}

#name1 {
height: auto;
width: 193px;
background-color: #1a3352;
text-align: center;
padding: 10px;
display: block;
margin: 0;
}

#name2 {
height: auto;
width: 188px;
background-color: #1a3352;
text-align: center;
padding: 10px;
display: block;
margin: 0;
}

.resultp {
padding-left:0;
}

.h52{
padding-left: 0;
}

.dec2{
padding-left: 0;
}

#section3{
width: 96%;
padding-left: 10px;
padding-right: 10px;
overflow: visible;
}

#middleresulthidden {
margin: 0 auto;
margin-top: 26px;
margin-bottom: 26px;
}

#playerwrapper1, #playerwrapper2 {
width: 211px;
}
}