.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
   padding: 0.375rem 0.75rem;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  }

.btn-primary {
  color: #fff;
  background-color: #800000;
  border-color: #ffc800;
}
.container {
  
  align-items: center;
}

.section {
clear: both;
padding: 1%;
margin: 0px;
}
 
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout)  <div id="fade" class="black_overlay"></div> */
}
 
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
 
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
 
 
@media only screen and (max-width: 780px) {
.col { 
margin: 1% 0 1% 0%;
}
}
 
.span_3_of_3 {
width: 100%; 
}
 
.span_1_of_32r {
width: 31.13%; 
height:300px;
}
 
	.span_1_of_32rp {
width: 63%; 
height:700px;
}
	
.span_1_of_3 {
width: 49%; 
}
 
.span_1_of_3t {
width: 31%; 
}
 
.span_1_of_3p {
width:63%; 
}
.abf {
height: 500px; 
}
@media (max-width: 980px) {.span_3_of_3 {
width: 100%; 
}
.span_1_of_32r {
width: 100%; 
}
	.span_1_of_32rp {
width: 100%; 
		height:450px;
}
.span_1_of_3 {
width: 100%;
 
}
.span_1_of_3p {
width:100%; 
}
.span_1_of_3t {
width: 100%; 
}
.abf 
{
height: auto; 
}}
@media (max-width: 768px) {.span_3_of_3 {
width: 100%; 
}
.span_1_of_32r {
width: 100%; 
height:auto;
}
	.span_1_of_32rp {
width: 100%; 
		height:450px;
}
.span_1_of_3 {
width: 100%;
 
}
.span_1_of_3p {
width:100%; 
}
.span_1_of_3t {
width: 100%; 
}
.abf 
{
height: auto; 
}}
@media (max-width: 600px) {.span_3_of_3 {
width: 100%; 
}
.span_1_of_32r {
width: 100%; 
height:auto;
}
	.span_1_of_32rp {
width: 100%; 
		height:450px;
}
.span_1_of_3 {
width: 100%;
 
}
.span_1_of_3p {
width:100%; 
}
.span_1_of_3t {
width: 100%; 
}
.abf 
{
height: auto; 
}}
@media (max-width: 480px) {.span_3_of_3 {
width: 100%; 
}
.span_1_of_32r {
width: 100%; 
height:auto;
}
	.span_1_of_32rp {
width: 100%; 
		height:450px;
}
.span_1_of_3 {
width: 100%;
 
}
.span_1_of_3p {
width:100%; 
}
 
.span_1_of_3t {
width: 100%; 
}
.abf 
{
height: auto; 
}
}
 
@media (max-width: 320px) {.span_3_of_3 {
width: 100%; 
}
.span_1_of_32r {
width: 100%; 
height:auto;
}
	.span_1_of_32rp {
width: 100%; 
		height:450px;
}
.span_1_of_3 {
width: 100%;
 
}
.span_1_of_3p {
width:100%; 
}
 
.span_1_of_3t {
width: 100%; 
}
.abf 
{
height: auto; 
}}
 
@media only screen and (max-width: 780px) {
.span_3_of_3 {
width: 100%; 
}
.span_1_of_32r {
width: 100%; 
height:auto;
}
	.span_1_of_32rp {
width: 100%; 
		height:450px;
}
 
.span_1_of_3 {
width: 100%;
 
}
 
.span_1_of_3p {
width:100%; 
}
.span_1_of_3t {
width: 100%; 
}
.abf 
{
height: auto; 
}
}
 

        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 120%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: none;
			background-color: red;
            position: absolute;
            top: 2%;
            left: 25%;
            width: 50%;
            padding:12px;
            border: 7px solid #003366;
			box-shadow: 0px 0px  10px 10px #888888;
            z-index:1002;
            overflow: auto;
        }
		
		
		@media screen and (max-width: 768px){
	.white_content {
            display: none;
            position: absolute;
            top: 2%;
            left: 10%;
            width: 80%;
            padding:8px;
            border: 1px solid red;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
		}