#header{
  font-family: 'DecimaMonoXBold';
  font-size: 4.287em;
  margin: 0.05em 0em 0.167em 0.95em;
  letter-spacing: -0.016em;
}

#contactsRedLine{
  background-color: #ff4800;
  width: 2.15em;
  height: 0.1251em;linewDots
  font-size: 4.571em;
  margin: 0.0469em 0em 0.5em 2.76em;
}

#contactsMenu{
  font-size: 4.571em;
  height: 2em;
  font-family: 'DecimaMonoXBold';
}

#contactsMenu > div {
  float: left;
  font-size: 0.2813em;
  padding: 2.611em 8.6em 0em 0em;
  letter-spacing: 0.024em;
  cursor: pointer;
}

.mediaRedLine{
  background-color: #ff4800;
  width: 2.15em;
  height: 0.1251em;
  font-size: 4.571em;
  margin: 0.0469em 0em 0em 2.76em;
}


#contactsMenu > div:hover > .contactsMenuUnderline {
  display: block;
}

.contactsMenuItem4{
  padding-right: 0em !important;
}

.contactsMenuUnderline {
  height: 3px;
  width: 100%;
  background: #ff4800;
  display: none;
  padding: 0 5px;
  margin-left: -5px;
}

.hovered{
    display: block !important;
}

#mainContacts{
  position: relative;
  width: 36%;
  padding: 2em 0em 2em 4.5em;
  border: 1px solid black;
  margin-left: 20%;
}

#mainContacts::before{
  content: ' ';
  width: 1.2em;
  height: 4.6em;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: black;
}

#mainContactsRedLine{
  background-color: #ff4800;
  width: 4.571em;
  height: 0.6em;
  margin: 0.36em 0em 0em 0.2em;
}
#mainContactsBody {
  margin-top: 1.3em;
}
#mainContactsBody > div {
  margin-bottom: 0.072em;
}
#mainContactsBody > div > span:nth-child(1){
  color: #ff4800;
}

#mainContactsBody > div > span:nth-child(2){
  color: #000000;
}









.videoPrew{
	z-index: 10;
	width: 100%;
	height: 100%;
	background-position: center center;
	cursor: pointer;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  position: relative;
}

.videoPrew::after{
  content: 'Aeronet';
  position: absolute;
  top: 4.571em;
  left: 10em;
  font-family: 'ChevinMedium';
  font-size: 1.9285em;
  white-space: nowrap;
  border-bottom: 1px solid #333;
  width: 2em;
  padding-bottom: 0.15em;
}
.videoPrew::before{
  position: absolute;
  top: 12em;
  left: 19.2em;
  content: 'Национльная технолøгическая инициатива';
  font-family: 'ChevinMedium';
  font-size: 1em;
  width: 3em;
}

.videoDefault{background-image:url('./../img/videoImg/default.jpg');}
.videoDefault::after{
  content: 'Национльная технолøгическая инициатива';
  font-size: 1em;
  width: 3.86em;
  top: 8.3em;
  left: 19.2em;
  padding-bottom: 0.6em;
  white-space: normal;
}
.videoDefault::before{
  content: 'National technølogy Initiative';
  width: 9em;
  top: 13.3em;
}
.videoAero{background-image:url('./../img/videoImg/aero.jpg');}
.videoAero::after{content:'Aeronet';}
.videoAuto{background-image:url('./../img/videoImg/auto.jpg');}
.videoAuto::after{content:'Autonet';}
.videoEnergy{background-image:url('./../img/videoImg/energy.jpg');}
.videoEnergy::after{content:'Energynet';}
.videoFin{background-image:url('./../img/videoImg/fin.jpg');}
.videoFin::after{content:'Finnet';}
.videoFood{background-image:url('./../img/videoImg/food.jpg');}
.videoFood::after{content:'Foodnet';}
.videoHealth{background-image:url('./../img/videoImg/health.jpg');}
.videoHealth::after{content:'Healthnet';}
.videoMari{background-image:url('./../img/videoImg/mari.jpg');}
.videoMari::after{content:'Marinet';}
.videoNeuro{background-image:url('./../img/videoImg/neuro.jpg');}
.videoNeuro::after{content:'Neuronet';}
.videoSafe{background-image:url('./../img/videoImg/safe.jpg');}
.videoSafe::after{content:'Safenet';}








