#grid[data-columns]::before {
  content: '3 .column.size-1of3';
  margin-top: 60px;
}


/* These are the classes that are going to be applied: */
.column { float: left; padding-bottom:50; }
.size-1of1 { width: 100%; margin:0;}
.size-1of2 { width: 50%; margin:0;}
.size-1of3 { width: 33.333%; margin:0;}


@media screen and (max-width: 480px){
    #grid[data-columns]::before {
            content: '1 .column.size-1of1';
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    #grid[data-columns]::before {
            content: '2 .column.size-1of2';
    }
}

@media screen and (min-width: 769px) {
    #grid[data-columns]::before {
            content: '3 .column.size-1of3';
    }
}


body{
	margin: 0;
	padding: 0;
	font-family: 'Inconsolata', sans-serif;
	font-weight: 400;
	letter-spacing: 0.05em;
	font-size: 14px;
	color: #FFFFFF;
	background-color: black;
}


   /* body {
      animation: colorchange 75s; /* animation-name followed by duration in seconds you could also use milliseconds (ms) or something like 2.5s /
      -webkit-animation: colorchange 75s; /* Chrome and Safari /
    }

    @keyframes colorchange
    {
      0%   {background: red;}
      25%  {background: purple;}
      50%  {background: blue;}
      75%  {background: green;}
      100% {background: red;}
    }

    @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate /
    {
      0%   {background: red;}
      25%  {background: purple;}
      50%  {background: blue;}
      75%  {background: green;}
      100% {background: red;}
    }*/

p {
	font-family: 'Inconsolata', sans-serif;
	font-weight: 400;
	letter-spacing: 0.05em;
	font-size: 14px;
	color: #FFFFFF;
	
}

h1 {
	font-family: 'Inconsolata', sans-serif;
	font-weight: 700;
	letter-spacing: 0.05em;
	font-size: 14px;
	color: #FFFFFF;
}

h2 {
	margin: 0;
	padding: 0;
	font-family: 'Inconsolata', sans-serif;
	font-weight: 700;
	letter-spacing: 0.05em;
	font-size: 14px;
	color: #000000;
}

.theBox {
	margin-top: -4px;
	
}

.mydiv{
    width:500px;
    height:500px;
    background-repeat:no-repeat;
}

#infoHeader {
	position: fixed;
    top: 0px;
    right: 0px;
    width: 20%;
}

#infoWrapper {
	position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.info {
	background: url("img_48.jpg");
	background-color: black;
}

.info a {
	font-family: 'Inconsolata', sans-serif;
	font-weight: 400;
	letter-spacing: 0.05em;
	font-size: 14px;
	color: #FFFFFF;
	text-decoration: none;
}

.main_image {
	background-image: url("img_48.jpg");
	opacity: 0.5;}

section {
  max-width: 480px;
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 10px;
  position: relative;
}



#header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
	height: 60px;
    /*background-color: black;*/
	
	z-index: 9999;
	
}

#wrapper {
	position: relative;
	margin-top: 60px;
	
	
}

#wrapper_new {
	position: relative;
	z-index: 0;
}

#hero {
	position: absolute;
	width: 100%;
	height: 75%;
}

#right {
	width: 70%;
	text-align: right;
	padding: 20px;
	vertical-align: middle;
	float: right;
	
}

#left {

	text-align: left;
	padding: 10px;
	float: left;
}

a {
	font-family: 'Inconsolata', sans-serif;
	font-weight: 700;
	letter-spacing: 0.05em;
	font-size: 14px;
	color: #FFFFFF;
	background-color: black;
}

.rotating-item {
	display: none;
	position: absolute;
	width: 100%;
}



#slideshow, img.bgM {
  position: fixed;
  width: 100%
  height: auto;
  top: 0;
  left: 0;
  background-repeat:repeat;
  z-index:-9999;
}

#bgcolor {
  position: relative;
  width: 100%
  height: auto;
  background-color: rgba(0,0,0,0.7);
  z-index:-1;
}


/*
a:link {
    color: #FFFFFF;
	text-decoration: none;
}


a:visited {
    color: #FFFFFF;
}


a:hover {
    color: #FFFFFF;
}


a:active {
    color: #FFFFFF;
}

*/