full-width-full-height-side-boxes-with-arrow.css

File contents

/* TEMPLATE MODS */

.title, .sidebar, #social-counters, #breadcrumbs, #prefooter_wrapper, footer, #upperbar, #lowerbar, #navbar {display: none}
div#core-content.container, .span12 {width: 100%}


/* FULL SCREEN FULL HEIGHT STUFF */

html, body { margin:0; padding:0; }

.fullscreen-img { 
  position:absolute; 
  width:100%; 
  height:80%; 
  background-image: url(/artsandsciences/images/banners-bg/immigration.jpg); 
  background-size:cover 
}

.content-underneath { 
  position:absolute; 
  top:80%; 
  width:100% 
}

.page-content { padding:0 1em 1em; max-width:64em; margin:auto }

/* LEFT AND RIGHT PANELS IN HERO BANNER */

#left-panel {width: 50%; height: 100%; float: left; position: relative; background-color: #00788a;}
#right-panel {width: 50%; height: 100%; float: right; background-image: url(/artsandsciences/images/banners-bg/bg-banner-student-01.jpg); background-size:cover; background-position: 70% 50%}

#left-panel:after {
        left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(204, 204, 204, 0);
	border-left-color: #00788a;
	border-width: 30px;
	margin-top: -30px;
}

main {
  position: relative;
  background-color:rgba(0,0,0,0.0);
  height: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  overflow: auto;
  border: 0px solid red;
}

main div {
  background-color: #000;
  color: white;
  width: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
  overflow: auto;
  text-align: center;
}

@media all and (max-width: 979px) {
  #core-content {padding: 0em;}
  #left-panel {width: 100%; height: 50%;float: none; display: block}
  #right-panel {width: 100%; height: 50%; float: none}
  #left-panel:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 120, 138, 0);
	border-top-color: #00788a;
	border-width: 30px;
	margin-left: -30px;
}
}


@media all and (max-width: 400px) {
  main div {width: 90%;}
}