#displayLine{
  width: 100%;
  height: 0.5em;
  background-color: #ff4800;
  position: absolute;
}

#contactsContent3{
  position: absolute;
  width: 100%;
}

.workGroupFirst{
  margin-top: 2.5em;
}
.workGroupLast{
  margin-bottom: 7.5em !important;
}

.workGroupVanisher{
  height: 0px;
  width: 100%;
  margin-bottom: 5em;
  overflow: hidden;
  transition: height;
  transition-duration: 0.5s;
}

.workGroupContactsContainer{
  width: 100%;
  height: 4.571em;
  position: absolute;
  z-index: 10;
}

.workGroupHeaderRedLine{
  float: left;
  background-color: #ff4800;
  width: 4.571em;
  height: 0.25em;
  margin-top: 2.221em;
}

.workGroupHeaderName{
  width: 25%;
  float: left;
  background-color: #ff4800;
  height: 3.429em;
  margin: 0.643em 0em 0em 2.36em;
  font-family: 'DecimaMonoXBold';
}

.workGroupHeaderName > div{
  font-size: 2.8em;
  margin-left: 0.1786em;
  margin-top: -0.0255em;
}

.workGroupHeaderName:hover{
  background-color: #313131;
  cursor: pointer;
  color: white;
}

.workGroupBodyLeftColumn{
  float: left;
  width: 43%;
  margin: 6em 0em 0em 4.571em;
}

.workGroupBodyRightColumn{
  float: right;
  width: 43%;
}

.workGroupOpen{
}

.workGroupContactItem{
  position: relative;
  padding: 2em;
  border: 1px solid black;
  margin-top: 2em;
  margin-bottom: 4.571em;
}

.workerPresidiumApprove{
  margin: 1.2881em 0em 3.714em 2.429em;
  font-size: 1em;
}

.workerRedLine{
  width: 4.571em;
  height: 0.572em;
  background-color: #ff4800;
  margin: 0em 0em 0em 2.572em;
}

.workerRedLineNoPhoto{
  width: 4.571em;
  height: 0.572em;
  background-color: #ff4800;
  margin: 2em 0em 2em 2.572em;
}

.Morozov{
  background-image: url('./../contactsPhoto/aero1.png');
}

.Kogogin{
  background-image: url('./../contactsPhoto/aero2.png');
}

.Boginskiy{
  background-image: url('./../contactsPhoto/auto1.png');
}

.Zhukhov{
  background-image: url('./../contactsPhoto/auto2.png');
}

.workerPhoto{
  width: 13.6em;
  height: 13.6em;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0.215em 0em 4.143em 2.572em;
}

.workername{
  font-size: 1.288em;
  text-transform: uppercase;
  font-family: 'DecimaMonoX';
  margin: 0em 0em 1.11em 1.8em;
  letter-spacing: 0.025em;
}

.workGroupContactPlace2{
  margin: 0em 0em 0em 2.3em;
  line-height: 1.5em;
}



.workGroupContactPlace{
  text-transform: uppercase;
  color: #ff4800;
  font-family: 'DecimaMonoXBold';
  padding: 0.445em 0em 0em 1.222em;
  font-size: 1.93em;
}

.workGroupContactItem::before{
  content: ' ';
  width: 1.2em;
  height: 4.6em;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: black;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------ */


#videoBody > div{
  width: 47%;
}
/*
#header{
  font-family: 'DecimaMonoXBold';
  font-size: 4.287em;
  margin: 0.05em 0em 0.167em 0.95em;
  letter-spacing: -0.016em;
}
*/
#serachBar{
  height: 2em;
  padding: 3em 0em 5.22em 0em;
  position: relative;
}
#magnifierLogo{
  background-image: url('./../img/magn.png');
  width: 1.072em;
  height: 1.072em;
  background-size: contain;
  position: absolute;
  top: 5em;
  right: 0.4em;
}

#leftColumn{
  float: left;
}

#rightColumn{
  float: right;
  padding-top: 4.6em;
}

#serachBar > input{
  height: 2em;
  width: 100%;
  box-sizing: border-box;
}

#searchBarHeader{
  font-family: 'ChevinMedium';
  margin-bottom: 0.3em;
}

.videoName{
  padding: 1.557em 3.558em 1.557em 3.558em;
  color: #ff4800;
  text-transform: uppercase;
  font-size: 1.285em;
  border-top: 1px solid #ff4800;
}

