@font-face {
  font-family: 'DIN Pro';
  src: url('./fonts/DINPRO LIGHT.OTF');
  font-weight: 300; }

@font-face {
  font-family: 'DIN Pro';
  src: url('./fonts/DINPRO REGULAR.OTF');
  font-weight: 400; }

@font-face {
  font-family: 'DIN Pro';
  src: url('./fonts/DINPRO MEDIUM.OTF');
  font-weight: 500; }

@font-face {
  font-family: 'DIN Pro';
  src: url('./fonts/DINPRO BOLD.OTF');
  font-weight: 700; }

@font-face {
  font-family: 'DIN Pro';
  src: url('./fonts/DINPRO-BLACK.OTF');
  font-weight: 900; }

a:focus {
  text-decoration: none; }


html {
    margin:    0 auto;
    max-width: 1920px;
}

body {
  font-family: 'DIN Pro';
  color: #000;
  font-size: 50px;
  background: #fff; 
  font-weight: 400; 
 max-width: 100vw;
width: 100%;
margin: 0 auto;
/*min-width: 1920px;*/

/* background-image: url("./img/header.png"); 
background-position-x: center;
background-repeat: no-repeat; 
background-size: contain;
*/

/* background-image: url("./img/header.png"), url("./img/2-2.png"); 
background-position-x: center, center;
background-position-y: top, bottom;
background-repeat: no-repeat, no-repeat; 
background-size: contain, contain;
*/
}

.headerpic {
min-width: 100%;
width: 100%;
background-image: url("./img/header.png"); 
background-repeat: no-repeat; 
background-position: center top;
background-size: 100% auto;
/*background-size: 100%;*/
padding-bottom: 14%;
height: 100%;
}

.content {
padding: 0 160px 0 160px;
margin: 0 25px 0 25px;
font-size: 0.85em;
line-height: 1.2;

}


.headerinfinix {
padding: 60px 0 60px 0;

}
.headerinfinixwhite {
font-weight: 500; 
color: #fff;
font-size: 2.2em;
}
.headerinfinixblack {
font-weight: 500; 
color: #000;
font-size: 1em;

}


.unhead {
font-weight: 700; 
font-size: 50px;
text-align: center;
margin: 0 35px 0 35px;
padding: 0px 0 60px 0;
padding: 20px 0;
margin-top: -4vw;
}

.subhead {
font-weight: 700;
font-size: 60px; 
padding: 60px 0 60px 0;
}


.bigimage img  {
padding-top: 60px;
width: 100%;
max-width: 100%;
}


.imagecontainer {
padding-top: 60px;
display: flex;
flex-flow: row wrap;
}


.grid-child {
  flex: 1;
text-align: right;
}

.grid-child:first-child {
text-align: left;
}

.numberCircle {
    border-radius: 50%;
    width: 130px;
    height: 130px;
    padding: 3px;

    background: #fff;
    border: 10px solid #00d91a;
    color: #00d91a;
    text-align: center;

    font-size: 90px;
    font-weight: 700; 
}

.plus .minus{
    font: 64px;
}


.marks {
margin: auto;
padding: 60px 0 120px 0;
background-color: #fff;
max-width: 800px;
display: grid;
grid-template-columns: 450px 350px;
row-gap: 1em;
align-items: center;
position:relative;

}

.markname {
text-align: right;
margin-right: 50px;
font-weight: 700; 
text-transform: uppercase;
font-size: 55px;
}

.verdict {
margin: auto;
max-width: 800px;
font-weight: 900; 
text-align: center;
font-size: 42px;
padding-bottom: 250px;
}

.verdict_header { 
text-transform: uppercase;
font-size: 124px;
font-weight: 500; 
padding-bottom: 60px;

}


.bottom_last {
min-width: 100%;
width: 100%;
min-height: 1000px;
background-image: url("./img/bottom_last.png"); 
background-position-x: center;
background-repeat: no-repeat; 
background-size: cover;

}


.bottom_middle {
text-align: center;
/*min-width: 100%;*/
width: 100%;
min-height: 1200px;
background-image: url("./img/bottom_middle.png"); 
background-position-x: center;
background-repeat: no-repeat; 
background-position-y: bottom;
background-size: cover;

}

.ochifi {
font-weight: 500; 
text-align: center;
font-size: 120px;
padding-bottom: 60px;
color: #fff;
}


.plusminus {
background-color: #f7f7f7;
min-height: 400px;
}


.markscontainer {
padding: 60px;
display: flex;
flex-flow: row wrap;
text-align: left;
}


