* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.carousel
{
  position: relative;
  height: 550px;
  margin-top: 10px;
  perspective: 1500px;
}
.carousel .carousel-item
{
  width: 305px!important;
}
.carousel .carousel-item img
{	
  height: 440px;
  max-width: 236px;
  transform: translateX(0px) translateY(-133px);
}
.mobile
{
  width: 366px;
  height: 550px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}
.range-field{position:relative}
input[type=range],input[type=range]+.thumb{cursor:pointer}
input[type=range]{position:relative;background-color:transparent;border:none;outline:none;width:100%;margin:15px 0;padding:0}
input[type=range]:focus{outline:none}
input[type=range]+.thumb{position:absolute;top:10px;left:0;border:none;height:0;width:0;border-radius:50%;background-color:#4784FE;margin-left:7px;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
input[type=range]+.thumb .value{display:block;width:30px;text-align:center;color:#4784FE;font-size:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
input[type=range]+.thumb.active{border-radius:50% 50% 50% 0}
input[type=range]+.thumb.active .value{color:#fff;margin-left:-1px;margin-top:8px;font-size:10px}
input[type=range]{-webkit-appearance:none}
input[type=range]::-webkit-slider-runnable-track{height:5px;background:#A3C1FD;border:none}
input[type=range]::-webkit-slider-thumb{border:none;height:30px;width:30px;border-radius:50%;background:#4784FE;-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s, -webkit-box-shadow .3s;-webkit-appearance:none;background-color:#0E86FE;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;margin:-14px 0 0 0}
.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb{-webkit-box-shadow:0 0 0 10px rgba(38,166,154,0.26);box-shadow:0 0 0 10px rgba(38,166,154,0.26)}
input[type=range]{border:1px solid white}input[type=range]::-moz-range-track{height:3px;background:#c2c0c2;border:none}
input[type=range]::-moz-focus-inner{border:0}
input[type=range]::-moz-range-thumb{border:none;height:14px;width:14px;border-radius:50%;background:#4784FE;-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s, -webkit-box-shadow .3s;margin-top:-5px}
input[type=range]:-moz-focusring{outline:1px solid #fff;outline-offset:-1px}
.keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(38,166,154,0.26)}
input[type=range]::-ms-track{height:3px;background:transparent;border-color:transparent;border-width:6px 0;color:transparent}
input[type=range]::-ms-fill-lower{background:#777}
input[type=range]::-ms-fill-upper{background:#ddd}
input[type=range]::-ms-thumb{border:none;height:14px;width:14px;border-radius:50%;-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s, -webkit-box-shadow .3s}
.keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb{box-shadow:0 0 0 10px rgba(38,166,154,0.26)}
.carousel{overflow:hidden;position:relative;width:100%;height:400px;-webkit-perspective:500px;perspective:500px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:0% 50%;transform-origin:0% 50%}
.carousel.carousel-slider{top:0;left:0}
.carousel.carousel-slider .carousel-fixed-item{position:absolute;left:0;right:0;bottom:20px;z-index:1}
.carousel.carousel-slider .carousel-fixed-item.with-indicators{bottom:68px}
.carousel.carousel-slider .carousel-item{width:100%;height:100%;min-height:400px;position:absolute;top:0;left:0}
.carousel.carousel-slider .carousel-item h2{font-size:24px;font-weight:500;line-height:32px}
.carousel.carousel-slider .carousel-item p{font-size:15px}
.carousel .carousel-item{visibility:hidden;width:200px;height:200px;position:absolute;top:0;left:0}
.carousel .carousel-item>img{width:100%}.carousel .indicators{position:absolute;text-align:center;left:0;right:0;bottom:0;margin:0}
.carousel .indicators .indicator-item{display:inline-block;position:relative;cursor:pointer;height:8px;width:8px;margin:24px 4px;background-color:rgba(255,255,255,0.5);-webkit-transition:background-color .3s;transition:background-color .3s;border-radius:50%}
.carousel .indicators .indicator-item.active{background-color:#fff}
.carousel.scrolling .carousel-item .materialboxed,.carousel .carousel-item:not(.active) .materialboxed{pointer-events:none}
/*--3d img----------------------------------------------------------------*/
.macbook {
  padding: 45px 69px;
  margin: 0 auto;
  max-width: 800px;
}
.screen {
  background: #000;
  border-radius: 3% 3% 0.5% 0.5% / 5%;
  margin: 0 auto;
  position: relative;
  width: 80%;
}
.screen:before {
  border: 2px solid #cacacc;
  border-radius: 3% 3% 0.5% 0.5% / 5%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8) inset, 0 0 1px 2px rgba(255, 255, 255, 0.3) inset;
  content: "";
  display: block;
  padding-top: 67%;
}
.screen:after {
  content: "";
  border-top: 2px solid rgba(255, 255, 255, 0.15);
  position: absolute;
  bottom: 0.75%;
  left: 0.5%;
  padding-top: 1%;
  width: 99%;
}
.viewport {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin: 4.3% 3.2%;
  background: #333;
  background-image: url(../img/edumac.png);
}
.base {
  position: relative;
  width: 100%;
}
.base:before {
  content: "";
  display: block;
  padding-top: 3.3%;
  background: linear-gradient(#eaeced, #edeef0 55%, #fff 55%, #8a8b8f 56%, #999ba0 61%, #4B4B4F 84%, #262627 89%, rgba(0, 0, 0, .01) 98%);
  border-radius: 0 0 10% 10%/ 0 0 50% 50%;
}
.base::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.8) 0.5%, rgba(0, 0, 0, 0.4) 3.3%, transparent 15%, rgba(255, 255, 255, 0.8) 50%, transparent 85%, rgba(0, 0, 0, 0.4) 96.7%, rgba(255, 255, 255, 0.8) 99.5%, rgba(0, 0, 0, 0.5) 100%);
  content: "";
  height: 53%;
  position: absolute;
  top: 0;
  width: 100%;
}
.notch {
  background: #ddd;
  border-radius: 0 0 7% 7% / 0 0 95% 95%;
  box-shadow: -5px -1px 3px rgba(0, 0, 0, 0.2) inset, 5px -1px 3px rgba(0, 0, 0, 0.2) inset;
  margin-left: auto;
  margin-right: auto;
  margin-top: -3.5%;
  z-index: 2;
  position: relative;
  width: 14%;
}
.notch:before {
  content: "";
  display: block;
  padding-top: 10%;
}
/* Screenshot Hover Scroll Additions
-------------------------------------------------------------- */
.macbook .viewport {
  transition: background-position 3s ease;
  background-position: 0 0;
  background-size: 100% auto;
  overflow: hidden;
  cursor: pointer;
}
.macbook:hover .viewport {
  background-position: 0 100%;
}
.macbook .viewport:after {
  background: radial-gradient(circle at right bottom, transparent 75%, rgba(255, 255, 255, 0.05) 75%, transparent);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}