/*ÑÁÐÎÑ*/
*{box-sizing:border-box}
/*ÒÅÃÈ*/
body {margin: 0; font-family: 'PT Sans'; background-image: url("/img/rksi/bb.jpg"); background-attachment: fixed; background-size:cover;}
a, .a {text-decoration: none; color: #034EA2; cursor: pointer;}
h1{font-size:100%; font-weight: bold; text-transform: uppercase; margin: 0 0 0em 0; color: white;  background: #A22103; padding: 0.8em 2.4em; font-family: Tahoma;}
h2, h3, h4, h5 {color: #444;}
main {margin: 0 0 3em 0; font-size: 1.6em; color: #333; padding: 2em;  background: rgba(254, 254, 254, 0.8);}
main p {text-align: justify;}
label {cursor: pointer;}
/*top*/
.top {display: flex; flex-flow: row wrap; ; width: 100%; /*z-index: 50; top: 0;position: fixed*/}
.top a {color: white;}
.top a:hover {color: #F45928;}
.top-left {width: 40px; background: #1D4068; color: white; padding: 12px 1em 12px 12px; text-align: center;}
.top-center {width: calc(100% - 560px); background: #666; color: white; padding: 12px 12px 12px 0;}
.top-yandex {width: 320px; background: #034EA2; display: flex; vertical-align: middle;}
.top-right {width: 200px; background: #1D4068; color: white; padding: 12px 1em 12px 12px; text-align: center; word-spacing: 0.2em;}
.top-span {padding-left: 1em; font-weight: bold; white-space: nowrap;}
@media screen and (max-width: 1300px) {
.top {position:relative;}
.top-center {width: calc(100% - 40px);}
.top-yandex {width: calc(100% - 200px);}
.top-right {width: 200px;}       
}
/* @media screen and (max-width: 640px) {
.top-center {display:none;}
.top-yandex {width: calc(100% - 160px);}
.top-right {width: 120px; padding: 12px 6px 12px 6px;}       
}
@media screen and (max-width: 320px) {
.top-yandex {width: calc(100% - 40px);}
.top-right {display:none;}       
}*/
/*ÑÒÈËÈ ØÀÁËÎÍÀ*/
.header {background-color: rgba(255, 255, 255, 0.4);}
/*logo*/
.info {margin: 2em 0 0 0;}
.edu {text-align: center; font-size: 1.4em; margin: 0.3em 0; color: #666; font-family: Tahoma; padding: 0em 0 0 0;}
.edu a:hover {color: #A22103;}
.logo {text-align: center; color: #CCC; font-family: tahoma; font-size: 0.8rem; font-weight: bold;}
.logo a{width: 100%;}
.logo img {width: 60%; height: auto; margin: 1em 0 0 0; max-width: 1200px;}

@media screen and (max-width: 1300px) {
    .logo img {width: 80%; height: auto; margin: 1em 0 0 0;}
    .edu { font-size: 1em; padding: 1.2em 0 0 0;}  
}
@media screen and (max-width: 1000px) {
    .logo img {width: 96%; height: auto; margin: 1em 0 0 0;}  
}
.logo a {color: #F45928;}
.logorksismall {display: none; padding-bottom: 1em;}
@media screen and (max-width: 720px) {
.logorksismall {display: block;} 
.logorksi {display: none;} 
.edu {font-size: 0.9em;} 
   
}
.main {padding-top: 3em; }
@media screen and (max-width: 720px) {
    .main {padding-top: 0em;}
    .logo {margin-bottom: 0;} 
}

/*vrapper*/
.wrapper {max-width: 1400px; margin: 0 auto;}
.h1 {margin: 0 0 -4px 0;}
.h1 img {width: 100%; margin: 0;} 
.h2 {color: #034EA2; border-bottom: 1px solid #034EA2; border-top: 1px solid #034EA2; text-align: center; text-transform: uppercase;}
.wide100 {width: 100vw; position: relative; z-index: 10;  left: calc(600px - 50vw);}
.wide10 {width: 120%; position: relative; z-index: 10; padding: 0; left: -10%; clear: both;}
@media screen and (max-width: 1440px) {
    .wrapper {max-width: 1000px;} 
    .wide100 {left: calc(500px - 50vw);}
}
@media screen and (max-width: 1200px) {
    .wide10 {width: 100%; left: 0;}
       
}
@media screen and (max-width: 1000px) {
    .wide100, .wide10 {left: 0;}  
}
.projects h2 {text-align: center; font-size: 210%; text-transform: uppercase; border-bottom: 2px solid rgb(3, 78, 162); border-top: 2px solid rgb(3, 78, 162); margin: 1em 0 0.5em 0; color:rgb(3, 78, 162);   background: rgba(254, 254, 254, 0.8);}
.projects {margin: 0 0 3em 0;}
.projects-flex {display: flex;}
.projects-flex a {width: 100%; margin: auto;}



/*footer*/
#footer {background: #003974; color: #cceeFF; font-size: 150%;}
#footer .wrapper {margin: 0 auto; padding: 3rem 1rem 0 1rem;}
@media screen and (max-width: 1000px) {
    #footer {font-size: 120%;} 
}
#footer a {color: white;}
#footer a:hover {color: #99CCFF;}
#footer h2 {text-transform: uppercase; color: white;}
#footer .icons {padding: 1em 0;text-align: center;}
#footer ul.icons {cursor: default; list-style: outside none none; padding-left: 0;}
#footer ul.icons li {display: inline-block;padding: 0 1em 0 0;}
#footer ul.icons li .icon::before {font-size: 2em;}
.icon::before {font-family: FontAwesome;font-style: normal; font-weight: normal;text-transform: none;}
#footer .icon.round {background: rgba(255, 255, 255, 0.15); border-radius: 100%; color: #fff; display: block; height: 6rem; line-height: 6rem; width: 6rem;}
#footer .icon {  border-bottom: medium none;  position: relative;text-decoration: none;}
#footer .icon > .label {display: none;}
.mainphone {text-align: center; font-size: 160%; margin: 1em 0;}
.innerlinks {font-size: 80%; background-color: #1D4068;}
.innerlinks .img-50 {padding-bottom: 3em;}
.innerlinks .img-50 div {border-right: 1px dotted #DDD;}
.innerlinks .img-50 div:nth-child(2n) {padding-left: 2em; border-right: 0;}
@media screen and (max-width: 900px) {
 .innerlinks .img-50 div {border:0; padding-left: 0;}
 .innerlinks .img-50 div:nth-child(2n) {padding-left: 0;}
}
.copyright {background: #333;  color: rgba(255, 255, 255, 0.5);font-size: 1rem; margin: 0;padding: 3rem 0 6rem 0; text-align: center;}
@media screen and (max-width: 400px) {
    #footer ul.icons li .icon::before {font-size: 1em;}
    #footer .icon.round {height: 3rem; line-height: 3rem; width: 3rem;}
}
@media screen and (max-width: 640px) {
#footer .right {text-align:left} 
.mainphone {text-align: center; font-size: 120%; margin: 1em 0;}
}
/*ÑÒÈËÈ ÑÒÐÀÍÈÖ*/
/*âûðàâíèâàíèå*/
.right{text-align: right;}
.centr {text-align: center;}
.floatleft{float:left; margin:0 1em 1em 1em;}
/*ðàçëè÷íûå ñòèëè*/
.newsfoto img{width: 100%; height: auto;}
.round {border-radius:100%}
.padding {padding: 0.5em;}
.hr {width: 100%; height: 1px; border-bottom: 1px solid #EEE;}
.s240 {width: 180px; height: auto;}
.w240 {width: 240px; display: flex;}
.w-240{width: calc(100% - 240px); display: flex;}
.w240 img {margin: auto;}
.w-240 div{margin: auto 0;}
@media screen and (max-width: 600px) {
    .w-240{width:100%} 
}
.href {cursor: pointer;}
.smi {width:100%; border-bottom:1px dotted #CCC; padding-bottom:0.5em; margin:0 0 1em 0;}
.boxpadding {padding: 2em;}
.best_students_menu, .years_menu {text-align: center; font-size: 120%; margin-bottom: 1em;}
.margin-bot1em {margin-bottom: 1em;}
/*ñòðóêòóðà*/
.bothp p {clear: both;}
.udfoto {float: left; margin: 0 1rem 1rem 0;}
.big150 {font-size: 150%;}
.big120 {font-size: 120%;}
.small-bold {font-size: small; font-weight: bold;}
.smi .small-bold {font-size: 90%; font-weight: bold; margin-bottom: 10px;}
.button {padding: 0.2em 0.4em; border: 1px solid #3860A7; color: #3860A7; background: #e2ecfc; border-radius:4px}
.button:hover {color: white; background: #3860A7;}
/*êîíòåéíåð äëÿ àäàïòèâíîãî âèäåî*/
/*.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;}
.video-container iframe,.video-container object,.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/*àíèìàöèè*/
.marqueebox {text-align: center; padding: 24px 0; background-color: #002D53; background-image: url('http://it-factory.rksi.su/img/bg/bg.jpg'); color: white; z-index: 10;}
.marquee{width:100%; white-space:nowrap; overflow:hidden;}
.marquee a {color: yellow;}
.marquee div {
color:white;
font-size: 1.8em; font-weight: bold;
display:inline-block;
padding-left:100%;
-webkit-animation: marquee 30s infinite linear;
animation: marquee 30s infinite linear;
}
 
@-webkit-keyframes marquee {
0%{-webkit-transform: translate(0, 0);}
100%{-webkit-transform: translate(-100%, 0);}
}
@keyframes marquee{
0%{transform: translate(0, 0);}
100%{transform: translate(-100%, 0)}
}

/*ÑÒÈËÈ ÍÀÂÈÃÀÖÈÈ*/
/*drop menu*/
.menubox{margin: 0 auto 0 auto; background: rgba(255, 255, 255, 0.95); border-bottom: 1px solid rgb(3, 78, 162); border-top: 1px solid rgb(3, 78, 162);}
.menutopbox{margin: 0 auto;  font-size: 0.9rem; padding:0 0 1em 0;}
.menubox input[type=checkbox], .menutopbox input[type=checkbox] {display: none;}
@media screen and (max-width: 1000px) {
.menubox{font-size: 75%;}
.menutopbox{ font-size: 80%;}   
}
@media screen and (max-width: 720px) {
.menubox{display: none;}
.menutopbox{display: none;}  
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: tahoma;
  color:white
}
.menutopbox .menu ul {color:#F45928;}
.menu a, .menu span {
  text-decoration: none;
  outline: none;
  display: block;
  transition: .4s ease-in-out;
  color:white;
  color: rgb(3, 78, 162);
}
.menutopbox .menu a, .menutopbox .menu span {
  transition: .4s ease-in-out;
  color:#F45928;
} 
.menutopbox .menu a:hover {
  color:#A22103;
}
.menu a:hover {
  color:#A22103;
}
.menu .topmenu {
  text-align: center;
  padding: 2px 0;
}
.menutopbox .menu .topmenu {
  padding:  0;
}
.menu .topmenu > li {
  display: inline-block;
  position: relative;
}
.menu .topmenu > li:after {
  content: "";
  position: absolute;
  right: -2px;
  width: 2px;
  height: 14px;
  background: #CCC;
  top: 14px;

}
.menu .topmenu > li:last-child:after {
  background: none;
  box-shadow: none;
}
.menu .topmenu > li > a, .menu .topmenu > li > span {
  padding: 12px 4px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;

}
.menu .submenu {
  position: absolute;
  /*left: 0%;*/
  top: 100%;
  width: 210px;
  margin-left: 0px;
  background: white;
  border: 1px solid #034EA2;
  z-index: 500;
  visibility: hidden;
  opacity: 0;
  transform: scale(.8);
  transition: .4s ease-in-out;
  text-align: left;
}
.menutopbox .submenu {background: white; width: 320px;}
.menu .submenu li a {
  padding: 10px 0;
  margin: 0 10px;
  border-bottom: 1px solid #efefef;
}
.menu .topmenu > li:hover .submenu {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
@media screen and (max-width: 1100px) {
.menu #lastitem {position:absolute; right: 0;}  
}

@media screen and (max-width: 800px) {
.menu .submenu{display:none;}
.menu #lastitem {position:absolute; right: 0;}
.menu .topmenu > li:hover .submenu {display: block;}   
}

/*left-menu*/

#right-panel {
    background: #333;
    color: #CCC;
    position: absolute;
    top: 0;
    width: 320px; 
    min-height: 100%;
    overflow: hidden;
    padding: 36px 24px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    transition: left 1000ms cubic-bezier(0.17,0.04,0.03,0.94);
    font-size: larger;
    z-index: 64;
    
}
#right-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: tahoma;
  color:white
}
#right-panel .topmenu li {margin: 8px 0;}
#right-panel .submenu{font-size: 75%;}
#right-panel .submenu li{padding:0 0 4px 2px; margin-bottom: 4px; border-bottom: 1px dotted; #666}
#right-panel a {color: white;}
.right-panel-hide{left: -398px;}
.right-panel-show{left: 0px;}
#rmenu-show {cursor: pointer;}
.closekey{padding: 6px; text-align: right;}



#right-panel  .topmenu {
  list-style: none;
  perspective: 900;

}
#right-panel  .topmenu li {
  position: relative;

}
#right-panel  .topmenu li:nth-of-type(1) {
  animation-delay: 0.5s;
}
#right-panel  .topmenu li:nth-of-type(2) {
  animation-delay: 0.75s;
}
#right-panel  .topmenu li:nth-of-type(3) {
  animation-delay: 1s;
}

#right-panel  .topmenu li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 8px;
  right: 0;
}
#right-panel  .topmenu li i:before, #right-panel .topmenu li i:after {
  content: "";
  position: absolute;
  background-color: #F45928;
  width: 3px;
  height: 12px;
}
#right-panel .topmenu li i:before {
  transform: translate(-3px, 0) rotate(45deg);
}
#right-panel .topmenu li i:after {
  transform: translate(3px, 0) rotate(-45deg);
}
#right-panel  ul li input[type=checkbox] {
  position: absolute;
  right: -5px;
  top: 4px;
  cursor: pointer;
  width: 21px;
  height: 21px;
  z-index: 1;
  opacity: 0;
}

#right-panel  .topmenu li ~ .submenu {
  position: relative;
  overflow: hidden;
  opacity: 1;
  transform: translate(0, 0);
  z-index: 2;
}
#right-panel  .topmenu li input[type=checkbox]:checked ~ .submenu {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}


#right-panel  .topmenu li input[type=checkbox]:checked ~ i:before {
  transform: translate(3px, 0) rotate(45deg);
}
#right-panel  .topmenu li input[type=checkbox]:checked ~ i:after {
  transform: translate(-3px, 0) rotate(-45deg);
}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}