/* All Mobile Sizes (devices and browser) */

@media (pointer:none), (pointer:coarse) {

body { display: none; }
.desktop { display: none; }
.mobile { display: block; }
.desktop.inline { display: none; }
.mobile.inline { display: inline-block; }

.container { max-width: 98%; padding: 0 8px 0 8px; }
.container.half { width: 95%; }
.mainbar, .sidebar { width: 100%; }
.mainbar.right { margin-top: -40px; }

 section {  padding-top: 80px; }
 section.mini { padding: 20px 0 15px 0; }
 section h1 { font-size: 20px; margin: 30px 0 10px 0; }
 section h2  { font-size: 26px; padding: 6px 10px 12px 0; }

.video-bg { width: 100%; height: 210px; }
.video-cover { width: 800px;  margin-top: 68px; }
.about { font-size: 10px; line-height: 16px; }

.bredcrumb  { padding: 50px 0 10px 0; }
.bredcrumb.cover  { background-size: cover; background-position : calc(100% - 960px) 0; }
.bredcrumb.cover span { font-size: 14px; }
.bredcrumb .hello { margin-top: 0px; }



/* MENU LINK */

.menu.link {
  width: 26%;
  height: 80px;
  padding: 12px 8px 8px 8px;
}

.menu.link i { font-size: 40px; }
.menu.link span.title { font: normal 400 15px Roboto-Regular; }

.menu.link span.notification { 
  font: normal 400 16px Roboto-Regular;
  width: 20px;
  height: 20px;
  line-height: 22px;
}




 input.textbox { width: 94%; margin-right: 0; }
 input.quart2, select.quart2 { width: 40%; }
 input.quart3 { width: 66%; }



.mobile-navigation {  
  float: right;
  display: inline-block;
  color: #fff;
  height: 20px;
  padding: 7px;
  margin: 14px 16px 0 0; 
  border-radius: 5px;
  border: solid 2px #fff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 0;
}

.navigation { margin: 14px 0 10px 0; }

.navigation li  {
  display: inline-block;
  position: relative;
  width: 46.4%;
  margin: 0 8px 10px 0;
}

.navigation a {
  height: 20px;
  font-size: 16px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  border: solid 2px #fff;
  padding: 10px 0 10px 0; 
}

.navigation a.yellow  { font-size: 18px; margin: 0; }
.navlink a span::before { display: none; }
.navlink a:hover span, .navlink a:focus span { 	transform: none; }

.navigation.js { display: none; }



.account-info { margin: 0 0 40px 0; }

.course img { width: 100%; margin: 0 0 20px 0; }
.courses { width: 96%; margin: 0 0 20px 0; }

.photo { width: 46%; margin: 0 5px 4px 0; }
.photo:nth-of-type(2n) { margin-right: 0; }

.locations { width: 44.5%; margin: 0 3px 12px 0; }
.locations span { font-size: 16px; font-weight: 700; padding-top: 6px; }
.locations.mini { width: 29.2%; margin: 0 3px 8px 0;  border: solid 4px #f5a02c; }
.locations.mini span { font-size: 12px; font-weight: 600; padding-top: 4px; }

.event { width: 97%; margin: 0 1px 20px 0; }

.calendar, .calendar.full { width: 96%; margin: 0 0 1px 0; }
.calendar .name { padding-top: 8px; font-size: 15px; }
.calendar .address { font-size: 9px; }

.team { width: 44%; margin: 0 6px 20px 0; }
.team div.name { font-size: 15px; }

.partner { width: 47%; }

ul#hotkeys li  {  
  width: 40px;
  height: 40px;
  font-size: 20px;
  margin-right: 5px;   
}

.hotkey.call { display: inline-block; }
.hotkey.phone { display: none; }
.hotkey.sms { display: inline-block; }
.hotkey.map { display: none; }
.hotkey.geo { display: inline-block; }

.card.title { background: #fff; color: #222; font-size: 20px; padding: 14px 10px 4px 10px; }
.card.schedule { font-size: 16px; height: 30px; }

.card.mainbox { 
  background: none;
  margin: 10px 0 10px 0;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  box-shadow: none;
}

.card.mainbox.small { padding: 0;  }

.card.boxes.image { width: 46%; margin: 0 3px 4px 0; }
.card.boxes.flyers, .card.boxes.videos { width: 97%; margin: 0 0 8px 0; }
.card.boxes.image:nth-child(2n) { margin-right: 0; }
.card.boxes.icons:nth-child(3n+2) { margin-right: 0; }


.page-buttons { text-align: center; }
.alert { width: 93%; }

.fullcard, .halfcard { display: block; width: 100%; }
.users { width: 47.8%; }
.item-image.rectangle img { width: 90px; }

.modal-window>div { width: 80%; margin-top: 100px; }

.btn-lg {
  font-size: 13px;
  min-width: 60px;
  padding: 12px 10px 6px 10px;
}

}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  .logo { 
  background-image: url('../img/layout/logo@2x.png');
  background-size: 150px 50px;
  margin: 10px 0 5px 0;
  }
}