@import url('https://fonts.googleapis.com/css?family=Montserrat');

/**
 * Padding is set relative to the width
 * of the element, so here padding-top:60% is
 * a percentage of the width. This allows us 
 * to set the height as a ratio of the width
 *
 */
.carousel{
	width: 100%;
	position: relative;
	padding-top: 50%;
	overflow: hidden;
}

.inner{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
}

/**
 * ==========================
 * Animation styles
 * 
 * Notes:
 * 1. We use z-index to position active slides in-front 
 * of non-active slides
 * 2. We set right:0 and left:0 on .slide to provide us with
 * a default positioning on both sides of the slide. This allows 
 * us to trigger JS and CSS3 animations easily
 *
 */
.slide{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	right:0;
	left:0;
	z-index: 1;
	opacity: 0;
}

.slide.active,
.slide.left,
.slide.right{
	z-index: 2;
	opacity: 1;
}

/**
 * ==========================
 * JS animation styles
 * 
 * We use jQuery.animate to control the sliding animations
 * when CSS3 animations are not available. In order for
 * the next slide to slide in from the right, we need
 * to change the left:0 property of the slide to left:auto
 *
 */

.js-reset-left{left:auto}

/**
 * ==========================
 * CSS animation styles
 * 
 * .slide.left and .slide.right set-up
 * the to-be-animated slide so that it can slide
 * into view. For example, a slide that is about 
 * to slide in from the right will:
 * 1. Be positioned to the right of the viewport (right:-100%)
 * 2. Slide in when the style is superseded with a more specific style (right:0%)
 *
 */
.slide.left{
	left:-100%;
	right:0;
}

.slide.right{
	right:-100%;
	left: auto;
}

.transition .slide.left{left:0%}
.transition .slide.right{right:0%}

/**
 * The following classes slide the previously active
 * slide out of view before positioning behind the 
 * currently active slide
 *
 */
.transition .slide.shift-right{right: 100%;left:auto}
.transition .slide.shift-left{left: 100%;right:auto}

/**
 * This sets the CSS properties that will animate. We set the
 * transition-duration property dynamically via JS.
 * We use the browser's default transition-timing-function
 * for simplicity's sake
 * 
 * It is important to note that we are using CodePen's inbuilt
 * CSS3 property prefixer. For your own projects, you will need
 * to prefix the transition and transform properties here to ensure
 * reliable support across browsers
 *
 */
.transition .slide{
	transition-property: right, left, margin;
}

/**
 * ==========================
 * Indicators
 *
 */
.indicators{
  width:100%;
  position: absolute;
  bottom:0;
  z-index: 4;
  padding:0;
  text-align: center;
}

.indicators li{
	width: 13px;
	height: 13px;
	display: inline-block;
	margin: 5px;
	background: gray;
	list-style-type: none;
	border-radius: 50%;
  cursor:pointer;
  transition:background 0.3s ease-out;
}