.grid-child-marks {
  flex: 1;
  margin-right: 50px;
  text-align: right;
max-width: 35%;
}

.grid-child-marks:first-child {

/*text-align: left;*/
}



.markcontainer {
/*padding-top: 60px;*/
width: 50%;
display: flex;
flex-flow: row wrap;
/*background-color: red;*/
text-align: left;
align-items: center;
}


.marktext{
 flex: 1;
font-weight: 400; 
font-size: 45px;

}

.choice {
  position:absolute;
bottom: -70px;
left: -160px;
z-index: 1000;
}


.container-lg {
max-width: 100%;
}


.carousel-control-next-icon, .carousel-control-prev-icon {
width: 5rem;
height: 5rem;

}
@media (max-width: 1280px) {

  .content {
    padding: 10px 0 10px 0;
  }


}


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

.headerpic {
/*background-size: contain;*/
background-size: 100%;
padding-bottom: 10%;
}

  .content {
/*    padding: 30px 0 30px 0;*/
    padding: 20px;
   line-height: 1.2;
font-size: 0.8em;
  }


.headerinfinix {
padding: 40px 0 40px 0;
}
.headerinfinixwhite {
line-height: 1.2;
font-size: 1.4em;
}
.headerinfinixblack {
font-size: 0.5em;

}

.unhead {
font-weight: 700; 
font-size: 1em;
margin: 0 15px 0 15px;
padding: 0px 0 20px 0;
/*padding: 20px 0;*/
margin-top: -0vw;

}

.grid-child img{
/*width: 40%;*/
max-width: 100%;
}

.bottom_middle img{
max-width: 100%;
}
.markcontainer  img{
/*font-size: 0.1em;
max-width: 30%;
*/
}

.choice {
  position:absolute;
bottom: -10vw;
left: -13vw;
z-index: 1000;
}


.marks img {
/*max-width: 50%;*/
}


}


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

body {
min-width: 100vw;
font-size: 20px;
}

.headerpic {
background-size: 100%;
padding-bottom: 7%;

}

 .content {
  padding: 5px 0 5px 0;
font-size: 1em;
text-align: justify;
  }


.headerinfinix {
padding: 15px 0 15px 0;
padding: 0;

}

.headerinfinixwhite {
padding: 15px 0 15px 0;
font-size: 1.1em;
}
.headerinfinixblack {
font-size: 0.6em;

}


.unhead {
margin-top: -60vw;
/*padding: -200px 0 60px 0;*/
}

.markscontainer {
padding: 35px 0 35px 0;

}
.plusminus {
min-height: 100px;
}


.headerinfinix img {
width: 20%;
}



.marktext {
font-size: 0.6em;
}

.markcontainer  img{
max-width: 50px;
margin-right: 5px;
}


.unhead {

font-size: 1em;
margin: 0;
}


.subhead {
font-size: 1.2em; 
padding: 10px 0 10px 0;
}


.ochifi {
font-size: 1.6em;
padding-bottom: 5vw;

}

.verdict {
font-size: 1.2em;
}

.verdict_header { 
font-size: 1.6em;
padding-bottom: 20px;
}



.bottom_middle {
text-align: center;
min-width: 100%;
width: 100%;
min-height: 100px;
background-image: url("./img/bottom_middle.png"); 
background-position-x: center;
background-repeat: no-repeat; 
background-position-y: bottom;
background-size: 100%;

}


.bottom_last {
min-width: 100%;
width: 100%;
min-height: 500px;
background-image: url("./img/bottom_last.png"); 
background-position-x: center;
background-repeat: no-repeat; 
background-size: 100%;

}


.markname {
margin-right: 50px;
font-weight: 700; 
text-transform: uppercase;
font-size: 1.6em;
}



.marks {
margin: auto;
max-width: 800px;
display: grid;
grid-template-columns: 1.3fr 1fr;
row-gap: 1em;
align-items: center;
position:relative;

}
.marks img {
max-width: 70%;
}

.grid-child-marks {

  margin-right: 10px;
}


.choice {
  position:absolute;
bottom: -8vw;
left: 0px;
z-index: 1000;
}

.choice img {
max-width: 40%;
}

}

///////////////////////////////////////

/*
@media screen and (max-width: 340px){
  .content {
    margin: 1em 2em;
    padding: 10px 0 10px 0;
  }
}

@media (min-width: 360px) {
  body {
    font-size: 1.0em;
  }

  .content {
	width: 100%;
    padding: 0 10px 0 10px;
  }

}
*/