Base CSS to get ready for responsive layout

base-responsive.css

/* ==================================
   Responsive Styling and Layout
   ==================================  */

/* ================= Use Border Box model ================= */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* ================= Basic Responsive Images and Video ================= */
img,video{
  width: auto;
  height: auto;
  max-width: 100%;
}

/* ================= Responsive Embedded Video ================= */
/* to use this add a div with class videoWrapper around the iframe markup copied from YouTube or Vimeo. Then also add a ratio-16-9 (most common) or ratio-4-3 class to the wrapper depending on the aspect ratio of your video */
/* More info here: https://codepen.io/profstein/pen/mArLRj */
.videoWrapper {
	position: relative;
	padding-top: 25px;
	height: 0;
  clear:both;
  outline:1px solid red;
}

.videoWrapper.ratio-16-9{
    padding-bottom: 56.25%; /* 16:9 */
}

.videoWrapper.ratio-4-3{
    padding-bottom: 75%; /* 4:3 */
}

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

/* ================= LAYOUT and MEDIA QUERIES ================= */
/* Add your CSS for the layout and media queries here */