Eclectic Media Git eclecticmedia.space / master scss / _demo.scss
master

Tree @master (Download .tar.gz)

_demo.scss @masterraw · history · blame

#Demo {
	margin: 0; padding: 0;
	// height: 100%;
  @media screen and (min-width: 768px) {
    height: 48rem;
  }
	width: 100%;

	animation-duration: 3s;

	.row {
		height: 100%;
		width: 100%;
		margin: 0; padding: 0;
		margin: 1rem 0;
	}

	.col-8 {
		padding: 0;
	}

	img {
		max-width: 100%;
		max-height: 100%;
		position: relative;
		top: 50%; left: 50%;
		transform: translate(-50%, -50%);
	}

  @media screen and (min-width: 768px) {
    hr {
      display: none;
    }
  }
}

@media screen and (min-width: 768px) {
  .demo-header {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }

  .demo-body {
    .btn { width: 100%; }
  }
}

.demo-thin {
  .row {
    margin: 0; padding: 0;
    .col-11, .col-1 {
      margin: 0; padding: 0;
    }
  }

  .demo-img {
    img {
      max-height: 100%;
      max-width: 100%;
    }
  }


  .demo-header {
    padding: 2rem;
  }
  .demo-first {
    padding: 0 0 0 2rem;
  }
  .demo-alt {
  }
}

@media screen and (max-width: 768px) {
  .demo-wide {
    display: none;
  }
}
@media screen and (min-width: 767px) {
  .demo-thin {
    display: none;
  }
}