/* style.css */

body,
html,
div {
     margin: 0;
     padding:0;
 }
 
 ul {
  list-style: none;
  margin-top: 10px;
  padding: 0;
}
li {
	font-weight: bold;	
}
a {	
	text-decoration: none;
	font-weight: bold;
	color: #0033FF;
}
.page {
     margin: 0 auto;
     max-width: 99%;
     overflow:hidden;
     position:relative;
}

/* Reusable column setup */
.col {
    border:0px solid rgba(0,0,0,0);
    float:left;
	 overflow:auto;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -moz-background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;
    background: #00FFFF;
	margin-bottom: 12px;
}

/* Float Center Code */
.float_center {
  float: right;

  position: relative;
  left: -33.33%; 
  text-align: left;
}

    @media screen and (min-width: 0px) and (max-width: 319px) {

        .row {
            margin-left:-12px;
        }
        .col {
            border-left-width:0px;
        	padding:0 0px;
            height:100px;
        }
        
        .span_1 {
            width:50%;
        }
        /* Using .col to target ALL columns and make them 100% */
        .span_2,
        .col {
            width:100%;
            margin-left:0;				
        }
    }

    @media screen and (min-width: 320px) and (max-width: 919px) {

        .col {
            margin-left:2%;
        	padding:0 2%;
        }

        .row .col:first-child {
            margin-left:0;
        }

        .span_1 {
            width:15.0%;
        }
    
        .span_2,
        .navigation,
        .media_block {
            width:32.0%;
			
        }
        .navigation {
            height: 400px;
				 
        }
        .span_3 {
            width:49.0%;
        }
        .span_4,
        .main_content {
            width:66.0%;
            height: 400px;
        }
        .span_5 {
            width:83.0%;
        }
        .span_6,
        .header,
        .footer,
        .related_content {
            width:99.9%;
            height: 100px;				
            border-left-width:12px;
				padding:0 12px;
        }
		
    }

  
    @media screen and (min-width: 920px) {

        .row {
            margin-left:-12px;
        }
        .col {
            border-left-width:12px;
        	padding:0 12px;
        }

        .span_1 {
            width:8.33333333333%;
        }
        .span_2 {
            width:16.6666666667%;
        }
        .span_3,
        .navigation,
        .related_content {
            width:25.0%;
            height: 400px;
				background: #7FFFD4;
        }
        .span_4,
        .media_block {
            width:33.3333333333%;
            height: 200px;
				background: #008B8B;
        }
        .span_5 {
            width:41.6666666667%;
        }
        .span_6,
        .main_content {
            width:50.0%;
            height: 400px;
        }
        .span_7 {
            width:58.3333333333%;
        }
        .span_8,  {
            width:66.6666666667%;
        }
        .span_9 {
            width:75.0%;
        }
        .span_10 {
            width:83.3333333333%;
        }
        .span_11 {
            width:91.6666666667%;
        }
        .span_12,
        .header,
        .footer {
            width:100%;
            height: 100px;
            margin-left:0;
				background: #6495ED;
        }
    }

	.css-slideshow {
position: relative;			/* positioning facilities */
max-width: 300px;			/* maximum width of the image */
height: 224px;
margin: 1em auto .5em auto;				/* some margin */
font-family: "Montserrat", sans-serif;	/* just a custom font */
font-weight: 300;						/* font-weight, semibold */
}

.css-slideshow figure {
margin: 0;					/* ensuring there is no margin */
max-width: 300px;
height: 224px;
background: #fff;			/* white background */
position: absolute;			/* positioning facilities */
}

.css-slideshow img {				/* a shadow for our box wrapper */
-webkit-box-shadow: 0 0 2px #666;
box-shadow: 0 0 2px #666;
}

/* Give the figcaption a 0% opacity at first */
.css-slideshow figcaption {
position: absolute;
top: 5px;
color: #fff;
background: rgba(0,0,0, .3);
font-size: .8em;
padding: 8px 12px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-ms-transition: opacity .5s;
transition: opacity .5s;	/* transition duration */
}

/* Give the figcaption a 100% opacity at first */
.css-slideshow:hover figure figcaption {
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-ms-transition: opacity .5s;
transition: opacity .5s;		/* transition duration */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

/* Here every child of css-transition gets animated */
.css-slideshow figure:nth-child(1) {
-webkit-animation: xfade 48s 42s  infinite;
-moz-animation: xfade 48s 42s  infinite;
-ms-animation: xfade 48s 42s infinite;
-o-animation: xfade 48s 42s infinite;
animation: xfade 48s 42s infinite;
}
.css-slideshow figure:nth-child(2) {
-webkit-animation: xfade 48s 36s infinite;
-moz-animation: xfade 48s 36s infinite;
-ms-animation: xfade 48s 36s infinite;
-o-animation: xfade 48s 36s infinite;
animation: xfade 48s 36s infinite;
}
.css-slideshow figure:nth-child(3) {
-webkit-animation: xfade 48s 30s infinite;
-moz-animation: xfade 48s 30s infinite;
-ms-animation: xfade 48s 30s infinite;
-o-animation: xfade 48s 30s infinite;
animation: xfade 48s 30s infinite;
}
.css-slideshow figure:nth-child(4) {
-webkit-animation: xfade 48s 24s infinite;
-moz-animation: xfade 48s 24s infinite;
-ms-animation: xfade 48s 24s infinite;
-o-animation: xfade 48s 24s infinite;
animation: xfade 48s 24s infinite;
}
.css-slideshow figure:nth-child(5) {
-webkit-animation: xfade 48s 18s infinite;
-moz-animation: xfade 48s 18s infinite;
-ms-animation: xfade 48s 18s infinite;
-o-animation: xfade 48s 18s infinite;
animation: xfade 48s 18s infinite;
}
/*.css-slideshow figure:nth-child(6) {
-webkit-animation: xfade 48s 12s infinite;
-moz-animation: xfade 48s 12s infinite;
-ms-animation: xfade 48s 12s infinite;
-o-animation: xfade 48s 12s infinite;
animation: xfade 48s 12s infinite;
}
.css-slideshow figure:nth-child(7) {
-webkit-animation: xfade 48s 6s infinite;
-moz-animation: xfade 48s 6s infinite;
-ms-animation: xfade 48s 6s infinite;
-o-animation: xfade 48s 6s infinite;
animation: xfade 48s 6s infinite;
}
.css-slideshow figure:nth-child(8) {
-webkit-animation: xfade 48s 0s infinite;
-moz-animation: xfade 48s 0s infinite;
-ms-animation: xfade 48s 0s infinite;
-o-animation: xfade 48s 0s infinite;
animation: xfade 48s 0s infinite;
}*/


@keyframes "xfade" {
 0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
 }
14.67% {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
16.67% {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}
 98% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity=0);
   	opacity: 0;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
 }
}
@-moz-keyframes xfade {
 0% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
14.67% {
	filter: alpha(opacity=100);
	opacity: 1;
}
16.67% {
	filter: alpha(opacity=0);
	opacity: 0;
}
 98% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
}
@-webkit-keyframes "xfade" {
 0% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
14.67% {
	filter: alpha(opacity=100);
	opacity: 1;
}
16.67% {
	filter: alpha(opacity=0);
	opacity: 0;
}
 98% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
}
@-ms-keyframes "xfade" {
 0% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
14.67% {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
16.67% {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}
 98% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
}
@-o-keyframes "xfade" {
 0% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
14.67% {
	filter: alpha(opacity=100);
	opacity: 1;
}
16.67% {
	filter: alpha(opacity=0);
	opacity: 0;
}
 98% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
}