.videoOpenArrow{
  width: 2.5em;
  height: 2.5em;
  border-radius: 2.5em;
  position: absolute;
  border: 1px solid #ff4800;
  left: 0.857em;
  top: -1.357em;
  background-color: white;
  transition: transform, border-color;
  transition-duration: 0.5s;
  cursor: pointer;
}

.videoHider{
  overflow: hidden;
  height: 0px;
  transition: height;
  transition-duration: 0.5s;
}

.videoOpenArrow:hover{
  border-color: black;
}

.arrowImage{
  background-image: url('./../img/simple_orange_arrow.png');
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100%;
  transition: transform;
  transition-duration: 0.5s;
}

.videoDescription{
  position: relative;
  border-top: 1px solid #ff4800;
}

.videoDescriptionText{
  padding-top: 2em;
  padding-left: 4.572em;
  padding-right: 4.572em;
  padding-bottom: 2em;
  margin-bottom: 0px;
  overflow: hidden;
  transition: height, padding-top, padding-bottom, margin-bottom;
  transition-duration: 0.5s;
}

.videoDescriptionClosed > .videoOpenArrow{
  transform: rotate(180deg);
}

.videoBlock{
  //background-image: url('./../img/videoPrewie.png');
  width: 100%;
  height: 17em;
}