.indicators li.active{background:#93278f}

.indicators li:hover{background-color:#2b2b2b}

/**
 * ==========================
 * Arrows 
 *
 */
.arrow{
  width: 20px;
  height: 20px;
  position:absolute;
  top:50%;
  z-index:5;
  border-top:3px solid #000000;
  border-right:3px solid #000000;
  cursor:pointer;
  transition:border-color 0.3s ease-out;
}

.arrow:hover{border-color:#93278f}

.arrow-left{
  left:20px;
  transform:rotate(225deg);
}

.arrow-right{
  right:20px;
  transform:rotate(45deg);
}

/**
 * ==========================
 * For demo purposes only
 * 
 * Please note that the styles below are used
 * for the purposes of this demo only. There is no need
 * to use these in any of your own projects
 *
 */
.slide{
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.slide:nth-child(1){
	background-image:url(../assets/slider/JASC.png);
 }

.slide:nth-child(2){
	background-image:url(../assets/slider/thermo.png);
}

.slide:nth-child(3){
	background-image:url(../assets/slider/Scherzinger.png);
 }

 .slide:nth-child(4){
	background-image:url(../assets/slider/slingofer.png);
 }

 .slide:nth-child(5){
	background-image:url(../assets/slider/Gauss-Magneti.png);
 }

 .slide:nth-child(6){
	background-image:url(../assets/slider/image001.png);
 }

 
  /* Bulma */

  @media screen and (min-width:1024px){
  .section{
    background-size: cover;
  }
  .aboutus{
    padding: 6rem 1.5rem;
  }
  .subtitle{
    padding-bottom: 1rem;
    padding-top:1rem;
  }
  .box{
    min-height: 260px;
  }
  .navbar-item, .navbar-link{
    padding: .5rem 2.75rem;
  }
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
.onlymobile{
  display: none;
}
.navbar-item img{
  min-height: 3.5rem;
}
.navbar-item img{
  max-height: 5.5rem;
}
}

@media screen and (max-width:1024px){
  .onlydesktop{
    display:none;
  }
}

.footer{
  padding: 1rem 1.5rem 1rem; 
  background: #4A90E2; 
  background-image: linear-gradient(-179deg, #3023AE 0%, #53A0FD 100%, #739FDD 100%, #B4EC51 100%);
  color: white;
}

.is-boxed{
  min-width: 50%;
}

@media screen and (min-width: 1088px){
  .navbar-dropdown{
    left:25%;
  }
}

.navbar-link::after{
  display: none;
}



/* .carousel {
  position: relative;
  overflow: hidden;
}
.carousel .carousel-container {
  width: 100%;
  position: relative;
  border: none;
  display: flex;
  margin: 0;
  padding: 0;
  left: -100%;
  transform: translateX(100%);
}
.carousel .carousel-container .carousel-item {
  display: block;
  position: relative;
  flex: 1 0 100%;
}
.carousel .carousel-container .carousel-item.has-background .is-background {
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100%;
}
.carousel .carousel-container .carousel-item .title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5em;
  margin: 0;
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
}
.carousel .carousel-navigation {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.carousel .carousel-navigation .carousel-nav-left,
.carousel .carousel-navigation .carousel-nav-right {
  padding: 1em;
}
.carousel .carousel-navigation.is-centered {
  justify-content: center;
}
.carousel .carousel-navigation.is-overlay {
  align-items: center;
  justify-content: space-between;
  z-index: 20;
}
.carousel .carousel-navigation.is-overlay .carousel-nav-left,
.carousel .carousel-navigation.is-overlay .carousel-nav-right {
  height: 2.2em;
  width: 2em;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #4a4a4a;
  z-index: 99;
}
.carousel .carousel-navigation.is-overlay .carousel-nav-left:hover,
.carousel .carousel-navigation.is-overlay .carousel-nav-right:hover {
  cursor: pointer;
}
.carousel .carousel-navigation.is-overlay .carousel-nav-right {
  left: auto;
  right: 0;
}
.carousel.is-reversing .carousel-container {
  transform: translateX(-100%);
}
.carousel.is-reversing.is-2 .carousel-container {
  transform: translateX(calc(-100% / 2));
}
.carousel.is-reversing.is-3 .carousel-container {
  transform: translateX(calc(-100% / 3));
}
.carousel.is-reversing.is-4 .carousel-container {
  transform: translateX(calc(-100% / 4));
}
.carousel.is-reversing.is-5 .carousel-container {
  transform: translateX(calc(-100% / 5));
}
.carousel.is-2 .carousel-container {
  left: calc(-100% / 2);
  transform: translateX(calc(100% / 2));
}
.carousel.is-2 .carousel-container .carousel-item {
  padding: 1em;
  flex-basis: calc(100% / 2);
}
.carousel.is-3 .carousel-container {
  left: calc(-100% / 3);
  transform: translateX(calc(100% / 3));
}
.carousel.is-3 .carousel-container .carousel-item {
  padding: 1em;
  flex-basis: calc(100% / 3);
}
@media screen and (min-width:768px){
  .carousel.is-4 .carousel-container {
    left: calc(-100% / 4);
    transform: translateX(calc(100% / 4));
  }
  .carousel.is-4 .carousel-container .carousel-item {
    padding: 1em;
    flex-basis: calc(100% / 4);
  }
}
.carousel.is-5 .carousel-container {
  left: calc(-100% / 5);
  transform: translateX(calc(100% / 5));
}
.carousel.is-5 .carousel-container .carousel-item {
  padding: 1em;
  flex-basis: calc(100% / 5);
}

.hero.has-carousel {
  position: relative;
}
.hero.has-carousel + .hero-body,
.hero.has-carousel + .hero-head,
.hero.has-carousel + .hero-footer {
  z-index: 1;
}
.hero.has-carousel .hero-carousel {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: auto;
  border: none;
  margin: auto;
  padding: 0;
  z-index: 0;
}

.hero-carousel {
  position: relative;
  overflow: hidden;
}
.hero-carousel .carousel-container {
  width: 100%;
  position: relative;
  border: none;
  display: flex;
  margin: 0;
  padding: 0;
  left: -100%;
  transform: translateX(100%);
}
.hero-carousel .carousel-container .carousel-item {
  display: block;
  position: relative;
  flex: 1 0 100%;
}
.hero-carousel .carousel-container .carousel-item.has-background .is-background {
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100%;
}
.hero-carousel .carousel-container .carousel-item .title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5em;
  margin: 0;
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
}
.hero-carousel .carousel-navigation {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.hero-carousel .carousel-navigation .carousel-nav-left,
.hero-carousel .carousel-navigation .carousel-nav-right {
  padding: 1em;
}
.hero-carousel .carousel-navigation.is-centered {
  justify-content: center;
}
.hero-carousel .carousel-navigation.is-overlay {
  align-items: center;
  justify-content: space-between;
  z-index: 20;
}
.hero-carousel .carousel-navigation.is-overlay .carousel-nav-left,
.hero-carousel .carousel-navigation.is-overlay .carousel-nav-right {
  height: 2.2em;
  width: 2em;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #4a4a4a;
  z-index: 99;
}
.hero-carousel .carousel-navigation.is-overlay .carousel-nav-left:hover,
.hero-carousel .carousel-navigation.is-overlay .carousel-nav-right:hover {
  cursor: pointer;
}
.hero-carousel .carousel-navigation.is-overlay .carousel-nav-right {
  left: auto;
  right: 0;
}
.hero-carousel.is-reversing .carousel-container {
  transform: translateX(-100%);
}
.hero-carousel.is-reversing.is-2 .carousel-container {
  transform: translateX(calc(-100% / 2));
}
.hero-carousel.is-reversing.is-3 .carousel-container {
  transform: translateX(calc(-100% / 3));
}
.hero-carousel.is-reversing.is-4 .carousel-container {
  transform: translateX(calc(-100% / 4));
}
.hero-carousel.is-reversing.is-5 .carousel-container {
  transform: translateX(calc(-100% / 5));
}

.carousel.carousel-animate-slide.carousel-animated .carousel-container,
.hero-carousel.carousel-animate-slide.carousel-animated .carousel-container {
  transform: none;
  transition: transform 0.5s ease-in-out;
}
.carousel.carousel-animate-fade .carousel-item,
.hero-carousel.carousel-animate-fade .carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease-in-out;
}
.carousel.carousel-animate-fade .carousel-item.is-active,
.hero-carousel.carousel-animate-fade .carousel-item.is-active {
  opacity: 1;
}
.carousel.carousel-animate-fade .carousel-item:not(.is-active),
.hero-carousel.carousel-animate-fade .carousel-item:not(.is-active) {
  opacity: 0;
} */