.videoItem{
  border: 1px solid #ff4800;
  margin-bottom: 2em;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------ */

.clear{
  clear: both;
}

.lectureBlock{
  margin-bottom: 2em;
}

.lectureHead{
  position: relative;
}

.letcureDate, .letcureQuestionHead{
  float: left;
  font-family: 'DecimaMonoX';
  width: 11.4275em;
  height: 1.9em;
  background-color: #f50;
  cursor: default;
}

.letcureQuestionHead{
  float: none;
  margin-top: 2.2855em;
  text-transform: uppercase;
}

.letcureDate > span, .letcureQuestionHead > span{
  padding: 0em 0.2em 0em 0.5em;
  font-size: 1.5em;
  color: white;
}

.lectureName{
  float: left;
  font-family: 'DecimaMonoX';
  font-size: 1.5em;
  margin-left: 1.3em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color;
  transition-duration: 0.3s;
}

.lectureName:hover{
  color: #f50;
}

.lectureOpen{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 2em;
  height: 2em;
  border: 1px dashed #f50;
  border-radius: 2em;
  cursor: pointer;
}

.lecturePrew{
  margin-left: 13.5em;
  margin-top: 1em;
  cursor: default;
  width: 28em;
}

.lectureBlock:last-of-type > .lectureBody {
  margin-bottom: 5em;
}

.lectureBody{
  margin-top: 4.571em;
  text-align: justify;
  overflow: hidden;
  transition: height;
  transition-duration: 1s;
  height: 0px;
}

.lectureBody > p {
  margin-bottom: 1em;
  margin-left: 13.5em;
  margin-right: 3.5em;
}

.lectureBody > ul{
  margin-left: 3em;
}

.questionText{
  margin: 2.2855em 0em 2.2855em 0em !important;
  width: 30em;
  color: #f50;
  padding-left: 9.142em;
}

.floatIcon{
  width: 1.9em;
  height: 1.9em;
  position: absolute;
  top: 0em;
  right: 0em;
  cursor: pointer;
  overflow: hidden;
  background-color: #f50;
}

.floatIcon > div{
  width: 1.9em;
  height: 1.9em;
  transition: transform;
  transition-duration: 0.5s;
}

.opened .floatIcon > div{
  transform: rotate(45deg);
}

.floatIcon > div > div {
  font-size: 2.6em;
  color: #fff;
  line-height: 0.49em;
  text-align: center;
  font-family: 'ChevinLight';
}


.photoLastPublicHeader{
  position: relative;
  margin-top: 4.571em;
  margin-bottom: 2.2855em;
}

.photoLastPublicHeader > div{
  font-family: 'DecimaMonoXBold';
  font-size: 3.071em;
  margin-left: -0.1em;
}

.photoLastPublicHeader::before{
  position: absolute;
  content: ' ';
  width: 1.1427em;
  height: 2.2855em;
  background-color: #333;
  top: -4.571em;
  left: 0em;
}

.photoLastBlock{
  width: 41.139em;
  float: left;
}

.photoLastImage{
  height: 27.142em;
  border: 1px solid #f50;
  box-sizing: border-box;
  position: relative;
}

.lastPhotoPrew{
  position: relative;
  height: 27.142em;
  z-index: -10;
  background-image: url('./../img/gallery/1.jpg');
  background-size: cover;
  -webkit-filter: grayscale(100%) brightness(120%);
  -moz-filter: grayscale(100%) brightness(120%);
  -o-filter: grayscale(100%) brightness(120%);
  -ms-filter: grayscale(100%) brightness(120%);
  filter: grayscale(100%) brightness(120%);
}

.photoLastText{
  position: relative;
  border: 1px solid black;
  border-top: none;
  padding: 2.2855em;
  background-color: #fff;
}

.photoCoumt > div{
  font-family: 'DecimaMonoXBold';
  font-size: 1.7142em;
  float: left;
}

.photoDate{
  font-family: 'DecimaMonoXBold';
  font-size: 1.7142em;
  float: right;
}

.photoDescr{
  margin-top: 2.2855em;
  width: 22.855em;
}

.photoCalendarBlock{
  width: 18.284em;
  float: right;
}

.choseDate, .choseDateText{
  text-align: center;
  font-family: 'DecimaMonoX';
}

.choseDate > div{
  font-size: 1.5714em;
}

.choseDate{
  margin-top: 2.8em;
}

.photoCalendar{
  margin-top: 2.8em;
  position: relative;
  height: 18.284em;
  border: 1px solid #000;
}

.photoBlackLine{
  width: 100%;
  height: 0.5em;
  background-color: #000;
  margin-top: 4.571em;
  margin-bottom: 4.571em;
}
.photoBlackLine2{
  width: 100%;
  height: 0.5em;
  background-color: #000;
  margin-bottom: 4.571em;
}

.albumItem{
  border-top: 1px solid #f50;
  cursor: pointer;
}
.albumsList > div{
  width: 18.284em;
}

.albumsList > .firstDiv{
  float: left;
  margin-right: 4.571em;
}
.albumsList > .secondDiv{
  float: left;
}
.albumsList > .thirdDiv{
  float: right;
}

.albumItemPhotoCount{
  height: 4.571em;
  float: left;
}

.albumItemDate{
  height: 4.571em;
  float: right;
}

.albumItemPhotoCount > div{
  font-family: 'DecimaMonoX';
  font-size: 1.1428em;
  color: #f50;
  line-height: 4.1em;
  padding-left: 1em;
  border-left: 1px solid #f50;
  transition: color;
  transition-duration: 0.3s;
}

.albumItemDate > div{
  font-family: 'DecimaMonoX';
  font-size: 1.1428em;
  color: #f50;
  line-height: 4.1em;
  padding-right: 1em;
  border-right: 1px solid #f50;
  transition: color;
  transition-duration: 0.3s;
}

.albumItemPhotoPrew{
  border: 1px solid #f50;
  height: 16em;
  transition: -webkit-filter, -moz-filter, -o-filter, -ms-filter, filter;
  transition-duration: 0.3s;
  background-size: cover;
  position: relative;
  -webkit-filter: grayscale(100%) brightness(120%);
  -moz-filter: grayscale(100%) brightness(120%);
  -o-filter: grayscale(100%) brightness(120%);
  -ms-filter: grayscale(100%) brightness(120%);
  filter: grayscale(100%) brightness(120%);
}

.albumItemPhotoPrew1{
  background-image: url('./../img/gallery/1.jpg');
}
.albumItemPhotoPrew2{
  background-image: url('./../img/gallery/2.jpg');
}
.albumItemPhotoPrew3{
  background-image: url('./../img/gallery/3.jpg');
}

.redBg{
  background-color: #fff;
  transition: background-color;
  transition-duration: 0.3s;
}

.albumItemText{
  font-family: 'ChevinLight';
  margin-top: 2.2855em;
  margin-bottom: 4.571em;
}

.albumItem:hover .redBg{
  background-color: #f50;
}

.albumItem:hover .redBg > div > div{
  color: #fff;
}

.albumItem:hover .albumItemPhotoPrew{
  -webkit-filter: grayscale(0%) brightness(100%);
  -moz-filter: grayscale(0%) brightness(100%);
  -o-filter: grayscale(0%) brightness(100%);
  -ms-filter: grayscale(0%) brightness(100%);
  filter: grayscale(0%) brightness(100%);
}

.albumItem:hover .centerThing{
  opacity: 1;
}

.centerThing{
  opacity: 0;
  transition: opacity;
  transition-duration: 0.3s;
  position: absolute;
  background-image: url('./../img/gallery/centerImage.png');
  z-index: 20;
  background-size: contain;
  width: 4.1428em;
  height: 3.3571em;
  top: 6em;
  left: 7em;
}

.centerThing2{
  top: 7em !important;
  left: 7em !important;
  width: 4.1428em !important;
  height: 3.3571em !important;
  cursor: pointer;
}

.centerThingBig{
  background-image: url('./../img/gallery/centerImageBig.png');
  z-index: 20;
  background-size: contain;
  background-repeat: no-repeat;
  height: 23em;
  width: 36em;
  position: absolute;
  top: 2em;
  left: 2.45em;
}

.photosList{
  display: none;
}

.albumOpenedText{
  width: 64em;
  padding: 2em;
  border: 1px solid #f50;
  box-sizing: border-box;
}

.albumOpenedText > div{
  font-size: 2.5714em;
  font-family: 'DecimaMonoXBold';
}

.albumOpenedDate{
  float: right;
  margin: 2em 0em 2em 0em;
}
.albumBackBtn{
  float: left;
  margin: 2em 0em 2em 0em;
}

.albumBackBtn > div{
  font-size: 1.5714em;
  font-family: 'DecimaMonoXBold';
  cursor: pointer;
  transition: color;
  transition-duration: 0.3s;
}

.albumBackBtn:hover > div{
  color: #f50;
}

.albumOpenedDate > div{
  font-size: 1.5714em;
  font-family: 'DecimaMonoXBold';
}

.albumOpenedList > div > div{
  width: 18.284em;
  height: 18.284em;
  background-position: 50% 50%;
}

.albumOpenedList > div{
  border: 1px solid transparent;
  margin-bottom: 4.571em;
  position: relative;
  transition: border-color;
  transition-duration: 0.3s;
}

.albumOpenedList > div:nth-child(3n+1){
  float: left;
}
.albumOpenedList > div:nth-child(3n+2){
  float: left;
  margin-left: 4.571em;
}
.albumOpenedList > div:nth-child(3n+3){
  float: right;
}

.openedImg{
  -webkit-filter: grayscale(100%) brightness(120%);
  -moz-filter: grayscale(100%) brightness(120%);
  -o-filter: grayscale(100%) brightness(120%);
  -ms-filter: grayscale(100%) brightness(120%);
  filter: grayscale(100%) brightness(120%);
  transition: -webkit-filter, -moz-filter, -o-filter, -ms-filter, filter;
  transition-duration: 0.3s;
  background-size: cover;
  cursor: pointer;
  position: relative;
}

.albumOpenedList > div:hover{
  border-color: #f50;
}

.albumOpenedList > div:hover > .openedImg{
  -webkit-filter: grayscale(0%) brightness(100%);
  -moz-filter: grayscale(0%) brightness(100%);
  -o-filter: grayscale(0%) brightness(100%);
  -ms-filter: grayscale(0%) brightness(100%);
  filter: grayscale(0%) brightness(100%);
}

.albumOpenedList > div:hover > .centerThing2{
  opacity: 1;
}

.openedImg1{background-image: url('./../img/gallery/gal1/1.jpg');}
.openedImg2{background-image: url('./../img/gallery/gal1/2.jpg');}
.openedImg3{background-image: url('./../img/gallery/gal1/3.jpg');}
.openedImg4{background-image: url('./../img/gallery/gal1/4.jpg');}
.openedImg5{background-image: url('./../img/gallery/gal1/5.jpg');}
.openedImg6{background-image: url('./../img/gallery/gal1/6.jpg');}
.openedImg7{background-image: url('./../img/gallery/gal1/7.jpg');}
.openedImg8{background-image: url('./../img/gallery/gal1/8.jpg');}
.openedImg9{background-image: url('./../img/gallery/gal1/9.jpg');}
.openedImg10{background-image: url('./../img/gallery/gal1/10.jpg');}
.openedImg11{background-image: url('./../img/gallery/gal1/11.jpg');}
.openedImg12{background-image: url('./../img/gallery/gal1/12.jpg');}
.openedImg13{background-image: url('./../img/gallery/gal1/13.jpg');}
.openedImg14{background-image: url('./../img/gallery/gal1/14.jpg');}


.photoOpen{
  display: none;
}

.onePhoto{

}





























/* black decoration dots */
.blackBoxRed > div{position:absolute;margin:-3px 0px 0px -3px;width:5px;height:5px;background-color:#f50;z-index:5;}
.blackBoxRed > div:nth-child(1){top:0%;left:0%;}
.blackBoxRed > div:nth-child(2){top:0%;left:50%;}
.blackBoxRed > div:nth-child(3){top:0%;left:calc(100% + 1px)}
.blackBoxRed > div:nth-child(4){top:50%;left:0%;}
.blackBoxRed > div:nth-child(5){top:50%;left:calc(100% + 1px);}
.blackBoxRed > div:nth-child(6){top:calc(100% + 1px);left:0%;}
.blackBoxRed > div:nth-child(7){top:calc(100% + 1px);left:50%;}
.blackBoxRed > div:nth-child(8){top:calc(100% + 1px);left:calc(100% + 1px);}

/* black decoration dots */
.blackBoxBlack5 > div{position:absolute;margin:-3px 0px 0px -3px;width:5px;height:5px;background-color:#000;}
.blackBoxBlack5 > div:nth-child(1){top:50%;left:0%;}
.blackBoxBlack5 > div:nth-child(2){top:50%;left:calc(100% + 1px);}
.blackBoxBlack5 > div:nth-child(3){top:calc(100% + 1px);left:0%;}
.blackBoxBlack5 > div:nth-child(4){top:calc(100% + 1px);left:50%;}
.blackBoxBlack5 > div:nth-child(5){top:calc(100% + 1px);left:calc(100% + 1px);}

/* black decoration dots */
.blackBoxBlack8 > div{position:absolute;margin:-3px 0px 0px -3px;width:5px;height:5px;background-color:#000;}
.blackBoxBlack8 > div:nth-child(1){top:0%;left:0%;}
.blackBoxBlack8 > div:nth-child(2){top:0%;left:50%;}
.blackBoxBlack8 > div:nth-child(3){top:0%;left:calc(100% + 1px)}
.blackBoxBlack8 > div:nth-child(4){top:50%;left:0%;}
.blackBoxBlack8 > div:nth-child(5){top:50%;left:calc(100% + 1px);}
.blackBoxBlack8 > div:nth-child(6){top:calc(100% + 1px);left:0%;}
.blackBoxBlack8 > div:nth-child(7){top:calc(100% + 1px);left:50%;}
.blackBoxBlack8 > div:nth-child(8){top:calc(100% + 1px);left:calc(100% + 1px);}

.linewDots{clear:both;width:27.426em!important;border-top:1px solid #f50;margin:4.571em auto 4.571em auto;position:relative;}
.linewDots > div{position:absolute;margin:-3px 0px 0px -3px;width:5px;height:5px;background-color:#ff4800;}
.linewDots > div:nth-child(1){top:0%;left:0%;}
.linewDots > div:nth-child(2){top:0%;left:50%;}
.linewDots > div:nth-child(3){top:0%;left:100%;}


.blackBoxPlus{
  width: 0px;
  height: 0px;
  transition: width, height;
  transition-duration: 1s;
}
.blackBoxPlus > div{
  position: absolute;
  margin: -3px 0px 0px -3px;
  width: 5px;
  height: 5px;
  background-color: #ff4800;
}
.blackBoxPlus > div:nth-child(1){
  top: 0%;
  left: 0%;
}
.blackBoxPlus > div:nth-child(2){
  top: 50%;
  left: 0%;
}
.blackBoxPlus > div:nth-child(3){
  top: calc(100% + 1px);
  left: 0%;
}
.blackBoxPlus > div:nth-child(4){
  top: 0%;
  left: 50%;
}
.blackBoxPlus > div:nth-child(5){
  top: 0%;
  left: calc(100% + 1px)
}
.blackBoxPlus > div:nth-child(6){
  top: calc(100% + 1px);
  left: 50%;
}
.blackBoxPlus > div:nth-child(7){
  top: calc(100% + 1px);
  left: calc(100% + 1px);
}
.blackBoxPlus > div:nth-child(8){
  top: 50%;
  left: calc(100% + 1px);
}
